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

@infineon/infineon-design-system-stencil 39.4.4-canary.0 → 39.5.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/alert/alert.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"alert.stories.js","sourceRoot":"","sources":["../../../src/components/alert/alert.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAEjD,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,IAAI,EAAE;QACJ,KAAK,EAAE,qDAAqD;QAC5D,OAAO,EAAE,SAAS;QAClB,QAAQ,EAAE,IAAI;QACd,IAAI,EAAE,WAAW;QACjB,QAAQ,EAAE,WAAW;KACtB;IAED,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,IAAI,EAAE,gBAAgB;YACtB,WAAW,EAAE,kCAAkC;YAC/C,KAAK,EAAE;gBACL,QAAQ,EAAE,gBAAgB;aAC3B;SACF;QACD,OAAO,EAAE;YACP,WAAW,EAAE,sCAAsC;YACnD,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,CAAC;YACpD,OAAO,EAAE,OAAO;YAChB,KAAK,EAAE;gBACL,QAAQ,EAAE,iBAAiB;gBAC3B,YAAY,EAAE;oBACZ,OAAO,EAAE,SAAS;iBACnB;aACF;SACF;QAED,IAAI,EAAE;YACJ,WAAW,EAAE,iEAAiE;YAC9E,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC;YAC3B,OAAO,EAAE,QAAQ;YACjB,KAAK,EAAE;gBACL,QAAQ,EAAE,iBAAiB;gBAC3B,YAAY,EAAE;oBACZ,OAAO,EAAE,WAAW;iBACrB;aACF;SACF;QACD,QAAQ,EAAE;YACR,WAAW,EAAE,sDAAsD;YACnE,OAAO,EAAE,SAAS;YAClB,KAAK,EAAE;gBACL,QAAQ,EAAE,iBAAiB;gBAC3B,YAAY,EAAE;oBACZ,OAAO,EAAE,MAAM;iBAChB;aACF;SACF;QAED,QAAQ,EAAE;YACR,MAAM,EAAE,UAAU;YAClB,WAAW,EAAE,iDAAiD;YAC9D,KAAK,EAAE;gBACL,QAAQ,EAAE,eAAe;gBACzB,IAAI,EAAE;oBACJ,OAAO,EAAE,uBAAuB;oBAChC,MAAM,EACJ,6KAA6K;iBAChL;aACF;SACF;QAED,QAAQ,EAAE;YACR,OAAO,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,WAAW,CAAC;YACvC,OAAO,EAAE,OAAO;YAChB,WAAW,EAAE,wDAAwD;YACrE,KAAK,EAAE;gBACL,QAAQ,EAAE,iBAAiB;gBAC3B,YAAY,EAAE;oBACZ,OAAO,EAAE,WAAW;iBACrB;aACF;SACF;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,yBAAyB,IAAI,CAAC,QAAQ,cAAc,IAAI,CAAC,OAAO,WAAW,IAAI,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,eAAe,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,KAAK,cAAc,CAAC;AAE1M,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEhD,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE,CAC1B,yCAAyC,IAAI,CAAC,QAAQ;;;;;iBAKvC,CAAC;AAElB,MAAM,CAAC,MAAM,IAAI,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC1C,IAAI,CAAC,QAAQ,GAAG;IACd,OAAO,EAAE;QACP,KAAK,EAAE;YACL,OAAO,EAAE,IAAI;SACd;KACF;IACD,IAAI,EAAE;QACJ,KAAK,EAAE;YACL,OAAO,EAAE,IAAI;SACd;KACF;IACD,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,OAAO,EAAE,IAAI;SACd;KACF;CACF,CAAC","sourcesContent":["import { icons } from '@infineon/infineon-icons';\r\n\r\nexport default {\r\n title: 'Components/Alert',\r\n tags: ['autodocs'],\r\n\r\n args: {\r\n label: 'Attention! This is an alert message — check it out!',\r\n variant: 'primary',\r\n closable: true,\r\n icon: 'c-info-16',\r\n AriaLive: 'assertive',\r\n },\r\n\r\n argTypes: {\r\n label: {\r\n name: 'Label of Alert',\r\n description: 'Sets the label of <ifx-alert>.',\r\n table: {\r\n category: 'story controls'\r\n }\r\n },\r\n variant: {\r\n description: 'Sets the style variant of the alert.',\r\n options: ['primary', 'success', 'danger', 'warning'],\r\n control: 'radio',\r\n table: {\r\n category: 'ifx-alert props',\r\n defaultValue: {\r\n summary: 'primary'\r\n }\r\n }\r\n },\r\n\r\n icon: {\r\n description: 'The icon to be displayed. Choose *none* to display no icon.',\r\n options: Object.keys(icons),\r\n control: 'select',\r\n table: {\r\n category: 'ifx-alert props',\r\n defaultValue: {\r\n summary: 'c-info-16'\r\n }\r\n }\r\n },\r\n closable: {\r\n description: 'Defines whether the alert should be closable or not.',\r\n control: 'boolean',\r\n table: {\r\n category: 'ifx-alert props',\r\n defaultValue: {\r\n summary: 'true'\r\n }\r\n }\r\n },\r\n\r\n ifxClose: {\r\n action: 'ifxClose',\r\n description: 'Custom event emitted when close button clicked.',\r\n table: {\r\n category: 'custom events',\r\n type: {\r\n summary: 'Framework integration',\r\n detail:\r\n 'React: onIfxClose={handleChange}\\nVue:@ifxClose=\"handleChange\"\\nAngular:(ifxClose)=\"handleChange()\"\\nVanillaJs:.addEventListener(\"ifxClose\", (event) => {//handle change});',\r\n },\r\n },\r\n },\r\n\r\n AriaLive: { \r\n options: ['off', 'polite', 'assertive'],\r\n control: 'radio',\r\n description: 'The aria-live attribute to indicate a dynamic content.',\r\n table: {\r\n category: 'ifx-alert props',\r\n defaultValue: {\r\n summary: 'assertive'\r\n }\r\n }\r\n },\r\n },\r\n};\r\n\r\nconst DefaultTemplate = args => `<ifx-alert aria-live=\"${args.AriaLive}\" variant=\"${args.variant}\" icon=\"${args.icon === 'none' ? '' : args.icon}\" closable=\"${args.closable}\">${args.label}</ifx-alert>`;\r\n\r\nexport const Default = DefaultTemplate.bind({});\r\n\r\nconst InfoTemplate = args =>\r\n ` <ifx-alert variant=\"info\" closable=\"${args.closable}\">\r\n <div slot=\"headline\">Headline</div>\r\n <div slot=\"desc\">\r\n Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi animi voluptatum quia esse dolor corrupti veniam dolorum. Voluptatem ut enim voluptate. Provident modi molestiae at atque rerum cupiditate, dicta recusandae ab libero veniam iusto possimus quia sequi amet, tempora dolore nobis excepturi est illo blanditiis nihil laborum enim ducimus consequuntur.\r\n </div>\r\n </ifx-alert>`;\r\n\r\nexport const Info = InfoTemplate.bind({});\r\nInfo.argTypes = {\r\n variant: {\r\n table: {\r\n disable: true,\r\n },\r\n },\r\n icon: {\r\n table: {\r\n disable: true,\r\n },\r\n },\r\n showIcon: {\r\n table: {\r\n disable: true,\r\n },\r\n },\r\n};\r\n"]}
1	+ {"version":3,"file":"alert.stories.js","sourceRoot":"","sources":["../../../src/components/alert/alert.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAEjD,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,IAAI,EAAE;QACJ,KAAK,EAAE,qDAAqD;QAC5D,OAAO,EAAE,SAAS;QAClB,QAAQ,EAAE,IAAI;QACd,IAAI,EAAE,WAAW;QACjB,QAAQ,EAAE,WAAW;KACtB;IAED,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,IAAI,EAAE,gBAAgB;YACtB,WAAW,EAAE,kCAAkC;YAC/C,KAAK,EAAE;gBACL,QAAQ,EAAE,gBAAgB;aAC3B;SACF;QACD,OAAO,EAAE;YACP,WAAW,EAAE,sCAAsC;YACnD,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,CAAC;YACpD,OAAO,EAAE,OAAO;YAChB,KAAK,EAAE;gBACL,QAAQ,EAAE,iBAAiB;gBAC3B,YAAY,EAAE;oBACZ,OAAO,EAAE,SAAS;iBACnB;aACF;SACF;QAED,IAAI,EAAE;YACJ,WAAW,EAAE,iEAAiE;YAC9E,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC;YAC3B,OAAO,EAAE,QAAQ;YACjB,KAAK,EAAE;gBACL,QAAQ,EAAE,iBAAiB;gBAC3B,YAAY,EAAE;oBACZ,OAAO,EAAE,WAAW;iBACrB;aACF;SACF;QACD,QAAQ,EAAE;YACR,WAAW,EAAE,sDAAsD;YACnE,OAAO,EAAE,SAAS;YAClB,KAAK,EAAE;gBACL,QAAQ,EAAE,iBAAiB;gBAC3B,YAAY,EAAE;oBACZ,OAAO,EAAE,MAAM;iBAChB;aACF;SACF;QAED,QAAQ,EAAE;YACR,MAAM,EAAE,UAAU;YAClB,WAAW,EAAE,iDAAiD;YAC9D,KAAK,EAAE;gBACL,QAAQ,EAAE,eAAe;gBACzB,IAAI,EAAE;oBACJ,OAAO,EAAE,uBAAuB;oBAChC,MAAM,EACJ,6KAA6K;iBAChL;aACF;SACF;QAED,QAAQ,EAAE;YACR,OAAO,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,WAAW,CAAC;YACvC,OAAO,EAAE,OAAO;YAChB,WAAW,EAAE,wDAAwD;YACrE,KAAK,EAAE;gBACL,QAAQ,EAAE,iBAAiB;gBAC3B,YAAY,EAAE;oBACZ,OAAO,EAAE,WAAW;iBACrB;aACF;SACF;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,yBAAyB,IAAI,CAAC,QAAQ,cAAc,IAAI,CAAC,OAAO,WAAW,IAAI,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,eAAe,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,KAAK,cAAc,CAAC;AAE1M,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEhD,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE,CAC1B,yCAAyC,IAAI,CAAC,QAAQ;;;;;iBAKvC,CAAC;AAElB,MAAM,CAAC,MAAM,IAAI,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC1C,IAAI,CAAC,QAAQ,GAAG;IACd,OAAO,EAAE;QACP,KAAK,EAAE;YACL,OAAO,EAAE,IAAI;SACd;KACF;IACD,IAAI,EAAE;QACJ,KAAK,EAAE;YACL,OAAO,EAAE,IAAI;SACd;KACF;IACD,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,OAAO,EAAE,IAAI;SACd;KACF;CACF,CAAC","sourcesContent":["import { icons } from '@infineon/infineon-icons';\n\nexport default {\n title: 'Components/Alert',\n tags: ['autodocs'],\n\n args: {\n label: 'Attention! This is an alert message — check it out!',\n variant: 'primary',\n closable: true,\n icon: 'c-info-16',\n AriaLive: 'assertive',\n },\n\n argTypes: {\n label: {\n name: 'Label of Alert',\n description: 'Sets the label of <ifx-alert>.',\n table: {\n category: 'story controls'\n }\n },\n variant: {\n description: 'Sets the style variant of the alert.',\n options: ['primary', 'success', 'danger', 'warning'],\n control: 'radio',\n table: {\n category: 'ifx-alert props',\n defaultValue: {\n summary: 'primary'\n }\n }\n },\n\n icon: {\n description: 'The icon to be displayed. Choose *none* to display no icon.',\n options: Object.keys(icons),\n control: 'select',\n table: {\n category: 'ifx-alert props',\n defaultValue: {\n summary: 'c-info-16'\n }\n }\n },\n closable: {\n description: 'Defines whether the alert should be closable or not.',\n control: 'boolean',\n table: {\n category: 'ifx-alert props',\n defaultValue: {\n summary: 'true'\n }\n }\n },\n\n ifxClose: {\n action: 'ifxClose',\n description: 'Custom event emitted when close button clicked.',\n table: {\n category: 'custom events',\n type: {\n summary: 'Framework integration',\n detail:\n 'React: onIfxClose={handleChange}\\nVue:@ifxClose=\"handleChange\"\\nAngular:(ifxClose)=\"handleChange()\"\\nVanillaJs:.addEventListener(\"ifxClose\", (event) => {//handle change});',\n },\n },\n },\n\n AriaLive: { \n options: ['off', 'polite', 'assertive'],\n control: 'radio',\n description: 'The aria-live attribute to indicate a dynamic content.',\n table: {\n category: 'ifx-alert props',\n defaultValue: {\n summary: 'assertive'\n }\n }\n },\n },\n};\n\nconst DefaultTemplate = args => `<ifx-alert aria-live=\"${args.AriaLive}\" variant=\"${args.variant}\" icon=\"${args.icon === 'none' ? '' : args.icon}\" closable=\"${args.closable}\">${args.label}</ifx-alert>`;\n\nexport const Default = DefaultTemplate.bind({});\n\nconst InfoTemplate = args =>\n ` <ifx-alert variant=\"info\" closable=\"${args.closable}\">\n <div slot=\"headline\">Headline</div>\n <div slot=\"desc\">\n Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi animi voluptatum quia esse dolor corrupti veniam dolorum. Voluptatem ut enim voluptate. Provident modi molestiae at atque rerum cupiditate, dicta recusandae ab libero veniam iusto possimus quia sequi amet, tempora dolore nobis excepturi est illo blanditiis nihil laborum enim ducimus consequuntur.\n </div>\n </ifx-alert>`;\n\nexport const Info = InfoTemplate.bind({});\nInfo.argTypes = {\n variant: {\n table: {\n disable: true,\n },\n },\n icon: {\n table: {\n disable: true,\n },\n },\n showIcon: {\n table: {\n disable: true,\n },\n },\n};\n"]}

package/dist/collection/components/breadcrumb/breadcrumb-item-label.js CHANGED Viewed

@@ -9,7 +9,7 @@ export class BreadcrumbItemLabel {
         this.breadcrumbMenuIconWrapper.emit(menuWrapper);
     }
     render() {
-        return (h("a", { key: '0df8c85ff6842301df2c75f00ced6a0d0ab09fe8', href: this.href, target: this.target, class: "breadcrumb-item-label-container", role: 'link' }, h("ifx-icon", { key: '64622dca43720e5e648716eda0e2e82b41e3c05a', icon: this.icon, "aria-hidden": "true" }), h("span", { key: '303111b07a09ad6cacd0543886a30c870b5c954a', class: "label-wrapper" }, h("slot", { key: '6d1ffb7974ff5b99cd683a7ba7bdc843801c49fc' })), h("span", { key: '2dc0bf3fecba920428d7070c0c7f21a9642d203c', class: "menu-icon-wrapper", "aria-hiden": "true" }, h("ifx-icon", { key: '13b8fe74cad022079aade7c495d69e9cd3935aac', icon: "chevron-down-16" }))));
+        return (h("a", { key: '7e5dbe02aa52451f7a5d972635efe4a43ecb1f6c', href: this.href, target: this.target, class: "breadcrumb-item-label-container", role: 'link' }, h("ifx-icon", { key: 'f441ce13b8c16b94511f75d18de8296e7c6b468e', icon: this.icon, "aria-hidden": "true" }), h("span", { key: 'cbeb92d41edb4ba9d7a2c44b1d024eb41f6344e8', class: "label-wrapper" }, h("slot", { key: '8e5d86e84c1005ec8cf4ec1066d4c33a72f848e2' })), h("span", { key: 'b2f401a1ee8c6a5f792c42a06f3a5534773c8158', class: "menu-icon-wrapper", "aria-hiden": "true" }, h("ifx-icon", { key: 'e93b04e4fa9f8b916eb11be53f613668808dce5f', icon: "chevron-down-16" }))));
     }
     static get is() { return "ifx-breadcrumb-item-label"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/breadcrumb/breadcrumb-item-label.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"breadcrumb-item-label.js","sourceRoot":"","sources":["../../../src/components/breadcrumb/breadcrumb-item-label.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAOjF,MAAM,OAAO,mBAAmB;IALhC;QAQU,WAAM,GAAW,OAAO,CAAA;KAuBjC;IAnBC,gBAAgB;QACd,MAAM,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,kCAAkC,CAAC,CAAA;QACtF,MAAM,WAAW,GAAG,SAAS,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAA;QACjE,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAA;IAClD,CAAC;IAED,MAAM;QACJ,OAAO,CACL,0DAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAC,iCAAiC,EAAC,IAAI,EAAC,MAAM;YAC1F,iEAAU,IAAI,EAAE,IAAI,CAAC,IAAI,iBAAc,MAAM,GAAY;YACzD,6DAAM,KAAK,EAAC,eAAe;gBACzB,8DAAQ,CACH;YACR,6DAAM,KAAK,EAAC,mBAAmB,gBAAY,MAAM;gBAChD,iEAAU,IAAI,EAAC,iBAAiB,GAAY,CACtC,CACJ,CACL,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Element, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'ifx-breadcrumb-item-label',\r\n styleUrl: 'breadcrumb-item-label.scss',\r\n shadow: true,\r\n})\r\nexport class BreadcrumbItemLabel {\r\n @Prop() icon: string;\r\n @Prop() href: string;\r\n @Prop() target: string = \"_self\"\r\n @Element() el;\r\n @Event() breadcrumbMenuIconWrapper: EventEmitter<CustomEvent>;\r\n\r\n componentDidLoad() { \r\n const container = this.el.shadowRoot.querySelector('.breadcrumb-item-label-container')\r\n const menuWrapper = container.querySelector('.menu-icon-wrapper')\r\n this.breadcrumbMenuIconWrapper.emit(menuWrapper)\r\n }\r\n\r\n render() {\r\n return (\r\n <a href={this.href} target={this.target} class=\"breadcrumb-item-label-container\" role='link'>\r\n <ifx-icon icon={this.icon} aria-hidden=\"true\"></ifx-icon>\r\n <span class=\"label-wrapper\">\r\n <slot />\r\n </span>\r\n <span class=\"menu-icon-wrapper\" aria-hiden=\"true\">\r\n <ifx-icon icon=\"chevron-down-16\"></ifx-icon>\r\n </span>\r\n </a>\r\n );\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"breadcrumb-item-label.js","sourceRoot":"","sources":["../../../src/components/breadcrumb/breadcrumb-item-label.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAOjF,MAAM,OAAO,mBAAmB;IALhC;QAQU,WAAM,GAAW,OAAO,CAAA;KAuBjC;IAnBC,gBAAgB;QACd,MAAM,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,kCAAkC,CAAC,CAAA;QACtF,MAAM,WAAW,GAAG,SAAS,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAA;QACjE,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAA;IAClD,CAAC;IAED,MAAM;QACJ,OAAO,CACL,0DAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAC,iCAAiC,EAAC,IAAI,EAAC,MAAM;YAC1F,iEAAU,IAAI,EAAE,IAAI,CAAC,IAAI,iBAAc,MAAM,GAAY;YACzD,6DAAM,KAAK,EAAC,eAAe;gBACzB,8DAAQ,CACH;YACR,6DAAM,KAAK,EAAC,mBAAmB,gBAAY,MAAM;gBAChD,iEAAU,IAAI,EAAC,iBAAiB,GAAY,CACtC,CACJ,CACL,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Element, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'ifx-breadcrumb-item-label',\n styleUrl: 'breadcrumb-item-label.scss',\n shadow: true,\n})\nexport class BreadcrumbItemLabel {\n @Prop() icon: string;\n @Prop() href: string;\n @Prop() target: string = \"_self\"\n @Element() el;\n @Event() breadcrumbMenuIconWrapper: EventEmitter<CustomEvent>;\n\n componentDidLoad() { \n const container = this.el.shadowRoot.querySelector('.breadcrumb-item-label-container')\n const menuWrapper = container.querySelector('.menu-icon-wrapper')\n this.breadcrumbMenuIconWrapper.emit(menuWrapper)\n }\n\n render() {\n return (\n <a href={this.href} target={this.target} class=\"breadcrumb-item-label-container\" role='link'>\n <ifx-icon icon={this.icon} aria-hidden=\"true\"></ifx-icon>\n <span class=\"label-wrapper\">\n <slot />\n </span>\n <span class=\"menu-icon-wrapper\" aria-hiden=\"true\">\n <ifx-icon icon=\"chevron-down-16\"></ifx-icon>\n </span>\n </a>\n );\n }\n}\n"]}

