npm - @infineon/infineon-design-system-stencil - Versions diffs - 30.9.3--canary.1679.8d0c83c3f0040ae0386585c5203298c7d94911f3.0 → 30.9.3--canary.1640.c246fbcdce3247ffada7a2fffa49d05593d4088f.0 - Mend

@infineon/infineon-design-system-stencil 30.9.3--canary.1679.8d0c83c3f0040ae0386585c5203298c7d94911f3.0 → 30.9.3--canary.1640.c246fbcdce3247ffada7a2fffa49d05593d4088f.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 (960) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"text-field.stories.js","sourceRoot":"","sources":["../../../src/components/text-field/text-field.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAEjD,eAAe;IACb,KAAK,EAAE,uBAAuB;IAC9B,sBAAsB;IAEtB,IAAI,EAAE;QACJ,QAAQ,EAAE,KAAK;QACf,IAAI,EAAE,GAAG;QACT,~~OAAO~~,EAAE,~~KAAK~~;~~QACd~~,~~KAAK~~,EAAE,~~OAAO~~;QACd,WAAW,EAAE,aAAa;QAC1B,~~KAAK,EAAE,KAAK;QACZ,~~OAAO,EAAE,SAAS;QAClB,QAAQ,EAAE,IAAI;QACd,QAAQ,EAAE,KAAK;QACf,IAAI,EAAE,~~WAAW~~;~~QACjB~~,~~IAAI~~,EAAE,~~YAAY~~;~~QAClB~~,~~cAAc~~,EAAE,KAAK;~~KACtB~~;IAED,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,WAAW,EAAE,kDAAkD;YAC/D,OAAO,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC;YACnB,OAAO,EAAE,EAAE,~~IAAI~~,EAAE,OAAO,EAAE;~~SAC3B~~;QACD,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,IAAI,EAAE;YACJ,WAAW,EAAE,0EAA0E;~~SACxF~~;QACD,SAAS,EAAE;YACT,WAAW,EAAE,~~sBAAsB~~;~~YACnC~~,OAAO,EAAE,~~EAAC~~,~~IAAI~~,EAAE,QAAQ,~~EAAC~~;~~SAC1B~~;QACD,~~cAAc~~,EAAE;~~YACd~~,WAAW,EAAE,sBAAsB;~~SACpC~~;QACD,QAAQ,EAAE;YACR,MAAM,EAAE,UAAU;YAClB,WAAW,EAAE,~~cAAc~~;~~YAC3B~~,KAAK,EAAE;gBACL,IAAI,EAAE;oBACJ,OAAO,EAAE,uBAAuB;oBAChC,MAAM,EACJ,yKAAyK;iBAC5K;aACF;SACF;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,EAAE,cAAc,EAAE,EAAE,EAAE;~~IACrJ~~,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;IACzD,OAAO,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;IACrC,OAAO,CAAC,YAAY,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;IAC3C,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IACnC,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IACnC,OAAO,CAAC,YAAY,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;IACzC,OAAO,CAAC,YAAY,CAAC,aAAa,EAAE,WAAW,CAAC,CAAC;IACjD,OAAO,CAAC,YAAY,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;IACzC,OAAO,CAAC,YAAY,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;IAC3C,OAAO,CAAC,YAAY,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;IAC3C,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IACnC,OAAO,CAAC,YAAY,CAAC,kBAAkB,EAAE,cAAc,CAAC,CAAC;IACzD,IAAI,SAAS;QAAE,OAAO,CAAC,YAAY,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;IAE5D,OAAO,CAAC,gBAAgB,CAAC,UAAU,EAAE,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC;IAGzD,MAAM,WAAW,GAAG,QAAQ,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;IACnD,OAAO,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;IAEjC,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { action } from '@storybook/addon-actions';\nimport { icons } from '@infineon/infineon-icons';\n\nexport default {\n title: 'Components/Text Field',\n // tags: ['autodocs'],\n\n args: {\n ~~disabled~~: ~~false~~,\n ~~size~~: ~~'m'~~,\n ~~success~~: false,\n ~~label~~: '~~Label~~',\n ~~placeholder~~: '~~Placeholder~~',\n ~~error~~: false,\n caption: 'Caption',\n required: true,\n optional: false,\n ~~icon~~: 'c-~~info-16~~',\n name: 'text-field',\n ~~showDeleteIcon~~: false\n },\n\n ~~argTypes~~: {\n size: {\n description: 'Size options: s (36px) and m (40px) - default: m',\n options: ['s', 'm'],\n control: { ~~type~~: '~~radio~~' },\n },\n icon: {\n options: Object.values(icons).map(i => i['name']),\n control: { ~~type~~: '~~select~~' },\n },\n name: {\n description: 'Name of the element, that is used as reference when a form is submitted.'\n },\n ~~maxlength~~: {\n description: '~~Maximum~~ input ~~length~~',\n ~~control~~: {~~type~~: 'number'}\n },\n ~~showDeleteIcon~~: {\n description: '~~Show~~ the ~~delete~~ ~~icon~~'\n },\n ifxInput: {\n action: 'ifxInput',\n description: 'Custom event',\n table: {\n type: {\n summary: 'Framework integration',\n detail:\n 'React: onIfxInput={handleInput}\\nVue:@ifxInput=\"handleInput\"\\nAngular:(ifxInput)=\"handleInput()\"\\nVanillaJs:.addEventListener(\"ifxInput\", (event) => {//handle input});',\n },\n },\n },\n },\n};\n\nconst DefaultTemplate = ({ error, disabled, success, size, placeholder, label, caption, icon, required, optional, name, maxlength, showDeleteIcon }) => {\n const element = document.createElement('ifx-text-field');\n element.setAttribute('error', error);\n element.setAttribute('disabled', disabled);\n element.setAttribute('size', size);\n element.setAttribute('icon', icon);\n element.setAttribute('success', success);\n element.setAttribute('placeholder', placeholder);\n element.setAttribute('caption', caption);\n element.setAttribute('required', required);\n element.setAttribute('optional', optional);\n element.setAttribute('name', name);\n element.setAttribute('show-delete-icon', showDeleteIcon);\n if (maxlength) element.setAttribute('maxlength', maxlength);\n\n element.addEventListener('ifxInput', action('ifxInput'));\n\n\n const slotContent = document.createTextNode(label);\n element.appendChild(slotContent);\n\n return element;\n};\n\nexport const Default = DefaultTemplate.bind({});\n"]}
1	+ {"version":3,"file":"text-field.stories.js","sourceRoot":"","sources":["../../../src/components/text-field/text-field.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/Text Field',\n // tags: ['autodocs'],\n\n args: {\n label: 'Label',\n error: false,\n disabled: false,\n size: 'm',\n icon: 'c-info-16',\n success: false,\n placeholder: 'Placeholder',\n caption: 'Caption',\n required: true,\n optional: false,\n name: 'text-field',\n showDeleteIcon: false,\n maxlength: '',\n value: '',\n },\n\n argTypes: {\n label: {\n name: 'Label of Text Field',\n description: 'The text label displayed above the <ifx-text-field>.',\n table: {\n category: 'story controls',\n }\n },\n error: {\n description: 'Indicates an error state for the text field.',\n table: {\n category: 'ifx-text-field props',\n defaultValue: {\n summary: false\n }\n }\n },\n disabled: {\n description: 'Disables the text field.',\n table: {\n category: 'ifx-text-field props',\n defaultValue: {\n summary: false\n }\n }\n },\n size: {\n description: 'Size options: s (36px) and m (40px) - default: m',\n options: ['s', 'm'],\n control: 'radio',\n table: {\n category: 'ifx-text-field props',\n defaultValue: {\n summary: 'm'\n }\n }\n },\n icon: {\n description: 'Specifies an icon to display within the text field.',\n options: Object.values(icons).map(i => i['name']),\n control: 'select',\n table: {\n category: 'ifx-text-field props',\n defaultValue: {\n summary: 'c-info-16'\n }\n }\n },\n success: {\n description: 'Indicates a successful state for the text field.',\n table: {\n category: 'ifx-text-field props',\n defaultValue: {\n summary: false\n }\n }\n },\n placeholder: {\n description: 'Displays a placeholder text inside the text field when it is empty.',\n table: {\n category: 'ifx-text-field props',\n }\n },\n caption: {\n description: 'Text displayed below the text field to provide additional information.',\n table: {\n category: 'ifx-text-field props',\n }\n },\n required: {\n description: 'Marks the text field as required for form submission. Displays an asterisk next to the label when set to true.',\n table: {\n category: 'ifx-text-field props',\n defaultValue: {\n summary: true\n }\n }\n },\n optional: {\n description: 'Indicates that the field is optional.',\n table: {\n category: 'ifx-text-field props',\n defaultValue: {\n summary: false\n }\n }\n },\n name: {\n description: 'Name of the element, that is used as reference when a form is submitted.',\n table: {\n category: 'ifx-text-field props',\n }\n },\n showDeleteIcon: {\n description: 'Displays a delete icon inside the text field when set to true, allowing user to clear the input content.',\n table: {\n category: 'ifx-text-field props',\n defaultValue: {\n summary: false\n }\n }\n },\n maxlength: {\n description: 'Specifies the maximum number of characters that can be entered into the text field.',\n control: 'number',\n table: {\n category: 'ifx-text-field props',\n }\n },\n value: {\n description: 'The value of the text field. It is used for the form submission.',\n control: 'text',\n table: {\n category: 'ifx-text-field props',\n type: {\n summary: 'string'\n }\n }\n },\n ifxInput: {\n action: 'ifxInput',\n description: 'Custom event emitted on input change.',\n table: {\n category: 'custom events',\n type: {\n summary: 'Framework integration',\n detail:\n 'React: onIfxInput={handleInput}\\nVue:@ifxInput=\"handleInput\"\\nAngular:(ifxInput)=\"handleInput()\"\\nVanillaJs:.addEventListener(\"ifxInput\", (event) => {//handle input});',\n },\n },\n },\n },\n};\n\nconst DefaultTemplate = ({ error, disabled, success, size, placeholder, label, caption, icon, required, optional, name, maxlength, showDeleteIcon, value }) => {\n const element = document.createElement('ifx-text-field');\n element.setAttribute('error', error);\n element.setAttribute('disabled', disabled);\n element.setAttribute('size', size);\n element.setAttribute('icon', icon);\n element.setAttribute('success', success);\n element.setAttribute('placeholder', placeholder);\n element.setAttribute('caption', caption);\n element.setAttribute('required', required);\n element.setAttribute('optional', optional);\n element.setAttribute('name', name);\n element.setAttribute('show-delete-icon', showDeleteIcon);\n element.setAttribute('value', value);\n if (maxlength) element.setAttribute('maxlength', maxlength);\n\n element.addEventListener('ifxInput', action('ifxInput'));\n\n\n const slotContent = document.createTextNode(label);\n element.appendChild(slotContent);\n\n return element;\n};\n\nexport const Default = DefaultTemplate.bind({});\n"]}

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

