demo/bundle.js
/**
               * Updates the SVG path of the focus outline element based on the notchWidth
               * and the RTL context.
               * @param {number} notchWidth
               * @param {boolean=} isRtl
               * @private
               */
Updates the SVG path of the focus outline element based on the notchWidth
and the RTL context.
@param {number} notchWidth
@param {boolean=} isRtl
@private
Updates the SVG path of the focus outline element based on the notchWidth and the RTL context . @param { number } notchWidth @param { boolean = } isRtl @private
updateSvgPath_(notchWidth, isRtl) {
                const radiusStyleValue = this.adapter_.getIdleOutlineStyleValue('border-radius') ||
                    this.adapter_.getIdleOutlineStyleValue('border-top-left-radius');
                const radius = parseFloat(radiusStyleValue);
                const width = this.adapter_.getWidth();
                const height = this.adapter_.getHeight();
                const cornerWidth = radius + 1.2;
                const leadingStrokeLength = Math.abs(11 - cornerWidth);
                const paddedNotchWidth = notchWidth + 8;
                const pathMiddle = 'a' + radius + ',' + radius + ' 0 0 1 ' + radius + ',' + radius
                  + 'v' + (height - (2 * cornerWidth))
                  + 'a' + radius + ',' + radius + ' 0 0 1 ' + -radius + ',' + radius
                  + 'h' + (-width + (2 * cornerWidth))
                  + 'a' + radius + ',' + radius + ' 0 0 1 ' + -radius + ',' + -radius
                  + 'v' + (-height + (2 * cornerWidth))
                  + 'a' + radius + ',' + radius + ' 0 0 1 ' + radius + ',' + -radius;
                let path;
                if (!isRtl) {
                  path = 'M' + (cornerWidth + leadingStrokeLength + paddedNotchWidth) + ',' + 1
                    + 'h' + (width - (2 * cornerWidth) - paddedNotchWidth - leadingStrokeLength)
                    + pathMiddle
                    + 'h' + leadingStrokeLength;
                } else {
                  path = 'M' + (width - cornerWidth - leadingStrokeLength) + ',' + 1
                    + 'h' + leadingStrokeLength
                    + pathMiddle
                    + 'h' + (width - (2 * cornerWidth) - paddedNotchWidth - leadingStrokeLength);
                }
                this.adapter_.setOutlinePathAttr(path);
              }
updateSvgPath_ ( notchWidth , isRtl ) { const radiusStyleValue = this . adapter_ . getIdleOutlineStyleValue ( 'border-radius' ) || this . adapter_ . getIdleOutlineStyleValue ( 'border-top-left-radius' ) ; const radius = parseFloat ( radiusStyleValue ) ; const width = this . adapter_ . getWidth ( ) ; const height = this . adapter_ . getHeight ( ) ; const cornerWidth = radius + 1.2 ; const leadingStrokeLength = Math . abs ( 11 - cornerWidth ) ; const paddedNotchWidth = notchWidth + 8 ; const pathMiddle = 'a' + radius + ',' + radius + ' 0 0 1 ' + radius + ',' + radius + 'v' + ( height - ( 2 * cornerWidth ) ) + 'a' + radius + ',' + radius + ' 0 0 1 ' + - radius + ',' + radius + 'h' + ( - width + ( 2 * cornerWidth ) ) + 'a' + radius + ',' + radius + ' 0 0 1 ' + - radius + ',' + - radius + 'v' + ( - height + ( 2 * cornerWidth ) ) + 'a' + radius + ',' + radius + ' 0 0 1 ' + radius + ',' + - radius ; let path ; if ( ! isRtl ) { path = 'M' + ( cornerWidth + leadingStrokeLength + paddedNotchWidth ) + ',' + 1 + 'h' + ( width - ( 2 * cornerWidth ) - paddedNotchWidth - leadingStrokeLength ) + pathMiddle + 'h' + leadingStrokeLength ; } else { path = 'M' + ( width - cornerWidth - leadingStrokeLength ) + ',' + 1 + 'h' + leadingStrokeLength + pathMiddle + 'h' + ( width - ( 2 * cornerWidth ) - paddedNotchWidth - leadingStrokeLength ) ; } this . adapter_ . setOutlinePathAttr ( path ) ; }
Updates the SVG path of the focus outline element based on the notchWidth
 and the RTL context.
Updates the SVG path of the focus outline element based on the notchWidth and the RTL context .
// Fall back to reading a specific corner's style because Firefox doesn't report the style on border-radius. // The right, bottom, and left sides of the outline follow the same SVG path.