npm - @infineon/infineon-design-system-stencil - Versions diffs - 39.4.4-canary.0 → 39.5.0--canary.2134.ef608256dd1abad1333d432c8cc2958560d19738.0 - Mend

@infineon/infineon-design-system-stencil 39.4.4-canary.0 → 39.5.0--canary.2134.ef608256dd1abad1333d432c8cc2958560d19738.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1210) hide show

package/dist/collection/components/icon/infineonIconStencil.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"infineonIconStencil.js","sourceRoot":"","sources":["../../../src/components/icon/infineonIconStencil.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Host, Event, EventEmitter, Watch, State, Element } from '@stencil/core';\r\nimport { getIcon } from '@infineon/infineon-icons'\r\nimport { trackComponent } from '../../global/utils/tracking'; \r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\n\r\n@Component({\r\n tag: 'ifx-icon',\r\n styleUrl: './infineonIconStencil.scss'\r\n})\r\n\r\nexport class InfineonIconStencil {\r\n @Element() el: HTMLElement;\r\n @Prop({ mutable: true }) icon: string = \"\"\r\n @Prop({ mutable: true }) ifxIcon: any;\r\n @State() internalIcon: string;\r\n @Event() consoleError: EventEmitter<boolean>;\r\n\r\n @Watch('icon')\r\n updateIcon(newIcon: string) { \r\n this.internalIcon = newIcon;\r\n this.setIcon()\r\n }\r\n\r\n convertStringToHtml(htmlString) { \r\n const div = document.createElement('div')\r\n div.innerHTML = htmlString\r\n return div.firstChild\r\n }\r\n\r\n convertHtmlToObject(htmlElement) { \r\n let pathToObject = Array\r\n .from(htmlElement.attributes, ({ name, value }) => ({ name, value }))\r\n .reduce((acc, current) => {\r\n acc[current.name] = current.value\r\n return acc\r\n }, {})\r\n\r\n return pathToObject\r\n }\r\n\r\n convertPathsToVnode(htmlPath) { \r\n let svgPaths = []\r\n const parentPath = this.convertHtmlToObject(htmlPath);\r\n const parentPathToVnode = h(\"path\", parentPath);\r\n svgPaths.push(parentPathToVnode)\r\n if(htmlPath.firstChild) { \r\n const paths = htmlPath.querySelectorAll('path');\r\n const pathLength = htmlPath.querySelectorAll('path').length;\r\n for(let i = 0; i < pathLength; i++) { \r\n let pathToObject = this.convertHtmlToObject(paths[i])\r\n let objToVnode = h(\"path\", pathToObject)\r\n svgPaths.push(objToVnode)\r\n } \r\n }\r\n return svgPaths\r\n }\r\n\r\n getSVG(svgPath) {\r\n const htmlPath = this.convertStringToHtml(this.ifxIcon) as SVGElement;\r\n const width = htmlPath.getAttribute('width');\r\n const height = htmlPath.getAttribute('height');\r\n const fill = htmlPath.getAttribute('fill');\r\n const viewBox = htmlPath.getAttribute('viewBox');\r\n \r\n return <svg class=\"inline-svg\" width={width} height={height} xmlns=\"http://www.w3.org/2000/svg\" fill={fill} viewBox={viewBox}>{...svgPath}</svg>\r\n }\r\n\r\n constructIcon() {\r\n if(this.ifxIcon) {\r\n const htmlPath = this.convertStringToHtml(this.ifxIcon)\r\n const svgPath = this.convertPathsToVnode(htmlPath)\r\n const SVG = this.getSVG(svgPath)\r\n return SVG;\r\n } else if(this.icon !== \"\") {\r\n this.consoleError.emit(true)\r\n return;\r\n } else { \r\n return;\r\n }\r\n }\r\n\r\nsetIcon() { \r\n const toCamelCase = str =>\r\n str\r\n .replace(/[-_]+(.)/g, (_, chr) => chr.toUpperCase()) // handle - and _ to uppercase\r\n .replace(/^(.)/, (m) => m.toLowerCase()); // ensure first letter is lowercase\r\n\r\n const iconName = toCamelCase(this.internalIcon);\r\n this.ifxIcon = getIcon(iconName);\r\n}\r\n\r\n isInsideAgGrid(el: HTMLElement): boolean {\r\n let current = el;\r\n while (current) {\r\n if (current.className?.toLowerCase().startsWith('ag-')) {\r\n return true;\r\n }\r\n current = current.parentElement;\r\n }\r\n return false;\r\n}\r\n\r\n isInsideChoices(el: HTMLElement): boolean {\r\n let current = el;\r\n while (current) {\r\n if (current.className?.toLowerCase().startsWith('choices__')) {\r\n return true;\r\n }\r\n current = current.parentElement;\r\n }\r\n return false;\r\n }\r\n\r\n componentWillLoad() {\r\n this.internalIcon = this.icon;\r\n this.setIcon()\r\n }\r\n\r\n async componentDidLoad() { \r\n if(!isNestedInIfxComponent(this.el)) { \r\n if(!this.isInsideAgGrid(this.el) && !this.isInsideChoices(this.el)) { \r\n const framework = detectFramework();\r\n trackComponent('ifx-icon', await framework)\r\n }\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <Host>\r\n {this.constructIcon()}\r\n </Host>\r\n );\r\n }\r\n}"]}
1	+ {"version":3,"file":"infineonIconStencil.js","sourceRoot":"","sources":["../../../src/components/icon/infineonIconStencil.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Host, Event, EventEmitter, Watch, State, Element } from '@stencil/core';\nimport { getIcon } from '@infineon/infineon-icons'\nimport { trackComponent } from '../../global/utils/tracking'; \nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n tag: 'ifx-icon',\n styleUrl: './infineonIconStencil.scss'\n})\n\nexport class InfineonIconStencil {\n @Element() el: HTMLElement;\n @Prop({ mutable: true }) icon: string = \"\"\n @Prop({ mutable: true }) ifxIcon: any;\n @State() internalIcon: string;\n @Event() consoleError: EventEmitter<boolean>;\n\n @Watch('icon')\n updateIcon(newIcon: string) { \n this.internalIcon = newIcon;\n this.setIcon()\n }\n\n convertStringToHtml(htmlString) { \n const div = document.createElement('div')\n div.innerHTML = htmlString\n return div.firstChild\n }\n\n convertHtmlToObject(htmlElement) { \n let pathToObject = Array\n .from(htmlElement.attributes, ({ name, value }) => ({ name, value }))\n .reduce((acc, current) => {\n acc[current.name] = current.value\n return acc\n }, {})\n\n return pathToObject\n }\n\n convertPathsToVnode(htmlPath) { \n let svgPaths = []\n const parentPath = this.convertHtmlToObject(htmlPath);\n const parentPathToVnode = h(\"path\", parentPath);\n svgPaths.push(parentPathToVnode)\n if(htmlPath.firstChild) { \n const paths = htmlPath.querySelectorAll('path');\n const pathLength = htmlPath.querySelectorAll('path').length;\n for(let i = 0; i < pathLength; i++) { \n let pathToObject = this.convertHtmlToObject(paths[i])\n let objToVnode = h(\"path\", pathToObject)\n svgPaths.push(objToVnode)\n } \n }\n return svgPaths\n }\n\n getSVG(svgPath) {\n const htmlPath = this.convertStringToHtml(this.ifxIcon) as SVGElement;\n const width = htmlPath.getAttribute('width');\n const height = htmlPath.getAttribute('height');\n const fill = htmlPath.getAttribute('fill');\n const viewBox = htmlPath.getAttribute('viewBox');\n \n return <svg class=\"inline-svg\" width={width} height={height} xmlns=\"http://www.w3.org/2000/svg\" fill={fill} viewBox={viewBox}>{...svgPath}</svg>\n }\n\n constructIcon() {\n if(this.ifxIcon) {\n const htmlPath = this.convertStringToHtml(this.ifxIcon)\n const svgPath = this.convertPathsToVnode(htmlPath)\n const SVG = this.getSVG(svgPath)\n return SVG;\n } else if(this.icon !== \"\") {\n this.consoleError.emit(true)\n return;\n } else { \n return;\n }\n }\n\nsetIcon() { \n const toCamelCase = str =>\n str\n .replace(/[-_]+(.)/g, (_, chr) => chr.toUpperCase()) // handle - and _ to uppercase\n .replace(/^(.)/, (m) => m.toLowerCase()); // ensure first letter is lowercase\n\n const iconName = toCamelCase(this.internalIcon);\n this.ifxIcon = getIcon(iconName);\n}\n\n isInsideAgGrid(el: HTMLElement): boolean {\n let current = el;\n while (current) {\n if (current.className?.toLowerCase().startsWith('ag-')) {\n return true;\n }\n current = current.parentElement;\n }\n return false;\n}\n\n isInsideChoices(el: HTMLElement): boolean {\n let current = el;\n while (current) {\n if (current.className?.toLowerCase().startsWith('choices__')) {\n return true;\n }\n current = current.parentElement;\n }\n return false;\n }\n\n componentWillLoad() {\n this.internalIcon = this.icon;\n this.setIcon()\n }\n\n async componentDidLoad() { \n if(!isNestedInIfxComponent(this.el)) { \n if(!this.isInsideAgGrid(this.el) && !this.isInsideChoices(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-icon', await framework)\n }\n }\n }\n\n render() {\n return (\n <Host>\n {this.constructIcon()}\n </Host>\n );\n }\n}"]}

package/dist/collection/components/icon/infineonIconStencil.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"infineonIconStencil.stories.js","sourceRoot":"","sources":["../../../src/components/icon/infineonIconStencil.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,eAAe;IACb,KAAK,EAAE,iBAAiB;IACxB,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,IAAI,EAAE;QACJ,IAAI,EAAE,YAAY;KACnB;IACD,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,WAAW,EAAE,eAAe;YAC5B,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC;YAC3B,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,KAAK,EAAE;gBACL,QAAQ,EAAE,gBAAgB;aAC3B;SACF;QACD,YAAY,EAAE;YACZ,MAAM,EAAE,cAAc;YACtB,WAAW,EAAE,4CAA4C;YACzD,KAAK,EAAE;gBACL,QAAQ,EAAE,eAAe;gBACzB,IAAI,EAAE;oBACJ,OAAO,EAAE,uBAAuB;oBAChC,MAAM,EACJ,yLAAyL;iBAC5L;aACF;SACF;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IACnC,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IACnD,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IACnC,OAAO,CAAC,gBAAgB,CAAC,cAAc,EAAE,MAAM,CAAC,cAAc,CAAC,CAAC,CAAC;IACjE,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import * as icons from '@infineon/infineon-icons'; \r\nimport { action } from '@storybook/addon-actions';\r\n\r\nexport default {\r\n title: 'Components/Icon',\r\n tags: ['autodocs'],\r\n\r\n args: {\r\n icon: 'c-check-16',\r\n },\r\n argTypes: {\r\n icon: {\r\n description: 'Set the icon.',\r\n options: Object.keys(icons),\r\n control: { type: 'select' },\r\n table: {\r\n category: 'ifx-icon props',\r\n }\r\n },\r\n consoleError: {\r\n action: 'consoleError',\r\n description: 'Custom event emitted when icon is invalid.',\r\n table: {\r\n category: 'custom events',\r\n type: {\r\n summary: 'Framework integration',\r\n detail:\r\n 'React: onConsoleError={handleError}\\nVue:@consoleError=\"handleError\"\\nAngular:(consoleError)=\"handleError()\"\\nVanillaJs:.addEventListener(\"consoleError\", (event) => {//handle error});',\r\n },\r\n },\r\n },\r\n },\r\n};\r\n\r\nconst DefaultTemplate = ({ icon }) => {\r\n const ifxIcon = document.createElement('ifx-icon');\r\n ifxIcon.setAttribute('icon', icon);\r\n ifxIcon.addEventListener('consoleError', action('consoleError'));\r\n return ifxIcon;\r\n};\r\n\r\nexport const Default = DefaultTemplate.bind({});\r\n"]}
1	+ {"version":3,"file":"infineonIconStencil.stories.js","sourceRoot":"","sources":["../../../src/components/icon/infineonIconStencil.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,eAAe;IACb,KAAK,EAAE,iBAAiB;IACxB,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,IAAI,EAAE;QACJ,IAAI,EAAE,YAAY;KACnB;IACD,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,WAAW,EAAE,eAAe;YAC5B,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC;YAC3B,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,KAAK,EAAE;gBACL,QAAQ,EAAE,gBAAgB;aAC3B;SACF;QACD,YAAY,EAAE;YACZ,MAAM,EAAE,cAAc;YACtB,WAAW,EAAE,4CAA4C;YACzD,KAAK,EAAE;gBACL,QAAQ,EAAE,eAAe;gBACzB,IAAI,EAAE;oBACJ,OAAO,EAAE,uBAAuB;oBAChC,MAAM,EACJ,yLAAyL;iBAC5L;aACF;SACF;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IACnC,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IACnD,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IACnC,OAAO,CAAC,gBAAgB,CAAC,cAAc,EAAE,MAAM,CAAC,cAAc,CAAC,CAAC,CAAC;IACjE,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import * as icons from '@infineon/infineon-icons'; \nimport { action } from '@storybook/addon-actions';\n\nexport default {\n title: 'Components/Icon',\n tags: ['autodocs'],\n\n args: {\n icon: 'c-check-16',\n },\n argTypes: {\n icon: {\n description: 'Set the icon.',\n options: Object.keys(icons),\n control: { type: 'select' },\n table: {\n category: 'ifx-icon props',\n }\n },\n consoleError: {\n action: 'consoleError',\n description: 'Custom event emitted when icon is invalid.',\n table: {\n category: 'custom events',\n type: {\n summary: 'Framework integration',\n detail:\n 'React: onConsoleError={handleError}\\nVue:@consoleError=\"handleError\"\\nAngular:(consoleError)=\"handleError()\"\\nVanillaJs:.addEventListener(\"consoleError\", (event) => {//handle error});',\n },\n },\n },\n },\n};\n\nconst DefaultTemplate = ({ icon }) => {\n const ifxIcon = document.createElement('ifx-icon');\n ifxIcon.setAttribute('icon', icon);\n ifxIcon.addEventListener('consoleError', action('consoleError'));\n return ifxIcon;\n};\n\nexport const Default = DefaultTemplate.bind({});\n"]}

