@infineon/infineon-design-system-stencil 39.4.4-canary.0 → 39.5.0--canary.2134.ef608256dd1abad1333d432c8cc2958560d19738.0

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 {\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"]}
+{"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"]}

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

@@ -100,12 +100,12 @@ export class Checkbox {
         if (slot) {
             hasSlot = true;
         }
-        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' }))));
+        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' }))));
     }
     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';\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}"]}
+{"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}"]}

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":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,eAAe;IACb,KAAK,EAAE,qBAAqB;IAC5B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM;QACb,KAAK,EAAE,KAAK;QACZ,QAAQ,EAAE,KAAK;QACf,OAAO,EAAE,KAAK;QACd,IAAI,EAAE,GAAG;QACT,aAAa,EAAE,KAAK;QACpB,IAAI,EAAE,UAAU;KACjB;IAED,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,IAAI,EAAE,mBAAmB;YACzB,WAAW,EAAE,mDAAmD;YAChE,KAAK,EAAE;gBACL,QAAQ,EAAE,gBAAgB;aAC3B;SACF;QACD,KAAK,EAAE;YACL,WAAW,EAAE,2CAA2C;YACxD,OAAO,EAAE,SAAS;YAClB,KAAK,EAAE;gBACL,QAAQ,EAAE,oBAAoB;gBAC9B,YAAY,EAAE;oBACZ,OAAO,EAAE,KAAK;iBACf;aACF;SACF;QACD,QAAQ,EAAE;YACR,WAAW,EAAE,yCAAyC;YACtD,OAAO,EAAE,SAAS;YAClB,KAAK,EAAE;gBACL,QAAQ,EAAE,oBAAoB;gBAC9B,YAAY,EAAE;oBACZ,OAAO,EAAE,KAAK;iBACf;aACF;SACF;QACD,OAAO,EAAE;YACP,WAAW,EAAE,2CAA2C;YACxD,OAAO,EAAE,SAAS;YAClB,KAAK,EAAE;gBACL,QAAQ,EAAE,oBAAoB;gBAC9B,YAAY,EAAE;oBACZ,OAAO,EAAE,KAAK;iBACf;aACF;SACF;QACD,aAAa,EAAE;YACb,WAAW,EAAE,sEAAsE;YACnF,OAAO,EAAE,SAAS;YAClB,KAAK,EAAE;gBACL,QAAQ,EAAE,oBAAoB;gBAC9B,YAAY,EAAE;oBACZ,OAAO,EAAE,KAAK;iBACf;aACF;SACF;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,gEAAgE;YAC7E,OAAO,EAAE,OAAO;YAChB,OAAO,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC;YACnB,KAAK,EAAE;gBACL,QAAQ,EAAE,oBAAoB;gBAC9B,YAAY,EAAE;oBACZ,OAAO,EAAE,GAAG;iBACb;gBACD,IAAI,EAAE;oBACJ,OAAO,EAAE,OAAO;iBACjB;aACF;SACF;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,0EAA0E;YACvF,KAAK,EAAE;gBACL,QAAQ,EAAE,oBAAoB;aAC/B;SACF;QACD,SAAS,EAAE;YACT,MAAM,EAAE,WAAW;YACnB,WAAW,EAAE,8DAA8D;YAC3E,KAAK,EAAE;gBACL,QAAQ,EAAE,eAAe;gBACzB,IAAI,EAAE;oBACJ,OAAO,EAAE,uBAAuB;oBAChC,MAAM,EACJ,iLAAiL;iBACpL;aACF;SACF;QACD,QAAQ,EAAE;YACR,MAAM,EAAE,UAAU;YAClB,WAAW,EAAE,qDAAqD;YAClE,KAAK,EAAE;gBACL,IAAI,EAAE;oBACJ,OAAO,EAAE,uBAAuB;oBAChC,MAAM,EACJ,yKAAyK;iBAC5K;aACF;SACF;KACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,aAAa,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;IAClF,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;IACxD,QAAQ,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;IACtC,QAAQ,CAAC,YAAY,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;IAC5C,QAAQ,CAAC,YAAY,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;IAC1C,QAAQ,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IACpC,QAAQ,CAAC,YAAY,CAAC,eAAe,EAAE,aAAa,CAAC,CAAC;IACtD,QAAQ,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IACpC,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC;IAC5D,QAAQ,CAAC,gBAAgB,CAAC,UAAU,EAAE,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC;IAC1D,QAAQ,CAAC,SAAS,GAAG,GAAG,KAAK,EAAE,CAAC;IAEhC,OAAO,QAAQ,CAAC;AAClB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","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({});"]}
+{"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({});"]}

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: '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))) : ''));
+        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))) : ''));
     }
     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';\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}"]}