package/dist/collection/components/breadcrumb/breadcrumb-item.js CHANGED Viewed

@@ -95,7 +95,7 @@ export class BreadcrumbItem {
         }
     }
     render() {
-        return (h("li", { key: '0ee6ed799adc858ad01d1b2d9460eafc1e613fd2', class: 'breadcrumb-parent', "aria-current": `${this.isLastItem ? 'page' : ""}` }, h("li", { key: 'dd4a8bb50869e19a9eadc468096e4b12728c0e27', role: "button", tabindex: this.hasDropdownMenu ? 0 : -1, class: "breadcrumb-wrapper", onClick: () => this.toggleDropdownMenu(), "aria-controls": this.uniqueId, "aria-haspopup": "menu", "aria-label": "Toggle dropdown menu" }, h("slot", { key: 'ec4d8d34298aeb16be0083a993836bb4b8faf9f8', name: 'label' }), h("div", { key: '8ed7c0e83f3ebea4d64f27d86a05e41f33317e6e', id: this.uniqueId, class: "dropdown-menu", "aria-expanded": this.isDropdownMenuOpen(), "aria-label": "Dropdown menu" }, h("slot", { key: '53a60855930e991a71d88d39e9bda3ffcd8d7b8a' }))), !this.isLastItem && h("span", { key: '4bebb7c1c4756010812fa11ceb786b05aac97d31', class: "breadcrumb-divider", "aria-hidden": "true" }, "/")));
+        return (h("li", { key: 'a089ea29fc59af41abc50c33749e5ae1b10ca676', class: 'breadcrumb-parent', "aria-current": `${this.isLastItem ? 'page' : ""}` }, h("li", { key: 'f4b3fb7d67b7dee11607194a6193cd55f3f80963', role: "button", tabindex: this.hasDropdownMenu ? 0 : -1, class: "breadcrumb-wrapper", onClick: () => this.toggleDropdownMenu(), "aria-controls": this.uniqueId, "aria-haspopup": "menu", "aria-label": "Toggle dropdown menu" }, h("slot", { key: '5b6b54e8d95d2378e12a4ce891a1ce3c0ab4fa57', name: 'label' }), h("div", { key: '073d8a8be471e4b7fc2e9082026a19ada1c30d17', id: this.uniqueId, class: "dropdown-menu", "aria-expanded": this.isDropdownMenuOpen(), "aria-label": "Dropdown menu" }, h("slot", { key: 'e40bed7c7686a96ffaf6b560b32215c5dd65e26b' }))), !this.isLastItem && h("span", { key: '1b992e7d60c09a445146be12f0cc06aa7ef40dc0', class: "breadcrumb-divider", "aria-hidden": "true" }, "/")));
     }
     static get is() { return "ifx-breadcrumb-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/breadcrumb/breadcrumb-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"breadcrumb-item.js","sourceRoot":"","sources":["../../../src/components/breadcrumb/breadcrumb-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Element, State, Listen } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'ifx-breadcrumb-item',\r\n styleUrl: 'breadcrumb-item.scss',\r\n shadow: true,\r\n})\r\nexport class BreadcrumbItem {\r\n\r\n @State() isLastItem: boolean = false;\r\n @Element() el;\r\n private emittedElement: HTMLElement;\r\n @State() uniqueId: string;\r\n @State() hasDropdownMenu: boolean = false;\r\n\r\n @Listen('mousedown', { target: 'document' })\r\n handleOutsideClick(event: MouseEvent) {\r\n const path = event.composedPath();\r\n if (!path.includes(this.el)) {\r\n this.closeDropdownMenu();\r\n }\r\n }\r\n\r\n @Listen('keydown')\r\n handleKeyDown(ev: KeyboardEvent) {\r\n if (ev.key === 'Enter' \|\| ev.key === ' ') {\r\n this.toggleDropdownMenu();\r\n } else if (ev.key === 'Escape') {\r\n this.closeDropdownMenu();\r\n }\r\n }\r\n\r\n getDropdownMenu() {\r\n const dropdownMenu = this.el.shadowRoot.querySelector('.dropdown-menu');\r\n return dropdownMenu\r\n }\r\n\r\n @Listen('breadcrumbMenuIconWrapper')\r\n menuWrapperEventReEmitter(event: CustomEvent<HTMLElement>) { \r\n this.emittedElement = event.detail;\r\n }\r\n\r\n getMenuIconWrapper(): HTMLElement \| undefined {\r\n return this.emittedElement;\r\n }\r\n\r\n handleClassList(el, type, className) {\r\n el.classList[type](className)\r\n }\r\n\r\n closeDropdownMenu() {\r\n if(this.hasDropdownMenu) {\r\n const dropdownMenu = this.getDropdownMenu()\r\n const menuWrapper = this.getMenuIconWrapper()\r\n this.handleClassList(dropdownMenu, 'remove', 'open')\r\n this.handleClassList(menuWrapper, 'remove', 'show')\r\n }\r\n }\r\n\r\n toggleDropdownMenu() { \r\n if(this.hasDropdownMenu) {\r\n const dropdownMenu = this.getDropdownMenu()\r\n const menuWrapper = this.getMenuIconWrapper()\r\n this.handleClassList(dropdownMenu, 'toggle', 'open')\r\n this.handleClassList(menuWrapper, 'toggle', 'show')\r\n }\r\n }\r\n\r\n isDropdownMenuOpen(): boolean {\r\n const dropdownMenu = this.getDropdownMenu()\r\n return this.hasDropdownMenu && dropdownMenu && dropdownMenu.classList.contains('open')\r\n }\r\n\r\n handleLastItem() { \r\n const breadcrumbItems = this.el.closest('ifx-breadcrumb').querySelectorAll('ifx-breadcrumb-item')\r\n if(this.el === breadcrumbItems[breadcrumbItems.length-1]) { \r\n this.isLastItem = true;\r\n } else this.isLastItem = false;\r\n }\r\n\r\n generateUniqueId(prefix = 'id') {\r\n return `${prefix}-${Math.random().toString(36).substring(2, 9)}`;\r\n }\r\n\r\n componentWillLoad() { \r\n if (!this.uniqueId) {\r\n this.uniqueId = this.generateUniqueId('breadcrumb-dropdown');\r\n }\r\n this.handleLastItem()\r\n }\r\n\r\n componentDidUpdate() {\r\n this.handleLastItem()\r\n }\r\n\r\n componentWillRender() { \r\n this.setHasDropdownMenuState()\r\n }\r\n\r\n setHasDropdownMenuState() { \r\n const dropdownMenu = this.getIfxDropdownMenuComponent();\r\n if(dropdownMenu) {\r\n this.hasDropdownMenu = !!dropdownMenu;\r\n }\r\n }\r\n\r\n getIfxDropdownMenuComponent() { \r\n const dropdownMenu = this.el.querySelector('ifx-dropdown-menu');\r\n return dropdownMenu;\r\n }\r\n\r\n componentDidLoad() { \r\n const dropdownMenu = this.getIfxDropdownMenuComponent();\r\n\r\n if(!this.hasDropdownMenu) { \r\n const iconMenuWrapper = this.getMenuIconWrapper();\r\n this.handleClassList(iconMenuWrapper, 'toggle', 'hide');\r\n } else { \r\n dropdownMenu.isOpen = true;\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <li class='breadcrumb-parent' aria-current={`${this.isLastItem ? 'page' : \"\"}`}>\r\n <li role=\"button\" tabindex={this.hasDropdownMenu ? 0 : -1} class=\"breadcrumb-wrapper\" onClick={() => this.toggleDropdownMenu()} aria-controls={this.uniqueId} aria-haspopup=\"menu\" aria-label=\"Toggle dropdown menu\">\r\n <slot name='label'/>\r\n <div id={this.uniqueId} class=\"dropdown-menu\" aria-expanded={this.isDropdownMenuOpen()} aria-label=\"Dropdown menu\">\r\n <slot />\r\n </div>\r\n </li>\r\n {!this.isLastItem && <span class=\"breadcrumb-divider\" aria-hidden=\"true\">/</span>}\r\n </li>\r\n );\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"breadcrumb-item.js","sourceRoot":"","sources":["../../../src/components/breadcrumb/breadcrumb-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Element, State, Listen } from '@stencil/core';\n\n@Component({\n tag: 'ifx-breadcrumb-item',\n styleUrl: 'breadcrumb-item.scss',\n shadow: true,\n})\nexport class BreadcrumbItem {\n\n @State() isLastItem: boolean = false;\n @Element() el;\n private emittedElement: HTMLElement;\n @State() uniqueId: string;\n @State() hasDropdownMenu: boolean = false;\n\n @Listen('mousedown', { target: 'document' })\n handleOutsideClick(event: MouseEvent) {\n const path = event.composedPath();\n if (!path.includes(this.el)) {\n this.closeDropdownMenu();\n }\n }\n\n @Listen('keydown')\n handleKeyDown(ev: KeyboardEvent) {\n if (ev.key === 'Enter' \|\| ev.key === ' ') {\n this.toggleDropdownMenu();\n } else if (ev.key === 'Escape') {\n this.closeDropdownMenu();\n }\n }\n\n getDropdownMenu() {\n const dropdownMenu = this.el.shadowRoot.querySelector('.dropdown-menu');\n return dropdownMenu\n }\n\n @Listen('breadcrumbMenuIconWrapper')\n menuWrapperEventReEmitter(event: CustomEvent<HTMLElement>) { \n this.emittedElement = event.detail;\n }\n\n getMenuIconWrapper(): HTMLElement \| undefined {\n return this.emittedElement;\n }\n\n handleClassList(el, type, className) {\n el.classList[type](className)\n }\n\n closeDropdownMenu() {\n if(this.hasDropdownMenu) {\n const dropdownMenu = this.getDropdownMenu()\n const menuWrapper = this.getMenuIconWrapper()\n this.handleClassList(dropdownMenu, 'remove', 'open')\n this.handleClassList(menuWrapper, 'remove', 'show')\n }\n }\n\n toggleDropdownMenu() { \n if(this.hasDropdownMenu) {\n const dropdownMenu = this.getDropdownMenu()\n const menuWrapper = this.getMenuIconWrapper()\n this.handleClassList(dropdownMenu, 'toggle', 'open')\n this.handleClassList(menuWrapper, 'toggle', 'show')\n }\n }\n\n isDropdownMenuOpen(): boolean {\n const dropdownMenu = this.getDropdownMenu()\n return this.hasDropdownMenu && dropdownMenu && dropdownMenu.classList.contains('open')\n }\n\n handleLastItem() { \n const breadcrumbItems = this.el.closest('ifx-breadcrumb').querySelectorAll('ifx-breadcrumb-item')\n if(this.el === breadcrumbItems[breadcrumbItems.length-1]) { \n this.isLastItem = true;\n } else this.isLastItem = false;\n }\n\n generateUniqueId(prefix = 'id') {\n return `${prefix}-${Math.random().toString(36).substring(2, 9)}`;\n }\n\n componentWillLoad() { \n if (!this.uniqueId) {\n this.uniqueId = this.generateUniqueId('breadcrumb-dropdown');\n }\n this.handleLastItem()\n }\n\n componentDidUpdate() {\n this.handleLastItem()\n }\n\n componentWillRender() { \n this.setHasDropdownMenuState()\n }\n\n setHasDropdownMenuState() { \n const dropdownMenu = this.getIfxDropdownMenuComponent();\n if(dropdownMenu) {\n this.hasDropdownMenu = !!dropdownMenu;\n }\n }\n\n getIfxDropdownMenuComponent() { \n const dropdownMenu = this.el.querySelector('ifx-dropdown-menu');\n return dropdownMenu;\n }\n\n componentDidLoad() { \n const dropdownMenu = this.getIfxDropdownMenuComponent();\n\n if(!this.hasDropdownMenu) { \n const iconMenuWrapper = this.getMenuIconWrapper();\n this.handleClassList(iconMenuWrapper, 'toggle', 'hide');\n } else { \n dropdownMenu.isOpen = true;\n }\n }\n\n render() {\n return (\n <li class='breadcrumb-parent' aria-current={`${this.isLastItem ? 'page' : \"\"}`}>\n <li role=\"button\" tabindex={this.hasDropdownMenu ? 0 : -1} class=\"breadcrumb-wrapper\" onClick={() => this.toggleDropdownMenu()} aria-controls={this.uniqueId} aria-haspopup=\"menu\" aria-label=\"Toggle dropdown menu\">\n <slot name='label'/>\n <div id={this.uniqueId} class=\"dropdown-menu\" aria-expanded={this.isDropdownMenuOpen()} aria-label=\"Dropdown menu\">\n <slot />\n </div>\n </li>\n {!this.isLastItem && <span class=\"breadcrumb-divider\" aria-hidden=\"true\">/</span>}\n </li>\n );\n }\n}\n"]}

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

@@ -33,7 +33,7 @@ export class Breadcrumb {
         }
     }
     render() {
-        return (h("nav", { key: '1ac077037d44b72f6a284ace72dd43bad0b3ebeb', "aria-label": "Page navigation breadcrumb" }, h("ol", { key: '7192480afed229bee5c54e4d6a3454ca3eb4636f', class: "breadcrumb" }, h("slot", { key: 'fa901a096a659d87f3ce0d6f1c366f9e874f4e22' }))));
+        return (h("nav", { key: 'edf76204e96413a39d1a543735bbb0a2530d8348', "aria-label": "Page navigation breadcrumb" }, h("ol", { key: '1b64075586076eb4f6ca73cf41202a52a180d1c3', class: "breadcrumb" }, h("slot", { key: '352a0be161eb7b0ab45bdbbb59d023bd9da6ff73' }))));
     }
     static get is() { return "ifx-breadcrumb"; }
     static get encapsulation() { return "shadow"; }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"breadcrumb.js","sourceRoot":"","sources":["../../../src/components/breadcrumb/breadcrumb.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACtD,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,UAAU;IAGrB,KAAK,CAAC,gBAAgB;QACnB,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC;YACrC,MAAM,SAAS,GAAG,eAAe,EAAE,CAAC;YACpC,cAAc,CAAC,gBAAgB,EAAE,MAAM,SAAS,CAAC,CAAA;QACnD,CAAC;QACD,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,UAAU,CAAC;QAC9C,IAAI,CAAC,+BAA+B,CAAC,OAAO,CAAC,CAAC;IAChD,CAAC;IAEO,+BAA+B,CAAC,OAAoB;QAC1D,IAAI,CAAC,OAAO,EAAE,CAAC;YACb,OAAO,CAAC,KAAK,CAAC,mBAAmB,CAAC,CAAC;YACnC,OAAO;QACT,CAAC;QAED,MAAM,IAAI,GAAG,OAAO,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAC3C,IAAG,IAAI,EAAE,CAAC;YACR,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;YAE3C,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,aAAa,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;gBAC9C,MAAM,IAAI,GAAG,aAAa,CAAC,CAAC,CAAC,CAAC;gBAC9B,IAAI,IAAI,CAAC,QAAQ,KAAK,qBAAqB,EAAE,CAAC;oBAC5C,MAAM,cAAc,GAAG,IAAoC,CAAC;oBAC5D,MAAM,mBAAmB,GAAG,cAAc,CAAC,aAAa,CAAC,2BAA2B,CAAC,CAAC;oBACtF,MAAM,kBAAkB,GAAG,cAAc,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;oBAC7E,IAAI,mBAAmB,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,kBAAkB,EAAE,CAAC;wBACnE,MAAM,IAAI,KAAK,CAAC,kEAAkE,CAAC,CAAC;oBACtF,CAAC;gBACH,CAAC;YACH,CAAC;QACH,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,0EAAgB,4BAA4B;YAC1C,2DAAI,KAAK,EAAC,YAAY;gBACpB,8DAAQ,CACL,CACD,CACP,CAAC;IACJ,CAAC;;;;;;;;;;CACF","sourcesContent":["import { Component, h, 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\n\r\n@Component({\r\n tag: 'ifx-breadcrumb',\r\n styleUrl: 'breadcrumb.scss',\r\n shadow: true\r\n})\r\nexport class Breadcrumb {\r\n @Element() el;\r\n\r\n async componentDidLoad() {\r\n if(!isNestedInIfxComponent(this.el)) { \r\n const framework = detectFramework();\r\n trackComponent('ifx-breadcrumb', await framework)\r\n }\r\n const element = this.el.shadowRoot.firstChild;\r\n this.validateBreadcrumbItemStructure(element);\r\n }\r\n\r\n private validateBreadcrumbItemStructure(element: HTMLElement) {\r\n if (!element) {\r\n console.error('element not found');\r\n return;\r\n }\r\n \r\n const slot = element.querySelector('slot');\r\n if(slot) { \r\n const assignedNodes = slot.assignedNodes();\r\n \r\n for (let i = 0; i < assignedNodes.length; i++) {\r\n const node = assignedNodes[i];\r\n if (node.nodeName === 'IFX-BREADCRUMB-ITEM') {\r\n const breadcrumbItem = node as HTMLIfxBreadcrumbItemElement;\r\n const breadcrumbItemLabel = breadcrumbItem.querySelector('ifx-breadcrumb-item-label');\r\n const breadcrumbDropdown = breadcrumbItem.querySelector('ifx-dropdown-menu');\r\n if (breadcrumbItemLabel.hasAttribute('href') && breadcrumbDropdown) {\r\n throw new Error('ifx-breadcrumb-item cannot have both a href and a dropdown menu.');\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <nav aria-label=\"Page navigation breadcrumb\">\r\n <ol class=\"breadcrumb\">\r\n <slot />\r\n </ol>\r\n </nav>\r\n );\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"breadcrumb.js","sourceRoot":"","sources":["../../../src/components/breadcrumb/breadcrumb.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACtD,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,UAAU;IAGrB,KAAK,CAAC,gBAAgB;QACnB,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC;YACrC,MAAM,SAAS,GAAG,eAAe,EAAE,CAAC;YACpC,cAAc,CAAC,gBAAgB,EAAE,MAAM,SAAS,CAAC,CAAA;QACnD,CAAC;QACD,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,UAAU,CAAC;QAC9C,IAAI,CAAC,+BAA+B,CAAC,OAAO,CAAC,CAAC;IAChD,CAAC;IAEO,+BAA+B,CAAC,OAAoB;QAC1D,IAAI,CAAC,OAAO,EAAE,CAAC;YACb,OAAO,CAAC,KAAK,CAAC,mBAAmB,CAAC,CAAC;YACnC,OAAO;QACT,CAAC;QAED,MAAM,IAAI,GAAG,OAAO,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAC3C,IAAG,IAAI,EAAE,CAAC;YACR,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;YAE3C,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,aAAa,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;gBAC9C,MAAM,IAAI,GAAG,aAAa,CAAC,CAAC,CAAC,CAAC;gBAC9B,IAAI,IAAI,CAAC,QAAQ,KAAK,qBAAqB,EAAE,CAAC;oBAC5C,MAAM,cAAc,GAAG,IAAoC,CAAC;oBAC5D,MAAM,mBAAmB,GAAG,cAAc,CAAC,aAAa,CAAC,2BAA2B,CAAC,CAAC;oBACtF,MAAM,kBAAkB,GAAG,cAAc,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;oBAC7E,IAAI,mBAAmB,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,kBAAkB,EAAE,CAAC;wBACnE,MAAM,IAAI,KAAK,CAAC,kEAAkE,CAAC,CAAC;oBACtF,CAAC;gBACH,CAAC;YACH,CAAC;QACH,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,0EAAgB,4BAA4B;YAC1C,2DAAI,KAAK,EAAC,YAAY;gBACpB,8DAAQ,CACL,CACD,CACP,CAAC;IACJ,CAAC;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Element } 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-breadcrumb',\n styleUrl: 'breadcrumb.scss',\n shadow: true\n})\nexport class Breadcrumb {\n @Element() el;\n\n async componentDidLoad() {\n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-breadcrumb', await framework)\n }\n const element = this.el.shadowRoot.firstChild;\n this.validateBreadcrumbItemStructure(element);\n }\n\n private validateBreadcrumbItemStructure(element: HTMLElement) {\n if (!element) {\n console.error('element not found');\n return;\n }\n \n const slot = element.querySelector('slot');\n if(slot) { \n const assignedNodes = slot.assignedNodes();\n \n for (let i = 0; i < assignedNodes.length; i++) {\n const node = assignedNodes[i];\n if (node.nodeName === 'IFX-BREADCRUMB-ITEM') {\n const breadcrumbItem = node as HTMLIfxBreadcrumbItemElement;\n const breadcrumbItemLabel = breadcrumbItem.querySelector('ifx-breadcrumb-item-label');\n const breadcrumbDropdown = breadcrumbItem.querySelector('ifx-dropdown-menu');\n if (breadcrumbItemLabel.hasAttribute('href') && breadcrumbDropdown) {\n throw new Error('ifx-breadcrumb-item cannot have both a href and a dropdown menu.');\n }\n }\n }\n }\n }\n\n render() {\n return (\n <nav aria-label=\"Page navigation breadcrumb\">\n <ol class=\"breadcrumb\">\n <slot />\n </ol>\n </nav>\n );\n }\n}\n"]}

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