package/dist/collection/components/icon-button/icon-button.js CHANGED Viewed

@@ -32,7 +32,7 @@ export class IconButton {
         }
     }
     render() {
-        return (h(Host, { key: 'fed25bf7da7733702a1a614480b716f9bf697c38', "aria-disabled": this.disabled, "aria-label": this.ariaLabel }, this.href ? (h("a", { ref: (el) => (this.focusableElement = el), class: this.getClassNames(), href: !this.disabled ? this.href : undefined, target: this.target, rel: this.target === '_blank' ? 'noopener noreferrer' : undefined }, h("ifx-icon", { icon: this.internalIcon }))) : (h("button", { class: this.getClassNames(), type: "button", disabled: this.disabled }, h("ifx-icon", { icon: this.internalIcon })))));
+        return (h(Host, { key: '2a31f0c17ad2f648807b6da75e145f6b028f6858', "aria-disabled": this.disabled, "aria-label": this.ariaLabel }, this.href ? (h("a", { ref: (el) => (this.focusableElement = el), class: this.getClassNames(), href: !this.disabled ? this.href : undefined, target: this.target, rel: this.target === '_blank' ? 'noopener noreferrer' : undefined }, h("ifx-icon", { icon: this.internalIcon }))) : (h("button", { class: this.getClassNames(), type: "button", disabled: this.disabled }, h("ifx-icon", { icon: this.internalIcon })))));
     }
     getVariantClass() {
         return `${this.variant}` === "secondary"

package/dist/collection/components/icon-button/icon-button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"icon-button.js","sourceRoot":"","sources":["../../../src/components/icon-button/icon-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Host, Method, Element, Listen, Watch, State } from '@stencil/core';\r\nimport { trackComponent } from '../../global/utils/tracking'; \r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\nimport classNames from 'classnames';\r\n\r\n@Component({\r\n tag: 'ifx-icon-button',\r\n styleUrl: 'icon-button.scss',\r\n shadow: true,\r\n})\r\n\r\nexport class IconButton {\r\n @Prop() variant: 'primary' \| 'secondary' \| 'tertiary';\r\n @Prop() size: string;\r\n @Prop() disabled: boolean;\r\n @Prop() icon: string;\r\n @Prop() href: string;\r\n @Prop() target: string = '_self';\r\n @Prop() shape: string = 'round';\r\n @Prop() ariaLabel: string \| null;\r\n @State() internalIcon: string;\r\n @Element() el;\r\n\r\n private focusableElement: HTMLElement;\r\n \r\n @Listen('click', { capture: true })\r\n handleClick(event: Event) {\r\n if (this.disabled) {\r\n event.stopImmediatePropagation();\r\n }\r\n }\r\n\r\n @Watch('icon')\r\n updateIcon(newIcon: string) { \r\n this.internalIcon = newIcon;\r\n }\r\n\r\n @Method()\r\n async setFocus() {\r\n this.focusableElement.focus();\r\n }\r\n\r\n componentWillLoad() {\r\n if (this.shape === '') {\r\n this.shape = 'round';\r\n }\r\n this.internalIcon = this.icon;\r\n }\r\n\r\n async componentDidLoad() { \r\n if(!isNestedInIfxComponent(this.el)) { \r\n const framework = detectFramework();\r\n trackComponent('ifx-icon-button', await framework)\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <Host \r\n aria-disabled={this.disabled}\r\n aria-label={this.ariaLabel}> \r\n {this.href ? (\r\n <a\r\n ref={(el) => (this.focusableElement = el)}\r\n class={this.getClassNames()}\r\n href={!this.disabled ? this.href : undefined} \r\n target={this.target}\r\n rel={this.target === '_blank' ? 'noopener noreferrer' : undefined}\r\n >\r\n <ifx-icon icon={this.internalIcon}></ifx-icon>\r\n </a>\r\n ) : (\r\n <button\r\n class={this.getClassNames()}\r\n type=\"button\"\r\n disabled={this.disabled}\r\n >\r\n <ifx-icon icon={this.internalIcon}></ifx-icon>\r\n </button>\r\n )}\r\n </Host>\r\n );\r\n }\r\n\r\n getVariantClass() {\r\n return `${this.variant}` === \"secondary\"\r\n ? `secondary`\r\n : `${this.variant}` === 'tertiary'\r\n ? `tertiary`\r\n : `primary`;\r\n }\r\n\r\n getSizeClass() {\r\n if (`${this.size}` === \"xs\") {\r\n return \"xs\"\r\n }\r\n else if (`${this.size}` === \"s\") {\r\n return \"s\"\r\n }\r\n else if (`${this.size}` === \"l\") {\r\n return \"l\"\r\n }\r\n else return \"\";\r\n }\r\n\r\n getClassNames() {\r\n return classNames(\r\n 'btn icon-button',\r\n `btn-${this.shape}`,\r\n this.size && `btn-${this.getSizeClass()}`,\r\n `btn-${this.getVariantClass()}`,\r\n this.disabled ? 'disabled' : ''\r\n );\r\n }\r\n}"]}
1	+ {"version":3,"file":"icon-button.js","sourceRoot":"","sources":["../../../src/components/icon-button/icon-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Host, Method, Element, Listen, Watch, State } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking'; \nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\nimport classNames from 'classnames';\n\n@Component({\n tag: 'ifx-icon-button',\n styleUrl: 'icon-button.scss',\n shadow: true,\n})\n\nexport class IconButton {\n @Prop() variant: 'primary' \| 'secondary' \| 'tertiary';\n @Prop() size: string;\n @Prop() disabled: boolean;\n @Prop() icon: string;\n @Prop() href: string;\n @Prop() target: string = '_self';\n @Prop() shape: string = 'round';\n @Prop() ariaLabel: string \| null;\n @State() internalIcon: string;\n @Element() el;\n\n private focusableElement: HTMLElement;\n \n @Listen('click', { capture: true })\n handleClick(event: Event) {\n if (this.disabled) {\n event.stopImmediatePropagation();\n }\n }\n\n @Watch('icon')\n updateIcon(newIcon: string) { \n this.internalIcon = newIcon;\n }\n\n @Method()\n async setFocus() {\n this.focusableElement.focus();\n }\n\n componentWillLoad() {\n if (this.shape === '') {\n this.shape = 'round';\n }\n this.internalIcon = this.icon;\n }\n\n async componentDidLoad() { \n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-icon-button', await framework)\n }\n }\n\n render() {\n return (\n <Host \n aria-disabled={this.disabled}\n aria-label={this.ariaLabel}> \n {this.href ? (\n <a\n ref={(el) => (this.focusableElement = el)}\n class={this.getClassNames()}\n href={!this.disabled ? this.href : undefined} \n target={this.target}\n rel={this.target === '_blank' ? 'noopener noreferrer' : undefined}\n >\n <ifx-icon icon={this.internalIcon}></ifx-icon>\n </a>\n ) : (\n <button\n class={this.getClassNames()}\n type=\"button\"\n disabled={this.disabled}\n >\n <ifx-icon icon={this.internalIcon}></ifx-icon>\n </button>\n )}\n </Host>\n );\n }\n\n getVariantClass() {\n return `${this.variant}` === \"secondary\"\n ? `secondary`\n : `${this.variant}` === 'tertiary'\n ? `tertiary`\n : `primary`;\n }\n\n getSizeClass() {\n if (`${this.size}` === \"xs\") {\n return \"xs\"\n }\n else if (`${this.size}` === \"s\") {\n return \"s\"\n }\n else if (`${this.size}` === \"l\") {\n return \"l\"\n }\n else return \"\";\n }\n\n getClassNames() {\n return classNames(\n 'btn icon-button',\n `btn-${this.shape}`,\n this.size && `btn-${this.getSizeClass()}`,\n `btn-${this.getVariantClass()}`,\n this.disabled ? 'disabled' : ''\n );\n }\n}"]}

package/dist/collection/components/icon-button/icon-button.stories.js CHANGED Viewed

@@ -99,7 +99,7 @@ export default {
         },
     },
 };
