@infineon/infineon-design-system-stencil 39.4.4--canary.1723.b577eb08ea34aa81e7d1054220d0f31ca92579a9.0 → 39.4.4-canary.0

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

@@ -1 +1 @@
-{"version":3,"file":"button.stories.js","sourceRoot":"","sources":["../../../src/components/button/button.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { icons } from '@infineon/infineon-icons';\n\nexport default {\n  title: 'Components/Button',\n  tags: ['autodocs'],\n\n  args: {\n    label: 'Button',\n    variant: 'primary',\n    theme: 'default',\n    type: 'button',\n    size: 'm',\n    fullWidth: false,\n    disabled: false,\n    icon: '',\n    iconPosition: 'left',\n    href: false,\n    url: '',\n    target: '_blank',\n    ariaLabel: 'Button',\n  },\n\n  argTypes: {\n    label: {\n      name: 'Label of Button',\n      description: 'Sets the text displayed on the *<ifx-button>*.',\n      table: {\n        category: 'story controls',\n      }\n    },\n    icon: {\n      description: 'The icon to be displayed.',\n      control: 'select',\n      options: Object.keys(icons),\n      table: {\n        category: 'ifx-button props',\n        type: {\n          summary: 'string'\n        }\n      }\n    },\n    variant: {\n      description: 'Sets the style variant of the button.',\n      control: 'radio',\n      options: ['primary', 'secondary', 'tertiary'],\n      table: {\n        category: 'ifx-button props',\n        defaultValue: {\n          summary: 'primary'\n        }\n      }\n    },\n    ariaLabel:{\n      description: 'Sets the aria-label attribute of the button.Enhances accessibility.',\n      control: 'text',\n      table: {\n        category: 'ifx-button props',\n        defaultValue: {\n          summary: 'Button'\n        }\n      }\n    },\n    theme: {\n      description: 'Specifies the theme style of the button.',\n      control: 'radio',\n      options: ['default', 'danger', 'inverse'],\n      table: {\n        category: 'ifx-button props',\n        defaultValue: {\n          summary: 'default'\n        }\n      }\n    },\n    type: {\n      description: 'Sets the type attribute of the button.',\n      control: 'radio',\n      options: ['button', 'submit', 'reset'],\n      table: {\n        category: 'ifx-button props',\n        defaultValue: {\n          summary: 'button'\n        }\n      }\n    },\n    size: {\n      description: 'Sets the size of the button. Options: xs (32px) s (36px),  m (40px), l (48px)',\n      control: 'radio',\n      options: ['xs', 's', 'm', 'l'],\n      table: {\n        category: 'ifx-button props',\n        defaultValue: {\n          summary: 'm'\n        }\n      }\n    },\n    fullWidth: {\n      description: 'When set to **true**, expands the button to take the full width of its container.',\n      control: 'boolean',\n      table: {\n        category: 'ifx-button props',\n        defaultValue: {\n          summary: 'false'\n        }\n      }\n    },\n    disabled: {\n      description: 'Disables the button when set to true.',\n      control: 'boolean',\n      table: {\n        category: 'ifx-button props',\n        defaultValue: {\n          summary: 'false'\n        }\n      }\n    },\n    iconPosition: {\n      description: 'Determines the position of an icon within the button if an icon is used.',\n      control: 'radio',\n      options: ['left', 'right'],\n      table: {\n        category: 'ifx-button props',\n        defaultValue: {\n          summary: 'left'\n        }\n      }\n    },\n    href: {\n      description: 'When set to **true**, treats the button as a link by setting a URL.',\n      control: 'boolean',\n      table: {\n        category: 'ifx-button props',\n        defaultValue: {\n          summary: 'false'\n        }\n      }\n    },\n    url: {\n      description: 'Specifies the destination URL for the button when it acts as a link.',\n      table: {\n        category: 'ifx-button props',\n        type: {\n          summary: 'string'\n        }\n      }\n    },\n    target: {\n      description: 'Determines where to open the linked document when the button is clicked.',\n      control: 'radio',\n      options: ['_blank', '_self', '_parent'],\n      table: {\n        category: 'ifx-button props',\n        defaultValue: {\n          summary: '_blank'\n        }\n      }\n    },\n  },\n};\n\nconst DefaultTemplate = args =>\n  `<ifx-button type=\"${args.type}\" aria-label=\"${args.ariaLabel}\" disabled=\"${args.disabled}\" variant=\"${args.variant}\" size=\"${args.size}\" target=\"${args.target}\" theme=\"${args.theme}\" ${args.href ? `href=\"${args.url}\"` : ''} full-width=\"${args.fullWidth}\">\n  ${args.icon && args.iconPosition.toUpperCase() === 'LEFT' ? `<ifx-icon icon=\"${args.icon}\"></ifx-icon>` : ''}${args.label}${args.icon && args.iconPosition.toUpperCase() === 'RIGHT' ? `<ifx-icon icon=\"${args.icon}\"></ifx-icon>` : ''} \n</ifx-button>`;\n\nexport const Default = DefaultTemplate.bind({});\n"]}
+{"version":3,"file":"button.stories.js","sourceRoot":"","sources":["../../../src/components/button/button.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAEjD,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,IAAI,EAAE;QACJ,KAAK,EAAE,QAAQ;QACf,OAAO,EAAE,SAAS;QAClB,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,QAAQ;QACd,IAAI,EAAE,GAAG;QACT,SAAS,EAAE,KAAK;QAChB,QAAQ,EAAE,KAAK;QACf,IAAI,EAAE,EAAE;QACR,YAAY,EAAE,MAAM;QACpB,IAAI,EAAE,KAAK;QACX,GAAG,EAAE,EAAE;QACP,MAAM,EAAE,QAAQ;QAChB,SAAS,EAAE,QAAQ;KACpB;IAED,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,IAAI,EAAE,iBAAiB;YACvB,WAAW,EAAE,gDAAgD;YAC7D,KAAK,EAAE;gBACL,QAAQ,EAAE,gBAAgB;aAC3B;SACF;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,2BAA2B;YACxC,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC;YAC3B,KAAK,EAAE;gBACL,QAAQ,EAAE,kBAAkB;gBAC5B,IAAI,EAAE;oBACJ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;QACD,OAAO,EAAE;YACP,WAAW,EAAE,uCAAuC;YACpD,OAAO,EAAE,OAAO;YAChB,OAAO,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,UAAU,CAAC;YAC7C,KAAK,EAAE;gBACL,QAAQ,EAAE,kBAAkB;gBAC5B,YAAY,EAAE;oBACZ,OAAO,EAAE,SAAS;iBACnB;aACF;SACF;QACD,SAAS,EAAC;YACR,WAAW,EAAE,qEAAqE;YAClF,OAAO,EAAE,MAAM;YACf,KAAK,EAAE;gBACL,QAAQ,EAAE,kBAAkB;gBAC5B,YAAY,EAAE;oBACZ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;QACD,KAAK,EAAE;YACL,WAAW,EAAE,0CAA0C;YACvD,OAAO,EAAE,OAAO;YAChB,OAAO,EAAE,CAAC,SAAS,EAAE,QAAQ,EAAE,SAAS,CAAC;YACzC,KAAK,EAAE;gBACL,QAAQ,EAAE,kBAAkB;gBAC5B,YAAY,EAAE;oBACZ,OAAO,EAAE,SAAS;iBACnB;aACF;SACF;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,wCAAwC;YACrD,OAAO,EAAE,OAAO;YAChB,OAAO,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,OAAO,CAAC;YACtC,KAAK,EAAE;gBACL,QAAQ,EAAE,kBAAkB;gBAC5B,YAAY,EAAE;oBACZ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,+EAA+E;YAC5F,OAAO,EAAE,OAAO;YAChB,OAAO,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC;YAC9B,KAAK,EAAE;gBACL,QAAQ,EAAE,kBAAkB;gBAC5B,YAAY,EAAE;oBACZ,OAAO,EAAE,GAAG;iBACb;aACF;SACF;QACD,SAAS,EAAE;YACT,WAAW,EAAE,mFAAmF;YAChG,OAAO,EAAE,SAAS;YAClB,KAAK,EAAE;gBACL,QAAQ,EAAE,kBAAkB;gBAC5B,YAAY,EAAE;oBACZ,OAAO,EAAE,OAAO;iBACjB;aACF;SACF;QACD,QAAQ,EAAE;YACR,WAAW,EAAE,uCAAuC;YACpD,OAAO,EAAE,SAAS;YAClB,KAAK,EAAE;gBACL,QAAQ,EAAE,kBAAkB;gBAC5B,YAAY,EAAE;oBACZ,OAAO,EAAE,OAAO;iBACjB;aACF;SACF;QACD,YAAY,EAAE;YACZ,WAAW,EAAE,0EAA0E;YACvF,OAAO,EAAE,OAAO;YAChB,OAAO,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC;YAC1B,KAAK,EAAE;gBACL,QAAQ,EAAE,kBAAkB;gBAC5B,YAAY,EAAE;oBACZ,OAAO,EAAE,MAAM;iBAChB;aACF;SACF;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,qEAAqE;YAClF,OAAO,EAAE,SAAS;YAClB,KAAK,EAAE;gBACL,QAAQ,EAAE,kBAAkB;gBAC5B,YAAY,EAAE;oBACZ,OAAO,EAAE,OAAO;iBACjB;aACF;SACF;QACD,GAAG,EAAE;YACH,WAAW,EAAE,sEAAsE;YACnF,KAAK,EAAE;gBACL,QAAQ,EAAE,kBAAkB;gBAC5B,IAAI,EAAE;oBACJ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;QACD,MAAM,EAAE;YACN,WAAW,EAAE,0EAA0E;YACvF,OAAO,EAAE,OAAO;YAChB,OAAO,EAAE,CAAC,QAAQ,EAAE,OAAO,EAAE,SAAS,CAAC;YACvC,KAAK,EAAE;gBACL,QAAQ,EAAE,kBAAkB;gBAC5B,YAAY,EAAE;oBACZ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAC7B,qBAAqB,IAAI,CAAC,IAAI,iBAAiB,IAAI,CAAC,SAAS,eAAe,IAAI,CAAC,QAAQ,cAAc,IAAI,CAAC,OAAO,WAAW,IAAI,CAAC,IAAI,aAAa,IAAI,CAAC,MAAM,YAAY,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,IAAI,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,EAAE,gBAAgB,IAAI,CAAC,SAAS;IAC3P,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,KAAK,MAAM,CAAC,CAAC,CAAC,mBAAmB,IAAI,CAAC,IAAI,eAAe,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,KAAK,OAAO,CAAC,CAAC,CAAC,mBAAmB,IAAI,CAAC,IAAI,eAAe,CAAC,CAAC,CAAC,EAAE;cAC3N,CAAC;AAEf,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { icons } from '@infineon/infineon-icons';\r\n\r\nexport default {\r\n  title: 'Components/Button',\r\n  tags: ['autodocs'],\r\n\r\n  args: {\r\n    label: 'Button',\r\n    variant: 'primary',\r\n    theme: 'default',\r\n    type: 'button',\r\n    size: 'm',\r\n    fullWidth: false,\r\n    disabled: false,\r\n    icon: '',\r\n    iconPosition: 'left',\r\n    href: false,\r\n    url: '',\r\n    target: '_blank',\r\n    ariaLabel: 'Button',\r\n  },\r\n\r\n  argTypes: {\r\n    label: {\r\n      name: 'Label of Button',\r\n      description: 'Sets the text displayed on the *<ifx-button>*.',\r\n      table: {\r\n        category: 'story controls',\r\n      }\r\n    },\r\n    icon: {\r\n      description: 'The icon to be displayed.',\r\n      control: 'select',\r\n      options: Object.keys(icons),\r\n      table: {\r\n        category: 'ifx-button props',\r\n        type: {\r\n          summary: 'string'\r\n        }\r\n      }\r\n    },\r\n    variant: {\r\n      description: 'Sets the style variant of the button.',\r\n      control: 'radio',\r\n      options: ['primary', 'secondary', 'tertiary'],\r\n      table: {\r\n        category: 'ifx-button props',\r\n        defaultValue: {\r\n          summary: 'primary'\r\n        }\r\n      }\r\n    },\r\n    ariaLabel:{\r\n      description: 'Sets the aria-label attribute of the button.Enhances accessibility.',\r\n      control: 'text',\r\n      table: {\r\n        category: 'ifx-button props',\r\n        defaultValue: {\r\n          summary: 'Button'\r\n        }\r\n      }\r\n    },\r\n    theme: {\r\n      description: 'Specifies the theme style of the button.',\r\n      control: 'radio',\r\n      options: ['default', 'danger', 'inverse'],\r\n      table: {\r\n        category: 'ifx-button props',\r\n        defaultValue: {\r\n          summary: 'default'\r\n        }\r\n      }\r\n    },\r\n    type: {\r\n      description: 'Sets the type attribute of the button.',\r\n      control: 'radio',\r\n      options: ['button', 'submit', 'reset'],\r\n      table: {\r\n        category: 'ifx-button props',\r\n        defaultValue: {\r\n          summary: 'button'\r\n        }\r\n      }\r\n    },\r\n    size: {\r\n      description: 'Sets the size of the button. Options: xs (32px) s (36px),  m (40px), l (48px)',\r\n      control: 'radio',\r\n      options: ['xs', 's', 'm', 'l'],\r\n      table: {\r\n        category: 'ifx-button props',\r\n        defaultValue: {\r\n          summary: 'm'\r\n        }\r\n      }\r\n    },\r\n    fullWidth: {\r\n      description: 'When set to **true**, expands the button to take the full width of its container.',\r\n      control: 'boolean',\r\n      table: {\r\n        category: 'ifx-button props',\r\n        defaultValue: {\r\n          summary: 'false'\r\n        }\r\n      }\r\n    },\r\n    disabled: {\r\n      description: 'Disables the button when set to true.',\r\n      control: 'boolean',\r\n      table: {\r\n        category: 'ifx-button props',\r\n        defaultValue: {\r\n          summary: 'false'\r\n        }\r\n      }\r\n    },\r\n    iconPosition: {\r\n      description: 'Determines the position of an icon within the button if an icon is used.',\r\n      control: 'radio',\r\n      options: ['left', 'right'],\r\n      table: {\r\n        category: 'ifx-button props',\r\n        defaultValue: {\r\n          summary: 'left'\r\n        }\r\n      }\r\n    },\r\n    href: {\r\n      description: 'When set to **true**, treats the button as a link by setting a URL.',\r\n      control: 'boolean',\r\n      table: {\r\n        category: 'ifx-button props',\r\n        defaultValue: {\r\n          summary: 'false'\r\n        }\r\n      }\r\n    },\r\n    url: {\r\n      description: 'Specifies the destination URL for the button when it acts as a link.',\r\n      table: {\r\n        category: 'ifx-button props',\r\n        type: {\r\n          summary: 'string'\r\n        }\r\n      }\r\n    },\r\n    target: {\r\n      description: 'Determines where to open the linked document when the button is clicked.',\r\n      control: 'radio',\r\n      options: ['_blank', '_self', '_parent'],\r\n      table: {\r\n        category: 'ifx-button props',\r\n        defaultValue: {\r\n          summary: '_blank'\r\n        }\r\n      }\r\n    },\r\n  },\r\n};\r\n\r\nconst DefaultTemplate = args =>\r\n  `<ifx-button type=\"${args.type}\" aria-label=\"${args.ariaLabel}\" disabled=\"${args.disabled}\" variant=\"${args.variant}\" size=\"${args.size}\" target=\"${args.target}\" theme=\"${args.theme}\" ${args.href ? `href=\"${args.url}\"` : ''} full-width=\"${args.fullWidth}\">\r\n  ${args.icon && args.iconPosition.toUpperCase() === 'LEFT' ? `<ifx-icon icon=\"${args.icon}\"></ifx-icon>` : ''}${args.label}${args.icon && args.iconPosition.toUpperCase() === 'RIGHT' ? `<ifx-icon icon=\"${args.icon}\"></ifx-icon>` : ''} \r\n</ifx-button>`;\r\n\r\nexport const Default = DefaultTemplate.bind({});\r\n"]}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/collection/components/card/card.stories.js