@@ -94,30 +94,30 @@ export default {
 const DefaultTemplate = args => {
     const icon = args.icon === 'none' ? '' : args.icon;
     const wrapper = document.createElement('div');
-    wrapper.innerHTML = `<ifx-breadcrumb>
-  <ifx-breadcrumb-item>
-    <ifx-breadcrumb-item-label slot="label" icon="${args.icon ? icon : ''}" href="${args.href}"">Breadcrumb 1</ifx-breadcrumb-item-label>
-    <ifx-dropdown-menu>
-      <ifx-dropdown-item href=${args.hrefOfDropdownItem}>Google</ifx-dropdown-item>
-      <ifx-dropdown-item href="http://bing.com">Bing</ifx-dropdown-item>
-      <ifx-dropdown-item href="http://yahoo.com">Yahoo</ifx-dropdown-item>
-      <ifx-dropdown-item href="http://naver.com">Naver</ifx-dropdown-item>
-    </ifx-dropdown-menu>
-  </ifx-breadcrumb-item>
-  <ifx-breadcrumb-item>
-    <ifx-breadcrumb-item-label slot="label" icon="${args.icon ? icon : ''}">Breadcrumb 2</ifx-breadcrumb-item-label>
-    <ifx-dropdown-menu>
-    <ifx-dropdown-item href=${args.href}>Google</ifx-dropdown-item>
-    <ifx-dropdown-item href="http://bing.com">Bing</ifx-dropdown-item>
-    <ifx-dropdown-item href="http://yahoo.com">Yahoo</ifx-dropdown-item>
-    <ifx-dropdown-item href="http://naver.com">Naver</ifx-dropdown-item>
-    </ifx-dropdown-menu>
-  </ifx-breadcrumb-item>
-  <ifx-breadcrumb-item>
-    <ifx-breadcrumb-item-label slot="label" icon="${args.icon ? icon : ''}" href="http://google.com">Breadcrumb 3</ifx-breadcrumb-item-label>
-  </ifx-breadcrumb-item>
+    wrapper.innerHTML = `<ifx-breadcrumb>
+  <ifx-breadcrumb-item>
+    <ifx-breadcrumb-item-label slot="label" icon="${args.icon ? icon : ''}" href="${args.href}"">Breadcrumb 1</ifx-breadcrumb-item-label>
+    <ifx-dropdown-menu>
+      <ifx-dropdown-item href=${args.hrefOfDropdownItem}>Google</ifx-dropdown-item>
+      <ifx-dropdown-item href="http://bing.com">Bing</ifx-dropdown-item>
+      <ifx-dropdown-item href="http://yahoo.com">Yahoo</ifx-dropdown-item>
+      <ifx-dropdown-item href="http://naver.com">Naver</ifx-dropdown-item>
+    </ifx-dropdown-menu>
+  </ifx-breadcrumb-item>
+  <ifx-breadcrumb-item>
+    <ifx-breadcrumb-item-label slot="label" icon="${args.icon ? icon : ''}">Breadcrumb 2</ifx-breadcrumb-item-label>
+    <ifx-dropdown-menu>
+    <ifx-dropdown-item href=${args.href}>Google</ifx-dropdown-item>
+    <ifx-dropdown-item href="http://bing.com">Bing</ifx-dropdown-item>
+    <ifx-dropdown-item href="http://yahoo.com">Yahoo</ifx-dropdown-item>
+    <ifx-dropdown-item href="http://naver.com">Naver</ifx-dropdown-item>
+    </ifx-dropdown-menu>
+  </ifx-breadcrumb-item>
+  <ifx-breadcrumb-item>
+    <ifx-breadcrumb-item-label slot="label" icon="${args.icon ? icon : ''}" href="http://google.com">Breadcrumb 3</ifx-breadcrumb-item-label>
+  </ifx-breadcrumb-item>
 </ifx-breadcrumb>`;
     const breadcrumb = wrapper.querySelector('ifx-breadcrumb');
     // Loop through each breadcrumb item and attach event listeners to its dropdown menu

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

	@@ -1 +1 @@
1	- {"version":3,"file":"breadcrumb.stories.js","sourceRoot":"","sources":["../../../src/components/breadcrumb/breadcrumb.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { action } from '@storybook/addon-actions';\r\nimport { icons } from '@infineon/infineon-icons';\r\n\r\nexport default {\r\n title: 'Components/Breadcrumb',\r\n tags: ['autodocs'],\r\n\r\n args: {\r\n icon: '',\r\n iconArialLabel: '',\r\n href: 'http://yahoo.com',\r\n hrefOfDropdownItem: 'http://google.com',\r\n target: '_self',\r\n },\r\n argTypes: {\r\n icon: {\r\n control: { type: 'select' },\r\n options: Object.keys(icons),\r\n description: 'Set the icon of the tab. Choose \"none\" to display no icon.',\r\n table: {\r\n category: 'ifx-breadcrumb-item-label props',\r\n defaultValue: {\r\n summary: ''\r\n },\r\n type: {\r\n summary: 'string'\r\n }\r\n }\r\n },\r\n target: {\r\n control: { type: 'text' },\r\n description: 'Set the target of the link.',\r\n table: {\r\n category: 'ifx-breadcrumb-item-label props',\r\n defaultValue: {\r\n summary: '_self'\r\n },\r\n type: {\r\n summary: 'string'\r\n }\r\n }\r\n },\r\n iconArialLabel: {\r\n control: { type: 'text' },\r\n description: 'Set the aria label of the icon.',\r\n table: {\r\n category: 'ifx-breadcrumb-item-label props',\r\n defaultValue: {\r\n summary: ''\r\n },\r\n type: {\r\n summary: 'string'\r\n }\r\n }\r\n },\r\n href: {\r\n control: { type: 'text' },\r\n description: 'Set the href of the breadcrumb item.',\r\n table: {\r\n category: 'ifx-breadcrumb-item-label props',\r\n defaultValue: {\r\n summary: ''\r\n },\r\n type: {\r\n summary: 'string'\r\n }\r\n }\r\n },\r\n hrefOfDropdownItem: {\r\n name: 'href',\r\n control: { type: 'text' },\r\n description: 'Set the href of the dropdown item.',\r\n table: {\r\n category: 'ifx-dropdown-item props',\r\n defaultValue: {\r\n summary: ''\r\n },\r\n type: {\r\n summary: 'string'\r\n }\r\n }\r\n },\r\n ifxDropdownMenuItem: {\r\n action: 'ifxDropdownMenuItem',\r\n description: 'Custom event emitted by ifx-dropdown-menu when an item is selected.',\r\n table: {\r\n category: 'custom events',\r\n type: {\r\n summary: 'Framework integration',\r\n detail:\r\n 'React: onIfxDropdownMenuItem={handleChange}\\nVue:@ifxDropdownMenuItem=\"handleChange\"\\nAngular:(ifxDropdownMenuItem)=\"handleChange()\"\\nVanillaJs:.addEventListener(\"ifxDropdownMenuItem\", (event) => {//handle change});',\r\n },\r\n },\r\n },\r\n },\r\n};\r\n\r\nconst DefaultTemplate = args => {\r\n const icon = args.icon === 'none' ? '' : args.icon;\r\n const wrapper = document.createElement('div');\r\n wrapper.innerHTML = `<ifx-breadcrumb>\r\n <ifx-breadcrumb-item>\r\n <ifx-breadcrumb-item-label slot=\"label\" icon=\"${args.icon ? icon : ''}\" href=\"${args.href}\"\">Breadcrumb 1</ifx-breadcrumb-item-label>\r\n <ifx-dropdown-menu>\r\n <ifx-dropdown-item href=${args.hrefOfDropdownItem}>Google</ifx-dropdown-item>\r\n <ifx-dropdown-item href=\"http://bing.com\">Bing</ifx-dropdown-item>\r\n <ifx-dropdown-item href=\"http://yahoo.com\">Yahoo</ifx-dropdown-item>\r\n <ifx-dropdown-item href=\"http://naver.com\">Naver</ifx-dropdown-item>\r\n </ifx-dropdown-menu>\r\n </ifx-breadcrumb-item>\r\n\r\n <ifx-breadcrumb-item>\r\n <ifx-breadcrumb-item-label slot=\"label\" icon=\"${args.icon ? icon : ''}\">Breadcrumb 2</ifx-breadcrumb-item-label>\r\n <ifx-dropdown-menu>\r\n <ifx-dropdown-item href=${args.href}>Google</ifx-dropdown-item>\r\n <ifx-dropdown-item href=\"http://bing.com\">Bing</ifx-dropdown-item>\r\n <ifx-dropdown-item href=\"http://yahoo.com\">Yahoo</ifx-dropdown-item>\r\n <ifx-dropdown-item href=\"http://naver.com\">Naver</ifx-dropdown-item>\r\n </ifx-dropdown-menu>\r\n </ifx-breadcrumb-item>\r\n\r\n <ifx-breadcrumb-item>\r\n <ifx-breadcrumb-item-label slot=\"label\" icon=\"${args.icon ? icon : ''}\" href=\"http://google.com\">Breadcrumb 3</ifx-breadcrumb-item-label>\r\n </ifx-breadcrumb-item>\r\n</ifx-breadcrumb>`;\r\n\r\n const breadcrumb = wrapper.querySelector('ifx-breadcrumb') as HTMLElement;\r\n // Loop through each breadcrumb item and attach event listeners to its dropdown menu\r\n const breadcrumbItems = breadcrumb.querySelectorAll('ifx-breadcrumb-item');\r\n breadcrumbItems.forEach(breadcrumbItem => {\r\n const dropdownMenu = breadcrumbItem.querySelector('ifx-dropdown-menu');\r\n dropdownMenu?.addEventListener('ifxDropdownMenuItem', action('ifxDropdownMenuItem'));\r\n });\r\n\r\n return wrapper;\r\n};\r\n\r\nexport const Default = DefaultTemplate.bind({});\r\n"]}
1	+ {"version":3,"file":"breadcrumb.stories.js","sourceRoot":"","sources":["../../../src/components/breadcrumb/breadcrumb.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { action } from '@storybook/addon-actions';\nimport { icons } from '@infineon/infineon-icons';\n\nexport default {\n title: 'Components/Breadcrumb',\n tags: ['autodocs'],\n\n args: {\n icon: '',\n iconArialLabel: '',\n href: 'http://yahoo.com',\n hrefOfDropdownItem: 'http://google.com',\n target: '_self',\n },\n argTypes: {\n icon: {\n control: { type: 'select' },\n options: Object.keys(icons),\n description: 'Set the icon of the tab. Choose \"none\" to display no icon.',\n table: {\n category: 'ifx-breadcrumb-item-label props',\n defaultValue: {\n summary: ''\n },\n type: {\n summary: 'string'\n }\n }\n },\n target: {\n control: { type: 'text' },\n description: 'Set the target of the link.',\n table: {\n category: 'ifx-breadcrumb-item-label props',\n defaultValue: {\n summary: '_self'\n },\n type: {\n summary: 'string'\n }\n }\n },\n iconArialLabel: {\n control: { type: 'text' },\n description: 'Set the aria label of the icon.',\n table: {\n category: 'ifx-breadcrumb-item-label props',\n defaultValue: {\n summary: ''\n },\n type: {\n summary: 'string'\n }\n }\n },\n href: {\n control: { type: 'text' },\n description: 'Set the href of the breadcrumb item.',\n table: {\n category: 'ifx-breadcrumb-item-label props',\n defaultValue: {\n summary: ''\n },\n type: {\n summary: 'string'\n }\n }\n },\n hrefOfDropdownItem: {\n name: 'href',\n control: { type: 'text' },\n description: 'Set the href of the dropdown item.',\n table: {\n category: 'ifx-dropdown-item props',\n defaultValue: {\n summary: ''\n },\n type: {\n summary: 'string'\n }\n }\n },\n ifxDropdownMenuItem: {\n action: 'ifxDropdownMenuItem',\n description: 'Custom event emitted by ifx-dropdown-menu when an item is selected.',\n table: {\n category: 'custom events',\n type: {\n summary: 'Framework integration',\n detail:\n 'React: onIfxDropdownMenuItem={handleChange}\\nVue:@ifxDropdownMenuItem=\"handleChange\"\\nAngular:(ifxDropdownMenuItem)=\"handleChange()\"\\nVanillaJs:.addEventListener(\"ifxDropdownMenuItem\", (event) => {//handle change});',\n },\n },\n },\n },\n};\n\nconst DefaultTemplate = args => {\n const icon = args.icon === 'none' ? '' : args.icon;\n const wrapper = document.createElement('div');\n wrapper.innerHTML = `<ifx-breadcrumb>\n <ifx-breadcrumb-item>\n <ifx-breadcrumb-item-label slot=\"label\" icon=\"${args.icon ? icon : ''}\" href=\"${args.href}\"\">Breadcrumb 1</ifx-breadcrumb-item-label>\n <ifx-dropdown-menu>\n <ifx-dropdown-item href=${args.hrefOfDropdownItem}>Google</ifx-dropdown-item>\n <ifx-dropdown-item href=\"http://bing.com\">Bing</ifx-dropdown-item>\n <ifx-dropdown-item href=\"http://yahoo.com\">Yahoo</ifx-dropdown-item>\n <ifx-dropdown-item href=\"http://naver.com\">Naver</ifx-dropdown-item>\n </ifx-dropdown-menu>\n </ifx-breadcrumb-item>\n\n <ifx-breadcrumb-item>\n <ifx-breadcrumb-item-label slot=\"label\" icon=\"${args.icon ? icon : ''}\">Breadcrumb 2</ifx-breadcrumb-item-label>\n <ifx-dropdown-menu>\n <ifx-dropdown-item href=${args.href}>Google</ifx-dropdown-item>\n <ifx-dropdown-item href=\"http://bing.com\">Bing</ifx-dropdown-item>\n <ifx-dropdown-item href=\"http://yahoo.com\">Yahoo</ifx-dropdown-item>\n <ifx-dropdown-item href=\"http://naver.com\">Naver</ifx-dropdown-item>\n </ifx-dropdown-menu>\n </ifx-breadcrumb-item>\n\n <ifx-breadcrumb-item>\n <ifx-breadcrumb-item-label slot=\"label\" icon=\"${args.icon ? icon : ''}\" href=\"http://google.com\">Breadcrumb 3</ifx-breadcrumb-item-label>\n </ifx-breadcrumb-item>\n</ifx-breadcrumb>`;\n\n const breadcrumb = wrapper.querySelector('ifx-breadcrumb') as HTMLElement;\n // Loop through each breadcrumb item and attach event listeners to its dropdown menu\n const breadcrumbItems = breadcrumb.querySelectorAll('ifx-breadcrumb-item');\n breadcrumbItems.forEach(breadcrumbItem => {\n const dropdownMenu = breadcrumbItem.querySelector('ifx-dropdown-menu');\n dropdownMenu?.addEventListener('ifxDropdownMenuItem', action('ifxDropdownMenuItem'));\n });\n\n return wrapper;\n};\n\nexport const Default = DefaultTemplate.bind({});\n"]}

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