-const DefaultTemplate = args => `<ifx-icon-button shape="${args.shape}" variant="${args.variant}" icon="${args.icon}" href="${args.href}" target="${args.target}"  size="${args.size}" disabled="${args.disabled}" aria-label="${args.ariaLabel}">
+const DefaultTemplate = args => `<ifx-icon-button shape="${args.shape}" variant="${args.variant}" icon="${args.icon}" href="${args.href}" target="${args.target}"  size="${args.size}" disabled="${args.disabled}" aria-label="${args.ariaLabel}">
   </ifx-icon-button>`;
 export const Default = DefaultTemplate.bind({});
 //# sourceMappingURL=icon-button.stories.js.map

package/dist/collection/components/icon-button/icon-button.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"icon-button.stories.js","sourceRoot":"","sources":["../../../src/components/icon-button/icon-button.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { icons } from '@infineon/infineon-icons';\r\n\r\nexport default {\r\n title: 'Components/Icon Button',\r\n tags: ['autodocs'],\r\n\r\n args: {\r\n variant: 'primary',\r\n size: 'm',\r\n disabled: false,\r\n icon: 'c-info-16',\r\n href: '',\r\n target: '_blank',\r\n shape: 'round',\r\n ariaLabel: 'Icon Button',\r\n },\r\n\r\n argTypes: {\r\n icon: {\r\n description: 'The icon to be displayed.',\r\n options: Object.keys(icons),\r\n control: { type: 'select' },\r\n table: {\r\n category: 'ifx-icon-button props',\r\n defaultValue: {\r\n summary: 'c-info-16'\r\n }\r\n }\r\n },\r\n variant: {\r\n description: 'Sets the style variant of the icon button.',\r\n control: 'radio',\r\n options: ['primary', 'secondary', 'tertiary'],\r\n table: {\r\n category: 'ifx-icon-button props',\r\n defaultValue: {\r\n summary: 'primary'\r\n }\r\n }\r\n },\r\n disabled: {\r\n description: 'Disables the icon button when set to true.',\r\n control: 'boolean',\r\n table: {\r\n category: 'ifx-icon-button props',\r\n defaultValue: {\r\n summary: 'false'\r\n }\r\n }\r\n },\r\n href: {\r\n description: 'Specifies the URL to which the icon button will link.',\r\n table: {\r\n category: 'ifx-icon-button props',\r\n type: {\r\n summary: 'string'\r\n }\r\n }\r\n },\r\n size: {\r\n description: 'Sets the size of the icon button. Options: s (32px), m (36px) and l (40px).',\r\n control: 'radio',\r\n options: ['s', 'm', 'l'],\r\n table: {\r\n category: 'ifx-icon-button props',\r\n defaultValue: {\r\n summary: 'm'\r\n },\r\n type: {\r\n summary: 's \| m \| l'\r\n }\r\n }\r\n },\r\n target: {\r\n description: 'Determines where to open the linked URL when the button is clicked.',\r\n control: 'radio',\r\n options: ['_blank', '_self', '_parent'],\r\n table: {\r\n category: 'ifx-icon-button props',\r\n defaultValue: {\r\n summary: '_blank'\r\n }\r\n }\r\n },\r\n shape: {\r\n description: 'Defines the shape of the icon button.',\r\n control: 'radio',\r\n options: ['round', 'square'],\r\n table: {\r\n category: 'ifx-icon-button props',\r\n defaultValue: {\r\n summary: 'round'\r\n }\r\n }\r\n },\r\n ariaLabel: {\r\n control: { type: 'text' },\r\n description: 'Set the aria label of the icon button. Enhances accessibility.',\r\n table: {\r\n category: 'ifx-icon-button props'\r\n }\r\n },\r\n },\r\n};\r\n\r\nconst DefaultTemplate = args =>\r\n `<ifx-icon-button shape=\"${args.shape}\" variant=\"${args.variant}\" icon=\"${args.icon}\" href=\"${args.href}\" target=\"${args.target}\" size=\"${args.size}\" disabled=\"${args.disabled}\" aria-label=\"${args.ariaLabel}\">\r\n </ifx-icon-button>`;\r\n\r\nexport const Default = DefaultTemplate.bind({});\r\n"]}
1	+ {"version":3,"file":"icon-button.stories.js","sourceRoot":"","sources":["../../../src/components/icon-button/icon-button.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { icons } from '@infineon/infineon-icons';\n\nexport default {\n title: 'Components/Icon Button',\n tags: ['autodocs'],\n\n args: {\n variant: 'primary',\n size: 'm',\n disabled: false,\n icon: 'c-info-16',\n href: '',\n target: '_blank',\n shape: 'round',\n ariaLabel: 'Icon Button',\n },\n\n argTypes: {\n icon: {\n description: 'The icon to be displayed.',\n options: Object.keys(icons),\n control: { type: 'select' },\n table: {\n category: 'ifx-icon-button props',\n defaultValue: {\n summary: 'c-info-16'\n }\n }\n },\n variant: {\n description: 'Sets the style variant of the icon button.',\n control: 'radio',\n options: ['primary', 'secondary', 'tertiary'],\n table: {\n category: 'ifx-icon-button props',\n defaultValue: {\n summary: 'primary'\n }\n }\n },\n disabled: {\n description: 'Disables the icon button when set to true.',\n control: 'boolean',\n table: {\n category: 'ifx-icon-button props',\n defaultValue: {\n summary: 'false'\n }\n }\n },\n href: {\n description: 'Specifies the URL to which the icon button will link.',\n table: {\n category: 'ifx-icon-button props',\n type: {\n summary: 'string'\n }\n }\n },\n size: {\n description: 'Sets the size of the icon button. Options: s (32px), m (36px) and l (40px).',\n control: 'radio',\n options: ['s', 'm', 'l'],\n table: {\n category: 'ifx-icon-button props',\n defaultValue: {\n summary: 'm'\n },\n type: {\n summary: 's \| m \| l'\n }\n }\n },\n target: {\n description: 'Determines where to open the linked URL when the button is clicked.',\n control: 'radio',\n options: ['_blank', '_self', '_parent'],\n table: {\n category: 'ifx-icon-button props',\n defaultValue: {\n summary: '_blank'\n }\n }\n },\n shape: {\n description: 'Defines the shape of the icon button.',\n control: 'radio',\n options: ['round', 'square'],\n table: {\n category: 'ifx-icon-button props',\n defaultValue: {\n summary: 'round'\n }\n }\n },\n ariaLabel: {\n control: { type: 'text' },\n description: 'Set the aria label of the icon button. Enhances accessibility.',\n table: {\n category: 'ifx-icon-button props'\n }\n },\n },\n};\n\nconst DefaultTemplate = args =>\n `<ifx-icon-button shape=\"${args.shape}\" variant=\"${args.variant}\" icon=\"${args.icon}\" href=\"${args.href}\" target=\"${args.target}\" size=\"${args.size}\" disabled=\"${args.disabled}\" aria-label=\"${args.ariaLabel}\">\n </ifx-icon-button>`;\n\nexport const Default = DefaultTemplate.bind({});\n"]}

package/dist/collection/components/icons-preview/icons-preview.js CHANGED Viewed

@@ -47,7 +47,7 @@ export class IconsPreview {
         this.handleIconFilter();
     }
     render() {
-        return (h("div", { key: 'e666e3280c175252cb2ac5cde1169ea41bcb24d4', class: 'container' }, h("div", { key: 'ac61e08dfaaa008b0637957af4ee656cf597fd41', class: "alert__wrapper" }, h("ifx-notification", { key: '0d42e27cb1efe0e97765391071b197aa445d631e', icon: "c-check-16", variant: "neutral", "link-text": "Figma icon library", "link-href": "https://www.figma.com/design/yWwaLoqsWLWygDxXfvdym9/Infineon-DDS-%7C-UI-icon-library?node-id=13284-1289&p=f&t=SD6EdmXaSufsjPCv-0", "link-target": "_blank" }, "You can also find the UI icons in Figma for use in mockups.")), h("div", { key: '2618b897fa79c422a095dd9263332d28ebb4db75', class: "snippet__wrapper" }, h("div", { key: 'c75d8b81f0c3ff6c96565675112dbad049a8012a', class: "search__wrapper" }, h("ifx-search-field", { key: '1081c41f8cdc5ad0470837599c9d172ff50b2c2c', id: "search__field", size: "m", "show-delete-icon": "true", value: "", autocomplete: "on", placeholder: "Search icon" })), h("div", { key: 'c9cc3a3aca0105fd296d2735644158bd1ec350ec', class: 'html-wrapper' }, h("span", { key: 'fcaa0a2e86e4e5d0394d46af7239e8e284b9acf5', class: "html-tag" }, "<"), h("span", { key: '16a3c1146793b366e875e36b1bb5b7e0495860ca', class: "component-name" }, "ifx-icon"), h("span", { key: '7019361f770390a98f4bb1f1f4e028eb1a65c438', class: "attribute-name" }, " icon"), "=", h("span", { key: '258e0b53956a9b280a49cbb74afb5b4816f048f6', class: "attribute-value" }, this.iconName), h("span", { key: 'c8d007dfd3e0261be88766463a5bf828a96ed7ae', class: "html-tag" }, ">"), h("span", { key: '891ca64df634ba0bcacf27fb5c4f7dc5dd39f0a2', class: "html-tag" }, "</"), h("span", { key: 'c605e35e086170d6cfe63634f1932fe8caf068f3', class: "component-name" }, "ifx-icon"), h("span", { key: '9f3f6dd560bd4636368a1ad88daf01bf41b598fc', class: "html-tag" }, ">"), h("button", { key: 'dbcb93abeb70b44f2d78e6221278b7da1845e18f', onClick: () => this.copyHtmlString() }, this.isCopied ? 'Copied' : 'Copy'))), h("div", { key: 'c5e3d90f73296fa3d8fd65359945c4523a3e7e70', class: "preview__container" }, this.filteredIcons.map((icon) => (h("div", { key: icon, class: `preview__container-item ${this.isCopied && this.copiedIcon === icon ? 'copied' : ""}`, onClick: () => this.copyIconText(icon) }, h("ifx-icon", { icon: icon })))), this.filteredIcons.length === 0 && (h("div", { key: '4396ce4663eba4c06b11a72dd765df1a7bed84e0', class: "no-results" }, "No icons found matching \"", this.searchTerm, "\"")))));
+        return (h("div", { key: 'cad3f5516e9ff71983c1ab79b423db3d8ff4c046', class: 'container' }, h("div", { key: 'bcaecb8c43b7415c7422293cd71db36dabe03fc7', class: "alert__wrapper" }, h("ifx-notification", { key: '28fe835bd823d3b7ca753303b2ab7231f5aa0c47', icon: "c-check-16", variant: "neutral", "link-text": "Figma icon library", "link-href": "https://www.figma.com/design/yWwaLoqsWLWygDxXfvdym9/Infineon-DDS-%7C-UI-icon-library?node-id=13284-1289&p=f&t=SD6EdmXaSufsjPCv-0", "link-target": "_blank" }, "You can also find the UI icons in Figma for use in mockups.")), h("div", { key: '29db796fdc26758434eea3cb0662381e83931c81', class: "snippet__wrapper" }, h("div", { key: 'cae0df2cebf1499ad0febbe84c5734f7a1150c40', class: "search__wrapper" }, h("ifx-search-field", { key: '5624bffdabb2ef12904145ed485d96a95f72e079', id: "search__field", size: "m", "show-delete-icon": "true", value: "", autocomplete: "on", placeholder: "Search icon" })), h("div", { key: 'f4ff80bdc97d3bf96dc4fbdbb85195ea2b0f1b7d', class: 'html-wrapper' }, h("span", { key: '11ce503b64564201aa64b37df12f2d7b44c495ff', class: "html-tag" }, "<"), h("span", { key: 'ff5dca010ee326d8558592300a7152596ff29065', class: "component-name" }, "ifx-icon"), h("span", { key: 'bee19150f951c80c6bdb2ceb81edb7af7c50c4f7', class: "attribute-name" }, " icon"), "=", h("span", { key: '9451bd94d2b6e8122d7e60dcb2fcfd350a10a0eb', class: "attribute-value" }, this.iconName), h("span", { key: 'c074ba23a0ac267ada8c3b4ea701fd788e0ef047', class: "html-tag" }, ">"), h("span", { key: 'df301dced95dc4003dad62d42fbc7a991e07aa7b', class: "html-tag" }, "</"), h("span", { key: 'e50e42d063fd5370594fb3a9ad264dcfa30272fc', class: "component-name" }, "ifx-icon"), h("span", { key: '72e1e2869c4dd6a373c27949678012a4d17a5750', class: "html-tag" }, ">"), h("button", { key: 'e065221a5f5e4fcd545287050effd8f301960b5e', onClick: () => this.copyHtmlString() }, this.isCopied ? 'Copied' : 'Copy'))), h("div", { key: 'f5f0b51524f2f850a2151db2b0188dff1e4c3131', class: "preview__container" }, this.filteredIcons.map((icon) => (h("div", { key: icon, class: `preview__container-item ${this.isCopied && this.copiedIcon === icon ? 'copied' : ""}`, onClick: () => this.copyIconText(icon) }, h("ifx-icon", { icon: icon })))), this.filteredIcons.length === 0 && (h("div", { key: 'bcc64909d726c6fe43fac93ba623cd643110e67c', class: "no-results" }, "No icons found matching \"", this.searchTerm, "\"")))));
     }
     static get is() { return "ifx-icons-preview"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/icons-preview/icons-preview.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"icons-preview.js","sourceRoot":"","sources":["../../../src/components/icons-preview/icons-preview.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Element, State } from \"@stencil/core\";\r\nimport { icons } from '@infineon/infineon-icons';\r\n\r\n@Component({\r\n tag: 'ifx-icons-preview',\r\n styleUrl: './icons-preview.scss',\r\n shadow: true\r\n})\r\n\r\nexport class IconsPreview {\r\n @State() iconsArray: string[] = [];\r\n @State() isCopied: boolean = false;\r\n @State() copiedIndex: number;\r\n @State() copiedIcon: string \| null = null;\r\n @State() htmlTag: string = '<ifx-icon icon=\"calendar-16\"></ifx-icon>';\r\n @State() iconName: string = `\"\"`;\r\n @State() searchTerm: string = '';\r\n @Element() el;\r\n\r\n handleCopiedText() { \r\n this.isCopied = true;\r\n setTimeout(() => {\r\n this.isCopied = false\r\n }, 2000);\r\n }\r\n\r\n copyIconText(icon: string) { \r\n this.htmlTag = `<ifx-icon icon=\"${icon}\"></ifx-icon>`;\r\n this.iconName = `\"${icon}\"`;\r\n this.copiedIcon = icon;\r\n }\r\n\r\n copyHtmlString() { \r\n const copiedTag = `<ifx-icon icon=${this.iconName}></ifx-icon>`;\r\n navigator.clipboard.writeText(copiedTag);\r\n this.handleCopiedText()\r\n }\r\n\r\n get filteredIcons() {\r\n const term = this.searchTerm.toLowerCase().trim();\r\n if (!term) return this.iconsArray;\r\n \r\n return this.iconsArray.filter(icon => \r\n icon.toLowerCase().includes(term)\r\n );\r\n }\r\n\r\n getIconIndex(icon: string): number {\r\n return this.iconsArray.indexOf(icon);\r\n }\r\n\r\n handleIconFilter() { \r\n const searchField = this.el.shadowRoot.querySelector('#search__field');\r\n searchField.addEventListener('ifxInput', (e) => { \r\n this.searchTerm = e.detail;\r\n })\r\n }\r\n\r\n componentWillLoad() { \r\n this.iconsArray = Object.keys(icons);\r\n }\r\n\r\n componentDidLoad() { \r\n this.handleIconFilter()\r\n }\r\n\r\n render() {\r\n return (\r\n <div class='container'>\r\n <div class=\"alert__wrapper\">\r\n <ifx-notification \r\n icon=\"c-check-16\" \r\n variant=\"neutral\" \r\n link-text=\"Figma icon library\" \r\n link-href=\"https://www.figma.com/design/yWwaLoqsWLWygDxXfvdym9/Infineon-DDS-%7C-UI-icon-library?node-id=13284-1289&p=f&t=SD6EdmXaSufsjPCv-0\"\r\n link-target=\"_blank\">\r\n You can also find the UI icons in Figma for use in mockups.\r\n </ifx-notification>\r\n </div>\r\n <div class=\"snippet__wrapper\">\r\n <div class=\"search__wrapper\">\r\n <ifx-search-field id=\"search__field\" size=\"m\" show-delete-icon=\"true\" value=\"\" autocomplete=\"on\" placeholder=\"Search icon\"></ifx-search-field>\r\n </div>\r\n <div class='html-wrapper'>\r\n <span class=\"html-tag\"><</span>\r\n <span class=\"component-name\">ifx-icon</span>\r\n <span class=\"attribute-name\"> icon</span>=<span class=\"attribute-value\">{this.iconName}</span>\r\n <span class=\"html-tag\">></span>\r\n <span class=\"html-tag\"></</span>\r\n <span class=\"component-name\">ifx-icon</span>\r\n <span class=\"html-tag\">></span>\r\n <button onClick={() => this.copyHtmlString()}>{this.isCopied ? 'Copied' : 'Copy'}</button>\r\n </div>\r\n </div>\r\n <div class=\"preview__container\">\r\n {this.filteredIcons.map((icon) => (\r\n <div \r\n key={icon}\r\n class={`preview__container-item ${\r\n this.isCopied && this.copiedIcon === icon ? 'copied' : \"\"\r\n }`} \r\n onClick={() => this.copyIconText(icon)}\r\n >\r\n <ifx-icon icon={icon}></ifx-icon>\r\n </div>\r\n ))}\r\n {this.filteredIcons.length === 0 && (\r\n <div class=\"no-results\">No icons found matching \"{this.searchTerm}\"</div>\r\n )}\r\n </div>\r\n </div>\r\n )\r\n }\r\n}"]}