@@ -2,18 +2,10 @@ import { h, Host } from "@stencil/core";
 export class TextArea {
     constructor() {
         this.inputId = `ifx-textarea-${++textareaId}`;
-        this.caption = undefined;
-        this.cols = undefined;
         this.disabled = false;
         this.error = false;
-        this.label = undefined;
-        this.maxlength = undefined;
-        this.name = undefined;
-        this.placeholder = undefined;
         this.readOnly = false;
         this.resize = 'both';
-        this.rows = undefined;
-        this.value = undefined;
         this.wrap = 'soft';
     }
     async reset() {
@@ -38,9 +30,9 @@ export class TextArea {
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: 'fa5c845d5352544c1b4c62a09407aebb95da24d3', class: `wrapper
+        return (h(Host, { key: 'd557bff378899253b1eea26f202a3d934424deac', class: `wrapper
 						wrapper--${this.error ? 'error' : ''}
-						wrapper--${this.disabled ? 'disabled' : ''}` }, h("label", { key: 'e68472869f26f77d87cf8cefd29d8e56aac74c95', class: 'wrapper__label', htmlFor: this.inputId }, (_a = this.label) === null || _a === void 0 ? void 0 : _a.trim()), h("div", { key: 'e4d5c36b7608d981bf33dc764453c9cc75883f59', class: 'wrapper__textarea' }, h("textarea", { key: '93988a66ea85198eb40fab3989a82f8a794d815f', "aria-label": 'a textarea', "aria-value": this.value, "aria-disabled": this.disabled, id: this.inputId, style: { resize: this.resize }, name: this.name ? this.name : this.inputId, cols: this.cols, rows: this.rows, maxlength: this.maxlength, wrap: this.wrap, disabled: this.disabled, readonly: this.readOnly, placeholder: this.placeholder, value: this.value, onInput: (e) => this.handleOnInput(e) })), ((_b = this.caption) === null || _b === void 0 ? void 0 : _b.trim()) && (h("div", { key: 'f58f74a260af7090a6e8059081dfe27fc3fe49c9', class: 'wrapper__caption' }, this.caption.trim()))));
+						wrapper--${this.disabled ? 'disabled' : ''}` }, h("label", { key: '9163e001e0423effcbc9bad56af021acb8fc5229', class: 'wrapper__label', htmlFor: this.inputId }, (_a = this.label) === null || _a === void 0 ? void 0 : _a.trim()), h("div", { key: 'ce7ea7607837c9979a984627fb9d762494a211b8', class: 'wrapper__textarea' }, h("textarea", { key: '6587f63b3d5ef32db9bf4c25ba03246d31a1120e', "aria-label": 'a textarea', "aria-value": this.value, "aria-disabled": this.disabled, id: this.inputId, style: { resize: this.resize }, name: this.name ? this.name : this.inputId, cols: this.cols, rows: this.rows, maxlength: this.maxlength, wrap: this.wrap, disabled: this.disabled, readonly: this.readOnly, placeholder: this.placeholder, value: this.value, onInput: (e) => this.handleOnInput(e) })), ((_b = this.caption) === null || _b === void 0 ? void 0 : _b.trim()) && (h("div", { key: '96f109dfc94c8563ce9b3aacfae00eef4b6a49b2', class: 'wrapper__caption' }, this.caption.trim()))));
     }
     static get is() { return "ifx-textarea"; }
     static get encapsulation() { return "shadow"; }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"textarea.js","sourceRoot":"","sources":["../../../src/components/textarea/textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,eAAe,EAAE,SAAS,EAAE,KAAK,EAAgB,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAStG,MAAM,OAAO,QAAQ~~;;QAEZ~~,YAAO,GAAW,gBAAgB,EAAE,UAAU,EAAE,CAAC~~;;;wBAQ7B~~,KAAK;~~qBACR~~,KAAK~~;;;;;wBAKF~~,KAAK;~~sBAC6B~~,MAAM~~;;;oBAG5B~~,MAAM~~;;IAG9C~~,KAAK,CAAC,KAAK;QACV,IAAI,CAAC,aAAa,EAAE,CAAC;IACtB,CAAC;IAED,iBAAiB;QAChB,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;IACjC,CAAC;IAED,aAAa,CAAC,CAAa;QAC1B,IAAI,CAAC,KAAK,GAAI,CAAC,CAAC,MAA8B,CAAC,KAAK,CAAC;QACrD,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACxC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAChC,CAAC;IAED,aAAa;QACZ,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;QAChB,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;QAC/B,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;IACjC,CAAC;IAED,iBAAiB;QAChB,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACzC,CAAC;IAED,MAAM;;QACL,OAAO,CACN,EAAC,IAAI,qDAAC,KAAK,EAAE;iBACC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;iBACzB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAA,CAAC,CAAC,EAAE,EAAE;YAC7C,8DAAO,KAAK,EAAC,gBAAgB,EAAC,OAAO,EAAG,IAAI,CAAC,OAAO,IACjD,MAAA,IAAI,CAAC,KAAK,0CAAE,IAAI,EAAE,CACb;YAER,4DAAK,KAAK,EAAC,mBAAmB;gBAC7B,+EACY,YAAY,gBACV,IAAI,CAAC,KAAK,mBACP,IAAI,CAAC,QAAQ,EAC7B,EAAE,EAAG,IAAI,CAAC,OAAO,EACjB,KAAK,EAAG,EAAC,MAAM,EAAE,IAAI,CAAC,MAAM,EAAC,EAC7B,IAAI,EAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,EAC3C,IAAI,EAAG,IAAI,CAAC,IAAI,EAChB,IAAI,EAAG,IAAI,CAAC,IAAI,EAChB,SAAS,EAAG,IAAI,CAAC,SAAS,EAC1B,IAAI,EAAG,IAAI,CAAC,IAAI,EAChB,QAAQ,EAAG,IAAI,CAAC,QAAQ,EACxB,QAAQ,EAAG,IAAI,CAAC,QAAQ,EACxB,WAAW,EAAG,IAAI,CAAC,WAAW,EAC9B,KAAK,EAAG,IAAI,CAAC,KAAK,EAClB,OAAO,EAAG,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,GACrC,CACG;YAEJ,CAAA,MAAA,IAAI,CAAC,OAAO,0CAAE,IAAI,EAAE,KAAI,CACzB,4DAAK,KAAK,EAAC,kBAAkB,IAC1B,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAChB,CACN,CACK,CACP,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD;AAED,IAAI,UAAU,GAAG,CAAC,CAAC","sourcesContent":["import { h, AttachInternals, Component, Event, EventEmitter, Host, Method, Prop } from \"@stencil/core\"\n\n@Component({\n\tformAssociated: true,\n\tshadow: true,\n\tstyleUrl: 'textarea.scss',\n\ttag: 'ifx-textarea'\n})\n\nexport class TextArea {\n\n\tprivate inputId: string = `ifx-textarea-${++textareaId}`;\n\n\t@AttachInternals() internals: ElementInternals;\n\n\t@Event() ifxInput: EventEmitter<String>;\n\n\t@Prop() caption: string;\n\t@Prop() cols: number;\n\t@Prop() disabled: boolean = false;\n\t@Prop() error: boolean = false;\n\t@Prop() label: string;\n\t@Prop() maxlength: number;\n\t@Prop() name: string;\n\t@Prop() placeholder: string;\n\t@Prop() readOnly: boolean = false;\n\t@Prop() resize: 'both' \| 'horizontal' \| 'vertical' \| 'none' = 'both';\n\t@Prop() rows: number;\n\t@Prop({ mutable: true }) value: string;\n\t@Prop() wrap: 'hard' \| 'soft' \| 'off' = 'soft';\n\n\t@Method()\n\tasync reset() {\n\t\tthis.resetTextarea();\n\t}\n\t\n\tformResetCallback(): void {\n\t\tthis.resetTextarea();\n\t\tthis.internals.setFormValue(\"\");\n\t}\n\t\n\thandleOnInput(e: InputEvent): void {\n\t\tthis.value = (e.target as HTMLTextAreaElement).value;\n\t\tthis.internals.setFormValue(this.value);\n\t\tthis.ifxInput.emit(this.value);\n\t}\n\n\tresetTextarea() {\n\t\tthis.value = '';\n\t\tthis.internals.setValidity({});\n\t\tthis.internals.setFormValue('');\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.internals.setFormValue(this.value);\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={`wrapper \n\t\t\t\t\t\twrapper--${this.error ? 'error' : ''}\n\t\t\t\t\t\twrapper--${this.disabled ? 'disabled': ''}`}>\n\t\t\t\t<label class='wrapper__label' htmlFor={ this.inputId }>\n\t\t\t\t\t{ this.label?.trim() }\n\t\t\t\t</label>\n\n\t\t\t\t<div class='wrapper__textarea'>\n\t\t\t\t\t<textarea\n\t\t\t\t\t\taria-label='a textarea'\n\t\t\t\t\t\taria-value={ this.value }\n\t\t\t\t\t\taria-disabled={ this.disabled }\n\t\t\t\t\t\tid={ this.inputId }\n\t\t\t\t\t\tstyle={ {resize: this.resize} }\n\t\t\t\t\t\tname={ this.name ? this.name : this.inputId}\n\t\t\t\t\t\tcols={ this.cols }\n\t\t\t\t\t\trows={ this.rows }\n\t\t\t\t\t\tmaxlength={ this.maxlength }\n\t\t\t\t\t\twrap={ this.wrap }\n\t\t\t\t\t\tdisabled={ this.disabled }\n\t\t\t\t\t\treadonly={ this.readOnly }\n\t\t\t\t\t\tplaceholder={ this.placeholder }\n\t\t\t\t\t\tvalue={ this.value }\n\t\t\t\t\t\tonInput={ (e) => this.handleOnInput(e) }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\n\t\t\t\t{ this.caption?.trim() && (\n\t\t\t\t\t<div class='wrapper__caption'>\n\t\t\t\t\t\t{ this.caption.trim() }\n\t\t\t\t\t</div> \n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n}\n\nlet textareaId = 0;"]}