@@ -102,7 +102,7 @@ export class Button {
         }
     }
     render() {
-        return (h(Host, { key: 'a0ccc7f723475c894275ccd0ac6585165a9616a7' }, h("a", { key: 'e83891c14e8808caad6bb028f76072cd15397e2d', role: this.href ? 'link' : 'button', tabIndex: this.disabled ? -1 : 0, ref: (el) => (this.focusableElement = el), class: this.getClassNames(), href: !this.disabled ? this.internalHref : undefined, target: this.target, onClick: this.handleClick, rel: this.target === '_blank' ? 'noopener noreferrer' : undefined, onFocus: (event) => this.handleFocus(event), "aria-disabled": this.disabled ? 'true' : null, "aria-describedby": this.theme === 'danger' ? 'Dangerous action' : undefined, "aria-label": this.ariaLabel || undefined }, h("slot", { key: '5b38794f154c049ceba977ded7e4ada9854f6656' }))));
+        return (h(Host, { key: 'c04892373b37cea4d0ea2e539c6fde9757ba4bcf' }, h("a", { key: 'eb107f3b40cddc93f9e642788ba25dc77e7e5169', role: this.href ? 'link' : 'button', tabIndex: this.disabled ? -1 : 0, ref: (el) => (this.focusableElement = el), class: this.getClassNames(), href: !this.disabled ? this.internalHref : undefined, target: this.target, onClick: this.handleClick, rel: this.target === '_blank' ? 'noopener noreferrer' : undefined, onFocus: (event) => this.handleFocus(event), "aria-disabled": this.disabled ? 'true' : null, "aria-describedby": this.theme === 'danger' ? 'Dangerous action' : undefined, "aria-label": this.ariaLabel || undefined }, h("slot", { key: '77ed12eeef09759fe4fb776e012d052c2c1b3383' }))));
     }
     getVariantClass() {
         return `${this.variant}` === "secondary"

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

	@@ -1 +1 @@
1	- {"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Host, Method, Element, Listen, State, 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 classNames from 'classnames';\r\n \r\n@Component({\r\n tag: 'ifx-button',\r\n styleUrl: 'button.scss',\r\n shadow: true,\r\n})\r\nexport class Button {\r\n @Prop() variant: 'primary' \| 'secondary' \| 'tertiary' = 'primary';\r\n @Prop() theme: 'default' \| 'danger' \| 'inverse' = 'default';\r\n @Prop() size: string = 'm';\r\n @Prop() disabled: boolean = false;\r\n @State() internalHref: string;\r\n @Prop() href: string;\r\n @Prop() target: string = '_self';\r\n @Prop() type: \"button\" \| \"submit\" \| \"reset\" = \"button\";\r\n @Prop() fullWidth: boolean = false;\r\n @Prop() ariaLabel: string \| null;\r\n @Element() el;\r\n\r\n private focusableElement: HTMLElement;\r\n private nativeButton: HTMLButtonElement \| HTMLInputElement;\r\n\r\n @Watch('href')\r\n setInternalHref(newValue: string) {\r\n this.internalHref = newValue;\r\n }\r\n\r\n @Method()\r\n async setFocus() {\r\n this.focusableElement.focus();\r\n }\r\n\r\n insertNativeButton() {\r\n this.nativeButton = document.createElement('button');\r\n this.nativeButton.type = this.type;\r\n this.nativeButton.style.display = 'none';\r\n this.el.closest('form').appendChild(this.nativeButton);\r\n }\r\n\r\n handleFormAndInternalHref() {\r\n if (this.el.closest('form')) {\r\n if (this.el.href) {\r\n this.el.internalHref = undefined;\r\n }\r\n this.insertNativeButton()\r\n } else {\r\n this.internalHref = this.href;\r\n }\r\n }\r\n\r\n handleButtonWidth() {\r\n if (this.fullWidth) {\r\n this.el.style.setProperty('--bw', '100%');\r\n } else {\r\n this.el.style.setProperty('--bw', 'fit-content');\r\n }\r\n }\r\n\r\n componentWillLoad() {\r\n this.handleFormAndInternalHref()\r\n }\r\n\r\n async componentDidLoad() { \r\n if(!isNestedInIfxComponent(this.el)) { \r\n const framework = detectFramework();\r\n trackComponent('ifx-button', await framework)\r\n }\r\n }\r\n\r\n componentWillRender() {\r\n this.handleButtonWidth()\r\n }\r\n\r\n\r\n\r\n handleClick = (ev: Event) => {\r\n if (this.el.shadowRoot) {\r\n const parentForm = this.el.closest('form');\r\n if (parentForm) {\r\n ev.preventDefault();\r\n\r\n if (this.type === 'reset') {\r\n // If the button type is 'reset', manually reset all custom form fields\r\n this.resetClickHandler(); //this will reset all ifx-text-fields within a form\r\n } else {\r\n const fakeButton = document.createElement('button');\r\n if (this.type) {\r\n fakeButton.type = this.type;\r\n }\r\n fakeButton.style.display = 'none';\r\n parentForm.appendChild(fakeButton);\r\n fakeButton.click();\r\n fakeButton.remove();\r\n }\r\n }\r\n }\r\n }\r\n\r\n resetClickHandler() {\r\n const formElement = this.el.closest('form');\r\n const customElements = formElement.querySelectorAll('ifx-text-field, ifx-textarea');\r\n customElements.forEach(element => {\r\n element.reset();\r\n });\r\n }\r\n\r\n @Listen('keydown')\r\n handleKeyDown(ev: KeyboardEvent) {\r\n if ( ev.key === \" \" \|\| ev.key === 'Enter' && !this.disabled) {\r\n this.focusableElement.click();\r\n }\r\n }\r\n\r\n @Listen('click', { capture: true })\r\n handleHostClick(event: Event) {\r\n if (this.disabled === true) {\r\n event.stopImmediatePropagation();\r\n }\r\n }\r\n\r\n handleFocus(event: FocusEvent) {\r\n if (this.disabled) {\r\n event.preventDefault();\r\n this.focusableElement.blur();\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <a\r\n role={this.href ? 'link' : 'button'}\r\n tabIndex={this.disabled ? -1 : 0}\r\n ref={(el) => (this.focusableElement = el)}\r\n class={this.getClassNames()}\r\n href={!this.disabled ? this.internalHref : undefined}\r\n target={this.target}\r\n onClick={this.handleClick}\r\n rel={this.target === '_blank' ? 'noopener noreferrer' : undefined}\r\n onFocus={(event) => this.handleFocus(event)}\r\n aria-disabled={this.disabled ? 'true' : null}\r\n aria-describedby={this.theme === 'danger' ? 'Dangerous action' : undefined}\r\n aria-label={this.ariaLabel \|\| undefined}\r\n >\r\n <slot></slot>\r\n </a>\r\n </Host>\r\n );\r\n }\r\n\r\n\r\n getVariantClass() {\r\n return `${this.variant}` === \"secondary\"\r\n ? `secondary-${this.theme}`\r\n : `${this.variant}` === 'tertiary'\r\n ? `tertiary-${this.theme}`\r\n : `${this.theme}`;\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',\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":"button.js","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Host, Method, Element, Listen, State, 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 classNames from 'classnames';\n \n@Component({\n tag: 'ifx-button',\n styleUrl: 'button.scss',\n shadow: true,\n})\nexport class Button {\n @Prop() variant: 'primary' \| 'secondary' \| 'tertiary' = 'primary';\n @Prop() theme: 'default' \| 'danger' \| 'inverse' = 'default';\n @Prop() size: string = 'm';\n @Prop() disabled: boolean = false;\n @State() internalHref: string;\n @Prop() href: string;\n @Prop() target: string = '_self';\n @Prop() type: \"button\" \| \"submit\" \| \"reset\" = \"button\";\n @Prop() fullWidth: boolean = false;\n @Prop() ariaLabel: string \| null;\n @Element() el;\n\n private focusableElement: HTMLElement;\n private nativeButton: HTMLButtonElement \| HTMLInputElement;\n\n @Watch('href')\n setInternalHref(newValue: string) {\n this.internalHref = newValue;\n }\n\n @Method()\n async setFocus() {\n this.focusableElement.focus();\n }\n\n insertNativeButton() {\n this.nativeButton = document.createElement('button');\n this.nativeButton.type = this.type;\n this.nativeButton.style.display = 'none';\n this.el.closest('form').appendChild(this.nativeButton);\n }\n\n handleFormAndInternalHref() {\n if (this.el.closest('form')) {\n if (this.el.href) {\n this.el.internalHref = undefined;\n }\n this.insertNativeButton()\n } else {\n this.internalHref = this.href;\n }\n }\n\n handleButtonWidth() {\n if (this.fullWidth) {\n this.el.style.setProperty('--bw', '100%');\n } else {\n this.el.style.setProperty('--bw', 'fit-content');\n }\n }\n\n componentWillLoad() {\n this.handleFormAndInternalHref()\n }\n\n async componentDidLoad() { \n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-button', await framework)\n }\n }\n\n componentWillRender() {\n this.handleButtonWidth()\n }\n\n\n\n handleClick = (ev: Event) => {\n if (this.el.shadowRoot) {\n const parentForm = this.el.closest('form');\n if (parentForm) {\n ev.preventDefault();\n\n if (this.type === 'reset') {\n // If the button type is 'reset', manually reset all custom form fields\n this.resetClickHandler(); //this will reset all ifx-text-fields within a form\n } else {\n const fakeButton = document.createElement('button');\n if (this.type) {\n fakeButton.type = this.type;\n }\n fakeButton.style.display = 'none';\n parentForm.appendChild(fakeButton);\n fakeButton.click();\n fakeButton.remove();\n }\n }\n }\n }\n\n resetClickHandler() {\n const formElement = this.el.closest('form');\n const customElements = formElement.querySelectorAll('ifx-text-field, ifx-textarea');\n customElements.forEach(element => {\n element.reset();\n });\n }\n\n @Listen('keydown')\n handleKeyDown(ev: KeyboardEvent) {\n if ( ev.key === \" \" \|\| ev.key === 'Enter' && !this.disabled) {\n this.focusableElement.click();\n }\n }\n\n @Listen('click', { capture: true })\n handleHostClick(event: Event) {\n if (this.disabled === true) {\n event.stopImmediatePropagation();\n }\n }\n\n handleFocus(event: FocusEvent) {\n if (this.disabled) {\n event.preventDefault();\n this.focusableElement.blur();\n }\n }\n\n render() {\n return (\n <Host>\n <a\n role={this.href ? 'link' : 'button'}\n tabIndex={this.disabled ? -1 : 0}\n ref={(el) => (this.focusableElement = el)}\n class={this.getClassNames()}\n href={!this.disabled ? this.internalHref : undefined}\n target={this.target}\n onClick={this.handleClick}\n rel={this.target === '_blank' ? 'noopener noreferrer' : undefined}\n onFocus={(event) => this.handleFocus(event)}\n aria-disabled={this.disabled ? 'true' : null}\n aria-describedby={this.theme === 'danger' ? 'Dangerous action' : undefined}\n aria-label={this.ariaLabel \|\| undefined}\n >\n <slot></slot>\n </a>\n </Host>\n );\n }\n\n\n getVariantClass() {\n return `${this.variant}` === \"secondary\"\n ? `secondary-${this.theme}`\n : `${this.variant}` === 'tertiary'\n ? `tertiary-${this.theme}`\n : `${this.theme}`;\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',\n this.size && `btn-${this.getSizeClass()}`,\n `btn-${this.getVariantClass()}`,\n this.disabled ? 'disabled' : ''\n );\n }\n}"]}

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