1	+ {"version":3,"file":"icons-preview.js","sourceRoot":"","sources":["../../../src/components/icons-preview/icons-preview.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Element, State } from \"@stencil/core\";\nimport { icons } from '@infineon/infineon-icons';\n\n@Component({\n tag: 'ifx-icons-preview',\n styleUrl: './icons-preview.scss',\n shadow: true\n})\n\nexport class IconsPreview {\n @State() iconsArray: string[] = [];\n @State() isCopied: boolean = false;\n @State() copiedIndex: number;\n @State() copiedIcon: string \| null = null;\n @State() htmlTag: string = '<ifx-icon icon=\"calendar-16\"></ifx-icon>';\n @State() iconName: string = `\"\"`;\n @State() searchTerm: string = '';\n @Element() el;\n\n handleCopiedText() { \n this.isCopied = true;\n setTimeout(() => {\n this.isCopied = false\n }, 2000);\n }\n\n copyIconText(icon: string) { \n this.htmlTag = `<ifx-icon icon=\"${icon}\"></ifx-icon>`;\n this.iconName = `\"${icon}\"`;\n this.copiedIcon = icon;\n }\n\n copyHtmlString() { \n const copiedTag = `<ifx-icon icon=${this.iconName}></ifx-icon>`;\n navigator.clipboard.writeText(copiedTag);\n this.handleCopiedText()\n }\n\n get filteredIcons() {\n const term = this.searchTerm.toLowerCase().trim();\n if (!term) return this.iconsArray;\n \n return this.iconsArray.filter(icon => \n icon.toLowerCase().includes(term)\n );\n }\n\n getIconIndex(icon: string): number {\n return this.iconsArray.indexOf(icon);\n }\n\n handleIconFilter() { \n const searchField = this.el.shadowRoot.querySelector('#search__field');\n searchField.addEventListener('ifxInput', (e) => { \n this.searchTerm = e.detail;\n })\n }\n\n componentWillLoad() { \n this.iconsArray = Object.keys(icons);\n }\n\n componentDidLoad() { \n this.handleIconFilter()\n }\n\n render() {\n return (\n <div class='container'>\n <div class=\"alert__wrapper\">\n <ifx-notification \n icon=\"c-check-16\" \n variant=\"neutral\" \n link-text=\"Figma icon library\" \n link-href=\"https://www.figma.com/design/yWwaLoqsWLWygDxXfvdym9/Infineon-DDS-%7C-UI-icon-library?node-id=13284-1289&p=f&t=SD6EdmXaSufsjPCv-0\"\n link-target=\"_blank\">\n You can also find the UI icons in Figma for use in mockups.\n </ifx-notification>\n </div>\n <div class=\"snippet__wrapper\">\n <div class=\"search__wrapper\">\n <ifx-search-field id=\"search__field\" size=\"m\" show-delete-icon=\"true\" value=\"\" autocomplete=\"on\" placeholder=\"Search icon\"></ifx-search-field>\n </div>\n <div class='html-wrapper'>\n <span class=\"html-tag\"><</span>\n <span class=\"component-name\">ifx-icon</span>\n <span class=\"attribute-name\"> icon</span>=<span class=\"attribute-value\">{this.iconName}</span>\n <span class=\"html-tag\">></span>\n <span class=\"html-tag\"></</span>\n <span class=\"component-name\">ifx-icon</span>\n <span class=\"html-tag\">></span>\n <button onClick={() => this.copyHtmlString()}>{this.isCopied ? 'Copied' : 'Copy'}</button>\n </div>\n </div>\n <div class=\"preview__container\">\n {this.filteredIcons.map((icon) => (\n <div \n key={icon}\n class={`preview__container-item ${\n this.isCopied && this.copiedIcon === icon ? 'copied' : \"\"\n }`} \n onClick={() => this.copyIconText(icon)}\n >\n <ifx-icon icon={icon}></ifx-icon>\n </div>\n ))}\n {this.filteredIcons.length === 0 && (\n <div class=\"no-results\">No icons found matching \"{this.searchTerm}\"</div>\n )}\n </div>\n </div>\n )\n }\n}"]}