@@ -112,82 +112,82 @@ export default {
         },
     },
 };
-const DefaultTemplate = args => `<ifx-card direction="${args.direction}" href="${args.href}" target="${args.target}" aria-label="${args.ariaLabel}">
-    <ifx-card-image position="${args.position}" src="${args.src}" alt="${args.alt}" slot="img"></ifx-card-image>
+const DefaultTemplate = args => `<ifx-card direction="${args.direction}" href="${args.href}" target="${args.target}" aria-label="${args.ariaLabel}">
+    <ifx-card-image position="${args.position}" src="${args.src}" alt="${args.alt}" slot="img"></ifx-card-image>
     ${args.overline
-    ? `<ifx-card-overline>
-        ${args.overline}
+    ? `<ifx-card-overline>
+        ${args.overline}
         </ifx-card-overline>`
-    : ''}
+    : ''}
       ${args.headline
-    ? `<ifx-card-headline>
-        ${args.headline}
+    ? `<ifx-card-headline>
+        ${args.headline}
         </ifx-card-headline>`
-    : ''}
+    : ''}
      ${args.description
-    ? `<ifx-card-text>
-        ${args.description}
+    ? `<ifx-card-text>
+        ${args.description}
         </ifx-card-text>`
-    : ''}
+    : ''}
       ${args.button === 'button'
-    ? `<ifx-card-links slot="buttons">
-          <ifx-button variant="primary">Button</ifx-button>
-          <ifx-button variant="secondary">Button</ifx-button>
+    ? `<ifx-card-links slot="buttons">
+          <ifx-button variant="primary">Button</ifx-button>
+          <ifx-button variant="secondary">Button</ifx-button>
           </ifx-card-links>`
-    : ''}
+    : ''}
       ${args.button === 'link'
-    ? `<ifx-card-links slot="buttons">
-            <ifx-link href="https://google.com" target="_blank">
-              <ifx-icon icon="calendar16"></ifx-icon>
-              Link
-            </ifx-link>
-            <ifx-link href="https://yahoo.com" target="_blank">
-              <ifx-icon icon="calendar16"></ifx-icon>
-              Link
-            </ifx-link>
+    ? `<ifx-card-links slot="buttons">
+            <ifx-link href="https://google.com" target="_blank">
+              <ifx-icon icon="calendar16"></ifx-icon>
+              Link
+            </ifx-link>
+            <ifx-link href="https://yahoo.com" target="_blank">
+              <ifx-icon icon="calendar16"></ifx-icon>
+              Link
+            </ifx-link>
           </ifx-card-links>`
-    : ''}
+    : ''}
   </ifx-card>`;
 export const Default = DefaultTemplate.bind({});
 Default.args = {
     alt: 'Coffee',
     src: 'https://upload.wikimedia.org/wikipedia/commons/e/e4/Latte_and_dark_coffee.jpg',
 };
-const HorizontalTemplate = args => `<ifx-card direction="${args.direction}" href="${args.href}" target="${args.target}">
-    <ifx-card-image position="${args.position}" src="${args.src}" alt="${args.alt}" slot="img"></ifx-card-image>
+const HorizontalTemplate = args => `<ifx-card direction="${args.direction}" href="${args.href}" target="${args.target}">
+    <ifx-card-image position="${args.position}" src="${args.src}" alt="${args.alt}" slot="img"></ifx-card-image>
     ${args.overline
-    ? `<ifx-card-overline>
-        ${args.overline}
+    ? `<ifx-card-overline>
+        ${args.overline}
         </ifx-card-overline>`
-    : ''}
+    : ''}
       ${args.headline
-    ? `<ifx-card-headline>
-          ${args.headline}
+    ? `<ifx-card-headline>
+          ${args.headline}
           </ifx-card-headline>`
-    : ''}
+    : ''}
         ${args.description
-    ? `<ifx-card-text>
-            ${args.description}
+    ? `<ifx-card-text>
+            ${args.description}
             </ifx-card-text>`
-    : ''}
+    : ''}
       ${args.button === 'button'
-    ? `<ifx-card-links slot="buttons">
-          <ifx-button variant="primary">Button</ifx-button>
-          <ifx-button variant="secondary">Button</ifx-button>
+    ? `<ifx-card-links slot="buttons">
+          <ifx-button variant="primary">Button</ifx-button>
+          <ifx-button variant="secondary">Button</ifx-button>
           </ifx-card-links>`
-    : ''}
+    : ''}
           ${args.button === 'link'
-    ? `<ifx-card-links slot="buttons">
-          <ifx-link color="primary" href="https://google.com" target="_blank" underline="false">
-            <ifx-icon icon="calendar16"></ifx-icon>
-            Link
-          </ifx-link>
-          <ifx-link color="primary" href="https://yahoo.com" target="_blank" underline="false">
-            <ifx-icon icon="calendar16"></ifx-icon>
-            Link
-          </ifx-link>
+    ? `<ifx-card-links slot="buttons">
+          <ifx-link color="primary" href="https://google.com" target="_blank" underline="false">
+            <ifx-icon icon="calendar16"></ifx-icon>
+            Link
+          </ifx-link>
+          <ifx-link color="primary" href="https://yahoo.com" target="_blank" underline="false">
+            <ifx-icon icon="calendar16"></ifx-icon>
+            Link
+          </ifx-link>
         </ifx-card-links>`
-    : ''}
+    : ''}
   </ifx-card>`;
 export const Horizontal = HorizontalTemplate.bind({});
 Horizontal.args = {

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

@@ -1 +1 @@
-{"version":3,"file":"card.stories.js","sourceRoot":"","sources":["../../../src/components/card/card.stories.ts"],"names":[],"mappings":"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","sourcesContent":["export default {\n  title: 'Components/Card',\n  tags: ['autodocs'],\n  args: {\n    overline: 'Overline',\n    headline: 'Headline',\n    description: \"Some quick example text to build on the card title and make up the bulk of the card's content.\",\n    direction: 'vertical',\n    button: 'button',\n    href: '',\n    target: '_blank',\n    position: 'right',\n    src: 'https://upload.wikimedia.org/wikipedia/commons/e/e4/Latte_and_dark_coffee.jpg',\n    ariaLabel: 'Card',\n  },\n\n  argTypes: {\n    overline: {\n      name: 'Overline',\n      description: 'Sets the overline text of the card.',\n      type: { name: 'string' },\n      table: {\n        category: 'story controls',\n      },\n    },\n    headline: {\n      name: 'Headline',\n      description: 'Sets the headline text of the card.',\n      type: { name: 'string' },\n      table: {\n        category: 'story controls',\n      },\n    },\n    description: {\n      name: 'Description',\n      description: 'Sets the description text of the card.',\n      type: { name: 'string' },\n      table: {\n        category: 'story controls',\n      },\n    },\n    button: {\n      name: 'Button',\n      options: ['button', 'link', 'none'],\n      description: 'Sets the button type of the card.',\n      control: { type: 'radio' },\n      table: {\n        category: 'story controls',\n      },\n    },\n    direction: {\n      description: 'Sets the direction of the card layout.',\n      table: {\n        category: 'ifx-card props',\n        defaultValue: {\n          summary: 'vertical',\n        },\n        type: {\n          summary: 'horizontal | vertical',\n          disable: true,\n        },\n      },\n      options: ['horizontal', 'vertical'],\n      control: { type: 'radio' },\n    },\n    ariaLabel: {\n      control: { type: 'text' },\n      description: 'Sets the aria-label attribute of the card. Enhances accessibility.',\n      table: {\n        category: 'ifx-card props',\n      },\n    },\n\n    position: {\n      description: 'Sets the position of the image in the card.',\n      table: {\n        category: 'ifx-card-image props',\n      },\n      options: ['left', 'right'],\n      control: { type: 'radio' },\n      if: { arg: 'direction', eq: 'horizontal' },\n    },\n    href: {\n      description: 'Sets the hyperlink reference.',\n      type: { name: 'string' },\n      table: {\n        category: 'ifx-card props',\n      },\n    },\n    target: {\n      description: 'Sets the target of the hyperlink reference',\n      table: {\n        category: 'ifx-card props',\n        defaultValue: {\n          summary: '_self',\n        },\n      },\n      options: ['_blank', '_self', '_parent'],\n      control: { type: 'radio' },\n    },\n    src: {\n      description: 'Sets the image source.',\n      type: { name: 'string' },\n      table: {\n        category: 'ifx-card-image props',\n      },\n    },\n    alt: {\n      description: 'Sets the alternative text for the image.',\n      type: { name: 'string' },\n      table: {\n        category: 'ifx-card-image props',\n      },\n    },\n  },\n};\n\nconst DefaultTemplate = args =>\n  `<ifx-card direction=\"${args.direction}\" href=\"${args.href}\" target=\"${args.target}\" aria-label=\"${args.ariaLabel}\">\n    <ifx-card-image position=\"${args.position}\" src=\"${args.src}\" alt=\"${args.alt}\" slot=\"img\"></ifx-card-image>\n    ${args.overline\n    ? `<ifx-card-overline>\n        ${args.overline}\n        </ifx-card-overline>`\n    : ''\n  }\n      ${args.headline\n    ? `<ifx-card-headline>\n        ${args.headline}\n        </ifx-card-headline>`\n    : ''\n  }\n     ${args.description\n    ? `<ifx-card-text>\n        ${args.description}\n        </ifx-card-text>`\n    : ''\n  }\n      ${args.button === 'button'\n    ? `<ifx-card-links slot=\"buttons\">\n          <ifx-button variant=\"primary\">Button</ifx-button>\n          <ifx-button variant=\"secondary\">Button</ifx-button>\n          </ifx-card-links>`\n    : ''\n  }\n      ${args.button === 'link'\n    ? `<ifx-card-links slot=\"buttons\">\n            <ifx-link href=\"https://google.com\" target=\"_blank\">\n              <ifx-icon icon=\"calendar16\"></ifx-icon>\n              Link\n            </ifx-link>\n            <ifx-link href=\"https://yahoo.com\" target=\"_blank\">\n              <ifx-icon icon=\"calendar16\"></ifx-icon>\n              Link\n            </ifx-link>\n          </ifx-card-links>`\n    : ''\n  }\n  </ifx-card>`;\n\nexport const Default = DefaultTemplate.bind({});\nDefault.args = {\n  alt: 'Coffee',\n  src: 'https://upload.wikimedia.org/wikipedia/commons/e/e4/Latte_and_dark_coffee.jpg',\n};\n\nconst HorizontalTemplate = args =>\n  `<ifx-card direction=\"${args.direction}\" href=\"${args.href}\" target=\"${args.target}\">\n    <ifx-card-image position=\"${args.position}\" src=\"${args.src}\" alt=\"${args.alt}\" slot=\"img\"></ifx-card-image>\n    ${args.overline\n    ? `<ifx-card-overline>\n        ${args.overline}\n        </ifx-card-overline>`\n    : ''\n  }\n      ${args.headline\n    ? `<ifx-card-headline>\n          ${args.headline}\n          </ifx-card-headline>`\n    : ''\n  }\n        ${args.description\n    ? `<ifx-card-text>\n            ${args.description}\n            </ifx-card-text>`\n    : ''\n  }\n      ${args.button === 'button'\n    ? `<ifx-card-links slot=\"buttons\">\n          <ifx-button variant=\"primary\">Button</ifx-button>\n          <ifx-button variant=\"secondary\">Button</ifx-button>\n          </ifx-card-links>`\n    : ''\n  }\n          ${args.button === 'link'\n    ? `<ifx-card-links slot=\"buttons\">\n          <ifx-link color=\"primary\" href=\"https://google.com\" target=\"_blank\" underline=\"false\">\n            <ifx-icon icon=\"calendar16\"></ifx-icon>\n            Link\n          </ifx-link>\n          <ifx-link color=\"primary\" href=\"https://yahoo.com\" target=\"_blank\" underline=\"false\">\n            <ifx-icon icon=\"calendar16\"></ifx-icon>\n            Link\n          </ifx-link>\n        </ifx-card-links>`\n    : ''\n  }\n  </ifx-card>`;\n\nexport const Horizontal = HorizontalTemplate.bind({});\nHorizontal.args = {\n  direction: 'horizontal',\n  src: 'https://upload.wikimedia.org/wikipedia/commons/e/e4/Latte_and_dark_coffee.jpg',\n};\nHorizontal.argTypes = {\n  direction: {\n    table: {\n      disable: true,\n    },\n  },\n};\n"]}
+{"version":3,"file":"card.stories.js","sourceRoot":"","sources":["../../../src/components/card/card.stories.ts"],"names":[],"mappings":"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","sourcesContent":["export default {\r\n  title: 'Components/Card',\r\n  tags: ['autodocs'],\r\n  args: {\r\n    overline: 'Overline',\r\n    headline: 'Headline',\r\n    description: \"Some quick example text to build on the card title and make up the bulk of the card's content.\",\r\n    direction: 'vertical',\r\n    button: 'button',\r\n    href: '',\r\n    target: '_blank',\r\n    position: 'right',\r\n    src: 'https://upload.wikimedia.org/wikipedia/commons/e/e4/Latte_and_dark_coffee.jpg',\r\n    ariaLabel: 'Card',\r\n  },\r\n\r\n  argTypes: {\r\n    overline: {\r\n      name: 'Overline',\r\n      description: 'Sets the overline text of the card.',\r\n      type: { name: 'string' },\r\n      table: {\r\n        category: 'story controls',\r\n      },\r\n    },\r\n    headline: {\r\n      name: 'Headline',\r\n      description: 'Sets the headline text of the card.',\r\n      type: { name: 'string' },\r\n      table: {\r\n        category: 'story controls',\r\n      },\r\n    },\r\n    description: {\r\n      name: 'Description',\r\n      description: 'Sets the description text of the card.',\r\n      type: { name: 'string' },\r\n      table: {\r\n        category: 'story controls',\r\n      },\r\n    },\r\n    button: {\r\n      name: 'Button',\r\n      options: ['button', 'link', 'none'],\r\n      description: 'Sets the button type of the card.',\r\n      control: { type: 'radio' },\r\n      table: {\r\n        category: 'story controls',\r\n      },\r\n    },\r\n    direction: {\r\n      description: 'Sets the direction of the card layout.',\r\n      table: {\r\n        category: 'ifx-card props',\r\n        defaultValue: {\r\n          summary: 'vertical',\r\n        },\r\n        type: {\r\n          summary: 'horizontal | vertical',\r\n          disable: true,\r\n        },\r\n      },\r\n      options: ['horizontal', 'vertical'],\r\n      control: { type: 'radio' },\r\n    },\r\n    ariaLabel: {\r\n      control: { type: 'text' },\r\n      description: 'Sets the aria-label attribute of the card. Enhances accessibility.',\r\n      table: {\r\n        category: 'ifx-card props',\r\n      },\r\n    },\r\n\r\n    position: {\r\n      description: 'Sets the position of the image in the card.',\r\n      table: {\r\n        category: 'ifx-card-image props',\r\n      },\r\n      options: ['left', 'right'],\r\n      control: { type: 'radio' },\r\n      if: { arg: 'direction', eq: 'horizontal' },\r\n    },\r\n    href: {\r\n      description: 'Sets the hyperlink reference.',\r\n      type: { name: 'string' },\r\n      table: {\r\n        category: 'ifx-card props',\r\n      },\r\n    },\r\n    target: {\r\n      description: 'Sets the target of the hyperlink reference',\r\n      table: {\r\n        category: 'ifx-card props',\r\n        defaultValue: {\r\n          summary: '_self',\r\n        },\r\n      },\r\n      options: ['_blank', '_self', '_parent'],\r\n      control: { type: 'radio' },\r\n    },\r\n    src: {\r\n      description: 'Sets the image source.',\r\n      type: { name: 'string' },\r\n      table: {\r\n        category: 'ifx-card-image props',\r\n      },\r\n    },\r\n    alt: {\r\n      description: 'Sets the alternative text for the image.',\r\n      type: { name: 'string' },\r\n      table: {\r\n        category: 'ifx-card-image props',\r\n      },\r\n    },\r\n  },\r\n};\r\n\r\nconst DefaultTemplate = args =>\r\n  `<ifx-card direction=\"${args.direction}\" href=\"${args.href}\" target=\"${args.target}\" aria-label=\"${args.ariaLabel}\">\r\n    <ifx-card-image position=\"${args.position}\" src=\"${args.src}\" alt=\"${args.alt}\" slot=\"img\"></ifx-card-image>\r\n    ${args.overline\r\n    ? `<ifx-card-overline>\r\n        ${args.overline}\r\n        </ifx-card-overline>`\r\n    : ''\r\n  }\r\n      ${args.headline\r\n    ? `<ifx-card-headline>\r\n        ${args.headline}\r\n        </ifx-card-headline>`\r\n    : ''\r\n  }\r\n     ${args.description\r\n    ? `<ifx-card-text>\r\n        ${args.description}\r\n        </ifx-card-text>`\r\n    : ''\r\n  }\r\n      ${args.button === 'button'\r\n    ? `<ifx-card-links slot=\"buttons\">\r\n          <ifx-button variant=\"primary\">Button</ifx-button>\r\n          <ifx-button variant=\"secondary\">Button</ifx-button>\r\n          </ifx-card-links>`\r\n    : ''\r\n  }\r\n      ${args.button === 'link'\r\n    ? `<ifx-card-links slot=\"buttons\">\r\n            <ifx-link href=\"https://google.com\" target=\"_blank\">\r\n              <ifx-icon icon=\"calendar16\"></ifx-icon>\r\n              Link\r\n            </ifx-link>\r\n            <ifx-link href=\"https://yahoo.com\" target=\"_blank\">\r\n              <ifx-icon icon=\"calendar16\"></ifx-icon>\r\n              Link\r\n            </ifx-link>\r\n          </ifx-card-links>`\r\n    : ''\r\n  }\r\n  </ifx-card>`;\r\n\r\nexport const Default = DefaultTemplate.bind({});\r\nDefault.args = {\r\n  alt: 'Coffee',\r\n  src: 'https://upload.wikimedia.org/wikipedia/commons/e/e4/Latte_and_dark_coffee.jpg',\r\n};\r\n\r\nconst HorizontalTemplate = args =>\r\n  `<ifx-card direction=\"${args.direction}\" href=\"${args.href}\" target=\"${args.target}\">\r\n    <ifx-card-image position=\"${args.position}\" src=\"${args.src}\" alt=\"${args.alt}\" slot=\"img\"></ifx-card-image>\r\n    ${args.overline\r\n    ? `<ifx-card-overline>\r\n        ${args.overline}\r\n        </ifx-card-overline>`\r\n    : ''\r\n  }\r\n      ${args.headline\r\n    ? `<ifx-card-headline>\r\n          ${args.headline}\r\n          </ifx-card-headline>`\r\n    : ''\r\n  }\r\n        ${args.description\r\n    ? `<ifx-card-text>\r\n            ${args.description}\r\n            </ifx-card-text>`\r\n    : ''\r\n  }\r\n      ${args.button === 'button'\r\n    ? `<ifx-card-links slot=\"buttons\">\r\n          <ifx-button variant=\"primary\">Button</ifx-button>\r\n          <ifx-button variant=\"secondary\">Button</ifx-button>\r\n          </ifx-card-links>`\r\n    : ''\r\n  }\r\n          ${args.button === 'link'\r\n    ? `<ifx-card-links slot=\"buttons\">\r\n          <ifx-link color=\"primary\" href=\"https://google.com\" target=\"_blank\" underline=\"false\">\r\n            <ifx-icon icon=\"calendar16\"></ifx-icon>\r\n            Link\r\n          </ifx-link>\r\n          <ifx-link color=\"primary\" href=\"https://yahoo.com\" target=\"_blank\" underline=\"false\">\r\n            <ifx-icon icon=\"calendar16\"></ifx-icon>\r\n            Link\r\n          </ifx-link>\r\n        </ifx-card-links>`\r\n    : ''\r\n  }\r\n  </ifx-card>`;\r\n\r\nexport const Horizontal = HorizontalTemplate.bind({});\r\nHorizontal.args = {\r\n  direction: 'horizontal',\r\n  src: 'https://upload.wikimedia.org/wikipedia/commons/e/e4/Latte_and_dark_coffee.jpg',\r\n};\r\nHorizontal.argTypes = {\r\n  direction: {\r\n    table: {\r\n      disable: true,\r\n    },\r\n  },\r\n};\r\n"]}

package/dist/collection/components/checkbox/checkbox.js

@@ -100,12 +100,12 @@ export class Checkbox {
         if (slot) {
             hasSlot = true;
         }
-        return (h("div", { key: '6605cecca0fc9ea377620c93c411747c6103d0fc', class: "checkbox__container" }, h("input", { key: 'e28753294d821fdc066f64e99295bb6ead4be86d', type: "checkbox", hidden: true, ref: (el) => (this.inputElement = el), checked: this.internalChecked, onChange: this.handleCheckbox.bind(this), id: 'checkbox', value: `${this.value}`, disabled: this.disabled ? true : undefined }), h("div", { key: 'ff14245dcd1ff6285ec153591b52ffa3c3f06358', tabindex: "0", onClick: this.handleCheckbox.bind(this), onKeyDown: this.handleKeydown.bind(this), role: "checkbox", "aria-checked": this.indeterminate ? 'mixed' : this.internalChecked.toString(), "aria-disabled": this.disabled, "aria-labelledby": "label", class: `checkbox__wrapper 
-          ${this.getCheckedClassName()}
-        ${this.size === "m" ? "checkbox-m" : ""}
-        ${this.indeterminate ? 'indeterminate' : ""}
-        ${this.disabled ? 'disabled' : ""}` }, this.internalChecked && !this.internalIndeterminate && h("ifx-icon", { key: '13e9e197e4375548b34a597c007ddf6866ad5e05', icon: "check-16", "aria-hidden": "true" })), hasSlot &&
-            h("div", { key: '8161ca9223da4df88bc82eb9d26989df68cedc19', id: "label", class: `label ${this.size === "m" ? "label-m" : ""} ${this.disabled ? 'disabled' : ""} `, onClick: this.handleCheckbox.bind(this) }, h("slot", { key: '29856bf622df0289f8803eb3c4a33f4738f50863' }))));
+        return (h("div", { key: '3f4f974a98652e4be4057c36a7533e0d8d68de24', class: "checkbox__container" }, h("input", { key: 'b636b5d3fa14a620822a6bc518607a59a01652c8', type: "checkbox", hidden: true, ref: (el) => (this.inputElement = el), checked: this.internalChecked, onChange: this.handleCheckbox.bind(this), id: 'checkbox', value: `${this.value}`, disabled: this.disabled ? true : undefined }), h("div", { key: '13d0ecefb5b5af1c00b2e09c9c0fc9cc4c83d724', tabindex: "0", onClick: this.handleCheckbox.bind(this), onKeyDown: this.handleKeydown.bind(this), role: "checkbox", "aria-checked": this.indeterminate ? 'mixed' : this.internalChecked.toString(), "aria-disabled": this.disabled, "aria-labelledby": "label", class: `checkbox__wrapper 
+          ${this.getCheckedClassName()}
+        ${this.size === "m" ? "checkbox-m" : ""}
+        ${this.indeterminate ? 'indeterminate' : ""}
+        ${this.disabled ? 'disabled' : ""}` }, this.internalChecked && !this.internalIndeterminate && h("ifx-icon", { key: '460c969742fe90ba3e06907fc7884ab29824f061', icon: "check-16", "aria-hidden": "true" })), hasSlot &&
+            h("div", { key: '273def9e47faeaeb5e60713cd2339929d201dff4', id: "label", class: `label ${this.size === "m" ? "label-m" : ""} ${this.disabled ? 'disabled' : ""} `, onClick: this.handleCheckbox.bind(this) }, h("slot", { key: '8fa93a5b1611fb49bea4a6535504aafe8f8008c8' }))));
     }
     static get is() { return "ifx-checkbox"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Element, State, Event, EventEmitter, Watch, Method, AttachInternals } 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-checkbox',\n  styleUrl: 'checkbox.scss',\n  shadow: true,\n  // formAssociated: true\n})\n\nexport class Checkbox {\n  private inputElement: HTMLInputElement;\n\n  @Element() el;\n  @Prop() disabled: boolean = false;\n  @Prop() checked: boolean = false;\n  @Prop() error: boolean = false;\n  @Prop() size: string = 'm';\n  @Prop() indeterminate: boolean = false;\n  @Prop() value: string;\n  @State() internalChecked: boolean;\n  @State() internalIndeterminate: boolean;\n\n  @AttachInternals() internals: ElementInternals;\n\n  @Event({ bubbles: true, composed: true }) ifxChange: EventEmitter;\n  @Event({ bubbles: true, composed: true }) ifxError: EventEmitter;\n\n  handleCheckbox() {\n    if (!this.disabled) {\n      if (!this.inputElement.indeterminate) {\n        this.internalChecked = !this.internalChecked;\n      } \n      if (this.internalChecked && !this.internalIndeterminate) {\n        if (this.value !== undefined) {\n          //this.internals.setFormValue(this.value);\n        } else {\n          //this.internals.setFormValue(\"on\")\n        }\n      } else {\n        //this.internals.setFormValue(null)\n      }\n      this.ifxChange.emit(this.internalChecked);\n    }\n  }\n\n  @Method()\n  async isChecked(): Promise<boolean> {\n    return this.internalChecked;\n  }\n\n  @Method()\n  async toggleCheckedState(newVal: boolean) {\n    this.internalChecked = newVal;\n  }\n\n  @Watch('checked')\n  valueChanged(newValue: boolean, oldValue: boolean) {\n    if (newValue !== oldValue) {\n      this.internalChecked = newValue;\n      this.inputElement.checked = this.internalChecked; // update the checkbox's checked property\n    }\n  }\n\n  @Watch('error')\n  errorChanged(newValue: boolean, oldValue: boolean) {\n    if (newValue !== oldValue) {\n      this.ifxError.emit(newValue);\n    }\n  }\n\n  @Watch('indeterminate')\n  indeterminateChanged(newValue: boolean, oldValue: boolean) {\n    if (newValue !== oldValue) {\n      this.internalIndeterminate = newValue;\n      this.inputElement.indeterminate = this.internalIndeterminate; // update the checkbox's indeterminate property\n    }\n  }\n\n  handleKeydown(event) {\n    // Keycode 32 corresponds to the Space key, 13 corresponds to the Enter key\n    if (event.keyCode === 32 || event.keyCode === 13) {\n      this.handleCheckbox();\n      event.preventDefault();  // prevent the default action when space or enter is pressed\n    }\n  }\n\n  componentWillLoad() {\n    this.internalChecked = this.checked;\n    this.internalIndeterminate = this.indeterminate;\n  }\n\n  async componentDidLoad() { \n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-checkbox', await framework)\n    }\n  }\n\n  componentDidRender() {\n    this.inputElement.indeterminate = this.internalIndeterminate;\n  }\n\n  /**\n   * Callback for form association.\n   * Called whenever the form is reset.\n   */\n  // formResetCallback() {\n  //   this.internals.setFormValue(null);\n  // }\n\n  getCheckedClassName() {\n    if (this.error) {\n      if (this.internalChecked) {\n        return \"checked error\"\n      } else {\n        return \"error\"\n      }\n    } else if (this.internalChecked) {\n      return \"checked\";\n    } else return \"\"\n  }\n\n  render() {\n    const slot = this.el.innerHTML;\n    let hasSlot = false;\n    if (slot) {\n      hasSlot = true;\n    }\n    return (\n      <div class=\"checkbox__container\">\n        <input\n          type=\"checkbox\"\n          hidden\n          ref={(el) => (this.inputElement = el)}\n          checked={this.internalChecked}\n          onChange={this.handleCheckbox.bind(this)} // Listen for changes here\n          id='checkbox'\n          value={`${this.value}`}\n          disabled={this.disabled ? true : undefined}\n        />\n        <div\n          tabindex=\"0\"\n          onClick={this.handleCheckbox.bind(this)}\n          onKeyDown={this.handleKeydown.bind(this)}\n          role=\"checkbox\"\n          aria-checked={this.indeterminate ? 'mixed' : this.internalChecked.toString()}\n          aria-disabled={this.disabled}\n          aria-labelledby=\"label\"\n          class={`checkbox__wrapper \n          ${this.getCheckedClassName()}\n        ${this.size === \"m\" ? \"checkbox-m\" : \"\"}\n        ${this.indeterminate ? 'indeterminate' : \"\"}\n        ${this.disabled ? 'disabled' : \"\"}`}\n        >\n          {this.internalChecked && !this.internalIndeterminate && <ifx-icon icon=\"check-16\" aria-hidden=\"true\"></ifx-icon>}\n        </div>\n        {hasSlot &&\n          <div id=\"label\" class={`label ${this.size === \"m\" ? \"label-m\" : \"\"} ${this.disabled ? 'disabled' : \"\"} `} onClick={this.handleCheckbox.bind(this)}>\n            <slot />\n          </div>}\n      </div>\n    );\n  }\n}"]}
+{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Element, State, Event, EventEmitter, Watch, Method, AttachInternals } from '@stencil/core';\r\nimport { trackComponent } from '../../global/utils/tracking';\r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\n\r\n@Component({\r\n  tag: 'ifx-checkbox',\r\n  styleUrl: 'checkbox.scss',\r\n  shadow: true,\r\n  // formAssociated: true\r\n})\r\n\r\nexport class Checkbox {\r\n  private inputElement: HTMLInputElement;\r\n\r\n  @Element() el;\r\n  @Prop() disabled: boolean = false;\r\n  @Prop() checked: boolean = false;\r\n  @Prop() error: boolean = false;\r\n  @Prop() size: string = 'm';\r\n  @Prop() indeterminate: boolean = false;\r\n  @Prop() value: string;\r\n  @State() internalChecked: boolean;\r\n  @State() internalIndeterminate: boolean;\r\n\r\n  @AttachInternals() internals: ElementInternals;\r\n\r\n  @Event({ bubbles: true, composed: true }) ifxChange: EventEmitter;\r\n  @Event({ bubbles: true, composed: true }) ifxError: EventEmitter;\r\n\r\n  handleCheckbox() {\r\n    if (!this.disabled) {\r\n      if (!this.inputElement.indeterminate) {\r\n        this.internalChecked = !this.internalChecked;\r\n      } \r\n      if (this.internalChecked && !this.internalIndeterminate) {\r\n        if (this.value !== undefined) {\r\n          //this.internals.setFormValue(this.value);\r\n        } else {\r\n          //this.internals.setFormValue(\"on\")\r\n        }\r\n      } else {\r\n        //this.internals.setFormValue(null)\r\n      }\r\n      this.ifxChange.emit(this.internalChecked);\r\n    }\r\n  }\r\n\r\n  @Method()\r\n  async isChecked(): Promise<boolean> {\r\n    return this.internalChecked;\r\n  }\r\n\r\n  @Method()\r\n  async toggleCheckedState(newVal: boolean) {\r\n    this.internalChecked = newVal;\r\n  }\r\n\r\n  @Watch('checked')\r\n  valueChanged(newValue: boolean, oldValue: boolean) {\r\n    if (newValue !== oldValue) {\r\n      this.internalChecked = newValue;\r\n      this.inputElement.checked = this.internalChecked; // update the checkbox's checked property\r\n    }\r\n  }\r\n\r\n  @Watch('error')\r\n  errorChanged(newValue: boolean, oldValue: boolean) {\r\n    if (newValue !== oldValue) {\r\n      this.ifxError.emit(newValue);\r\n    }\r\n  }\r\n\r\n  @Watch('indeterminate')\r\n  indeterminateChanged(newValue: boolean, oldValue: boolean) {\r\n    if (newValue !== oldValue) {\r\n      this.internalIndeterminate = newValue;\r\n      this.inputElement.indeterminate = this.internalIndeterminate; // update the checkbox's indeterminate property\r\n    }\r\n  }\r\n\r\n  handleKeydown(event) {\r\n    // Keycode 32 corresponds to the Space key, 13 corresponds to the Enter key\r\n    if (event.keyCode === 32 || event.keyCode === 13) {\r\n      this.handleCheckbox();\r\n      event.preventDefault();  // prevent the default action when space or enter is pressed\r\n    }\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.internalChecked = this.checked;\r\n    this.internalIndeterminate = this.indeterminate;\r\n  }\r\n\r\n  async componentDidLoad() { \r\n    if(!isNestedInIfxComponent(this.el)) { \r\n      const framework = detectFramework();\r\n      trackComponent('ifx-checkbox', await framework)\r\n    }\r\n  }\r\n\r\n  componentDidRender() {\r\n    this.inputElement.indeterminate = this.internalIndeterminate;\r\n  }\r\n\r\n  /**\r\n   * Callback for form association.\r\n   * Called whenever the form is reset.\r\n   */\r\n  // formResetCallback() {\r\n  //   this.internals.setFormValue(null);\r\n  // }\r\n\r\n  getCheckedClassName() {\r\n    if (this.error) {\r\n      if (this.internalChecked) {\r\n        return \"checked error\"\r\n      } else {\r\n        return \"error\"\r\n      }\r\n    } else if (this.internalChecked) {\r\n      return \"checked\";\r\n    } else return \"\"\r\n  }\r\n\r\n  render() {\r\n    const slot = this.el.innerHTML;\r\n    let hasSlot = false;\r\n    if (slot) {\r\n      hasSlot = true;\r\n    }\r\n    return (\r\n      <div class=\"checkbox__container\">\r\n        <input\r\n          type=\"checkbox\"\r\n          hidden\r\n          ref={(el) => (this.inputElement = el)}\r\n          checked={this.internalChecked}\r\n          onChange={this.handleCheckbox.bind(this)} // Listen for changes here\r\n          id='checkbox'\r\n          value={`${this.value}`}\r\n          disabled={this.disabled ? true : undefined}\r\n        />\r\n        <div\r\n          tabindex=\"0\"\r\n          onClick={this.handleCheckbox.bind(this)}\r\n          onKeyDown={this.handleKeydown.bind(this)}\r\n          role=\"checkbox\"\r\n          aria-checked={this.indeterminate ? 'mixed' : this.internalChecked.toString()}\r\n          aria-disabled={this.disabled}\r\n          aria-labelledby=\"label\"\r\n          class={`checkbox__wrapper \r\n          ${this.getCheckedClassName()}\r\n        ${this.size === \"m\" ? \"checkbox-m\" : \"\"}\r\n        ${this.indeterminate ? 'indeterminate' : \"\"}\r\n        ${this.disabled ? 'disabled' : \"\"}`}\r\n        >\r\n          {this.internalChecked && !this.internalIndeterminate && <ifx-icon icon=\"check-16\" aria-hidden=\"true\"></ifx-icon>}\r\n        </div>\r\n        {hasSlot &&\r\n          <div id=\"label\" class={`label ${this.size === \"m\" ? \"label-m\" : \"\"} ${this.disabled ? 'disabled' : \"\"} `} onClick={this.handleCheckbox.bind(this)}>\r\n            <slot />\r\n          </div>}\r\n      </div>\r\n    );\r\n  }\r\n}"]}

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox.stories.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { action } from '@storybook/addon-actions';\n\nexport default {\n  title: 'Components/Checkbox',\n  tags: ['autodocs'],\n  args: {\n    label: 'Text',\n    error: false,\n    disabled: false,\n    checked: false,\n    size: 's',\n    indeterminate: false,\n    name: 'checkbox'\n  },\n\n  argTypes: {\n    label: {\n      name: 'Label of Checkbox',\n      description: 'Set the label displayed next to *<ifx-checkbox>*.',\n      table: {\n        category: 'story controls',\n      }\n    },\n    error: {\n      description: 'Toggles the error state for the checkbox.',\n      control: 'boolean',\n      table: {\n        category: 'ifx-checkbox props',\n        defaultValue: {\n          summary: false,\n        }\n      }\n    },\n    disabled: {\n      description: 'Disables the checkbox when set to true.',\n      control: 'boolean',\n      table: {\n        category: 'ifx-checkbox props',\n        defaultValue: {\n          summary: false,\n        }\n      }\n    },\n    checked: {\n      description: 'Controls whether the checkbox is checked.',\n      control: 'boolean',\n      table: {\n        category: 'ifx-checkbox props',\n        defaultValue: {\n          summary: false,\n        }\n      }\n    },\n    indeterminate: {\n      description: 'Activates the indeterminate state for the checkbox when set to true.',\n      control: 'boolean',\n      table: {\n        category: 'ifx-checkbox props',\n        defaultValue: {\n          summary: false,\n        }\n      }\n    },\n    size: {\n      description: 'Sets the size of the checkbox. Options: s (21px) and m (25px).',\n      control: 'radio',\n      options: ['s', 'm'],\n      table: {\n        category: 'ifx-checkbox props',\n        defaultValue: {\n          summary: 's'\n        },\n        type: {\n          summary: 's | m'\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-checkbox props'\n      }\n    },\n    ifxChange: {\n      action: 'ifxChange',\n      description: 'Custom event that is triggered when the checkbox is clicked.',\n      table: {\n        category: 'custom events',\n        type: {\n          summary: 'Framework integration',\n          detail:\n            'React: onIfxChange={handleChange}\\nVue:@ifxChange=\"handleChange\"\\nAngular:(ifxChange)=\"handleChange()\"\\nVanillaJs:.addEventListener(\"ifxChange\", (event) => {//handle change});',\n        },\n      },\n    },\n    ifxError: {\n      action: 'ifxError',\n      description: 'Custom event emitted when an checkbox has an error.',\n      table: {\n        type: {\n          summary: 'Framework integration',\n          detail:\n            'React: onIfxError={handleError}\\nVue:@ifxError=\"handleError\"\\nAngular:(ifxError)=\"handleError()\"\\nVanillaJs:.addEventListener(\"ifxError\", (event) => {//handle error});',\n        },\n      },\n    },\n  },\n};\n\nconst Template = ({ error, disabled, checked, indeterminate, size, label, name }) => {\n  const checkbox = document.createElement('ifx-checkbox');\n  checkbox.setAttribute('error', error);\n  checkbox.setAttribute('disabled', disabled);\n  checkbox.setAttribute('checked', checked);\n  checkbox.setAttribute('size', size);\n  checkbox.setAttribute('indeterminate', indeterminate);\n  checkbox.setAttribute('name', name);\n  checkbox.addEventListener('ifxChange', action('ifxChange'));\n  checkbox.addEventListener('ifxError', action('ifxError'));\n  checkbox.innerHTML = `${label}`;\n\n  return checkbox;\n};\n\nexport const Default = Template.bind({});"]}
+{"version":3,"file":"checkbox.stories.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { action } from '@storybook/addon-actions';\r\n\r\nexport default {\r\n  title: 'Components/Checkbox',\r\n  tags: ['autodocs'],\r\n  args: {\r\n    label: 'Text',\r\n    error: false,\r\n    disabled: false,\r\n    checked: false,\r\n    size: 's',\r\n    indeterminate: false,\r\n    name: 'checkbox'\r\n  },\r\n\r\n  argTypes: {\r\n    label: {\r\n      name: 'Label of Checkbox',\r\n      description: 'Set the label displayed next to *<ifx-checkbox>*.',\r\n      table: {\r\n        category: 'story controls',\r\n      }\r\n    },\r\n    error: {\r\n      description: 'Toggles the error state for the checkbox.',\r\n      control: 'boolean',\r\n      table: {\r\n        category: 'ifx-checkbox props',\r\n        defaultValue: {\r\n          summary: false,\r\n        }\r\n      }\r\n    },\r\n    disabled: {\r\n      description: 'Disables the checkbox when set to true.',\r\n      control: 'boolean',\r\n      table: {\r\n        category: 'ifx-checkbox props',\r\n        defaultValue: {\r\n          summary: false,\r\n        }\r\n      }\r\n    },\r\n    checked: {\r\n      description: 'Controls whether the checkbox is checked.',\r\n      control: 'boolean',\r\n      table: {\r\n        category: 'ifx-checkbox props',\r\n        defaultValue: {\r\n          summary: false,\r\n        }\r\n      }\r\n    },\r\n    indeterminate: {\r\n      description: 'Activates the indeterminate state for the checkbox when set to true.',\r\n      control: 'boolean',\r\n      table: {\r\n        category: 'ifx-checkbox props',\r\n        defaultValue: {\r\n          summary: false,\r\n        }\r\n      }\r\n    },\r\n    size: {\r\n      description: 'Sets the size of the checkbox. Options: s (21px) and m (25px).',\r\n      control: 'radio',\r\n      options: ['s', 'm'],\r\n      table: {\r\n        category: 'ifx-checkbox props',\r\n        defaultValue: {\r\n          summary: 's'\r\n        },\r\n        type: {\r\n          summary: 's | m'\r\n        }\r\n      }\r\n    },\r\n    name: {\r\n      description: 'Name of the element, that is used as reference when a form is submitted.',\r\n      table: {\r\n        category: 'ifx-checkbox props'\r\n      }\r\n    },\r\n    ifxChange: {\r\n      action: 'ifxChange',\r\n      description: 'Custom event that is triggered when the checkbox is clicked.',\r\n      table: {\r\n        category: 'custom events',\r\n        type: {\r\n          summary: 'Framework integration',\r\n          detail:\r\n            'React: onIfxChange={handleChange}\\nVue:@ifxChange=\"handleChange\"\\nAngular:(ifxChange)=\"handleChange()\"\\nVanillaJs:.addEventListener(\"ifxChange\", (event) => {//handle change});',\r\n        },\r\n      },\r\n    },\r\n    ifxError: {\r\n      action: 'ifxError',\r\n      description: 'Custom event emitted when an checkbox has an error.',\r\n      table: {\r\n        type: {\r\n          summary: 'Framework integration',\r\n          detail:\r\n            'React: onIfxError={handleError}\\nVue:@ifxError=\"handleError\"\\nAngular:(ifxError)=\"handleError()\"\\nVanillaJs:.addEventListener(\"ifxError\", (event) => {//handle error});',\r\n        },\r\n      },\r\n    },\r\n  },\r\n};\r\n\r\nconst Template = ({ error, disabled, checked, indeterminate, size, label, name }) => {\r\n  const checkbox = document.createElement('ifx-checkbox');\r\n  checkbox.setAttribute('error', error);\r\n  checkbox.setAttribute('disabled', disabled);\r\n  checkbox.setAttribute('checked', checked);\r\n  checkbox.setAttribute('size', size);\r\n  checkbox.setAttribute('indeterminate', indeterminate);\r\n  checkbox.setAttribute('name', name);\r\n  checkbox.addEventListener('ifxChange', action('ifxChange'));\r\n  checkbox.addEventListener('ifxError', action('ifxError'));\r\n  checkbox.innerHTML = `${label}`;\r\n\r\n  return checkbox;\r\n};\r\n\r\nexport const Default = Template.bind({});"]}

package/dist/collection/components/checkbox-group/checkbox-group.js

@@ -50,7 +50,7 @@ export class CheckboxGroup {
         this.hasErrors = Array.from(this.errorStates.values()).some((error) => error);
     }
     render() {
-        return (h("div", { key: 'c9424a54db6fcce412275bea3e584b6985cf6479', class: 'checkbox-group-container' }, this.showGroupLabel && (h("div", { key: '9ebd83b86b4be4de0107edeae3101cd64915e6b1', class: "group-label" }, this.groupLabelText, this.required && h("span", { key: 'd83004ec7fc85d23453db833e4b87748be2d088f', class: `required ${this.hasErrors ? 'error' : ''}` }, "*"))), h("div", { key: '647c87572ee92805df964c05b59f59886592c273', class: `checkbox-group ${this.alignment} ${this.size}` }, h("slot", { key: '2ed8287636dda53576fd27440ae9d99b569951d8', onSlotchange: this.handleSlotChange })), this.showCaption ? (h("div", { class: `caption ${this.hasErrors ? 'error' : 'default'}` }, this.showCaptionIcon ? h("div", { class: 'caption-icon' }, h("ifx-icon", { icon: "c-info-16" })) : '', h("div", { class: 'caption-text' }, this.captionText))) : ''));
+        return (h("div", { key: '9a05328e66db20a356ae8353a3cc42b15095a715', class: 'checkbox-group-container' }, this.showGroupLabel && (h("div", { key: 'd4f27726deac615b2fadde61ed2adee68c7390f5', class: "group-label" }, this.groupLabelText, this.required && h("span", { key: '3cd457b997793b0bf50336f94e03b532f3351618', class: `required ${this.hasErrors ? 'error' : ''}` }, "*"))), h("div", { key: 'afa8fba0c9182d3fb7b65722e07ae36761824ec6', class: `checkbox-group ${this.alignment} ${this.size}` }, h("slot", { key: 'c98be02ec7595d6cfbb1694327ba143e9c04cd25', onSlotchange: this.handleSlotChange })), this.showCaption ? (h("div", { class: `caption ${this.hasErrors ? 'error' : 'default'}` }, this.showCaptionIcon ? h("div", { class: 'caption-icon' }, h("ifx-icon", { icon: "c-info-16" })) : '', h("div", { class: 'caption-text' }, this.captionText))) : ''));
     }
     static get is() { return "ifx-checkbox-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/checkbox-group/checkbox-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox-group.js","sourceRoot":"","sources":["../../../src/components/checkbox-group/checkbox-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, State, Prop, h, Element, Listen, Method } 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-checkbox-group',\n  styleUrl: 'checkbox-group.scss',\n  shadow: true,\n  // formAssociated: true\n})\n\nexport class CheckboxGroup {\n  private errorStates: Map<HTMLElement, boolean> = new Map();\n\n  @Element() el: HTMLElement;\n  @Prop() alignment: 'horizontal' | 'vertical' = 'vertical';\n  @Prop() size: string;\n  @Prop() showGroupLabel: boolean;\n  @Prop() groupLabelText: string = 'Group Label Text';\n  @Prop() showCaption: boolean;\n  @Prop() captionText: string;\n  @Prop() showCaptionIcon: boolean;\n  @Prop() required: boolean = false;\n  @State() hasErrors: boolean = false;\n\n  @Listen('ifxError')\n  handleCheckboxError(event: CustomEvent) {\n    const checkbox = event.target as HTMLElement;\n    if (checkbox.tagName.toLowerCase() === 'ifx-checkbox') {\n      this.errorStates.set(checkbox, event.detail);\n      this.updateHasErrors();\n    }\n  }\n\n  // Method to set the error state of all checkboxes in the group\n  @Method()\n  async setGroupError(error: boolean) {\n    const checkboxes = Array.from(this.el.querySelectorAll('ifx-checkbox'));\n    checkboxes.forEach((checkbox) => {\n      (checkbox as any).error = error;\n    });\n  }\n\n  componentWillLoad() {\n    this.initializeState();\n\n  }\n\n  async componentDidLoad() { \n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-checkbox-group', await framework)\n    }\n  }\n\n  handleSlotChange = () => {\n    this.initializeState();\n  };\n\n  private initializeState() {\n    this.errorStates.clear();\n    const checkboxes = Array.from(this.el.querySelectorAll('ifx-checkbox'));\n    checkboxes.forEach((checkbox) => {\n      if (!this.errorStates.has(checkbox)) {\n        this.errorStates.set(checkbox, (checkbox as any).error || false);\n      }\n    });\n    this.updateHasErrors();\n  }\n\n  private updateHasErrors() {\n    this.hasErrors = Array.from(this.errorStates.values()).some((error) => error);\n  }\n\n  render() {\n    return (\n      <div class='checkbox-group-container'>\n        {this.showGroupLabel && (\n          <div class=\"group-label\">\n            {this.groupLabelText}\n            {this.required && <span class={`required ${this.hasErrors ? 'error' : ''}`}>*</span>}\n          </div>\n        )}\n        <div class={`checkbox-group ${this.alignment} ${this.size}`}>\n          <slot onSlotchange={this.handleSlotChange}></slot>\n        </div>\n        {this.showCaption ? (\n          <div class={`caption ${this.hasErrors ? 'error' : 'default'}`}>\n            {this.showCaptionIcon ? <div class='caption-icon'><ifx-icon icon=\"c-info-16\">\n            </ifx-icon></div> : ''}\n            <div class='caption-text'>{this.captionText}</div>\n          </div>) : ''}\n      </div>\n    );\n  }\n}"]}
+{"version":3,"file":"checkbox-group.js","sourceRoot":"","sources":["../../../src/components/checkbox-group/checkbox-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, State, Prop, h, Element, Listen, Method } from '@stencil/core';\r\nimport { trackComponent } from '../../global/utils/tracking';\r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\n\r\n@Component({\r\n  tag: 'ifx-checkbox-group',\r\n  styleUrl: 'checkbox-group.scss',\r\n  shadow: true,\r\n  // formAssociated: true\r\n})\r\n\r\nexport class CheckboxGroup {\r\n  private errorStates: Map<HTMLElement, boolean> = new Map();\r\n\r\n  @Element() el: HTMLElement;\r\n  @Prop() alignment: 'horizontal' | 'vertical' = 'vertical';\r\n  @Prop() size: string;\r\n  @Prop() showGroupLabel: boolean;\r\n  @Prop() groupLabelText: string = 'Group Label Text';\r\n  @Prop() showCaption: boolean;\r\n  @Prop() captionText: string;\r\n  @Prop() showCaptionIcon: boolean;\r\n  @Prop() required: boolean = false;\r\n  @State() hasErrors: boolean = false;\r\n\r\n  @Listen('ifxError')\r\n  handleCheckboxError(event: CustomEvent) {\r\n    const checkbox = event.target as HTMLElement;\r\n    if (checkbox.tagName.toLowerCase() === 'ifx-checkbox') {\r\n      this.errorStates.set(checkbox, event.detail);\r\n      this.updateHasErrors();\r\n    }\r\n  }\r\n\r\n  // Method to set the error state of all checkboxes in the group\r\n  @Method()\r\n  async setGroupError(error: boolean) {\r\n    const checkboxes = Array.from(this.el.querySelectorAll('ifx-checkbox'));\r\n    checkboxes.forEach((checkbox) => {\r\n      (checkbox as any).error = error;\r\n    });\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.initializeState();\r\n\r\n  }\r\n\r\n  async componentDidLoad() { \r\n    if(!isNestedInIfxComponent(this.el)) { \r\n      const framework = detectFramework();\r\n      trackComponent('ifx-checkbox-group', await framework)\r\n    }\r\n  }\r\n\r\n  handleSlotChange = () => {\r\n    this.initializeState();\r\n  };\r\n\r\n  private initializeState() {\r\n    this.errorStates.clear();\r\n    const checkboxes = Array.from(this.el.querySelectorAll('ifx-checkbox'));\r\n    checkboxes.forEach((checkbox) => {\r\n      if (!this.errorStates.has(checkbox)) {\r\n        this.errorStates.set(checkbox, (checkbox as any).error || false);\r\n      }\r\n    });\r\n    this.updateHasErrors();\r\n  }\r\n\r\n  private updateHasErrors() {\r\n    this.hasErrors = Array.from(this.errorStates.values()).some((error) => error);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class='checkbox-group-container'>\r\n        {this.showGroupLabel && (\r\n          <div class=\"group-label\">\r\n            {this.groupLabelText}\r\n            {this.required && <span class={`required ${this.hasErrors ? 'error' : ''}`}>*</span>}\r\n          </div>\r\n        )}\r\n        <div class={`checkbox-group ${this.alignment} ${this.size}`}>\r\n          <slot onSlotchange={this.handleSlotChange}></slot>\r\n        </div>\r\n        {this.showCaption ? (\r\n          <div class={`caption ${this.hasErrors ? 'error' : 'default'}`}>\r\n            {this.showCaptionIcon ? <div class='caption-icon'><ifx-icon icon=\"c-info-16\">\r\n            </ifx-icon></div> : ''}\r\n            <div class='caption-text'>{this.captionText}</div>\r\n          </div>) : ''}\r\n      </div>\r\n    );\r\n  }\r\n}"]}