@@ -153,8 +153,8 @@ export default {
         },
     },
 };
-const DefaultTemplate = args => `<ifx-button type="${args.type}" aria-label="${args.ariaLabel}" disabled="${args.disabled}" variant="${args.variant}" size="${args.size}" target="${args.target}" theme="${args.theme}" ${args.href ? `href="${args.url}"` : ''} full-width="${args.fullWidth}">
-  ${args.icon && args.iconPosition.toUpperCase() === 'LEFT' ? `<ifx-icon icon="${args.icon}"></ifx-icon>` : ''}${args.label}${args.icon && args.iconPosition.toUpperCase() === 'RIGHT' ? `<ifx-icon icon="${args.icon}"></ifx-icon>` : ''}
+const DefaultTemplate = args => `<ifx-button type="${args.type}" aria-label="${args.ariaLabel}" disabled="${args.disabled}" variant="${args.variant}" size="${args.size}" target="${args.target}" theme="${args.theme}" ${args.href ? `href="${args.url}"` : ''} full-width="${args.fullWidth}">
+  ${args.icon && args.iconPosition.toUpperCase() === 'LEFT' ? `<ifx-icon icon="${args.icon}"></ifx-icon>` : ''}${args.label}${args.icon && args.iconPosition.toUpperCase() === 'RIGHT' ? `<ifx-icon icon="${args.icon}"></ifx-icon>` : ''}
 </ifx-button>`;
 export const Default = DefaultTemplate.bind({});
 //# sourceMappingURL=button.stories.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"button.stories.js","sourceRoot":"","sources":["../../../src/components/button/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/Button',\r\n tags: ['autodocs'],\r\n\r\n args: {\r\n label: 'Button',\r\n variant: 'primary',\r\n theme: 'default',\r\n type: 'button',\r\n size: 'm',\r\n fullWidth: false,\r\n disabled: false,\r\n icon: '',\r\n iconPosition: 'left',\r\n href: false,\r\n url: '',\r\n target: '_blank',\r\n ariaLabel: 'Button',\r\n },\r\n\r\n argTypes: {\r\n label: {\r\n name: 'Label of Button',\r\n description: 'Sets the text displayed on the <ifx-button>.',\r\n table: {\r\n category: 'story controls',\r\n }\r\n },\r\n icon: {\r\n description: 'The icon to be displayed.',\r\n control: 'select',\r\n options: Object.keys(icons),\r\n table: {\r\n category: 'ifx-button props',\r\n type: {\r\n summary: 'string'\r\n }\r\n }\r\n },\r\n variant: {\r\n description: 'Sets the style variant of the button.',\r\n control: 'radio',\r\n options: ['primary', 'secondary', 'tertiary'],\r\n table: {\r\n category: 'ifx-button props',\r\n defaultValue: {\r\n summary: 'primary'\r\n }\r\n }\r\n },\r\n ariaLabel:{\r\n description: 'Sets the aria-label attribute of the button.Enhances accessibility.',\r\n control: 'text',\r\n table: {\r\n category: 'ifx-button props',\r\n defaultValue: {\r\n summary: 'Button'\r\n }\r\n }\r\n },\r\n theme: {\r\n description: 'Specifies the theme style of the button.',\r\n control: 'radio',\r\n options: ['default', 'danger', 'inverse'],\r\n table: {\r\n category: 'ifx-button props',\r\n defaultValue: {\r\n summary: 'default'\r\n }\r\n }\r\n },\r\n type: {\r\n description: 'Sets the type attribute of the button.',\r\n control: 'radio',\r\n options: ['button', 'submit', 'reset'],\r\n table: {\r\n category: 'ifx-button props',\r\n defaultValue: {\r\n summary: 'button'\r\n }\r\n }\r\n },\r\n size: {\r\n description: 'Sets the size of the button. Options: xs (32px) s (36px), m (40px), l (48px)',\r\n control: 'radio',\r\n options: ['xs', 's', 'm', 'l'],\r\n table: {\r\n category: 'ifx-button props',\r\n defaultValue: {\r\n summary: 'm'\r\n }\r\n }\r\n },\r\n fullWidth: {\r\n description: 'When set to true, expands the button to take the full width of its container.',\r\n control: 'boolean',\r\n table: {\r\n category: 'ifx-button props',\r\n defaultValue: {\r\n summary: 'false'\r\n }\r\n }\r\n },\r\n disabled: {\r\n description: 'Disables the button when set to true.',\r\n control: 'boolean',\r\n table: {\r\n category: 'ifx-button props',\r\n defaultValue: {\r\n summary: 'false'\r\n }\r\n }\r\n },\r\n iconPosition: {\r\n description: 'Determines the position of an icon within the button if an icon is used.',\r\n control: 'radio',\r\n options: ['left', 'right'],\r\n table: {\r\n category: 'ifx-button props',\r\n defaultValue: {\r\n summary: 'left'\r\n }\r\n }\r\n },\r\n href: {\r\n description: 'When set to true, treats the button as a link by setting a URL.',\r\n control: 'boolean',\r\n table: {\r\n category: 'ifx-button props',\r\n defaultValue: {\r\n summary: 'false'\r\n }\r\n }\r\n },\r\n url: {\r\n description: 'Specifies the destination URL for the button when it acts as a link.',\r\n table: {\r\n category: 'ifx-button 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 document when the button is clicked.',\r\n control: 'radio',\r\n options: ['_blank', '_self', '_parent'],\r\n table: {\r\n category: 'ifx-button props',\r\n defaultValue: {\r\n summary: '_blank'\r\n }\r\n }\r\n },\r\n },\r\n};\r\n\r\nconst DefaultTemplate = args =>\r\n `<ifx-button type=\"${args.type}\" aria-label=\"${args.ariaLabel}\" disabled=\"${args.disabled}\" variant=\"${args.variant}\" size=\"${args.size}\" target=\"${args.target}\" theme=\"${args.theme}\" ${args.href ? `href=\"${args.url}\"` : ''} full-width=\"${args.fullWidth}\">\r\n ${args.icon && args.iconPosition.toUpperCase() === 'LEFT' ? `<ifx-icon icon=\"${args.icon}\"></ifx-icon>` : ''}${args.label}${args.icon && args.iconPosition.toUpperCase() === 'RIGHT' ? `<ifx-icon icon=\"${args.icon}\"></ifx-icon>` : ''} \r\n</ifx-button>`;\r\n\r\nexport const Default = DefaultTemplate.bind({});\r\n"]}