package/dist/collection/components/icons-preview/icons-preview.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"icons-preview.stories.js","sourceRoot":"","sources":["../../../src/components/icons-preview/icons-preview.stories.ts"],"names":[],"mappings":"AAAA,eAAe;IACb,KAAK,EAAE,yBAAyB;IAChC,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,cAAc,EAAE,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,MAAM,eAAe,GAAG,GAAG,EAAE,CAAC,yCAAyC,CAAC;AAExE,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["export default {\r\n title: 'Components/IconsPreview',\r\n tags: ['autodocs'],\r\n\r\n excludeStories: ['Default'],\r\n};\r\n\r\nconst DefaultTemplate = () => `<ifx-icons-preview></ifx-icons-preview>`;\r\n\r\nexport const Default = DefaultTemplate.bind({});\r\n"]}
1	+ {"version":3,"file":"icons-preview.stories.js","sourceRoot":"","sources":["../../../src/components/icons-preview/icons-preview.stories.ts"],"names":[],"mappings":"AAAA,eAAe;IACb,KAAK,EAAE,yBAAyB;IAChC,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,cAAc,EAAE,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,MAAM,eAAe,GAAG,GAAG,EAAE,CAAC,yCAAyC,CAAC;AAExE,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["export default {\n title: 'Components/IconsPreview',\n tags: ['autodocs'],\n\n excludeStories: ['Default'],\n};\n\nconst DefaultTemplate = () => `<ifx-icons-preview></ifx-icons-preview>`;\n\nexport const Default = DefaultTemplate.bind({});\n"]}

package/dist/collection/components/indicator/indicator.js CHANGED Viewed

@@ -24,8 +24,8 @@ export class Indicator {
         this.handleNumber();
     }
     render() {
-        return (h("div", { key: '6bb6533b5cb81151a3133951e79bf3296b976d4a', "aria-label": this.ariaLabel, class: 'indicator__container' }, this.variant === 'number' &&
-            h("div", { key: 'bb5dbd9fa7bb3c70dcd8f0a8c257e65e26b74ff9', class: `number__container ${this.inverted ? 'inverted' : ""}` }, h("div", { key: '500dd5cef6c3adb0d7b6a1404a8102fb1d25e969', class: "number__wrapper" }, this.filteredNumber)), this.variant === 'dot' && h("div", { key: '9671fb9b2522f02c3c3b98727335045827d4f759', class: "dot__wrapper" })));
+        return (h("div", { key: '35211d70a31d9bf69b84614694d4669877c8a6d9', "aria-label": this.ariaLabel, class: 'indicator__container' }, this.variant === 'number' &&
+            h("div", { key: '888f42cb6ad70bb973b62468734bae7abf73f3d9', class: `number__container ${this.inverted ? 'inverted' : ""}` }, h("div", { key: '4578b32ca5e7b7747eb7ae729e9732d06da3fcbc', class: "number__wrapper" }, this.filteredNumber)), this.variant === 'dot' && h("div", { key: '2b3cd2500d4d64bbb27131201ca2d56f720209a0', class: "dot__wrapper" })));
     }
     static get is() { return "ifx-indicator"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/indicator/indicator.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"indicator.js","sourceRoot":"","sources":["../../../src/components/indicator/indicator.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,8BAA8B,CAAC;AACtE,OAAO,EAAE,eAAe,EAAE,MAAM,wCAAwC,CAAC;AAOzE,MAAM,OAAO,SAAS;IALtB;QAQU,aAAQ,GAAY,KAAK,CAAC;QAE1B,YAAO,GAAW,QAAQ,CAAA;QAC1B,WAAM,GAAW,CAAC,CAAC;KAkC5B;IAhCC,YAAY;QACV,IAAI,CAAC,cAAc,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC;IACtF,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,YAAY,EAAE,CAAA;IACrB,CAAC;IAED,KAAK,CAAC,gBAAgB;QACpB,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC;YACpC,MAAM,SAAS,GAAG,eAAe,EAAE,CAAC;YACpC,cAAc,CAAC,eAAe,EAAE,MAAM,SAAS,CAAC,CAAA;QAClD,CAAC;IACH,CAAC;IAED,mBAAmB;QACjB,IAAI,CAAC,YAAY,EAAE,CAAA;IACrB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,0EAAiB,IAAI,CAAC,SAAS,EAAE,KAAK,EAAC,sBAAsB;YAC3D,IAAI,CAAC,OAAO,KAAK,QAAQ;gBAC1B,4DAAK,KAAK,EAAE,qBAAqB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE;oBAC/D,4DAAK,KAAK,EAAC,iBAAiB,IACzB,IAAI,CAAC,cAAc,CAChB,CACH;YACL,IAAI,CAAC,OAAO,KAAK,KAAK,IAAI,4DAAK,KAAK,EAAC,cAAc,GAAO,CACtD,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Element, State } from '@stencil/core';\r\nimport { trackComponent } from '../../global/utils/tracking'; \r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\n\r\n@Component({\r\n tag: 'ifx-indicator',\r\n styleUrl: 'indicator.scss',\r\n shadow: true\r\n})\r\nexport class Indicator {\r\n @Element() el;\r\n @State() filteredNumber: string \| number;\r\n @Prop() inverted: boolean = false;\r\n @Prop() ariaLabel: string \| null;\r\n @Prop() variant: string = 'number'\r\n @Prop() number: number = 0;\r\n\r\n handleNumber() {\r\n this.filteredNumber = !isNaN(this.number) && this.number > 99 ? '99+' : this.number;\r\n }\r\n\r\n componentWillLoad() { \r\n this.handleNumber()\r\n }\r\n\r\n async componentDidLoad() { \r\n if(!isNestedInIfxComponent(this.el)) { \r\n const framework = detectFramework();\r\n trackComponent('ifx-indicator', await framework)\r\n }\r\n }\r\n\r\n componentWillUpdate() {\r\n this.handleNumber()\r\n }\r\n\r\n render() {\r\n return (\r\n <div aria-label={this.ariaLabel} class='indicator__container'>\r\n {this.variant === 'number' && \r\n <div class={`number__container ${this.inverted ? 'inverted' : \"\"}`}>\r\n <div class=\"number__wrapper\">\r\n {this.filteredNumber}\r\n </div> \r\n </div>}\r\n {this.variant === 'dot' && <div class=\"dot__wrapper\"></div>}\r\n </div>\r\n );\r\n }\r\n}"]}
1	+ {"version":3,"file":"indicator.js","sourceRoot":"","sources":["../../../src/components/indicator/indicator.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,8BAA8B,CAAC;AACtE,OAAO,EAAE,eAAe,EAAE,MAAM,wCAAwC,CAAC;AAOzE,MAAM,OAAO,SAAS;IALtB;QAQU,aAAQ,GAAY,KAAK,CAAC;QAE1B,YAAO,GAAW,QAAQ,CAAA;QAC1B,WAAM,GAAW,CAAC,CAAC;KAkC5B;IAhCC,YAAY;QACV,IAAI,CAAC,cAAc,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC;IACtF,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,YAAY,EAAE,CAAA;IACrB,CAAC;IAED,KAAK,CAAC,gBAAgB;QACpB,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC;YACpC,MAAM,SAAS,GAAG,eAAe,EAAE,CAAC;YACpC,cAAc,CAAC,eAAe,EAAE,MAAM,SAAS,CAAC,CAAA;QAClD,CAAC;IACH,CAAC;IAED,mBAAmB;QACjB,IAAI,CAAC,YAAY,EAAE,CAAA;IACrB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,0EAAiB,IAAI,CAAC,SAAS,EAAE,KAAK,EAAC,sBAAsB;YAC3D,IAAI,CAAC,OAAO,KAAK,QAAQ;gBAC1B,4DAAK,KAAK,EAAE,qBAAqB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE;oBAC/D,4DAAK,KAAK,EAAC,iBAAiB,IACzB,IAAI,CAAC,cAAc,CAChB,CACH;YACL,IAAI,CAAC,OAAO,KAAK,KAAK,IAAI,4DAAK,KAAK,EAAC,cAAc,GAAO,CACtD,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Element, State } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking'; \nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n tag: 'ifx-indicator',\n styleUrl: 'indicator.scss',\n shadow: true\n})\nexport class Indicator {\n @Element() el;\n @State() filteredNumber: string \| number;\n @Prop() inverted: boolean = false;\n @Prop() ariaLabel: string \| null;\n @Prop() variant: string = 'number'\n @Prop() number: number = 0;\n\n handleNumber() {\n this.filteredNumber = !isNaN(this.number) && this.number > 99 ? '99+' : this.number;\n }\n\n componentWillLoad() { \n this.handleNumber()\n }\n\n async componentDidLoad() { \n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-indicator', await framework)\n }\n }\n\n componentWillUpdate() {\n this.handleNumber()\n }\n\n render() {\n return (\n <div aria-label={this.ariaLabel} class='indicator__container'>\n {this.variant === 'number' && \n <div class={`number__container ${this.inverted ? 'inverted' : \"\"}`}>\n <div class=\"number__wrapper\">\n {this.filteredNumber}\n </div> \n </div>}\n {this.variant === 'dot' && <div class=\"dot__wrapper\"></div>}\n </div>\n );\n }\n}"]}

package/dist/collection/components/indicator/indicator.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"indicator.stories.js","sourceRoot":"","sources":["../../../src/components/indicator/indicator.stories.ts"],"names":[],"mappings":"AAAA,eAAe;IACb,KAAK,EAAE,sBAAsB;IAC7B,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,IAAI,EAAE;QACJ,MAAM,EAAE,CAAC;QACT,QAAQ,EAAE,KAAK;QACf,OAAO,EAAE,QAAQ;KAClB;IACD,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,IAAI,EAAE,SAAS;YACf,WAAW,EAAE,uDAAuD;YACpE,OAAO,EAAE,OAAO;YAChB,OAAO,EAAE,CAAC,QAAQ,EAAE,KAAK,CAAC;YAC1B,KAAK,EAAE;gBACL,QAAQ,EAAE,gBAAgB;gBAC1B,YAAY,EAAE;oBACZ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;QACD,MAAM,EAAE;YACN,IAAI,EAAE,sCAAsC;YAC5C,WAAW,EAAE,6CAA6C;YAC1D,KAAK,EAAE;gBACL,QAAQ,EAAE,gBAAgB;aAC3B;SACF;QACD,QAAQ,EAAE;YACR,WAAW,EAAE,mEAAmE;YAChF,OAAO,EAAE,SAAS;YAClB,KAAK,EAAE;gBACL,QAAQ,EAAE,qBAAqB;gBAC/B,YAAY,EAAE;oBACZ,OAAO,EAAE,KAAK;iBACf;aACF;SACF;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,2BAA2B,IAAI,CAAC,OAAO,aAAa,IAAI,CAAC,MAAM,eAAe,IAAI,CAAC,QAAQ,MAAM,CAAC;AAElI,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,OAAO,CAAC,QAAQ,GAAG,EAAE,CAAC","sourcesContent":["export default {\r\n title: 'Components/Indicator',\r\n tags: ['autodocs'],\r\n\r\n args: {\r\n number: 1,\r\n inverted: false,\r\n variant: 'number'\r\n },\r\n argTypes: {\r\n variant: {\r\n name: 'Variant',\r\n description: 'Sets the variant of the Indicator. Number by default.',\r\n control: 'radio',\r\n options: ['number', 'dot'],\r\n table: {\r\n category: 'story controls',\r\n defaultValue: {\r\n summary: 'number'\r\n },\r\n }\r\n },\r\n number: {\r\n name: 'The numerical value of the Indicator',\r\n description: 'Sets the number displayed on the Indicator.',\r\n table: {\r\n category: 'story controls'\r\n }\r\n },\r\n inverted: {\r\n description: 'Toggles the color scheme of the indicator with a numerical value.',\r\n control: 'boolean',\r\n table: {\r\n category: 'ifx-indicator props',\r\n defaultValue: {\r\n summary: false\r\n }\r\n }\r\n }\r\n }\r\n};\r\n\r\nconst DefaultTemplate = args => `<ifx-indicator variant=\"${args.variant}\" number=\"${args.number}\" inverted=\"${args.inverted}\" />`;\r\n\r\nexport const Default = DefaultTemplate.bind({});\r\nDefault.argTypes = {};\r\n"]}
1	+ {"version":3,"file":"indicator.stories.js","sourceRoot":"","sources":["../../../src/components/indicator/indicator.stories.ts"],"names":[],"mappings":"AAAA,eAAe;IACb,KAAK,EAAE,sBAAsB;IAC7B,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,IAAI,EAAE;QACJ,MAAM,EAAE,CAAC;QACT,QAAQ,EAAE,KAAK;QACf,OAAO,EAAE,QAAQ;KAClB;IACD,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,IAAI,EAAE,SAAS;YACf,WAAW,EAAE,uDAAuD;YACpE,OAAO,EAAE,OAAO;YAChB,OAAO,EAAE,CAAC,QAAQ,EAAE,KAAK,CAAC;YAC1B,KAAK,EAAE;gBACL,QAAQ,EAAE,gBAAgB;gBAC1B,YAAY,EAAE;oBACZ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;QACD,MAAM,EAAE;YACN,IAAI,EAAE,sCAAsC;YAC5C,WAAW,EAAE,6CAA6C;YAC1D,KAAK,EAAE;gBACL,QAAQ,EAAE,gBAAgB;aAC3B;SACF;QACD,QAAQ,EAAE;YACR,WAAW,EAAE,mEAAmE;YAChF,OAAO,EAAE,SAAS;YAClB,KAAK,EAAE;gBACL,QAAQ,EAAE,qBAAqB;gBAC/B,YAAY,EAAE;oBACZ,OAAO,EAAE,KAAK;iBACf;aACF;SACF;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,2BAA2B,IAAI,CAAC,OAAO,aAAa,IAAI,CAAC,MAAM,eAAe,IAAI,CAAC,QAAQ,MAAM,CAAC;AAElI,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,OAAO,CAAC,QAAQ,GAAG,EAAE,CAAC","sourcesContent":["export default {\n title: 'Components/Indicator',\n tags: ['autodocs'],\n\n args: {\n number: 1,\n inverted: false,\n variant: 'number'\n },\n argTypes: {\n variant: {\n name: 'Variant',\n description: 'Sets the variant of the Indicator. Number by default.',\n control: 'radio',\n options: ['number', 'dot'],\n table: {\n category: 'story controls',\n defaultValue: {\n summary: 'number'\n },\n }\n },\n number: {\n name: 'The numerical value of the Indicator',\n description: 'Sets the number displayed on the Indicator.',\n table: {\n category: 'story controls'\n }\n },\n inverted: {\n description: 'Toggles the color scheme of the indicator with a numerical value.',\n control: 'boolean',\n table: {\n category: 'ifx-indicator props',\n defaultValue: {\n summary: false\n }\n }\n }\n }\n};\n\nconst DefaultTemplate = args => `<ifx-indicator variant=\"${args.variant}\" number=\"${args.number}\" inverted=\"${args.inverted}\" />`;\n\nexport const Default = DefaultTemplate.bind({});\nDefault.argTypes = {};\n"]}

package/dist/collection/components/link/link.js CHANGED Viewed