+{"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}"]}

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

@@ -150,9 +150,9 @@ const Template = args => {
             checkboxes += `<ifx-checkbox value="${i}" size="${args.size}">Option ${i}</ifx-checkbox>`;
         }
     }
-    const template = `
-        <ifx-checkbox-group alignment="${args.alignment}" show-group-label="${args.showGroupLabel}" group-label-text="${args.groupLabelText}" show-caption="${args.showCaption}" caption-text="${args.captionText}" show-caption-icon="${args.showCaptionIcon}" required="${args.required}">
-            ${checkboxes}
+    const template = `
+        <ifx-checkbox-group alignment="${args.alignment}" show-group-label="${args.showGroupLabel}" group-label-text="${args.groupLabelText}" show-caption="${args.showCaption}" caption-text="${args.captionText}" show-caption-icon="${args.showCaptionIcon}" required="${args.required}">
+            ${checkboxes}
         </ifx-checkbox-group>`;
     return template;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox-group.stories.js","sourceRoot":"","sources":["../../../src/components/checkbox-group/checkbox-group.stories.ts"],"names":[],"mappings":"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","sourcesContent":["export default {\r\n    title: 'Components/Checkbox Group',\r\n    tags: ['autodocs'],\r\n    args: {\r\n        amountOfItems: 3,\r\n        alignment: 'vertical',\r\n        checked: false,\r\n        disabled: false,\r\n        indeterminate: false,\r\n        error: false,\r\n        size: 'm',\r\n        showGroupLabel: false,\r\n        groupLabelText: 'Group Label',\r\n        showCaption: false,\r\n        captionText: 'Caption text, description, error notification',\r\n        showCaptionIcon: false,\r\n        required: false,\r\n    },\r\n    argTypes: {\r\n        alignment: {\r\n            description: 'Set the orientation of the checkbox group.',\r\n            options: ['vertical', 'horizontal'],\r\n            control: { type: 'radio' },\r\n            table: {\r\n                category: 'ifx-checkbox-group props',\r\n                defaultValue: { summary: 'vertical' }\r\n            }\r\n        },\r\n        size: {\r\n            description: 'Size options for the checkbox.',\r\n            options: ['s', 'm'],\r\n            control: { type: 'radio' },\r\n            table: {\r\n                category: 'ifx-checkbox props',\r\n                defaultValue: { summary: 'm' },\r\n                type: {\r\n                    summary: 's | m'\r\n                }\r\n            }\r\n        },\r\n        amountOfItems: {\r\n            name: 'Amount of Items',\r\n            description: 'Set the amount of checkboxes.',\r\n            control: { type: 'number' },\r\n            table: {\r\n                category: 'story controls',\r\n                defaultValue: { summary: 3 }\r\n            }\r\n        },\r\n        checked: {\r\n            description: 'Set the checked state.',\r\n            control: { type: 'boolean' },\r\n            table: {\r\n                category: 'ifx-checkbox props',\r\n                defaultValue: { summary: 'false' }\r\n            }\r\n        },\r\n        disabled: {\r\n            description: 'Disable the checkbox.',\r\n            control: { type: 'boolean' },\r\n            table: {\r\n                category: 'ifx-checkbox props',\r\n                defaultValue: { summary: 'false' }\r\n            }\r\n        },\r\n        error: {\r\n            description: 'Set the error state for the entire checkbox group.',\r\n            control: { type: 'boolean' },\r\n            table: {\r\n                category: 'ifx-checkbox props',\r\n                defaultValue: { summary: 'false' }\r\n            }\r\n        },\r\n        indeterminate: {\r\n            description: 'Set the partially checked state.',\r\n            control: { type: 'boolean' },\r\n            table: {\r\n                category: 'ifx-checkbox props',\r\n                defaultValue: { summary: 'false' }\r\n            }\r\n        },\r\n        showGroupLabel: {\r\n            description: 'Show the group label.',\r\n            control: { type: 'boolean' },\r\n            table: {\r\n                category: 'ifx-checkbox-group props',\r\n                defaultValue: { summary: 'false' }\r\n            }\r\n        },\r\n        groupLabelText: {\r\n            description: 'Set the group label text.',\r\n            control: { type: 'text' },\r\n            table: {\r\n                category: 'ifx-checkbox-group props',\r\n                defaultValue: { summary: '' }\r\n            }\r\n        },\r\n        showCaption: {\r\n            description: 'Show the caption.',\r\n            control: { type: 'boolean' },\r\n            table: {\r\n                category: 'ifx-checkbox-group props',\r\n                defaultValue: { summary: 'false' }\r\n            }\r\n        },\r\n        captionText: {\r\n            description: 'Set the caption text.',\r\n            control: { type: 'text' },\r\n            table: {\r\n                category: 'ifx-checkbox-group props',\r\n                defaultValue: { summary: '' }\r\n            }\r\n        },\r\n        showCaptionIcon: {\r\n            description: 'Show the caption icon.',\r\n            control: { type: 'boolean' },\r\n            table: {\r\n                category: 'ifx-checkbox-group props',\r\n                defaultValue: { summary: 'false' }\r\n            }\r\n        },\r\n        required: {\r\n            description: 'Marks the checkbox-group as required.',\r\n            control: { type: 'boolean' },\r\n            table: {\r\n                category: 'ifx-checkbox-group props',\r\n                defaultValue: { summary: 'false' }\r\n            }\r\n        },\r\n        setGroupError: {\r\n            action: 'setGroupError',\r\n            description: 'Method to set the error state of all checkboxes in the group.',\r\n            table: {\r\n                category: 'ifx-checkbox-group methods',\r\n                type: {\r\n                    summary: 'error : boolean',\r\n                    detail: 'CheckboxGroup.setGroupError(error)'\r\n                }\r\n            }\r\n        }\r\n    }\r\n};\r\n\r\nconst Template = args => {\r\n    let checkboxes = '';\r\n\r\n    for (let i = 0; i < args.amountOfItems; i++) {\r\n        if (i === 0) {\r\n            checkboxes += `<ifx-checkbox value=\"${i}\" disabled=\"${args.disabled}\" checked=\"${args.checked}\" size=\"${args.size}\" indeterminate=\"${args.indeterminate}\" error=\"${args.error}\">Option ${i}</ifx-checkbox>`;\r\n        }\r\n        else {\r\n            checkboxes += `<ifx-checkbox value=\"${i}\" size=\"${args.size}\">Option ${i}</ifx-checkbox>`;\r\n        }\r\n    }\r\n\r\n    const template = `\r\n        <ifx-checkbox-group alignment=\"${args.alignment}\" show-group-label=\"${args.showGroupLabel}\" group-label-text=\"${args.groupLabelText}\" show-caption=\"${args.showCaption}\" caption-text=\"${args.captionText}\" show-caption-icon=\"${args.showCaptionIcon}\" required=\"${args.required}\">\r\n            ${checkboxes}\r\n        </ifx-checkbox-group>`;\r\n\r\n    return template;\r\n};\r\n\r\nexport const Default = Template.bind({});\r\n"]}
