npm - @infineon/infineon-design-system-stencil - Versions diffs - 30.9.2--canary.1669.a6556475a763cdebf0a29aa12ca37f78801b6799.1 → 30.9.2--canary.1640.73e4e19bf6e56fa149c04b7bbaec71574880c28a.0 - Mend

@infineon/infineon-design-system-stencil 30.9.2--canary.1669.a6556475a763cdebf0a29aa12ca37f78801b6799.1 → 30.9.2--canary.1640.73e4e19bf6e56fa149c04b7bbaec71574880c28a.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 (280) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"textarea.stories.js","sourceRoot":"","sources":["../../../src/components/textarea/textarea.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,eAAe;IACd,KAAK,EAAE,qBAAqB;IAC5B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,IAAI,EAAE;QACL,OAAO,~~EAAC~~,+CAA+C;~~QACvD~~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~~;;IAEZ~~;~~YACD~~,KAAK,EAAE;gBACN,QAAQ,EAAE,eAAe;gBACzB,IAAI,EAAE;oBACL,OAAO,EAAE,uBAAuB;oBAChC,MAAM,EAAE;;;;yEAI4D;iBACpE;aACD;SACD;KACD;CACD,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;IACzB,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC9C,OAAO,CAAC,SAAS,GAAG;;YAET,IAAI,CAAC,OAAO;SACf,IAAI,CAAC,IAAI;aACL,IAAI,CAAC,QAAQ;UAChB,IAAI,CAAC,KAAK;UACV,IAAI,CAAC,KAAK;cACN,IAAI,CAAC,SAAS;SACnB,IAAI,CAAC,IAAI;gBACF,IAAI,CAAC,WAAW;cAClB,IAAI,CAAC,QAAQ;WAChB,IAAI,CAAC,MAAM;SACb,IAAI,CAAC,IAAI;UACR,IAAI,CAAC,KAAK;SACX,IAAI,CAAC,IAAI;;CAEjB,CAAC;IACD,MAAM,QAAQ,GAAG,OAAO,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;IACvD,QAAQ,CAAC,gBAAgB,CAAC,UAAU,EAAE,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC;IAE1D,OAAO,QAAQ,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { action } from '@storybook/addon-actions';\n\nexport default {\n\ttitle: 'Components/Textarea',\n\ttags: ['autodocs'],\n\targs: {\n\t\tcaption:'Caption text, description, error notification',\n\t\tcols: 43,\n\t\tdisabled: false,\n\t\terror: false,\n\t\tlabel: 'Label Text',\n\t\tmaxlength: undefined,\n\t\tname: 'textarea',\n\t\tplaceholder: 'Placeholder',\n\t\treadOnly: false,\n\t\tresize: 'both',\n\t\trows: 5,\n\t\tvalue: '',\n\t\twrap: 'soft'\n\t},\n\targTypes: {\n\t\tcaption: {\n\t\t\tdescription: 'Set the caption text of textarea.',\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t},\n\t\t},\n\t\tcols: {\n\t\t\tdescription: 'Set the visible width of the textarea control.',\n\t\t\tcontrol: { type: 'number', min: 0 },\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t\tdefaultValue: {\n\t\t\t\t\tsummary: 2,\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\tdisabled: {\n\t\t\tdescription: 'Disables the user interaction when set to true.',\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t\tdefaultValue: {\n\t\t\t\t\tsummary: false,\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\terror: {\n\t\t\tdescription: 'Set the component to error state.',\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t\tdefaultValue: {\n\t\t\t\t\tsummary: false,\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\tlabel: {\n\t\t\tdescription: 'Set the label of textarea component.',\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t},\n\t\t},\n\t\tmaxlength: {\n\t\t\tdescription: 'Set the maximum string length user can enter.',\n\t\t\ttype: 'number',\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t}\n\t\t},\n\t\tname: {\n\t\t\tdescription: 'The name of the control. Useful for form handling.',\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t\tdefaultValue: {\n\t\t\t\t\tsummary: 'ifx-textarea-[n]',\n\t\t\t\t}\n\t\t\t},\n\t\t},\n\t\tplaceholder: {\n\t\t\tdescription: 'Set the placeholder text of textarea.',\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t}\n\t\t},\n\t\treadOnly: {\n\t\t\tname: 'read-only',\n\t\t\tdescription: `Text cannot be edited when set to true.\\n \nNote: It is different from disabled prop, control is focusable in readOnly mode unlike disabled.`,\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t\tdefaultValue: {\n\t\t\t\t\tsummary: 'false',\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\tresize: {\n\t\t\tdescription: 'Sets whether the textarea is resizable, and if so, in which directions.',\n\t\t\tcontrol: 'radio',\n\t\t\toptions: ['both', 'vertical', 'horizontal', 'none'],\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t\tdefaultValue: {\n\t\t\t\t\tsummary: 'none',\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\trows: {\n\t\t\tdescription: 'Set the number of visible text lines for the textrarea control.',\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t\tdefaultValue: {\n\t\t\t\t\tsummary: 2,\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\tvalue: {\n\t\t\tdescription: 'Current value of the textarea.',\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t},\n\t\t},\n\t\twrap: {\n\t\t\tdescription: 'Indicates how the control should wrap the value for form submission.',\n\t\t\tcontrol: 'radio',\n\t\t\toptions: ['soft', 'hard', 'off'],\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t\tdefaultValue: {\n\t\t\t\t\tsummary: 'soft',\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\tifxInput: {\n\t\t\tdescription: `A custom event ifxInput is emitted immediately after the value of <ifx-textarea> changes~~.\\~~n\~~n\tevent.detail: string\n\~~t\t\~~t`,\n\t\t\~~ttable: {\n\t\t\t\tcategory: 'custom events',\n\t\t\t\ttype: {\n\t\t\t\t\tsummary: 'Framework integration',\n\t\t\t\t\tdetail: `\nReact: onIfxInput={handleInput}\nVue: @ifxInput=\"handleInput\"\nAngular: (ifxInput)=\"handleInput()\"\nVanillaJs: .addEventListener(\"ifxInput\", (event) => {/handle input/});`,\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t},\n}\n\nconst Template = (args) => {\n\tconst wrapper = document.createElement('div');\n\twrapper.innerHTML = `\n<ifx-textarea \n\tcaption=\"${args.caption}\"\n\tcols=\"${args.cols}\"\n\tdisabled=\"${args.disabled}\"\n\terror=\"${args.error}\"\n\tlabel=\"${args.label}\"\n\tmaxlength=\"${args.maxlength}\"\n\tname=\"${args.name}\"\n\tplaceholder=\"${args.placeholder}\"\n\tread-only=\"${args.readOnly}\"\n\tresize=\"${args.resize}\"\n\trows=\"${args.rows}\"\n\tvalue=\"${args.value}\"\n\twrap=\"${args.wrap}\"\n/>\n`;\n\tconst textarea = wrapper.querySelector('ifx-textarea');\n\ttextarea.addEventListener('ifxInput', action('ifxInput'));\n\n\treturn textarea;\n};\n\nexport const Default = Template.bind({});"]}
1	+ {"version":3,"file":"textarea.stories.js","sourceRoot":"","sources":["../../../src/components/textarea/textarea.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { action } from '@storybook/addon-actions';\n\nexport default {\n\ttitle: 'Components/Textarea',\n\ttags: ['autodocs'],\n\targs: {\n\t\tcaption: 'Caption text, description, error notification',\n\t\tcols: 43,\n\t\tdisabled: false,\n\t\terror: false,\n\t\tlabel: 'Label Text',\n\t\tmaxlength: undefined,\n\t\tname: 'textarea',\n\t\tplaceholder: 'Placeholder',\n\t\treadOnly: false,\n\t\tresize: 'both',\n\t\trows: 5,\n\t\tvalue: '',\n\t\twrap: 'soft'\n\t},\n\targTypes: {\n\t\tcaption: {\n\t\t\tdescription: 'Set the caption text of textarea.',\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t},\n\t\t},\n\t\tcols: {\n\t\t\tdescription: 'Set the visible width of the textarea control.',\n\t\t\tcontrol: { type: 'number', min: 0 },\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t\tdefaultValue: {\n\t\t\t\t\tsummary: 2,\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\tdisabled: {\n\t\t\tdescription: 'Disables the user interaction when set to true.',\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t\tdefaultValue: {\n\t\t\t\t\tsummary: false,\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\terror: {\n\t\t\tdescription: 'Set the component to error state.',\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t\tdefaultValue: {\n\t\t\t\t\tsummary: false,\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\tlabel: {\n\t\t\tdescription: 'Set the label of textarea component.',\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t},\n\t\t},\n\t\tmaxlength: {\n\t\t\tdescription: 'Set the maximum string length user can enter.',\n\t\t\ttype: 'number',\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t}\n\t\t},\n\t\tname: {\n\t\t\tdescription: 'The name of the control. Useful for form handling.',\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t\tdefaultValue: {\n\t\t\t\t\tsummary: 'ifx-textarea-[n]',\n\t\t\t\t}\n\t\t\t},\n\t\t},\n\t\tplaceholder: {\n\t\t\tdescription: 'Set the placeholder text of textarea.',\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t}\n\t\t},\n\t\treadOnly: {\n\t\t\tname: 'read-only',\n\t\t\tdescription: `Text cannot be edited when set to true.\\n \nNote: It is different from disabled prop, control is focusable in readOnly mode unlike disabled.`,\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t\tdefaultValue: {\n\t\t\t\t\tsummary: 'false',\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\tresize: {\n\t\t\tdescription: 'Sets whether the textarea is resizable, and if so, in which directions.',\n\t\t\tcontrol: 'radio',\n\t\t\toptions: ['both', 'vertical', 'horizontal', 'none'],\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t\tdefaultValue: {\n\t\t\t\t\tsummary: 'none',\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\trows: {\n\t\t\tdescription: 'Set the number of visible text lines for the textrarea control.',\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t\tdefaultValue: {\n\t\t\t\t\tsummary: 2,\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\tvalue: {\n\t\t\tdescription: 'Current value of the textarea.',\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t},\n\t\t},\n\t\twrap: {\n\t\t\tdescription: 'Indicates how the control should wrap the value for form submission.',\n\t\t\tcontrol: 'radio',\n\t\t\toptions: ['soft', 'hard', 'off'],\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t\tdefaultValue: {\n\t\t\t\t\tsummary: 'soft',\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\tifxInput: {\n\t\t\tdescription: `A custom event ifxInput is emitted immediately after the value of <ifx-textarea> changes.`,\n\t\t\ttable: {\n\t\t\t\tcategory: 'custom events',\n\t\t\t\ttype: {\n\t\t\t\t\tsummary: 'Framework integration',\n\t\t\t\t\tdetail: `\nReact: onIfxInput={handleInput}\nVue: @ifxInput=\"handleInput\"\nAngular: (ifxInput)=\"handleInput()\"\nVanillaJs: .addEventListener(\"ifxInput\", (event) => {/handle input/});`,\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t},\n}\n\nconst Template = (args) => {\n\tconst wrapper = document.createElement('div');\n\twrapper.innerHTML = `\n<ifx-textarea \n\tcaption=\"${args.caption}\"\n\tcols=\"${args.cols}\"\n\tdisabled=\"${args.disabled}\"\n\terror=\"${args.error}\"\n\tlabel=\"${args.label}\"\n\tmaxlength=\"${args.maxlength}\"\n\tname=\"${args.name}\"\n\tplaceholder=\"${args.placeholder}\"\n\tread-only=\"${args.readOnly}\"\n\tresize=\"${args.resize}\"\n\trows=\"${args.rows}\"\n\tvalue=\"${args.value}\"\n\twrap=\"${args.wrap}\"\n/>\n`;\n\tconst textarea = wrapper.querySelector('ifx-textarea');\n\ttextarea.addEventListener('ifxInput', action('ifxInput'));\n\n\treturn textarea;\n};\n\nexport const Default = Template.bind({});"]}

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

