@oiz/stzh-components 3.4.0-beta1 → 3.4.0-beta2

package/dist/esm/{stzh-chip_2.entry.js → stzh-chip.entry.js}

@@ -1,5 +1,4 @@
-import { r as registerInstance, c as createEvent, h, a as Host, g as getElement, F as Fragment } from './index-e3050b18.js';
-import { S as StzhInputDescription } from './stzh-input-description-766446dc.js';
+import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-e3050b18.js';
 
 const stzhChipCss = ".sc-stzh-chip-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-chip-h{display:none}.sc-stzh-chip-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-chip-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-chip-h *.sc-stzh-chip,.sc-stzh-chip-h *.sc-stzh-chip::before,.sc-stzh-chip-h *.sc-stzh-chip::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-chip-h .has-focus.sc-stzh-chip{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-chip-h .stzh-fylingfocus-focused.sc-stzh-chip{outline-style:none !important}.sc-stzh-chip-h .stzh-fylingfocus-focused.sc-stzh-chip::-moz-focus-inner{border:0 !important}.sc-stzh-chip-h{--font-size:var(--stzh-font-micro-font-size);--line-height:var(--stzh-font-micro-text-line-height);--letter-spacing:normal;--height:2rem;--outer-height:2.5rem;--padding-top:0;--padding-bottom:0;--padding-left:var(--stzh-space-small);--padding-right:var(--stzh-space-small);--border-radius:1rem;--color:var(--stzh-chip-color, var(--stzh-color-primary70));--remove-color:var(--color);--remove-border-radius:1.5rem;--background-color:var(--stzh-chip-background-color, var(--stzh-color-secondary30));--icon-size:var(--stzh-icon-size-xsmall);--icon-color:var(--color);--icon-gap:var(--stzh-space-xsmall);--counter-color:var(--color);--counter-gap:var(--stzh-space-xsmall);--hover-color:var(--stzh-chip-hover-color, var(--stzh-color-primary70));--hover-background-color:var(--stzh-chip-hover-background-color, var(--stzh-color-secondary40));--hover-remove-color:var(--hover-color);--hover-remove-background-color:var(--stzh-color-primary30);--hover-icon-color:var(--hover-color);--hover-counter-color:var(--hover-color);display:inline-flex}@media screen and (min-width: 900px){.sc-stzh-chip-h{--outer-height:auto}}@media (forced-colors: active), (-ms-high-contrast: active){.sc-stzh-chip-h{--hover-color:Highlight;--hover-background-color:Canvas;--hover-remove-background-color:Canvas}}[variant=input].sc-stzh-chip-h{--background-color:var(--stzh-color-primary10);--hover-color:var(--stzh-color-primary90);--hover-background-color:var(--stzh-color-primary20)}[variant=tag].sc-stzh-chip-h{--color:var(--stzh-color-grey90);--background-color:var(--stzh-color-grey20);--hover-color:var(--stzh-color-grey90);--hover-background-color:var(--stzh-color-grey20)}[variant=input].sc-stzh-chip-h:where([size=\"small\"]){--icon-gap:var(--stzh-space-xxsmall)}[variant=tag].sc-stzh-chip-h:where([size=\"small\"]){--padding-left:var(--stzh-space-xsmall);--padding-right:var(--stzh-space-xsmall);--icon-gap:var(--stzh-space-xxsmall)}[variant=tag].sc-stzh-chip-h:where([type=\"warning\"]){--color:var(--stzh-color-warning90);--hover-color:var(--stzh-color-warning90)}[variant=tag].sc-stzh-chip-h:where([type=\"error\"]){--color:var(--stzh-color-error70);--hover-color:var(--stzh-color-error70)}[variant=tag].sc-stzh-chip-h:where([type=\"success\"]){--color:var(--stzh-color-success70);--hover-color:var(--stzh-color-success70)}[variant=tag].sc-stzh-chip-h:where([inverted]:not([inverted=\"false\"])){--color:var(--stzh-color-white);--background-color:var(--stzh-color-grey90);--hover-color:var(--stzh-color-white);--hover-background-color:var(--stzh-color-grey90)}[variant=tag].sc-stzh-chip-h:where([type=\"warning\"][inverted]:not([inverted=\"false\"])){--color:var(--stzh-color-black);--background-color:var(--stzh-color-warning60);--hover-color:var(--stzh-color-black);--hover-background-color:var(--stzh-color-warning60)}[variant=tag].sc-stzh-chip-h:where([type=\"error\"][inverted]:not([inverted=\"false\"])){--background-color:var(--stzh-color-error70);--hover-background-color:var(--stzh-color-error70)}[variant=tag].sc-stzh-chip-h:where([type=\"success\"][inverted]:not([inverted=\"false\"])){--background-color:var(--stzh-color-success70);--hover-background-color:var(--stzh-color-success70)}[active].sc-stzh-chip-h:not([active=false]){--color:var(--stzh-chip-active-color, var(--stzh-color-white));--background-color:var(--stzh-chip-active-background-color, var(--stzh-color-primary70));--hover-color:var(--stzh-chip-active-hover-color, var(--stzh-color-white));--hover-background-color:var(--stzh-chip-active-hover-background-color, var(--stzh-color-primary90));--hover-remove-background-color:var(--stzh-color-primary90)}@media (forced-colors: active), (-ms-high-contrast: active){[active].sc-stzh-chip-h:not([active=false]){--color:Highlight;--background-color:Canvas;--hover-color:Highlight;--hover-background-color:Canvas;--hover-remove-background-color:Canvas}}[non-interactive].sc-stzh-chip-h:not([non-interactive=false]){--hover-color:var(--color);--hover-background-color:var(--background-color);--hover-remove-color:var(--remove-color);--hover-remove-background-color:transparent;--hover-icon-color:var(--icon-color);--hover-counter-color:var(--counter-color)}[disabled].sc-stzh-chip-h:not([disabled=false]){--color:var(--stzh-chip-disabled-color, var(--stzh-color-grey80));--background-color:var(--stzh-chip-disabled-background-color, var(--stzh-color-grey20));--remove-color:var(--color);--icon-color:var(--color);--counter-color:var(--color);--hover-color:var(--color);--hover-background-color:var(--background-color);--hover-remove-color:var(--remove-color);--hover-remove-background-color:transparent;--hover-icon-color:var(--icon-color);--hover-counter-color:var(--counter-color)}[variant=input][disabled].sc-stzh-chip-h:not([disabled=false]){--background-color:var(--stzh-color-grey10)}.sc-stzh-chip-h:where([size=\"small\"]){--font-size:var(--stzh-font-nano-font-size);--line-height:var(--stzh-font-nano-text-line-height);--letter-spacing:normal;--height:1.5rem;--border-radius:0.75rem;--padding-left:var(--stzh-space-xsmall);--padding-right:var(--stzh-space-xsmall)}.sc-stzh-chip-h:where([size=\"large\"]){--height:2.5rem;--border-radius:1.25rem;--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium)}@media screen and (min-width: 600px){.sc-stzh-chip-h:where([size-small=\"default\"]){--font-size:var(--stzh-font-micro-font-size);--line-height:var(--stzh-font-micro-text-line-height);--letter-spacing:normal;--height:2rem;--outer-height:2.5rem;--padding-top:0;--padding-bottom:0;--padding-left:var(--stzh-space-small);--padding-right:var(--stzh-space-small);--border-radius:1rem}}@media screen and (min-width: 600px) and (min-width: 900px){.sc-stzh-chip-h:where([size-small=\"default\"]){--outer-height:auto}}@media screen and (min-width: 600px){.sc-stzh-chip-h:where([size-small=\"small\"]){--font-size:var(--stzh-font-nano-font-size);--line-height:var(--stzh-font-nano-text-line-height);--letter-spacing:normal;--height:1.5rem;--border-radius:0.75rem;--padding-left:var(--stzh-space-xsmall);--padding-right:var(--stzh-space-xsmall)}}@media screen and (min-width: 600px){.sc-stzh-chip-h:where([size-small=\"large\"]){--height:2.5rem;--border-radius:1.25rem;--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium)}}@media screen and (min-width: 900px){.sc-stzh-chip-h:where([size-medium=\"default\"]){--font-size:var(--stzh-font-micro-font-size);--line-height:var(--stzh-font-micro-text-line-height);--letter-spacing:normal;--height:2rem;--outer-height:2.5rem;--padding-top:0;--padding-bottom:0;--padding-left:var(--stzh-space-small);--padding-right:var(--stzh-space-small);--border-radius:1rem}}@media screen and (min-width: 900px) and (min-width: 900px){.sc-stzh-chip-h:where([size-medium=\"default\"]){--outer-height:auto}}@media screen and (min-width: 900px){.sc-stzh-chip-h:where([size-medium=\"small\"]){--font-size:var(--stzh-font-nano-font-size);--line-height:var(--stzh-font-nano-text-line-height);--letter-spacing:normal;--height:1.5rem;--border-radius:0.75rem;--padding-left:var(--stzh-space-xsmall);--padding-right:var(--stzh-space-xsmall)}}@media screen and (min-width: 900px){.sc-stzh-chip-h:where([size-medium=\"large\"]){--height:2.5rem;--border-radius:1.25rem;--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.sc-stzh-chip-h:where([size-large=\"default\"]){--font-size:var(--stzh-font-micro-font-size);--line-height:var(--stzh-font-micro-text-line-height);--letter-spacing:normal;--height:2rem;--outer-height:2.5rem;--padding-top:0;--padding-bottom:0;--padding-left:var(--stzh-space-small);--padding-right:var(--stzh-space-small);--border-radius:1rem}}@media screen and (min-width: 1260px) and (min-width: 900px){.sc-stzh-chip-h:where([size-large=\"default\"]){--outer-height:auto}}@media screen and (min-width: 1260px){.sc-stzh-chip-h:where([size-large=\"small\"]){--font-size:var(--stzh-font-nano-font-size);--line-height:var(--stzh-font-nano-text-line-height);--letter-spacing:normal;--height:1.5rem;--border-radius:0.75rem;--padding-left:var(--stzh-space-xsmall);--padding-right:var(--stzh-space-xsmall)}}@media screen and (min-width: 1260px){.sc-stzh-chip-h:where([size-large=\"large\"]){--height:2.5rem;--border-radius:1.25rem;--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium)}}@media screen and (min-width: 1600px){.sc-stzh-chip-h:where([size-ultra=\"default\"]){--font-size:var(--stzh-font-micro-font-size);--line-height:var(--stzh-font-micro-text-line-height);--letter-spacing:normal;--height:2rem;--outer-height:2.5rem;--padding-top:0;--padding-bottom:0;--padding-left:var(--stzh-space-small);--padding-right:var(--stzh-space-small);--border-radius:1rem}}@media screen and (min-width: 1600px) and (min-width: 900px){.sc-stzh-chip-h:where([size-ultra=\"default\"]){--outer-height:auto}}@media screen and (min-width: 1600px){.sc-stzh-chip-h:where([size-ultra=\"small\"]){--font-size:var(--stzh-font-nano-font-size);--line-height:var(--stzh-font-nano-text-line-height);--letter-spacing:normal;--height:1.5rem;--border-radius:0.75rem;--padding-left:var(--stzh-space-xsmall);--padding-right:var(--stzh-space-xsmall)}}@media screen and (min-width: 1600px){.sc-stzh-chip-h:where([size-ultra=\"large\"]){--height:2.5rem;--border-radius:1.25rem;--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium)}}.stzh-chip.sc-stzh-chip{position:relative}.stzh-chip__vhidden.sc-stzh-chip{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-chip__button.sc-stzh-chip{font-size:var(--font-size);line-height:var(--line-height);letter-spacing:var(--letter-spacing);min-height:var(--outer-height);font-family:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0px;border:none;background-color:transparent}.stzh-chip__button.is-button.sc-stzh-chip,.stzh-chip__button.is-link.sc-stzh-chip{cursor:pointer}.stzh-chip__button-inner.sc-stzh-chip{height:var(--height);display:flex;flex-direction:row;align-items:center;border-radius:var(--border-radius);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);padding-left:var(--padding-left);padding-right:var(--padding-right);color:var(--color);background-color:var(--background-color);transition-duration:var(--stzh-base-transition-animation-speed);transition-property:color, background-color;-webkit-text-decoration-line:none;text-decoration-line:none}.stzh-chip__label.sc-stzh-chip{text-align:left}.stzh-chip__icon-wrapper.sc-stzh-chip{--stzh-icon-size:var(--icon-size);display:flex;color:var(--icon-color);transition:color var(--stzh-base-transition-animation-speed);flex-shrink:0}.stzh-chip__icon-wrapper.sc-stzh-chip:not(:empty){margin-right:var(--icon-gap)}.stzh-chip__counter.sc-stzh-chip{display:flex;font-variant-numeric:tabular-nums;margin-left:var(--counter-gap);color:var(--counter-color);transition:color var(--stzh-base-transition-animation-speed)}.stzh-chip__remove.sc-stzh-chip{position:absolute;top:50%;transform:translateY(-50%);right:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;border:none;background:none;padding:0;width:var(--height);height:var(--height);border-radius:var(--remove-border-radius);display:flex;justify-content:center;align-items:center;margin-left:var(--stzh-space-xxsmall);color:var(--remove-color);transition-duration:var(--stzh-base-transition-animation-speed);transition-property:color, background-color, border-color;cursor:pointer}.stzh-chip__remove.sc-stzh-chip:hover{color:var(--hover-remove-color);background-color:var(--hover-remove-background-color)}.stzh-chip__remove-icon.sc-stzh-chip{--size:var(--stzh-icon-size-xxsmall)}.stzh-chip__button.sc-stzh-chip:hover .stzh-chip__button-inner.sc-stzh-chip,.stzh-chip__remove.sc-stzh-chip:hover+.stzh-chip__button.sc-stzh-chip .stzh-chip__button-inner.sc-stzh-chip{color:var(--hover-color);background-color:var(--hover-background-color)}.stzh-chip__button.sc-stzh-chip:hover .stzh-chip__counter.sc-stzh-chip,.stzh-chip__remove.sc-stzh-chip:hover+.stzh-chip__button.sc-stzh-chip .stzh-chip__counter.sc-stzh-chip{color:var(--hover-counter-color)}.stzh-chip__button.sc-stzh-chip:hover .stzh-chip__icon-wrapper.sc-stzh-chip,.stzh-chip__remove.sc-stzh-chip:hover+.stzh-chip__button.sc-stzh-chip .stzh-chip__icon-wrapper.sc-stzh-chip{color:var(--hover-icon-color)}.stzh-chip--is-removable.sc-stzh-chip .stzh-chip__button-inner.sc-stzh-chip{padding-right:calc(var(--height) + var(--stzh-space-xxsmall))}.stzh-chip--is-disabled.sc-stzh-chip .stzh-chip__button.sc-stzh-chip,.stzh-chip--is-disabled.sc-stzh-chip .stzh-chip__remove.sc-stzh-chip{cursor:not-allowed}";
 