1	+ {"version":3,"file":"button.stories.js","sourceRoot":"","sources":["../../../src/components/button/button.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { icons } from '@infineon/infineon-icons';\n\nexport default {\n title: 'Components/Button',\n tags: ['autodocs'],\n\n args: {\n label: 'Button',\n variant: 'primary',\n theme: 'default',\n type: 'button',\n size: 'm',\n fullWidth: false,\n disabled: false,\n icon: '',\n iconPosition: 'left',\n href: false,\n url: '',\n target: '_blank',\n ariaLabel: 'Button',\n },\n\n argTypes: {\n label: {\n name: 'Label of Button',\n description: 'Sets the text displayed on the <ifx-button>.',\n table: {\n category: 'story controls',\n }\n },\n icon: {\n description: 'The icon to be displayed.',\n control: 'select',\n options: Object.keys(icons),\n table: {\n category: 'ifx-button props',\n type: {\n summary: 'string'\n }\n }\n },\n variant: {\n description: 'Sets the style variant of the button.',\n control: 'radio',\n options: ['primary', 'secondary', 'tertiary'],\n table: {\n category: 'ifx-button props',\n defaultValue: {\n summary: 'primary'\n }\n }\n },\n ariaLabel:{\n description: 'Sets the aria-label attribute of the button.Enhances accessibility.',\n control: 'text',\n table: {\n category: 'ifx-button props',\n defaultValue: {\n summary: 'Button'\n }\n }\n },\n theme: {\n description: 'Specifies the theme style of the button.',\n control: 'radio',\n options: ['default', 'danger', 'inverse'],\n table: {\n category: 'ifx-button props',\n defaultValue: {\n summary: 'default'\n }\n }\n },\n type: {\n description: 'Sets the type attribute of the button.',\n control: 'radio',\n options: ['button', 'submit', 'reset'],\n table: {\n category: 'ifx-button props',\n defaultValue: {\n summary: 'button'\n }\n }\n },\n size: {\n description: 'Sets the size of the button. Options: xs (32px) s (36px), m (40px), l (48px)',\n control: 'radio',\n options: ['xs', 's', 'm', 'l'],\n table: {\n category: 'ifx-button props',\n defaultValue: {\n summary: 'm'\n }\n }\n },\n fullWidth: {\n description: 'When set to true, expands the button to take the full width of its container.',\n control: 'boolean',\n table: {\n category: 'ifx-button props',\n defaultValue: {\n summary: 'false'\n }\n }\n },\n disabled: {\n description: 'Disables the button when set to true.',\n control: 'boolean',\n table: {\n category: 'ifx-button props',\n defaultValue: {\n summary: 'false'\n }\n }\n },\n iconPosition: {\n description: 'Determines the position of an icon within the button if an icon is used.',\n control: 'radio',\n options: ['left', 'right'],\n table: {\n category: 'ifx-button props',\n defaultValue: {\n summary: 'left'\n }\n }\n },\n href: {\n description: 'When set to true, treats the button as a link by setting a URL.',\n control: 'boolean',\n table: {\n category: 'ifx-button props',\n defaultValue: {\n summary: 'false'\n }\n }\n },\n url: {\n description: 'Specifies the destination URL for the button when it acts as a link.',\n table: {\n category: 'ifx-button props',\n type: {\n summary: 'string'\n }\n }\n },\n target: {\n description: 'Determines where to open the linked document when the button is clicked.',\n control: 'radio',\n options: ['_blank', '_self', '_parent'],\n table: {\n category: 'ifx-button props',\n defaultValue: {\n summary: '_blank'\n }\n }\n },\n },\n};\n\nconst DefaultTemplate = args =>\n `<ifx-button type=\"${args.type}\" aria-label=\"${args.ariaLabel}\" disabled=\"${args.disabled}\" variant=\"${args.variant}\" size=\"${args.size}\" target=\"${args.target}\" theme=\"${args.theme}\" ${args.href ? `href=\"${args.url}\"` : ''} full-width=\"${args.fullWidth}\">\n ${args.icon && args.iconPosition.toUpperCase() === 'LEFT' ? `<ifx-icon icon=\"${args.icon}\"></ifx-icon>` : ''}${args.label}${args.icon && args.iconPosition.toUpperCase() === 'RIGHT' ? `<ifx-icon icon=\"${args.icon}\"></ifx-icon>` : ''} \n</ifx-button>`;\n\nexport const Default = DefaultTemplate.bind({});\n"]}