@@ -10,19 +10,63 @@ export default {
         icon: 'c-info-24',
     },
     argTypes: {
+        text: {
+            description: 'Defines the main content of the tooltip.',
+            control: 'text',
+            table: {
+                category: 'ifx-tooltip props',
+                type: {
+                    summary: 'string'
+                }
+            }
+        },
         icon: {
+            description: 'The icon to be displayed. This control is only applicable when the variant is set to ***extended***.',
             options: Object.values(icons).map(i => i['name']),
-            control: { type: 'select' },
+            control: 'select',
+            table: {
+                category: 'ifx-tooltip props',
+                type: {
+                    summary: 'string',
+                    defaultValue: {
+                        summary: 'c-info-24'
+                    }
+                }
+            }
         },
         position: {
+            description: 'Determines the position of the tooltip relative to the reference element.',
             options: ['auto', 'bottom-start', 'top-start', 'left', 'bottom-end', 'top-end', 'right', 'bottom', 'top'],
-            control: { type: 'radio' },
+            control: 'radio',
+            table: {
+                category: 'ifx-tooltip props',
+                defaultValue: {
+                    summary: 'auto'
+                }
+            }
         },
         variant: {
+            description: 'Sets the style variant of the tooltip.',
+            control: 'radio',
             options: ['compact', 'dismissible', 'extended'],
-            control: { type: 'radio' },
+            table: {
+                category: 'ifx-tooltip props',
+                defaultValue: {
+                    summary: 'compact'
+                }
+            }
+        },
+        header: {
+            description: 'Specifies the header or title of the tooltip. This field is only applicable when the variant is set to ***dismissible*** or ***extended***.',
+            control: 'text',
+            if: { arg: 'variant', neq: 'compact' },
+            table: {
+                category: 'ifx-tooltip props',
+                type: {
+                    summary: 'string'
+                }
+            }
         },
-        header: { control: 'text', if: { arg: 'variant', neq: 'compact' } },
     },
 };
 const DefaultTemplate = ({ header, text, variant, position, icon }) => {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"tooltip.stories.js","sourceRoot":"","sources":["../../../src/components/tooltip/tooltip.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAEjD,eAAe;IACb,KAAK,EAAE,oBAAoB;IAC3B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,IAAI,EAAE;QACJ,MAAM,EAAE,kBAAkB;QAC1B,IAAI,EAAE,mBAAmB;QACzB,QAAQ,EAAE,MAAM;QAChB,OAAO,EAAE,SAAS;QAClB,IAAI,EAAE,WAAW;KAClB;IACD,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;YACjD,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;~~SAC5B~~;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,CAAC,MAAM,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,CAAC;YACzG,OAAO,EAAE,EAAE,~~IAAI~~,EAAE,OAAO,EAAE;~~SAC3B~~;QACD,OAAO,EAAE;YACP,OAAO,EAAE,CAAC,SAAS,EAAE,aAAa,EAAE,UAAU,CAAC;YAC/C,~~OAAO~~,EAAE,EAAE,~~IAAI~~,EAAE,OAAO,EAAE;~~SAC3B~~;QACD,MAAM,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,EAAE,~~EAAE,~~GAAG,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE;~~KACpE~~;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,EAAE;IACpE,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;IACtD,IAAI,OAAO,KAAK,aAAa,IAAI,OAAO,KAAK,UAAU,EAAE,CAAC;QACxD,OAAO,CAAC,YAAY,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;IACzC,CAAC;IACD,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IACnC,OAAO,CAAC,YAAY,CAAC,SAAS,EAAE,OAAO,KAAK,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;IAC/E,OAAO,CAAC,YAAY,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;IAC3C,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IAEnC,OAAO,CAAC,WAAW,GAAG,8CAA8C,OAAO,KAAG,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,KAAK,CAAC,CAAC,wCAAwC;IAE9J,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { icons } from '@infineon/infineon-icons';\n\nexport default {\n title: 'Components/Tooltip',\n tags: ['autodocs'],\n args: {\n header: 'Tooltip headline',\n text: \"Hi, I'm a tooltip\",\n position: 'auto',\n variant: 'compact',\n icon: 'c-info-24',\n },\n argTypes: {\n icon: {\n options: Object.values(icons).map(i => i['name']),\n control: { type: '~~select~~' },\n },\n position: {\n options: ['auto', 'bottom-start', 'top-start', 'left', 'bottom-end', 'top-end', 'right', 'bottom', 'top'],\n control: { ~~type~~: '~~radio~~' },\n },\n variant: {\n options: ['compact', 'dismissible', 'extended'],\n ~~control~~: { ~~type~~: '~~radio~~' },\n },\n header: { control: 'text', if: { arg: 'variant', neq: 'compact' } },\n },\n};\n\nconst DefaultTemplate = ({ header, text, variant, position, icon }) => {\n const element = document.createElement('ifx-tooltip');\n if (variant === 'dismissible' \|\| variant === 'extended') {\n element.setAttribute('header', header);\n }\n element.setAttribute('text', text);\n element.setAttribute('variant', variant === 'extended' ? 'extended' : variant);\n element.setAttribute('position', position);\n element.setAttribute('icon', icon);\n\n element.textContent = `I'm the tooltip reference element - Please ${variant==='dismissible' ? 'click' : 'hover'} me`; // Set content for the reference element\n\n return element;\n};\n\nexport const Default = DefaultTemplate.bind({});\n"]}
1	+ {"version":3,"file":"tooltip.stories.js","sourceRoot":"","sources":["../../../src/components/tooltip/tooltip.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { icons } from '@infineon/infineon-icons';\n\nexport default {\n title: 'Components/Tooltip',\n tags: ['autodocs'],\n args: {\n header: 'Tooltip headline',\n text: \"Hi, I'm a tooltip\",\n position: 'auto',\n variant: 'compact',\n icon: 'c-info-24',\n },\n argTypes: {\n text: {\n description: 'Defines the main content of the tooltip.',\n control: 'text',\n table: {\n category: 'ifx-tooltip props',\n type: {\n summary: 'string'\n }\n }\n },\n icon: {\n description: 'The icon to be displayed. This control is only applicable when the variant is set to *extended.',\n options: Object.values(icons).map(i => i['name']),\n control: 'select',\n table: {\n category: 'ifx-tooltip props',\n type: {\n summary: 'string',\n defaultValue: {\n summary: 'c-info-24'\n }\n }\n }\n },\n position: {\n description: 'Determines the position of the tooltip relative to the reference element.',\n options: ['auto', 'bottom-start', 'top-start', 'left', 'bottom-end', 'top-end', 'right', 'bottom', 'top'],\n control: 'radio',\n table: {\n category: 'ifx-tooltip props',\n defaultValue: {\n summary: 'auto'\n }\n }\n },\n variant: {\n description: 'Sets the style variant of the tooltip.',\n control: 'radio',\n options: ['compact', 'dismissible', 'extended'],\n table: {\n category: 'ifx-tooltip props',\n defaultValue: {\n summary: 'compact'\n }\n }\n },\n header: {\n description: 'Specifies the header or title of the tooltip. This field is only applicable when the variant is set to dismissible* or *extended*.',\n control: 'text', \n if: { arg: 'variant', neq: 'compact' },\n table: {\n category: 'ifx-tooltip props',\n type: {\n summary: 'string'\n }\n }\n },\n },\n};\n\nconst DefaultTemplate = ({ header, text, variant, position, icon }) => {\n const element = document.createElement('ifx-tooltip');\n if (variant === 'dismissible' \|\| variant === 'extended') {\n element.setAttribute('header', header);\n }\n element.setAttribute('text', text);\n element.setAttribute('variant', variant === 'extended' ? 'extended' : variant);\n element.setAttribute('position', position);\n element.setAttribute('icon', icon);\n\n element.textContent = `I'm the tooltip reference element - Please ${variant==='dismissible' ? 'click' : 'hover'} me`; // Set content for the reference element\n\n return element;\n};\n\nexport const Default = DefaultTemplate.bind({});\n"]}

package/dist/components/ifx-accordion-item.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { I as IfxAccordionItem$1, d as defineCustomElement$1 } from './p-b2439194.js';
+import { I as IfxAccordionItem$1, d as defineCustomElement$1 } from './p-053d42ef.js';
 const IfxAccordionItem = IfxAccordionItem$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ifx-accordion.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { A as Accordion, d as defineCustomElement$1 } from './p-094bb435.js';
+import { A as Accordion, d as defineCustomElement$1 } from './p-3baaa460.js';
 const IfxAccordion = Accordion;
 const defineCustomElement = defineCustomElement$1;

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

