@infineon/infineon-design-system-stencil 37.13.1--canary.1997.75ad7f7eea08b7ef8ba8916a0f4ec101f62aeed7.0 → 37.13.1--canary.1987.859aac56d1c8a27a3693d661f2cbd6641090b6a9.0

package/dist/collection/components/text-field/text-field.js

@@ -56,12 +56,12 @@ export class TextField {
         }
     }
     render() {
-        return (h("div", { key: 'eb43a6d13d3c5a1b8dd83431d9cb2ff5dc3e6ed0', "aria-label": "a text field for user input", "aria-value": this.value, "aria-disabled": this.disabled, class: `textInput__container ${this.disabled ? 'disabled' : ""}` }, h("div", { key: 'dbab2baa66620a5e35ce0a6e420177d2d824889d', class: "textInput__top-wrapper" }, h("label", { key: 'e651d3d01bd6178f5e6f6274191057e2ea7c4c3d', htmlFor: this.internalId }, h("slot", { key: '8e19106cd1033f8655101c07b18b443df88cded3' }), this.optional && this.required ? (h("span", { class: "optional-required" }, "(optional) *")) : this.optional ? (h("span", { class: "optional" }, "(optional)")) : this.required ? (h("span", { class: `required ${this.error ? 'error' : ""}` }, "*")) : null)), h("div", { key: 'aa5de9988a8134792b5da884a65ef2659089788e', class: "textInput__bottom-wrapper" }, h("div", { key: 'e6fb7025e637c0ee6608b3734df6c8dae444a017', class: "input-container" }, this.icon && (h("ifx-icon", { key: '3fe591fd59434633ae1466613baa2def56a7268d', class: 'input-icon', icon: this.icon })), h("input", { key: '093626ea0e15f92ca55b517605ff04248f07e2aa', ref: (el) => (this.inputElement = el), disabled: this.disabled, autocomplete: this.autocomplete, type: this.internalType, id: this.internalId, value: this.value, onInput: () => this.handleInput(), placeholder: this.placeholder, maxlength: this.maxlength, class: `${this.icon ? 'icon' : ""}
+        return (h("div", { key: 'c90f0d5dc9859e71311753c8f7287149f6e6b652', "aria-label": this.ariaLabel, "aria-value": this.value, "aria-disabled": this.disabled, class: `textInput__container ${this.disabled ? 'disabled' : ""}` }, h("div", { key: 'ef30d1ceea94bce1daff804c52127fee1f12e9d7', class: "textInput__top-wrapper" }, h("label", { key: '7495b231e3ab3e11ec15edbc7c4821c78ab1a71b', htmlFor: this.internalId }, h("slot", { key: '90ce23f8a18742cc3d50c14851c506ab8c776b38' }), this.optional && this.required ? (h("span", { class: "optional-required" }, "(optional) *")) : this.optional ? (h("span", { class: "optional" }, "(optional)")) : this.required ? (h("span", { class: `required ${this.error ? 'error' : ""}` }, "*")) : null)), h("div", { key: '6979aedb7268f8bbafd7b94aea945a0327a5dc5b', class: "textInput__bottom-wrapper" }, h("div", { key: 'ceee16e1407dd8d2d329419dc56d5b7d493d8328', class: "input-container" }, this.icon && (h("ifx-icon", { key: '8e1bfaf005b990e9210b0d09322122e6ce074ced', class: 'input-icon', icon: this.icon })), h("input", { key: 'a98f761a2ea3cf932bd122a908962433dbd36d3b', tabindex: this.disabled ? '-1' : '0', ref: (el) => (this.inputElement = el), disabled: this.disabled, autocomplete: this.autocomplete, type: this.internalType, id: this.internalId, value: this.value, onInput: () => this.handleInput(), placeholder: this.placeholder, maxlength: this.maxlength, class: `${this.icon ? 'icon' : ""}
                 ${this.error ? 'error' : ""} 
               ${this.size === "s" ? "input-s" : ""}
-              ${this.success ? "success" : ""}` }), (this.showDeleteIcon && this.value) && (h("ifx-icon", { key: '4dd889a2de7060403eea5b1d57d3cd87af1643b8', class: "delete-icon", icon: "cRemove16", onClick: () => this.handleDeleteContent() }))), this.caption && !this.error &&
-            h("div", { key: 'a98a495f5e5b34c60f2b842bd5100d478927f25b', class: `textInput__bottom-wrapper-caption ${this.disabled} ? disabled : ""` }, this.caption), this.error &&
-            h("div", { key: '5d6088d0b6938c9cd4875ffd1c72c9c717b91f3a', class: "textInput__bottom-wrapper-caption error" }, this.caption))));
+              ${this.success ? "success" : ""}` }), (this.showDeleteIcon && this.value) && (h("ifx-icon", { key: 'a3a894ebb4719f92eae2168c2bb50ab3ec1e6b70', tabindex: this.disabled ? '-1' : '0', class: "delete-icon", icon: "cRemove16", onKeyDown: (event) => event.key === 'Enter' && this.handleDeleteContent(), onClick: () => this.handleDeleteContent() }))), this.caption && !this.error &&
+            h("div", { key: 'b573a87364b09fb39d83729a3cf99a1735aa54ed', class: `textInput__bottom-wrapper-caption ${this.disabled} ? disabled : ""` }, this.caption), this.error &&
+            h("div", { key: 'ecba95e69b618d4beea04e4a0f59f3ddf0b33541', class: "textInput__bottom-wrapper-caption error" }, this.caption))));
     }
     static get is() { return "ifx-text-field"; }
     static get encapsulation() { return "shadow"; }
@@ -396,6 +396,25 @@ export class TextField {
                 "setter": false,
                 "reflect": false,
                 "defaultValue": "\"text-field\""
+            },
+            "ariaLabel": {
+                "type": "string",
+                "attribute": "aria-label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
             }
         };
     }