@@ -41,7 +41,7 @@ export class Link {
         }
     }
     render() {
-        return (h("a", { key: '77c50e018c3f0c00e93b95dcc72107290a453270', tabindex: "0", role: "link", "aria-label": this.ariaLabel, "aria-disabled": this.disabled || !this.internalHref, href: this.disabled ? undefined : this.internalHref, download: this.download, target: this.internalTarget, class: this.linkClassNames() }, h("slot", { key: 'e3d7984a41848a749fb3b7fee28c5b1ec41fe27e' })));
+        return (h("a", { key: '8b3aaa77c9de243e5a6c8c25eb1173ddb4cb0aef', tabindex: "0", role: "link", "aria-label": this.ariaLabel, "aria-disabled": this.disabled || !this.internalHref, href: this.disabled ? undefined : this.internalHref, download: this.download, target: this.internalTarget, class: this.linkClassNames() }, h("slot", { key: '5ed92a06a4564b6c94324117edc49420a2dd21be' })));
     }
     getSizeClass() {
         const small = this.size === 's' ? 'small' : null;

package/dist/collection/components/link/link.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"link.js","sourceRoot":"","sources":["../../../src/components/link/link.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, State, Element } from \"@stencil/core\";\r\nimport { trackComponent } from '../../global/utils/tracking';\r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\nimport classNames from 'classnames';\r\n \r\n@Component({\r\n tag: 'ifx-link',\r\n styleUrl: 'link.scss',\r\n shadow: true\r\n})\r\n\r\nexport class Link {\r\n @Element() el;\r\n @Prop() href: string = undefined;\r\n @Prop() target: string = '_self';\r\n @Prop() variant: string = 'bold';\r\n @Prop() size: string;\r\n @Prop() disabled: boolean = false;\r\n @Prop() download: string;\r\n @Prop() ariaLabel: string \| null;\r\n @State() internalHref: string ='';\r\n @State() internalTarget: string = '';\r\n @State() internalVariant: string = '';\r\n\r\n setInternalStates() {\r\n if(this.href){\r\n this.internalHref = this.href.trim();\r\n }else{\r\n this.internalHref = undefined;\r\n }\r\n this.internalTarget = this.target.trim();\r\n this.internalVariant = this.variant.trim().toLowerCase();\r\n }\r\n\r\n componentWillRender(){\r\n this.setInternalStates();\r\n }\r\n\r\n handleKeyDown(event: KeyboardEvent) {\r\n if (this.disabled) {\r\n event.preventDefault();\r\n } else if (event.key === 'Enter') {\r\n event.preventDefault();\r\n }\r\n }\r\n\r\n async componentDidLoad() { \r\n if(!isNestedInIfxComponent(this.el)) { \r\n const framework = detectFramework();\r\n trackComponent('ifx-link', await framework)\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <a\r\n tabindex=\"0\"\r\n role=\"link\"\r\n aria-label={this.ariaLabel}\r\n aria-disabled={this.disabled \|\| !this.internalHref}\r\n href={this.disabled ? undefined : this.internalHref}\r\n download={this.download}\r\n target={this.internalTarget}\r\n class={this.linkClassNames()}>\r\n <slot></slot>\r\n </a>)\r\n }\r\n\r\n getSizeClass() {\r\n const small = this.size === 's' ? 'small' : null;\r\n const medium = this.size === 'm' ? 'medium' : null;\r\n const large = this.size === 'l' ? 'large' : null;\r\n const extraLarge = this.size === 'xl' ? 'extraLarge' : null;\r\n\r\n if (small) {\r\n return small;\r\n } else if (medium) {\r\n return medium;\r\n } else if (large) {\r\n return large;\r\n } else if (extraLarge && this.internalVariant === 'underlined') {\r\n return 'large';\r\n } else if (extraLarge && this.internalVariant !== 'underlined') {\r\n return extraLarge;\r\n } else return \"\";\r\n }\r\n\r\n getVariantClass() {\r\n const bold = this.internalVariant === 'bold' ? 'bold' : null;\r\n const title = this.internalVariant === 'title' ? 'title' : null;\r\n const underlined = this.internalVariant === 'underlined' ? 'underlined' : null;\r\n const menu = this.internalVariant === 'menu' ? 'menu' : null;\r\n\r\n if (bold) {\r\n return bold\r\n } else if (title) {\r\n return title;\r\n } else if (underlined) {\r\n return underlined;\r\n } else if (menu) {\r\n return menu;\r\n } else return bold;\r\n }\r\n\r\n linkClassNames() {\r\n return classNames(\r\n 'link',\r\n 'primary',\r\n this.getVariantClass(),\r\n this.getSizeClass(),\r\n this.disabled ? 'disabled' : '',\r\n );\r\n }\r\n}"]}
1	+ {"version":3,"file":"link.js","sourceRoot":"","sources":["../../../src/components/link/link.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, State, Element } from \"@stencil/core\";\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\nimport classNames from 'classnames';\n \n@Component({\n tag: 'ifx-link',\n styleUrl: 'link.scss',\n shadow: true\n})\n\nexport class Link {\n @Element() el;\n @Prop() href: string = undefined;\n @Prop() target: string = '_self';\n @Prop() variant: string = 'bold';\n @Prop() size: string;\n @Prop() disabled: boolean = false;\n @Prop() download: string;\n @Prop() ariaLabel: string \| null;\n @State() internalHref: string ='';\n @State() internalTarget: string = '';\n @State() internalVariant: string = '';\n\n setInternalStates() {\n if(this.href){\n this.internalHref = this.href.trim();\n }else{\n this.internalHref = undefined;\n }\n this.internalTarget = this.target.trim();\n this.internalVariant = this.variant.trim().toLowerCase();\n }\n\n componentWillRender(){\n this.setInternalStates();\n }\n\n handleKeyDown(event: KeyboardEvent) {\n if (this.disabled) {\n event.preventDefault();\n } else if (event.key === 'Enter') {\n event.preventDefault();\n }\n }\n\n async componentDidLoad() { \n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-link', await framework)\n }\n }\n\n render() {\n return (\n <a\n tabindex=\"0\"\n role=\"link\"\n aria-label={this.ariaLabel}\n aria-disabled={this.disabled \|\| !this.internalHref}\n href={this.disabled ? undefined : this.internalHref}\n download={this.download}\n target={this.internalTarget}\n class={this.linkClassNames()}>\n <slot></slot>\n </a>)\n }\n\n getSizeClass() {\n const small = this.size === 's' ? 'small' : null;\n const medium = this.size === 'm' ? 'medium' : null;\n const large = this.size === 'l' ? 'large' : null;\n const extraLarge = this.size === 'xl' ? 'extraLarge' : null;\n\n if (small) {\n return small;\n } else if (medium) {\n return medium;\n } else if (large) {\n return large;\n } else if (extraLarge && this.internalVariant === 'underlined') {\n return 'large';\n } else if (extraLarge && this.internalVariant !== 'underlined') {\n return extraLarge;\n } else return \"\";\n }\n\n getVariantClass() {\n const bold = this.internalVariant === 'bold' ? 'bold' : null;\n const title = this.internalVariant === 'title' ? 'title' : null;\n const underlined = this.internalVariant === 'underlined' ? 'underlined' : null;\n const menu = this.internalVariant === 'menu' ? 'menu' : null;\n\n if (bold) {\n return bold\n } else if (title) {\n return title;\n } else if (underlined) {\n return underlined;\n } else if (menu) {\n return menu;\n } else return bold;\n }\n\n linkClassNames() {\n return classNames(\n 'link',\n 'primary',\n this.getVariantClass(),\n this.getSizeClass(),\n this.disabled ? 'disabled' : '',\n );\n }\n}"]}

package/dist/collection/components/link/link.stories.js CHANGED Viewed

@@ -96,13 +96,13 @@ export default {
         },
     },
 };
-const DefaultTemplate = args => `<ifx-link href="${args.href}" aria-label="${args.ariaLabel}" target="${args.target}" size="${args.size}" variant="${args.variant}" disabled="${args.disabled}" download="${args.download}" >
-  ${args.label}
+const DefaultTemplate = args => `<ifx-link href="${args.href}" aria-label="${args.ariaLabel}" target="${args.target}" size="${args.size}" variant="${args.variant}" disabled="${args.disabled}" download="${args.download}" >
+  ${args.label}
   </ifx-link>`;
 export const Default = DefaultTemplate.bind({});
-const TemplateWithIcon = args => `<ifx-link href="${args.href}" target="${args.target}" size="${args.size}" variant="${args.variant}" >
-  ${args.label}
-  <ifx-icon icon="arrow-right-16"></ifx-icon>
+const TemplateWithIcon = args => `<ifx-link href="${args.href}" target="${args.target}" size="${args.size}" variant="${args.variant}" >
+  ${args.label}
+  <ifx-icon icon="arrow-right-16"></ifx-icon>
   </ifx-link>`;
 export const WithIcon = TemplateWithIcon.bind({});
 //# sourceMappingURL=link.stories.js.map

package/dist/collection/components/link/link.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"link.stories.js","sourceRoot":"","sources":["../../../src/components/link/link.stories.ts"],"names":[],"mappings":"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","sourcesContent":["export default {\r\n title: 'Components/Link',\r\n tags: ['autodocs'],\r\n\r\n args: {\r\n label: 'Link',\r\n href: '',\r\n target: '_blank',\r\n size: 'm',\r\n disabled: false,\r\n variant: 'bold',\r\n download: \"\",\r\n ariaLabel: 'Link',\r\n },\r\n\r\n argTypes: {\r\n label: {\r\n name: 'Label of Link',\r\n description: 'Set the label of <ifx-link>.',\r\n table: {\r\n category: 'story controls',\r\n }\r\n },\r\n ariaLabel:{\r\n name: 'ariaLabel',\r\n description: 'Set the aria-label of <ifx-link>. Enhances accessibility.',\r\n control: 'text',\r\n table: {\r\n category: 'ifx-link props',\r\n type: {\r\n summary: 'string'\r\n }\r\n }\r\n },\r\n href: {\r\n description: 'Specifies the URL of the link.',\r\n table: {\r\n category: 'ifx-link props',\r\n type: {\r\n summary: 'string'\r\n }\r\n }\r\n },\r\n target: {\r\n description: 'Determines where to open the linked URL when the link is clicked.',\r\n control: 'radio',\r\n options: ['_blank', '_self', '_parent'],\r\n table: {\r\n category: 'ifx-link props',\r\n defaultValue: {\r\n summary: '_blank'\r\n }\r\n }\r\n },\r\n disabled: {\r\n description: 'Disables the link.',\r\n control: 'boolean',\r\n table: {\r\n category: 'ifx-link props',\r\n defaultValue: {\r\n summary: 'false'\r\n }\r\n }\r\n },\r\n download: {\r\n description: 'Sets the download attribute',\r\n table: {\r\n category: 'ifx-link props',\r\n defaultValue: {\r\n summary: 'string'\r\n }\r\n }\r\n },\r\n size: {\r\n description: 'Sets the Font Size of the link. Options: s (14px), m (16px), l (18px), xl (20px)',\r\n control: 'radio',\r\n options: ['s', 'm', 'l', 'xl'],\r\n table: {\r\n category: 'ifx-link props',\r\n defaultValue: {\r\n summary: 'm'\r\n },\r\n type: {\r\n summary: 's \| m \| l \| xl'\r\n }\r\n }\r\n },\r\n variant: {\r\n description: 'Sets the style variant of the link.',\r\n control: 'radio',\r\n options: ['bold', 'underlined', 'title', 'menu'],\r\n table: {\r\n category: 'ifx-link props',\r\n defaultValue: {\r\n summary: 'bold'\r\n }\r\n }\r\n },\r\n },\r\n};\r\n\r\nconst DefaultTemplate = args =>\r\n `<ifx-link href=\"${args.href}\" aria-label=\"${args.ariaLabel}\" target=\"${args.target}\" size=\"${args.size}\" variant=\"${args.variant}\" disabled=\"${args.disabled}\" download=\"${args.download}\" >\r\n ${args.label}\r\n </ifx-link>`;\r\n\r\nexport const Default = DefaultTemplate.bind({});\r\n\r\nconst TemplateWithIcon = args =>\r\n `<ifx-link href=\"${args.href}\" target=\"${args.target}\" size=\"${args.size}\" variant=\"${args.variant}\" >\r\n ${args.label}\r\n <ifx-icon icon=\"arrow-right-16\"></ifx-icon>\r\n </ifx-link>`;\r\n\r\nexport const WithIcon = TemplateWithIcon.bind({});\r\n"]}
1	+ {"version":3,"file":"link.stories.js","sourceRoot":"","sources":["../../../src/components/link/link.stories.ts"],"names":[],"mappings":"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","sourcesContent":["export default {\n title: 'Components/Link',\n tags: ['autodocs'],\n\n args: {\n label: 'Link',\n href: '',\n target: '_blank',\n size: 'm',\n disabled: false,\n variant: 'bold',\n download: \"\",\n ariaLabel: 'Link',\n },\n\n argTypes: {\n label: {\n name: 'Label of Link',\n description: 'Set the label of <ifx-link>.',\n table: {\n category: 'story controls',\n }\n },\n ariaLabel:{\n name: 'ariaLabel',\n description: 'Set the aria-label of <ifx-link>. Enhances accessibility.',\n control: 'text',\n table: {\n category: 'ifx-link props',\n type: {\n summary: 'string'\n }\n }\n },\n href: {\n description: 'Specifies the URL of the link.',\n table: {\n category: 'ifx-link props',\n type: {\n summary: 'string'\n }\n }\n },\n target: {\n description: 'Determines where to open the linked URL when the link is clicked.',\n control: 'radio',\n options: ['_blank', '_self', '_parent'],\n table: {\n category: 'ifx-link props',\n defaultValue: {\n summary: '_blank'\n }\n }\n },\n disabled: {\n description: 'Disables the link.',\n control: 'boolean',\n table: {\n category: 'ifx-link props',\n defaultValue: {\n summary: 'false'\n }\n }\n },\n download: {\n description: 'Sets the download attribute',\n table: {\n category: 'ifx-link props',\n defaultValue: {\n summary: 'string'\n }\n }\n },\n size: {\n description: 'Sets the Font Size of the link. Options: s (14px), m (16px), l (18px), xl (20px)',\n control: 'radio',\n options: ['s', 'm', 'l', 'xl'],\n table: {\n category: 'ifx-link props',\n defaultValue: {\n summary: 'm'\n },\n type: {\n summary: 's \| m \| l \| xl'\n }\n }\n },\n variant: {\n description: 'Sets the style variant of the link.',\n control: 'radio',\n options: ['bold', 'underlined', 'title', 'menu'],\n table: {\n category: 'ifx-link props',\n defaultValue: {\n summary: 'bold'\n }\n }\n },\n },\n};\n\nconst DefaultTemplate = args =>\n `<ifx-link href=\"${args.href}\" aria-label=\"${args.ariaLabel}\" target=\"${args.target}\" size=\"${args.size}\" variant=\"${args.variant}\" disabled=\"${args.disabled}\" download=\"${args.download}\" >\n ${args.label}\n </ifx-link>`;\n\nexport const Default = DefaultTemplate.bind({});\n\nconst TemplateWithIcon = args =>\n `<ifx-link href=\"${args.href}\" target=\"${args.target}\" size=\"${args.size}\" variant=\"${args.variant}\" >\n ${args.label}\n <ifx-icon icon=\"arrow-right-16\"></ifx-icon>\n </ifx-link>`;\n\nexport const WithIcon = TemplateWithIcon.bind({});\n"]}

package/dist/collection/components/modal/modal.js CHANGED Viewed