1	+ {"version":3,"file":"textarea.js","sourceRoot":"","sources":["../../../src/components/textarea/textarea.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h, AttachInternals, Component, Event, EventEmitter, Host, Method, Prop } from \"@stencil/core\"\n\n@Component({\n\tformAssociated: true,\n\tshadow: true,\n\tstyleUrl: 'textarea.scss',\n\ttag: 'ifx-textarea'\n})\n\nexport class TextArea {\n\n\tprivate inputId: string = `ifx-textarea-${++textareaId}`;\n\n\t@AttachInternals() internals: ElementInternals;\n\n\t@Event() ifxInput: EventEmitter<String>;\n\n\t@Prop() caption: string;\n\t@Prop() cols: number;\n\t@Prop() disabled: boolean = false;\n\t@Prop() error: boolean = false;\n\t@Prop() label: string;\n\t@Prop() maxlength: number;\n\t@Prop() name: string;\n\t@Prop() placeholder: string;\n\t@Prop() readOnly: boolean = false;\n\t@Prop() resize: 'both' \| 'horizontal' \| 'vertical' \| 'none' = 'both';\n\t@Prop() rows: number;\n\t@Prop({ mutable: true }) value: string;\n\t@Prop() wrap: 'hard' \| 'soft' \| 'off' = 'soft';\n\n\t@Method()\n\tasync reset() {\n\t\tthis.resetTextarea();\n\t}\n\t\n\tformResetCallback(): void {\n\t\tthis.resetTextarea();\n\t\tthis.internals.setFormValue(\"\");\n\t}\n\t\n\thandleOnInput(e: InputEvent): void {\n\t\tthis.value = (e.target as HTMLTextAreaElement).value;\n\t\tthis.internals.setFormValue(this.value);\n\t\tthis.ifxInput.emit(this.value);\n\t}\n\n\tresetTextarea() {\n\t\tthis.value = '';\n\t\tthis.internals.setValidity({});\n\t\tthis.internals.setFormValue('');\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.internals.setFormValue(this.value);\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={`wrapper \n\t\t\t\t\t\twrapper--${this.error ? 'error' : ''}\n\t\t\t\t\t\twrapper--${this.disabled ? 'disabled': ''}`}>\n\t\t\t\t<label class='wrapper__label' htmlFor={ this.inputId }>\n\t\t\t\t\t{ this.label?.trim() }\n\t\t\t\t</label>\n\n\t\t\t\t<div class='wrapper__textarea'>\n\t\t\t\t\t<textarea\n\t\t\t\t\t\taria-label='a textarea'\n\t\t\t\t\t\taria-value={ this.value }\n\t\t\t\t\t\taria-disabled={ this.disabled }\n\t\t\t\t\t\tid={ this.inputId }\n\t\t\t\t\t\tstyle={ {resize: this.resize} }\n\t\t\t\t\t\tname={ this.name ? this.name : this.inputId}\n\t\t\t\t\t\tcols={ this.cols }\n\t\t\t\t\t\trows={ this.rows }\n\t\t\t\t\t\tmaxlength={ this.maxlength }\n\t\t\t\t\t\twrap={ this.wrap }\n\t\t\t\t\t\tdisabled={ this.disabled }\n\t\t\t\t\t\treadonly={ this.readOnly }\n\t\t\t\t\t\tplaceholder={ this.placeholder }\n\t\t\t\t\t\tvalue={ this.value }\n\t\t\t\t\t\tonInput={ (e) => this.handleOnInput(e) }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\n\t\t\t\t{ this.caption?.trim() && (\n\t\t\t\t\t<div class='wrapper__caption'>\n\t\t\t\t\t\t{ this.caption.trim() }\n\t\t\t\t\t</div> \n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n}\n\nlet textareaId = 0;"]}

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