package/dist/collection/components/text-field/text-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-field.js","sourceRoot":"","sources":["../../../src/components/text-field/text-field.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Event, Element, Prop, EventEmitter, Watch, Method, AttachInternals, State } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking'; \nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n  tag: 'ifx-text-field',\n  styleUrl: 'text-field.scss',\n  shadow: true,\n  formAssociated: true\n})\n\nexport class TextField {\n  private inputElement: HTMLInputElement;\n  @Element() el;\n  @Prop() placeholder: string = \"Placeholder\"\n  @Prop({ mutable: true }) value: string = '';\n  @Prop() error: boolean = false;\n  @Prop() label: string = \"\";\n  @Prop() icon: string = \"\";\n  @Prop() caption: string = \"\";\n  @Prop() size: string = 'm';\n  @Prop() required: boolean = false;\n  @Prop() optional: boolean = false;\n  @Prop() success: boolean = false;\n  @Prop() disabled: boolean = false;\n  @Prop() maxlength?: number;\n  @Prop() showDeleteIcon: boolean = false;\n  @Prop() autocomplete: string = 'on'\n  @Prop() type: 'text' | 'password' = 'text';\n  @Prop() internalId: string = \"text-field\"\n  @State() internalType: string;\n  @Event() ifxInput: EventEmitter<String>;\n  // @Prop({ reflect: true })\n  // resetOnSubmit: boolean = false;\n\n  @AttachInternals() internals: ElementInternals;\n\n\n  @Watch('value')\n  valueWatcher(newValue: string) {\n    if (newValue !== this.inputElement.value) {\n      this.inputElement.value = newValue;\n    }\n  }\n\n  @Method()\n  async reset() {\n    this.value = '';\n    this.inputElement.value = '';\n  }\n\n  handleDeleteContent() {\n    this.reset();\n    this.ifxInput.emit(this.value);\n  }\n\n  handleInput() {\n    const query = this.inputElement.value;\n    this.value = query; // update the value property when input changes\n    this.internals.setFormValue(query) // update form value\n    this.ifxInput.emit(this.value);\n  }\n\n  handleTypeProp() { \n   this.internalType = this.type === 'text' || this.type === 'password' ? this.type : 'text'\n  }\n\n  formResetCallback() {\n    this.internals.setValidity({});\n    this.internals.setFormValue(\"\");\n  }\n\n  componentWillLoad() { \n    this.handleTypeProp()\n  }\n\n  async componentDidLoad() { \n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-text-field', await framework)\n    }\n  }\n\n  render() {\n    return (\n      <div aria-label=\"a text field for user input\" aria-value={this.value} aria-disabled={this.disabled} class={`textInput__container ${this.disabled ? 'disabled' : \"\"}`}>\n        <div class=\"textInput__top-wrapper\">\n          <label htmlFor={this.internalId}>\n            <slot></slot>\n            {this.optional && this.required ? (\n              <span class=\"optional-required\">(optional) *</span>\n            ) : this.optional ? (\n              <span class=\"optional\">(optional)</span>\n            ) : this.required ? (\n              <span class={`required ${this.error ? 'error' : \"\"}`}>*</span>\n            ) : null}\n          </label>\n        </div>\n\n        <div class=\"textInput__bottom-wrapper\">\n          <div class=\"input-container\">\n            {this.icon && (\n              <ifx-icon class='input-icon' icon={this.icon} />\n            )}\n            <input\n              ref={(el) => (this.inputElement = el)}\n              disabled={this.disabled}\n              autocomplete={this.autocomplete}\n              type={this.internalType}\n              id={this.internalId}\n              value={this.value}\n              onInput={() => this.handleInput()}\n              placeholder={this.placeholder}\n              maxlength={this.maxlength}\n              class={\n                `${this.icon ? 'icon' : \"\"}\n                ${this.error ? 'error' : \"\"} \n              ${this.size === \"s\" ? \"input-s\" : \"\"}\n              ${this.success ? \"success\" : \"\"}`} />\n\n              { (this.showDeleteIcon && this.value) && (\n                <ifx-icon class=\"delete-icon\" icon=\"cRemove16\" onClick={() => this.handleDeleteContent()}></ifx-icon> \n              )}\n          </div>\n          {this.caption && !this.error &&\n            <div class={`textInput__bottom-wrapper-caption ${this.disabled} ? disabled : \"\"`}>\n              {this.caption}\n            </div>}\n          {this.error &&\n            <div class=\"textInput__bottom-wrapper-caption error\">\n              {this.caption}\n            </div>}\n        </div>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"text-field.js","sourceRoot":"","sources":["../../../src/components/text-field/text-field.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Event, Element, Prop, EventEmitter, Watch, Method, AttachInternals, State } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking'; \nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n  tag: 'ifx-text-field',\n  styleUrl: 'text-field.scss',\n  shadow: true,\n  formAssociated: true\n})\n\nexport class TextField {\n  private inputElement: HTMLInputElement;\n  @Element() el;\n  @Prop() placeholder: string = \"Placeholder\"\n  @Prop({ mutable: true }) value: string = '';\n  @Prop() error: boolean = false;\n  @Prop() label: string = \"\";\n  @Prop() icon: string = \"\";\n  @Prop() caption: string = \"\";\n  @Prop() size: string = 'm';\n  @Prop() required: boolean = false;\n  @Prop() optional: boolean = false;\n  @Prop() success: boolean = false;\n  @Prop() disabled: boolean = false;\n  @Prop() maxlength?: number;\n  @Prop() showDeleteIcon: boolean = false;\n  @Prop() autocomplete: string = 'on'\n  @Prop() type: 'text' | 'password' = 'text';\n  @Prop() internalId: string = \"text-field\"\n  @Prop() ariaLabel: string | null;\n  @State() internalType: string;\n  @Event() ifxInput: EventEmitter<String>;\n  // @Prop({ reflect: true })\n  // resetOnSubmit: boolean = false;\n\n  @AttachInternals() internals: ElementInternals;\n\n\n  @Watch('value')\n  valueWatcher(newValue: string) {\n    if (newValue !== this.inputElement.value) {\n      this.inputElement.value = newValue;\n    }\n  }\n\n  @Method()\n  async reset() {\n    this.value = '';\n    this.inputElement.value = '';\n  }\n\n  handleDeleteContent() {\n    this.reset();\n    this.ifxInput.emit(this.value);\n  }\n\n  handleInput() {\n    const query = this.inputElement.value;\n    this.value = query; // update the value property when input changes\n    this.internals.setFormValue(query) // update form value\n    this.ifxInput.emit(this.value);\n  }\n\n  handleTypeProp() { \n   this.internalType = this.type === 'text' || this.type === 'password' ? this.type : 'text'\n  }\n\n  formResetCallback() {\n    this.internals.setValidity({});\n    this.internals.setFormValue(\"\");\n  }\n\n  componentWillLoad() { \n    this.handleTypeProp()\n  }\n\n  async componentDidLoad() { \n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-text-field', await framework)\n    }\n  }\n\n  render() {\n    return (\n      <div aria-label={this.ariaLabel} aria-value={this.value} aria-disabled={this.disabled} class={`textInput__container ${this.disabled ? 'disabled' : \"\"}`}>\n        <div class=\"textInput__top-wrapper\">\n          <label htmlFor={this.internalId}>\n            <slot></slot>\n            {this.optional && this.required ? (\n              <span class=\"optional-required\">(optional) *</span>\n            ) : this.optional ? (\n              <span class=\"optional\">(optional)</span>\n            ) : this.required ? (\n              <span class={`required ${this.error ? 'error' : \"\"}`}>*</span>\n            ) : null}\n          </label>\n        </div>\n\n        <div class=\"textInput__bottom-wrapper\">\n          <div class=\"input-container\">\n            {this.icon && (\n              <ifx-icon class='input-icon' icon={this.icon} />\n            )}\n            <input\n            tabindex={this.disabled ? '-1' : '0'}\n              ref={(el) => (this.inputElement = el)}\n              disabled={this.disabled}\n              autocomplete={this.autocomplete}\n              type={this.internalType}\n              id={this.internalId}\n              value={this.value}\n              onInput={() => this.handleInput()}\n              placeholder={this.placeholder}\n              maxlength={this.maxlength}\n              class={\n                `${this.icon ? 'icon' : \"\"}\n                ${this.error ? 'error' : \"\"} \n              ${this.size === \"s\" ? \"input-s\" : \"\"}\n              ${this.success ? \"success\" : \"\"}`} />\n\n              { (this.showDeleteIcon && this.value) && (\n                <ifx-icon tabindex={this.disabled ? '-1' : '0'} \n                class=\"delete-icon\" \n                icon=\"cRemove16\" \n                onKeyDown={(event) => event.key === 'Enter' && this.handleDeleteContent()} \n                onClick={() => this.handleDeleteContent()}></ifx-icon> \n              )}\n          </div>\n          {this.caption && !this.error &&\n            <div class={`textInput__bottom-wrapper-caption ${this.disabled} ? disabled : \"\"`}>\n              {this.caption}\n            </div>}\n          {this.error &&\n            <div class=\"textInput__bottom-wrapper-caption error\">\n              {this.caption}\n            </div>}\n        </div>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/text-field/text-field.stories.js

@@ -20,7 +20,8 @@ export default {
         value: '',
         autocomplete: 'on',
         type: 'text',
-        internalId: 'text-field'
+        internalId: 'text-field',
+        ariaLabel: 'text field for user input'
     },
     argTypes: {
         label: {
@@ -178,6 +179,19 @@ export default {
                 }
             }
         },
+        ariaLabel: {
+            description: 'Aria label of the Tag.',
+            control: 'text',
+            table: {
+                category: 'ARIA Labels',
+                defaultValue: {
+                    summary: '',
+                },
+                type: {
+                    summary: 'string',
+                },
+            },
+        },
         ifxInput: {
             action: 'ifxInput',
             description: 'Custom event emitted on input change.',
@@ -191,7 +205,7 @@ export default {
         },
     },
 };
-const DefaultTemplate = ({ error, disabled, success, size, placeholder, label, caption, icon, required, optional, name, maxlength, showDeleteIcon, value, autocomplete, type, internalId }) => {
+const DefaultTemplate = ({ error, disabled, success, size, placeholder, label, caption, icon, required, optional, name, maxlength, showDeleteIcon, value, autocomplete, type, internalId, ariaLabel }) => {
     const element = document.createElement('ifx-text-field');
     element.setAttribute('error', error);
     element.setAttribute('disabled', disabled);
@@ -208,6 +222,7 @@ const DefaultTemplate = ({ error, disabled, success, size, placeholder, label, c
     element.setAttribute('autocomplete', autocomplete);
     element.setAttribute('type', type);
     element.setAttribute('internal-id', internalId);
+    element.setAttribute('aria-label', ariaLabel);
     if (maxlength)
         element.setAttribute('maxlength', maxlength);
     element.addEventListener('ifxInput', action('ifxInput'));

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

@@ -1 +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: '',\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    autocomplete: 'on',\n    type: 'text',\n    internalId: 'text-field'\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.keys(icons),\n      control: 'select',\n      table: {\n        category: 'ifx-text-field props',\n        defaultValue: {\n          summary: ''\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    internalId: {\n      description: 'Sets the ID of the internal input and the value of htmlFor for the label element',\n      control: 'text',\n      table: {\n        category: 'ifx-text-field props',\n        defaultValue: {\n          summary: 'text-field'\n        },\n        type: {\n          summary: 'string'\n        }\n      }\n    },\n    autocomplete: {\n      description: 'Sets the autocomplete attribute. \"on\" by default.',\n      control: 'text',\n      table: {\n        category: 'ifx-text-field props',\n        type: {\n          summary: 'string'\n        }\n      }\n    },\n    type: {\n      description: 'Sets the type attribute. \"Text\" by default.',\n      options: ['text', 'password'],\n      control: 'radio',\n      table: {\n        category: 'ifx-text-field props',\n        type: {\n          summary: 'string'\n        },\n        defaultValue: {\n          summary: 'text'\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, autocomplete, type, internalId }) => {\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  element.setAttribute('autocomplete', autocomplete);\n  element.setAttribute('type', type);\n  element.setAttribute('internal-id', internalId);\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"]}
+{"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: '',\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    autocomplete: 'on',\n    type: 'text',\n    internalId: 'text-field',\n    ariaLabel: 'text field for user input'\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.keys(icons),\n      control: 'select',\n      table: {\n        category: 'ifx-text-field props',\n        defaultValue: {\n          summary: ''\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    internalId: {\n      description: 'Sets the ID of the internal input and the value of htmlFor for the label element',\n      control: 'text',\n      table: {\n        category: 'ifx-text-field props',\n        defaultValue: {\n          summary: 'text-field'\n        },\n        type: {\n          summary: 'string'\n        }\n      }\n    },\n    autocomplete: {\n      description: 'Sets the autocomplete attribute. \"on\" by default.',\n      control: 'text',\n      table: {\n        category: 'ifx-text-field props',\n        type: {\n          summary: 'string'\n        }\n      }\n    },\n    type: {\n      description: 'Sets the type attribute. \"Text\" by default.',\n      options: ['text', 'password'],\n      control: 'radio',\n      table: {\n        category: 'ifx-text-field props',\n        type: {\n          summary: 'string'\n        },\n        defaultValue: {\n          summary: 'text'\n        }\n      }\n    },\n    ariaLabel: {\n      description: 'Aria label of the Tag.',\n      control: 'text',\n      table: {\n        category: 'ARIA Labels',\n        defaultValue: {\n          summary: '',\n        },\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, autocomplete, type, internalId, ariaLabel }) => {\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  element.setAttribute('autocomplete', autocomplete);\n  element.setAttribute('type', type);\n  element.setAttribute('internal-id', internalId);\n  element.setAttribute('aria-label', ariaLabel);\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.css

@@ -48,8 +48,8 @@
   border: 1px solid #575352;
 }
 .wrapper__textarea textarea:focus-within {
-  outline: none;
-  border: 1px solid #0A8276;
+  outline: 2px solid #0A8276;
+  outline-offset: 0;
 }
 
 :host(.wrapper--error) .wrapper__textarea textarea {

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

@@ -54,8 +54,8 @@ export class TextArea {
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: '951419c82b71f92bc83f91fa69d6aab474ec9b71', class: `wrapper--${this.error ? 'error' : ''} wrapper--${this.disabled ? 'disabled' : ''}` }, h("label", { key: '0ea6af9a349ee0b01494ea6650b1d9c563e9fc7a', class: 'wrapper__label', htmlFor: this.inputId }, (_a = this.label) === null || _a === void 0 ? void 0 :
-            _a.trim(), this.required && (h("span", { key: '0c4a1f59774489ec9310aacbc253f9ddab50b446', class: `required ${this.error ? 'error' : ""}` }, "*"))), h("div", { key: 'f7f0816826bb60c9c32fb0734f86c7801a2bea0e', class: 'wrapper__textarea' }, h("textarea", { key: '41819e87ff5bd6979512f8fadd2bd7065026cdad', "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: 'f1649ab138f761a360d8519e96976b76a642d5e7', class: 'wrapper__caption' }, this.caption.trim()))));
+        return (h(Host, { key: '12bde489e47781aec33e8d4926c4df84f59b2fbb', class: `wrapper--${this.error ? 'error' : ''} wrapper--${this.disabled ? 'disabled' : ''}` }, h("label", { key: '5e71a8259e4bad4c128964b1f1ce88e7ab6e79a4', class: 'wrapper__label', htmlFor: this.inputId }, (_a = this.label) === null || _a === void 0 ? void 0 :
+            _a.trim(), this.required && (h("span", { key: '50e89654dd63aea0d30960538b7deed3e8ae5bb1', class: `required ${this.error ? 'error' : ""}` }, "*"))), h("div", { key: 'd385ecd414a6b71a06ca64a8db477229b070f333', class: 'wrapper__textarea' }, h("textarea", { key: '4047c48ea3444963990899301eca7d744a7cb7fc', "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: '7f5dcfefb8274224155d0b0dcbc556a5443e21bd', class: 'wrapper__caption' }, this.caption.trim()))));
     }
     static get is() { return "ifx-textarea"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tooltip/tooltip.js

@@ -155,10 +155,10 @@ export class Tooltip {
             'tooltip-extended': true,
             'visible': this.tooltipVisible,
         };
-        return (h("div", { key: '079e144b7d8cf6312e5e165ec776f52e15417307', "aria-label": "a tooltip showing important information", "aria-value": this.header, class: "tooltip__container" }, h("slot", { key: 'f5e242eabb2fa73b80c0bc182735b17bb7fa8ceb' }), this.variant.toLowerCase() === 'dismissible' && h("div", { key: '288354bac7953b5a0e6c3d464c96cd3ee7994386', class: tooltipDismissible }, h("button", { key: 'dc13ab57c1fdbcd11ac7f8754902e5f864c3004d', "aria-label": "Close Tooltip", class: "close-button", onClick: this.onDismissClick }, h("ifx-icon", { key: '783cfe7a879c05e69e3473661b36d17e2c565935', icon: "cross16" })), h("div", { key: '1642b238ba748d58ab44d63d71d757fab656bd8b', class: "tooltip-dismissible-content" }, this.header && h("div", { key: 'b4c26f058431a5955cbd386c3426fe34f3de0a7f', class: "tooltip-dismissible-header" }, this.header), h("div", { key: '79c24e30da4957adc55a2a7ac32989e9425d35ce', class: "tooltip-dismissible-body" }, this.text)), h("svg", { key: '9ae17ee987acc122ed58d49106bf98b26945c30d', 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: '4afd9b10d830241784a1d5f83c776dda35fe705b', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" }))), this.variant.toLowerCase() === 'compact' &&
-            h("div", { key: '051255636a8ae3afefbec6ebfd55fb678fe13309', class: tooltipCompact }, this.text, h("svg", { key: '03c160fd88050c1d020e421277dbeb2a695e2e67', 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: '08116653175441e46944a40b2ac4e5fcac2eaab4', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" }))), this.variant.toLowerCase() === 'extended' &&
-            h("div", { key: 'f90f9969f922c74ce1ee47ed514a69c9174a771e', class: tooltipExtended }, h("slot", { key: '54f4f4e0891b8bdb69ec92c824faa0f9b72adcb1', 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: '68dae1e20d9b332b9172834d661d2c284bcf7e19', class: "tooltip-extended-content" }, this.header && h("div", { key: '1d3d19a91d848673cad09e6ed69b6a020a7d7971', class: "tooltip-extended-header" }, this.header), h("div", { key: '1b2ddfc31755b92a7222e24db4d1ba09922f0799', class: "tooltip-extended-body" }, this.text)), h("svg", { key: 'c03ab4f480dc50c2b53b99796e6eb570348f0eb8', 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: '1f54bbdd47b72111f8f563ca394f20330ea29544', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" })))));
+        return (h("div", { key: '392a0dea33ce094c1c9edfa66bac570041c6faa8', "aria-label": this.ariaLabel, "aria-value": this.header, class: "tooltip__container" }, h("slot", { key: '060d3d893192da2f5c9e7da059a72ad24c3e96fb' }), this.variant.toLowerCase() === 'dismissible' && h("div", { key: 'f692d7b1592c89f011d5ecedf33bddf9eb76fea7', class: tooltipDismissible }, h("button", { key: 'ebb9ec532d359f6f3d7e27bce88d39a5bef0a02a', "aria-label": "Close Tooltip", class: "close-button", onClick: this.onDismissClick }, h("ifx-icon", { key: '5d6135b54703c7a9543913868033d20400c621d3', icon: "cross16" })), h("div", { key: '70a28bfc24bed55c221b2f63aabe22fe937cb9cb', class: "tooltip-dismissible-content" }, this.header && h("div", { key: 'a84b24eaf5770c80953a2a3b9bc58d4a47971d23', class: "tooltip-dismissible-header" }, this.header), h("div", { key: '5784c784d17950c0c656fd3b20b55d2c5439dfb4', class: "tooltip-dismissible-body" }, this.text)), h("svg", { key: '4873d99641fc0d149f7a8670d60b137da4850ec6', 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: 'fe2be9c1c3e054513a06279a93079ad27157c09f', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" }))), this.variant.toLowerCase() === 'compact' &&
+            h("div", { key: '8e01e6bce39dfe478415debfb61b2e9220b4d28e', class: tooltipCompact }, this.text, h("svg", { key: 'dab75581ded89658750d748b631a540c3f4f7646', 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: 'a25a3ec98ba2a6c59183ae0220a004d2c903757e', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" }))), this.variant.toLowerCase() === 'extended' &&
+            h("div", { key: '09283c102e17de29a463565681bca1eb5a1a0cb3', class: tooltipExtended }, h("slot", { key: '599a57702fbf73b7540eb59d3a7d2c1e82a63b06', 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: 'b0e22b8bab61afc6150a3d2aa7d79d9744a0abf8', class: "tooltip-extended-content" }, this.header && h("div", { key: 'e7b46d17bf65831f2875af89326d0a5774910192', class: "tooltip-extended-header" }, this.header), h("div", { key: 'e5123a74a9234baf5fb6b5f25026217ea066d6b2', class: "tooltip-extended-body" }, this.text)), h("svg", { key: '321c1f9fca215417f9f68998fc0de65dc23c4a80', 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: '99062b9d90e6c7c109612eb3b59170694c150f62', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" })))));
     }
     static get is() { return "ifx-tooltip"; }
     static get encapsulation() { return "shadow"; }
@@ -234,6 +234,25 @@ export class Tooltip {
                 "reflect": false,
                 "defaultValue": "'auto'"
             },
+            "ariaLabel": {
+                "type": "string",
+                "attribute": "aria-label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
             "variant": {
                 "type": "string",
                 "attribute": "variant",

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

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/components/tooltip/tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC1E,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,8BAA8B,CAAC;AACtE,OAAO,EAAE,eAAe,EAAE,MAAM,wCAAwC,CAAC;AAOzE,MAAM,OAAO,OAAO;IALpB;QAQW,mBAAc,GAAY,KAAK,CAAC;QACjC,WAAM,GAAW,EAAE,CAAC;QACpB,SAAI,GAAW,EAAE,CAAC;QAClB,aAAQ,GAA2G,MAAM,CAAC;QACzH,qBAAgB,GAA2G,MAAM,CAAC;QAEnI,YAAO,GAA2C,SAAS,CAAC;QAKpE,mBAAc,GAAQ,IAAI,CAAC;QA+G3B,iBAAY,GAAG,GAAG,EAAE;;YAClB,yCAAyC;YACzC,MAAA,IAAI,CAAC,cAAc,0CAAE,UAAU,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,iCACxC,OAAO,KACV,SAAS,EAAE;oBACT,GAAG,OAAO,CAAC,SAAS;oBACpB,EAAE,IAAI,EAAE,gBAAgB,EAAE,OAAO,EAAE,IAAI,EAAE;iBAC1C,IACD,CAAC,CAAC;YAEJ,iCAAiC;YACjC,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAExB,2BAA2B;YAC3B,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;YAC3B,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC;YAEvC,8DAA8D;YAC9D,MAAA,IAAI,CAAC,cAAc,0CAAE,MAAM,EAAE,CAAC;QAChC,CAAC,CAAA;QAGD,iBAAY,GAAG,GAAG,EAAE;YAClB,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;YAC5B,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;QAExC,CAAC,CAAA;QAMD,YAAO,GAAG,GAAG,EAAE;;YACb,IAAI,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,aAAa,EAAE,CAAC;gBACjD,IAAI,CAAC,gBAAgB,EAAE,CAAC;gBACxB,IAAI,CAAC,cAAc,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC;gBAC3C,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC;gBACtE,MAAA,IAAI,CAAC,cAAc,0CAAE,MAAM,EAAE,CAAC;YAChC,CAAC;QACH,CAAC,CAAA;QAED,mBAAc,GAAG,GAAG,EAAE;YACpB,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;YAC5B,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;QACxC,CAAC,CAAA;KAoEF;IA5NC,iBAAiB;QACf,IAAG,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC;YAC5C,IAAI,CAAC,OAAO,GAAG,SAAS,CAAA;QAC1B,CAAC;IACH,CAAC;IAED,KAAK,CAAC,gBAAgB;QACpB,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC;YACpC,MAAM,SAAS,GAAG,eAAe,EAAE,CAAC;YACpC,cAAc,CAAC,aAAa,EAAE,MAAM,SAAS,CAAC,CAAA;QAChD,CAAC;QACD,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAC,UAAU,CAAC;QAEvF,IAAG,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,SAAS,IAAI,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,UAAU,EAAE,CAAC;YACzF,WAAW,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC,CAAA;YAC7D,WAAW,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC,CAAA;QAC/D,CAAC;aAAI,CAAC;YACJ,WAAW,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;QACtD,CAAC;IAEH,CAAC;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,cAAc;YAAE,OAAO;QAEhC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC;QAC3B,IAAI,CAAC,SAAS,CAAC;QACf,IAAI,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,SAAS,EAAE,CAAC;YAC7C,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;QACxE,CAAC;aACI,IAAI,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,aAAa,EAAE,CAAC;YACtD,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC;QAC5E,CAAC;aACI,CAAC;YACJ,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;QAEzE,CAAC;QAED,MAAM,iBAAiB,GAAG,IAAI,CAAC,QAAQ,KAAK,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,qBAAqB,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC;QAElG,2BAA2B;QAC3B,IAAI,CAAC,gBAAgB,GAAG,iBAAiB,CAAC;QAE1C,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YAEvC,IAAI,CAAC,cAAc,GAAG,YAAY,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,SAAS,EAAE;gBACnE,SAAS,EAAE,IAAI,CAAC,gBAAgB;gBAChC,SAAS,EAAE;oBACT;wBACE,IAAI,EAAE,QAAQ;wBACd,OAAO,EAAE;4BACP,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAE,6FAA6F;yBAC9G;qBACF;oBACD;wBACE,IAAI,EAAE,OAAO;wBACb,OAAO,EAAE;4BACP,OAAO,EAAE,oBAAoB;yBAC9B;qBACF;iBACF;aACF,CAAC,CAAC;QAEL,CAAC;QAED,qEAAqE;QACrE,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,gBAAgB,EAAE,iBAAiB,CAAC,CAAC;IAGnE,CAAC;IAED,qBAAqB;QACnB,wFAAwF;QACxF,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,qBAAqB,EAAE,CAAC;QACtD,MAAM,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC,8BAA8B;QAC9D,MAAM,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC,yCAAyC;QAEzE,MAAM,oBAAoB,GAAG,IAAI,CAAC,GAAG,GAAG,OAAO,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;QAClE,MAAM,sBAAsB,GAAG,IAAI,CAAC,IAAI,GAAG,OAAO,GAAG,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;QAEpE,IAAI,IAAI,CAAC,QAAQ,KAAK,MAAM,EAAE,CAAC;YAC7B,IAAI,oBAAoB,GAAG,MAAM,CAAC,WAAW,GAAG,CAAC,EAAE,CAAC;gBAClD,IAAI,sBAAsB,GAAG,MAAM,CAAC,UAAU,GAAG,CAAC,EAAE,CAAC;oBACnD,OAAO,SAAS,CAAC;gBACnB,CAAC;qBAAM,CAAC;oBACN,OAAO,WAAW,CAAC;gBACrB,CAAC;YACH,CAAC;iBAAM,CAAC;gBACN,IAAI,sBAAsB,GAAG,MAAM,CAAC,UAAU,GAAG,CAAC,EAAE,CAAC;oBACnD,OAAO,YAAY,CAAC;gBACtB,CAAC;qBAAM,CAAC;oBACN,OAAO,cAAc,CAAC;gBACxB,CAAC;YACH,CAAC;QACH,CAAC;aAAM,CAAC;YACN,OAAO,IAAI,CAAC,QAAQ,CAAC;QACvB,CAAC;IACH,CAAC;IAGD,eAAe,CAAC,MAAW;;QACzB,IAAI,CAAC,gBAAgB,GAAG,MAAM,CAAC;QAC/B,MAAA,IAAI,CAAC,cAAc,0CAAE,OAAO,EAAE,CAAC;QAC/B,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC,8CAA8C;IAC5E,CAAC;IAgCD,oBAAoB;;QAClB,MAAA,IAAI,CAAC,cAAc,0CAAE,OAAO,EAAE,CAAC;IACjC,CAAC;IAgBD,MAAM;QACJ,MAAM,kBAAkB,GAAG;YACzB,qBAAqB,EAAE,IAAI;YAC3B,SAAS,EAAE,IAAI,CAAC,cAAc;SAC/B,CAAC;QAEF,MAAM,cAAc,GAAG;YACrB,iBAAiB,EAAE,IAAI;YACvB,SAAS,EAAE,IAAI,CAAC,cAAc;SAC/B,CAAC;QAEF,MAAM,eAAe,GAAG;YACtB,kBAAkB,EAAE,IAAI;YACxB,SAAS,EAAE,IAAI,CAAC,cAAc;SAC/B,CAAC;QAEF,OAAO,CACL,0EAAgB,yCAAyC,gBAAa,IAAI,CAAC,MAAM,EAAE,KAAK,EAAC,oBAAoB;YAC3G,8DAAa;YAEZ,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,aAAa,IAAI,4DAAK,KAAK,EAAE,kBAAkB;gBAC7E,6EAAmB,eAAe,EAAC,KAAK,EAAC,cAAc,EAAC,OAAO,EAAE,IAAI,CAAC,cAAc;oBAClF,iEAAU,IAAI,EAAC,SAAS,GAAY,CAC7B;gBACT,4DAAK,KAAK,EAAC,6BAA6B;oBACrC,IAAI,CAAC,MAAM,IAAI,4DAAK,KAAK,EAAC,4BAA4B,IAAE,IAAI,CAAC,MAAM,CAAO;oBAC3E,4DAAK,KAAK,EAAC,0BAA0B,IAAE,IAAI,CAAC,IAAI,CAAO,CACnD;gBACN,4DAAK,KAAK,EAAC,mBAAmB,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,GAAG,EAAC,OAAO,EAAC,UAAU,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B;oBACpH,6DAAM,EAAE,EAAC,WAAW,EAAC,CAAC,EAAC,oBAAoB,EAAC,IAAI,EAAC,SAAS,GAAG,CACzD,CACF;YAEL,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,SAAS;gBACvC,4DAAK,KAAK,EAAE,cAAc;oBACvB,IAAI,CAAC,IAAI;oBACV,4DAAK,KAAK,EAAC,mBAAmB,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,GAAG,EAAC,OAAO,EAAC,UAAU,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B;wBACpH,6DAAM,EAAE,EAAC,WAAW,EAAC,CAAC,EAAC,oBAAoB,EAAC,IAAI,EAAC,SAAS,GAAG,CACzD,CACF;YAEP,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,UAAU;gBACxC,4DAAK,KAAK,EAAE,eAAe;oBACzB,6DAAM,IAAI,EAAC,MAAM,IACd,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,WAAK,KAAK,EAAC,eAAe;wBAAC,gBAAU,IAAI,EAAE,IAAI,CAAC,IAAI,GAAa,CAAM,CAAC,CAAC;wBACpF,WAAK,KAAK,EAAC,eAAe,EAAC,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW;4BAClH,YAAM,MAAM,EAAC,MAAM,oBAAgB,OAAO,qBAAiB,OAAO,EAAC,CAAC,EAAC,kFAAkF,GAAG;4BAC1J,YAAM,MAAM,EAAC,MAAM,EAAC,CAAC,EAAC,wEAAwE,GAAG;4BACjG,YAAM,IAAI,EAAC,MAAM,EAAC,CAAC,EAAC,8CAA8C,GAAG,CACjE,CAEH;oBACP,4DAAK,KAAK,EAAC,0BAA0B;wBAClC,IAAI,CAAC,MAAM,IAAI,4DAAK,KAAK,EAAC,yBAAyB,IAAE,IAAI,CAAC,MAAM,CAAO;wBACxE,4DAAK,KAAK,EAAC,uBAAuB,IAAE,IAAI,CAAC,IAAI,CAAO,CAChD;oBACN,4DAAK,KAAK,EAAC,mBAAmB,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,GAAG,EAAC,OAAO,EAAC,UAAU,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B;wBACpH,6DAAM,EAAE,EAAC,WAAW,EAAC,CAAC,EAAC,oBAAoB,EAAC,IAAI,EAAC,SAAS,GAAG,CACzD,CACD,CAEL,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGF","sourcesContent":["import { Component, Prop, h, Element, State, Watch } from '@stencil/core';\nimport { createPopper } from '@popperjs/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n  tag: 'ifx-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  async componentDidLoad() {\n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-tooltip', await framework)\n    }\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}"]}
+{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/components/tooltip/tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC1E,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,8BAA8B,CAAC;AACtE,OAAO,EAAE,eAAe,EAAE,MAAM,wCAAwC,CAAC;AAOzE,MAAM,OAAO,OAAO;IALpB;QAQW,mBAAc,GAAY,KAAK,CAAC;QACjC,WAAM,GAAW,EAAE,CAAC;QACpB,SAAI,GAAW,EAAE,CAAC;QAClB,aAAQ,GAA2G,MAAM,CAAC;QACzH,qBAAgB,GAA2G,MAAM,CAAC;QAEnI,YAAO,GAA2C,SAAS,CAAC;QAKpE,mBAAc,GAAQ,IAAI,CAAC;QA+G3B,iBAAY,GAAG,GAAG,EAAE;;YAClB,yCAAyC;YACzC,MAAA,IAAI,CAAC,cAAc,0CAAE,UAAU,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,iCACxC,OAAO,KACV,SAAS,EAAE;oBACT,GAAG,OAAO,CAAC,SAAS;oBACpB,EAAE,IAAI,EAAE,gBAAgB,EAAE,OAAO,EAAE,IAAI,EAAE;iBAC1C,IACD,CAAC,CAAC;YAEJ,iCAAiC;YACjC,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAExB,2BAA2B;YAC3B,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;YAC3B,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC;YAEvC,8DAA8D;YAC9D,MAAA,IAAI,CAAC,cAAc,0CAAE,MAAM,EAAE,CAAC;QAChC,CAAC,CAAA;QAGD,iBAAY,GAAG,GAAG,EAAE;YAClB,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;YAC5B,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;QAExC,CAAC,CAAA;QAMD,YAAO,GAAG,GAAG,EAAE;;YACb,IAAI,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,aAAa,EAAE,CAAC;gBACjD,IAAI,CAAC,gBAAgB,EAAE,CAAC;gBACxB,IAAI,CAAC,cAAc,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC;gBAC3C,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC;gBACtE,MAAA,IAAI,CAAC,cAAc,0CAAE,MAAM,EAAE,CAAC;YAChC,CAAC;QACH,CAAC,CAAA;QAED,mBAAc,GAAG,GAAG,EAAE;YACpB,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;YAC5B,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;QACxC,CAAC,CAAA;KAoEF;IA5NC,iBAAiB;QACf,IAAG,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC;YAC5C,IAAI,CAAC,OAAO,GAAG,SAAS,CAAA;QAC1B,CAAC;IACH,CAAC;IAED,KAAK,CAAC,gBAAgB;QACpB,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC;YACpC,MAAM,SAAS,GAAG,eAAe,EAAE,CAAC;YACpC,cAAc,CAAC,aAAa,EAAE,MAAM,SAAS,CAAC,CAAA;QAChD,CAAC;QACD,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAC,UAAU,CAAC;QAEvF,IAAG,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,SAAS,IAAI,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,UAAU,EAAE,CAAC;YACzF,WAAW,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC,CAAA;YAC7D,WAAW,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC,CAAA;QAC/D,CAAC;aAAI,CAAC;YACJ,WAAW,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;QACtD,CAAC;IAEH,CAAC;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,cAAc;YAAE,OAAO;QAEhC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC;QAC3B,IAAI,CAAC,SAAS,CAAC;QACf,IAAI,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,SAAS,EAAE,CAAC;YAC7C,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;QACxE,CAAC;aACI,IAAI,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,aAAa,EAAE,CAAC;YACtD,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC;QAC5E,CAAC;aACI,CAAC;YACJ,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;QAEzE,CAAC;QAED,MAAM,iBAAiB,GAAG,IAAI,CAAC,QAAQ,KAAK,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,qBAAqB,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC;QAElG,2BAA2B;QAC3B,IAAI,CAAC,gBAAgB,GAAG,iBAAiB,CAAC;QAE1C,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YAEvC,IAAI,CAAC,cAAc,GAAG,YAAY,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,SAAS,EAAE;gBACnE,SAAS,EAAE,IAAI,CAAC,gBAAgB;gBAChC,SAAS,EAAE;oBACT;wBACE,IAAI,EAAE,QAAQ;wBACd,OAAO,EAAE;4BACP,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAE,6FAA6F;yBAC9G;qBACF;oBACD;wBACE,IAAI,EAAE,OAAO;wBACb,OAAO,EAAE;4BACP,OAAO,EAAE,oBAAoB;yBAC9B;qBACF;iBACF;aACF,CAAC,CAAC;QAEL,CAAC;QAED,qEAAqE;QACrE,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,gBAAgB,EAAE,iBAAiB,CAAC,CAAC;IAGnE,CAAC;IAED,qBAAqB;QACnB,wFAAwF;QACxF,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,qBAAqB,EAAE,CAAC;QACtD,MAAM,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC,8BAA8B;QAC9D,MAAM,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC,yCAAyC;QAEzE,MAAM,oBAAoB,GAAG,IAAI,CAAC,GAAG,GAAG,OAAO,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;QAClE,MAAM,sBAAsB,GAAG,IAAI,CAAC,IAAI,GAAG,OAAO,GAAG,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;QAEpE,IAAI,IAAI,CAAC,QAAQ,KAAK,MAAM,EAAE,CAAC;YAC7B,IAAI,oBAAoB,GAAG,MAAM,CAAC,WAAW,GAAG,CAAC,EAAE,CAAC;gBAClD,IAAI,sBAAsB,GAAG,MAAM,CAAC,UAAU,GAAG,CAAC,EAAE,CAAC;oBACnD,OAAO,SAAS,CAAC;gBACnB,CAAC;qBAAM,CAAC;oBACN,OAAO,WAAW,CAAC;gBACrB,CAAC;YACH,CAAC;iBAAM,CAAC;gBACN,IAAI,sBAAsB,GAAG,MAAM,CAAC,UAAU,GAAG,CAAC,EAAE,CAAC;oBACnD,OAAO,YAAY,CAAC;gBACtB,CAAC;qBAAM,CAAC;oBACN,OAAO,cAAc,CAAC;gBACxB,CAAC;YACH,CAAC;QACH,CAAC;aAAM,CAAC;YACN,OAAO,IAAI,CAAC,QAAQ,CAAC;QACvB,CAAC;IACH,CAAC;IAGD,eAAe,CAAC,MAAW;;QACzB,IAAI,CAAC,gBAAgB,GAAG,MAAM,CAAC;QAC/B,MAAA,IAAI,CAAC,cAAc,0CAAE,OAAO,EAAE,CAAC;QAC/B,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC,8CAA8C;IAC5E,CAAC;IAgCD,oBAAoB;;QAClB,MAAA,IAAI,CAAC,cAAc,0CAAE,OAAO,EAAE,CAAC;IACjC,CAAC;IAgBD,MAAM;QACJ,MAAM,kBAAkB,GAAG;YACzB,qBAAqB,EAAE,IAAI;YAC3B,SAAS,EAAE,IAAI,CAAC,cAAc;SAC/B,CAAC;QAEF,MAAM,cAAc,GAAG;YACrB,iBAAiB,EAAE,IAAI;YACvB,SAAS,EAAE,IAAI,CAAC,cAAc;SAC/B,CAAC;QAEF,MAAM,eAAe,GAAG;YACtB,kBAAkB,EAAE,IAAI;YACxB,SAAS,EAAE,IAAI,CAAC,cAAc;SAC/B,CAAC;QAEF,OAAO,CACL,0EAAiB,IAAI,CAAC,SAAS,gBAAc,IAAI,CAAC,MAAM,EAAE,KAAK,EAAC,oBAAoB;YAClF,8DAAa;YAEZ,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,aAAa,IAAI,4DAAK,KAAK,EAAE,kBAAkB;gBAC7E,6EAAmB,eAAe,EAAC,KAAK,EAAC,cAAc,EAAC,OAAO,EAAE,IAAI,CAAC,cAAc;oBAClF,iEAAU,IAAI,EAAC,SAAS,GAAY,CAC7B;gBACT,4DAAK,KAAK,EAAC,6BAA6B;oBACrC,IAAI,CAAC,MAAM,IAAI,4DAAK,KAAK,EAAC,4BAA4B,IAAE,IAAI,CAAC,MAAM,CAAO;oBAC3E,4DAAK,KAAK,EAAC,0BAA0B,IAAE,IAAI,CAAC,IAAI,CAAO,CACnD;gBACN,4DAAK,KAAK,EAAC,mBAAmB,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,GAAG,EAAC,OAAO,EAAC,UAAU,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B;oBACpH,6DAAM,EAAE,EAAC,WAAW,EAAC,CAAC,EAAC,oBAAoB,EAAC,IAAI,EAAC,SAAS,GAAG,CACzD,CACF;YAEL,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,SAAS;gBACvC,4DAAK,KAAK,EAAE,cAAc;oBACvB,IAAI,CAAC,IAAI;oBACV,4DAAK,KAAK,EAAC,mBAAmB,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,GAAG,EAAC,OAAO,EAAC,UAAU,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B;wBACpH,6DAAM,EAAE,EAAC,WAAW,EAAC,CAAC,EAAC,oBAAoB,EAAC,IAAI,EAAC,SAAS,GAAG,CACzD,CACF;YAEP,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,UAAU;gBACxC,4DAAK,KAAK,EAAE,eAAe;oBACzB,6DAAM,IAAI,EAAC,MAAM,IACd,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,WAAK,KAAK,EAAC,eAAe;wBAAC,gBAAU,IAAI,EAAE,IAAI,CAAC,IAAI,GAAa,CAAM,CAAC,CAAC;wBACpF,WAAK,KAAK,EAAC,eAAe,EAAC,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW;4BAClH,YAAM,MAAM,EAAC,MAAM,oBAAgB,OAAO,qBAAiB,OAAO,EAAC,CAAC,EAAC,kFAAkF,GAAG;4BAC1J,YAAM,MAAM,EAAC,MAAM,EAAC,CAAC,EAAC,wEAAwE,GAAG;4BACjG,YAAM,IAAI,EAAC,MAAM,EAAC,CAAC,EAAC,8CAA8C,GAAG,CACjE,CAEH;oBACP,4DAAK,KAAK,EAAC,0BAA0B;wBAClC,IAAI,CAAC,MAAM,IAAI,4DAAK,KAAK,EAAC,yBAAyB,IAAE,IAAI,CAAC,MAAM,CAAO;wBACxE,4DAAK,KAAK,EAAC,uBAAuB,IAAE,IAAI,CAAC,IAAI,CAAO,CAChD;oBACN,4DAAK,KAAK,EAAC,mBAAmB,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,GAAG,EAAC,OAAO,EAAC,UAAU,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B;wBACpH,6DAAM,EAAE,EAAC,WAAW,EAAC,CAAC,EAAC,oBAAoB,EAAC,IAAI,EAAC,SAAS,GAAG,CACzD,CACD,CAEL,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGF","sourcesContent":["import { Component, Prop, h, Element, State, Watch } from '@stencil/core';\nimport { createPopper } from '@popperjs/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n  tag: 'ifx-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  @Prop() ariaLabel: string | null;\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  async componentDidLoad() {\n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-tooltip', await framework)\n    }\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={this.ariaLabel} 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

@@ -8,6 +8,7 @@ export default {
         position: 'auto',
         variant: 'compact',
         icon: 'c-info-16',
+        ariaLabel: 'Tooltip with important information'
     },
     argTypes: {
         text: {
@@ -67,9 +68,22 @@ export default {
                 }
             }
         },
+        ariaLabel: {
+            description: 'Defines the aria-label for the tooltip, providing a text alternative for screen readers.',
+            control: 'text',
+            table: {
+                category: 'ifx-tooltip props',
+                type: {
+                    summary: 'string | null'
+                },
+                defaultValue: {
+                    summary: 'null'
+                }
+            }
+        }
     },
 };
-const DefaultTemplate = ({ header, text, variant, position, icon }) => {
+const DefaultTemplate = ({ header, text, variant, position, icon, ariaLabel }) => {
     const element = document.createElement('ifx-tooltip');
     if (variant === 'dismissible' || variant === 'extended') {
         element.setAttribute('header', header);
@@ -78,6 +92,7 @@ const DefaultTemplate = ({ header, text, variant, position, icon }) => {
     element.setAttribute('variant', variant === 'extended' ? 'extended' : variant);
     element.setAttribute('position', position);
     element.setAttribute('icon', icon);
+    element.setAttribute('aria-label', ariaLabel);
     element.textContent = `I'm the tooltip reference element - Please ${variant === 'dismissible' ? 'click' : 'hover'} me`; // Set content for the reference element
     return element;
 };

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

@@ -1 +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-16',\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.keys(icons),\n      control: 'select',\n      table: {\n        category: 'ifx-tooltip props',\n        type: {\n          summary: 'string',\n          defaultValue: {\n            summary: 'c-info-16'\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"]}
+{"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-16',\n    ariaLabel: 'Tooltip with important information'\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.keys(icons),\n      control: 'select',\n      table: {\n        category: 'ifx-tooltip props',\n        type: {\n          summary: 'string',\n          defaultValue: {\n            summary: 'c-info-16'\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    ariaLabel: {\n      description: 'Defines the aria-label for the tooltip, providing a text alternative for screen readers.',\n      control: 'text',\n      table: {\n        category: 'ifx-tooltip props',\n        type: {\n          summary: 'string | null'\n        },\n        defaultValue: {\n          summary: 'null'\n        }\n      }\n    }\n  },\n};\n\nconst DefaultTemplate = ({ header, text, variant, position, icon, ariaLabel }) => {\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  element.setAttribute('aria-label', ariaLabel);\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/components/tree-view/tree-view-item.js

@@ -356,12 +356,12 @@ export class TreeViewItem {
         };
     }
     render() {
-        return (h("div", { key: '9d2a45503ddf4f0039c08fdfc03a2cc8f8cf6ea5', class: {
+        return (h("div", { key: '162ae23e62d1e72d51db7be555af269a404a8a8b', class: {
                 'tree-item': true,
                 'tree-item--expanded': this.isExpanded,
                 'tree-item--has-children': this.hasChildren,
                 'tree-item--disabled': this.disabled,
-            }, role: "treeitem", "aria-expanded": this.isExpanded ? 'true' : 'false', "data-level": this.level, "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel }, h("div", { key: '98d93c5ec96f9d24ae9a200825a8d25993ffea14', class: "tree-item__content" }, h("div", { key: '9413dbf670d5c38bc62a410ddf75339dba3cd73c', class: "tree-item__checkbox-container", onClick: e => e.stopPropagation() }, h("ifx-checkbox", { key: '3fefd8e77f8cf5073f5c020007549452e5501215', size: 's', checked: this.partialChecked ? false : this.isChecked, indeterminate: this.partialChecked, onIfxChange: this.handleCheckboxChange, disabled: this.disabled })), h("div", { key: '6e272b043e8514e002f40789125f50b3a01f2a1c', class: "tree-item__header", style: { paddingLeft: `${this.level * 24 + 10}px` }, onClick: this.handleHeaderClick, tabIndex: -1, "aria-disabled": this.disabled ? 'true' : undefined }, this.hasChildren && (h("div", { key: '1fca7a1ef266fcc053d58db5b04847875a0d0b1c', class: "tree-item__chevron-container", onClick: this.toggleExpand }, h("ifx-icon", { key: 'b46989513a66a0b7705a88b8d84183456b1ae100', class: `tree-item__chevron ${this.isExpanded ? 'chevron-down' : 'chevron-right'}`, icon: "chevron-right-16" }), h("div", { key: '0c9b345b9cec677f19947edffee434fd85ab6d1d', class: "tree-item__line" }))), h("div", { key: 'a35dd0b7870afb253e4f4b425b1626a0f3f70ba6', class: "tree-item__label-icon-container", tabIndex: this.disabled ? -1 : 0, onKeyDown: this.handleKeyDown }, h("div", { key: '9460601181841d66a949e853819c31f2722ca3b7', class: "tree-item__icon-container" }, this.hasChildren ? (h(Fragment, null, h("ifx-icon", { class: { 'icon--hidden': this.isExpanded }, icon: "folder-16" }), h("ifx-icon", { class: { 'icon--hidden': !this.isExpanded }, icon: "folder-open-16" }))) : (h("ifx-icon", { icon: "file-16" }))), h("span", { key: '417bd3a16ed0a142d24737912c743f0074dc5137', class: "tree-item__label" }, h("slot", { key: 'f60932832ebac5471f3f5a820f07bc45cd8586aa' }))))), this.isExpanded && h("div", { key: '8c3bc5b44350f232d74b1636dd893826ee32dacd', class: "tree-item__children" }, h("slot", { key: 'a392c5a65c2ffad4a5b89e2588792976f1cdf478', name: "children" }))));
+            }, role: "treeitem", "aria-expanded": this.isExpanded ? 'true' : 'false', "data-level": this.level, "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel }, h("div", { key: 'befe8adcc6e30761593f89dcbc0b0afe3699e002', class: "tree-item__content" }, h("div", { key: '5ad3f49e004fed83f1541ecef8bd94fd78ddc59f', class: "tree-item__checkbox-container", onClick: e => e.stopPropagation() }, h("ifx-checkbox", { key: 'c038eb439265d26b74e6598a488f2d41a6d5dd96', size: 's', checked: this.partialChecked ? false : this.isChecked, indeterminate: this.partialChecked, onIfxChange: this.handleCheckboxChange, disabled: this.disabled })), h("div", { key: '316f703d55730d34724c8ef8568d55fc69e6815b', class: "tree-item__header", style: { paddingLeft: `${this.level * 24 + 10}px` }, onClick: this.handleHeaderClick, tabIndex: -1, "aria-disabled": this.disabled ? 'true' : undefined }, this.hasChildren && (h("div", { key: 'd2a8e5a1a403e6a239056a353d3bc38d209e0907', class: "tree-item__chevron-container", onClick: this.toggleExpand }, h("ifx-icon", { key: 'ea9ea3c3e9dc083b53faf27a89b73df19d2e68ca', class: `tree-item__chevron ${this.isExpanded ? 'chevron-down' : 'chevron-right'}`, icon: "chevron-right-16" }), h("div", { key: '14be28eda1a6d823f3416b6fdef0cd17cbc5a39f', class: "tree-item__line" }))), h("div", { key: '488409621c1355737f0e5d7f5b90d6b94465cdaa', class: "tree-item__label-icon-container", tabIndex: this.disabled ? -1 : 0, onKeyDown: this.handleKeyDown }, h("div", { key: '163c36cdda49d36c94f7c7f18539f8e71bf04ed2', class: "tree-item__icon-container" }, this.hasChildren ? (h(Fragment, null, h("ifx-icon", { class: { 'icon--hidden': this.isExpanded }, icon: "folder-16" }), h("ifx-icon", { class: { 'icon--hidden': !this.isExpanded }, icon: "folder-open-16" }))) : (h("ifx-icon", { icon: "file-16" }))), h("span", { key: '42f0d9e90ae841e206318811c73e54bcf44c3cee', class: "tree-item__label" }, h("slot", { key: 'a06b08003dbaf058dee39508b193e4a5b94f65a7' }))))), this.isExpanded && h("div", { key: 'fc197474a8d0ba6d16cceede2ebef4c5db296501', class: "tree-item__children" }, h("slot", { key: 'cda8a8d46c3a59af25371545611bd6c9229be625', name: "children" }))));
     }
     static get is() { return "ifx-tree-view-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tree-view/tree-view.js

@@ -36,7 +36,7 @@ export class TreeView {
         }
     }
     render() {
-        return (h("div", { key: '9de7b6668d3a669f8edf68007faa931adcf6cb99', class: `tree-view ${this.disableAllItems ? ' tree-view--disabled' : ''}`, role: "tree", "aria-label": this.ariaLabel }, this.label && this.label.trim() !== '' && h("div", { key: 'a22176e6154132f7af0de7ddd63d7bf42d3378e3', class: "tree-view__label" }, this.label), h("slot", { key: '85a409e32ac9425449fdcd5c0a5b993391dd09ef', ref: this.handleSlotRef })));
+        return (h("div", { key: '2416bba6c7a463c881349da1040cf63634ee75d5', class: `tree-view ${this.disableAllItems ? ' tree-view--disabled' : ''}`, role: "tree", "aria-label": this.ariaLabel }, this.label && this.label.trim() !== '' && h("div", { key: '84f4d5a8610fd7c92059b3e04c99b92271bcf5df', class: "tree-view__label" }, this.label), h("slot", { key: '2adfecbdcf546603e8da93a30db53f3d5ca7f5e1', ref: this.handleSlotRef })));
     }
     static get is() { return "ifx-tree-view"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/stories/setup-and-installation/faq/faq.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class Faq {
     render() {
-        return (h("div", { key: '225fe6a1692f8b6475e3cda101eb192cf3f51de6', class: 'container' }, h("ifx-accordion", { key: '1df94194f6d4e1a897650005b7e9f71f4a6148a4' }, h("ifx-accordion-item", { key: 'ec8ff8d9e0004611ef5c21c93394f93078797e3f', 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: '376d2e11e1d93d8ef048317e98a7e927964febd5', 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: '55ef07d5c96ebb72fc3c5d28b460940f7fc71296', 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: '87a51df79c2fa1b846ddfeb338cc33cc9a4a0a3f', 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: '3d445ccf2d8b3b148e969ee2f12b416844754aec', 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: 'd65665af11d77f22eba694be830c0d2cbd1c2aed', class: 'container' }, h("ifx-accordion", { key: '21a6945e8e2989152d4ae3b525d0b03100289a53' }, h("ifx-accordion-item", { key: '6a17004a92a541a569d0a0fcfc99ab3b036e0321', 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: '173ea57ea7fb62173945b1c8c804e2472f174f34', 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: '7344d949d820868fee6ab85b8197fdde1b4574c7', 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: '6f242e7e3a4116bdf122905becd07fc8f8f4cd22', 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: '1dd2fe2389021540de4d1ded1f66003592644a1d', 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-card.js

@@ -2,7 +2,7 @@ import { p as proxyCustomElement, H, h, a as Host } from './index.js';
 import { d as detectFramework, t as trackComponent } from './p-DcmcuUOA.js';
 import { i as isNestedInIfxComponent } from './p-Bw2fh5LT.js';
 
-const cardCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}:host{display:inline-flex}.card{position:relative;display:inline-flex;flex-direction:column;word-wrap:break-word;background-color:#FFFFFF;background-clip:border-box;border:1px solid #EEEDED;border-radius:1px;width:350px;height:auto;font-family:var(--ifx-font-family)}.card:has(.card-href:focus),.card:has(.card-href:hover){outline:none;border-color:#0A8276}.card:has(.card-href:focus) ::slotted(ifx-card-headline),.card:has(.card-href:hover) ::slotted(ifx-card-headline){color:#0A8276}.card.noBtns .vertical .lower__body-wrapper{padding-bottom:24px}.card.noBtns .horizontal .lower__body-wrapper{padding-bottom:24px}.card .horizontal{display:flex;flex-direction:row;min-height:218px}.card .horizontal .card-img{flex:1;text-decoration:none}.card .horizontal .card-img.noImage{display:none}.card .horizontal .card-img ::slotted([slot=img]){width:100%;vertical-align:bottom}.card .horizontal .lower__body-wrapper{flex:1;display:grid;grid-template-rows:1fr auto}.card .horizontal .lower__body-wrapper .upper-body{display:flex;flex-direction:column;text-decoration:none;color:#1D1D1D;padding:24px 24px 0px 24px}.card .vertical .upper__body-wrapper{text-decoration:none;color:#1D1D1D}.card .vertical .upper__body-wrapper .card-img{height:190px}.card .vertical .upper__body-wrapper .card-img.noImage{display:none}.card .vertical .upper__body-wrapper .upper-body{padding:24px 24px 0px 24px}.card .vertical .lower__body-wrapper:hover{border-color:#EEEDED}.card.horizontal{flex-direction:row;width:538px}.card.horizontal .card-img{flex:1;order:2}.card.horizontal .card-img ::slotted([slot=img]){width:100%;height:100%;vertical-align:bottom;object-fit:cover}.card.horizontal.left .horizontal .card-img{order:1}.card.horizontal.left .horizontal .lower__body-wrapper{order:2}.card .card-href:focus{outline:none}";
+const cardCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}:host{display:inline-flex}.card{position:relative;display:inline-flex;flex-direction:column;word-wrap:break-word;background-color:#FFFFFF;background-clip:border-box;border:2px solid #EEEDED;border-radius:2px;width:350px;height:auto;font-family:var(--ifx-font-family)}.card:has(.card-href:focus),.card:has(.card-href:hover){outline:none;border-color:#0A8276}.card:has(.card-href:focus) ::slotted(ifx-card-headline),.card:has(.card-href:hover) ::slotted(ifx-card-headline){color:#0A8276}.card.noBtns .vertical .lower__body-wrapper{padding-bottom:24px}.card.noBtns .horizontal .lower__body-wrapper{padding-bottom:24px}.card .horizontal{display:flex;flex-direction:row;min-height:218px}.card .horizontal .card-img{flex:1;text-decoration:none}.card .horizontal .card-img.noImage{display:none}.card .horizontal .card-img ::slotted([slot=img]){width:100%;vertical-align:bottom}.card .horizontal .lower__body-wrapper{flex:1;display:grid;grid-template-rows:1fr auto}.card .horizontal .lower__body-wrapper .upper-body{display:flex;flex-direction:column;text-decoration:none;color:#1D1D1D;padding:24px 24px 0px 24px}.card .vertical .upper__body-wrapper{text-decoration:none;color:#1D1D1D}.card .vertical .upper__body-wrapper .card-img{height:190px}.card .vertical .upper__body-wrapper .card-img.noImage{display:none}.card .vertical .upper__body-wrapper .upper-body{padding:24px 24px 0px 24px}.card .vertical .lower__body-wrapper:hover{border-color:#EEEDED}.card.horizontal{flex-direction:row;width:538px}.card.horizontal .card-img{flex:1;order:2}.card.horizontal .card-img ::slotted([slot=img]){width:100%;height:100%;vertical-align:bottom;object-fit:cover}.card.horizontal.left .horizontal .card-img{order:1}.card.horizontal.left .horizontal .lower__body-wrapper{order:2}.card .card-href:focus{outline:none}";
 
 const Card = /*@__PURE__*/ proxyCustomElement(class Card extends H {
     constructor() {
@@ -20,24 +20,14 @@ const Card = /*@__PURE__*/ proxyCustomElement(class Card extends H {
     handleComponentAdjustment() {
         const image = this.el.querySelector('ifx-card-image');
         const links = this.el.querySelector('ifx-card-links');
-        if (!image) {
-            this.noImg = true;
-        }
-        else
-            this.noImg = false;
-        if (!links) {
-            this.noBtns = true;
-        }
-        else
-            this.noBtns = false;
+        this.noImg = !image;
+        this.noBtns = !links;
         if (this.href.trim() === "") {
             this.internalHref = undefined;
         }
-        else
+        else {
             this.internalHref = this.href;
-    }
-    handleClassList(el, type, className) {
-        el.classList[type](className);
+        }
     }
     componentWillLoad() {
         this.handleComponentAdjustment();
@@ -52,12 +42,12 @@ const Card = /*@__PURE__*/ proxyCustomElement(class Card extends H {
         this.handleComponentAdjustment();
     }
     render() {
-        return (h(Host, { key: '3a6943f0f1aa3ee634d433d05c542ee7b9b72e69' }, h("div", { key: '229574b0f669dd3b30a71d094698d5455165d9d2', "aria-label": this.ariaLabel, class: `card 
-          ${this.noBtns ? 'noBtns' : ""}
-          ${this.direction} 
-          ${this.alignment}`, role: "region" }, this.direction === 'horizontal' &&
-            h("div", { key: 'f3816627bb7f132608a20ca6318ae7f112607cc2', class: "horizontal" }, h("a", { key: '0ecded0f956f06f7148418582e77def35c2a313b', class: `card-img ${this.noImg ? 'noImage' : ""} ${this.internalHref ? 'card-href' : ''}`, href: this.internalHref }, h("slot", { key: '2f008321ec850c85d56049cb67e378760d2e3ea2', name: "img" })), h("div", { key: '2e9455f45aaf6c230aa2b60607397f161bd41e2d', class: 'lower__body-wrapper' }, h("a", { key: '156a10f3416703248152e4494f339e40012131cd', class: `upper-body ${this.internalHref ? 'card-href' : ''}`, href: this.internalHref }, h("slot", { key: 'ee3126d09544d828c0f10c4d1d2ee3cd3a952ce7' })), h("div", { key: '3581851fa9fd0ee7e76753ee7beaf65774665bf7' }, h("slot", { key: '6b05e2c89e3b694b1aa8e3aac33f9848802a5665', name: 'buttons' })))), this.direction === 'vertical' &&
-            h("div", { key: 'a586ca1d70852798681f52eeee5e991336f130c6', class: "vertical" }, h("a", { key: 'e6cd065de551b3ba9d73c9fd73c97421f7f44c57', class: `upper__body-wrapper ${this.internalHref ? 'card-href' : ''}`, href: this.internalHref, target: this.target }, h("div", { key: 'e59a87785b9590316c8e118a7ce133fae644491d', class: `card-img ${this.noImg ? 'noImage' : ""}` }, h("slot", { key: 'fbee6d02cfa0c3c2b3a3fc0df61c743137b94c94', name: "img" })), h("div", { key: 'bc3fde0afb8c9af15ceec92020164f70cb2a9857', class: 'upper-body' }, h("slot", { key: 'c69cd3e3004f5975273aa7155cf880684878a85e' }))), h("div", { key: '6920488d4b4904eb72adb9eacb37e65eacf99b30', class: 'lower__body-wrapper' }, h("slot", { key: 'd9db8d30a6d8615d3d6a3e06415886e9e126bca6', name: 'buttons' }))))));
+        return (h(Host, { key: 'a9afa27e59022cace5a5ec69ca920c1c47a88fdb' }, h("div", { key: '6010fdacc6f61bceadeeb4a8b55b26e2607b10a4', "aria-label": this.ariaLabel, class: `card 
+            ${this.noBtns ? 'noBtns' : ""}
+            ${this.direction} 
+            ${this.alignment}`, role: "group" }, this.direction === 'horizontal' &&
+            h("div", { key: '0943cf3474fbed74c928b192a4ba2ac139b480a0', class: "horizontal" }, h("a", { key: 'b0e540e6ceb537615059f53bc51483caa1b17bcf', class: `card-img ${this.noImg ? 'noImage' : ""} ${this.internalHref ? 'card-href' : ''}`, href: this.internalHref }, h("slot", { key: '3817324c5c0297cbe64460b3b54195f013b1fb1c', name: "img" })), h("div", { key: '3c610343ecc5fe770152af793ded7465de7c4ccc', class: 'lower__body-wrapper' }, h("a", { key: '2b6038ddb4fa9504b89c7a1f418eb18f371ba953', class: `upper-body ${this.internalHref ? 'card-href' : ''}`, href: this.internalHref, id: "upper-body-content" }, h("slot", { key: '6f29b91dd3d5a87fe426b5dada1d648a748c19ac' })), h("div", { key: '724391212b40fbe3e26a4e951fba3122b7726fc5' }, h("slot", { key: 'ad56b50726dfa188a4939a19cb22341bfdfcfa8a', name: 'buttons' })))), this.direction === 'vertical' &&
+            h("div", { key: '868c89a9c7af7b98b376aa99fa33a0c12a38c456', class: "vertical" }, h("a", { key: 'f77b8835e27b3a60e31241b0a030350269394974', class: `upper__body-wrapper ${this.internalHref ? 'card-href' : ''}`, href: this.internalHref, target: this.target }, h("div", { key: '514d39de5bcc9b36f0808b2d106087dc7da04e5e', class: `card-img ${this.noImg ? 'noImage' : ""}` }, h("slot", { key: '9282280621babbd6f6c453b87521168d53cbca2f', name: "img" })), h("div", { key: 'a11c7ae3d1dd7f3fdb17cca9487f8f39668303cd', class: 'upper-body', id: "upper-body-content" }, h("slot", { key: 'cea3051e03b03ed99628cd51e705ba97ba215ef2' }))), h("div", { key: '71b39299300b28bbdbc8ff274c187588430a708a', class: 'lower__body-wrapper', role: "group", "aria-labelledby": "upper-body-content" }, h("slot", { key: '220a96282d0504458c2fc236466c17d571bf7b4a', name: 'buttons' }))))));
     }
     get el() { return this; }
     static get style() { return cardCss; }