+{"version":3,"file":"checkbox-group.stories.js","sourceRoot":"","sources":["../../../src/components/checkbox-group/checkbox-group.stories.ts"],"names":[],"mappings":"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","sourcesContent":["export default {\n    title: 'Components/Checkbox Group',\n    tags: ['autodocs'],\n    args: {\n        amountOfItems: 3,\n        alignment: 'vertical',\n        checked: false,\n        disabled: false,\n        indeterminate: false,\n        error: false,\n        size: 'm',\n        showGroupLabel: false,\n        groupLabelText: 'Group Label',\n        showCaption: false,\n        captionText: 'Caption text, description, error notification',\n        showCaptionIcon: false,\n        required: false,\n    },\n    argTypes: {\n        alignment: {\n            description: 'Set the orientation of the checkbox group.',\n            options: ['vertical', 'horizontal'],\n            control: { type: 'radio' },\n            table: {\n                category: 'ifx-checkbox-group props',\n                defaultValue: { summary: 'vertical' }\n            }\n        },\n        size: {\n            description: 'Size options for the checkbox.',\n            options: ['s', 'm'],\n            control: { type: 'radio' },\n            table: {\n                category: 'ifx-checkbox props',\n                defaultValue: { summary: 'm' },\n                type: {\n                    summary: 's | m'\n                }\n            }\n        },\n        amountOfItems: {\n            name: 'Amount of Items',\n            description: 'Set the amount of checkboxes.',\n            control: { type: 'number' },\n            table: {\n                category: 'story controls',\n                defaultValue: { summary: 3 }\n            }\n        },\n        checked: {\n            description: 'Set the checked state.',\n            control: { type: 'boolean' },\n            table: {\n                category: 'ifx-checkbox props',\n                defaultValue: { summary: 'false' }\n            }\n        },\n        disabled: {\n            description: 'Disable the checkbox.',\n            control: { type: 'boolean' },\n            table: {\n                category: 'ifx-checkbox props',\n                defaultValue: { summary: 'false' }\n            }\n        },\n        error: {\n            description: 'Set the error state for the entire checkbox group.',\n            control: { type: 'boolean' },\n            table: {\n                category: 'ifx-checkbox props',\n                defaultValue: { summary: 'false' }\n            }\n        },\n        indeterminate: {\n            description: 'Set the partially checked state.',\n            control: { type: 'boolean' },\n            table: {\n                category: 'ifx-checkbox props',\n                defaultValue: { summary: 'false' }\n            }\n        },\n        showGroupLabel: {\n            description: 'Show the group label.',\n            control: { type: 'boolean' },\n            table: {\n                category: 'ifx-checkbox-group props',\n                defaultValue: { summary: 'false' }\n            }\n        },\n        groupLabelText: {\n            description: 'Set the group label text.',\n            control: { type: 'text' },\n            table: {\n                category: 'ifx-checkbox-group props',\n                defaultValue: { summary: '' }\n            }\n        },\n        showCaption: {\n            description: 'Show the caption.',\n            control: { type: 'boolean' },\n            table: {\n                category: 'ifx-checkbox-group props',\n                defaultValue: { summary: 'false' }\n            }\n        },\n        captionText: {\n            description: 'Set the caption text.',\n            control: { type: 'text' },\n            table: {\n                category: 'ifx-checkbox-group props',\n                defaultValue: { summary: '' }\n            }\n        },\n        showCaptionIcon: {\n            description: 'Show the caption icon.',\n            control: { type: 'boolean' },\n            table: {\n                category: 'ifx-checkbox-group props',\n                defaultValue: { summary: 'false' }\n            }\n        },\n        required: {\n            description: 'Marks the checkbox-group as required.',\n            control: { type: 'boolean' },\n            table: {\n                category: 'ifx-checkbox-group props',\n                defaultValue: { summary: 'false' }\n            }\n        },\n        setGroupError: {\n            action: 'setGroupError',\n            description: 'Method to set the error state of all checkboxes in the group.',\n            table: {\n                category: 'ifx-checkbox-group methods',\n                type: {\n                    summary: 'error : boolean',\n                    detail: 'CheckboxGroup.setGroupError(error)'\n                }\n            }\n        }\n    }\n};\n\nconst Template = args => {\n    let checkboxes = '';\n\n    for (let i = 0; i < args.amountOfItems; i++) {\n        if (i === 0) {\n            checkboxes += `<ifx-checkbox value=\"${i}\" disabled=\"${args.disabled}\" checked=\"${args.checked}\" size=\"${args.size}\" indeterminate=\"${args.indeterminate}\" error=\"${args.error}\">Option ${i}</ifx-checkbox>`;\n        }\n        else {\n            checkboxes += `<ifx-checkbox value=\"${i}\" size=\"${args.size}\">Option ${i}</ifx-checkbox>`;\n        }\n    }\n\n    const template = `\n        <ifx-checkbox-group alignment=\"${args.alignment}\" show-group-label=\"${args.showGroupLabel}\" group-label-text=\"${args.groupLabelText}\" show-caption=\"${args.showCaption}\" caption-text=\"${args.captionText}\" show-caption-icon=\"${args.showCaptionIcon}\" required=\"${args.required}\">\n            ${checkboxes}\n        </ifx-checkbox-group>`;\n\n    return template;\n};\n\nexport const Default = Template.bind({});\n"]}