@@ -119,218 +118,6 @@ const StzhChip = class {
 };
 StzhChip.style = stzhChipCss;
 
-const stzhChipselectCss = ".sc-stzh-chipselect-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-chipselect-h{display:none}.sc-stzh-chipselect-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-chipselect-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-chipselect-h *.sc-stzh-chipselect,.sc-stzh-chipselect-h *.sc-stzh-chipselect::before,.sc-stzh-chipselect-h *.sc-stzh-chipselect::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-chipselect-h .has-focus.sc-stzh-chipselect{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-chipselect-h .stzh-fylingfocus-focused.sc-stzh-chipselect{outline-style:none !important}.sc-stzh-chipselect-h .stzh-fylingfocus-focused.sc-stzh-chipselect::-moz-focus-inner{border:0 !important}[disabled].sc-stzh-chipselect-h:not([disabled=false]){--description-color:var(--stzh-color-grey70)}.stzh-chipselect__marker-symbol.sc-stzh-chipselect{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium)}.stzh-chipselect__marker-text.sc-stzh-chipselect{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-chipselect__description-wrapper.sc-stzh-chipselect{display:flex;flex-direction:column-reverse;min-height:var(--description-min-height, var(--stzh-description-min-height, none))}.stzh-chipselect__error.sc-stzh-chipselect,.stzh-chipselect__description.sc-stzh-chipselect{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}.stzh-chipselect__error.sc-stzh-chipselect{color:var(--stzh-color-error60)}.stzh-chipselect__error-list.sc-stzh-chipselect{list-style:none;margin:0;padding:0}.stzh-chipselect__description.sc-stzh-chipselect{display:flex;align-items:flex-start;color:var(--stzh-input-description-color, var(--description-color, var(--stzh-color-coolgrey70)));transition:color var(--stzh-base-transition-animation-speed)}.stzh-chipselect__description-long.sc-stzh-chipselect{margin-right:var(--stzh-space-xxsmall);margin-top:0.125rem}@supports (font: -apple-system-body) and (-webkit-appearance: none){.stzh-chipselect__description-long.sc-stzh-chipselect{margin-top:0}}.stzh-chipselect__description-long-popover.sc-stzh-chipselect{--width:auto;--max-width:27.3125rem}.stzh-chipselect__description-long-button.sc-stzh-chipselect{display:flex;justify-content:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;padding:0;border:none;background-color:transparent;border-radius:0.5rem;cursor:pointer}.stzh-chipselect.sc-stzh-chipselect stzh-icon.stzh-chipselect__description-long-icon.sc-stzh-chipselect{--size:var(--stzh-icon-size-xsmall)}.stzh-chipselect--has-error.sc-stzh-chipselect .stzh-chipselect__error.sc-stzh-chipselect,.stzh-chipselect--has-description.sc-stzh-chipselect .stzh-chipselect__description.sc-stzh-chipselect{margin-top:var(--stzh-space-xxxsmall)}.stzh-chipselect__label.sc-stzh-chipselect{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;color:var(--stzh-heading-color);display:block;margin-bottom:var(--stzh-space-xsmall)}.stzh-chipselect__label.sc-stzh-chipselect:empty{display:none}.stzh-chipselect__marker.sc-stzh-chipselect{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);margin-left:calc(-0.25em + var(--stzh-space-xsmall))}.stzh-chipselect__chips.sc-stzh-chipselect{display:flex;align-items:center;flex-wrap:wrap;border-radius:var(--stzh-button-border-radius);-moz-column-gap:var(--stzh-space-medium);column-gap:var(--stzh-space-medium)}@media screen and (min-width: 900px){.stzh-chipselect__chips.sc-stzh-chipselect{row-gap:var(--stzh-space-medium)}}.stzh-chipselect__chip.is-focused.sc-stzh-chipselect,.stzh-chipselect__chip.is-focused[active].sc-stzh-chipselect:not([active=false]){--background-color:var(--stzh-color-secondary40)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-chipselect__chip.is-focused.sc-stzh-chipselect,.stzh-chipselect__chip.is-focused[active].sc-stzh-chipselect:not([active=false]){--background-color:Highlight}}.stzh-chipselect__chip.is-focused[active].sc-stzh-chipselect:not([active=false]){--background-color:var(--stzh-color-primary90)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-chipselect__chip.is-focused[active].sc-stzh-chipselect:not([active=false]){--background-color:Canvas}}.stzh-chipselect--has-error.sc-stzh-chipselect .stzh-chipselect__error.sc-stzh-chipselect,.stzh-chipselect--has-description.sc-stzh-chipselect .stzh-chipselect__description.sc-stzh-chipselect{margin-top:var(--stzh-space-xsmall)}.stzh-chipselect--has-label-hidden.sc-stzh-chipselect .stzh-chipselect__label.sc-stzh-chipselect{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-chipselect--is-disabled.sc-stzh-chipselect .stzh-chipselect__chips.sc-stzh-chipselect,.stzh-chipselect--is-disabled.sc-stzh-chipselect .stzh-chipselect__label.sc-stzh-chipselect{cursor:not-allowed}";
+export { StzhChip as stzh_chip };
 