@@ -190,8 +190,8 @@ export class IfxModal {
     }
     render() {
         const isAlertVariant = this.variant !== 'default';
-        return (h(Host, { key: '6bbf2c70a6bec5646ac9e0dd0d407647d8a8bfe0' }, h("div", { key: 'ad9073f6168097d55b950cb1f998b65445af2528', ref: (el) => (this.modalContainer = el), class: `modal-container ${this.showModal ? 'open' : ''}` }, h("div", { key: '98bef6177dcc0ebcd4fd2d6afb4dde487bd6da0c', class: "modal-overlay", onClick: () => this.handleOverlayClick() }), h("div", { key: '107156697de5fe6a6777da70918891cb8a32744f', "data-focus-trap-edge": true, onFocus: this.handleTopFocus, tabindex: "0" }), h("div", { key: '56252e01d98d2d99cd38bbabe66cdc7be5c3cd3f', class: `modal-content-container ${this.size}`, role: "dialog", "aria-modal": "true", "aria-label": this.captionAriaLabel }, isAlertVariant ? (h("div", { class: `modal-icon-container ${this.variant === 'alert-brand' ? '' : 'danger'}` }, this.alertIcon ? h("ifx-icon", { icon: this.alertIcon }) : null)) : null, h("div", { key: '3865db58ca34df99500d2c5d3e03070e7dc0bcbf', class: "modal-content" }, h("div", { key: '81ea4d6edd35c84e903bfcaaebf5a51293e24412', class: "modal-header" }, h("h2", { key: 'efd86cf75acb7c8631e009714d987d4e92b00460', class: "modal-caption" }, this.caption), this.showCloseButton &&
-            h("ifx-icon-button", { key: '219502e33c5d4ae07b3f35295b60a717a3eef45e', class: 'modal-close-button', ref: (el) => (this.closeButton = el), icon: "cross-16", variant: "tertiary", onClick: () => this.doBeforeClose('CLOSE_BUTTON') })), h("div", { key: 'e00b53e5f2759232d7c0c5aae77e6254708814a4', class: "modal-body" }, h("slot", { key: '64b8b62f167181641116084d91ec29d3a84c9e78', name: "content", onSlotchange: (e) => this.handleContentUpdate(e) })), h("div", { key: '1b7a3d6dd7ae33cab61b3b01a6ee0f83f19fa891', class: `modal-footer ${this.slotButtonsPresent ? 'buttons-present' : ''}` }, h("slot", { key: '41a45a714c573e2b122ecced7fd258d80a74e7d6', name: "buttons", onSlotchange: (e) => this.handleButtonsSlotChange(e) })))), h("div", { key: 'eec4ae5bed38dbe5390afd80291a6c31d6bc62bd', "data-focus-trap-edge": true, onFocus: this.handleBottomFocus, tabindex: "0" }))));
+        return (h(Host, { key: '8927c0356e8b8987acf9310b559c1568c6de4f37' }, h("div", { key: 'df0f8b0be2953a4974ca739120c7b7495c52fc1f', ref: (el) => (this.modalContainer = el), class: `modal-container ${this.showModal ? 'open' : ''}` }, h("div", { key: '8e6d35ddf390200573b38c6b2057bdf382838428', class: "modal-overlay", onClick: () => this.handleOverlayClick() }), h("div", { key: '324587e244e5519f7e0d755cbf1b43b1ca998ce7', "data-focus-trap-edge": true, onFocus: this.handleTopFocus, tabindex: "0" }), h("div", { key: '11cb80157d6ae5e0c57b786c0a295722b6c94d85', class: `modal-content-container ${this.size}`, role: "dialog", "aria-modal": "true", "aria-label": this.captionAriaLabel }, isAlertVariant ? (h("div", { class: `modal-icon-container ${this.variant === 'alert-brand' ? '' : 'danger'}` }, this.alertIcon ? h("ifx-icon", { icon: this.alertIcon }) : null)) : null, h("div", { key: 'ec6865df02bd71ac1b8513e147bf48bab522479b', class: "modal-content" }, h("div", { key: 'c9591304fc6ee447a60d16eea4c5017903397691', class: "modal-header" }, h("h2", { key: 'de9241b726711243ca5101ce3e49250f743c994b', class: "modal-caption" }, this.caption), this.showCloseButton &&
+            h("ifx-icon-button", { key: '561e1f6783efc4f54f422856cc4cb36c89503529', class: 'modal-close-button', ref: (el) => (this.closeButton = el), icon: "cross-16", variant: "tertiary", onClick: () => this.doBeforeClose('CLOSE_BUTTON') })), h("div", { key: '12788241b957ea98433872238c15a8d2ad9c13f6', class: "modal-body" }, h("slot", { key: '1dab9a551e1dbe7e90334869282ef0c6597104a7', name: "content", onSlotchange: (e) => this.handleContentUpdate(e) })), h("div", { key: '215c3be2970c6191a97a878d8fb97d5c8a2a40e6', class: `modal-footer ${this.slotButtonsPresent ? 'buttons-present' : ''}` }, h("slot", { key: '221bf1f5442baa42a6e098505baa32b5aa343ba0', name: "buttons", onSlotchange: (e) => this.handleButtonsSlotChange(e) })))), h("div", { key: '516f850b612376cde60c4cff6f7e04927bda5e7e', "data-focus-trap-edge": true, onFocus: this.handleBottomFocus, tabindex: "0" }))));
     }
     static get is() { return "ifx-modal"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/modal/modal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"modal.js","sourceRoot":"","sources":["../../../src/components/modal/modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Element, State, Event, Host, EventEmitter, h, Watch } from '@stencil/core';\r\nimport { trackComponent } from '../../global/utils/tracking';\r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\nimport { queryShadowRoot, isHidden, isFocusable } from '../../global/utils/focus-trap';\r\nimport { animationTo, KEYFRAMES } from '../../global/utils/animation';\r\n \r\ntype CloseEventTrigger = 'CLOSE_BUTTON' \| 'ESCAPE_KEY' \| 'BACKDROP';\r\n\r\nexport interface BeforeCloseEventDetail {\r\n trigger: CloseEventTrigger;\r\n}\r\n@Component({\r\n tag: 'ifx-modal',\r\n styleUrl: 'modal.scss',\r\n shadow: true\r\n})\r\nexport class IfxModal {\r\n @Prop({ reflect: true, mutable: true }) opened?: boolean = false;\r\n @State() showModal: boolean = this.opened \|\| false;\r\n\r\n @Prop() caption: string = 'Modal Title';\r\n @Prop() captionAriaLabel: string \| null;\r\n\r\n @Prop() closeOnOverlayClick: boolean = true;\r\n\r\n @Event() ifxOpen: EventEmitter;\r\n @Event() ifxClose: EventEmitter;\r\n\r\n @Prop() variant: 'default' \| 'alert-brand' \| 'alert-danger' = 'default';\r\n\r\n @Prop() size: 's' \| 'm' \| 'l' = 's';\r\n\r\n @Prop() alertIcon: string = '';\r\n @Prop() okButtonLabel: string = 'OK';\r\n @Prop() cancelButtonLabel: string = 'Cancel';\r\n @Prop() closeButtonAriaLabel: string \| null;\r\n\r\n @Element() hostElement: HTMLElement;\r\n\r\n @State() slotButtonsPresent: boolean = false;\r\n\r\n @Prop() showCloseButton: boolean = true;\r\n\r\n private modalContainer: HTMLElement;\r\n private focusableElements: HTMLElement[] = [];\r\n private closeButton: HTMLButtonElement \| HTMLIfxIconButtonElement;\r\n private resizeTimeout: ReturnType<typeof setTimeout>;\r\n\r\n handleResize = () => {\r\n clearTimeout(this.resizeTimeout);\r\n this.resizeTimeout = setTimeout(() => {\r\n if (this.showModal) {\r\n this.handleComponentOverflow();\r\n }\r\n }, 100);\r\n};\r\n\r\n async componentDidLoad() {\r\n if(!isNestedInIfxComponent(this.hostElement)) { \r\n const framework = detectFramework();\r\n trackComponent('ifx-modal', await framework)\r\n }\r\n // Query all focusable elements and store them in `focusableElements`.\r\n // Needed for the \"focus trap\" functionality.\r\n this.focusableElements = queryShadowRoot(\r\n this.hostElement.shadowRoot,\r\n (el) => isHidden(el) \|\| el.matches('[data-focus-trap-edge]'),\r\n isFocusable\r\n );\r\n window.addEventListener('resize', this.handleResize);\r\n }\r\n\r\n disconnectedCallback() {\r\n window.removeEventListener('resize', this.handleResize);\r\n}\r\n\r\n componentWillRender() { \r\n if(this.showModal) { \r\n this.handleComponentOverflow();\r\n }\r\n }\r\n\r\n async handleComponentOverflow() { \r\n const modalContentContainer = this.hostElement.shadowRoot.querySelector('.modal-content-container');\r\n if (this.showModal && await this.isModalContentContainerHeightReachedViewport()) {\r\n modalContentContainer.classList.add('no-overflow')\r\n } else if (modalContentContainer?.classList.contains('no-overflow')) {\r\n modalContentContainer?.classList.remove('no-overflow')\r\n }\r\n }\r\n\r\n getFirstFocusableElement(): HTMLElement \| null {\r\n return this.focusableElements[0];\r\n }\r\n\r\n getLastFocusableElement(): HTMLElement \| null {\r\n return this.focusableElements[this.focusableElements.length - 1];\r\n }\r\n\r\n handleTopFocus = () => {\r\n this.attemptFocus(this.getLastFocusableElement());\r\n };\r\n\r\n handleBottomFocus = () => {\r\n this.attemptFocus(this.getFirstFocusableElement());\r\n };\r\n\r\n attemptFocus(element: HTMLElement \| null) {\r\n if (element == null) {\r\n setTimeout(() => { //wait until DOM is fully loaded\r\n this.closeButton.focus();\r\n },);\r\n return;\r\n }\r\n\r\n setTimeout(() => { //wait until DOM is fully loaded\r\n element.focus();\r\n }, 0);\r\n }\r\n\r\n open() {\r\n this.showModal = true;\r\n try {\r\n const anim = animationTo(this.modalContainer, KEYFRAMES.fadeIn, {\r\n duration: 200,\r\n });\r\n anim.addEventListener('finish', () => {\r\n // Setting focus on last item and removing immediately\r\n // so, on tab press first element is focused\r\n setTimeout(() => {\r\n this.getLastFocusableElement()?.focus();\r\n this.getLastFocusableElement()?.blur();\r\n }, 0);\r\n\r\n this.ifxOpen.emit();\r\n });\r\n\r\n this.hostElement.addEventListener('keydown', this.handleKeypress);\r\n } catch (err) {\r\n this.ifxOpen.emit();\r\n }\r\n }\r\n\r\n close() {\r\n try {\r\n const anim = animationTo(this.modalContainer, KEYFRAMES.fadeOut, {\r\n duration: 200,\r\n });\r\n anim.addEventListener('finish', () => {\r\n this.showModal = false;\r\n this.ifxClose.emit();\r\n });\r\n this.hostElement.removeEventListener('keydown', this.handleKeypress);\r\n } catch (err) {\r\n this.showModal = false;\r\n this.ifxClose.emit();\r\n }\r\n }\r\n\r\n handleKeypress = (event: KeyboardEvent) => {\r\n if (!this.showModal) {\r\n return;\r\n }\r\n if (event.key === 'Escape') {\r\n this.doBeforeClose('ESCAPE_KEY');\r\n }\r\n };\r\n\r\n doBeforeClose(trigger: CloseEventTrigger) {\r\n const triggers = [];\r\n triggers.push(trigger);\r\n const prevented = triggers.some((event) => event.defaultPrevented);\r\n if (!prevented) {\r\n this.opened = false;\r\n }\r\n }\r\n\r\n @Watch('opened')\r\n openedChanged(newValue) {\r\n if (newValue === true) {\r\n this.open();\r\n } else {\r\n this.close()\r\n }\r\n }\r\n\r\n handleOverlayClick() {\r\n if (this.closeOnOverlayClick) {\r\n this.doBeforeClose('BACKDROP')\r\n }\r\n }\r\n\r\n handleContentUpdate(e) {\r\n const slotElement = e.target;\r\n const nodes = slotElement.assignedNodes();\r\n if (nodes.length > 0) {\r\n nodes.forEach(node => {\r\n if (node.observer) {\r\n node.observer.disconnect();\r\n delete node.observer;\r\n }\r\n const observer = new MutationObserver((mutationsList, _) => {\r\n for (let mutation of mutationsList) {\r\n if (mutation.type === 'childList') {\r\n if (this.showModal) {\r\n this.handleComponentOverflow();\r\n }\r\n }\r\n }\r\n });\r\n observer.observe(node, { attributes: true, childList: true, subtree: true });\r\n node.observer = observer;\r\n });\r\n }\r\n }\r\n\r\n handleButtonsSlotChange(e) {\r\n if (e.currentTarget.assignedElements()[0]?.childElementCount > 0) {\r\n this.slotButtonsPresent = true;\r\n } else {\r\n this.slotButtonsPresent = false;\r\n }\r\n }\r\n\r\n isModalContentContainerHeightReachedViewport() {\r\n //Adding timeout for proper height detection on Edge browser\r\n return new Promise(resolve => {\r\n setTimeout(() => {\r\n const modalContent = this.hostElement.shadowRoot.querySelector('.modal-content') as HTMLElement;\r\n const modalContentHeight = modalContent.offsetHeight;\r\n const viewportHeight = window.innerHeight;\r\n const extraMarginForEdgeBrowser = 3;\r\n resolve(modalContentHeight + extraMarginForEdgeBrowser >= viewportHeight * 0.9);\r\n }, 100);\r\n });\r\n}\r\n\r\n\r\n render() {\r\n const isAlertVariant = this.variant !== 'default';\r\n return (\r\n <Host>\r\n <div\r\n ref={(el) => (this.modalContainer = el)}\r\n class={`modal-container ${this.showModal ? 'open' : ''}`}\r\n >\r\n <div\r\n class=\"modal-overlay\"\r\n onClick={() => this.handleOverlayClick()}\r\n ></div>\r\n <div\r\n data-focus-trap-edge\r\n onFocus={this.handleTopFocus}\r\n tabindex=\"0\"\r\n ></div>\r\n <div\r\n class={`modal-content-container ${this.size}`}\r\n role=\"dialog\"\r\n aria-modal=\"true\"\r\n aria-label={this.captionAriaLabel}>\r\n {isAlertVariant ? (\r\n <div class={`modal-icon-container ${this.variant === 'alert-brand' ? '' : 'danger'}`}>\r\n {this.alertIcon ? <ifx-icon icon={this.alertIcon} /> : null}\r\n </div>\r\n ) : null}\r\n <div class=\"modal-content\">\r\n <div class=\"modal-header\">\r\n <h2 class=\"modal-caption\">{this.caption}</h2>\r\n {\r\n this.showCloseButton &&\r\n <ifx-icon-button class='modal-close-button' ref={(el) => (this.closeButton = el)} icon=\"cross-16\" variant=\"tertiary\" onClick={() => this.doBeforeClose('CLOSE_BUTTON')}>\r\n </ifx-icon-button>\r\n }\r\n </div>\r\n <div class=\"modal-body\">\r\n <slot name=\"content\" onSlotchange={(e) => this.handleContentUpdate(e)} />\r\n </div>\r\n <div class={`modal-footer ${this.slotButtonsPresent ? 'buttons-present' : ''}`}>\r\n <slot name=\"buttons\" onSlotchange={(e) => this.handleButtonsSlotChange(e)}>\r\n </slot>\r\n </div>\r\n </div>\r\n </div>\r\n <div\r\n data-focus-trap-edge\r\n onFocus={this.handleBottomFocus}\r\n tabindex=\"0\"\r\n ></div>\r\n </div>\r\n </Host>\r\n\r\n );\r\n }\r\n}"]}