package/dist/collection/components/chip/chip-item/chip-item.js

@@ -56,9 +56,9 @@ export class ChipItem {
         this.handleSelectedState();
     }
     render() {
-        return (h("div", { key: '74bd25551e6ac6bb2ff4d53ffd38120c8941cbcb', class: `chip-item chip-item--${this.chipState.size} 
+        return (h("div", { key: '4d5ace01c02658ed46fbf42c36138a06c3d46049', class: `chip-item chip-item--${this.chipState.size} 
                     chip-item--${(this.selected && this.chipState.variant) === 'single' ? 'selected' : ''}`, tabIndex: 0, onClick: () => { this.handleItemClick(); }, onKeyDown: (e) => { this.handleItemKeyDown(e); }, role: "option", "aria-selected": this.selected.toString() }, this.chipState.variant === 'multi' &&
-            h("ifx-checkbox", { key: 'e830188223a4a73ccf10bc72af789bb7ea11cc02', checked: this.selected, tabIndex: -1, size: 's' }), h("div", { key: '9c1727d6a29a63102c7e1c2b58c9157e94de6bc3', class: 'chip-item__label' }, " ", h("slot", { key: '45baf75c97c6f4103d8c1ade78e9fafe105c13e9' }), " "), h("div", { key: '265869ea8579f7db834523f3f3c43fee935d1649', class: 'chip-item__selected-indicator' }, h("ifx-icon", { key: '39fd063f3b5fb6ef3ca146108067b68c33e71697', icon: 'check-16' }, " "))));
+            h("ifx-checkbox", { key: 'bf1af2aaf0944351eb33ace8c704bbb4973951d6', checked: this.selected, tabIndex: -1, size: 's' }), h("div", { key: '50347975f1554b7a02ef2bde34750b361daad549', class: 'chip-item__label' }, " ", h("slot", { key: '9667dd32c70e5f4a7946499f828883efb10caff2' }), " "), h("div", { key: 'f2fcab283b717837bc8b6c09b6b3c6c72675e40c', class: 'chip-item__selected-indicator' }, h("ifx-icon", { key: '84e489e9a638f2165c436b10bea8d826ae6db11c', icon: 'check-16' }, " "))));
     }
     static get is() { return "ifx-chip-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/chip/chip-item/chip-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"chip-item.js","sourceRoot":"","sources":["../../../../src/components/chip/chip-item/chip-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h,\r\n    Component,\r\n    Element,\r\n    Event,\r\n    EventEmitter, \r\n    Listen,\r\n    Prop, \r\n    Watch } from '@stencil/core';\r\nimport { ChipItemSelectEvent, ChipState } from '../interfaces';\r\n\r\n@Component({\r\ntag: 'ifx-chip-item',\r\nstyleUrl: 'chip-item.scss',\r\nshadow: true\r\n})\r\n\r\nexport class ChipItem {\r\n@Element() chipItem: HTMLIfxChipItemElement;\r\n\r\n@Event({ composed: false }) ifxChipItemSelect: EventEmitter<ChipItemSelectEvent>;\r\n\r\n@Prop() value: string = undefined;\r\n@Prop() chipState: ChipState = { emitIfxChipItemSelect: true, variant: 'multi', size: 'large' }; \r\n@Prop({ mutable: true, reflect: true }) selected: boolean = false;\r\n\r\n@Listen('ifxChipItemSelect', { target: 'body' })\r\nupdateItemSelection(event: CustomEvent<ChipItemSelectEvent>) {\r\n   if (this.chipState.variant === 'single') {\r\n       const target = event.target as HTMLIfxChipItemElement;\r\n       /* Also making sure chip items are from the same group (parent) while unselecting. */\r\n       if (this.chipItem !== target && this.chipItem.parentElement === target.parentElement) {\r\n           this.selected = false;\r\n       }\r\n   }\r\n} \r\n\r\n@Watch('selected')\r\nvalidateSelected(newValue: boolean, oldValue: boolean) {\r\n   if (newValue !== oldValue) {\r\n       /* Do not emit if ChipState does not allow. */\r\n       if (this.chipState.emitIfxChipItemSelect){\r\n           this.emitIfxChipItemSelectEvent();\r\n       } else {\r\n           this.chipState.emitIfxChipItemSelect = true;\r\n       }\r\n   }\r\n} \r\n\r\ngetItemLabel(): string {\r\n   return this.chipItem.innerText as string;\r\n}\r\n\r\ntoggleItemSelection() {\r\n   this.selected = !this.selected;\r\n}\r\n   \r\n\r\nemitIfxChipItemSelectEvent(emitIfxChange: boolean = true) {\r\n   this.ifxChipItemSelect.emit({ emitIfxChange: emitIfxChange,\r\n                           key: this.chipState.key,\r\n                           label: this.getItemLabel(), \r\n                           selected: this.selected, \r\n                           value: this.value });\r\n}\r\n\r\nhandleItemClick() {\r\n   this.toggleItemSelection();\r\n}\r\n\r\nhandleItemKeyDown(event: KeyboardEvent) {\r\n   if (event.code === 'Enter' || event.code === 'Space') {\r\n       this.toggleItemSelection();\r\n   }\r\n}\r\n\r\nhandleSelectedState() {\r\n   if (this.selected) {\r\n       this.emitIfxChipItemSelectEvent(false);\r\n   }\r\n}\r\n\r\n\r\ncomponentWillLoad() {\r\n   /* Propogating the selected state to the Chip (Parent) component if it is set. */\r\n   this.handleSelectedState();\r\n}\r\n\r\nrender() {\r\n   return (\r\n       <div class={`chip-item chip-item--${this.chipState.size} \r\n                    chip-item--${(this.selected && this.chipState.variant) === 'single' ? 'selected' : ''}`} \r\n           tabIndex={0}\r\n           onClick={() => {this.handleItemClick()}}\r\n           onKeyDown={(e) => {this.handleItemKeyDown(e)}}\r\n           role=\"option\"\r\n           aria-selected={this.selected.toString()}>    \r\n           {/* Checkbox; renders only in 'multi' variant. */}\r\n           { \r\n               this.chipState.variant === 'multi' &&\r\n               <ifx-checkbox checked={this.selected}\r\n                   tabIndex={-1} \r\n                   size='s'>\r\n               </ifx-checkbox>\r\n           }\r\n\r\n           <div class='chip-item__label'> <slot /> </div>\r\n\r\n           {/* Selected indicator only visible in 'single' variant. */}\r\n           <div class='chip-item__selected-indicator'> \r\n               <ifx-icon icon='check-16'> </ifx-icon> \r\n           </div>\r\n\r\n       </div>\r\n   );\r\n}\r\n}"]}
+{"version":3,"file":"chip-item.js","sourceRoot":"","sources":["../../../../src/components/chip/chip-item/chip-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h,\n    Component,\n    Element,\n    Event,\n    EventEmitter, \n    Listen,\n    Prop, \n    Watch } from '@stencil/core';\nimport { ChipItemSelectEvent, ChipState } from '../interfaces';\n\n@Component({\ntag: 'ifx-chip-item',\nstyleUrl: 'chip-item.scss',\nshadow: true\n})\n\nexport class ChipItem {\n@Element() chipItem: HTMLIfxChipItemElement;\n\n@Event({ composed: false }) ifxChipItemSelect: EventEmitter<ChipItemSelectEvent>;\n\n@Prop() value: string = undefined;\n@Prop() chipState: ChipState = { emitIfxChipItemSelect: true, variant: 'multi', size: 'large' }; \n@Prop({ mutable: true, reflect: true }) selected: boolean = false;\n\n@Listen('ifxChipItemSelect', { target: 'body' })\nupdateItemSelection(event: CustomEvent<ChipItemSelectEvent>) {\n   if (this.chipState.variant === 'single') {\n       const target = event.target as HTMLIfxChipItemElement;\n       /* Also making sure chip items are from the same group (parent) while unselecting. */\n       if (this.chipItem !== target && this.chipItem.parentElement === target.parentElement) {\n           this.selected = false;\n       }\n   }\n} \n\n@Watch('selected')\nvalidateSelected(newValue: boolean, oldValue: boolean) {\n   if (newValue !== oldValue) {\n       /* Do not emit if ChipState does not allow. */\n       if (this.chipState.emitIfxChipItemSelect){\n           this.emitIfxChipItemSelectEvent();\n       } else {\n           this.chipState.emitIfxChipItemSelect = true;\n       }\n   }\n} \n\ngetItemLabel(): string {\n   return this.chipItem.innerText as string;\n}\n\ntoggleItemSelection() {\n   this.selected = !this.selected;\n}\n   \n\nemitIfxChipItemSelectEvent(emitIfxChange: boolean = true) {\n   this.ifxChipItemSelect.emit({ emitIfxChange: emitIfxChange,\n                           key: this.chipState.key,\n                           label: this.getItemLabel(), \n                           selected: this.selected, \n                           value: this.value });\n}\n\nhandleItemClick() {\n   this.toggleItemSelection();\n}\n\nhandleItemKeyDown(event: KeyboardEvent) {\n   if (event.code === 'Enter' || event.code === 'Space') {\n       this.toggleItemSelection();\n   }\n}\n\nhandleSelectedState() {\n   if (this.selected) {\n       this.emitIfxChipItemSelectEvent(false);\n   }\n}\n\n\ncomponentWillLoad() {\n   /* Propogating the selected state to the Chip (Parent) component if it is set. */\n   this.handleSelectedState();\n}\n\nrender() {\n   return (\n       <div class={`chip-item chip-item--${this.chipState.size} \n                    chip-item--${(this.selected && this.chipState.variant) === 'single' ? 'selected' : ''}`} \n           tabIndex={0}\n           onClick={() => {this.handleItemClick()}}\n           onKeyDown={(e) => {this.handleItemKeyDown(e)}}\n           role=\"option\"\n           aria-selected={this.selected.toString()}>    \n           {/* Checkbox; renders only in 'multi' variant. */}\n           { \n               this.chipState.variant === 'multi' &&\n               <ifx-checkbox checked={this.selected}\n                   tabIndex={-1} \n                   size='s'>\n               </ifx-checkbox>\n           }\n\n           <div class='chip-item__label'> <slot /> </div>\n\n           {/* Selected indicator only visible in 'single' variant. */}\n           <div class='chip-item__selected-indicator'> \n               <ifx-icon icon='check-16'> </ifx-icon> \n           </div>\n\n       </div>\n   );\n}\n}"]}

package/dist/collection/components/chip/chip.js

@@ -267,20 +267,20 @@ export class Chip {
         }
     }
     render() {
-        return (h("div", { key: '7d09fa1bb6292dcaabffecf990abc7aa891895aa', class: 'chip' }, h("div", { key: '564c97208bb9b0173576a9e4f39c4b983f1062e0', class: `chip__wrapper chip__wrapper--${this.size ? this.size : 'medium'}
-                  chip__wrapper--${this.variant === 'multi' ? 'multi' : 'single'}
-                  ${this.opened && !this.readOnly ? 'chip__wrapper--opened' : ''}
-                  ${this.selectedOptions.length ? 'chip__wrapper--selected' : ''}
-                  ${this.theme ? this.theme : 'outlined'}
-                  ${this.disabled ? 'disabled' : ""}
+        return (h("div", { key: 'cd16644a94a1e31cea0b2cbbe39394d4a05a5a5b', class: 'chip' }, h("div", { key: '951decf38e88ff684f283a09f6bc513ca4a2c704', class: `chip__wrapper chip__wrapper--${this.size ? this.size : 'medium'}
+                  chip__wrapper--${this.variant === 'multi' ? 'multi' : 'single'}
+                  ${this.opened && !this.readOnly ? 'chip__wrapper--opened' : ''}
+                  ${this.selectedOptions.length ? 'chip__wrapper--selected' : ''}
+                  ${this.theme ? this.theme : 'outlined'}
+                  ${this.disabled ? 'disabled' : ""}
                   ${this.readOnly ? 'read-only' : ""}`, tabIndex: 0, onClick: !this.readOnly && !this.disabled ? () => { this.handleWrapperClick(); } : undefined, role: 'combobox', "aria-label": this.ariaLabel, "aria-value": this.getSelectedOptions(), "aria-haspopup": !this.readOnly ? 'listbox' : undefined, "aria-expanded": !this.readOnly ? this.opened.toString() : undefined, "aria-controls": !this.readOnly ? 'dropdown' : undefined, "aria-readonly": this.readOnly ? 'true' : undefined, "aria-multiselectable": this.variant === 'multi' ? 'true' : undefined }, this.icon &&
-            h("div", { key: '88fb92751635c158dba1fae00c768e8553b42fa4', class: "icon__wrapper" }, h("ifx-icon", { key: '12e163b1c6c7916653e66e0ebabe5142ad0ec0da', icon: this.icon })), h("div", { key: 'af6687d4b75fa5321747dafbb56be79e36bf4b16', class: 'wrapper__label' }, (this.selectedOptions.length === 0) && `${this.placeholder}`, (this.selectedOptions.length !== 0 && (this.variant === 'multi') && this.placeholder !== '') &&
+            h("div", { key: 'cd8ab00ddfde3ba1dcdb7a82f963df1b81e4b5d5', class: "icon__wrapper" }, h("ifx-icon", { key: 'b14f92a609f24bc0b4617bb2b0d8262c52f11fab', icon: this.icon })), h("div", { key: '7ac3305d90985ddf45eb4df3cc22f9de89bf60de', class: 'wrapper__label' }, (this.selectedOptions.length === 0) && `${this.placeholder}`, (this.selectedOptions.length !== 0 && (this.variant === 'multi') && this.placeholder !== '') &&
             `${this.placeholder}:`, (this.selectedOptions.length !== 0) &&
-            h("div", { key: 'aedd029de20cb3a0321a69dda6aa64bde0ed364a', class: 'label__selected-options' }, this.getSelectedOptions()), (this.selectedOptions.length > 2 && this.variant === 'multi') &&
-            h("ifx-indicator", { key: 'cc2bbfa2415a03e655b13d24275bb92cbc4f2b3a', variant: 'number', inverted: this.theme === 'outlined' ? false : true, number: this.selectedOptions.length - 2 })), !this.readOnly && (this.variant !== 'multi' || (this.variant === 'multi' && this.selectedOptions.length === 0)) &&
-            h("div", { key: 'cb8a825f3465b0e66bd98a95639649fd82ff2e00', class: 'wrapper__open-button' }, h("ifx-icon", { key: 1, icon: `chevron-down-16` })), ((this.selectedOptions.length >= 1) && this.variant === 'multi') &&
-            h("div", { key: '43774f6eb2e8c8b6418c64f43f8334e926e9c174', class: 'wrapper__unselect-button', onClick: !this.readOnly && !this.disabled ? (e) => { this.handleUnselectButtonClick(e); } : undefined }, h("ifx-icon", { key: 2, icon: `cross16` }))), this.opened && !this.readOnly &&
-            h("div", { key: '60a7abc36fc1659a7ae6382cdb69d0c312c93016', id: 'dropdown', role: 'listbox', class: 'chip__dropdown' }, h("slot", { key: '2cd17e0b7e73bd5257a5721a8d3597873ea73d06' }))));
+            h("div", { key: 'e7c907adafd7e1601a4cbd05e1a7b415e1da05b6', class: 'label__selected-options' }, this.getSelectedOptions()), (this.selectedOptions.length > 2 && this.variant === 'multi') &&
+            h("ifx-indicator", { key: '4520777b0d729d95d57d87d5a32a95fcf44e0d84', variant: 'number', inverted: this.theme === 'outlined' ? false : true, number: this.selectedOptions.length - 2 })), !this.readOnly && (this.variant !== 'multi' || (this.variant === 'multi' && this.selectedOptions.length === 0)) &&
+            h("div", { key: 'ade24c6456b5443be577a4c0bd61d1b2dba68c91', class: 'wrapper__open-button' }, h("ifx-icon", { key: 1, icon: `chevron-down-16` })), ((this.selectedOptions.length >= 1) && this.variant === 'multi') &&
+            h("div", { key: '8b1937382b467ca305493896aaf065c10f7a01e8', class: 'wrapper__unselect-button', onClick: !this.readOnly && !this.disabled ? (e) => { this.handleUnselectButtonClick(e); } : undefined }, h("ifx-icon", { key: 2, icon: `cross16` }))), this.opened && !this.readOnly &&
+            h("div", { key: '073b6641d2320716a6d4b1149e72b61fa9b47dd8', id: 'dropdown', role: 'listbox', class: 'chip__dropdown' }, h("slot", { key: '55587cb1d438b11f0682c3b1d596a5dfb1d251d0' }))));
     }
     static get is() { return "ifx-chip"; }
     static get encapsulation() { return "shadow"; }