-let chipselectCounter = 0;
-const StzhChipselect = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.stzhChange = createEvent(this, "stzhChange", 7);
-    this._data = [];
-    this._value = [];
-    this.handleReset = async () => {
-      this.value = this.defaultValue;
-      // this.stzhChange.emit({
-      //   component: "stzh-chipselect",
-      //   value: this.value
-      // });
-    };
-    this.handleChipClick = async (data, index) => {
-      if (this.multiple) {
-        if (data.value === "" && this._value.length > 0 && !(this._value.length === 1 && this._value[0] === "")) {
-          this.value = [];
-        }
-        else if (data.value !== "") {
-          this.value = this._value.includes(data.value)
-            ? this._value.filter(value => value !== data.value)
-            : [...this._value, data.value];
-        }
-      }
-      else {
-        this.value = data.value;
-      }
-      this.activeFocusOptionIndex = index;
-      await this.waitForNextRender();
-      this.stzhChange.emit({
-        component: "stzh-chipselect",
-        value: this.multiple ? this._value : this._value[0]
-      });
-    };
-    // private handleDropdownChange = async (event: CustomEvent<StzhDropdownChangeEvent>) => {
-    //   this.value = Array.isArray(event.detail.value) ? event.detail.value[0] : event.detail.value;
-    //   this.activeFocusOptionIndex = this._data.findIndex(data => {
-    //     return data.value === this.value;
-    //   });
-    //   await this.waitForNextRender();
-    //   this.stzhChange.emit({
-    //     component: "stzh-chipselect",
-    //     value: this.value
-    //   })
-    // }
-    this.handleKeydown = (event) => {
-      let newActiveIndex = null;
-      const activeOptionIndex = this.activeFocusOptionIndex;
-      if (event.key === "ArrowUp" || event.key === "ArrowLeft") {
-        event.preventDefault();
-        if (activeOptionIndex > 0) {
-          newActiveIndex = activeOptionIndex - 1;
-        }
-      }
-      else if (event.key === "ArrowDown" || event.key === "ArrowRight") {
-        event.preventDefault();
-        if (activeOptionIndex < this._data.length - 1) {
-          newActiveIndex = activeOptionIndex + 1;
-        }
-      }
-      else if (event.key === " " || event.key === "Enter") {
-        event.preventDefault();
-        this.value = this._data[activeOptionIndex].value;
-        this.stzhChange.emit({
-          component: "stzh-chipselect",
-          value: this.value
-        });
-      }
-      if (newActiveIndex !== null) {
-        this.activeFocusOptionIndex = newActiveIndex;
-      }
-    };
-    this.localization = undefined;
-    this.data = [];
-    this.name = undefined;
-    this.label = "";
-    this.labelHidden = false;
-    this.multiple = false;
-    this.value = "";
-    this.defaultValue = "";
-    this.description = undefined;
-    this.descriptionLong = undefined;
-    this.descriptionLongTitle = undefined;
-    this.error = undefined;
-    this.invalid = false;
-    this.required = false;
-    this.disabled = false;
-    this.hideOptional = false;
-    this.a11yDescribedby = "";
-    this.activeFocusOptionIndex = 0;
-  }
-  resetListener(event) {
-    if (event.target.contains(this.element)) {
-      requestAnimationFrame(() => {
-        this.handleReset();
-      });
-    }
-  }
-  valueWatcher(newValue) {
-    if (typeof newValue === "string") {
-      try {
-        this._value = JSON.parse(newValue);
-      }
-      catch (ex) {
-        this._value = newValue ? [newValue] : [];
-      }
-    }
-    else {
-      this._value = newValue ? newValue : [];
-    }
-  }
-  dataWatcher(newValue) {
-    if (typeof newValue === "string") {
-      this._data = JSON.parse(newValue);
-    }
-    else {
-      this._data = newValue;
-    }
-    // this._dataDropdown = this._data.map((data) => {
-    //   return {
-    //     text: data.counter
-    //       ? `${data.label} (${data.counter})`
-    //       : data.label,
-    //     value: data.value
-    //   }
-    // });
-  }
-  errorWatcher(newValue) {
-    if (typeof newValue === "string") {
-      try {
-        this._error = JSON.parse(newValue);
-      }
-      catch (e) {
-        if (newValue) {
-          this._error = [newValue];
-        }
-        else {
-          this._error = [];
-        }
-      }
-    }
-    else if (newValue) {
-      this._error = newValue;
-    }
-    else {
-      this._error = [];
-    }
-  }
-  waitForNextRender() {
-    return new Promise(resolve => this.renderPromiseResolve = resolve);
-  }
-  componentDidRender() {
-    if (this.renderPromiseResolve) {
-      this.renderPromiseResolve();
-    }
-  }
-  async componentWillLoad() {
-    this.id = `stzh-chipselect-${chipselectCounter++}`;
-    this.dataWatcher(this.data);
-    this.errorWatcher(this.error);
-    this.valueWatcher(this.value);
-    this.defaultValue = this.defaultValue || this.value;
-    if (!this.localization) {
-      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, "chipselect");
-    }
-  }
-  render() {
-    const descriptionUsed = !!this.description;
-    const descriptionLongUsed = !!this.descriptionLong;
-    const errorUsed = !!this.error;
-    const classes = {
-      "stzh-chipselect": true,
-      "stzh-chipselect--has-description": descriptionUsed,
-      "stzh-chipselect--has-description-long": descriptionLongUsed,
-      "stzh-chipselect--has-error": errorUsed,
-      "stzh-chipselect--is-invalid": this.invalid || errorUsed,
-      "stzh-chipselect--is-disabled": this.disabled,
-      "stzh-chipselect--is-required": this.required,
-      "stzh-chipselect--has-label-hidden": this.labelHidden,
-    };
-    return (h(Host, { "is-invalid": this.invalid || errorUsed }, h("div", { class: classes }, this.multiple
-      ?
-        h(Fragment, null, this._value.map((value) => h("input", { type: "hidden", name: this.name, value: value })))
-      :
-        h("input", { type: "hidden", name: this.name, value: this.value }), h("label", { class: "stzh-chipselect__label", htmlFor: this.id }, this.label ? this.label : h("slot", null), !this.hideOptional &&
-      h("span", { class: "stzh-chipselect__marker" }, h("span", { class: "stzh-chipselect__marker-symbol", "aria-hidden": "true" }, this.required
-        ? this.localization.$globals.requiredFieldMarker
-        : this.localization.$globals.optionalFieldMarker), h("span", { class: "stzh-chipselect__marker-text" }, this.required
-        ? this.localization.$globals.requiredFieldText
-        : this.localization.$globals.optionalFieldText))), this._data.length > 0 &&
-      h(Fragment, null, h("div", { id: this.id, class: "stzh-chipselect__chips", role: "listbox", tabindex: "0", "aria-multiselectable": this.multiple ? "true" : "false", "aria-activedescendant": `${this.id}-option-${this.activeFocusOptionIndex}`, "aria-describedby": `${this.id}-description ${this.a11yDescribedby}`, onKeyDown: this.handleKeydown }, this._data.map((data, index) => (h("stzh-chip", { role: "option", class: {
-          "stzh-chipselect__chip": true,
-          "is-focused": this.activeFocusOptionIndex === index
-        }, label: data.label, counter: data.counter, icon: data.icon, type: data.type, inverted: data.inverted, variant: data.variant, size: data.size || "small", disabled: this.disabled || data.disabled, active: this._value.includes(data.value)
-          || (!this.multiple && !data.value && (this._value.length === 0 || this._value[0] === ""))
-          || (!data.value && this.multiple && (this._value.length === 0 || (this._value.length === 1 && this._value[0] === ""))), "aria-selected": this._value.includes(data.value)
-          || (!this.multiple && !data.value && (this._value.length === 0 || this._value[0] === ""))
-          || (!data.value && this.multiple && (this._value.length === 0 || (this._value.length === 1 && this._value[0] === "")))
-          ? "true" : "false", id: `${this.id}-option-${index}`, a11yTabindex: "-1", onClick: () => this.handleChipClick(data, index) })))), h(StzhInputDescription, { classPrefix: "stzh-chipselect", id: `${this.id}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongTitle: this.descriptionLongTitle, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel })))));
-  }
-  get element() { return getElement(this); }
-  static get watchers() { return {
-    "value": ["valueWatcher"],
-    "data": ["dataWatcher"],
-    "error": ["errorWatcher"]
-  }; }
-};
-StzhChipselect.style = stzhChipselectCss;
-
-export { StzhChip as stzh_chip, StzhChipselect as stzh_chipselect };
-
-//# sourceMappingURL=stzh-chip_2.entry.js.map
+//# sourceMappingURL=stzh-chip.entry.js.map

package/dist/esm/stzh-chip.entry.js.map

@@ -0,0 +1 @@
+{"file":"stzh-chip.entry.js","mappings":";;AAAA,MAAM,WAAW,GAAG,4obAA4ob;;MCqBnpb,QAAQ;;;;;;;IA8FX,mBAAc,GAAY,KAAK,CAAC;IA4ChC,gBAAW,GAAG;MACpB,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;QACxB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;OACnB;MAED,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;KAC7B,CAAC;IAEM,YAAO,GAAG,CAAC,KAAiB;MAClC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;MAE3B,MAAM,UAAU,GAAG,IAAI,UAAU,CAAC,OAAO,EAAE;QACzC,IAAI,EAAE,MAAM;QACZ,OAAO,EAAE,KAAK;QACd,UAAU,EAAE,KAAK;OAClB,CAAC,CAAC;MAEH,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;MACvC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;QAClB,SAAS,EAAE,WAAW;QACtB,aAAa,EAAE,KAAK;OACrB,CAAC,CAAC;KACJ,CAAC;IAEM,WAAM,GAAG,CAAC,KAAiB;MACjC,MAAM,SAAS,GAAG,IAAI,UAAU,CAAC,MAAM,EAAE;QACvC,IAAI,EAAE,MAAM;QACZ,OAAO,EAAE,KAAK;QACd,UAAU,EAAE,KAAK;OAClB,CAAC,CAAC;MAEH,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;MACtC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;QACjB,SAAS,EAAE,WAAW;QACtB,aAAa,EAAE,KAAK;OACrB,CAAC,CAAC;KACJ,CAAC;IAEM,YAAO,GAAG,CAAC,KAAiB;MAClC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;QAClB,SAAS,EAAE,WAAW;QACtB,aAAa,EAAE,KAAK;QACpB,IAAI,EAAE,IAAI,CAAC,IAAI;OAChB,CAAC,CAAC;KACJ,CAAC;IAEM,kBAAa,GAAG,CAAC,KAAiB;MACxC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QACnB,SAAS,EAAE,WAAW;QACtB,aAAa,EAAE,KAAK;OACrB,CAAC,CAAC;KACJ,CAAC;iBA3LsB,EAAE;;gBAMH,EAAE;kBAGA,EAAE;0BAGwB,KAAK;qBAGV,KAAK;oBAGN,KAAK;mBAGE,KAAK;gBAGX,SAAS;;;;;gBAeT,SAAS;mBAG7B,EAAE;uBAGE,EAAE;kBAGW,KAAK;oBAGH,KAAK;;;2BASiB,EAAE;;;;EAkCrE,kBAAkB;IAChB,qBAAqB,CAAC;;MACpB,MAAA,IAAI,CAAC,IAAI,0CAAE,YAAY,CAAC,aAAa,EAAE,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;KACjF,CAAC,CAAC;GACJ;EAEO,WAAW;IACjB,QACE,WAAK,KAAK,EAAC,yBAAyB,IAClC,WAAK,KAAK,EAAC,yBAAyB,IACjC,IAAI,CAAC,IAAI,KAAK,OAAO,IAAI,CAAC,IAAI,KAAK,WAAW,IAAI,IAAI,CAAC,OAAO,KAAK,KAAK,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,CAAC,IACnG,iBACE,KAAK,EAAC,iBAAiB,EACvB,IAAI,EACF,IAAI,CAAC,IAAI;SACR,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,WAAW,CAAC;SACpC,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,mBAAmB,CAAC;SAC/C,IAAI,CAAC,IAAI,KAAK,OAAO,IAAI,SAAS,CAAC;SACnC,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,kBAAkB,CAAC,GAEtC,KAEb,YAAM,IAAI,EAAC,MAAM,GAAQ,CAC1B,CACG,EAEN,kBAAY,KAAK,EAAE,CAAC,EAAE,KAAK,EAAC,kBAAkB,EAAC,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,IAAI,GAAG,EAAiB,CAAC,IACtF,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,eAAa,EACvC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,KAAK,WAAW,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,KACzE,YAAM,KAAK,EAAC,oBAAoB,eAAS,IAAI,CAAC,OAAO,MAAS,CAC/D,CACU,EAEZ,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,KAAK,WAAW,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,KACzE,WAAK,KAAK,EAAC,oBAAoB,iBAAa,MAAM,IAC/C,IAAI,CAAC,OAAO,CACT,CACP,CACG,EACN;GACH;EAuDD,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,WAAW,EAAE,IAAI;MACjB,sBAAsB,EAAE,IAAI,CAAC,MAAM;MACnC,wBAAwB,EAAE,IAAI,CAAC,QAAQ;MACvC,yBAAyB,EAAE,IAAI,CAAC,SAAS;MACzC,wBAAwB,EAAE,IAAI,CAAC,QAAQ;MACvC,wBAAwB,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO;MACxC,CAAC,mBAAmB,IAAI,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI;MAC7C,CAAC,mBAAmB,IAAI,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI;MAC7C,CAAC,cAAc,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;KAC/C,CAAC;IAEF,MAAM,IAAI,GAAG,IAAI,CAAC,cAAc,GAAG,KAAK,GAAG,IAAI,CAAC,IAAI,GAAG,GAAG,GAAG,QAAQ,CAAC;IAEtE,QACE,EAAC,IAAI,IAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW,IACpE,WAAK,KAAK,EAAE,OAAO,IAChB,IAAI,CAAC,SAAS,KACb,cACE,KAAK,EAAC,mBAAmB,EACzB,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,gBACX,IAAI,CAAC,WAAW,EAC5B,IAAI,EAAC,QAAQ,iBACA,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,WAAW,IAEvD,iBAAW,KAAK,EAAC,wBAAwB,EAAC,IAAI,EAAC,WAAW,GAAa,CAChE,CACV,EAEA,IAAI,CAAC,IAAI,IACR,EAAC,IAAI,IACH,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,IAAI,GAAG,EAAuB,CAAC,EAChD,KAAK,EAAE;QACL,mBAAmB,EAAE,IAAI;QACzB,WAAW,EAAE,CAAC,IAAI,CAAC,cAAc,IAAI,CAAC,IAAI,CAAC,IAAI;QAC/C,SAAS,EAAE,CAAC,IAAI,CAAC,cAAc,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI;OAC/C,EACD,IAAI,EAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,IAAI,CAAC,IAAI,EACtC,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,YAAY,gBACf,IAAI,CAAC,SAAS,IAAI,IAAI,sBAChB,IAAI,CAAC,eAAe,IAAI,IAAI,EAC9C,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,IAElB,IAAI,CAAC,WAAW,EAAE,CACd,KAEP,EAAC,IAAI,IACH,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,IAAI,GAAG,EAAuB,CAAC,EAChD,KAAK,EAAE;QACL,mBAAmB,EAAE,IAAI;QACzB,WAAW,EAAE,CAAC,IAAI,CAAC,cAAc,IAAI,CAAC,IAAI,CAAC,IAAI;QAC/C,SAAS,EAAE,CAAC,IAAI,CAAC,cAAc,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI;OAC/C,EACD,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,IAAI,CAAC,YAAY,gBACf,IAAI,CAAC,SAAS,IAAI,IAAI,sBAChB,IAAI,CAAC,eAAe,IAAI,IAAI,EAC9C,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,IAElB,IAAI,CAAC,WAAW,EAAE,CACd,CACR,CACG,CACD,EACP;GACH;;;;;;;","names":[],"sources":["src/components/stzh-chip/stzh-chip.scss?tag=stzh-chip&encapsulation=scoped","src/components/stzh-chip/stzh-chip.tsx"],"sourcesContent":["@mixin chip--size-default() {\n  --font-size: var(--stzh-font-micro-font-size);\n  --line-height: var(--stzh-font-micro-text-line-height);\n  --letter-spacing: normal;\n\n  --height: 32px;\n  --outer-height: 40px;\n  --padding-top: 0;\n  --padding-bottom: 0;\n  --padding-left: #{space('small')};\n  --padding-right: #{space('small')};\n  --border-radius: 16px;\n\n  @include mq($from: medium) {\n    --outer-height: auto;\n  }\n}\n\n@mixin chip--size-large() {\n  --height: 40px;\n  --border-radius: 20px;\n  --padding-left: #{space('medium')};\n  --padding-right: #{space('medium')};\n}\n\n@mixin chip--size-small() {\n  --font-size: var(--stzh-font-nano-font-size);\n  --line-height: var(--stzh-font-nano-text-line-height);\n  --letter-spacing: normal;\n\n  --height: 24px;\n  --border-radius: 12px;\n  --padding-left: #{space('xsmall')};\n  --padding-right: #{space('xsmall')};\n}\n\n:host {\n  @include chip--size-default;\n  --color: var(--stzh-chip-color, #{$colorPrimary70});\n  --remove-color: var(--color);\n  --remove-border-radius: 24px;\n  --background-color: var(--stzh-chip-background-color, #{$colorSecondary30});\n  --icon-size: #{iconSize('xsmall')};\n  --icon-color: var(--color);\n  --icon-gap: #{space('xsmall')};\n  --counter-color: var(--color);\n  --counter-gap: #{space('xsmall')};\n\n  --hover-color: var(--stzh-chip-hover-color, #{$colorPrimary70});\n  --hover-background-color: var(--stzh-chip-hover-background-color, #{$colorSecondary40});\n  --hover-remove-color: var(--hover-color);\n  --hover-remove-background-color: #{$colorPrimary30};\n  --hover-icon-color: var(--hover-color);\n  --hover-counter-color: var(--hover-color);\n\n  display: inline-flex;\n\n  @include highContrast() {\n    --hover-color: Highlight;\n    --hover-background-color: Canvas;\n    --hover-remove-background-color: Canvas;\n  }\n\n  &[variant=\"input\"] {\n    --background-color: #{$colorPrimary10};\n\n    --hover-color: #{$colorPrimary90};\n    --hover-background-color: #{$colorPrimary20};\n  }\n\n  &[variant=\"tag\"] {\n    --color: #{$colorGrey90};\n    --background-color: #{$colorGrey20};\n\n    --hover-color: #{$colorGrey90};\n    --hover-background-color: #{$colorGrey20};\n  }\n\n  &[variant=\"input\"]:where([size=\"small\"]) {\n    --icon-gap: #{space('xxsmall')};\n  }\n\n  &[variant=\"tag\"]:where([size=\"small\"]) {\n    --padding-left: #{space('xsmall')};\n    --padding-right: #{space('xsmall')};\n    --icon-gap: #{space('xxsmall')};\n  }\n\n  &[variant=\"tag\"]:where([type=\"warning\"]) {\n    --color: #{$colorWarning90};\n\n    --hover-color: #{$colorWarning90};\n  }\n\n  &[variant=\"tag\"]:where([type=\"error\"]) {\n    --color: #{$colorError70};\n\n    --hover-color: #{$colorError70};\n  }\n\n  &[variant=\"tag\"]:where([type=\"success\"]) {\n    --color: #{$colorSuccess70};\n\n    --hover-color: #{$colorSuccess70};\n  }\n\n  &[variant=\"tag\"]:where([inverted]:not([inverted=\"false\"])) {\n    --color: #{$colorWhite};\n    --background-color: #{$colorGrey90};\n\n    --hover-color: #{$colorWhite};\n    --hover-background-color: #{$colorGrey90};\n  }\n\n  &[variant=\"tag\"]:where([type=\"warning\"][inverted]:not([inverted=\"false\"])) {\n    --color: #{$colorBlack};\n    --background-color: #{$colorWarning60};\n\n    --hover-color: #{$colorBlack};\n    --hover-background-color: #{$colorWarning60};\n  }\n\n  &[variant=\"tag\"]:where([type=\"error\"][inverted]:not([inverted=\"false\"])) {\n    --background-color: #{$colorError70};\n\n    --hover-background-color: #{$colorError70};\n  }\n\n  &[variant=\"tag\"]:where([type=\"success\"][inverted]:not([inverted=\"false\"])) {\n    --background-color: #{$colorSuccess70};\n\n    --hover-background-color: #{$colorSuccess70};\n  }\n\n  &[active]:not([active=\"false\"]) {\n    --color: var(--stzh-chip-active-color, #{$colorWhite});\n    --background-color: var(--stzh-chip-active-background-color, #{$colorPrimary70});\n\n    --hover-color: var(--stzh-chip-active-hover-color, #{$colorWhite});\n    --hover-background-color: var(--stzh-chip-active-hover-background-color, #{$colorPrimary90});\n    --hover-remove-background-color: #{$colorPrimary90};\n\n    @include highContrast() {\n      --color: Highlight;\n      --background-color: Canvas;\n\n      --hover-color: Highlight;\n      --hover-background-color: Canvas;\n      --hover-remove-background-color: Canvas;\n    }\n  }\n\n  &[non-interactive]:not([non-interactive=\"false\"]) {\n    --hover-color: var(--color);\n    --hover-background-color: var(--background-color);\n    --hover-remove-color: var(--remove-color);\n    --hover-remove-background-color: transparent;\n    --hover-icon-color: var(--icon-color);\n    --hover-counter-color: var(--counter-color);\n  }\n\n  &[disabled]:not([disabled=\"false\"]) {\n    --color: var(--stzh-chip-disabled-color, #{$colorGrey80});\n    --background-color: var(--stzh-chip-disabled-background-color, #{$colorGrey20});\n    --remove-color: var(--color);\n    --icon-color: var(--color);\n    --counter-color: var(--color);\n\n    --hover-color: var(--color);\n    --hover-background-color: var(--background-color);\n    --hover-remove-color: var(--remove-color);\n    --hover-remove-background-color: transparent;\n    --hover-icon-color: var(--icon-color);\n    --hover-counter-color: var(--counter-color);\n  }\n\n  &[variant=\"input\"][disabled]:not([disabled=\"false\"]) {\n    --background-color: #{$colorGrey10};\n  }\n}\n\n:host(:where([size=\"small\"])) {\n  @include chip--size-small;\n}\n\n:host(:where([size=\"large\"])) {\n  @include chip--size-large;\n}\n\n@each $breakpoint, $size in $breakpoints {\n  @include mq($from: $breakpoint) {\n    :host(:where([size-#{$breakpoint}=\"default\"])) {\n      @include chip--size-default;\n    }\n\n    :host(:where([size-#{$breakpoint}=\"small\"])) {\n      @include chip--size-small;\n    }\n\n    :host(:where([size-#{$breakpoint}=\"large\"])) {\n      @include chip--size-large;\n    }\n  }\n}\n\n.stzh-chip {\n  position: relative;\n\n  &__vhidden {\n    @include visuallyhidden;\n  }\n\n  &__button {\n    font-size: var(--font-size);\n    line-height: var(--line-height);\n    letter-spacing: var(--letter-spacing);\n    min-height: var(--outer-height);\n    font-family: inherit;\n    appearance: none;\n    padding: 0px;\n    border: none;\n    background-color: transparent;\n\n    &.is-button,\n    &.is-link {\n      cursor: pointer;\n    }\n  }\n\n  &__button-inner {\n    height: var(--height);\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    border-radius: var(--border-radius);\n    padding-top: var(--padding-top);\n    padding-bottom: var(--padding-bottom);\n    padding-left: var(--padding-left);\n    padding-right: var(--padding-right);\n    color: var(--color);\n    background-color: var(--background-color);\n    transition-duration: $baseTransitionAnimationSpeed;\n    transition-property: color, background-color;\n    text-decoration-line: none;\n  }\n\n  &__label {\n    text-align: left;\n  }\n\n  &__icon-wrapper {\n    --stzh-icon-size: var(--icon-size);\n\n    display: flex;\n    color: var(--icon-color);\n    transition: color $baseTransitionAnimationSpeed;\n    flex-shrink: 0;\n\n    &:not(:empty) {\n      margin-right: var(--icon-gap);\n    }\n  }\n\n  &__counter {\n    display: flex;\n    font-variant-numeric: tabular-nums;\n    margin-left: var(--counter-gap);\n    color: var(--counter-color);\n    transition: color $baseTransitionAnimationSpeed;\n  }\n\n  &__remove {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    right: 0;\n    appearance: none;\n    font-family: inherit;\n    border: none;\n    background: none;\n    padding: 0;\n    width: var(--height);\n    height: var(--height);\n    border-radius: var(--remove-border-radius);\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    margin-left: space('xxsmall');\n    color: var(--remove-color);\n    transition-duration: $baseTransitionAnimationSpeed;\n    transition-property: color, background-color, border-color;\n    cursor: pointer;\n\n    &:hover {\n      color: var(--hover-remove-color);\n      background-color: var(--hover-remove-background-color);\n    }\n  }\n\n  &__remove-icon {\n    --size: #{iconSize('xxsmall')};\n  }\n\n  &__button:hover &__button-inner,\n  &__remove:hover + &__button &__button-inner {\n    color: var(--hover-color);\n    background-color: var(--hover-background-color);\n  }\n\n  &__button:hover &__counter,\n  &__remove:hover + &__button &__counter {\n    color: var(--hover-counter-color);\n  }\n\n  &__button:hover &__icon-wrapper,\n  &__remove:hover + &__button &__icon-wrapper {\n    color: var(--hover-icon-color);\n  }\n\n  /* Removeable */\n\n  &--is-removable &__button-inner {\n    padding-right: calc(var(--height) + #{space('xxsmall')});\n  }\n\n  /* Disabled */\n\n  &--is-disabled &__button,\n  &--is-disabled &__remove {\n    cursor: not-allowed;\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Prop } from \"@stencil/core\";\n\nimport {\n  StzhChipBlurEvent,\n  StzhChipClickEvent,\n  StzhChipFocusEvent,\n  StzhChipRemoveEvent,\n  StzhChipSize,\n  StzhChipType,\n  StzhChipVariant,\n} from \"../../index\";\n\n/**\n * @slot - Slot for label\n * @slot icon - Slot for icon\n */\n@Component({\n  tag: \"stzh-chip\",\n  styleUrl: \"stzh-chip.scss\",\n  scoped: true,\n})\nexport class StzhChip {\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Icon (use instead of icon slot) */\n  @Prop() icon: string;\n\n  /** `href` if the chip should be used as link  */\n  @Prop() href: string = \"\";\n\n  /** Target if the button is used as link (if `href` used)  */\n  @Prop() target: string = \"\";\n\n  /** Whether chip is not interactive */\n  @Prop({ reflect: true }) nonInteractive: boolean = false;\n\n  /** Whether remove button should be shown */\n  @Prop({ reflect: true }) removable: boolean = false;\n\n  /** Whether inverted style is shown (only available for `tag` variant) */\n  @Prop({ reflect: true }) inverted: boolean = false;\n\n  /** Variant */\n  @Prop({ reflect: true }) variant: StzhChipVariant = \"tag\";\n\n  /** Size */\n  @Prop({ reflect: true }) size: StzhChipSize = \"default\";\n\n  /** Size variant (above small breakpoint) */\n  @Prop({ reflect: true }) sizeSmall: StzhChipSize;\n\n  /** Size variant (above medium breakpoint) */\n  @Prop({ reflect: true }) sizeMedium: StzhChipSize;\n\n  /** Size variant (above large breakpoint) */\n  @Prop({ reflect: true }) sizeLarge: StzhChipSize;\n\n  /** Size variant (above ultra breakpoint) */\n  @Prop({ reflect: true }) sizeUltra: StzhChipSize;\n\n  /** Type */\n  @Prop({ reflect: true }) type: StzhChipType = \"default\";\n\n  /** Counter */\n  @Prop() counter: string = \"\";\n\n  /** Label of remove button for screenreaders */\n  @Prop() removeLabel: string = \"\";\n\n  /** Active */\n  @Prop({ reflect: true }) active: boolean = false;\n\n  /** Disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Tabindex of link/button */\n  @Prop({ attribute: \"a11y-tabindex\" }) a11yTabindex: string;\n\n  /** Accessible label for screen readers to replace visible text */\n  @Prop({ attribute: \"a11y-label\" }) a11yLabel: string;\n\n  /** Id for element which describes the link/button */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the link/button element.\n   * Default value will be taken from `label` prop or default slot.\n   */\n  @Prop() analyticsId: string;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the remove button element.\n   * Default value will be taken from `removeLabel` prop.\n   */\n  @Prop() removeAnalyticsId: string;\n\n  @Element() element: HTMLStzhChipElement;\n\n  /** Chip click event */\n  @Event() stzhClick: EventEmitter<StzhChipClickEvent>;\n\n  /** Chip remove event */\n  @Event() stzhRemove: EventEmitter<StzhChipRemoveEvent>;\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhChipFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhChipBlurEvent>;\n\n  private chip: HTMLButtonElement | HTMLAnchorElement;\n  private text: HTMLElement;\n  private focusedByInput: boolean = false;\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      this.chip?.setAttribute(\"s-object-id\", this.analyticsId || this.text.innerText);\n    });\n  }\n\n  private renderInner(): DocumentFragment {\n    return (\n      <div class=\"stzh-chip__button-inner\">\n        <div class=\"stzh-chip__icon-wrapper\">\n          {this.icon || (typeof this.icon === \"undefined\" && this.variant === \"tag\" && this.type !== \"default\") ? (\n            <stzh-icon\n              class=\"stzh-chip__icon\"\n              name={\n                this.icon ||\n                (this.type === \"info\" && \"info-help\") ||\n                (this.type === \"warning\" && \"important-warning\") ||\n                (this.type === \"error\" && \"warning\") ||\n                (this.type === \"success\" && \"checkmark-circle\")\n              }\n            ></stzh-icon>\n          ) : (\n            <slot name=\"icon\"></slot>\n          )}\n        </div>\n\n        <stzh-clamp lines={1} class=\"stzh-chip__label\" ref={el => (this.text = el as HTMLElement)}>\n          {this.label ? this.label : <slot></slot>}\n          {this.counter && this.counter !== \"undefined\" && this.counter !== undefined && (\n            <span class=\"stzh-chip__vhidden\">&nbsp;({this.counter})</span>\n          )}\n        </stzh-clamp>\n\n        {this.counter && this.counter !== \"undefined\" && this.counter !== undefined && (\n          <div class=\"stzh-chip__counter\" aria-hidden=\"true\">\n            {this.counter}\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.chip.focus();\n    }\n\n    this.focusedByInput = false;\n  };\n\n  private onFocus = (event: FocusEvent) => {\n    this.focusedByInput = true;\n\n    const focusEvent = new FocusEvent(\"focus\", {\n      view: window,\n      bubbles: false,\n      cancelable: false,\n    });\n\n    this.element.dispatchEvent(focusEvent);\n    this.stzhFocus.emit({\n      component: \"stzh-chip\",\n      originalEvent: event,\n    });\n  };\n\n  private onBlur = (event: FocusEvent) => {\n    const blurEvent = new FocusEvent(\"blur\", {\n      view: window,\n      bubbles: false,\n      cancelable: false,\n    });\n\n    this.element.dispatchEvent(blurEvent);\n    this.stzhBlur.emit({\n      component: \"stzh-chip\",\n      originalEvent: event,\n    });\n  };\n\n  private onClick = (event: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-chip\",\n      originalEvent: event,\n      href: this.href,\n    });\n  };\n\n  private onRemoveClick = (event: MouseEvent) => {\n    this.stzhRemove.emit({\n      component: \"stzh-chip\",\n      originalEvent: event,\n    });\n  };\n\n  render() {\n    const classes = {\n      \"stzh-chip\": true,\n      \"stzh-chip--is-active\": this.active,\n      \"stzh-chip--is-disabled\": this.disabled,\n      \"stzh-chip--is-removable\": this.removable,\n      \"stzh-chip--is-inverted\": this.inverted,\n      \"stzh-chip--has-counter\": !!this.counter,\n      [`stzh-chip--type-${this.type}`]: !!this.type,\n      [`stzh-chip--size-${this.size}`]: !!this.size,\n      [`stzh-chip--${this.variant}`]: !!this.variant,\n    };\n\n    const Chip = this.nonInteractive ? \"div\" : this.href ? \"a\" : \"button\";\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          {this.removable && (\n            <button\n              class=\"stzh-chip__remove\"\n              onClick={this.onRemoveClick}\n              disabled={this.disabled}\n              aria-label={this.removeLabel}\n              type=\"button\"\n              s-object-id={this.removeAnalyticsId || this.removeLabel}\n            >\n              <stzh-icon class=\"stzh-chip__remove-icon\" name=\"close-big\"></stzh-icon>\n            </button>\n          )}\n\n          {this.href ? (\n            <Chip\n              ref={el => (this.chip = el as HTMLAnchorElement)}\n              class={{\n                \"stzh-chip__button\": true,\n                \"is-button\": !this.nonInteractive && !this.href,\n                \"is-link\": !this.nonInteractive && !!this.href,\n              }}\n              href={this.disabled ? null : this.href}\n              target={this.target}\n              tabindex={this.a11yTabindex}\n              aria-label={this.a11yLabel || null}\n              aria-describedby={this.a11yDescribedby || null}\n              onClick={this.onClick}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n            >\n              {this.renderInner()}\n            </Chip>\n          ) : (\n            <Chip\n              ref={el => (this.chip = el as HTMLButtonElement)}\n              class={{\n                \"stzh-chip__button\": true,\n                \"is-button\": !this.nonInteractive && !this.href,\n                \"is-link\": !this.nonInteractive && !!this.href,\n              }}\n              disabled={this.disabled}\n              type=\"button\"\n              tabindex={this.a11yTabindex}\n              aria-label={this.a11yLabel || null}\n              aria-describedby={this.a11yDescribedby || null}\n              onClick={this.onClick}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n            >\n              {this.renderInner()}\n            </Chip>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/stzh-chipgroup.entry.js

@@ -0,0 +1,21 @@
+import { r as registerInstance, h, a as Host, g as getElement } from './index-e3050b18.js';
+
+const stzhChipgroupCss = ".sc-stzh-chipgroup-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-chipgroup-h{display:none}.sc-stzh-chipgroup-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-chipgroup-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-chipgroup-h *.sc-stzh-chipgroup,.sc-stzh-chipgroup-h *.sc-stzh-chipgroup::before,.sc-stzh-chipgroup-h *.sc-stzh-chipgroup::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-chipgroup-h .has-focus.sc-stzh-chipgroup{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-chipgroup-h .stzh-fylingfocus-focused.sc-stzh-chipgroup{outline-style:none !important}.sc-stzh-chipgroup-h .stzh-fylingfocus-focused.sc-stzh-chipgroup::-moz-focus-inner{border:0 !important}.stzh-chipgroup.sc-stzh-chipgroup{display:flex;gap:var(--stzh-space-medium)}";
+
+const StzhChipgroup = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    const classes = {
+      "stzh-chipgroup": true
+    };
+    return (h(Host, null, h("div", { class: classes }, h("slot", null))));
+  }
+  get element() { return getElement(this); }
+};
+StzhChipgroup.style = stzhChipgroupCss;
+
+export { StzhChipgroup as stzh_chipgroup };
+
+//# sourceMappingURL=stzh-chipgroup.entry.js.map

package/dist/esm/stzh-chipgroup.entry.js.map

@@ -0,0 +1 @@
+{"file":"stzh-chipgroup.entry.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,2zCAA2zC;;MCev0C,aAAa;;;;EAGxB,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,gBAAgB,EAAE,IAAI;KACvB,CAAC;IAEF,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,OAAO,IACjB,eAAa,CACT,CACD,EACP;GACH;;;;;;;","names":[],"sources":["src/components/stzh-chipgroup/stzh-chipgroup.scss?tag=stzh-chipgroup&encapsulation=scoped","src/components/stzh-chipgroup/stzh-chipgroup.tsx"],"sourcesContent":[":host {\n\n}\n\n.stzh-chipgroup {\n  display: flex;\n  gap: space('medium');\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element\n} from \"@stencil/core\";\n\n/**\n * @slot - Slot for chips\n */\n@Component({\n  tag: \"stzh-chipgroup\",\n  styleUrl: \"stzh-chipgroup.scss\",\n  scoped: true\n})\nexport class StzhChipgroup {\n  @Element() element: HTMLStzhChipgroupElement;\n\n  render() {\n    const classes = {\n      \"stzh-chipgroup\": true\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/stzh-chipselect.entry.js

@@ -0,0 +1,230 @@
+import { r as registerInstance, c as createEvent, h, F as Fragment, a as Host, g as getElement } from './index-e3050b18.js';
+import { S as StzhInputDescription } from './stzh-input-description-766446dc.js';
+
+const stzhChipselectCss = ".sc-stzh-chipselect-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-chipselect-h{display:none}.sc-stzh-chipselect-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-chipselect-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-chipselect-h *.sc-stzh-chipselect,.sc-stzh-chipselect-h *.sc-stzh-chipselect::before,.sc-stzh-chipselect-h *.sc-stzh-chipselect::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-chipselect-h .has-focus.sc-stzh-chipselect{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-chipselect-h .stzh-fylingfocus-focused.sc-stzh-chipselect{outline-style:none !important}.sc-stzh-chipselect-h .stzh-fylingfocus-focused.sc-stzh-chipselect::-moz-focus-inner{border:0 !important}[disabled].sc-stzh-chipselect-h:not([disabled=false]){--description-color:var(--stzh-color-grey70)}.stzh-chipselect__marker-symbol.sc-stzh-chipselect{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium)}.stzh-chipselect__marker-text.sc-stzh-chipselect{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-chipselect__description-wrapper.sc-stzh-chipselect{display:flex;flex-direction:column-reverse;min-height:var(--description-min-height, var(--stzh-description-min-height, none))}.stzh-chipselect__error.sc-stzh-chipselect,.stzh-chipselect__description.sc-stzh-chipselect{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}.stzh-chipselect__error.sc-stzh-chipselect{color:var(--stzh-color-error60)}.stzh-chipselect__error-list.sc-stzh-chipselect{list-style:none;margin:0;padding:0}.stzh-chipselect__description.sc-stzh-chipselect{display:flex;align-items:flex-start;color:var(--stzh-input-description-color, var(--description-color, var(--stzh-color-coolgrey70)));transition:color var(--stzh-base-transition-animation-speed)}.stzh-chipselect__description-long.sc-stzh-chipselect{margin-right:var(--stzh-space-xxsmall);margin-top:0.125rem}@supports (font: -apple-system-body) and (-webkit-appearance: none){.stzh-chipselect__description-long.sc-stzh-chipselect{margin-top:0}}.stzh-chipselect__description-long-popover.sc-stzh-chipselect{--width:auto;--max-width:27.3125rem}.stzh-chipselect__description-long-button.sc-stzh-chipselect{display:flex;justify-content:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;padding:0;border:none;background-color:transparent;border-radius:0.5rem;cursor:pointer}.stzh-chipselect.sc-stzh-chipselect stzh-icon.stzh-chipselect__description-long-icon.sc-stzh-chipselect{--size:var(--stzh-icon-size-xsmall)}.stzh-chipselect--has-error.sc-stzh-chipselect .stzh-chipselect__error.sc-stzh-chipselect,.stzh-chipselect--has-description.sc-stzh-chipselect .stzh-chipselect__description.sc-stzh-chipselect{margin-top:var(--stzh-space-xxxsmall)}.stzh-chipselect__label.sc-stzh-chipselect{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;color:var(--stzh-heading-color);display:block;margin-bottom:var(--stzh-space-xsmall)}.stzh-chipselect__label.sc-stzh-chipselect:empty{display:none}.stzh-chipselect__marker.sc-stzh-chipselect{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);margin-left:calc(-0.25em + var(--stzh-space-xsmall))}.stzh-chipselect__chips.sc-stzh-chipselect{display:flex;align-items:center;flex-wrap:wrap;border-radius:var(--stzh-button-border-radius);-moz-column-gap:var(--stzh-space-medium);column-gap:var(--stzh-space-medium)}@media screen and (min-width: 900px){.stzh-chipselect__chips.sc-stzh-chipselect{row-gap:var(--stzh-space-medium)}}.stzh-chipselect__chips.sc-stzh-chipselect:focus-within .is-focused[active].sc-stzh-chipselect{--background-color:var(--stzh-color-primary90)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-chipselect__chips.sc-stzh-chipselect:focus-within .is-focused[active].sc-stzh-chipselect{--background-color:Canvas}}.stzh-chipselect__chip.is-focused.sc-stzh-chipselect{--background-color:var(--stzh-color-secondary40)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-chipselect__chip.is-focused.sc-stzh-chipselect{--background-color:Highlight}}.stzh-chipselect--has-error.sc-stzh-chipselect .stzh-chipselect__error.sc-stzh-chipselect,.stzh-chipselect--has-description.sc-stzh-chipselect .stzh-chipselect__description.sc-stzh-chipselect{margin-top:var(--stzh-space-xsmall)}.stzh-chipselect--has-label-hidden.sc-stzh-chipselect .stzh-chipselect__label.sc-stzh-chipselect{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-chipselect--is-disabled.sc-stzh-chipselect .stzh-chipselect__chips.sc-stzh-chipselect,.stzh-chipselect--is-disabled.sc-stzh-chipselect .stzh-chipselect__label.sc-stzh-chipselect{cursor:not-allowed}";
+
+let chipselectCounter = 0;
+const StzhChipselect = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.stzhChange = createEvent(this, "stzhChange", 7);
+    this._data = [];
+    this._value = [];
+    this.handleReset = async () => {
+      this.value = this.defaultValue;
+      // this.stzhChange.emit({
+      //   component: "stzh-chipselect",
+      //   value: this.value
+      // });
+    };
+    this.handleChipClick = async (data, index) => {
+      if (this.multiple) {
+        if (data.value === "" && this._value.length > 0 && !(this._value.length === 1 && this._value[0] === "")) {
+          this.value = [];
+        }
+        else if (data.value !== "") {
+          this.value = this._value.includes(data.value)
+            ? this._value.filter(value => value !== data.value)
+            : [...this._value, data.value];
+        }
+      }
+      else {
+        this.value = data.value;
+      }
+      this.activeFocusOptionIndex = index;
+      await this.waitForNextRender();
+      this.stzhChange.emit({
+        component: "stzh-chipselect",
+        value: this.multiple ? this._value : this._value[0]
+      });
+    };
+    // private handleDropdownChange = async (event: CustomEvent<StzhDropdownChangeEvent>) => {
+    //   this.value = Array.isArray(event.detail.value) ? event.detail.value[0] : event.detail.value;
+    //   this.activeFocusOptionIndex = this._data.findIndex(data => {
+    //     return data.value === this.value;
+    //   });
+    //   await this.waitForNextRender();
+    //   this.stzhChange.emit({
+    //     component: "stzh-chipselect",
+    //     value: this.value
+    //   })
+    // }
+    this.handleKeydown = (event) => {
+      let newActiveIndex = null;
+      const activeOptionIndex = this.activeFocusOptionIndex;
+      if (event.key === "ArrowUp" || event.key === "ArrowLeft") {
+        event.preventDefault();
+        if (activeOptionIndex > 0) {
+          newActiveIndex = activeOptionIndex - 1;
+        }
+      }
+      else if (event.key === "ArrowDown" || event.key === "ArrowRight") {
+        event.preventDefault();
+        if (activeOptionIndex < this._data.length - 1) {
+          newActiveIndex = activeOptionIndex + 1;
+        }
+      }
+      else if (event.key === " " || event.key === "Enter") {
+        event.preventDefault();
+        if (this.multiple) {
+          if (this._data[activeOptionIndex].value === "" && this._value.length > 0 && !(this._value.length === 1 && this._value[0] === "")) {
+            this.value = [];
+          }
+          else if (this._data[activeOptionIndex].value !== "") {
+            this.value = this._value.includes(this._data[activeOptionIndex].value)
+              ? this._value.filter(value => value !== this._data[activeOptionIndex].value)
+              : [...this._value, this._data[activeOptionIndex].value];
+          }
+        }
+        else {
+          this.value = this._data[activeOptionIndex].value; //HERE
+        }
+        this.stzhChange.emit({
+          component: "stzh-chipselect",
+          value: this.value
+        });
+      }
+      if (newActiveIndex !== null) {
+        this.activeFocusOptionIndex = newActiveIndex;
+      }
+    };
+    this.localization = undefined;
+    this.data = [];
+    this.name = undefined;
+    this.label = "";
+    this.labelHidden = false;
+    this.multiple = false;
+    this.value = "";
+    this.defaultValue = "";
+    this.description = undefined;
+    this.descriptionLong = undefined;
+    this.descriptionLongTitle = undefined;
+    this.error = undefined;
+    this.invalid = false;
+    this.required = false;
+    this.disabled = false;
+    this.hideOptional = false;
+    this.a11yDescribedby = "";
+    this.activeFocusOptionIndex = 0;
+  }
+  resetListener(event) {
+    if (event.target.contains(this.element)) {
+      requestAnimationFrame(() => {
+        this.handleReset();
+      });
+    }
+  }
+  valueWatcher(newValue) {
+    if (typeof newValue === "string") {
+      try {
+        this._value = JSON.parse(newValue);
+      }
+      catch (ex) {
+        this._value = newValue ? [newValue] : [];
+      }
+    }
+    else {
+      this._value = newValue ? newValue : [];
+    }
+  }
+  dataWatcher(newValue) {
+    if (typeof newValue === "string") {
+      this._data = JSON.parse(newValue);
+    }
+    else {
+      this._data = newValue;
+    }
+    // this._dataDropdown = this._data.map((data) => {
+    //   return {
+    //     text: data.counter
+    //       ? `${data.label} (${data.counter})`
+    //       : data.label,
+    //     value: data.value
+    //   }
+    // });
+  }
+  errorWatcher(newValue) {
+    if (typeof newValue === "string") {
+      try {
+        this._error = JSON.parse(newValue);
+      }
+      catch (e) {
+        if (newValue) {
+          this._error = [newValue];
+        }
+        else {
+          this._error = [];
+        }
+      }
+    }
+    else if (newValue) {
+      this._error = newValue;
+    }
+    else {
+      this._error = [];
+    }
+  }
+  waitForNextRender() {
+    return new Promise(resolve => this.renderPromiseResolve = resolve);
+  }
+  componentDidRender() {
+    if (this.renderPromiseResolve) {
+      this.renderPromiseResolve();
+    }
+  }
+  async componentWillLoad() {
+    this.id = `stzh-chipselect-${chipselectCounter++}`;
+    this.dataWatcher(this.data);
+    this.errorWatcher(this.error);
+    this.valueWatcher(this.value);
+    this.defaultValue = this.defaultValue || this.value;
+    if (!this.localization) {
+      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, "chipselect");
+    }
+  }
+  render() {
+    const descriptionUsed = !!this.description;
+    const descriptionLongUsed = !!this.descriptionLong;
+    const errorUsed = !!this.error;
+    const classes = {
+      "stzh-chipselect": true,
+      "stzh-chipselect--has-description": descriptionUsed,
+      "stzh-chipselect--has-description-long": descriptionLongUsed,
+      "stzh-chipselect--has-error": errorUsed,
+      "stzh-chipselect--is-invalid": this.invalid || errorUsed,
+      "stzh-chipselect--is-disabled": this.disabled,
+      "stzh-chipselect--is-required": this.required,
+      "stzh-chipselect--has-label-hidden": this.labelHidden,
+    };
+    return (h(Host, { "is-invalid": this.invalid || errorUsed }, h("div", { class: classes }, this.multiple
+      ?
+        h(Fragment, null, this._value.map((value) => h("input", { type: "hidden", name: this.name, value: value })))
+      :
+        h("input", { type: "hidden", name: this.name, value: this.value }), h("label", { class: "stzh-chipselect__label", htmlFor: this.id }, this.label ? this.label : h("slot", null), !this.hideOptional &&
+      h("span", { class: "stzh-chipselect__marker" }, h("span", { class: "stzh-chipselect__marker-symbol", "aria-hidden": "true" }, this.required
+        ? this.localization.$globals.requiredFieldMarker
+        : this.localization.$globals.optionalFieldMarker), h("span", { class: "stzh-chipselect__marker-text" }, this.required
+        ? this.localization.$globals.requiredFieldText
+        : this.localization.$globals.optionalFieldText))), this._data.length > 0 &&
+      h(Fragment, null, h("div", { id: this.id, class: "stzh-chipselect__chips", role: "listbox", tabindex: "0", "aria-multiselectable": this.multiple ? "true" : "false", "aria-activedescendant": `${this.id}-option-${this.activeFocusOptionIndex}`, "aria-describedby": `${this.id}-description ${this.a11yDescribedby}`, onKeyDown: this.handleKeydown }, this._data.map((data, index) => (h("stzh-chip", { role: "option", class: {
+          "stzh-chipselect__chip": true,
+          "is-focused": this.activeFocusOptionIndex === index
+        }, label: data.label, counter: data.counter, icon: data.icon, type: data.type, inverted: data.inverted, variant: data.variant, size: data.size || "small", disabled: this.disabled || data.disabled, active: this._value.includes(data.value)
+          || (!this.multiple && !data.value && (this._value.length === 0 || this._value[0] === ""))
+          || (!data.value && this.multiple && (this._value.length === 0 || (this._value.length === 1 && this._value[0] === ""))), "aria-selected": this._value.includes(data.value)
+          || (!this.multiple && !data.value && (this._value.length === 0 || this._value[0] === ""))
+          || (!data.value && this.multiple && (this._value.length === 0 || (this._value.length === 1 && this._value[0] === "")))
+          ? "true" : "false", id: `${this.id}-option-${index}`, a11yTabindex: "-1", onClick: () => this.handleChipClick(data, index) })))), h(StzhInputDescription, { classPrefix: "stzh-chipselect", id: `${this.id}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongTitle: this.descriptionLongTitle, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel })))));
+  }
+  get element() { return getElement(this); }
+  static get watchers() { return {
+    "value": ["valueWatcher"],
+    "data": ["dataWatcher"],
+    "error": ["errorWatcher"]
+  }; }
+};
+StzhChipselect.style = stzhChipselectCss;
+
+export { StzhChipselect as stzh_chipselect };
+
+//# sourceMappingURL=stzh-chipselect.entry.js.map