@@ -11,7 +11,7 @@ const BreadcrumbItemLabel = /*@__PURE__*/ proxyCustomElement(class BreadcrumbIte
         this.__attachShadow();
         this.breadcrumbMenuIconWrapper = createEvent(this, "breadcrumbMenuIconWrapper", 7);
         this.icon = undefined;
-        this.url = undefined;
+        this.href = undefined;
         this.target = "_self";
     }
     componentDidLoad() {
@@ -20,13 +20,13 @@ const BreadcrumbItemLabel = /*@__PURE__*/ proxyCustomElement(class BreadcrumbIte
         this.breadcrumbMenuIconWrapper.emit(menuWrapper);
     }
     render() {
-        return (h("a", { key: '16ddbc6dfce781d06c5e852423d1646426c6fb04', href: this.url, target: this.target, class: "breadcrumb-item-label-container", role: 'link' }, h("ifx-icon", { key: '6d62e4f854b7ea735c46a3849a92c09a8d222e54', icon: this.icon, "aria-hidden": "true" }), h("span", { key: '452dc64f08a93f4872f0f033b0b7016073818aab', class: "label-wrapper" }, h("slot", { key: '0a522ff8d13c3133367e62b50480af2dc970961d' })), h("span", { key: '7f5d3a5305ad187e312ae20a59610c9cfe4b13cf', class: "menu-icon-wrapper", "aria-hiden": "true" }, h("ifx-icon", { key: '07dc7f9912e3d87f286273e5758490f39df31d0d', icon: "chevron-down-12" }))));
+        return (h("a", { key: '856f06f931087b841e5f0350f1eb03e83b70e598', href: this.href, target: this.target, class: "breadcrumb-item-label-container", role: 'link' }, h("ifx-icon", { key: 'b67ee6634bea1f1626e073c1cf4238d12e0e8902', icon: this.icon, "aria-hidden": "true" }), h("span", { key: '270394a637cc6dd822d74d47dcc0bce51e9455c5', class: "label-wrapper" }, h("slot", { key: 'a2c15ce4581d3323d52fe931706ed86f3a777e08' })), h("span", { key: 'f013021b230b0a83a9fc1133d395f91c74cec4c4', class: "menu-icon-wrapper", "aria-hiden": "true" }, h("ifx-icon", { key: 'b22c149f7cb47f43054ba7e7a2ca669a94f2d8bc', icon: "chevron-down-12" }))));
     }
     get el() { return this; }
     static get style() { return IfxBreadcrumbItemLabelStyle0; }
 }, [1, "ifx-breadcrumb-item-label", {
         "icon": [1],
-        "url": [1],
+        "href": [1],
         "target": [1]
     }]);
 function defineCustomElement$1() {

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

	@@ -1 +1 @@
1	- {"file":"ifx-breadcrumb-item-label.js","mappings":";;;AAAA,MAAM,sBAAsB,GAAG,swBAAswB,CAAC;AACtyB,qCAAe,sBAAsB;;MCMxB,mBAAmB;;;;;;;;sBAGL,OAAO;;IAIhC,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;KACjD;IAED,MAAM;QACJ,QACE,0DAAG,IAAI,EAAE,IAAI,CAAC,~~GAAG~~,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAC,iCAAiC,EAAC,IAAI,EAAC,MAAM,~~IACzF~~,iEAAU,IAAI,EAAE,IAAI,CAAC,IAAI,iBAAc,MAAM,GAAY,EACzD,6DAAM,KAAK,EAAC,eAAe,IACzB,8DAAQ,CACH,EACR,6DAAM,KAAK,EAAC,mBAAmB,gBAAY,MAAM,IAChD,iEAAU,IAAI,EAAC,iBAAiB,GAAY,CACtC,CACJ,EACJ;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/breadcrumb/breadcrumb-item-label.scss?tag=ifx-breadcrumb-item-label&encapsulation=shadow","src/components/breadcrumb/breadcrumb-item-label.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.breadcrumb-item-label-container {\n display: flex;\n align-items: center;\n gap: tokens.$ifxSpace100;\n text-decoration: none;\n color: tokens.$ifxColorBaseBlack;\n\n &.margin {\n margin-left: 16px;\n }\n\n & ifx-icon:empty {\n display: none;\n }\n\n & .label-icon-wrapper {\n display: inline-flex;\n }\n\n & .menu-icon-wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n width: tokens.$ifxSize200;\n height: tokens.$ifxSize200;\n\n &.hide {\n display: none;\n }\n\n & ifx-icon {\n transition: .3s;\n }\n\n &.show {\n & ifx-icon {\n transition: .3s;\n transform: rotate(180deg);\n }\n }\n }\n}","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() ~~url~~: 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.~~url~~} 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-12\"></ifx-icon>\n </span>\n </a>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ifx-breadcrumb-item-label.js","mappings":";;;AAAA,MAAM,sBAAsB,GAAG,swBAAswB,CAAC;AACtyB,qCAAe,sBAAsB;;MCMxB,mBAAmB;;;;;;;;sBAGL,OAAO;;IAIhC,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;KACjD;IAED,MAAM;QACJ,QACE,0DAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAC,iCAAiC,EAAC,IAAI,EAAC,MAAM,IAC1F,iEAAU,IAAI,EAAE,IAAI,CAAC,IAAI,iBAAc,MAAM,GAAY,EACzD,6DAAM,KAAK,EAAC,eAAe,IACzB,8DAAQ,CACH,EACR,6DAAM,KAAK,EAAC,mBAAmB,gBAAY,MAAM,IAChD,iEAAU,IAAI,EAAC,iBAAiB,GAAY,CACtC,CACJ,EACJ;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/breadcrumb/breadcrumb-item-label.scss?tag=ifx-breadcrumb-item-label&encapsulation=shadow","src/components/breadcrumb/breadcrumb-item-label.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.breadcrumb-item-label-container {\n display: flex;\n align-items: center;\n gap: tokens.$ifxSpace100;\n text-decoration: none;\n color: tokens.$ifxColorBaseBlack;\n\n &.margin {\n margin-left: 16px;\n }\n\n & ifx-icon:empty {\n display: none;\n }\n\n & .label-icon-wrapper {\n display: inline-flex;\n }\n\n & .menu-icon-wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n width: tokens.$ifxSize200;\n height: tokens.$ifxSize200;\n\n &.hide {\n display: none;\n }\n\n & ifx-icon {\n transition: .3s;\n }\n\n &.show {\n & ifx-icon {\n transition: .3s;\n transform: rotate(180deg);\n }\n }\n }\n}","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-12\"></ifx-icon>\n </span>\n </a>\n );\n }\n}\n"],"version":3}

package/dist/components/ifx-breadcrumb.js CHANGED Viewed

@@ -27,15 +27,15 @@ const Breadcrumb = /*@__PURE__*/ proxyCustomElement(class Breadcrumb extends H {
                     const breadcrumbItem = node;
                     const breadcrumbItemLabel = breadcrumbItem.querySelector('ifx-breadcrumb-item-label');
                     const breadcrumbDropdown = breadcrumbItem.querySelector('ifx-dropdown-menu');
-                    if (breadcrumbItemLabel.hasAttribute('url') && breadcrumbDropdown) {
-                        throw new Error('ifx-breadcrumb-item cannot have both a url and a dropdown menu.');
+                    if (breadcrumbItemLabel.hasAttribute('href') && breadcrumbDropdown) {
+                        throw new Error('ifx-breadcrumb-item cannot have both a href and a dropdown menu.');
                     }
                 }
             }
         }
     }
     render() {
-        return (h("nav", { key: '82aec60bebf9a71d7cdcfc2916f91c0e36dee868', "aria-label": "Page navigation breadcrumb" }, h("ol", { key: '70bae75b26b5df4c509f16c0ab8e2b10333de8ac', class: "breadcrumb" }, h("slot", { key: '1cb28e3640f20319349b4f6d3cb1568508d3b1ba' }))));
+        return (h("nav", { key: '3d01af951d4a6a396545eb9cf26454cbe2b31ed0', "aria-label": "Page navigation breadcrumb" }, h("ol", { key: '95ae08a0de7099ecd7c3aa963c1bf9952918ecda', class: "breadcrumb" }, h("slot", { key: 'e9fed255fa08b28c8974498d329df69b1e92edf5' }))));
     }
     get el() { return this; }
     static get style() { return IfxBreadcrumbStyle0; }

package/dist/components/ifx-breadcrumb.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ifx-breadcrumb.js","mappings":";;AAAA,MAAM,aAAa,GAAG,8QAA8Q,CAAC;AACrS,4BAAe,aAAa;;MCMf,UAAU;;;;;;IAGrB,gBAAgB;QACd,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,UAAU,CAAC;QAC9C,IAAI,CAAC,+BAA+B,CAAC,OAAO,CAAC,CAAC;KAC/C;IAEO,+BAA+B,CAAC,OAAoB;QAC1D,IAAI,CAAC,OAAO,EAAE;YACZ,OAAO,CAAC,KAAK,CAAC,mBAAmB,CAAC,CAAC;YACnC,OAAO;SACR;QAED,MAAM,IAAI,GAAG,OAAO,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAC3C,IAAG,IAAI,EAAE;YACP,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;YAE3C,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,aAAa,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;gBAC7C,MAAM,IAAI,GAAG,aAAa,CAAC,CAAC,CAAC,CAAC;gBAC9B,IAAI,IAAI,CAAC,QAAQ,KAAK,qBAAqB,EAAE;oBAC3C,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,~~KAAK~~,CAAC,IAAI,kBAAkB,EAAE;~~wBACjE~~,MAAM,IAAI,KAAK,CAAC,~~iEAAiE~~,CAAC,CAAC;~~qBACpF~~;iBACF;aACF;SACF;KACF;IAED,MAAM;QACJ,QACE,0EAAgB,4BAA4B,IAC1C,2DAAI,KAAK,EAAC,YAAY,IACpB,8DAAQ,CACL,CACD,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/breadcrumb/breadcrumb.scss?tag=ifx-breadcrumb&encapsulation=shadow","src/components/breadcrumb/breadcrumb.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: flex;\n}\n\n.breadcrumb {\n list-style: none;\n padding: 0px;\n margin: 0px;\n display: flex;\n flex-direction: row;\n font-family: var(--ifx-font-family);\n font-size: tokens.$ifxFontSizeS;\n align-items: flex-start;\n //gap: tokens.$ifxSpace200; //this is where the gap comes from\n\n}\n\n// .separator {\n// color: tokens.$ifxColorEngineering300;\n// margin: 0 16px;\n// }","import { Component, h, Element } from '@stencil/core';\n\n@Component({\n tag: 'ifx-breadcrumb',\n styleUrl: 'breadcrumb.scss',\n shadow: true\n})\nexport class Breadcrumb {\n @Element() el;\n\n componentDidLoad() {\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('~~url~~') && breadcrumbDropdown) {\n throw new Error('ifx-breadcrumb-item cannot have both a ~~url~~ 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"],"version":3}
1	+ {"file":"ifx-breadcrumb.js","mappings":";;AAAA,MAAM,aAAa,GAAG,8QAA8Q,CAAC;AACrS,4BAAe,aAAa;;MCMf,UAAU;;;;;;IAGrB,gBAAgB;QACd,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,UAAU,CAAC;QAC9C,IAAI,CAAC,+BAA+B,CAAC,OAAO,CAAC,CAAC;KAC/C;IAEO,+BAA+B,CAAC,OAAoB;QAC1D,IAAI,CAAC,OAAO,EAAE;YACZ,OAAO,CAAC,KAAK,CAAC,mBAAmB,CAAC,CAAC;YACnC,OAAO;SACR;QAED,MAAM,IAAI,GAAG,OAAO,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAC3C,IAAG,IAAI,EAAE;YACP,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;YAE3C,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,aAAa,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;gBAC7C,MAAM,IAAI,GAAG,aAAa,CAAC,CAAC,CAAC,CAAC;gBAC9B,IAAI,IAAI,CAAC,QAAQ,KAAK,qBAAqB,EAAE;oBAC3C,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;wBAClE,MAAM,IAAI,KAAK,CAAC,kEAAkE,CAAC,CAAC;qBACrF;iBACF;aACF;SACF;KACF;IAED,MAAM;QACJ,QACE,0EAAgB,4BAA4B,IAC1C,2DAAI,KAAK,EAAC,YAAY,IACpB,8DAAQ,CACL,CACD,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/breadcrumb/breadcrumb.scss?tag=ifx-breadcrumb&encapsulation=shadow","src/components/breadcrumb/breadcrumb.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: flex;\n}\n\n.breadcrumb {\n list-style: none;\n padding: 0px;\n margin: 0px;\n display: flex;\n flex-direction: row;\n font-family: var(--ifx-font-family);\n font-size: tokens.$ifxFontSizeS;\n align-items: flex-start;\n //gap: tokens.$ifxSpace200; //this is where the gap comes from\n\n}\n\n// .separator {\n// color: tokens.$ifxColorEngineering300;\n// margin: 0 16px;\n// }","import { Component, h, Element } from '@stencil/core';\n\n@Component({\n tag: 'ifx-breadcrumb',\n styleUrl: 'breadcrumb.scss',\n shadow: true\n})\nexport class Breadcrumb {\n @Element() el;\n\n componentDidLoad() {\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"],"version":3}

package/dist/components/ifx-chip-item.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { C as ChipItem, d as defineCustomElement$1 } from './p-23cdd5a7.js';
+import { C as ChipItem, d as defineCustomElement$1 } from './p-7b5e297f.js';
 const IfxChipItem = ChipItem;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ifx-chip.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { C as Chip, d as defineCustomElement$1 } from './p-184f1004.js';