@@ -129,9 +129,7 @@ export default {
             },
         },
         ifxInput: {
-            description: `A custom event *ifxInput* is emitted immediately after the value of *<ifx-textarea>* changes.\n
-	event.detail: string
-			`,
+            description: `A custom event *ifxInput* is emitted immediately after the value of *<ifx-textarea>* changes.`,
             table: {
                 category: 'custom events',
                 type: {

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.js CHANGED Viewed

@@ -2,6 +2,12 @@ import { h } from "@stencil/core";
 import { createPopper } from "@popperjs/core";
 export class Tooltip {
     constructor() {
+        this.tooltipVisible = false;
+        this.header = '';
+        this.text = '';
+        this.position = 'auto';
+        this.internalPosition = 'auto';
+        this.variant = 'compact';
         this.popperInstance = null;
         this.onMouseEnter = () => {
             var _a, _b;
@@ -35,13 +41,6 @@ export class Tooltip {
             this.tooltipVisible = false;
             this.tooltipEl.style.display = 'none';
         };
-        this.tooltipVisible = false;
-        this.header = '';
-        this.text = '';
-        this.position = 'auto';
-        this.internalPosition = 'auto';
-        this.variant = 'compact';
-        this.icon = undefined;
     }
     componentWillLoad() {
         if (this.variant.toLowerCase().trim() === "") {
@@ -149,10 +148,10 @@ export class Tooltip {
             'tooltip-extended': true,
             'visible': this.tooltipVisible,
         };
-        return (h("div", { key: '7da57630a19be3d8b55667e0764445203cd1f77c', "aria-label": "a tooltip showing important information", "aria-value": this.header, class: "tooltip__container" }, h("slot", { key: '3a55da34a85606a8fd32207550366fad3436f120' }), this.variant.toLowerCase() === 'dismissible' && h("div", { key: '67dec6dcc56c7f3ca8a8a67ff070df931433f71e', class: tooltipDismissible }, h("button", { key: 'db34f7fe5237d960ff0a728f4b82c3df30c6266b', "aria-label": "Close Tooltip", class: "close-button", onClick: this.onDismissClick }, h("ifx-icon", { key: 'de96a6255887700e6b89a38b0ff549ea3916e1e7', icon: "cross16" })), h("div", { key: 'e324ffa46233ca6931ebe766c95e391d7c3d9ce2', class: "tooltip-dismissible-content" }, this.header && h("div", { key: 'd435679be58ec126b9fa9f785e960d2ef39b259d', class: "tooltip-dismissible-header" }, this.header), h("div", { key: 'd3ce120faae0d9b12d28069673d19e403e52763f', class: "tooltip-dismissible-body" }, this.text)), h("svg", { key: '28bf2c543359173d1ab0be2c9f098ff813b17650', class: "tooltip-arrow-svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'a355efa505ea997469320a35262780942e495504', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" }))), this.variant.toLowerCase() === 'compact' &&
-            h("div", { key: '55d7bfd3d951839bf89f887419e57b85623a3a0e', class: tooltipCompact }, this.text, h("svg", { key: '36247aaeda7486865b15ca4e4097a36b69d571c1', class: "tooltip-arrow-svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'ac90b5fd1f7188993695a1fc3ac084d8ba8cc8ee', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" }))), this.variant.toLowerCase() === 'extended' &&
-            h("div", { key: 'de8269abcb6ddc0219024b77f26d95cb809c8818', class: tooltipExtended }, h("slot", { key: 'f88f2cdaa9bafa4d95d7a6953fc4a2b4c49cad35', name: "icon" }, this.icon ? h("div", { class: "extended_icon" }, h("ifx-icon", { icon: this.icon })) :
-                h("svg", { class: "extended_icon", xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "none", viewBox: "0 0 24 24" }, h("path", { stroke: "#fff", "stroke-linecap": "round", "stroke-linejoin": "round", d: "M20.5 2.5h-16a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-16a2 2 0 0 0-2-2Z" }), h("path", { stroke: "#fff", d: "M19 17H6l2.5-4 2.097 2.516.405.486.379-.506 4.118-5.49.003-.002L19 17Z" }), h("path", { fill: "#fff", d: "M10 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" }))), h("div", { key: '226db4dd5c26b73ee30e20378b5a664bc365581b', class: "tooltip-extended-content" }, this.header && h("div", { key: '47a5ffc018245e0375255ea0eefe77e85e3b630c', class: "tooltip-extended-header" }, this.header), h("div", { key: '7892a686219be701d4a912a77edf77ba9cb5840a', class: "tooltip-extended-body" }, this.text)), h("svg", { key: '143b7a548b751cabb80450637ca8f9da9d54efa7', class: "tooltip-arrow-svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '973348331d6ff15eaa25d9d29ab8490b5961d510', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" })))));
+        return (h("div", { key: '246f0b291e39bbe49ebea1eed9827400f22bb680', "aria-label": "a tooltip showing important information", "aria-value": this.header, class: "tooltip__container" }, h("slot", { key: 'a16771de825d12d46661be2ecb61ce8326e25794' }), this.variant.toLowerCase() === 'dismissible' && h("div", { key: '974e0fdbf389fcce6cc34eccb897b188f0413eea', class: tooltipDismissible }, h("button", { key: 'a777e5a63134c07f4330d790044a7aafdb63a83c', "aria-label": "Close Tooltip", class: "close-button", onClick: this.onDismissClick }, h("ifx-icon", { key: '69cc351f97d892f98cf8bc3df48d2877129e4238', icon: "cross16" })), h("div", { key: '5db6f0ceff12be22d6de58767bab509b67dd9ff8', class: "tooltip-dismissible-content" }, this.header && h("div", { key: '22fd94a588780e413dc04dcc126380b5b382fde6', class: "tooltip-dismissible-header" }, this.header), h("div", { key: 'abd4158d18a1c57dda508caddcdb1be945a8efd2', class: "tooltip-dismissible-body" }, this.text)), h("svg", { key: '1bcd11086f4922c03532c99b2dd1618b862af68b', class: "tooltip-arrow-svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '5dfac1fa79d7204b1f0770ed243cdbadfc14fdd9', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" }))), this.variant.toLowerCase() === 'compact' &&
+            h("div", { key: 'a52aec447163df16d86d14f96d74501c45266e2a', class: tooltipCompact }, this.text, h("svg", { key: 'c28c49ee4446d73b366bb68280ddf5b9192cc79a', class: "tooltip-arrow-svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '2de515ea4344c728a1da4b368c93c7ade11badcb', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" }))), this.variant.toLowerCase() === 'extended' &&
+            h("div", { key: '9e3186e4856770c831d0422bce64b131c64f55f0', class: tooltipExtended }, h("slot", { key: '089640249dbfcf8eed4525615d6e289955304e09', name: "icon" }, this.icon ? h("div", { class: "extended_icon" }, h("ifx-icon", { icon: this.icon })) :
+                h("svg", { class: "extended_icon", xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "none", viewBox: "0 0 24 24" }, h("path", { stroke: "#fff", "stroke-linecap": "round", "stroke-linejoin": "round", d: "M20.5 2.5h-16a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-16a2 2 0 0 0-2-2Z" }), h("path", { stroke: "#fff", d: "M19 17H6l2.5-4 2.097 2.516.405.486.379-.506 4.118-5.49.003-.002L19 17Z" }), h("path", { fill: "#fff", d: "M10 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" }))), h("div", { key: 'eab4f9af96d154a289bec83673db47d3580c267d', class: "tooltip-extended-content" }, this.header && h("div", { key: '810497a167351bef22a9e61050264032be295455', class: "tooltip-extended-header" }, this.header), h("div", { key: '802dbe5e093b9d69b9155e188d35a421b2ca0c2e', class: "tooltip-extended-body" }, this.text)), h("svg", { key: 'ff19a79905e5ea4af628364a254e03e022a08a3d', class: "tooltip-arrow-svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '557540e1fd91ad15580011ddf37a4cd25a8a6ae3', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" })))));
     }
     static get is() { return "ifx-tooltip"; }
     static get encapsulation() { return "shadow"; }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/components/tooltip/tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Element, State, Watch } from '@stencil/core';\nimport { createPopper } from '@popperjs/core';\n \n\n@Component({\n tag: 'ifx-tooltip',\n styleUrl: 'tooltip.scss',\n shadow: true\n})\nexport class Tooltip {\n\n @Element() el: HTMLElement;\n @State() tooltipVisible: boolean = false;\n @Prop() header: string = '';\n @Prop() text: string = '';\n @Prop() position: 'bottom-start' \| 'top-start' \| 'left' \| 'bottom-end' \| 'top-end' \| 'right' \| 'bottom' \| 'top' \| 'auto' = 'auto';\n @State() internalPosition: 'bottom-start' \| 'top-start' \| 'left' \| 'bottom-end' \| 'top-end' \| 'right' \| 'bottom' \| 'top' \| 'auto' = 'auto';\n\n @Prop() variant: 'compact' \| 'dismissible' \| 'extended' = 'compact';\n @Prop() icon: string;\n\n tooltipEl: HTMLElement;\n referenceEl: HTMLElement;\n popperInstance: any = null;\n\n\n componentWillLoad() { \n if(this.variant.toLowerCase().trim() === \"\") { \n this.variant = 'compact'\n }\n }\n \n componentDidLoad() {\n const slotElement = this.el.shadowRoot.querySelector('.tooltip__container').firstChild;\n \n if(this.variant.toLowerCase() === 'compact' \|\| this.variant.toLowerCase() === 'extended') {\n slotElement.addEventListener('mouseenter', this.onMouseEnter)\n slotElement.addEventListener('mouseleave', this.onMouseLeave)\n }else{\n slotElement.addEventListener('click', this.onClick);\n }\n\n }\n\n initializePopper() {\n if (this.popperInstance) return;\n\n this.referenceEl = this.el;\n this.tooltipEl;\n if (this.variant.toLowerCase() === 'compact') {\n this.tooltipEl = this.el.shadowRoot.querySelector('.tooltip-compact');\n }\n else if (this.variant.toLowerCase() === 'dismissible') {\n this.tooltipEl = this.el.shadowRoot.querySelector('.tooltip-dismissible');\n }\n else {\n this.tooltipEl = this.el.shadowRoot.querySelector('.tooltip-extended');\n\n }\n\n const effectivePosition = this.position === 'auto' ? this.determineBestPosition() : this.position;\n\n // Set the internalPosition\n this.internalPosition = effectivePosition;\n\n if (this.tooltipEl && this.referenceEl) {\n\n this.popperInstance = createPopper(this.referenceEl, this.tooltipEl, {\n placement: this.internalPosition,\n modifiers: [\n {\n name: 'offset',\n options: {\n offset: [0, 8] // this offset should be adjusted to ensure the tooltip doesn't overlap its reference element\n }\n },\n {\n name: 'arrow',\n options: {\n element: '.tooltip-arrow-svg'\n }\n }\n ]\n });\n\n }\n\n // Add this line to set the 'data-placement' attribute on the tooltip\n this.tooltipEl.setAttribute('data-placement', effectivePosition);\n\n\n }\n\n determineBestPosition() {\n // This is a simplified version, you can enhance this based on available viewport space.\n const rect = this.referenceEl.getBoundingClientRect();\n const yOffset = window.scrollY; // Get current scroll position\n const xOffset = window.scrollX; // Get current horizontal scroll position\n\n const verticalHalfwayPoint = rect.top + yOffset + rect.height / 2;\n const horizontalHalfwayPoint = rect.left + xOffset + rect.width / 2;\n\n if (this.position === 'auto') {\n if (verticalHalfwayPoint > window.innerHeight / 2) {\n if (horizontalHalfwayPoint > window.innerWidth / 2) {\n return 'top-end';\n } else {\n return 'top-start';\n }\n } else {\n if (horizontalHalfwayPoint > window.innerWidth / 2) {\n return 'bottom-end';\n } else {\n return 'bottom-start';\n }\n }\n } else {\n return this.position;\n }\n }\n\n @Watch('position')\n positionChanged(newVal: any) {\n this.internalPosition = newVal;\n this.popperInstance?.destroy();\n this.popperInstance = null; // Force re-initialization on next mouse enter\n }\n\n\n\n onMouseEnter = () => {\n // Enable the event listeners immediately\n this.popperInstance?.setOptions((options) => ({\n ...options,\n modifiers: [\n ...options.modifiers,\n { name: 'eventListeners', enabled: true },\n ],\n }));\n\n // Initialize the popper instance\n this.initializePopper();\n\n // Make the tooltip visible\n this.tooltipVisible = true;\n this.tooltipEl.style.display = 'block';\n\n // Update the popper instance immediately after initialization\n this.popperInstance?.update();\n }\n\n\n onMouseLeave = () => {\n this.tooltipVisible = false;\n this.tooltipEl.style.display = 'none';\n\n }\n\n disconnectedCallback() {\n this.popperInstance?.destroy();\n }\n\n onClick = () => {\n if (this.variant.toLowerCase() === 'dismissible') {\n this.initializePopper();\n this.tooltipVisible = !this.tooltipVisible;\n this.tooltipEl.style.display = this.tooltipVisible ? 'block' : 'none';\n this.popperInstance?.update();\n }\n }\n\n onDismissClick = () => {\n this.tooltipVisible = false;\n this.tooltipEl.style.display = 'none';\n }\n\n render() {\n const tooltipDismissible = {\n 'tooltip-dismissible': true,\n 'visible': this.tooltipVisible,\n };\n\n const tooltipCompact = {\n 'tooltip-compact': true,\n 'visible': this.tooltipVisible,\n };\n\n const tooltipExtended = {\n 'tooltip-extended': true,\n 'visible': this.tooltipVisible,\n };\n\n return (\n <div aria-label=\"a tooltip showing important information\" aria-value={this.header} class=\"tooltip__container\" >\n <slot></slot>\n\n {this.variant.toLowerCase() === 'dismissible' && <div class={tooltipDismissible}>\n <button aria-label=\"Close Tooltip\" class=\"close-button\" onClick={this.onDismissClick}>\n <ifx-icon icon=\"cross16\"></ifx-icon>\n </button>\n <div class=\"tooltip-dismissible-content\">\n {this.header && <div class=\"tooltip-dismissible-header\">{this.header}</div>}\n <div class=\"tooltip-dismissible-body\">{this.text}</div>\n </div>\n <svg class=\"tooltip-arrow-svg\" width=\"12\" height=\"8\" viewBox=\"0 0 12 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path id=\"Indicator\" d=\"M6 0L12 8L0 8L6 0Z\" fill=\"#1D1D1D\" />\n </svg>\n </div>\n }\n {this.variant.toLowerCase() === 'compact' &&\n <div class={tooltipCompact}>\n {this.text}\n <svg class=\"tooltip-arrow-svg\" width=\"12\" height=\"8\" viewBox=\"0 0 12 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path id=\"Indicator\" d=\"M6 0L12 8L0 8L6 0Z\" fill=\"#1D1D1D\" />\n </svg>\n </div>\n }\n {this.variant.toLowerCase() === 'extended' &&\n <div class={tooltipExtended}>\n <slot name=\"icon\">\n {this.icon ? <div class=\"extended_icon\"><ifx-icon icon={this.icon}></ifx-icon></div> :\n <svg class=\"extended_icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" viewBox=\"0 0 24 24\">\n <path stroke=\"#fff\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M20.5 2.5h-16a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-16a2 2 0 0 0-2-2Z\" />\n <path stroke=\"#fff\" d=\"M19 17H6l2.5-4 2.097 2.516.405.486.379-.506 4.118-5.49.003-.002L19 17Z\" />\n <path fill=\"#fff\" d=\"M10 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z\" />\n </svg>\n }\n </slot>\n <div class=\"tooltip-extended-content\">\n {this.header && <div class=\"tooltip-extended-header\">{this.header}</div>}\n <div class=\"tooltip-extended-body\">{this.text}</div>\n </div>\n <svg class=\"tooltip-arrow-svg\" width=\"12\" height=\"8\" viewBox=\"0 0 12 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path id=\"Indicator\" d=\"M6 0L12 8L0 8L6 0Z\" fill=\"#1D1D1D\" />\n </svg>\n </div >\n }\n </div>\n );\n }\n\n\n}"]}
1	+ {"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/components/tooltip/tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Element, State, Watch } from '@stencil/core';\nimport { createPopper } from '@popperjs/core';\n \n\n@Component({\n tag: 'ifx-tooltip',\n styleUrl: 'tooltip.scss',\n shadow: true\n})\nexport class Tooltip {\n\n @Element() el: HTMLElement;\n @State() tooltipVisible: boolean = false;\n @Prop() header: string = '';\n @Prop() text: string = '';\n @Prop() position: 'bottom-start' \| 'top-start' \| 'left' \| 'bottom-end' \| 'top-end' \| 'right' \| 'bottom' \| 'top' \| 'auto' = 'auto';\n @State() internalPosition: 'bottom-start' \| 'top-start' \| 'left' \| 'bottom-end' \| 'top-end' \| 'right' \| 'bottom' \| 'top' \| 'auto' = 'auto';\n\n @Prop() variant: 'compact' \| 'dismissible' \| 'extended' = 'compact';\n @Prop() icon: string;\n\n tooltipEl: HTMLElement;\n referenceEl: HTMLElement;\n popperInstance: any = null;\n\n\n componentWillLoad() { \n if(this.variant.toLowerCase().trim() === \"\") { \n this.variant = 'compact'\n }\n }\n \n componentDidLoad() {\n const slotElement = this.el.shadowRoot.querySelector('.tooltip__container').firstChild;\n \n if(this.variant.toLowerCase() === 'compact' \|\| this.variant.toLowerCase() === 'extended') {\n slotElement.addEventListener('mouseenter', this.onMouseEnter)\n slotElement.addEventListener('mouseleave', this.onMouseLeave)\n }else{\n slotElement.addEventListener('click', this.onClick);\n }\n\n }\n\n initializePopper() {\n if (this.popperInstance) return;\n\n this.referenceEl = this.el;\n this.tooltipEl;\n if (this.variant.toLowerCase() === 'compact') {\n this.tooltipEl = this.el.shadowRoot.querySelector('.tooltip-compact');\n }\n else if (this.variant.toLowerCase() === 'dismissible') {\n this.tooltipEl = this.el.shadowRoot.querySelector('.tooltip-dismissible');\n }\n else {\n this.tooltipEl = this.el.shadowRoot.querySelector('.tooltip-extended');\n\n }\n\n const effectivePosition = this.position === 'auto' ? this.determineBestPosition() : this.position;\n\n // Set the internalPosition\n this.internalPosition = effectivePosition;\n\n if (this.tooltipEl && this.referenceEl) {\n\n this.popperInstance = createPopper(this.referenceEl, this.tooltipEl, {\n placement: this.internalPosition,\n modifiers: [\n {\n name: 'offset',\n options: {\n offset: [0, 8] // this offset should be adjusted to ensure the tooltip doesn't overlap its reference element\n }\n },\n {\n name: 'arrow',\n options: {\n element: '.tooltip-arrow-svg'\n }\n }\n ]\n });\n\n }\n\n // Add this line to set the 'data-placement' attribute on the tooltip\n this.tooltipEl.setAttribute('data-placement', effectivePosition);\n\n\n }\n\n determineBestPosition() {\n // This is a simplified version, you can enhance this based on available viewport space.\n const rect = this.referenceEl.getBoundingClientRect();\n const yOffset = window.scrollY; // Get current scroll position\n const xOffset = window.scrollX; // Get current horizontal scroll position\n\n const verticalHalfwayPoint = rect.top + yOffset + rect.height / 2;\n const horizontalHalfwayPoint = rect.left + xOffset + rect.width / 2;\n\n if (this.position === 'auto') {\n if (verticalHalfwayPoint > window.innerHeight / 2) {\n if (horizontalHalfwayPoint > window.innerWidth / 2) {\n return 'top-end';\n } else {\n return 'top-start';\n }\n } else {\n if (horizontalHalfwayPoint > window.innerWidth / 2) {\n return 'bottom-end';\n } else {\n return 'bottom-start';\n }\n }\n } else {\n return this.position;\n }\n }\n\n @Watch('position')\n positionChanged(newVal: any) {\n this.internalPosition = newVal;\n this.popperInstance?.destroy();\n this.popperInstance = null; // Force re-initialization on next mouse enter\n }\n\n\n\n onMouseEnter = () => {\n // Enable the event listeners immediately\n this.popperInstance?.setOptions((options) => ({\n ...options,\n modifiers: [\n ...options.modifiers,\n { name: 'eventListeners', enabled: true },\n ],\n }));\n\n // Initialize the popper instance\n this.initializePopper();\n\n // Make the tooltip visible\n this.tooltipVisible = true;\n this.tooltipEl.style.display = 'block';\n\n // Update the popper instance immediately after initialization\n this.popperInstance?.update();\n }\n\n\n onMouseLeave = () => {\n this.tooltipVisible = false;\n this.tooltipEl.style.display = 'none';\n\n }\n\n disconnectedCallback() {\n this.popperInstance?.destroy();\n }\n\n onClick = () => {\n if (this.variant.toLowerCase() === 'dismissible') {\n this.initializePopper();\n this.tooltipVisible = !this.tooltipVisible;\n this.tooltipEl.style.display = this.tooltipVisible ? 'block' : 'none';\n this.popperInstance?.update();\n }\n }\n\n onDismissClick = () => {\n this.tooltipVisible = false;\n this.tooltipEl.style.display = 'none';\n }\n\n render() {\n const tooltipDismissible = {\n 'tooltip-dismissible': true,\n 'visible': this.tooltipVisible,\n };\n\n const tooltipCompact = {\n 'tooltip-compact': true,\n 'visible': this.tooltipVisible,\n };\n\n const tooltipExtended = {\n 'tooltip-extended': true,\n 'visible': this.tooltipVisible,\n };\n\n return (\n <div aria-label=\"a tooltip showing important information\" aria-value={this.header} class=\"tooltip__container\" >\n <slot></slot>\n\n {this.variant.toLowerCase() === 'dismissible' && <div class={tooltipDismissible}>\n <button aria-label=\"Close Tooltip\" class=\"close-button\" onClick={this.onDismissClick}>\n <ifx-icon icon=\"cross16\"></ifx-icon>\n </button>\n <div class=\"tooltip-dismissible-content\">\n {this.header && <div class=\"tooltip-dismissible-header\">{this.header}</div>}\n <div class=\"tooltip-dismissible-body\">{this.text}</div>\n </div>\n <svg class=\"tooltip-arrow-svg\" width=\"12\" height=\"8\" viewBox=\"0 0 12 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path id=\"Indicator\" d=\"M6 0L12 8L0 8L6 0Z\" fill=\"#1D1D1D\" />\n </svg>\n </div>\n }\n {this.variant.toLowerCase() === 'compact' &&\n <div class={tooltipCompact}>\n {this.text}\n <svg class=\"tooltip-arrow-svg\" width=\"12\" height=\"8\" viewBox=\"0 0 12 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path id=\"Indicator\" d=\"M6 0L12 8L0 8L6 0Z\" fill=\"#1D1D1D\" />\n </svg>\n </div>\n }\n {this.variant.toLowerCase() === 'extended' &&\n <div class={tooltipExtended}>\n <slot name=\"icon\">\n {this.icon ? <div class=\"extended_icon\"><ifx-icon icon={this.icon}></ifx-icon></div> :\n <svg class=\"extended_icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" viewBox=\"0 0 24 24\">\n <path stroke=\"#fff\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M20.5 2.5h-16a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-16a2 2 0 0 0-2-2Z\" />\n <path stroke=\"#fff\" d=\"M19 17H6l2.5-4 2.097 2.516.405.486.379-.506 4.118-5.49.003-.002L19 17Z\" />\n <path fill=\"#fff\" d=\"M10 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z\" />\n </svg>\n }\n </slot>\n <div class=\"tooltip-extended-content\">\n {this.header && <div class=\"tooltip-extended-header\">{this.header}</div>}\n <div class=\"tooltip-extended-body\">{this.text}</div>\n </div>\n <svg class=\"tooltip-arrow-svg\" width=\"12\" height=\"8\" viewBox=\"0 0 12 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path id=\"Indicator\" d=\"M6 0L12 8L0 8L6 0Z\" fill=\"#1D1D1D\" />\n </svg>\n </div >\n }\n </div>\n );\n }\n\n\n}"]}

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/collection/stories/setup-and-installation/faq/faq.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class Faq {
     render() {
-        return (h("div", { key: '310199ef35dd0c3148f0f5ff09bccb8026f19f6d', class: 'container' }, h("ifx-accordion", { key: '0e51fae53f1f5fd744f5415150fe4cbf28226514' }, h("ifx-accordion-item", { key: 'bb5a317518851e309fc6c3bba2ac83a2203db857', caption: "What is the Infineon DDS?" }, "The Infineon Digital Design System consists of code components, design principles, tools and guidelines as well as a dedicated interdisciplinary team. Its purpose is to support internal and external colleagues create digital user interfaces with a high level of usability as well as a consistent expression of the Infineon brand. The DDS does not focus on the content of a web application but it describes how the design of the application\u2019s structure should be."), h("ifx-accordion-item", { key: '87db5207173436de4760cd693beebcb14710c565', caption: "How do I get access to the DDS?" }, "You can use the provided Figma file as a foundation for mockups and prototypes, use Storybook to view what UI components and variants are available and use code components provided via Storybook or Github."), h("ifx-accordion-item", { key: 'a01af54d49f47a46d9cf383cb3b1e3f17bd9720a', caption: "Can I integrate the Infineon DDS into my project?" }, "Yes, you can. We are happy to discuss with you which point in time and which scope of integration is bestsuited for updating your interface to the Infineon DDS. (To avoid that users get confused by a mixture of UI components, we recommend choosing larger updates or technology changes as opportunity to integrate the Infineon DDS.)"), h("ifx-accordion-item", { key: 'b7d22abc0d8751fc5774ac5509aca3a314103d6c', caption: "Are Infineon DDS components accessable?" }, "We have taken WCAG 2.0 Level AA as baseline level for all design decisions inside the Infineon Digital Design System. To make an online experience truly accessible you have to implement the specific code, content, and visual design according to the accessibility standard. Find an introduction to this topic here."), h("ifx-accordion-item", { key: 'a063b460cfcf6061e393fff4a9b1ca4aaca5b9f7', caption: "How to request a new component?" }, "Please contact us like described in the contribution section! We are planning to expand the number of components continually. If your component is also usable for multiple other projects, there is a good chance we might work together with you."))));
+        return (h("div", { key: '81dac064edfea12005954ca731cbbe00b8d69698', class: 'container' }, h("ifx-accordion", { key: 'f0a52cd1a0c95d038e036c3643504033b15cb342' }, h("ifx-accordion-item", { key: 'e1ed7801a5e7c5d83c8e0ee934dfdfea1925dc4d', caption: "What is the Infineon DDS?" }, "The Infineon Digital Design System consists of code components, design principles, tools and guidelines as well as a dedicated interdisciplinary team. Its purpose is to support internal and external colleagues create digital user interfaces with a high level of usability as well as a consistent expression of the Infineon brand. The DDS does not focus on the content of a web application but it describes how the design of the application\u2019s structure should be."), h("ifx-accordion-item", { key: '792c48fae24d106277a76554f5d66f5aaa0bb384', caption: "How do I get access to the DDS?" }, "You can use the provided Figma file as a foundation for mockups and prototypes, use Storybook to view what UI components and variants are available and use code components provided via Storybook or Github."), h("ifx-accordion-item", { key: '4ed509e6535edf0408f9ed9163d66e979c653370', caption: "Can I integrate the Infineon DDS into my project?" }, "Yes, you can. We are happy to discuss with you which point in time and which scope of integration is bestsuited for updating your interface to the Infineon DDS. (To avoid that users get confused by a mixture of UI components, we recommend choosing larger updates or technology changes as opportunity to integrate the Infineon DDS.)"), h("ifx-accordion-item", { key: 'a358a22ca675e01d5e402fe8a4268b27ccb471c5', caption: "Are Infineon DDS components accessable?" }, "We have taken WCAG 2.0 Level AA as baseline level for all design decisions inside the Infineon Digital Design System. To make an online experience truly accessible you have to implement the specific code, content, and visual design according to the accessibility standard. Find an introduction to this topic here."), h("ifx-accordion-item", { key: '88a06feeb2a093b38797667aec93adf4d82502d5', caption: "How to request a new component?" }, "Please contact us like described in the contribution section! We are planning to expand the number of components continually. If your component is also usable for multiple other projects, there is a good chance we might work together with you."))));
     }
     static get is() { return "ifx-faq"; }
     static get encapsulation() { return "shadow"; }

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-62eff23e.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-a6310ccf.js';
 const IfxAccordion = Accordion;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,5 +1,5 @@
-import { p as proxyCustomElement, H, c as createEvent, h } from './p-68d90201.js';
-import { d as defineCustomElement$2 } from './p-7e430b83.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-a99edff1.js';
+import { d as defineCustomElement$2 } from './p-06410557.js';
 const alertCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{display:block}.alert__info-wrapper{display:flex;padding:16px 24px;font-family:var(--ifx-font-family);box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1019607843)}.alert__info-wrapper .info__text-wrapper{display:flex;flex-direction:column;gap:8px;width:100%}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper{display:-webkit-box;-webkit-line-clamp:1;line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper,.alert__info-wrapper .info__text-wrapper .info__description-wrapper{color:#1D1D1D;font-size:16px;font-style:normal;font-weight:600;line-height:24px}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper ::slotted(p),.alert__info-wrapper .info__text-wrapper .info__description-wrapper ::slotted(p){padding:0;margin:0}.alert__info-wrapper .info__text-wrapper .info__description-wrapper{font-weight:400}.alert__info-wrapper .close-icon-wrapper{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start}.alert__info-wrapper .close-icon-wrapper button{all:unset;display:flex;align-items:center;justify-content:center;line-height:0;color:#1D1D1D;height:24px;width:24px}.alert__info-wrapper .close-icon-wrapper button:focus{outline:2px solid #0A8276;outline-offset:2px}.alert{display:flex;border:1px solid #0A8276;border-radius:1px;color:#1D1D1D;background-color:#FFFFFF;font-family:var(--ifx-font-family);box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1019607843)}.alert .close-icon-wrapper{display:flex;align-items:center;justify-content:center;min-width:40px}.alert .close-icon-wrapper button{all:unset;display:flex;align-items:center;justify-content:center;line-height:0;color:#1D1D1D;height:24px;width:24px}.alert .close-icon-wrapper button:focus{outline:2px solid #0A8276;outline-offset:2px}.alert .icon-wrapper{position:relative;min-width:48px;display:flex;justify-content:center;align-items:center;background-color:#0A8276}.alert .alert-text{font-size:16px;width:100%;padding:12px 0px 12px 12px;color:#1D1D1D;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;}.alert.primary{border:1px solid #0A8276}.alert.primary .icon-wrapper{background-color:#0A8276;color:#FFFFFF}.alert.success{border:1px solid #4CA460}.alert.success .icon-wrapper{background-color:#4CA460;color:#FFFFFF}.alert.danger{border:1px solid #CD002F}.alert.danger .icon-wrapper{background-color:#CD002F;color:#FFFFFF}.alert.warning{border:1px solid #E16B25}.alert.warning .icon-wrapper{background-color:#E16B25;color:#FFFFFF}.close-icon-wrapper ifx-icon:hover{cursor:pointer}";
 const IfxAlertStyle0 = alertCss;
@@ -10,6 +10,9 @@ const Alert = /*@__PURE__*/ proxyCustomElement(class Alert extends H {
         this.__registerHost();
         this.__attachShadow();
         this.ifxClose = createEvent(this, "ifxClose", 7);
+        this.variant = 'primary';
+        this.closable = true;
+        this.AriaLive = 'assertive';
         this.alertTypeDescription = {
             "primary": 'Neutral alert',
             "success": 'Success Alert',
@@ -17,11 +20,6 @@ const Alert = /*@__PURE__*/ proxyCustomElement(class Alert extends H {
             "warning": 'Warning Alert',
             "info": 'Neutral alert',
         };
-        this.variant = 'primary';
-        this.icon = undefined;
-        this.closable = true;
-        this.AriaLive = 'assertive';
-        this.uniqueId = undefined;
     }
     handleClose() {
         this.ifxClose.emit();

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

	@@ -1 +1 @@
1	- {"file":"ifx-alert.js","mappings":";;;AAAA,MAAM,QAAQ,GAAG,soFAAsoF,CAAC;AACxpF,uBAAe,QAAQ;;MCMV,KAAK~~;;;;;;QAQhB~~,yBAAoB,GAAG;YACrB,SAAS,EAAE,eAAe;YAC1B,SAAS,EAAE,eAAe;YAC1B,QAAQ,EAAE,aAAa;YACvB,SAAS,EAAE,eAAe;YAC1B,MAAM,EAAE,eAAe;SACxB,CAAC;~~uBAbuE,SAAS;;wBAGtD,IAAI~~;~~wBACb~~,WAAW~~;;;IAW9B,WAAW~~;QACT,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;KACtB;IAED,iBAAiB;QACf,QACE,WAAK,KAAK,EAAC,oBAAoB,IAC7B,cAAQ,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAa,eAAe,IACtE,gBAAU,IAAI,EAAC,UAAU,GAAG,CACrB,CACL,EACN;KACH;IAED,gBAAgB,CAAC,MAAM,GAAG,IAAI;QAC5B,OAAO,GAAG,MAAM,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;KAClE;IAED,iBAAiB;QACf,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;SAChD;KACF;IAED,MAAM;QACJ,OAAO,IAAI,CAAC,OAAO,KAAK,MAAM,IAC5B,WAAK,KAAK,EAAC,qBAAqB,EAAC,IAAI,EAAC,OAAO,eAAY,IAAI,CAAC,QAAQ,sBAAoB,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,OAAO,CAAC,qBAAkB,8BAA8B,IAC/K,WAAK,KAAK,EAAC,oBAAoB,IAC7B,WAAK,KAAK,EAAC,wBAAwB,IACjC,YAAM,IAAI,EAAC,UAAU,GAAG,CACpB,EACN,WAAK,EAAE,EAAE,qBAAqB,IAAI,CAAC,QAAQ,EAAE,EAAE,KAAK,EAAC,2BAA2B,IAC9E,YAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACF,EACL,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,iBAAiB,EAAE,GAAG,IAAI,CAC5C,KAEN,WAAK,KAAK,EAAE,SAAS,IAAI,CAAC,OAAO,EAAE,EAAE,IAAI,EAAC,OAAO,IAC9C,IAAI,CAAC,IAAI,KACR,WAAK,KAAK,EAAC,cAAc,IACvB,gBAAU,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,CACzB,CACP,EACD,WAAK,KAAK,EAAC,YAAY,EAAC,EAAE,EAAE,cAAc,IAAI,CAAC,QAAQ,EAAE,IACvD,eAAQ,CACJ,EACL,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,iBAAiB,EAAE,GAAG,IAAI,CAC5C,CACP,CAAC;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/alert/alert.scss?tag=ifx-alert&encapsulation=shadow","src/components/alert/alert.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: block;\n}\n\n.alert__info-wrapper {\n display: flex;\n padding: 16px 24px;\n font-family: var(--ifx-font-family);\n box-shadow: 0px 6px 9px 0px #1D1D1D1A;\n\n\n & .info__text-wrapper {\n display: flex;\n flex-direction: column;\n gap: tokens.$ifxSpace100;\n width: 100%;\n\n & .info__headline-wrapper {\n display: -webkit-box;\n -webkit-line-clamp: 1;\n line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n & .info__headline-wrapper,\n .info__description-wrapper {\n color: #1D1D1D;\n font-size: 16px;\n font-style: normal;\n font-weight: 600;\n line-height: 24px;\n\n ::slotted(p) {\n padding: 0;\n margin: 0;\n }\n }\n\n & .info__description-wrapper {\n font-weight: 400;\n }\n }\n\n & .close-icon-wrapper {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: flex-start;\n //min-width: tokens.$ifxSize500;\n\n & button {\n all: unset;\n display: flex;\n align-items: center;\n justify-content: center;\n line-height: 0;\n color: tokens.$ifxColorBaseBlack;\n height: tokens.$ifxSize300;\n width: tokens.$ifxSize300;\n\n\n &:focus {\n outline: 2px solid tokens.$ifxColorOcean500;\n outline-offset: 2px;\n }\n }\n }\n}\n\n.alert {\n display: flex;\n border: 1px solid tokens.$ifxColorOcean500;\n border-radius: tokens.$ifxBorderRadius12;\n color: tokens.$ifxColorBaseBlack;\n background-color: tokens.$ifxColorBaseWhite;\n font-family: var(--ifx-font-family);\n box-shadow: 0px 6px 9px 0px #1D1D1D1A;\n\n\n & .close-icon-wrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: tokens.$ifxSize500;\n\n & button {\n all: unset;\n display: flex;\n align-items: center;\n justify-content: center;\n line-height: 0;\n color: tokens.$ifxColorBaseBlack;\n height: tokens.$ifxSize300;\n width: tokens.$ifxSize300;\n\n &:focus {\n outline: 2px solid tokens.$ifxColorOcean500;\n outline-offset: 2px;\n }\n }\n }\n\n & .icon-wrapper {\n position: relative;\n min-width: tokens.$ifxSize600;\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: tokens.$ifxColorOcean500;\n }\n\n & .alert-text {\n font-size: 16px;\n width: 100%;\n padding: 12px 0px 12px 12px;\n color: tokens.$ifxColorBaseBlack;\n\n white-space: pre-wrap;\n /* wraps text at spaces and within words /\n word-wrap: break-word;\n / breaks text within a word if necessary /\n overflow-wrap: anywhere;\n / breaks text at arbitrary points when needed */\n }\n\n &.primary {\n border: 1px solid tokens.$ifxColorOcean500;\n\n & .icon-wrapper {\n background-color: tokens.$ifxColorOcean500;\n color: tokens.$ifxColorBaseWhite;\n }\n }\n\n &.success {\n border: 1px solid tokens.$ifxColorGreen500;\n\n & .icon-wrapper {\n background-color: tokens.$ifxColorGreen500;\n color: tokens.$ifxColorBaseWhite;\n }\n }\n\n &.danger {\n border: 1px solid tokens.$ifxColorRed500;\n\n & .icon-wrapper {\n background-color: tokens.$ifxColorRed500;\n color: tokens.$ifxColorBaseWhite;\n }\n }\n\n &.warning {\n border: 1px solid tokens.$ifxColorOrange500;\n\n & .icon-wrapper {\n background-color: tokens.$ifxColorOrange500;\n color: tokens.$ifxColorBaseWhite;\n }\n }\n}\n\n.close-icon-wrapper {\n & ifx-icon {\n &:hover {\n cursor: pointer;\n }\n }\n}","import { Component, Prop, h, Event, EventEmitter, State } from '@stencil/core';\n\n@Component({\n tag: 'ifx-alert',\n styleUrl: 'alert.scss',\n shadow: true,\n})\nexport class Alert {\n @Prop() variant: 'primary' \| 'success' \| 'danger' \| 'warning' \| 'info' = 'primary';\n @Prop() icon: string;\n @Event() ifxClose: EventEmitter;\n @Prop() closable: boolean = true;\n @Prop() AriaLive = 'assertive';\n @State() uniqueId: string;\n\n alertTypeDescription = {\n \"primary\": 'Neutral alert',\n \"success\": 'Success Alert',\n \"danger\": 'Error Alert',\n \"warning\": 'Warning Alert',\n \"info\": 'Neutral alert',\n };\n\n handleClose() {\n this.ifxClose.emit();\n }\n\n renderCloseButton() {\n return (\n <div class=\"close-icon-wrapper\">\n <button onClick={this.handleClose.bind(this)} aria-label=\"Dismiss alert\">\n <ifx-icon icon=\"cross-16\" />\n </button>\n </div>\n );\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('alert');\n }\n }\n\n render() {\n return this.variant === 'info' ? (\n <div class=\"alert__info-wrapper\" role=\"alert\" aria-live={this.AriaLive} aria-describedby={this.alertTypeDescription[this.variant]} aria-labelledby=\"alert-text alert-description\">\n <div class=\"info__text-wrapper\">\n <div class=\"info__headline-wrapper\">\n <slot name=\"headline\" />\n </div>\n <div id={`alert-description-${this.uniqueId}`} class=\"info__description-wrapper\">\n <slot name=\"desc\" />\n </div>\n </div>\n {this.closable ? this.renderCloseButton() : null}\n </div>\n ) : (\n <div class={`alert ${this.variant}`} role=\"alert\">\n {this.icon && (\n <div class=\"icon-wrapper\">\n <ifx-icon icon={this.icon} />\n </div>\n )}\n <div class=\"alert-text\" id={`alert-text-${this.uniqueId}`}>\n <slot />\n </div>\n {this.closable ? this.renderCloseButton() : null}\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ifx-alert.js","mappings":";;;AAAA,MAAM,QAAQ,GAAG,soFAAsoF,CAAC;AACxpF,uBAAe,QAAQ;;MCMV,KAAK;IALlB;;;;;QAMU,YAAO,GAA0D,SAAS,CAAC;QAG3E,aAAQ,GAAY,IAAI,CAAC;QACzB,aAAQ,GAAG,WAAW,CAAC;QAG/B,yBAAoB,GAAG;YACrB,SAAS,EAAE,eAAe;YAC1B,SAAS,EAAE,eAAe;YAC1B,QAAQ,EAAE,aAAa;YACvB,SAAS,EAAE,eAAe;YAC1B,MAAM,EAAE,eAAe;SACxB,CAAC;KAqDH;IAnDC,WAAW;QACT,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;KACtB;IAED,iBAAiB;QACf,QACE,WAAK,KAAK,EAAC,oBAAoB,IAC7B,cAAQ,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAa,eAAe,IACtE,gBAAU,IAAI,EAAC,UAAU,GAAG,CACrB,CACL,EACN;KACH;IAED,gBAAgB,CAAC,MAAM,GAAG,IAAI;QAC5B,OAAO,GAAG,MAAM,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;KAClE;IAED,iBAAiB;QACf,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;SAChD;KACF;IAED,MAAM;QACJ,OAAO,IAAI,CAAC,OAAO,KAAK,MAAM,IAC5B,WAAK,KAAK,EAAC,qBAAqB,EAAC,IAAI,EAAC,OAAO,eAAY,IAAI,CAAC,QAAQ,sBAAoB,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,OAAO,CAAC,qBAAkB,8BAA8B,IAC/K,WAAK,KAAK,EAAC,oBAAoB,IAC7B,WAAK,KAAK,EAAC,wBAAwB,IACjC,YAAM,IAAI,EAAC,UAAU,GAAG,CACpB,EACN,WAAK,EAAE,EAAE,qBAAqB,IAAI,CAAC,QAAQ,EAAE,EAAE,KAAK,EAAC,2BAA2B,IAC9E,YAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACF,EACL,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,iBAAiB,EAAE,GAAG,IAAI,CAC5C,KAEN,WAAK,KAAK,EAAE,SAAS,IAAI,CAAC,OAAO,EAAE,EAAE,IAAI,EAAC,OAAO,IAC9C,IAAI,CAAC,IAAI,KACR,WAAK,KAAK,EAAC,cAAc,IACvB,gBAAU,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,CACzB,CACP,EACD,WAAK,KAAK,EAAC,YAAY,EAAC,EAAE,EAAE,cAAc,IAAI,CAAC,QAAQ,EAAE,IACvD,eAAQ,CACJ,EACL,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,iBAAiB,EAAE,GAAG,IAAI,CAC5C,CACP,CAAC;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/alert/alert.scss?tag=ifx-alert&encapsulation=shadow","src/components/alert/alert.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: block;\n}\n\n.alert__info-wrapper {\n display: flex;\n padding: 16px 24px;\n font-family: var(--ifx-font-family);\n box-shadow: 0px 6px 9px 0px #1D1D1D1A;\n\n\n & .info__text-wrapper {\n display: flex;\n flex-direction: column;\n gap: tokens.$ifxSpace100;\n width: 100%;\n\n & .info__headline-wrapper {\n display: -webkit-box;\n -webkit-line-clamp: 1;\n line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n & .info__headline-wrapper,\n .info__description-wrapper {\n color: #1D1D1D;\n font-size: 16px;\n font-style: normal;\n font-weight: 600;\n line-height: 24px;\n\n ::slotted(p) {\n padding: 0;\n margin: 0;\n }\n }\n\n & .info__description-wrapper {\n font-weight: 400;\n }\n }\n\n & .close-icon-wrapper {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: flex-start;\n //min-width: tokens.$ifxSize500;\n\n & button {\n all: unset;\n display: flex;\n align-items: center;\n justify-content: center;\n line-height: 0;\n color: tokens.$ifxColorBaseBlack;\n height: tokens.$ifxSize300;\n width: tokens.$ifxSize300;\n\n\n &:focus {\n outline: 2px solid tokens.$ifxColorOcean500;\n outline-offset: 2px;\n }\n }\n }\n}\n\n.alert {\n display: flex;\n border: 1px solid tokens.$ifxColorOcean500;\n border-radius: tokens.$ifxBorderRadius12;\n color: tokens.$ifxColorBaseBlack;\n background-color: tokens.$ifxColorBaseWhite;\n font-family: var(--ifx-font-family);\n box-shadow: 0px 6px 9px 0px #1D1D1D1A;\n\n\n & .close-icon-wrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: tokens.$ifxSize500;\n\n & button {\n all: unset;\n display: flex;\n align-items: center;\n justify-content: center;\n line-height: 0;\n color: tokens.$ifxColorBaseBlack;\n height: tokens.$ifxSize300;\n width: tokens.$ifxSize300;\n\n &:focus {\n outline: 2px solid tokens.$ifxColorOcean500;\n outline-offset: 2px;\n }\n }\n }\n\n & .icon-wrapper {\n position: relative;\n min-width: tokens.$ifxSize600;\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: tokens.$ifxColorOcean500;\n }\n\n & .alert-text {\n font-size: 16px;\n width: 100%;\n padding: 12px 0px 12px 12px;\n color: tokens.$ifxColorBaseBlack;\n\n white-space: pre-wrap;\n /* wraps text at spaces and within words /\n word-wrap: break-word;\n / breaks text within a word if necessary /\n overflow-wrap: anywhere;\n / breaks text at arbitrary points when needed */\n }\n\n &.primary {\n border: 1px solid tokens.$ifxColorOcean500;\n\n & .icon-wrapper {\n background-color: tokens.$ifxColorOcean500;\n color: tokens.$ifxColorBaseWhite;\n }\n }\n\n &.success {\n border: 1px solid tokens.$ifxColorGreen500;\n\n & .icon-wrapper {\n background-color: tokens.$ifxColorGreen500;\n color: tokens.$ifxColorBaseWhite;\n }\n }\n\n &.danger {\n border: 1px solid tokens.$ifxColorRed500;\n\n & .icon-wrapper {\n background-color: tokens.$ifxColorRed500;\n color: tokens.$ifxColorBaseWhite;\n }\n }\n\n &.warning {\n border: 1px solid tokens.$ifxColorOrange500;\n\n & .icon-wrapper {\n background-color: tokens.$ifxColorOrange500;\n color: tokens.$ifxColorBaseWhite;\n }\n }\n}\n\n.close-icon-wrapper {\n & ifx-icon {\n &:hover {\n cursor: pointer;\n }\n }\n}","import { Component, Prop, h, Event, EventEmitter, State } from '@stencil/core';\n\n@Component({\n tag: 'ifx-alert',\n styleUrl: 'alert.scss',\n shadow: true,\n})\nexport class Alert {\n @Prop() variant: 'primary' \| 'success' \| 'danger' \| 'warning' \| 'info' = 'primary';\n @Prop() icon: string;\n @Event() ifxClose: EventEmitter;\n @Prop() closable: boolean = true;\n @Prop() AriaLive = 'assertive';\n @State() uniqueId: string;\n\n alertTypeDescription = {\n \"primary\": 'Neutral alert',\n \"success\": 'Success Alert',\n \"danger\": 'Error Alert',\n \"warning\": 'Warning Alert',\n \"info\": 'Neutral alert',\n };\n\n handleClose() {\n this.ifxClose.emit();\n }\n\n renderCloseButton() {\n return (\n <div class=\"close-icon-wrapper\">\n <button onClick={this.handleClose.bind(this)} aria-label=\"Dismiss alert\">\n <ifx-icon icon=\"cross-16\" />\n </button>\n </div>\n );\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('alert');\n }\n }\n\n render() {\n return this.variant === 'info' ? (\n <div class=\"alert__info-wrapper\" role=\"alert\" aria-live={this.AriaLive} aria-describedby={this.alertTypeDescription[this.variant]} aria-labelledby=\"alert-text alert-description\">\n <div class=\"info__text-wrapper\">\n <div class=\"info__headline-wrapper\">\n <slot name=\"headline\" />\n </div>\n <div id={`alert-description-${this.uniqueId}`} class=\"info__description-wrapper\">\n <slot name=\"desc\" />\n </div>\n </div>\n {this.closable ? this.renderCloseButton() : null}\n </div>\n ) : (\n <div class={`alert ${this.variant}`} role=\"alert\">\n {this.icon && (\n <div class=\"icon-wrapper\">\n <ifx-icon icon={this.icon} />\n </div>\n )}\n <div class=\"alert-text\" id={`alert-text-${this.uniqueId}`}>\n <slot />\n </div>\n {this.closable ? this.renderCloseButton() : null}\n </div>\n );\n }\n}\n"],"version":3}

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

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h } from './p-68d90201.js';
+import { p as proxyCustomElement, H, h } from './p-a99edff1.js';
 const badgeCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{display:inline-flex}.badge__container{display:inline-flex;justify-content:center;align-items:center;padding:4px 8px;gap:8px;border:1px solid #EEEDED;background-color:#EEEDED;border-radius:100px;font-family:var(--ifx-font-family);font-size:0.875rem;line-height:1.25rem;font-weight:400;color:#1D1D1D}";
 const IfxBadgeStyle0 = badgeCss;

package/dist/components/ifx-basic-table.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, d as Host } from './p-68d90201.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-a99edff1.js';
 import { c as createGrid } from './p-1429e9ea.js';
 import { c as classNames } from './p-5cdc6210.js';
@@ -41,15 +41,11 @@ const Table = /*@__PURE__*/ proxyCustomElement(class Table extends H {
     constructor() {
         super();
         this.__registerHost();
-        this.gridInitialized = false;
-        this.gridOptions = undefined;
-        this.cols = undefined;
-        this.rows = undefined;
         this.columnDefs = [];
         this.rowData = [];
         this.rowHeight = 'default';
         this.tableHeight = 'auto';
-        this.uniqueKey = undefined;
+        this.gridInitialized = false;
     }
     componentWillLoad() {
         this.uniqueKey = `unique-${Math.floor(Math.random() * 1000000)}`;
@@ -183,7 +179,7 @@ const Table = /*@__PURE__*/ proxyCustomElement(class Table extends H {
         return {};
     }
     render() {
-        return (h(Host, { key: '80e769cc7a63d358c3ef01b1a67ae6872d56a6c4' }, h("div", { key: 'e656b9c9db4c9446197a578d13b1876c85cefba2', id: "table-wrapper", class: this.getClassNames() }, h("div", { key: '237a4b6b8c863716deea0ceebc2ac826c6c7ae1a', id: `ifxTable-${this.uniqueKey}`, class: "ifx-ag-grid", style: this.getTableStyle(), ref: (el) => (this.container = el) }))));
+        return (h(Host, { key: 'ff940c90b4fd4396cafd1cbfd13476e9225df362' }, h("div", { key: '2da95f49bbcd224297c91168c2c29f6178fa6b2b', id: "table-wrapper", class: this.getClassNames() }, h("div", { key: 'fb5cf41dd677de23d4fb5a7e897b7e1dcd8444f1', id: `ifxTable-${this.uniqueKey}`, class: "ifx-ag-grid", style: this.getTableStyle(), ref: (el) => (this.container = el) }))));
     }
     get host() { return this; }
     static get style() { return IfxBasicTableStyle0; }