package/dist/collection/components/card/card-headline/card-headline.js CHANGED Viewed

@@ -15,7 +15,7 @@ export class CardHeadline {
         }
     }
     render() {
-        return (h("div", { key: '7b846b52f7e7670cddd83065b41b64a2de219474', class: `card__headline-wrapper ${this.hasDesc ? 'withDesc' : ""}` }, h("div", { key: '048113ed2085a872f6aa31cc22fd721f3978752c', class: `card-headline ${this.direction}` }, h("slot", { key: '8c82191f16af04d476a09a50b6208b01c109e41d' }))));
+        return (h("div", { key: '46766a6fd8ea2e16ad47662ad5ad06d25359f5e0', class: `card__headline-wrapper ${this.hasDesc ? 'withDesc' : ""}` }, h("div", { key: '2368c853f7f8ce565ab00628b925c86eae56eae1', class: `card-headline ${this.direction}` }, h("slot", { key: '8c99851e5308f19672df8aa625ca428464fea515' }))));
     }
     static get is() { return "ifx-card-headline"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/card/card-headline/card-headline.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"card-headline.js","sourceRoot":"","sources":["../../../../src/components/card/card-headline/card-headline.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAQ7D,MAAM,OAAO,YAAY;IAKvB,iBAAiB;;QACf,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;QAEhD,IAAI,WAAW,EAAE,CAAC;YAChB,MAAM,SAAS,GAAG,MAAA,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,0CAAE,SAAS,CAAC;YAE3E,IAAI,SAAS,IAAI,SAAS,CAAC,QAAQ,CAAC,YAAY,CAAC,EAAE,CAAC;gBAClD,IAAI,CAAC,SAAS,GAAG,YAAY,CAAA;YAC/B,CAAC;YAED,MAAM,IAAI,GAAG,WAAW,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;YACxD,IAAI,IAAI,EAAE,CAAC;gBACT,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;YACtB,CAAC;QACH,CAAC;IACH,CAAC;IAGD,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAE,0BAA0B,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE;YACpE,4DAAK,KAAK,EAAE,iBAAiB,IAAI,CAAC,SAAS,EAAE;gBAC3C,8DAAQ,CACJ,CACF,CACP,CAAA;IACH,CAAC;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Element, State } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'ifx-card-headline',\r\n styleUrl: 'card-headline.scss',\r\n shadow: true,\r\n})\r\n\r\nexport class CardHeadline {\r\n @Element() el;\r\n @State() direction: string;\r\n @State() hasDesc: boolean;\r\n\r\n componentWillLoad() {\r\n const cardElement = this.el.closest('ifx-card');\r\n\r\n if (cardElement) {\r\n const cardClass = cardElement.shadowRoot.querySelector('.card')?.className;\r\n\r\n if (cardClass && cardClass.includes('horizontal')) {\r\n this.direction = 'horizontal'\r\n }\r\n\r\n const desc = cardElement.querySelector('ifx-card-text');\r\n if (desc) {\r\n this.hasDesc = true;\r\n }\r\n }\r\n }\r\n\r\n\r\n render() {\r\n return (\r\n <div class={`card__headline-wrapper ${this.hasDesc ? 'withDesc' : \"\"}`}>\r\n <div class={`card-headline ${this.direction}`}>\r\n <slot />\r\n </div>\r\n </div>\r\n )\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"card-headline.js","sourceRoot":"","sources":["../../../../src/components/card/card-headline/card-headline.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAQ7D,MAAM,OAAO,YAAY;IAKvB,iBAAiB;;QACf,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;QAEhD,IAAI,WAAW,EAAE,CAAC;YAChB,MAAM,SAAS,GAAG,MAAA,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,0CAAE,SAAS,CAAC;YAE3E,IAAI,SAAS,IAAI,SAAS,CAAC,QAAQ,CAAC,YAAY,CAAC,EAAE,CAAC;gBAClD,IAAI,CAAC,SAAS,GAAG,YAAY,CAAA;YAC/B,CAAC;YAED,MAAM,IAAI,GAAG,WAAW,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;YACxD,IAAI,IAAI,EAAE,CAAC;gBACT,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;YACtB,CAAC;QACH,CAAC;IACH,CAAC;IAGD,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAE,0BAA0B,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE;YACpE,4DAAK,KAAK,EAAE,iBAAiB,IAAI,CAAC,SAAS,EAAE;gBAC3C,8DAAQ,CACJ,CACF,CACP,CAAA;IACH,CAAC;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Element, State } from '@stencil/core';\n\n@Component({\n tag: 'ifx-card-headline',\n styleUrl: 'card-headline.scss',\n shadow: true,\n})\n\nexport class CardHeadline {\n @Element() el;\n @State() direction: string;\n @State() hasDesc: boolean;\n\n componentWillLoad() {\n const cardElement = this.el.closest('ifx-card');\n\n if (cardElement) {\n const cardClass = cardElement.shadowRoot.querySelector('.card')?.className;\n\n if (cardClass && cardClass.includes('horizontal')) {\n this.direction = 'horizontal'\n }\n\n const desc = cardElement.querySelector('ifx-card-text');\n if (desc) {\n this.hasDesc = true;\n }\n }\n }\n\n\n render() {\n return (\n <div class={`card__headline-wrapper ${this.hasDesc ? 'withDesc' : \"\"}`}>\n <div class={`card-headline ${this.direction}`}>\n <slot />\n </div>\n </div>\n )\n }\n}\n"]}

package/dist/collection/components/card/card-image/card-image.js CHANGED Viewed

@@ -10,7 +10,7 @@ export class CardImage {
         this.handlePosition(this.position);
     }
     render() {
-        return (h("img", { key: 'ed999c190110ba94ee2a57d0e7b3097b047cfb1f', src: this.src, alt: this.alt, class: "card-image" }));
+        return (h("img", { key: '74204d35691d617c897b876c6efee1b9a6722f64', src: this.src, alt: this.alt, class: "card-image" }));
     }
     static get is() { return "ifx-card-image"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/card/card-image/card-image.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"card-image.js","sourceRoot":"","sources":["../../../../src/components/card/card-image/card-image.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAQxE,MAAM,OAAO,SAAS;IAMpB,cAAc,CAAC,QAAQ;QACrB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;IACjC,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;IACpC,CAAC;IAED,kBAAkB;QAChB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;IACpC,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAC,YAAY,GAAG,CACzD,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'ifx-card-image',\r\n styleUrl: 'card-image.scss',\r\n shadow: true,\r\n})\r\n\r\nexport class CardImage {\r\n @Prop() src: string;\r\n @Prop() alt: string;\r\n @Prop() position: string;\r\n @Event() imgPosition: EventEmitter;\r\n\r\n handlePosition(position) {\r\n this.imgPosition.emit(position)\r\n }\r\n\r\n componentWillLoad() {\r\n this.handlePosition(this.position)\r\n }\r\n\r\n componentDidUpdate() {\r\n this.handlePosition(this.position)\r\n }\r\n\r\n render() {\r\n return (\r\n <img src={this.src} alt={this.alt} class=\"card-image\" />\r\n );\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"card-image.js","sourceRoot":"","sources":["../../../../src/components/card/card-image/card-image.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAQxE,MAAM,OAAO,SAAS;IAMpB,cAAc,CAAC,QAAQ;QACrB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;IACjC,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;IACpC,CAAC;IAED,kBAAkB;QAChB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;IACpC,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAC,YAAY,GAAG,CACzD,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'ifx-card-image',\n styleUrl: 'card-image.scss',\n shadow: true,\n})\n\nexport class CardImage {\n @Prop() src: string;\n @Prop() alt: string;\n @Prop() position: string;\n @Event() imgPosition: EventEmitter;\n\n handlePosition(position) {\n this.imgPosition.emit(position)\n }\n\n componentWillLoad() {\n this.handlePosition(this.position)\n }\n\n componentDidUpdate() {\n this.handlePosition(this.position)\n }\n\n render() {\n return (\n <img src={this.src} alt={this.alt} class=\"card-image\" />\n );\n }\n}\n"]}

package/dist/collection/components/card/card-links/card-links.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class CardLinks {
     render() {
-        return (h("div", { key: 'c2ad16092f513de6ea485ab418fcf2e62b276859', class: 'container' }, h("slot", { key: 'e4a80833b3a1de998967120d85fcab706926e3ec' })));
+        return (h("div", { key: '744455878787fca646306c9ef81e3e49e0fa7543', class: 'container' }, h("slot", { key: '096ab98134aa896969c6a5c674dcd66b6a9219d6' })));
     }
     static get is() { return "ifx-card-links"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/card/card-links/card-links.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"card-links.js","sourceRoot":"","sources":["../../../../src/components/card/card-links/card-links.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAQtD,MAAM,OAAO,SAAS;IAGpB,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,WAAW;YACpB,8DAAQ,CACJ,CACP,CAAA;IACH,CAAC;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Element } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'ifx-card-links',\r\n styleUrl: 'card-links.scss',\r\n shadow: true,\r\n})\r\n\r\nexport class CardLinks {\r\n @Element() el;\r\n\r\n render() {\r\n return (\r\n <div class='container'>\r\n <slot />\r\n </div>\r\n )\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"card-links.js","sourceRoot":"","sources":["../../../../src/components/card/card-links/card-links.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAQtD,MAAM,OAAO,SAAS;IAGpB,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,WAAW;YACpB,8DAAQ,CACJ,CACP,CAAA;IACH,CAAC;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Element } from '@stencil/core';\n\n@Component({\n tag: 'ifx-card-links',\n styleUrl: 'card-links.scss',\n shadow: true,\n})\n\nexport class CardLinks {\n @Element() el;\n\n render() {\n return (\n <div class='container'>\n <slot />\n </div>\n )\n }\n}\n"]}

package/dist/collection/components/card/card-overline/card-overline.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class CardOverline {
     render() {
-        return (h("div", { key: 'e707ef390549c1d7ee1035a8b6630466a296b78b', class: "card-overline" }, h("slot", { key: '3d7f0d857315b739162bf1989fe2035b90599049' })));
+        return (h("div", { key: '181762fa666e11ebc4d8c11430f878494d6ff378', class: "card-overline" }, h("slot", { key: 'bbbc7a81dca17cef1ea809f9f87e9a010e5f212d' })));
     }
     static get is() { return "ifx-card-overline"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/card/card-overline/card-overline.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"card-overline.js","sourceRoot":"","sources":["../../../../src/components/card/card-overline/card-overline.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAQ7C,MAAM,OAAO,YAAY;IAEvB,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,eAAe;YACxB,8DAAQ,CACJ,CACP,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, h } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'ifx-card-overline',\r\n styleUrl: 'card-overline.scss',\r\n shadow: true,\r\n})\r\n\r\nexport class CardOverline {\r\n\r\n render() {\r\n return (\r\n <div class=\"card-overline\">\r\n <slot />\r\n </div>\r\n );\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"card-overline.js","sourceRoot":"","sources":["../../../../src/components/card/card-overline/card-overline.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAQ7C,MAAM,OAAO,YAAY;IAEvB,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,eAAe;YACxB,8DAAQ,CACJ,CACP,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'ifx-card-overline',\n styleUrl: 'card-overline.scss',\n shadow: true,\n})\n\nexport class CardOverline {\n\n render() {\n return (\n <div class=\"card-overline\">\n <slot />\n </div>\n );\n }\n}\n"]}

package/dist/collection/components/card/card-text/card-text.js CHANGED Viewed

@@ -8,7 +8,7 @@ export class CardText {
         }
     }
     render() {
-        return (h("div", { key: 'e1633c3f7bf8438b839ad4df9ec64e2a5afce629', class: `card__text-wrapper ${this.hasBtn ? 'hasBtn' : ""}` }, h("div", { key: 'f6dd6376eb3763f41dca8d77b7094277d8a08053', class: `card-text` }, h("slot", { key: 'b468bcf96960f91232cb394fb737f2f88d11da29' }))));
+        return (h("div", { key: '5a2aabfe888a3828a6017412ee91188efe4d64c2', class: `card__text-wrapper ${this.hasBtn ? 'hasBtn' : ""}` }, h("div", { key: '39aa1e521652e4b323dd571614e297a5a600cfa9', class: `card-text` }, h("slot", { key: 'b72bc79a33bb48e96ae9f825dd48ca9b9b44725f' }))));
     }
     static get is() { return "ifx-card-text"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/card/card-text/card-text.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"card-text.js","sourceRoot":"","sources":["../../../../src/components/card/card-text/card-text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,EAAC,MAAM,eAAe,CAAC;AAQ5D,MAAM,OAAO,QAAQ;IAInB,iBAAiB;QACf,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;QACnE,MAAM,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;QACvE,IAAG,IAAI,IAAI,MAAM,EAAE,CAAC;YAClB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;QACrB,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAE,sBAAsB,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE;YAC7D,4DAAK,KAAK,EAAE,WAAW;gBACrB,8DAAQ,CACJ,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Element, State} from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'ifx-card-text',\r\n styleUrl: './card-text.scss',\r\n shadow: true,\r\n})\r\n\r\nexport class CardText {\r\n @Element() el;\r\n @State() hasBtn: boolean;\r\n\r\n componentWillLoad() { \r\n const link = this.el.closest('ifx-card').querySelector('ifx-link');\r\n const button = this.el.closest('ifx-card').querySelector('ifx-button');\r\n if(link \|\| button) { \r\n this.hasBtn = true;\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <div class={`card__text-wrapper ${this.hasBtn ? 'hasBtn' : \"\"}`}>\r\n <div class={`card-text`}>\r\n <slot />\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"card-text.js","sourceRoot":"","sources":["../../../../src/components/card/card-text/card-text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,EAAC,MAAM,eAAe,CAAC;AAQ5D,MAAM,OAAO,QAAQ;IAInB,iBAAiB;QACf,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;QACnE,MAAM,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;QACvE,IAAG,IAAI,IAAI,MAAM,EAAE,CAAC;YAClB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;QACrB,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAE,sBAAsB,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE;YAC7D,4DAAK,KAAK,EAAE,WAAW;gBACrB,8DAAQ,CACJ,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Element, State} from '@stencil/core';\n\n@Component({\n tag: 'ifx-card-text',\n styleUrl: './card-text.scss',\n shadow: true,\n})\n\nexport class CardText {\n @Element() el;\n @State() hasBtn: boolean;\n\n componentWillLoad() { \n const link = this.el.closest('ifx-card').querySelector('ifx-link');\n const button = this.el.closest('ifx-card').querySelector('ifx-button');\n if(link \|\| button) { \n this.hasBtn = true;\n }\n }\n\n render() {\n return (\n <div class={`card__text-wrapper ${this.hasBtn ? 'hasBtn' : \"\"}`}>\n <div class={`card-text`}>\n <slot />\n </div>\n </div>\n );\n }\n}\n"]}

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

@@ -37,12 +37,12 @@ export class Card {
         this.handleComponentAdjustment();
     }
     render() {
-        return (h(Host, { key: 'a0867e2b30baa55cfda18303340586a23b3cf501' }, h("div", { key: 'df2511659c0ece48955c313de9d67bc338858201', "aria-label": this.ariaLabel, class: `card
-            ${this.noBtns ? 'noBtns' : ""}
-            ${this.direction}
+        return (h(Host, { key: 'd1342011d31f6978702f5a193191c97c40620d3a' }, h("div", { key: '0fad34f8282119b8a32647abaadb9c4d8c596b40', "aria-label": this.ariaLabel, class: `card
+            ${this.noBtns ? 'noBtns' : ""}
+            ${this.direction}
             ${this.alignment}`, role: "group" }, this.direction === 'horizontal' &&
-            h("div", { key: '1332b8643ad72eb0659915c82caba62db959fec4', class: "horizontal" }, h("a", { key: '7c6cef7c4332c93f2f6de6069647d8554faa4886', class: `card-img ${this.noImg ? 'noImage' : ""} ${this.internalHref ? 'card-href' : ''}`, href: this.internalHref }, h("slot", { key: 'f3013c93645e78748dc19f2f5b42810a2a251a60', name: "img" })), h("div", { key: '16e7444a54d3360a31a1a07407a0b49f35a650e3', class: 'lower__body-wrapper' }, h("a", { key: '263f15a09371605b8bc87dd94e9fea5bcc25fb7a', class: `upper-body ${this.internalHref ? 'card-href' : ''}`, href: this.internalHref, id: "upper-body-content" }, h("slot", { key: '34cd76c02d8fdc927d461e184918f12d7e196184' })), h("div", { key: 'bab33a01f255fd5ed2fc866f3d2d7b2fc62f8963' }, h("slot", { key: 'ae8ec1595f6a70370aefb47f14354b66b688f6f6', name: 'buttons' })))), this.direction === 'vertical' &&
-            h("div", { key: 'ba3665f7e757454bf5727b72e1bd2b4871ea075e', class: "vertical" }, h("a", { key: '3bcdb561473d50a45656cf0e51fb01d0bec4aa31', class: `upper__body-wrapper ${this.internalHref ? 'card-href' : ''}`, href: this.internalHref, target: this.target }, h("div", { key: '45f39609addede060b1a6d99e934e4699a02eb90', class: `card-img ${this.noImg ? 'noImage' : ""}` }, h("slot", { key: '3810e2b4ea80fd6c8e0581b9767c1df3ce67687b', name: "img" })), h("div", { key: 'abf08dcb3aafba84a5b5e6391e03ef638517a688', class: 'upper-body', id: "upper-body-content" }, h("slot", { key: '069c46ec890037e85087e87395c6cb12f67febd9' }))), h("div", { key: 'bfe6816f195766ed9de36601e002c63957f69fd7', class: 'lower__body-wrapper', role: "group", "aria-labelledby": "upper-body-content" }, h("slot", { key: '509c367955c8013a19389b06de4db70de7b706ec', name: 'buttons' }))))));
+            h("div", { key: '14bbc106ff828fc268bd5636d71ed66b85b3971e', class: "horizontal" }, h("a", { key: '7cd3f0f394d067ef375490fc96d71c15937b784a', class: `card-img ${this.noImg ? 'noImage' : ""} ${this.internalHref ? 'card-href' : ''}`, href: this.internalHref }, h("slot", { key: 'ce3be286399a863d0535b7886be602eda1da1e3a', name: "img" })), h("div", { key: '19d526f169cfdfc5921b3104e642b0390d40f57c', class: 'lower__body-wrapper' }, h("a", { key: 'e4af1b4915b38e8f31b6e539072142c8ab85e334', class: `upper-body ${this.internalHref ? 'card-href' : ''}`, href: this.internalHref, id: "upper-body-content" }, h("slot", { key: '28c6e43c2e4f4a47968c7b1054d8fe8eb2d148c6' })), h("div", { key: '708536495fed3c351f85823b7dfd52b56e7e7d97' }, h("slot", { key: '926da9864476efaa413ac167101a71ed265d8fa8', name: 'buttons' })))), this.direction === 'vertical' &&
+            h("div", { key: '23350f711ef5cfbb298812f23d120927a67879c3', class: "vertical" }, h("a", { key: 'c740bb3957d400c7f0cc06a2052bbe80a1b184a7', class: `upper__body-wrapper ${this.internalHref ? 'card-href' : ''}`, href: this.internalHref, target: this.target }, h("div", { key: '9027ad5864dab44e18b2c9bd10c704d8329122f5', class: `card-img ${this.noImg ? 'noImage' : ""}` }, h("slot", { key: '509b69f84d36075351cbec657232b2c859c8cd9e', name: "img" })), h("div", { key: '3d7590db496cd6aaf0603ebf224a015324a86ce9', class: 'upper-body', id: "upper-body-content" }, h("slot", { key: '142c46ccd143f00c62e07c70b5ffcec5674666fd' }))), h("div", { key: '8245deceb8ff7e14408386eaeba2f5025ab75229', class: 'lower__body-wrapper', role: "group", "aria-labelledby": "upper-body-content" }, h("slot", { key: '0a0e0124cde655ccfddc59cbc91f2cd373e545b5', name: 'buttons' }))))));
     }
     static get is() { return "ifx-card"; }
     static get encapsulation() { return "shadow"; }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"card.js","sourceRoot":"","sources":["../../../src/components/card/card.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Host, Element, Prop, State, Listen } 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-card',\r\n styleUrl: 'card.scss',\r\n shadow: true,\r\n})\r\n\r\nexport class Card {\r\n @Element() el;\r\n @State() noBtns: boolean;\r\n @Prop() direction: 'horizontal' \| 'vertical' = 'vertical';\r\n @State() alignment: string;\r\n @State() noImg: boolean;\r\n @Prop() href: string = \"\";\r\n @State() internalHref: string = \"\";\r\n @Prop() target: string = \"_self\";\r\n @Prop() ariaLabel: string \| null;\r\n\r\n @Listen('imgPosition')\r\n setImgPosition(event) {\r\n this.alignment = event.detail;\r\n }\r\n\r\n handleComponentAdjustment() {\r\n const image = this.el.querySelector('ifx-card-image');\r\n const links = this.el.querySelector('ifx-card-links');\r\n\r\n this.noImg = !image;\r\n this.noBtns = !links;\r\n\r\n if (this.href.trim() === \"\") {\r\n this.internalHref = undefined;\r\n } else {\r\n this.internalHref = this.href;\r\n }\r\n }\r\n\r\n componentWillLoad() {\r\n this.handleComponentAdjustment();\r\n }\r\n\r\n async componentDidLoad() { \r\n if(!isNestedInIfxComponent(this.el)) { \r\n const framework = detectFramework();\r\n trackComponent('ifx-card', await framework);\r\n }\r\n }\r\n\r\n componentWillUpdate() {\r\n this.handleComponentAdjustment();\r\n }\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <div \r\n aria-label={this.ariaLabel} \r\n class={\r\n `card \r\n ${this.noBtns ? 'noBtns' : \"\"}\r\n ${this.direction} \r\n ${this.alignment}`\r\n }\r\n role=\"group\"\r\n >\r\n\r\n {this.direction === 'horizontal' &&\r\n <div class=\"horizontal\">\r\n <a \r\n class={`card-img ${this.noImg ? 'noImage' : \"\"} ${this.internalHref ? 'card-href' : ''}`} \r\n href={this.internalHref}\r\n >\r\n <slot name=\"img\" />\r\n </a>\r\n\r\n <div class='lower__body-wrapper'>\r\n <a \r\n class={`upper-body ${this.internalHref ? 'card-href' : ''}`} \r\n href={this.internalHref}\r\n id=\"upper-body-content\"\r\n >\r\n <slot />\r\n </a>\r\n <div>\r\n <slot name='buttons' />\r\n </div>\r\n </div>\r\n </div>}\r\n\r\n {this.direction === 'vertical' &&\r\n <div class=\"vertical\">\r\n <a \r\n class={`upper__body-wrapper ${this.internalHref ? 'card-href' : ''}`} \r\n href={this.internalHref} \r\n target={this.target}\r\n >\r\n <div class={`card-img ${this.noImg ? 'noImage' : \"\"}`}>\r\n <slot name=\"img\" />\r\n </div>\r\n\r\n <div class='upper-body' id=\"upper-body-content\">\r\n <slot />\r\n </div>\r\n </a>\r\n\r\n <div class='lower__body-wrapper' role=\"group\" aria-labelledby=\"upper-body-content\">\r\n <slot name='buttons' />\r\n </div>\r\n </div>}\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"card.js","sourceRoot":"","sources":["../../../src/components/card/card.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Host, Element, Prop, State, Listen } 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-card',\n styleUrl: 'card.scss',\n shadow: true,\n})\n\nexport class Card {\n @Element() el;\n @State() noBtns: boolean;\n @Prop() direction: 'horizontal' \| 'vertical' = 'vertical';\n @State() alignment: string;\n @State() noImg: boolean;\n @Prop() href: string = \"\";\n @State() internalHref: string = \"\";\n @Prop() target: string = \"_self\";\n @Prop() ariaLabel: string \| null;\n\n @Listen('imgPosition')\n setImgPosition(event) {\n this.alignment = event.detail;\n }\n\n handleComponentAdjustment() {\n const image = this.el.querySelector('ifx-card-image');\n const links = this.el.querySelector('ifx-card-links');\n\n this.noImg = !image;\n this.noBtns = !links;\n\n if (this.href.trim() === \"\") {\n this.internalHref = undefined;\n } else {\n this.internalHref = this.href;\n }\n }\n\n componentWillLoad() {\n this.handleComponentAdjustment();\n }\n\n async componentDidLoad() { \n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-card', await framework);\n }\n }\n\n componentWillUpdate() {\n this.handleComponentAdjustment();\n }\n\n render() {\n return (\n <Host>\n <div \n aria-label={this.ariaLabel} \n class={\n `card \n ${this.noBtns ? 'noBtns' : \"\"}\n ${this.direction} \n ${this.alignment}`\n }\n role=\"group\"\n >\n\n {this.direction === 'horizontal' &&\n <div class=\"horizontal\">\n <a \n class={`card-img ${this.noImg ? 'noImage' : \"\"} ${this.internalHref ? 'card-href' : ''}`} \n href={this.internalHref}\n >\n <slot name=\"img\" />\n </a>\n\n <div class='lower__body-wrapper'>\n <a \n class={`upper-body ${this.internalHref ? 'card-href' : ''}`} \n href={this.internalHref}\n id=\"upper-body-content\"\n >\n <slot />\n </a>\n <div>\n <slot name='buttons' />\n </div>\n </div>\n </div>}\n\n {this.direction === 'vertical' &&\n <div class=\"vertical\">\n <a \n class={`upper__body-wrapper ${this.internalHref ? 'card-href' : ''}`} \n href={this.internalHref} \n target={this.target}\n >\n <div class={`card-img ${this.noImg ? 'noImage' : \"\"}`}>\n <slot name=\"img\" />\n </div>\n\n <div class='upper-body' id=\"upper-body-content\">\n <slot />\n </div>\n </a>\n\n <div class='lower__body-wrapper' role=\"group\" aria-labelledby=\"upper-body-content\">\n <slot name='buttons' />\n </div>\n </div>}\n </div>\n </Host>\n );\n }\n}\n"]}