1	+ {"version":3,"file":"modal.js","sourceRoot":"","sources":["../../../src/components/modal/modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Element, State, Event, Host, EventEmitter, h, Watch } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\nimport { queryShadowRoot, isHidden, isFocusable } from '../../global/utils/focus-trap';\nimport { animationTo, KEYFRAMES } from '../../global/utils/animation';\n \ntype CloseEventTrigger = 'CLOSE_BUTTON' \| 'ESCAPE_KEY' \| 'BACKDROP';\n\nexport interface BeforeCloseEventDetail {\n trigger: CloseEventTrigger;\n}\n@Component({\n tag: 'ifx-modal',\n styleUrl: 'modal.scss',\n shadow: true\n})\nexport class IfxModal {\n @Prop({ reflect: true, mutable: true }) opened?: boolean = false;\n @State() showModal: boolean = this.opened \|\| false;\n\n @Prop() caption: string = 'Modal Title';\n @Prop() captionAriaLabel: string \| null;\n\n @Prop() closeOnOverlayClick: boolean = true;\n\n @Event() ifxOpen: EventEmitter;\n @Event() ifxClose: EventEmitter;\n\n @Prop() variant: 'default' \| 'alert-brand' \| 'alert-danger' = 'default';\n\n @Prop() size: 's' \| 'm' \| 'l' = 's';\n\n @Prop() alertIcon: string = '';\n @Prop() okButtonLabel: string = 'OK';\n @Prop() cancelButtonLabel: string = 'Cancel';\n @Prop() closeButtonAriaLabel: string \| null;\n\n @Element() hostElement: HTMLElement;\n\n @State() slotButtonsPresent: boolean = false;\n\n @Prop() showCloseButton: boolean = true;\n\n private modalContainer: HTMLElement;\n private focusableElements: HTMLElement[] = [];\n private closeButton: HTMLButtonElement \| HTMLIfxIconButtonElement;\n private resizeTimeout: ReturnType<typeof setTimeout>;\n\n handleResize = () => {\n clearTimeout(this.resizeTimeout);\n this.resizeTimeout = setTimeout(() => {\n if (this.showModal) {\n this.handleComponentOverflow();\n }\n }, 100);\n};\n\n async componentDidLoad() {\n if(!isNestedInIfxComponent(this.hostElement)) { \n const framework = detectFramework();\n trackComponent('ifx-modal', await framework)\n }\n // Query all focusable elements and store them in `focusableElements`.\n // Needed for the \"focus trap\" functionality.\n this.focusableElements = queryShadowRoot(\n this.hostElement.shadowRoot,\n (el) => isHidden(el) \|\| el.matches('[data-focus-trap-edge]'),\n isFocusable\n );\n window.addEventListener('resize', this.handleResize);\n }\n\n disconnectedCallback() {\n window.removeEventListener('resize', this.handleResize);\n}\n\n componentWillRender() { \n if(this.showModal) { \n this.handleComponentOverflow();\n }\n }\n\n async handleComponentOverflow() { \n const modalContentContainer = this.hostElement.shadowRoot.querySelector('.modal-content-container');\n if (this.showModal && await this.isModalContentContainerHeightReachedViewport()) {\n modalContentContainer.classList.add('no-overflow')\n } else if (modalContentContainer?.classList.contains('no-overflow')) {\n modalContentContainer?.classList.remove('no-overflow')\n }\n }\n\n getFirstFocusableElement(): HTMLElement \| null {\n return this.focusableElements[0];\n }\n\n getLastFocusableElement(): HTMLElement \| null {\n return this.focusableElements[this.focusableElements.length - 1];\n }\n\n handleTopFocus = () => {\n this.attemptFocus(this.getLastFocusableElement());\n };\n\n handleBottomFocus = () => {\n this.attemptFocus(this.getFirstFocusableElement());\n };\n\n attemptFocus(element: HTMLElement \| null) {\n if (element == null) {\n setTimeout(() => { //wait until DOM is fully loaded\n this.closeButton.focus();\n },);\n return;\n }\n\n setTimeout(() => { //wait until DOM is fully loaded\n element.focus();\n }, 0);\n }\n\n open() {\n this.showModal = true;\n try {\n const anim = animationTo(this.modalContainer, KEYFRAMES.fadeIn, {\n duration: 200,\n });\n anim.addEventListener('finish', () => {\n // Setting focus on last item and removing immediately\n // so, on tab press first element is focused\n setTimeout(() => {\n this.getLastFocusableElement()?.focus();\n this.getLastFocusableElement()?.blur();\n }, 0);\n\n this.ifxOpen.emit();\n });\n\n this.hostElement.addEventListener('keydown', this.handleKeypress);\n } catch (err) {\n this.ifxOpen.emit();\n }\n }\n\n close() {\n try {\n const anim = animationTo(this.modalContainer, KEYFRAMES.fadeOut, {\n duration: 200,\n });\n anim.addEventListener('finish', () => {\n this.showModal = false;\n this.ifxClose.emit();\n });\n this.hostElement.removeEventListener('keydown', this.handleKeypress);\n } catch (err) {\n this.showModal = false;\n this.ifxClose.emit();\n }\n }\n\n handleKeypress = (event: KeyboardEvent) => {\n if (!this.showModal) {\n return;\n }\n if (event.key === 'Escape') {\n this.doBeforeClose('ESCAPE_KEY');\n }\n };\n\n doBeforeClose(trigger: CloseEventTrigger) {\n const triggers = [];\n triggers.push(trigger);\n const prevented = triggers.some((event) => event.defaultPrevented);\n if (!prevented) {\n this.opened = false;\n }\n }\n\n @Watch('opened')\n openedChanged(newValue) {\n if (newValue === true) {\n this.open();\n } else {\n this.close()\n }\n }\n\n handleOverlayClick() {\n if (this.closeOnOverlayClick) {\n this.doBeforeClose('BACKDROP')\n }\n }\n\n handleContentUpdate(e) {\n const slotElement = e.target;\n const nodes = slotElement.assignedNodes();\n if (nodes.length > 0) {\n nodes.forEach(node => {\n if (node.observer) {\n node.observer.disconnect();\n delete node.observer;\n }\n const observer = new MutationObserver((mutationsList, _) => {\n for (let mutation of mutationsList) {\n if (mutation.type === 'childList') {\n if (this.showModal) {\n this.handleComponentOverflow();\n }\n }\n }\n });\n observer.observe(node, { attributes: true, childList: true, subtree: true });\n node.observer = observer;\n });\n }\n }\n\n handleButtonsSlotChange(e) {\n if (e.currentTarget.assignedElements()[0]?.childElementCount > 0) {\n this.slotButtonsPresent = true;\n } else {\n this.slotButtonsPresent = false;\n }\n }\n\n isModalContentContainerHeightReachedViewport() {\n //Adding timeout for proper height detection on Edge browser\n return new Promise(resolve => {\n setTimeout(() => {\n const modalContent = this.hostElement.shadowRoot.querySelector('.modal-content') as HTMLElement;\n const modalContentHeight = modalContent.offsetHeight;\n const viewportHeight = window.innerHeight;\n const extraMarginForEdgeBrowser = 3;\n resolve(modalContentHeight + extraMarginForEdgeBrowser >= viewportHeight * 0.9);\n }, 100);\n });\n}\n\n\n render() {\n const isAlertVariant = this.variant !== 'default';\n return (\n <Host>\n <div\n ref={(el) => (this.modalContainer = el)}\n class={`modal-container ${this.showModal ? 'open' : ''}`}\n >\n <div\n class=\"modal-overlay\"\n onClick={() => this.handleOverlayClick()}\n ></div>\n <div\n data-focus-trap-edge\n onFocus={this.handleTopFocus}\n tabindex=\"0\"\n ></div>\n <div\n class={`modal-content-container ${this.size}`}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-label={this.captionAriaLabel}>\n {isAlertVariant ? (\n <div class={`modal-icon-container ${this.variant === 'alert-brand' ? '' : 'danger'}`}>\n {this.alertIcon ? <ifx-icon icon={this.alertIcon} /> : null}\n </div>\n ) : null}\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <h2 class=\"modal-caption\">{this.caption}</h2>\n {\n this.showCloseButton &&\n <ifx-icon-button class='modal-close-button' ref={(el) => (this.closeButton = el)} icon=\"cross-16\" variant=\"tertiary\" onClick={() => this.doBeforeClose('CLOSE_BUTTON')}>\n </ifx-icon-button>\n }\n </div>\n <div class=\"modal-body\">\n <slot name=\"content\" onSlotchange={(e) => this.handleContentUpdate(e)} />\n </div>\n <div class={`modal-footer ${this.slotButtonsPresent ? 'buttons-present' : ''}`}>\n <slot name=\"buttons\" onSlotchange={(e) => this.handleButtonsSlotChange(e)}>\n </slot>\n </div>\n </div>\n </div>\n <div\n data-focus-trap-edge\n onFocus={this.handleBottomFocus}\n tabindex=\"0\"\n ></div>\n </div>\n </Host>\n\n );\n }\n}"]}

package/dist/collection/components/modal/modal.stories.js CHANGED Viewed

@@ -186,8 +186,8 @@ const Template = ({ caption, captionAriaLabel, closeButtonAriaLabel, showCloseBu
     modal.addEventListener('ifxClose', action('ifxClose'));
     const content = document.createElement('div');
     content.setAttribute('slot', 'content');
-    content.innerHTML = `
-    <span>Modal content</span>
+    content.innerHTML = `
+    <span>Modal content</span>
   `;
     modal.appendChild(content);
     const buttons = document.createElement('div');