+import { C as Chip, d as defineCustomElement$1 } from './p-793d89e7.js';
 const IfxChip = Chip;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ifx-faq.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h } from './p-68d90201.js';
-import { d as defineCustomElement$4 } from './p-094bb435.js';
-import { d as defineCustomElement$3 } from './p-b2439194.js';
+import { d as defineCustomElement$4 } from './p-3baaa460.js';
+import { d as defineCustomElement$3 } from './p-053d42ef.js';
 import { d as defineCustomElement$2 } from './p-7e430b83.js';
 const faqCss = ".container{padding-top:10px}";

package/dist/components/ifx-modal.js CHANGED Viewed

@@ -154,8 +154,8 @@ const IfxModal$1 = /*@__PURE__*/ proxyCustomElement(class IfxModal extends H {
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.ifxModalOpen = createEvent(this, "ifxModalOpen", 7);
-        this.ifxModalClose = createEvent(this, "ifxModalClose", 7);
+        this.ifxOpen = createEvent(this, "ifxOpen", 7);
+        this.ifxClose = createEvent(this, "ifxClose", 7);
         this.focusableElements = [];
         this.handleTopFocus = () => {
             this.attemptFocus(this.getLastFocusableElement());
@@ -219,12 +219,12 @@ const IfxModal$1 = /*@__PURE__*/ proxyCustomElement(class IfxModal extends H {
                     (_a = this.getLastFocusableElement()) === null || _a === void 0 ? void 0 : _a.focus();
                     (_b = this.getLastFocusableElement()) === null || _b === void 0 ? void 0 : _b.blur();
                 }, 0);
-                this.ifxModalOpen.emit();
+                this.ifxOpen.emit();
             });
             this.hostElement.addEventListener('keydown', this.handleKeypress);
         }
         catch (err) {
-            this.ifxModalOpen.emit();
+            this.ifxOpen.emit();
         }
     }
     close() {
@@ -234,13 +234,13 @@ const IfxModal$1 = /*@__PURE__*/ proxyCustomElement(class IfxModal extends H {
             });
             anim.addEventListener('finish', () => {
                 this.showModal = false;
-                this.ifxModalClose.emit();
+                this.ifxClose.emit();
             });
             this.hostElement.removeEventListener('keydown', this.handleKeypress);
         }
         catch (err) {
             this.showModal = false;
-            this.ifxModalClose.emit();
+            this.ifxClose.emit();
         }
     }
     doBeforeClose(trigger) {
@@ -275,8 +275,8 @@ const IfxModal$1 = /*@__PURE__*/ proxyCustomElement(class IfxModal extends H {
     }
     render() {
         const isAlertVariant = this.variant !== 'default';
-        return (h(Host, { key: '622de26c143196380000861b977a483595799667' }, h("div", { key: '62e5820014cbf03a4cda7d39dd8e9f7d58d81635', ref: (el) => (this.modalContainer = el), class: `modal-container ${this.showModal ? 'open' : ''}` }, h("div", { key: 'e023841191ff25390e9b5f8b24562f8ec22eb9af', class: "modal-overlay", onClick: () => this.handleOverlayClick() }), h("div", { key: '10d3e8232f6bc52e6bb337621fe53c96265a6b84', "data-focus-trap-edge": true, onFocus: this.handleTopFocus, tabindex: "0" }), h("div", { key: '83dbaf46f8461430da29f4ec0de615bae86fc1c2', class: `modal-content-container ${this.size}`, role: "dialog", "aria-modal": "true", "aria-label": this.caption }, isAlertVariant ? (h("div", { class: `modal-icon-container ${this.variant === 'alert-brand' ? '' : 'danger'}` }, this.alertIcon ? h("ifx-icon", { icon: this.alertIcon }) : null)) : null, h("div", { key: '080b7681bca959116bd2c48741a5fd6a4dc97cd8', class: "modal-content" }, h("div", { key: '847772a8f8736914887a869ae7eabd443266ca4e', class: "modal-header" }, h("h2", { key: '0ac26f87449e72c39afa3f672ae4c2f44ee4465f', class: "modal-caption" }, this.caption), this.showCloseButton &&
-            h("ifx-icon-button", { key: 'dba0bc92c5bb0a695f9449bf146933529da935de', class: 'modal-close-button', ref: (el) => (this.closeButton = el), icon: "cross-24", variant: "tertiary", onClick: () => this.doBeforeClose('CLOSE_BUTTON') })), h("div", { key: '571fca3750ca7df83c0c834e235674639d5e88a7', class: "modal-body" }, h("slot", { key: 'b7008875ccc46abe0b06d7f10dcc25a6d257ffdf', name: "content" /*onSlotchange={() => console.log('slots children modified')}*/ })), h("div", { key: 'f6639e282e3f856d648847c91752a7fca3fc3505', class: `modal-footer ${this.slotButtonsPresent ? 'buttons-present' : ''}` }, h("slot", { key: 'd12f3e70c2ba8f3ae52e1ec3087ea6dc916c9e92', name: "buttons", onSlotchange: (e) => this.handleButtonsSlotChange(e) })))), h("div", { key: '05e2615fda33ac19d61f1845d3df042642634347', "data-focus-trap-edge": true, onFocus: this.handleBottomFocus, tabindex: "0" }))));
+        return (h(Host, { key: '38194353600e6e6ba689ff3c3bec631624c12f24' }, h("div", { key: 'f08db61f400c4af5d0384dc996ff47630537ab53', ref: (el) => (this.modalContainer = el), class: `modal-container ${this.showModal ? 'open' : ''}` }, h("div", { key: '0f80cf4b8f04c46df7ccd8f3cff9fdeb4171cf90', class: "modal-overlay", onClick: () => this.handleOverlayClick() }), h("div", { key: '5fe062d671589f423ef9bbd8e485f4e345e2a7a9', "data-focus-trap-edge": true, onFocus: this.handleTopFocus, tabindex: "0" }), h("div", { key: 'b4bd6f3cc799ed24e5eb4736b3d6f9b0d69e408c', class: `modal-content-container ${this.size}`, role: "dialog", "aria-modal": "true", "aria-label": this.caption }, isAlertVariant ? (h("div", { class: `modal-icon-container ${this.variant === 'alert-brand' ? '' : 'danger'}` }, this.alertIcon ? h("ifx-icon", { icon: this.alertIcon }) : null)) : null, h("div", { key: '09f8862f88cde0d410b50da912563db79e812f8d', class: "modal-content" }, h("div", { key: '6770fefb279be63b37179a6e531214a94a43df41', class: "modal-header" }, h("h2", { key: 'babc6449e513fc3ef8513ef98fa192393b32918c', class: "modal-caption" }, this.caption), this.showCloseButton &&
+            h("ifx-icon-button", { key: '6d7fe6a29c39a3c5e3662107f78ca5768ac3ce00', class: 'modal-close-button', ref: (el) => (this.closeButton = el), icon: "cross-24", variant: "tertiary", onClick: () => this.doBeforeClose('CLOSE_BUTTON') })), h("div", { key: '0488350e36fd845481e2bb779e7b54484dd9e070', class: "modal-body" }, h("slot", { key: '269d38f446c6d3d80f89538b57256e19bcdf871d', name: "content" /*onSlotchange={() => console.log('slots children modified')}*/ })), h("div", { key: 'cbf98594014a535f7f8e08e59af6600f70a24350', class: `modal-footer ${this.slotButtonsPresent ? 'buttons-present' : ''}` }, h("slot", { key: '08f41c2265ec73b466ce8c666d1d653aa2d6e114', name: "buttons", onSlotchange: (e) => this.handleButtonsSlotChange(e) })))), h("div", { key: 'a4d68099d24172497f3e5e20abb44a9d7279b236', "data-focus-trap-edge": true, onFocus: this.handleBottomFocus, tabindex: "0" }))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/dist/components/ifx-modal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ifx-modal.js","mappings":"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","names":["IfxModal"],"sources":["src/global/utils/focus-trap.ts","src/global/utils/animation.ts","src/components/modal/modal.scss?tag=ifx-modal&encapsulation=shadow","src/components/modal/modal.tsx"],"sourcesContent":["/*\n Copy/pasted from https://github.com/andreasbm/focus-trap\n /\n\n/\n Traverses the slots of the open shadowroots and returns all children matching the query.\n * We need to traverse each child-depth one at a time because if an element should be skipped\n * (for example because it is hidden) we need to skip all of it's children. If we use querySelectorAll(\"\")\n the information of whether the children is within a hidden parent is lost.\n * @param {ShadowRoot \| HTMLElement} root\n * @param skipNode\n * @param isMatch\n * @param {number} maxDepth\n * @param {number} depth\n * @returns {HTMLElement[]}\n /\nexport function queryShadowRoot(\n root: ShadowRoot \| HTMLElement,\n skipNode: ($elem: HTMLElement) => boolean,\n isMatch: ($elem: HTMLElement) => boolean,\n maxDepth: number = 20,\n depth: number = 0\n): HTMLElement[] {\n const matches: HTMLElement[] = [];\n\n // If the depth is above the max depth, abort the searching here.\n if (depth >= maxDepth) {\n return matches;\n }\n\n // Traverses a slot element\n const traverseSlot = ($slot: HTMLSlotElement) => {\n // Only check nodes that are of the type Node.ELEMENT_NODE\n // Read more here https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType\n const assignedNodes = $slot\n .assignedNodes()\n .filter((node) => node.nodeType === 1);\n if (assignedNodes.length > 0) {\n const $slotParent = assignedNodes[0].parentElement!;\n return queryShadowRoot(\n $slotParent,\n skipNode,\n isMatch,\n maxDepth,\n depth + 1\n );\n }\n\n return [];\n };\n\n // Go through each child and continue the traversing if necessary\n // Even though the typing says that children can't be undefined, Edge 15 sometimes gives an undefined value.\n // Therefore we fallback to an empty array if it is undefined.\n const children = Array.from(root.children \|\| []) as HTMLElement[];\n for (const $child of children) {\n // Check if the element and its descendants should be skipped\n if (skipNode($child)) {\n // console.log('-- SKIP', $child);\n continue;\n }\n\n // console.log('$child', $child);\n\n // If the element matches we always add it\n if (isMatch($child)) {\n matches.push($child);\n }\n\n if ($child.shadowRoot != null) {\n // If the element has a shadow root we need to traverse it\n matches.push(\n ...queryShadowRoot(\n $child.shadowRoot,\n skipNode,\n isMatch,\n maxDepth,\n depth + 1\n )\n );\n } else if ($child.tagName === 'SLOT') {\n // If the child is a slot we need to traverse each assigned node\n matches.push(...traverseSlot($child as HTMLSlotElement));\n } else {\n // Traverse the children of the element\n matches.push(\n ...queryShadowRoot($child, skipNode, isMatch, maxDepth, depth + 1)\n );\n }\n }\n\n return matches;\n}\n\n/\n Returns whether the element is hidden.\n * @param $elem\n /\nexport function isHidden($elem: HTMLElement): boolean {\n return (\n $elem.hasAttribute('hidden') \|\|\n ($elem.hasAttribute('aria-hidden') &&\n $elem.getAttribute('aria-hidden') !== 'false') \|\|\n // A quick and dirty way to check whether the element is hidden.\n // For a more fine-grained check we could use \"window.getComputedStyle\" but we don't because of bad performance.\n // If the element has visibility set to \"hidden\" or \"collapse\", display set to \"none\" or opacity set to \"0\" through CSS\n // we won't be able to catch it here. We accept it due to the huge performance benefits.\n $elem.style.display === `none` \|\|\n $elem.style.opacity === `0` \|\|\n $elem.style.visibility === `hidden` \|\|\n $elem.style.visibility === `collapse`\n );\n\n // If offsetParent is null we can assume that the element is hidden\n // https://stackoverflow.com/questions/306305/what-would-make-offsetparent-null\n // \|\| $elem.offsetParent == null;\n}\n\n/\n Returns whether the element is disabled.\n * @param $elem\n /\nexport function isDisabled($elem: HTMLElement): boolean {\n return (\n $elem.hasAttribute('disabled') \|\|\n ($elem.hasAttribute('aria-disabled') &&\n $elem.getAttribute('aria-disabled') !== 'false')\n );\n}\n\n/\n Determines whether an element is focusable.\n * Read more here: https://stackoverflow.com/questions/1599660/which-html-elements-can-receive-focus/1600194#1600194\n * Or here: https://stackoverflow.com/questions/18261595/how-to-check-if-a-dom-element-is-focusable\n * @param $elem\n /\nexport function isFocusable($elem: HTMLElement): boolean {\n // Discard elements that are removed from the tab order.\n if (\n $elem.getAttribute('tabindex') === '-1' \|\|\n isHidden($elem) \|\|\n isDisabled($elem)\n ) {\n return false;\n }\n\n return (\n // At this point we know that the element can have focus (eg. won't be -1) if the tabindex attribute exists\n $elem.hasAttribute('tabindex') \|\|\n // Anchor tags or area tags with a href set\n (($elem instanceof HTMLAnchorElement \|\| $elem instanceof HTMLAreaElement) &&\n $elem.hasAttribute('href')) \|\|\n // Form elements which are not disabled\n $elem instanceof HTMLButtonElement \|\|\n $elem instanceof HTMLInputElement \|\|\n $elem instanceof HTMLTextAreaElement \|\|\n $elem instanceof HTMLSelectElement \|\|\n // IFrames\n $elem instanceof HTMLIFrameElement\n );\n}","export function animationTo(\n element: HTMLElement,\n keyframes: Keyframe \| Keyframe[],\n options?: KeyframeAnimationOptions\n) {\n const animated = element.animate(keyframes, { ...options, fill: 'both' });\n animated.addEventListener('finish', () => {\n // @ts-ignore\n animated.commitStyles();\n animated.cancel();\n });\n\n return animated;\n}\n\nconst keyframeDefaults = {\n easing: 'cubic-bezier(0.390, 0.575, 0.565, 1.000)',\n};\n\nexport const KEYFRAMES = {\n fadeIn: [\n {\n offset: 0,\n ...keyframeDefaults,\n opacity: 0,\n },\n {\n offset: 1,\n ...keyframeDefaults,\n opacity: 1,\n },\n ],\n fadeOut: [\n {\n offset: 0,\n ...keyframeDefaults,\n opacity: 1,\n },\n {\n offset: 1,\n ...keyframeDefaults,\n opacity: 0,\n },\n ],\n};","@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: block;\n}\n\n.modal-container {\n display: none;\n justify-content: center;\n align-items: center;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 1060;\n overflow-y: auto;\n font-family: var(--ifx-font-family);\n\n}\n\n.modal-container.open {\n display: flex;\n}\n\n.modal-overlay {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: tokens.$ifxColorBaseBlack;\n opacity: 0.5;\n z-index: 0;\n}\n\n.modal-content-container {\n position: absolute;\n display: flex;\n justify-content: center;\n width: 90%;\n min-height: 218px;\n background-color: #fff;\n border-radius: tokens.$ifxBorderRadiusNone;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n overflow: hidden;\n box-sizing: border-box;\n align-items: stretch;\n}\n\n/ Add desktop size here /\n@media screen and (min-width: 768px) {\n .modal-content-container {\n width: 540px;\n min-height: 132px;\n\n &.m,\n &.l,\n &.s {\n width: 90%;\n }\n }\n}\n\n@media screen and (min-width: 1024px) {\n .modal-content-container {\n\n &.s {\n width: 47vw;\n }\n\n &.m {\n width: 63vw;\n }\n\n &.l {\n width: 80%;\n }\n }\n}\n\n.modal-content {\n display: flex;\n flex-direction: column;\n width: 100%;\n max-height: 90vh;\n}\n\n.modal-icon-container {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n background-color: tokens.$ifxColorOcean500;\n align-self: stretch;\n\n &.danger {\n background-color: tokens.$ifxColorRed500;\n }\n\n & ifx-icon {\n color: tokens.$ifxColorBaseWhite;\n }\n}\n\n.modal-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 24px;\n min-height: 76px;\n max-height: 105px;\n box-sizing: border-box;\n border-radius: 1px 1px 0px 0px;\n border-bottom: 1px solid tokens.$ifxColorEngineering200;\n}\n\n.modal-caption {\n max-height: 56px;\n display: -webkit-box;\n overflow: hidden;\n white-space: pre-wrap;\n word-wrap: break-word;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical; \n}\n\n.modal-header h2 {\n margin: 0;\n font-weight: tokens.$ifxFontWeightSemibold;\n font-size: tokens.$ifxFontSizeXl;\n line-height: 28px;\n}\n\n.modal-header button {\n background: none;\n border: none;\n font-size: 1.5em;\n padding: 0;\n cursor: pointer;\n}\n\n.modal-close-button {\n align-self: flex-start;\n margin-right: -8px;\n}\n\n.modal-body {\n padding: 16px 24px;\n min-height: 56px;\n box-sizing: border-box;\n flex: 1;\n overflow-y: auto;\n}\n\n.modal-footer.buttons-present ::slotted(){\n display: flex;\n justify-content: flex-end;\n gap: 16px;\n padding: 16px 24px 32px 16px\n}\n\n.modal-border {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n font-size: 1.5em;\n flex-grow: 1;\n\n &.primary {\n background-color: tokens.$ifxColorOcean500;\n }\n\n &.secondary {\n background-color: tokens.$ifxColorEngineering500;\n }\n\n &.danger {\n background-color: tokens.$ifxColorRed500;\n }\n\n &.success {\n background-color: tokens.$ifxColorGreen500;\n }\n\n &.warning {\n background-color: tokens.$ifxColorOrange500;\n }\n\n &.orange {\n background-color: tokens.$ifxColorOrange500;\n }\n\n &.ocean {\n background-color: tokens.$ifxColorOcean500;\n }\n\n &.grey {\n background-color: tokens.$ifxColorEngineering500;\n }\n\n &.grey-200 {\n background-color: tokens.$ifxColorEngineering200;\n }\n\n &.red {\n background-color: tokens.$ifxColorRed500;\n }\n\n &.green {\n background-color: tokens.$ifxColorGreen500;\n }\n\n &.berry {\n background-color: tokens.$ifxColorBerry500;\n }\n}","import { Component, Prop, Element, State, Event, Host, EventEmitter, h, Watch } from '@stencil/core';\nimport { queryShadowRoot, isHidden, isFocusable } from '../../global/utils/focus-trap';\nimport { animationTo, KEYFRAMES } from '../../global/utils/animation';\n \n\ntype CloseEventTrigger = 'CLOSE_BUTTON' \| 'ESCAPE_KEY' \| 'BACKDROP';\n\nexport interface BeforeCloseEventDetail {\n trigger: CloseEventTrigger;\n}\n@Component({\n tag: 'ifx-modal',\n styleUrl: 'modal.scss',\n shadow: true\n})\nexport class IfxModal {\n @Prop({ reflect: true, mutable: true }) opened?: boolean = false;\n @State() showModal: boolean = this.opened \|\| false;\n\n @Prop() caption: string = 'Modal Title';\n @Prop() closeOnOverlayClick: boolean = true;\n\n @Event() ifxModalOpen: EventEmitter;\n @Event() ifxModalClose: EventEmitter;\n\n @Prop() variant: 'default' \| 'alert-brand' \| 'alert-danger' = 'default';\n \n @Prop() size: 's' \| 'm' \| 'l' = 's';\n\n @Prop() alertIcon: string = '';\n @Prop() okButtonLabel: string = 'OK';\n @Prop() cancelButtonLabel: string = 'Cancel';\n @Element() hostElement: HTMLElement;\n\n @State() slotButtonsPresent: boolean = false;\n\n @Prop() showCloseButton: boolean = true;\n\n private modalContainer: HTMLElement;\n private focusableElements: HTMLElement[] = [];\n private closeButton: HTMLButtonElement \| HTMLIfxIconButtonElement;\n\n componentDidLoad() {\n // Query all focusable elements and store them in `focusableElements`.\n // Needed for the \"focus trap\" functionality.\n this.focusableElements = queryShadowRoot(\n this.hostElement.shadowRoot,\n (el) => isHidden(el) \|\| el.matches('[data-focus-trap-edge]'),\n isFocusable\n );\n\n }\n\n getFirstFocusableElement(): HTMLElement \| null {\n return this.focusableElements[0];\n }\n\n getLastFocusableElement(): HTMLElement \| null {\n return this.focusableElements[this.focusableElements.length - 1];\n }\n\n handleTopFocus = () => {\n this.attemptFocus(this.getLastFocusableElement());\n };\n\n handleBottomFocus = () => {\n this.attemptFocus(this.getFirstFocusableElement());\n };\n\n\n attemptFocus(element: HTMLElement \| null) {\n if (element == null) {\n setTimeout(() => { //wait until DOM is fully loaded\n this.closeButton.focus();\n },);\n return;\n }\n\n setTimeout(() => { //wait until DOM is fully loaded\n element.focus();\n }, 0);\n }\n\n\n open() {\n this.showModal = true;\n try {\n const anim = animationTo(this.modalContainer, KEYFRAMES.fadeIn, {\n duration: 200,\n });\n anim.addEventListener('finish', () => {\n // Setting focus on last item and removing immediately\n // so, on tab press first element is focused\n setTimeout(() => {\n this.getLastFocusableElement()?.focus();\n this.getLastFocusableElement()?.blur();\n }, 0);\n\n this.ifxModalOpen.emit();\n });\n\n this.hostElement.addEventListener('keydown', this.handleKeypress);\n } catch (err) {\n this.ifxModalOpen.emit();\n\n }\n\n\n }\n\n close() {\n try {\n const anim = animationTo(this.modalContainer, KEYFRAMES.fadeOut, {\n duration: 200,\n });\n anim.addEventListener('finish', () => {\n this.showModal = false;\n this.ifxModalClose.emit();\n });\n this.hostElement.removeEventListener('keydown', this.handleKeypress);\n } catch (err) {\n this.showModal = false;\n this.ifxModalClose.emit();\n }\n }\n\n handleKeypress = (event: KeyboardEvent) => {\n if (!this.showModal) {\n return;\n }\n if (event.key === 'Escape') {\n this.doBeforeClose('ESCAPE_KEY');\n }\n };\n\n\n doBeforeClose(trigger: CloseEventTrigger) {\n const triggers = [];\n triggers.push(trigger);\n const prevented = triggers.some((event) => event.defaultPrevented);\n if (!prevented) {\n this.opened = false;\n }\n }\n\n\n\n @Watch('opened')\n openedChanged(newValue) {\n if (newValue === true) {\n this.open();\n } else {\n this.close()\n }\n }\n\n\n handleOverlayClick() {\n if (this.closeOnOverlayClick) {\n this.doBeforeClose('BACKDROP')\n }\n }\n\n\n handleButtonsSlotChange(e) {\n if(e.currentTarget.assignedElements()[0]?.childElementCount > 0) {\n this.slotButtonsPresent = true;\n }else{\n this.slotButtonsPresent = false;\n }\n }\n\n\n render() {\n const isAlertVariant = this.variant !== 'default';\n return (\n <Host>\n <div\n ref={(el) => (this.modalContainer = el)}\n class={`modal-container ${this.showModal ? 'open' : ''}`}\n >\n <div\n class=\"modal-overlay\"\n onClick={() => this.handleOverlayClick()}\n ></div>\n <div\n data-focus-trap-edge\n onFocus={this.handleTopFocus}\n tabindex=\"0\"\n ></div>\n <div\n class={`modal-content-container ${this.size}`}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-label={this.caption}>\n {isAlertVariant ? (\n <div class={`modal-icon-container ${this.variant === 'alert-brand' ? '' : 'danger'}`}>\n {this.alertIcon ? <ifx-icon icon={this.alertIcon} /> : null}\n </div>\n ) : null}\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <h2 class=\"modal-caption\">{this.caption}</h2>\n { \n this.showCloseButton && \n <ifx-icon-button class = 'modal-close-button' ref={(el) => (this.closeButton = el)} icon=\"cross-24\" variant=\"tertiary\" onClick={() => this.doBeforeClose('CLOSE_BUTTON') }>\n </ifx-icon-button>\n }\n </div>\n <div class=\"modal-body\">\n <slot name=\"content\" /onSlotchange={() => console.log('slots children modified')}/ />\n </div>\n <div class={`modal-footer ${this.slotButtonsPresent ? 'buttons-present' : ''}`}>\n <slot name=\"buttons\" onSlotchange={(e)=>this.handleButtonsSlotChange(e)}>\n </slot>\n </div>\n </div>\n </div>\n <div\n data-focus-trap-edge\n onFocus={this.handleBottomFocus}\n tabindex=\"0\"\n ></div>\n </div>\n </Host>\n\n );\n }\n}"],"version":3}
1	+ {"file":"ifx-modal.js","mappings":"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","names":["IfxModal"],"sources":["src/global/utils/focus-trap.ts","src/global/utils/animation.ts","src/components/modal/modal.scss?tag=ifx-modal&encapsulation=shadow","src/components/modal/modal.tsx"],"sourcesContent":["/*\n Copy/pasted from https://github.com/andreasbm/focus-trap\n /\n\n/\n Traverses the slots of the open shadowroots and returns all children matching the query.\n * We need to traverse each child-depth one at a time because if an element should be skipped\n * (for example because it is hidden) we need to skip all of it's children. If we use querySelectorAll(\"\")\n the information of whether the children is within a hidden parent is lost.\n * @param {ShadowRoot \| HTMLElement} root\n * @param skipNode\n * @param isMatch\n * @param {number} maxDepth\n * @param {number} depth\n * @returns {HTMLElement[]}\n /\nexport function queryShadowRoot(\n root: ShadowRoot \| HTMLElement,\n skipNode: ($elem: HTMLElement) => boolean,\n isMatch: ($elem: HTMLElement) => boolean,\n maxDepth: number = 20,\n depth: number = 0\n): HTMLElement[] {\n const matches: HTMLElement[] = [];\n\n // If the depth is above the max depth, abort the searching here.\n if (depth >= maxDepth) {\n return matches;\n }\n\n // Traverses a slot element\n const traverseSlot = ($slot: HTMLSlotElement) => {\n // Only check nodes that are of the type Node.ELEMENT_NODE\n // Read more here https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType\n const assignedNodes = $slot\n .assignedNodes()\n .filter((node) => node.nodeType === 1);\n if (assignedNodes.length > 0) {\n const $slotParent = assignedNodes[0].parentElement!;\n return queryShadowRoot(\n $slotParent,\n skipNode,\n isMatch,\n maxDepth,\n depth + 1\n );\n }\n\n return [];\n };\n\n // Go through each child and continue the traversing if necessary\n // Even though the typing says that children can't be undefined, Edge 15 sometimes gives an undefined value.\n // Therefore we fallback to an empty array if it is undefined.\n const children = Array.from(root.children \|\| []) as HTMLElement[];\n for (const $child of children) {\n // Check if the element and its descendants should be skipped\n if (skipNode($child)) {\n // console.log('-- SKIP', $child);\n continue;\n }\n\n // console.log('$child', $child);\n\n // If the element matches we always add it\n if (isMatch($child)) {\n matches.push($child);\n }\n\n if ($child.shadowRoot != null) {\n // If the element has a shadow root we need to traverse it\n matches.push(\n ...queryShadowRoot(\n $child.shadowRoot,\n skipNode,\n isMatch,\n maxDepth,\n depth + 1\n )\n );\n } else if ($child.tagName === 'SLOT') {\n // If the child is a slot we need to traverse each assigned node\n matches.push(...traverseSlot($child as HTMLSlotElement));\n } else {\n // Traverse the children of the element\n matches.push(\n ...queryShadowRoot($child, skipNode, isMatch, maxDepth, depth + 1)\n );\n }\n }\n\n return matches;\n}\n\n/\n Returns whether the element is hidden.\n * @param $elem\n /\nexport function isHidden($elem: HTMLElement): boolean {\n return (\n $elem.hasAttribute('hidden') \|\|\n ($elem.hasAttribute('aria-hidden') &&\n $elem.getAttribute('aria-hidden') !== 'false') \|\|\n // A quick and dirty way to check whether the element is hidden.\n // For a more fine-grained check we could use \"window.getComputedStyle\" but we don't because of bad performance.\n // If the element has visibility set to \"hidden\" or \"collapse\", display set to \"none\" or opacity set to \"0\" through CSS\n // we won't be able to catch it here. We accept it due to the huge performance benefits.\n $elem.style.display === `none` \|\|\n $elem.style.opacity === `0` \|\|\n $elem.style.visibility === `hidden` \|\|\n $elem.style.visibility === `collapse`\n );\n\n // If offsetParent is null we can assume that the element is hidden\n // https://stackoverflow.com/questions/306305/what-would-make-offsetparent-null\n // \|\| $elem.offsetParent == null;\n}\n\n/\n Returns whether the element is disabled.\n * @param $elem\n /\nexport function isDisabled($elem: HTMLElement): boolean {\n return (\n $elem.hasAttribute('disabled') \|\|\n ($elem.hasAttribute('aria-disabled') &&\n $elem.getAttribute('aria-disabled') !== 'false')\n );\n}\n\n/\n Determines whether an element is focusable.\n * Read more here: https://stackoverflow.com/questions/1599660/which-html-elements-can-receive-focus/1600194#1600194\n * Or here: https://stackoverflow.com/questions/18261595/how-to-check-if-a-dom-element-is-focusable\n * @param $elem\n /\nexport function isFocusable($elem: HTMLElement): boolean {\n // Discard elements that are removed from the tab order.\n if (\n $elem.getAttribute('tabindex') === '-1' \|\|\n isHidden($elem) \|\|\n isDisabled($elem)\n ) {\n return false;\n }\n\n return (\n // At this point we know that the element can have focus (eg. won't be -1) if the tabindex attribute exists\n $elem.hasAttribute('tabindex') \|\|\n // Anchor tags or area tags with a href set\n (($elem instanceof HTMLAnchorElement \|\| $elem instanceof HTMLAreaElement) &&\n $elem.hasAttribute('href')) \|\|\n // Form elements which are not disabled\n $elem instanceof HTMLButtonElement \|\|\n $elem instanceof HTMLInputElement \|\|\n $elem instanceof HTMLTextAreaElement \|\|\n $elem instanceof HTMLSelectElement \|\|\n // IFrames\n $elem instanceof HTMLIFrameElement\n );\n}","export function animationTo(\n element: HTMLElement,\n keyframes: Keyframe \| Keyframe[],\n options?: KeyframeAnimationOptions\n) {\n const animated = element.animate(keyframes, { ...options, fill: 'both' });\n animated.addEventListener('finish', () => {\n // @ts-ignore\n animated.commitStyles();\n animated.cancel();\n });\n\n return animated;\n}\n\nconst keyframeDefaults = {\n easing: 'cubic-bezier(0.390, 0.575, 0.565, 1.000)',\n};\n\nexport const KEYFRAMES = {\n fadeIn: [\n {\n offset: 0,\n ...keyframeDefaults,\n opacity: 0,\n },\n {\n offset: 1,\n ...keyframeDefaults,\n opacity: 1,\n },\n ],\n fadeOut: [\n {\n offset: 0,\n ...keyframeDefaults,\n opacity: 1,\n },\n {\n offset: 1,\n ...keyframeDefaults,\n opacity: 0,\n },\n ],\n};","@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: block;\n}\n\n.modal-container {\n display: none;\n justify-content: center;\n align-items: center;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 1060;\n overflow-y: auto;\n font-family: var(--ifx-font-family);\n\n}\n\n.modal-container.open {\n display: flex;\n}\n\n.modal-overlay {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: tokens.$ifxColorBaseBlack;\n opacity: 0.5;\n z-index: 0;\n}\n\n.modal-content-container {\n position: absolute;\n display: flex;\n justify-content: center;\n width: 90%;\n min-height: 218px;\n background-color: #fff;\n border-radius: tokens.$ifxBorderRadiusNone;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n overflow: hidden;\n box-sizing: border-box;\n align-items: stretch;\n}\n\n/ Add desktop size here /\n@media screen and (min-width: 768px) {\n .modal-content-container {\n width: 540px;\n min-height: 132px;\n\n &.m,\n &.l,\n &.s {\n width: 90%;\n }\n }\n}\n\n@media screen and (min-width: 1024px) {\n .modal-content-container {\n\n &.s {\n width: 47vw;\n }\n\n &.m {\n width: 63vw;\n }\n\n &.l {\n width: 80%;\n }\n }\n}\n\n.modal-content {\n display: flex;\n flex-direction: column;\n width: 100%;\n max-height: 90vh;\n}\n\n.modal-icon-container {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n background-color: tokens.$ifxColorOcean500;\n align-self: stretch;\n\n &.danger {\n background-color: tokens.$ifxColorRed500;\n }\n\n & ifx-icon {\n color: tokens.$ifxColorBaseWhite;\n }\n}\n\n.modal-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 24px;\n min-height: 76px;\n max-height: 105px;\n box-sizing: border-box;\n border-radius: 1px 1px 0px 0px;\n border-bottom: 1px solid tokens.$ifxColorEngineering200;\n}\n\n.modal-caption {\n max-height: 56px;\n display: -webkit-box;\n overflow: hidden;\n white-space: pre-wrap;\n word-wrap: break-word;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical; \n}\n\n.modal-header h2 {\n margin: 0;\n font-weight: tokens.$ifxFontWeightSemibold;\n font-size: tokens.$ifxFontSizeXl;\n line-height: 28px;\n}\n\n.modal-header button {\n background: none;\n border: none;\n font-size: 1.5em;\n padding: 0;\n cursor: pointer;\n}\n\n.modal-close-button {\n align-self: flex-start;\n margin-right: -8px;\n}\n\n.modal-body {\n padding: 16px 24px;\n min-height: 56px;\n box-sizing: border-box;\n flex: 1;\n overflow-y: auto;\n}\n\n.modal-footer.buttons-present ::slotted(){\n display: flex;\n justify-content: flex-end;\n gap: 16px;\n padding: 16px 24px 32px 16px\n}\n\n.modal-border {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n font-size: 1.5em;\n flex-grow: 1;\n\n &.primary {\n background-color: tokens.$ifxColorOcean500;\n }\n\n &.secondary {\n background-color: tokens.$ifxColorEngineering500;\n }\n\n &.danger {\n background-color: tokens.$ifxColorRed500;\n }\n\n &.success {\n background-color: tokens.$ifxColorGreen500;\n }\n\n &.warning {\n background-color: tokens.$ifxColorOrange500;\n }\n\n &.orange {\n background-color: tokens.$ifxColorOrange500;\n }\n\n &.ocean {\n background-color: tokens.$ifxColorOcean500;\n }\n\n &.grey {\n background-color: tokens.$ifxColorEngineering500;\n }\n\n &.grey-200 {\n background-color: tokens.$ifxColorEngineering200;\n }\n\n &.red {\n background-color: tokens.$ifxColorRed500;\n }\n\n &.green {\n background-color: tokens.$ifxColorGreen500;\n }\n\n &.berry {\n background-color: tokens.$ifxColorBerry500;\n }\n}","import { Component, Prop, Element, State, Event, Host, EventEmitter, h, Watch } from '@stencil/core';\nimport { queryShadowRoot, isHidden, isFocusable } from '../../global/utils/focus-trap';\nimport { animationTo, KEYFRAMES } from '../../global/utils/animation';\n \n\ntype CloseEventTrigger = 'CLOSE_BUTTON' \| 'ESCAPE_KEY' \| 'BACKDROP';\n\nexport interface BeforeCloseEventDetail {\n trigger: CloseEventTrigger;\n}\n@Component({\n tag: 'ifx-modal',\n styleUrl: 'modal.scss',\n shadow: true\n})\nexport class IfxModal {\n @Prop({ reflect: true, mutable: true }) opened?: boolean = false;\n @State() showModal: boolean = this.opened \|\| false;\n\n @Prop() caption: string = 'Modal Title';\n @Prop() closeOnOverlayClick: boolean = true;\n\n @Event() ifxOpen: EventEmitter;\n @Event() ifxClose: EventEmitter;\n\n @Prop() variant: 'default' \| 'alert-brand' \| 'alert-danger' = 'default';\n \n @Prop() size: 's' \| 'm' \| 'l' = 's';\n\n @Prop() alertIcon: string = '';\n @Prop() okButtonLabel: string = 'OK';\n @Prop() cancelButtonLabel: string = 'Cancel';\n @Element() hostElement: HTMLElement;\n\n @State() slotButtonsPresent: boolean = false;\n\n @Prop() showCloseButton: boolean = true;\n\n private modalContainer: HTMLElement;\n private focusableElements: HTMLElement[] = [];\n private closeButton: HTMLButtonElement \| HTMLIfxIconButtonElement;\n\n componentDidLoad() {\n // Query all focusable elements and store them in `focusableElements`.\n // Needed for the \"focus trap\" functionality.\n this.focusableElements = queryShadowRoot(\n this.hostElement.shadowRoot,\n (el) => isHidden(el) \|\| el.matches('[data-focus-trap-edge]'),\n isFocusable\n );\n\n }\n\n getFirstFocusableElement(): HTMLElement \| null {\n return this.focusableElements[0];\n }\n\n getLastFocusableElement(): HTMLElement \| null {\n return this.focusableElements[this.focusableElements.length - 1];\n }\n\n handleTopFocus = () => {\n this.attemptFocus(this.getLastFocusableElement());\n };\n\n handleBottomFocus = () => {\n this.attemptFocus(this.getFirstFocusableElement());\n };\n\n\n attemptFocus(element: HTMLElement \| null) {\n if (element == null) {\n setTimeout(() => { //wait until DOM is fully loaded\n this.closeButton.focus();\n },);\n return;\n }\n\n setTimeout(() => { //wait until DOM is fully loaded\n element.focus();\n }, 0);\n }\n\n\n open() {\n this.showModal = true;\n try {\n const anim = animationTo(this.modalContainer, KEYFRAMES.fadeIn, {\n duration: 200,\n });\n anim.addEventListener('finish', () => {\n // Setting focus on last item and removing immediately\n // so, on tab press first element is focused\n setTimeout(() => {\n this.getLastFocusableElement()?.focus();\n this.getLastFocusableElement()?.blur();\n }, 0);\n\n this.ifxOpen.emit();\n });\n\n this.hostElement.addEventListener('keydown', this.handleKeypress);\n } catch (err) {\n this.ifxOpen.emit();\n\n }\n\n\n }\n\n close() {\n try {\n const anim = animationTo(this.modalContainer, KEYFRAMES.fadeOut, {\n duration: 200,\n });\n anim.addEventListener('finish', () => {\n this.showModal = false;\n this.ifxClose.emit();\n });\n this.hostElement.removeEventListener('keydown', this.handleKeypress);\n } catch (err) {\n this.showModal = false;\n this.ifxClose.emit();\n }\n }\n\n handleKeypress = (event: KeyboardEvent) => {\n if (!this.showModal) {\n return;\n }\n if (event.key === 'Escape') {\n this.doBeforeClose('ESCAPE_KEY');\n }\n };\n\n\n doBeforeClose(trigger: CloseEventTrigger) {\n const triggers = [];\n triggers.push(trigger);\n const prevented = triggers.some((event) => event.defaultPrevented);\n if (!prevented) {\n this.opened = false;\n }\n }\n\n\n\n @Watch('opened')\n openedChanged(newValue) {\n if (newValue === true) {\n this.open();\n } else {\n this.close()\n }\n }\n\n\n handleOverlayClick() {\n if (this.closeOnOverlayClick) {\n this.doBeforeClose('BACKDROP')\n }\n }\n\n\n handleButtonsSlotChange(e) {\n if(e.currentTarget.assignedElements()[0]?.childElementCount > 0) {\n this.slotButtonsPresent = true;\n }else{\n this.slotButtonsPresent = false;\n }\n }\n\n\n render() {\n const isAlertVariant = this.variant !== 'default';\n return (\n <Host>\n <div\n ref={(el) => (this.modalContainer = el)}\n class={`modal-container ${this.showModal ? 'open' : ''}`}\n >\n <div\n class=\"modal-overlay\"\n onClick={() => this.handleOverlayClick()}\n ></div>\n <div\n data-focus-trap-edge\n onFocus={this.handleTopFocus}\n tabindex=\"0\"\n ></div>\n <div\n class={`modal-content-container ${this.size}`}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-label={this.caption}>\n {isAlertVariant ? (\n <div class={`modal-icon-container ${this.variant === 'alert-brand' ? '' : 'danger'}`}>\n {this.alertIcon ? <ifx-icon icon={this.alertIcon} /> : null}\n </div>\n ) : null}\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <h2 class=\"modal-caption\">{this.caption}</h2>\n { \n this.showCloseButton && \n <ifx-icon-button class = 'modal-close-button' ref={(el) => (this.closeButton = el)} icon=\"cross-24\" variant=\"tertiary\" onClick={() => this.doBeforeClose('CLOSE_BUTTON') }>\n </ifx-icon-button>\n }\n </div>\n <div class=\"modal-body\">\n <slot name=\"content\" /onSlotchange={() => console.log('slots children modified')}/ />\n </div>\n <div class={`modal-footer ${this.slotButtonsPresent ? 'buttons-present' : ''}`}>\n <slot name=\"buttons\" onSlotchange={(e)=>this.handleButtonsSlotChange(e)}>\n </slot>\n </div>\n </div>\n </div>\n <div\n data-focus-trap-edge\n onFocus={this.handleBottomFocus}\n tabindex=\"0\"\n ></div>\n </div>\n </Host>\n\n );\n }\n}"],"version":3}

package/dist/components/ifx-multiselect.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { M as Multiselect, d as defineCustomElement$1 } from './p-04b73e62.js';
+import { M as Multiselect, d as defineCustomElement$1 } from './p-cf8fd0f4.js';
 const IfxMultiselect = Multiselect;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ifx-pagination.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { P as Pagination, d as defineCustomElement$1 } from './p-2f1e7628.js';
+import { P as Pagination, d as defineCustomElement$1 } from './p-b85fba0e.js';
 const IfxPagination = Pagination;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ifx-search-bar.js CHANGED Viewed

@@ -11,10 +11,10 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends H {
         this.__registerHost();
         this.__attachShadow();
         this.ifxInput = createEvent(this, "ifxInput", 7);
-        this.ifxSearchBarIsOpen = createEvent(this, "ifxSearchBarIsOpen", 7);
+        this.ifxOpen = createEvent(this, "ifxOpen", 7);
         this.handleCloseButton = () => {
             this.internalState = !this.internalState;
-            this.ifxSearchBarIsOpen.emit(this.internalState);
+            this.ifxOpen.emit(this.internalState);
         };
         this.handleFocus = () => {
             this.internalState = true;
@@ -26,7 +26,7 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends H {
         this.maxlength = undefined;
     }
     async onNavbarMobile() {
-        this.ifxSearchBarIsOpen.emit(false);
+        this.ifxOpen.emit(false);
         this.internalState = false;
     }
     handlePropChange() {
@@ -37,13 +37,13 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends H {
     }
     componentWillLoad() {
         this.setInitialState();
-        this.ifxSearchBarIsOpen.emit(this.internalState);
+        this.ifxOpen.emit(this.internalState);
     }
     handleInput(event) {
         this.value = event.detail;
     }
     render() {
-        return (h("div", { key: '80312faf68e6b0af2260c977d53f23b42067813f', "aria-label": 'a search bar', "aria-disabled": this.disabled, class: `search-bar ${this.internalState ? 'open' : 'closed'}` }, this.internalState ? (h("div", { class: "search-bar-wrapper" }, h("ifx-search-field", { disabled: this.disabled, value: this.value, maxlength: this.maxlength, onIfxInput: this.handleInput.bind(this) }, h("ifx-icon", { icon: "search-16", slot: "search-icon" })), h("a", { tabindex: "-1", href: 'javascript:void(0)', onClick: this.handleCloseButton }, "Close"))) : (h("div", { class: "search-bar__icon-wrapper", onClick: this.handleCloseButton }, h("ifx-icon", { icon: "search-16" })))));
+        return (h("div", { key: 'e1875ac2a7a96e59f77f3ecf7cc4079fe8509bf8', "aria-label": 'a search bar', "aria-disabled": this.disabled, class: `search-bar ${this.internalState ? 'open' : 'closed'}` }, this.internalState ? (h("div", { class: "search-bar-wrapper" }, h("ifx-search-field", { disabled: this.disabled, value: this.value, maxlength: this.maxlength, onIfxInput: this.handleInput.bind(this) }, h("ifx-icon", { icon: "search-16", slot: "search-icon" })), h("a", { tabindex: "-1", href: 'javascript:void(0)', onClick: this.handleCloseButton }, "Close"))) : (h("div", { class: "search-bar__icon-wrapper", onClick: this.handleCloseButton }, h("ifx-icon", { icon: "search-16" })))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/ifx-search-bar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ifx-search-bar.js","mappings":";;;;AAAA,MAAM,YAAY,GAAG,05BAA05B,CAAC;AACh7B,2BAAe,YAAY;;MCOd,SAAS;;;;;;;QAqBpB,sBAAiB,GAAG;YAClB,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC;YACzC,IAAI,CAAC,~~kBAAkB~~,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAA;~~SACjD~~,CAAA;QAkBD,gBAAW,GAAG;YACZ,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;SAC3B,CAAA;sBA3CyB,IAAI;wBACF,KAAK;;;;;IASjC,MAAM,cAAc;QAClB,IAAI,CAAC,~~kBAAkB~~,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;~~QACnC~~,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;KAC5B;IAGD,gBAAgB;QACd,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,MAAM,CAAC;KAClC;IAOD,eAAe;QACb,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,MAAM,CAAC;KAClC;IAID,iBAAiB;QACf,IAAI,CAAC,eAAe,EAAE,CAAC;QACvB,IAAI,CAAC,~~kBAAkB~~,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAA;~~KACjD~~;IAGD,WAAW,CAAC,KAAkB;QAC5B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC;KAC3B;IAOD,MAAM;QACJ,QACE,0EAAgB,cAAc,mBAAgB,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,cAAc,IAAI,CAAC,aAAa,GAAG,MAAM,GAAG,QAAQ,EAAE,IACvH,IAAI,CAAC,aAAa,IACjB,WAAK,KAAK,EAAC,oBAAoB,IAC7B,wBAAkB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,UAAU,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,IAC9H,gBAAU,IAAI,EAAC,WAAW,EAAC,IAAI,EAAC,aAAa,GAAY,CACxC,EAEnB,SAAG,QAAQ,EAAC,IAAI,EAAC,IAAI,EAAC,oBAAoB,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,YAAW,CACjF,KAEN,WAAK,KAAK,EAAC,0BAA0B,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,IACnE,gBAAU,IAAI,EAAC,WAAW,GAAY,CAClC,CACP,CACG,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/search-bar/search-bar.scss?tag=ifx-search-bar&encapsulation=shadow","src/components/search-bar/search-bar.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n width: 100%; //revert\n display: flex;\n}\n\n.search-bar {\n box-sizing: border-box;\n height: tokens.$ifxSize500;\n background-color: tokens.$ifxColorBaseWhite;\n display: flex;\n flex-direction: row;\n align-items: center;\n width: 100%;\n font-family: var(--ifx-font-family);\n\n &.closed {\n display: flex;\n width: auto;\n justify-content: flex-start;\n }\n\n & .search-bar-wrapper {\n display: flex;\n align-items: center;\n gap: tokens.$ifxSpace200;\n width: 100%;\n\n & a {\n text-decoration: none;\n font-size: tokens.$ifxFontSizeM;\n font-style: normal;\n font-weight: tokens.$ifxFontWeightSemibold;\n line-height: tokens.$ifxLineHeightM;\n color: tokens.$ifxColorOcean500;\n cursor: pointer;\n }\n\n & ifx-search-field {\n width: 100%;\n }\n }\n\n .search-bar__icon-wrapper {\n display: none;\n flex-direction: row;\n align-items: center;\n\n & ifx-icon:hover {\n cursor: pointer;\n }\n }\n\n &.closed {\n .search-bar__icon-wrapper {\n display: flex;\n }\n\n .search-bar-wrapper {\n display: none;\n }\n }\n}","import { Component, h, Prop, Event, EventEmitter, State, Watch, Element, Method } from '@stencil/core';\n \n\n@Component({\n tag: 'ifx-search-bar',\n styleUrl: 'search-bar.scss',\n shadow: true,\n})\nexport class SearchBar {\n @Prop() isOpen: boolean = true;\n @Prop() disabled: boolean = false;\n @State() internalState: boolean;\n @Prop({ mutable: true }) value: string;\n @Prop() maxlength?: number;\n @Event() ifxInput: EventEmitter;\n @Event() ~~ifxSearchBarIsOpen~~: EventEmitter;\n @Element() el;\n\n @Method()\n async onNavbarMobile() {\n this.~~ifxSearchBarIsOpen~~.emit(false)\n this.internalState = false;\n }\n\n @Watch('isOpen')\n handlePropChange() {\n this.internalState = this.isOpen;\n }\n\n handleCloseButton = () => {\n this.internalState = !this.internalState;\n this.~~ifxSearchBarIsOpen~~.emit(this.internalState)\n }\n\n setInitialState() {\n this.internalState = this.isOpen;\n }\n\n \n\n componentWillLoad() {\n this.setInitialState();\n this.~~ifxSearchBarIsOpen~~.emit(this.internalState)\n }\n\n\n handleInput(event: CustomEvent) {\n this.value = event.detail;\n }\n\n handleFocus = () => {\n this.internalState = true;\n }\n\n\n render() {\n return (\n <div aria-label='a search bar' aria-disabled={this.disabled} class={`search-bar ${this.internalState ? 'open' : 'closed'}`}>\n {this.internalState ? (\n <div class=\"search-bar-wrapper\">\n <ifx-search-field disabled={this.disabled} value={this.value} maxlength={this.maxlength} onIfxInput={this.handleInput.bind(this)}>\n <ifx-icon icon=\"search-16\" slot=\"search-icon\"></ifx-icon>\n </ifx-search-field>\n\n <a tabindex=\"-1\" href='javascript:void(0)' onClick={this.handleCloseButton}>Close</a>\n </div>\n ) : (\n <div class=\"search-bar__icon-wrapper\" onClick={this.handleCloseButton}>\n <ifx-icon icon=\"search-16\"></ifx-icon>\n </div>\n )}\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ifx-search-bar.js","mappings":";;;;AAAA,MAAM,YAAY,GAAG,05BAA05B,CAAC;AACh7B,2BAAe,YAAY;;MCOd,SAAS;;;;;;;QAqBpB,sBAAiB,GAAG;YAClB,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC;YACzC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAA;SACtC,CAAA;QAkBD,gBAAW,GAAG;YACZ,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;SAC3B,CAAA;sBA3CyB,IAAI;wBACF,KAAK;;;;;IASjC,MAAM,cAAc;QAClB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QACxB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;KAC5B;IAGD,gBAAgB;QACd,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,MAAM,CAAC;KAClC;IAOD,eAAe;QACb,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,MAAM,CAAC;KAClC;IAID,iBAAiB;QACf,IAAI,CAAC,eAAe,EAAE,CAAC;QACvB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAA;KACtC;IAGD,WAAW,CAAC,KAAkB;QAC5B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC;KAC3B;IAOD,MAAM;QACJ,QACE,0EAAgB,cAAc,mBAAgB,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,cAAc,IAAI,CAAC,aAAa,GAAG,MAAM,GAAG,QAAQ,EAAE,IACvH,IAAI,CAAC,aAAa,IACjB,WAAK,KAAK,EAAC,oBAAoB,IAC7B,wBAAkB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,UAAU,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,IAC9H,gBAAU,IAAI,EAAC,WAAW,EAAC,IAAI,EAAC,aAAa,GAAY,CACxC,EAEnB,SAAG,QAAQ,EAAC,IAAI,EAAC,IAAI,EAAC,oBAAoB,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,YAAW,CACjF,KAEN,WAAK,KAAK,EAAC,0BAA0B,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,IACnE,gBAAU,IAAI,EAAC,WAAW,GAAY,CAClC,CACP,CACG,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/search-bar/search-bar.scss?tag=ifx-search-bar&encapsulation=shadow","src/components/search-bar/search-bar.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n width: 100%; //revert\n display: flex;\n}\n\n.search-bar {\n box-sizing: border-box;\n height: tokens.$ifxSize500;\n background-color: tokens.$ifxColorBaseWhite;\n display: flex;\n flex-direction: row;\n align-items: center;\n width: 100%;\n font-family: var(--ifx-font-family);\n\n &.closed {\n display: flex;\n width: auto;\n justify-content: flex-start;\n }\n\n & .search-bar-wrapper {\n display: flex;\n align-items: center;\n gap: tokens.$ifxSpace200;\n width: 100%;\n\n & a {\n text-decoration: none;\n font-size: tokens.$ifxFontSizeM;\n font-style: normal;\n font-weight: tokens.$ifxFontWeightSemibold;\n line-height: tokens.$ifxLineHeightM;\n color: tokens.$ifxColorOcean500;\n cursor: pointer;\n }\n\n & ifx-search-field {\n width: 100%;\n }\n }\n\n .search-bar__icon-wrapper {\n display: none;\n flex-direction: row;\n align-items: center;\n\n & ifx-icon:hover {\n cursor: pointer;\n }\n }\n\n &.closed {\n .search-bar__icon-wrapper {\n display: flex;\n }\n\n .search-bar-wrapper {\n display: none;\n }\n }\n}","import { Component, h, Prop, Event, EventEmitter, State, Watch, Element, Method } from '@stencil/core';\n \n\n@Component({\n tag: 'ifx-search-bar',\n styleUrl: 'search-bar.scss',\n shadow: true,\n})\nexport class SearchBar {\n @Prop() isOpen: boolean = true;\n @Prop() disabled: boolean = false;\n @State() internalState: boolean;\n @Prop({ mutable: true }) value: string;\n @Prop() maxlength?: number;\n @Event() ifxInput: EventEmitter;\n @Event() ifxOpen: EventEmitter;\n @Element() el;\n\n @Method()\n async onNavbarMobile() {\n this.ifxOpen.emit(false)\n this.internalState = false;\n }\n\n @Watch('isOpen')\n handlePropChange() {\n this.internalState = this.isOpen;\n }\n\n handleCloseButton = () => {\n this.internalState = !this.internalState;\n this.ifxOpen.emit(this.internalState)\n }\n\n setInitialState() {\n this.internalState = this.isOpen;\n }\n\n \n\n componentWillLoad() {\n this.setInitialState();\n this.ifxOpen.emit(this.internalState)\n }\n\n\n handleInput(event: CustomEvent) {\n this.value = event.detail;\n }\n\n handleFocus = () => {\n this.internalState = true;\n }\n\n\n render() {\n return (\n <div aria-label='a search bar' aria-disabled={this.disabled} class={`search-bar ${this.internalState ? 'open' : 'closed'}`}>\n {this.internalState ? (\n <div class=\"search-bar-wrapper\">\n <ifx-search-field disabled={this.disabled} value={this.value} maxlength={this.maxlength} onIfxInput={this.handleInput.bind(this)}>\n <ifx-icon icon=\"search-16\" slot=\"search-icon\"></ifx-icon>\n </ifx-search-field>\n\n <a tabindex=\"-1\" href='javascript:void(0)' onClick={this.handleCloseButton}>Close</a>\n </div>\n ) : (\n <div class=\"search-bar__icon-wrapper\" onClick={this.handleCloseButton}>\n <ifx-icon icon=\"search-16\"></ifx-icon>\n </div>\n )}\n </div>\n );\n }\n}\n"],"version":3}

package/dist/components/ifx-set-filter.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { p as proxyCustomElement, H, c as createEvent, h } from './p-68d90201.js
 import { d as defineCustomElement$7 } from './p-f0f583d5.js';
 import { d as defineCustomElement$6 } from './p-4b3befbf.js';
 import { d as defineCustomElement$5 } from './p-7e430b83.js';
-import { d as defineCustomElement$4 } from './p-04b73e62.js';
+import { d as defineCustomElement$4 } from './p-cf8fd0f4.js';
 import { d as defineCustomElement$3 } from './p-11922b8b.js';
 import { d as defineCustomElement$2 } from './p-12e02e47.js';