npm - @oiz/stzh-components - Versions diffs - 4.5.0 → 4.6.0-beta1 - Mend

@oiz/stzh-components 4.5.0 → 4.6.0-beta1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (943) hide show

package/dist/components/{p-f70f31d6.js.map → p-72101ea0.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-~~f70f31d6~~.js","mappings":";;AAAA,MAAM,aAAa,GAAG,kqEAAkqE,CAAC;AACzrE,yBAAe,aAAa;;MCUf,UAAU;;;;uBAEK,CAAC;8BAGwB,KAAK;qBAGhC,EAAE;oBAGsB,SAAS;;IAIzD,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,aAAa,EAAE,IAAI;YACnB,CAAC,qBAAqB,IAAI,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI;SAChD,CAAC;QAEF,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAE,OAAO,IACjB,4DAAK,KAAK,EAAC,mBAAmB,IAC3B,CAAC,IAAI,CAAC,cAAc,IAAI,4DAAK,KAAK,EAAC,kBAAkB,GAAO,EAC5D,IAAI,CAAC,KAAK,IAAI,4DAAK,KAAK,EAAC,oBAAoB,IAAE,IAAI,CAAC,KAAK,CAAO,CAC7D,EACL,IAAI,CAAC,cAAc,KAClB,4DAAK,KAAK,EAAC,kBAAkB,IAC3B,4DACE,KAAK,EAAC,wBAAwB,EAC9B,KAAK,EAAE;gBACL,KAAK,EAAE,GAAG,IAAI,CAAC,OAAO,GAAG;aAC1B,GACI,CACH,CACP,CACG,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/stzh-status/stzh-status.scss?tag=stzh-status&encapsulation=scoped","src/components/stzh-status/stzh-status.tsx"],"sourcesContent":["/*\n @prop --color: Status color text\n /\n\n:host {\n --color: #{$baseColor};\n --min-width: none;\n\n &[with-loadingbar]:not([with-loadingbar=\"false\"]) {\n --min-width: 160px;\n }\n\n &[type=\"success\"] {\n --color: #{$colorSuccess70};\n }\n\n &[type=\"warning\"] {\n --color: #{$colorWarning90};\n }\n\n &[type=\"error\"] {\n --color: #{$colorError70};\n }\n\n &[type=\"info\"] {\n --color: #{$colorMidnightblue70};\n }\n}\n\n.stzh-status {\n min-width: var(--min-width);\n color: var(--color);\n\n &__dot {\n border-radius: 50%;\n width: 12px;\n height: 12px;\n background-color: currentColor;\n margin-right: space(\"xxsmall\");\n }\n\n &__bar {\n display: block;\n height: 4px;\n border-radius: 12px;\n background-color: $colorOldGrey13;\n margin-top: space(\"xxsmall\");\n }\n\n &__bar-inner {\n display: block;\n height: 100%;\n width: 0;\n border-radius: 12px;\n background: currentColor;\n }\n\n &__text {\n @include fontSize(\"micro\");\n display: flex;\n align-items: center;\n }\n}\n","import { Component, Host, h, Element, Prop } from \"@stencil/core\";\n\nimport { StzhStatusType } from \"../../index\";\n\n/\n /\n@Component({\n tag: \"stzh-status\",\n styleUrl: \"stzh-status.scss\",\n scoped: true,\n})\nexport class StzhStatus {\n /** Percent /\n @Prop() percent: number = 0;\n\n /* Whether to hide/show loadingbar /\n @Prop({ reflect: true }) withLoadingbar: boolean = false;\n\n /* Label /\n @Prop() label: string = \"\";\n\n /* Type */\n @Prop({ reflect: true }) type: StzhStatusType = \"default\";\n\n @Element() element: HTMLStzhStatusElement;\n\n render() {\n const classes = {\n \"stzh-status\": true,\n [`stzh-status--type-${this.type}`]: !!this.type,\n };\n\n return (\n <Host>\n <div class={classes}>\n <div class=\"stzh-status__text\">\n {!this.withLoadingbar && <div class=\"stzh-status__dot\"></div>}\n {this.label && <div class=\"stzh-status__label\">{this.label}</div>}\n </div>\n {this.withLoadingbar && (\n <div class=\"stzh-status__bar\">\n <div\n class=\"stzh-status__bar-inner\"\n style={{\n width: `${this.percent}%`,\n }}\n ></div>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-72101ea0.js","mappings":";;AAAA,MAAM,aAAa,GAAG,kqEAAkqE,CAAC;AACzrE,yBAAe,aAAa;;MCUf,UAAU;;;;uBAEK,CAAC;8BAGwB,KAAK;qBAGhC,EAAE;oBAGsB,SAAS;;IAIzD,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,aAAa,EAAE,IAAI;YACnB,CAAC,qBAAqB,IAAI,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI;SAChD,CAAC;QAEF,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAE,OAAO,IACjB,4DAAK,KAAK,EAAC,mBAAmB,IAC3B,CAAC,IAAI,CAAC,cAAc,IAAI,4DAAK,KAAK,EAAC,kBAAkB,GAAO,EAC5D,IAAI,CAAC,KAAK,IAAI,4DAAK,KAAK,EAAC,oBAAoB,IAAE,IAAI,CAAC,KAAK,CAAO,CAC7D,EACL,IAAI,CAAC,cAAc,KAClB,4DAAK,KAAK,EAAC,kBAAkB,IAC3B,4DACE,KAAK,EAAC,wBAAwB,EAC9B,KAAK,EAAE;gBACL,KAAK,EAAE,GAAG,IAAI,CAAC,OAAO,GAAG;aAC1B,GACI,CACH,CACP,CACG,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/stzh-status/stzh-status.scss?tag=stzh-status&encapsulation=scoped","src/components/stzh-status/stzh-status.tsx"],"sourcesContent":["/*\n @prop --color: Status color text\n /\n\n:host {\n --color: #{$baseColor};\n --min-width: none;\n\n &[with-loadingbar]:not([with-loadingbar=\"false\"]) {\n --min-width: 160px;\n }\n\n &[type=\"success\"] {\n --color: #{$colorSuccess70};\n }\n\n &[type=\"warning\"] {\n --color: #{$colorWarning90};\n }\n\n &[type=\"error\"] {\n --color: #{$colorError70};\n }\n\n &[type=\"info\"] {\n --color: #{$colorMidnightblue70};\n }\n}\n\n.stzh-status {\n min-width: var(--min-width);\n color: var(--color);\n\n &__dot {\n border-radius: 50%;\n width: 12px;\n height: 12px;\n background-color: currentColor;\n margin-right: space(\"xxsmall\");\n }\n\n &__bar {\n display: block;\n height: 4px;\n border-radius: 12px;\n background-color: $colorOldGrey13;\n margin-top: space(\"xxsmall\");\n }\n\n &__bar-inner {\n display: block;\n height: 100%;\n width: 0;\n border-radius: 12px;\n background: currentColor;\n }\n\n &__text {\n @include fontSize(\"micro\");\n display: flex;\n align-items: center;\n }\n}\n","import { Component, Host, h, Element, Prop } from \"@stencil/core\";\n\nimport { StzhStatusType } from \"../../index\";\n\n/\n /\n@Component({\n tag: \"stzh-status\",\n styleUrl: \"stzh-status.scss\",\n scoped: true,\n})\nexport class StzhStatus {\n /** Percent /\n @Prop() percent: number = 0;\n\n /* Whether to hide/show loadingbar /\n @Prop({ reflect: true }) withLoadingbar: boolean = false;\n\n /* Label /\n @Prop() label: string = \"\";\n\n /* Type */\n @Prop({ reflect: true }) type: StzhStatusType = \"default\";\n\n @Element() element: HTMLStzhStatusElement;\n\n render() {\n const classes = {\n \"stzh-status\": true,\n [`stzh-status--type-${this.type}`]: !!this.type,\n };\n\n return (\n <Host>\n <div class={classes}>\n <div class=\"stzh-status__text\">\n {!this.withLoadingbar && <div class=\"stzh-status__dot\"></div>}\n {this.label && <div class=\"stzh-status__label\">{this.label}</div>}\n </div>\n {this.withLoadingbar && (\n <div class=\"stzh-status__bar\">\n <div\n class=\"stzh-status__bar-inner\"\n style={{\n width: `${this.percent}%`,\n }}\n ></div>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/{p-a8876adb.js → p-72e977cc.js} RENAMED Viewed

@@ -22,11 +22,11 @@ const StzhHspace = /*@__PURE__*/ proxyCustomElement(class StzhHspace extends H {
         this.border = "none";
     }
     render() {
-        return (h(Host, { key: '2b4b3bf29684a893e4f03da446f5ce59b5cc08e1' }, h("div", { key: '7dfb0a82a3b3eaf1c05c62d834cf11dc8016b955', class: {
+        return (h(Host, { key: 'f11a2c28142f46d3d899da814c8e265d0537f885' }, h("div", { key: '2f5760fecfd510d6b6c5b2598b7b6959ecb84790', class: {
                 "stzh-hspace": true,
                 [`stzh-hspace--justify-${this.justify}`]: !!this.justify,
                 [`stzh-hspace--items-${this.items}`]: !!this.items,
-            } }, h("slot", { key: '6feaf587c783eb0c0ec955c10cc31a3a7570b213' }))));
+            } }, h("slot", { key: 'a89a6f24fc2af83d021b1a82179e12da20198ffa' }))));
     }
     static get style() { return StzhHspaceStyle0; }
 }, [1, "stzh-hspace", {
@@ -59,4 +59,4 @@ function defineCustomElement() {
 export { StzhHspace as S, defineCustomElement as d };
-//# sourceMappingURL=p-a8876adb.js.map
+//# sourceMappingURL=p-72e977cc.js.map

package/dist/components/{p-a8876adb.js.map → p-72e977cc.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-~~a8876adb~~.js","mappings":";;AAAA,MAAM,aAAa,GAAG,q6aAAq6a,CAAC;AAC57a,yBAAe,aAAa;;MCWf,UAAU;;;;;qBAE0B,MAAM;;;;;;uBAcF,OAAO;qBAGX,OAAO;sBAGX,KAAK;0BAGD,KAAK;2BAGJ,KAAK;sBAGuB,MAAM;;IAElF,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DACE,KAAK,EAAE;gBACL,aAAa,EAAE,IAAI;gBACnB,CAAC,wBAAwB,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;gBACxD,CAAC,sBAAsB,IAAI,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK;aACnD,IAED,8DAAa,CACT,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/stzh-hspace/stzh-hspace.scss?tag=stzh-hspace&encapsulation=shadow","src/components/stzh-hspace/stzh-hspace.tsx"],"sourcesContent":[":host {\n --h-space: #{space()};\n --h-around-left: 0;\n --h-around-right: 0;\n --h-around: 0;\n\n display: flex;\n color: inherit;\n font-weight: inherit;\n font-family: inherit;\n letter-spacing: inherit;\n\n ::slotted() {\n // fix IE11 not wrapping text\n max-width: 100%;\n padding-left: calc(var(--h-space) var(--h-around-left));\n padding-right: calc(var(--h-space) * var(--h-around-right));\n margin: 0;\n }\n\n ::slotted(:not(:last-child)) {\n margin-right: calc(var(--h-space) (1 - var(--h-around)));\n }\n\n ::slotted(stzh-show) {\n --show-display: block;\n }\n\n ::slotted(stzh-vspace),\n ::slotted(stzh-hspace),\n ::slotted(stzh-row),\n ::slotted(stzh-container),\n ::slotted(stzh-section) {\n align-self: stretch;\n flex-grow: 1;\n }\n}\n\n:host(:empty),\n:host([around]:not([around=\"false\"])) {\n --h-around-left: 1;\n --h-around-right: 1;\n --h-around: 1;\n}\n\n:host(:empty) {\n width: var(--h-space);\n}\n\n:host([around-left]:not([around-left=\"false\"])) {\n --h-around-left: 1;\n --h-around: 1;\n}\n\n:host([around-right]:not([around-right=\"false\"])) {\n --h-around-right: 1;\n --h-around: 1;\n}\n\n/* Border variants /\n\n:host([border=\"left\"]),\n:host([border=\"left-right\"]) {\n border-left: 1px solid $baseBorderColor;\n}\n\n:host([border=\"right\"]),\n:host([border=\"left-right\"]) {\n border-right: 1px solid $baseBorderColor;\n}\n\n/ Space variants /\n\n@each $spaceCurve, $value in $spaceCurves {\n $defaultSize: map-get($value, \"size\");\n $breakpointSizes: map-get($value, \"sizes\");\n\n // :host([curve=\"#{$spaceCurve}\"]) > .stzh-h-space {\n :host([curve=\"#{$spaceCurve}\"]) {\n --h-space: #{space($defaultSize)};\n\n @each $breakpoint, $size in $breakpointSizes {\n @include mq($from: $breakpoint) {\n --h-space: #{space($size)};\n }\n }\n }\n}\n\n@mixin spaceProps($breakpoint: null) {\n @each $space, $value in $spaceSizes {\n @if $breakpoint {\n // :host([size-#{$breakpoint}=\"#{$space}\"]) > .stzh-h-space {\n :host([size-#{$breakpoint}=\"#{$space}\"]) {\n @include mq($from: $breakpoint) {\n --h-space: #{$value};\n }\n }\n } @else {\n // :host([size=\"#{$space}\"]) > .stzh-h-space {\n :host([size=\"#{$space}\"]) {\n --h-space: #{$value};\n }\n }\n }\n}\n\n@include spaceProps();\n\n@each $breakpoint, $size in $breakpoints {\n @include spaceProps($breakpoint);\n}\n\n.stzh-hspace {\n flex-grow: 1;\n width: 100%;\n height: 100%;\n\n display: flex;\n justify-content: flex-start;\n align-items: flex-start;\n padding: 0;\n margin: 0;\n\n &--border-left {\n border-left: 1px solid $baseBorderColor;\n }\n\n &--border-right {\n border-right: 1px solid $baseBorderColor;\n }\n\n / Justify content variants /\n\n &--justify-center {\n justify-content: center;\n }\n\n &--justify-end {\n justify-content: flex-end;\n }\n\n &--justify-between {\n justify-content: space-between;\n }\n\n &--justify-around {\n justify-content: space-around;\n }\n\n &--justify-evenly {\n justify-content: space-evenly;\n }\n\n / Align items variants /\n\n &--items-end {\n align-items: flex-end;\n }\n\n &--items-center {\n align-items: center;\n }\n\n &--items-baseline {\n align-items: baseline;\n }\n\n &--items-stretch {\n align-items: stretch;\n }\n}\n","import { Component, Host, h, Prop } from \"@stencil/core\";\n\nimport { Space, Layout } from \"../../index\";\n\n/\n @slot - Slot for any elements that should be horizontically spaced\n /\n@Component({\n tag: \"stzh-hspace\",\n styleUrl: \"stzh-hspace.scss\",\n shadow: true,\n})\nexport class StzhHspace {\n /* Type of curve (see [Spacings docs page](/docs/tokens-spacings--docs#curves) for more info). /\n @Prop({ reflect: true }) curve: Space.Curves = \"none\";\n\n /* Type of size (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). /\n @Prop({ reflect: true }) size: Space.Sizes;\n /* Type of size above small breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). /\n @Prop({ reflect: true }) sizeSmall: Space.Sizes;\n /* Type of size above medium breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). /\n @Prop({ reflect: true }) sizeMedium: Space.Sizes;\n /* Type of size above large breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). /\n @Prop({ reflect: true }) sizeLarge: Space.Sizes;\n /* Type of size above ultra breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). /\n @Prop({ reflect: true }) sizeUltra: Space.Sizes;\n\n /* Alignment /\n @Prop({ reflect: true }) justify: Layout.Justify = \"start\";\n\n /* Control how cells items are positioned along a container's cross axis /\n @Prop({ reflect: true }) items: Layout.Items = \"start\";\n\n /* Apply spacing to slotted elements (padding instead of margin) /\n @Prop({ reflect: true }) around: boolean = false;\n\n /* Apply spacing to slotted elements (padding instead of margin, only left) /\n @Prop({ reflect: true }) aroundLeft: boolean = false;\n\n /* Apply spacing to slotted elements (padding instead of margin, only right) /\n @Prop({ reflect: true }) aroundRight: boolean = false;\n\n /* Add border */\n @Prop({ reflect: true }) border: \"none\" \| \"left\" \| \"right\" \| \"left-right\" = \"none\";\n\n render() {\n return (\n <Host>\n <div\n class={{\n \"stzh-hspace\": true,\n [`stzh-hspace--justify-${this.justify}`]: !!this.justify,\n [`stzh-hspace--items-${this.items}`]: !!this.items,\n }}\n >\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-72e977cc.js","mappings":";;AAAA,MAAM,aAAa,GAAG,q6aAAq6a,CAAC;AAC57a,yBAAe,aAAa;;MCWf,UAAU;;;;;qBAE0B,MAAM;;;;;;uBAcF,OAAO;qBAGX,OAAO;sBAGX,KAAK;0BAGD,KAAK;2BAGJ,KAAK;sBAGuB,MAAM;;IAElF,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DACE,KAAK,EAAE;gBACL,aAAa,EAAE,IAAI;gBACnB,CAAC,wBAAwB,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;gBACxD,CAAC,sBAAsB,IAAI,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK;aACnD,IAED,8DAAa,CACT,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/stzh-hspace/stzh-hspace.scss?tag=stzh-hspace&encapsulation=shadow","src/components/stzh-hspace/stzh-hspace.tsx"],"sourcesContent":[":host {\n --h-space: #{space()};\n --h-around-left: 0;\n --h-around-right: 0;\n --h-around: 0;\n\n display: flex;\n color: inherit;\n font-weight: inherit;\n font-family: inherit;\n letter-spacing: inherit;\n\n ::slotted() {\n // fix IE11 not wrapping text\n max-width: 100%;\n padding-left: calc(var(--h-space) var(--h-around-left));\n padding-right: calc(var(--h-space) * var(--h-around-right));\n margin: 0;\n }\n\n ::slotted(:not(:last-child)) {\n margin-right: calc(var(--h-space) (1 - var(--h-around)));\n }\n\n ::slotted(stzh-show) {\n --show-display: block;\n }\n\n ::slotted(stzh-vspace),\n ::slotted(stzh-hspace),\n ::slotted(stzh-row),\n ::slotted(stzh-container),\n ::slotted(stzh-section) {\n align-self: stretch;\n flex-grow: 1;\n }\n}\n\n:host(:empty),\n:host([around]:not([around=\"false\"])) {\n --h-around-left: 1;\n --h-around-right: 1;\n --h-around: 1;\n}\n\n:host(:empty) {\n width: var(--h-space);\n}\n\n:host([around-left]:not([around-left=\"false\"])) {\n --h-around-left: 1;\n --h-around: 1;\n}\n\n:host([around-right]:not([around-right=\"false\"])) {\n --h-around-right: 1;\n --h-around: 1;\n}\n\n/* Border variants /\n\n:host([border=\"left\"]),\n:host([border=\"left-right\"]) {\n border-left: 1px solid $baseBorderColor;\n}\n\n:host([border=\"right\"]),\n:host([border=\"left-right\"]) {\n border-right: 1px solid $baseBorderColor;\n}\n\n/ Space variants /\n\n@each $spaceCurve, $value in $spaceCurves {\n $defaultSize: map-get($value, \"size\");\n $breakpointSizes: map-get($value, \"sizes\");\n\n // :host([curve=\"#{$spaceCurve}\"]) > .stzh-h-space {\n :host([curve=\"#{$spaceCurve}\"]) {\n --h-space: #{space($defaultSize)};\n\n @each $breakpoint, $size in $breakpointSizes {\n @include mq($from: $breakpoint) {\n --h-space: #{space($size)};\n }\n }\n }\n}\n\n@mixin spaceProps($breakpoint: null) {\n @each $space, $value in $spaceSizes {\n @if $breakpoint {\n // :host([size-#{$breakpoint}=\"#{$space}\"]) > .stzh-h-space {\n :host([size-#{$breakpoint}=\"#{$space}\"]) {\n @include mq($from: $breakpoint) {\n --h-space: #{$value};\n }\n }\n } @else {\n // :host([size=\"#{$space}\"]) > .stzh-h-space {\n :host([size=\"#{$space}\"]) {\n --h-space: #{$value};\n }\n }\n }\n}\n\n@include spaceProps();\n\n@each $breakpoint, $size in $breakpoints {\n @include spaceProps($breakpoint);\n}\n\n.stzh-hspace {\n flex-grow: 1;\n width: 100%;\n height: 100%;\n\n display: flex;\n justify-content: flex-start;\n align-items: flex-start;\n padding: 0;\n margin: 0;\n\n &--border-left {\n border-left: 1px solid $baseBorderColor;\n }\n\n &--border-right {\n border-right: 1px solid $baseBorderColor;\n }\n\n / Justify content variants /\n\n &--justify-center {\n justify-content: center;\n }\n\n &--justify-end {\n justify-content: flex-end;\n }\n\n &--justify-between {\n justify-content: space-between;\n }\n\n &--justify-around {\n justify-content: space-around;\n }\n\n &--justify-evenly {\n justify-content: space-evenly;\n }\n\n / Align items variants /\n\n &--items-end {\n align-items: flex-end;\n }\n\n &--items-center {\n align-items: center;\n }\n\n &--items-baseline {\n align-items: baseline;\n }\n\n &--items-stretch {\n align-items: stretch;\n }\n}\n","import { Component, Host, h, Prop } from \"@stencil/core\";\n\nimport { Space, Layout } from \"../../index\";\n\n/\n @slot - Slot for any elements that should be horizontically spaced\n /\n@Component({\n tag: \"stzh-hspace\",\n styleUrl: \"stzh-hspace.scss\",\n shadow: true,\n})\nexport class StzhHspace {\n /* Type of curve (see [Spacings docs page](/docs/tokens-spacings--docs#curves) for more info). /\n @Prop({ reflect: true }) curve: Space.Curves = \"none\";\n\n /* Type of size (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). /\n @Prop({ reflect: true }) size: Space.Sizes;\n /* Type of size above small breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). /\n @Prop({ reflect: true }) sizeSmall: Space.Sizes;\n /* Type of size above medium breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). /\n @Prop({ reflect: true }) sizeMedium: Space.Sizes;\n /* Type of size above large breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). /\n @Prop({ reflect: true }) sizeLarge: Space.Sizes;\n /* Type of size above ultra breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). /\n @Prop({ reflect: true }) sizeUltra: Space.Sizes;\n\n /* Alignment /\n @Prop({ reflect: true }) justify: Layout.Justify = \"start\";\n\n /* Control how cells items are positioned along a container's cross axis /\n @Prop({ reflect: true }) items: Layout.Items = \"start\";\n\n /* Apply spacing to slotted elements (padding instead of margin) /\n @Prop({ reflect: true }) around: boolean = false;\n\n /* Apply spacing to slotted elements (padding instead of margin, only left) /\n @Prop({ reflect: true }) aroundLeft: boolean = false;\n\n /* Apply spacing to slotted elements (padding instead of margin, only right) /\n @Prop({ reflect: true }) aroundRight: boolean = false;\n\n /* Add border */\n @Prop({ reflect: true }) border: \"none\" \| \"left\" \| \"right\" \| \"left-right\" = \"none\";\n\n render() {\n return (\n <Host>\n <div\n class={{\n \"stzh-hspace\": true,\n [`stzh-hspace--justify-${this.justify}`]: !!this.justify,\n [`stzh-hspace--items-${this.items}`]: !!this.items,\n }}\n >\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/{p-5a8587ab.js → p-7c4e756c.js} RENAMED Viewed

@@ -81,7 +81,7 @@ const StzhIcon = /*@__PURE__*/ proxyCustomElement(class StzhIcon extends H {
         }, 0);
     }
     render() {
-        return (h(Host, { key: '19cb42da1fd943f75c53d42cce691463d2819a1f' }, h("div", { key: '5e4a829c48e645567e6d50812a562f40d69b1baa', class: "stzh-icon", style: { display: this.iconDisplay }, innerHTML: this.svgHtml })));
+        return (h(Host, { key: 'bfdbbe588b9497dff0de28e61250a77a205c3f88' }, h("div", { key: 'cf90b6a37000f6c23dac9bbf93d21d5c2b3a1630', class: "stzh-icon", style: { display: this.iconDisplay }, innerHTML: this.svgHtml })));
     }
     get element() { return this; }
     static get watchers() { return {
@@ -114,4 +114,4 @@ function defineCustomElement() {
 export { StzhIcon as S, defineCustomElement as d };
-//# sourceMappingURL=p-5a8587ab.js.map
+//# sourceMappingURL=p-7c4e756c.js.map

package/dist/components/{p-5a8587ab.js.map → p-7c4e756c.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-~~5a8587ab~~.js","mappings":"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","names":[],"sources":["src/components/stzh-icon/stzh-icon.scss?tag=stzh-icon&encapsulation=shadow","src/components/stzh-icon/stzh-icon.tsx"],"sourcesContent":["/*\n @prop --size: Icon size\n * @prop --color: Icon color\n \n @prop --stzh-icon-size: Global: Default icon size. [See available icon sizes here](/docs/tokens-icons--docs#sizes).\n * @prop --stzh-icon-color: Global: Icon color\n * @prop --stzh-icon-vertical-align: Global: Icon vertical alignment\n /\n\n:host {\n --size: #{iconSize()};\n --color: #{$iconColor};\n --vertical-align: #{$iconVerticalAlign};\n\n display: inline-flex;\n justify-content: center;\n align-items: center;\n color: var(--color);\n vertical-align: var(--vertical-align);\n width: var(--size);\n height: var(--size);\n\n @media print {\n -webkit-print-color-adjust: exact;\n print-color-adjust: exact;\n }\n}\n\n.stzh-icon {\n display: none;\n\n &__svg {\n width: var(--size);\n height: var(--size);\n }\n}\n","import { Component, Host, h, Prop, Watch, State, Element } from \"@stencil/core\";\n\nlet iconCounter = 0;\n\n// Shared cache for all instances to store fetched SVG icons\nconst iconCache = new Map<string, Promise<string>>();\n\n@Component({\n tag: \"stzh-icon\",\n styleUrl: \"stzh-icon.scss\",\n shadow: true,\n})\nexport class StzhIcon {\n /\n Icon which should be displayed\n * See the [icon overview](stzh-components/assets/svgsprites/symbol/sprite.symbol.html) for a list of all available icons.\n /\n @Prop() name: string = \"\";\n\n /\n Hidden icon title for screenreader\n * (usually not needed when e.g. inside links or buttons that have text)\n */\n @Prop({ attribute: \"a11y-title\" }) a11yTitle: string = \"\";\n\n @Element() element: HTMLStzhIconElement;\n\n @State() svgHtml: string = \"\";\n @State() iconDisplay: string = \"none\";\n\n @Watch(\"name\")\n async nameWatcher(name: string) {\n this.iconDisplay = \"none\";\n\n if (name) {\n if (iconCache.has(name)) {\n this.svgHtml = await iconCache.get(name)!;\n this.updateAccessibilityAttributes();\n this.showIcon();\n } else {\n const fetchSvgPromise = fetch(`${window.stzhComponents.pathMedia}/icons/mono/${this.name}.svg`)\n .then(response => {\n if (response.status === 200) {\n return response.text();\n }\n throw new Error(\"Failed to fetch icon\");\n })\n .then(svgString => {\n const parser = new DOMParser();\n const svgDoc = parser.parseFromString(svgString, \"image/svg+xml\");\n const svgElement = svgDoc.documentElement as unknown as SVGElement;\n svgElement.classList.add(\"stzh-icon__svg\");\n\n return svgElement.outerHTML;\n });\n\n iconCache.set(name, fetchSvgPromise);\n\n this.svgHtml = await fetchSvgPromise;\n this.updateAccessibilityAttributes();\n this.showIcon();\n }\n } else {\n this.svgElement = null;\n this.svgHtml = \"\";\n }\n }\n\n @Watch(\"a11yTitle\")\n a11yTitleWatcher(a11yTitle: string) {\n if (!this.svgElement) return;\n\n this.svgElement.setAttribute(\"aria-hidden\", a11yTitle ? \"false\" : \"true\");\n this.svgElement.setAttribute(\"focusable\", a11yTitle ? \"true\" : \"false\");\n this.svgElement.setAttribute(\"aria-labelledby\", a11yTitle ? `${this.iconId}-title` : null);\n\n let title = this.svgElement.querySelector(\"title\");\n\n if (!title) {\n title = document.createElement(\"title\");\n title.id = `${this.iconId}-title`;\n this.svgElement.appendChild(title);\n }\n\n title.innerHTML = a11yTitle;\n this.svgHtml = this.svgElement.outerHTML;\n }\n\n private svgElement: SVGElement \| null;\n private iconId: string;\n\n async componentWillLoad() {\n this.iconId = `stzh-icon-${iconCounter++}`;\n await this.nameWatcher(this.name);\n }\n\n private updateAccessibilityAttributes() {\n this.a11yTitleWatcher(this.a11yTitle);\n }\n\n private showIcon() {\n // for some obscure reason we need to delay showing the icon in safari,\n // otherwise the icon doesn't show up randomly\n // TODO: sometimes the icon still randomely disappears when clicked on page (check on newer safari if problems still occur)\n window.setTimeout(() => {\n this.iconDisplay = \"contents\";\n }, 0);\n }\n\n render() {\n return (\n <Host>\n <div class=\"stzh-icon\" style={{ display: this.iconDisplay }} innerHTML={this.svgHtml}></div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-7c4e756c.js","mappings":"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","names":[],"sources":["src/components/stzh-icon/stzh-icon.scss?tag=stzh-icon&encapsulation=shadow","src/components/stzh-icon/stzh-icon.tsx"],"sourcesContent":["/*\n @prop --size: Icon size\n * @prop --color: Icon color\n \n @prop --stzh-icon-size: Global: Default icon size. [See available icon sizes here](/docs/tokens-icons--docs#sizes).\n * @prop --stzh-icon-color: Global: Icon color\n * @prop --stzh-icon-vertical-align: Global: Icon vertical alignment\n /\n\n:host {\n --size: #{iconSize()};\n --color: #{$iconColor};\n --vertical-align: #{$iconVerticalAlign};\n\n display: inline-flex;\n justify-content: center;\n align-items: center;\n color: var(--color);\n vertical-align: var(--vertical-align);\n width: var(--size);\n height: var(--size);\n\n @media print {\n -webkit-print-color-adjust: exact;\n print-color-adjust: exact;\n }\n}\n\n.stzh-icon {\n display: none;\n\n &__svg {\n width: var(--size);\n height: var(--size);\n }\n}\n","import { Component, Host, h, Prop, Watch, State, Element } from \"@stencil/core\";\n\nlet iconCounter = 0;\n\n// Shared cache for all instances to store fetched SVG icons\nconst iconCache = new Map<string, Promise<string>>();\n\n@Component({\n tag: \"stzh-icon\",\n styleUrl: \"stzh-icon.scss\",\n shadow: true,\n})\nexport class StzhIcon {\n /\n Icon which should be displayed\n * See the [icon overview](stzh-components/assets/svgsprites/symbol/sprite.symbol.html) for a list of all available icons.\n /\n @Prop() name: string = \"\";\n\n /\n Hidden icon title for screenreader\n * (usually not needed when e.g. inside links or buttons that have text)\n */\n @Prop({ attribute: \"a11y-title\" }) a11yTitle: string = \"\";\n\n @Element() element: HTMLStzhIconElement;\n\n @State() svgHtml: string = \"\";\n @State() iconDisplay: string = \"none\";\n\n @Watch(\"name\")\n async nameWatcher(name: string) {\n this.iconDisplay = \"none\";\n\n if (name) {\n if (iconCache.has(name)) {\n this.svgHtml = await iconCache.get(name)!;\n this.updateAccessibilityAttributes();\n this.showIcon();\n } else {\n const fetchSvgPromise = fetch(`${window.stzhComponents.pathMedia}/icons/mono/${this.name}.svg`)\n .then(response => {\n if (response.status === 200) {\n return response.text();\n }\n throw new Error(\"Failed to fetch icon\");\n })\n .then(svgString => {\n const parser = new DOMParser();\n const svgDoc = parser.parseFromString(svgString, \"image/svg+xml\");\n const svgElement = svgDoc.documentElement as unknown as SVGElement;\n svgElement.classList.add(\"stzh-icon__svg\");\n\n return svgElement.outerHTML;\n });\n\n iconCache.set(name, fetchSvgPromise);\n\n this.svgHtml = await fetchSvgPromise;\n this.updateAccessibilityAttributes();\n this.showIcon();\n }\n } else {\n this.svgElement = null;\n this.svgHtml = \"\";\n }\n }\n\n @Watch(\"a11yTitle\")\n a11yTitleWatcher(a11yTitle: string) {\n if (!this.svgElement) return;\n\n this.svgElement.setAttribute(\"aria-hidden\", a11yTitle ? \"false\" : \"true\");\n this.svgElement.setAttribute(\"focusable\", a11yTitle ? \"true\" : \"false\");\n this.svgElement.setAttribute(\"aria-labelledby\", a11yTitle ? `${this.iconId}-title` : null);\n\n let title = this.svgElement.querySelector(\"title\");\n\n if (!title) {\n title = document.createElement(\"title\");\n title.id = `${this.iconId}-title`;\n this.svgElement.appendChild(title);\n }\n\n title.innerHTML = a11yTitle;\n this.svgHtml = this.svgElement.outerHTML;\n }\n\n private svgElement: SVGElement \| null;\n private iconId: string;\n\n async componentWillLoad() {\n this.iconId = `stzh-icon-${iconCounter++}`;\n await this.nameWatcher(this.name);\n }\n\n private updateAccessibilityAttributes() {\n this.a11yTitleWatcher(this.a11yTitle);\n }\n\n private showIcon() {\n // for some obscure reason we need to delay showing the icon in safari,\n // otherwise the icon doesn't show up randomly\n // TODO: sometimes the icon still randomely disappears when clicked on page (check on newer safari if problems still occur)\n window.setTimeout(() => {\n this.iconDisplay = \"contents\";\n }, 0);\n }\n\n render() {\n return (\n <Host>\n <div class=\"stzh-icon\" style={{ display: this.iconDisplay }} innerHTML={this.svgHtml}></div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/{p-820ce57f.js → p-7d7ac6fc.js} RENAMED Viewed

@@ -1,12 +1,12 @@
 import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment, d as Host } from './p-8f01554b.js';
 import { S as StzhInputDescription } from './p-a2148b9d.js';
-import { d as defineCustomElement$7 } from './p-17efbc57.js';
-import { d as defineCustomElement$6 } from './p-8436ccb7.js';
-import { d as defineCustomElement$5 } from './p-b9a50363.js';
-import { d as defineCustomElement$4 } from './p-5a8587ab.js';
-import { d as defineCustomElement$3 } from './p-0ac64574.js';
-import { d as defineCustomElement$2 } from './p-6268e18b.js';
-import { d as defineCustomElement$1 } from './p-9a31aa56.js';
+import { d as defineCustomElement$7 } from './p-dd1c0c0c.js';
+import { d as defineCustomElement$6 } from './p-570cd361.js';
+import { d as defineCustomElement$5 } from './p-c5a240bd.js';
+import { d as defineCustomElement$4 } from './p-7c4e756c.js';
+import { d as defineCustomElement$3 } from './p-111f7e01.js';
+import { d as defineCustomElement$2 } from './p-963d59bf.js';
+import { d as defineCustomElement$1 } from './p-63c4d8c4.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,[stzh-hidden].sc-stzh-chipselect-h{display:none}.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)}[active].sc-stzh-chipselect-h:not([active=false]){--background-color:var(\n    --stzh-chip-active-background-color,\n    var(--stzh-color-primary70)\n  )}[active].is-focused.sc-stzh-chipselect-h{--background-color:var(\n    --stzh-chip-active-background-color,\n    var(--stzh-color-primary70)\n  )}.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);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;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);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:not([active]){--background-color:var(--stzh-color-secondary40)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-chipselect__chip.is-focused.sc-stzh-chipselect:not([active]){--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);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}";
 const StzhChipselectStyle0 = stzhChipselectCss;
@@ -218,11 +218,11 @@ const StzhChipselect = /*@__PURE__*/ proxyCustomElement(class StzhChipselect ext
             "stzh-chipselect--is-required": this.required,
             "stzh-chipselect--has-label-hidden": this.labelHidden,
         };
-        return (h(Host, { key: '726f31149449b63ccc239b4f3d9b85047a071801', "is-invalid": this.invalid || errorUsed }, h("div", { key: '17c9b0f60859ceec61d8bffceb57394718c404a7', 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", { key: '5f717b198396ba191f640ebb4a547d0f3911f087', class: "stzh-chipselect__label", htmlFor: this.id }, this.label ? this.label : h("slot", null), !this.hideOptional && (h("span", { key: 'cbad63d61e9d78a8323fafba3f96eeac644adbb3', class: "stzh-chipselect__marker" }, h("span", { key: 'd9cc199d2935452e305f7848b3b017373b0dbcad', class: "stzh-chipselect__marker-symbol", "aria-hidden": "true" }, this.required
+        return (h(Host, { key: '164faf93243aee65308c7eef392d7ac421617d28', "is-invalid": this.invalid || errorUsed }, h("div", { key: 'c2b3fa892fd219a9843747025efdb8f2a8fa007e', 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", { key: '62f65f4e2f15dd11553a103d91197391c27a6c52', class: "stzh-chipselect__label", htmlFor: this.id }, this.label ? this.label : h("slot", null), !this.hideOptional && (h("span", { key: 'cbf05d5f55392cb8281977a1a18d22d1fa87472b', class: "stzh-chipselect__marker" }, h("span", { key: '06715d220d746904a726718a845a78a33ced63b1', class: "stzh-chipselect__marker-symbol", "aria-hidden": "true" }, this.required
             ? this.localization.$globals.requiredFieldMarker
-            : this.localization.$globals.optionalFieldMarker), h("span", { key: '0c6c571b323c16349872d7b22d512d807e52a2cc', class: "stzh-chipselect__marker-text" }, this.required
+            : this.localization.$globals.optionalFieldMarker), h("span", { key: '87080c43d571d10e18a6324da0e16fe27b795b1d', class: "stzh-chipselect__marker-text" }, this.required
             ? this.localization.$globals.requiredFieldText
-            : this.localization.$globals.optionalFieldText)))), this._data.length > 0 && (h(Fragment, { key: 'e563b931ef38d5e7c0d684f2c600f25fbdadfc03' }, h("div", { key: '93ef094b49fa2c1016bceb68e02b862d902e4413', 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: {
+            : this.localization.$globals.optionalFieldText)))), this._data.length > 0 && (h(Fragment, { key: 'bf3a273b9630c0e55b8d065a5c89e1b67cf711c2' }, h("div", { key: 'a7189bc21bdbd23a557c274c67956cf87280b7bb', 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) ||
@@ -235,7 +235,7 @@ const StzhChipselect = /*@__PURE__*/ proxyCustomElement(class StzhChipselect ext
                     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, { key: 'a1405dc46d7681b491c35adfb052bd9712988678', 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 }))))));
+                : "false", id: `${this.id}-option-${index}`, a11yTabindex: "-1", onClick: () => this.handleChipClick(data, index) })))), h(StzhInputDescription, { key: 'df71c063f7b727aee45ccb891bc4e6188ef3af58', 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 this; }
     static get watchers() { return {
@@ -319,4 +319,4 @@ function defineCustomElement() {
 export { StzhChipselect as S, defineCustomElement as d };
-//# sourceMappingURL=p-820ce57f.js.map
+//# sourceMappingURL=p-7d7ac6fc.js.map

package/dist/components/{p-820ce57f.js.map → p-7d7ac6fc.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-820ce57f.js","mappings":"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","names":[],"sources":["src/components/stzh-chipselect/stzh-chipselect.scss?tag=stzh-chipselect&encapsulation=scoped","src/components/stzh-chipselect/stzh-chipselect.tsx"],"sourcesContent":[":host {\n &[disabled]:not([disabled=\"false\"]) {\n --description-color: #{$formDisabledColor};\n }\n &[active]:not([active=\"false\"]) {\n --background-color: var(\n --stzh-chip-active-background-color,\n #{$colorPrimary70}\n );\n }\n &[active].is-focused {\n --background-color: var(\n --stzh-chip-active-background-color,\n #{$colorPrimary70}\n );\n }\n}\n\n.stzh-chipselect {\n @include input-description;\n\n &__label {\n @include font(\"heavy\");\n @include fontSize(\"micro\");\n @include truncate;\n color: $headingColor;\n display: block;\n margin-bottom: space(\"xsmall\");\n\n &:empty {\n display: none;\n }\n }\n\n &__marker {\n @include fontSize(\"nano\");\n margin-left: calc(-0.25em + #{space(\"xsmall\")});\n }\n\n &__chips {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n border-radius: $buttonBorderRadius;\n gap: space(\"medium\");\n\n &:focus-within {\n .is-focused[active] {\n --background-color: #{$colorPrimary90};\n\n @include highContrast() {\n --background-color: Canvas;\n }\n }\n }\n }\n\n &__chip {\n &.is-focused:not([active]) {\n --background-color: #{$colorSecondary40};\n\n @include highContrast() {\n --background-color: Highlight;\n }\n }\n }\n\n // &__dropdown {\n // @include mq($from: medium) {\n // display: none;\n // }\n // }\n\n // &__description-wrapper {\n // @include mq($to: medium) {\n // display: none;\n // }\n // }\n\n &--has-error &__error,\n &--has-description &__description {\n margin-top: space(\"xsmall\");\n }\n\n /* Hidden label /\n\n &--has-label-hidden &__label {\n @include visuallyhidden;\n }\n\n / Disabled /\n\n &--is-disabled &__chips,\n &--is-disabled &__label {\n cursor: not-allowed;\n }\n}\n","import { Component, Host, h, Element, Prop, Watch, Event, EventEmitter, State, Fragment, Listen } from \"@stencil/core\";\n\nimport {\n StzhChipselectItem,\n StzhChipselectChangeEvent,\n // StzhDropdownChangeEvent\n} from \"../../index\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\n// import { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../index\";\n\nlet chipselectCounter = 0;\n\n/\n @slot - Slot for `stzh-checkbox` elements\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot description-long-title - Slot for long description title (in popover) / instead of descriptionLongTitle or description property\n * @slot error - Slot for error\n /\n@Component({\n tag: \"stzh-chipselect\",\n styleUrl: \"stzh-chipselect.scss\",\n scoped: true,\n})\nexport class StzhChipselect {\n /* Translation strings /\n @Prop() localization: StzhLocaleComponent;\n\n /* The list of chips /\n @Prop() data: string \| StzhChipselectItem[] = [];\n private _data: StzhChipselectItem[] = [];\n // private _dataDropdown: any[] = [];\n\n /* The name of the input element /\n @Prop({ reflect: true }) name: string;\n\n /* Label /\n @Prop() label: string = \"\";\n\n /* Whether label is hidden. /\n @Prop() labelHidden: boolean = false;\n\n /* Multiple /\n @Prop({ mutable: true }) multiple: boolean = false;\n\n /* Value /\n @Prop({ mutable: true }) value: string \| string[] = \"\";\n private _value: string[] = [];\n\n /* Default value (used by reset) /\n @Prop({ mutable: true }) defaultValue: string \| string[] = \"\";\n\n /* Description message (use description slot as alternative) /\n @Prop() description: string;\n\n /* Long description message appearing in a popover (use description-long slot as alternative) /\n @Prop() descriptionLong: string;\n\n /\n Do not use this property. It will be deprecated with the next major release.\n * Long description title appearing in a popover (use description-long-title slot as or description property alternative) /\n @Prop() descriptionLongTitle: string;\n\n /* One or multiple error message (use error slot as alternative) /\n @Prop() error: string \| string[];\n private _error: string[];\n\n /* Invalid status /\n @Prop({ reflect: true }) invalid: boolean = false;\n\n /* Required status /\n @Prop({ reflect: true }) required: boolean = false;\n\n /* Whether all chips are disabled or not /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* Hide `(optional)` label (or use `required` inside form to hide it) /\n @Prop({ reflect: true }) hideOptional: boolean = false;\n\n /* Id for element which describes the input (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) /\n @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n @State() activeFocusOptionIndex: number = 0;\n\n @Element() element: HTMLStzhChipselectElement;\n\n /* Change event /\n @Event() stzhChange: EventEmitter<StzhChipselectChangeEvent>;\n\n @Listen(\"reset\", { target: \"document\" })\n resetListener(event: Event) {\n if ((event.target as HTMLElement).contains(this.element)) {\n requestAnimationFrame(() => {\n this.handleReset();\n });\n }\n }\n\n @Watch(\"value\")\n valueWatcher(newValue: string[] \| string) {\n if (typeof newValue === \"string\") {\n try {\n const parsedValue = JSON.parse(newValue); // since parsing a number like string (i.e. \"1\") will return a number and parsing a boolean like string (i.e. \"true\") will return a boolean we need to check if the parsed value is indeed an array.\n if (Array.isArray(parsedValue)) {\n this._value = parsedValue;\n } else {\n this._value = newValue ? [newValue] : [];\n }\n } catch (ex) {\n this._value = newValue ? [newValue] : [];\n }\n } else {\n this._value = newValue ? newValue : [];\n }\n }\n\n @Watch(\"data\")\n dataWatcher(newValue: StzhChipselectItem[] \| string) {\n if (typeof newValue === \"string\") {\n this._data = JSON.parse(newValue);\n } else {\n this._data = newValue;\n }\n\n this._data.map(dataEntry => {\n if (typeof dataEntry.value !== \"string\") {\n throw new TypeError(\n `${dataEntry.value} is not a string. The data prop only accepts arrays (or stringified arrays), where the value property is a string. Consult the StzhChipselectItem type definition for more information.`,\n );\n }\n });\n // this._dataDropdown = this._data.map((data) => {\n // return {\n // text: data.counter\n // ? `${data.label} (${data.counter})`\n // : data.label,\n // value: data.value\n // }\n // });\n }\n\n @Watch(\"error\")\n errorWatcher(newValue: string \| string[]) {\n if (typeof newValue === \"string\") {\n try {\n this._error = JSON.parse(newValue);\n } catch (e) {\n if (newValue) {\n this._error = [newValue];\n } else {\n this._error = [];\n }\n }\n } else if (newValue) {\n this._error = newValue;\n } else {\n this._error = [];\n }\n }\n\n private id: string;\n private renderPromiseResolve: (value?: unknown) => void;\n\n private waitForNextRender() {\n return new Promise(resolve => (this.renderPromiseResolve = resolve));\n }\n\n private handleReset = async () => {\n this.value = this.defaultValue;\n\n // this.stzhChange.emit({\n // component: \"stzh-chipselect\",\n // value: this.value\n // });\n };\n\n private handleChipClick = async (data: StzhChipselectItem, index: number) => {\n if (this.multiple) {\n if (data.value === \"\" && this._value.length > 0 && !(this._value.length === 1 && this._value[0] === \"\")) {\n this.value = [];\n } else if (data.value !== \"\") {\n this.value = this._value.includes(data.value)\n ? this._value.filter(value => value !== data.value)\n : [...this._value, data.value];\n }\n } else {\n this.value = data.value;\n }\n\n this.activeFocusOptionIndex = index;\n\n await this.waitForNextRender();\n\n this.stzhChange.emit({\n component: \"stzh-chipselect\",\n value: this.multiple ? this._value : this._value[0],\n });\n };\n\n // private handleDropdownChange = async (event: CustomEvent<StzhDropdownChangeEvent>) => {\n // this.value = Array.isArray(event.detail.value) ? event.detail.value[0] : event.detail.value;\n\n // this.activeFocusOptionIndex = this._data.findIndex(data => {\n // return data.value === this.value;\n // });\n\n // await this.waitForNextRender();\n\n // this.stzhChange.emit({\n // component: \"stzh-chipselect\",\n // value: this.value\n // })\n // }\n\n private handleKeydown = (event: KeyboardEvent) => {\n let newActiveIndex: number = null;\n const activeOptionIndex = this.activeFocusOptionIndex;\n\n if (event.key === \"ArrowUp\" \|\| event.key === \"ArrowLeft\") {\n event.preventDefault();\n\n if (activeOptionIndex > 0) {\n newActiveIndex = activeOptionIndex - 1;\n }\n } else if (event.key === \"ArrowDown\" \|\| event.key === \"ArrowRight\") {\n event.preventDefault();\n\n if (activeOptionIndex < this._data.length - 1) {\n newActiveIndex = activeOptionIndex + 1;\n }\n } else if (event.key === \" \" \|\| event.key === \"Enter\") {\n event.preventDefault();\n if (this.multiple) {\n if (\n this._data[activeOptionIndex].value === \"\" &&\n this._value.length > 0 &&\n !(this._value.length === 1 && this._value[0] === \"\")\n ) {\n this.value = [];\n } else if (this._data[activeOptionIndex].value !== \"\") {\n this.value = this._value.includes(this._data[activeOptionIndex].value)\n ? this._value.filter(value => value !== this._data[activeOptionIndex].value)\n : [...this._value, this._data[activeOptionIndex].value];\n }\n } else {\n this.value = this._data[activeOptionIndex].value; //HERE\n }\n this.stzhChange.emit({\n component: \"stzh-chipselect\",\n value: this.value,\n });\n }\n\n if (newActiveIndex !== null) {\n this.activeFocusOptionIndex = newActiveIndex;\n }\n };\n\n componentDidRender() {\n if (this.renderPromiseResolve) {\n this.renderPromiseResolve();\n }\n }\n\n async componentWillLoad() {\n this.id = `stzh-chipselect-${chipselectCounter++}`;\n\n this.dataWatcher(this.data);\n this.errorWatcher(this.error);\n this.valueWatcher(this.value);\n\n this.defaultValue = this.defaultValue \|\| this.value;\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"chipselect\");\n }\n }\n\n render() {\n const descriptionUsed = !!this.description;\n const descriptionLongUsed = !!this.descriptionLong;\n const errorUsed = !!this.error;\n\n const classes = {\n \"stzh-chipselect\": true,\n \"stzh-chipselect--has-description\": descriptionUsed,\n \"stzh-chipselect--has-description-long\": descriptionLongUsed,\n \"stzh-chipselect--has-error\": errorUsed,\n \"stzh-chipselect--is-invalid\": this.invalid \|\| errorUsed,\n \"stzh-chipselect--is-disabled\": this.disabled,\n \"stzh-chipselect--is-required\": this.required,\n \"stzh-chipselect--has-label-hidden\": this.labelHidden,\n };\n\n return (\n <Host is-invalid={this.invalid \|\| errorUsed}>\n <div class={classes}>\n {this.multiple ? (\n <Fragment>\n {this._value.map(value => (\n <input type=\"hidden\" name={this.name} value={value} />\n ))}\n </Fragment>\n ) : (\n <input type=\"hidden\" name={this.name} value={this.value} />\n )}\n\n <label class=\"stzh-chipselect__label\" htmlFor={this.id}>\n {this.label ? this.label : <slot></slot>}\n {!this.hideOptional && (\n <span class=\"stzh-chipselect__marker\">\n <span class=\"stzh-chipselect__marker-symbol\" aria-hidden=\"true\">\n {this.required\n ? this.localization.$globals.requiredFieldMarker\n : this.localization.$globals.optionalFieldMarker}\n </span>\n <span class=\"stzh-chipselect__marker-text\">\n {this.required\n ? this.localization.$globals.requiredFieldText\n : this.localization.$globals.optionalFieldText}\n </span>\n </span>\n )}\n </label>\n\n {this._data.length > 0 && (\n <Fragment>\n <div\n id={this.id}\n class=\"stzh-chipselect__chips\"\n role=\"listbox\"\n tabindex=\"0\"\n aria-multiselectable={this.multiple ? \"true\" : \"false\"}\n aria-activedescendant={`${this.id}-option-${this.activeFocusOptionIndex}`}\n aria-describedby={`${this.id}-description ${this.a11yDescribedby}`}\n onKeyDown={this.handleKeydown}\n >\n {this._data.map((data, index) => (\n <stzh-chip\n role=\"option\"\n class={{\n \"stzh-chipselect__chip\": true,\n \"is-focused\": this.activeFocusOptionIndex === index,\n }}\n label={data.label}\n counter={data.counter}\n icon={data.icon}\n type={data.type}\n inverted={data.inverted}\n variant={data.variant}\n size={data.size \|\| \"small\"}\n disabled={this.disabled \|\| data.disabled}\n active={\n this._value.includes(data.value) \|\|\n (!this.multiple && !data.value && (this._value.length === 0 \|\| this._value[0] === \"\")) \|\|\n (!data.value &&\n this.multiple &&\n (this._value.length === 0 \|\| (this._value.length === 1 && this._value[0] === \"\")))\n }\n aria-selected={\n this._value.includes(data.value) \|\|\n (!this.multiple && !data.value && (this._value.length === 0 \|\| this._value[0] === \"\")) \|\|\n (!data.value &&\n this.multiple &&\n (this._value.length === 0 \|\| (this._value.length === 1 && this._value[0] === \"\")))\n ? \"true\"\n : \"false\"\n }\n id={`${this.id}-option-${index}`}\n a11yTabindex=\"-1\"\n onClick={() => this.handleChipClick(data, index)}\n ></stzh-chip>\n ))}\n </div>\n\n <StzhInputDescription\n classPrefix=\"stzh-chipselect\"\n id={`${this.id}-description`}\n error={this._error}\n description={this.description}\n descriptionLong={this.descriptionLong}\n descriptionLongTitle={this.descriptionLongTitle}\n descriptionLongUsed={descriptionLongUsed}\n moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n />\n\n {/ <stzh-dropdown\n class=\"stzh-chipselect__dropdown\"\n multiple={this.multiple}\n disabled={this.disabled}\n error={this._error}\n description={this.description}\n descriptionLong={this.descriptionLong}\n required={this.required}\n invalid={this.invalid}\n items={[this.value]}\n label={this.label}\n labelHidden={this.labelHidden}\n options={this._dataDropdown}\n hideOptional={this.hideOptional}\n onStzhChange={this.handleDropdownChange}\n ></stzh-dropdown> */}\n </Fragment>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-7d7ac6fc.js","mappings":"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","names":[],"sources":["src/components/stzh-chipselect/stzh-chipselect.scss?tag=stzh-chipselect&encapsulation=scoped","src/components/stzh-chipselect/stzh-chipselect.tsx"],"sourcesContent":[":host {\n &[disabled]:not([disabled=\"false\"]) {\n --description-color: #{$formDisabledColor};\n }\n &[active]:not([active=\"false\"]) {\n --background-color: var(\n --stzh-chip-active-background-color,\n #{$colorPrimary70}\n );\n }\n &[active].is-focused {\n --background-color: var(\n --stzh-chip-active-background-color,\n #{$colorPrimary70}\n );\n }\n}\n\n.stzh-chipselect {\n @include input-description;\n\n &__label {\n @include font(\"heavy\");\n @include fontSize(\"micro\");\n @include truncate;\n color: $headingColor;\n display: block;\n margin-bottom: space(\"xsmall\");\n\n &:empty {\n display: none;\n }\n }\n\n &__marker {\n @include fontSize(\"nano\");\n margin-left: calc(-0.25em + #{space(\"xsmall\")});\n }\n\n &__chips {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n border-radius: $buttonBorderRadius;\n gap: space(\"medium\");\n\n &:focus-within {\n .is-focused[active] {\n --background-color: #{$colorPrimary90};\n\n @include highContrast() {\n --background-color: Canvas;\n }\n }\n }\n }\n\n &__chip {\n &.is-focused:not([active]) {\n --background-color: #{$colorSecondary40};\n\n @include highContrast() {\n --background-color: Highlight;\n }\n }\n }\n\n // &__dropdown {\n // @include mq($from: medium) {\n // display: none;\n // }\n // }\n\n // &__description-wrapper {\n // @include mq($to: medium) {\n // display: none;\n // }\n // }\n\n &--has-error &__error,\n &--has-description &__description {\n margin-top: space(\"xsmall\");\n }\n\n /* Hidden label /\n\n &--has-label-hidden &__label {\n @include visuallyhidden;\n }\n\n / Disabled /\n\n &--is-disabled &__chips,\n &--is-disabled &__label {\n cursor: not-allowed;\n }\n}\n","import { Component, Host, h, Element, Prop, Watch, Event, EventEmitter, State, Fragment, Listen } from \"@stencil/core\";\n\nimport {\n StzhChipselectItem,\n StzhChipselectChangeEvent,\n // StzhDropdownChangeEvent\n} from \"../../index\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\n// import { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../index\";\n\nlet chipselectCounter = 0;\n\n/\n @slot - Slot for `stzh-checkbox` elements\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot description-long-title - Slot for long description title (in popover) / instead of descriptionLongTitle or description property\n * @slot error - Slot for error\n /\n@Component({\n tag: \"stzh-chipselect\",\n styleUrl: \"stzh-chipselect.scss\",\n scoped: true,\n})\nexport class StzhChipselect {\n /* Translation strings /\n @Prop() localization: StzhLocaleComponent;\n\n /* The list of chips /\n @Prop() data: string \| StzhChipselectItem[] = [];\n private _data: StzhChipselectItem[] = [];\n // private _dataDropdown: any[] = [];\n\n /* The name of the input element /\n @Prop({ reflect: true }) name: string;\n\n /* Label /\n @Prop() label: string = \"\";\n\n /* Whether label is hidden. /\n @Prop() labelHidden: boolean = false;\n\n /* Multiple /\n @Prop({ mutable: true }) multiple: boolean = false;\n\n /* Value /\n @Prop({ mutable: true }) value: string \| string[] = \"\";\n private _value: string[] = [];\n\n /* Default value (used by reset) /\n @Prop({ mutable: true }) defaultValue: string \| string[] = \"\";\n\n /* Description message (use description slot as alternative) /\n @Prop() description: string;\n\n /* Long description message appearing in a popover (use description-long slot as alternative) /\n @Prop() descriptionLong: string;\n\n /\n Do not use this property. It will be deprecated with the next major release.\n * Long description title appearing in a popover (use description-long-title slot as or description property alternative) /\n @Prop() descriptionLongTitle: string;\n\n /* One or multiple error message (use error slot as alternative) /\n @Prop() error: string \| string[];\n private _error: string[];\n\n /* Invalid status /\n @Prop({ reflect: true }) invalid: boolean = false;\n\n /* Required status /\n @Prop({ reflect: true }) required: boolean = false;\n\n /* Whether all chips are disabled or not /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* Hide `(optional)` label (or use `required` inside form to hide it) /\n @Prop({ reflect: true }) hideOptional: boolean = false;\n\n /* Id for element which describes the input (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) /\n @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n @State() activeFocusOptionIndex: number = 0;\n\n @Element() element: HTMLStzhChipselectElement;\n\n /* Change event /\n @Event() stzhChange: EventEmitter<StzhChipselectChangeEvent>;\n\n @Listen(\"reset\", { target: \"document\" })\n resetListener(event: Event) {\n if ((event.target as HTMLElement).contains(this.element)) {\n requestAnimationFrame(() => {\n this.handleReset();\n });\n }\n }\n\n @Watch(\"value\")\n valueWatcher(newValue: string[] \| string) {\n if (typeof newValue === \"string\") {\n try {\n const parsedValue = JSON.parse(newValue); // since parsing a number like string (i.e. \"1\") will return a number and parsing a boolean like string (i.e. \"true\") will return a boolean we need to check if the parsed value is indeed an array.\n if (Array.isArray(parsedValue)) {\n this._value = parsedValue;\n } else {\n this._value = newValue ? [newValue] : [];\n }\n } catch (ex) {\n this._value = newValue ? [newValue] : [];\n }\n } else {\n this._value = newValue ? newValue : [];\n }\n }\n\n @Watch(\"data\")\n dataWatcher(newValue: StzhChipselectItem[] \| string) {\n if (typeof newValue === \"string\") {\n this._data = JSON.parse(newValue);\n } else {\n this._data = newValue;\n }\n\n this._data.map(dataEntry => {\n if (typeof dataEntry.value !== \"string\") {\n throw new TypeError(\n `${dataEntry.value} is not a string. The data prop only accepts arrays (or stringified arrays), where the value property is a string. Consult the StzhChipselectItem type definition for more information.`,\n );\n }\n });\n // this._dataDropdown = this._data.map((data) => {\n // return {\n // text: data.counter\n // ? `${data.label} (${data.counter})`\n // : data.label,\n // value: data.value\n // }\n // });\n }\n\n @Watch(\"error\")\n errorWatcher(newValue: string \| string[]) {\n if (typeof newValue === \"string\") {\n try {\n this._error = JSON.parse(newValue);\n } catch (e) {\n if (newValue) {\n this._error = [newValue];\n } else {\n this._error = [];\n }\n }\n } else if (newValue) {\n this._error = newValue;\n } else {\n this._error = [];\n }\n }\n\n private id: string;\n private renderPromiseResolve: (value?: unknown) => void;\n\n private waitForNextRender() {\n return new Promise(resolve => (this.renderPromiseResolve = resolve));\n }\n\n private handleReset = async () => {\n this.value = this.defaultValue;\n\n // this.stzhChange.emit({\n // component: \"stzh-chipselect\",\n // value: this.value\n // });\n };\n\n private handleChipClick = async (data: StzhChipselectItem, index: number) => {\n if (this.multiple) {\n if (data.value === \"\" && this._value.length > 0 && !(this._value.length === 1 && this._value[0] === \"\")) {\n this.value = [];\n } else if (data.value !== \"\") {\n this.value = this._value.includes(data.value)\n ? this._value.filter(value => value !== data.value)\n : [...this._value, data.value];\n }\n } else {\n this.value = data.value;\n }\n\n this.activeFocusOptionIndex = index;\n\n await this.waitForNextRender();\n\n this.stzhChange.emit({\n component: \"stzh-chipselect\",\n value: this.multiple ? this._value : this._value[0],\n });\n };\n\n // private handleDropdownChange = async (event: CustomEvent<StzhDropdownChangeEvent>) => {\n // this.value = Array.isArray(event.detail.value) ? event.detail.value[0] : event.detail.value;\n\n // this.activeFocusOptionIndex = this._data.findIndex(data => {\n // return data.value === this.value;\n // });\n\n // await this.waitForNextRender();\n\n // this.stzhChange.emit({\n // component: \"stzh-chipselect\",\n // value: this.value\n // })\n // }\n\n private handleKeydown = (event: KeyboardEvent) => {\n let newActiveIndex: number = null;\n const activeOptionIndex = this.activeFocusOptionIndex;\n\n if (event.key === \"ArrowUp\" \|\| event.key === \"ArrowLeft\") {\n event.preventDefault();\n\n if (activeOptionIndex > 0) {\n newActiveIndex = activeOptionIndex - 1;\n }\n } else if (event.key === \"ArrowDown\" \|\| event.key === \"ArrowRight\") {\n event.preventDefault();\n\n if (activeOptionIndex < this._data.length - 1) {\n newActiveIndex = activeOptionIndex + 1;\n }\n } else if (event.key === \" \" \|\| event.key === \"Enter\") {\n event.preventDefault();\n if (this.multiple) {\n if (\n this._data[activeOptionIndex].value === \"\" &&\n this._value.length > 0 &&\n !(this._value.length === 1 && this._value[0] === \"\")\n ) {\n this.value = [];\n } else if (this._data[activeOptionIndex].value !== \"\") {\n this.value = this._value.includes(this._data[activeOptionIndex].value)\n ? this._value.filter(value => value !== this._data[activeOptionIndex].value)\n : [...this._value, this._data[activeOptionIndex].value];\n }\n } else {\n this.value = this._data[activeOptionIndex].value; //HERE\n }\n this.stzhChange.emit({\n component: \"stzh-chipselect\",\n value: this.value,\n });\n }\n\n if (newActiveIndex !== null) {\n this.activeFocusOptionIndex = newActiveIndex;\n }\n };\n\n componentDidRender() {\n if (this.renderPromiseResolve) {\n this.renderPromiseResolve();\n }\n }\n\n async componentWillLoad() {\n this.id = `stzh-chipselect-${chipselectCounter++}`;\n\n this.dataWatcher(this.data);\n this.errorWatcher(this.error);\n this.valueWatcher(this.value);\n\n this.defaultValue = this.defaultValue \|\| this.value;\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"chipselect\");\n }\n }\n\n render() {\n const descriptionUsed = !!this.description;\n const descriptionLongUsed = !!this.descriptionLong;\n const errorUsed = !!this.error;\n\n const classes = {\n \"stzh-chipselect\": true,\n \"stzh-chipselect--has-description\": descriptionUsed,\n \"stzh-chipselect--has-description-long\": descriptionLongUsed,\n \"stzh-chipselect--has-error\": errorUsed,\n \"stzh-chipselect--is-invalid\": this.invalid \|\| errorUsed,\n \"stzh-chipselect--is-disabled\": this.disabled,\n \"stzh-chipselect--is-required\": this.required,\n \"stzh-chipselect--has-label-hidden\": this.labelHidden,\n };\n\n return (\n <Host is-invalid={this.invalid \|\| errorUsed}>\n <div class={classes}>\n {this.multiple ? (\n <Fragment>\n {this._value.map(value => (\n <input type=\"hidden\" name={this.name} value={value} />\n ))}\n </Fragment>\n ) : (\n <input type=\"hidden\" name={this.name} value={this.value} />\n )}\n\n <label class=\"stzh-chipselect__label\" htmlFor={this.id}>\n {this.label ? this.label : <slot></slot>}\n {!this.hideOptional && (\n <span class=\"stzh-chipselect__marker\">\n <span class=\"stzh-chipselect__marker-symbol\" aria-hidden=\"true\">\n {this.required\n ? this.localization.$globals.requiredFieldMarker\n : this.localization.$globals.optionalFieldMarker}\n </span>\n <span class=\"stzh-chipselect__marker-text\">\n {this.required\n ? this.localization.$globals.requiredFieldText\n : this.localization.$globals.optionalFieldText}\n </span>\n </span>\n )}\n </label>\n\n {this._data.length > 0 && (\n <Fragment>\n <div\n id={this.id}\n class=\"stzh-chipselect__chips\"\n role=\"listbox\"\n tabindex=\"0\"\n aria-multiselectable={this.multiple ? \"true\" : \"false\"}\n aria-activedescendant={`${this.id}-option-${this.activeFocusOptionIndex}`}\n aria-describedby={`${this.id}-description ${this.a11yDescribedby}`}\n onKeyDown={this.handleKeydown}\n >\n {this._data.map((data, index) => (\n <stzh-chip\n role=\"option\"\n class={{\n \"stzh-chipselect__chip\": true,\n \"is-focused\": this.activeFocusOptionIndex === index,\n }}\n label={data.label}\n counter={data.counter}\n icon={data.icon}\n type={data.type}\n inverted={data.inverted}\n variant={data.variant}\n size={data.size \|\| \"small\"}\n disabled={this.disabled \|\| data.disabled}\n active={\n this._value.includes(data.value) \|\|\n (!this.multiple && !data.value && (this._value.length === 0 \|\| this._value[0] === \"\")) \|\|\n (!data.value &&\n this.multiple &&\n (this._value.length === 0 \|\| (this._value.length === 1 && this._value[0] === \"\")))\n }\n aria-selected={\n this._value.includes(data.value) \|\|\n (!this.multiple && !data.value && (this._value.length === 0 \|\| this._value[0] === \"\")) \|\|\n (!data.value &&\n this.multiple &&\n (this._value.length === 0 \|\| (this._value.length === 1 && this._value[0] === \"\")))\n ? \"true\"\n : \"false\"\n }\n id={`${this.id}-option-${index}`}\n a11yTabindex=\"-1\"\n onClick={() => this.handleChipClick(data, index)}\n ></stzh-chip>\n ))}\n </div>\n\n <StzhInputDescription\n classPrefix=\"stzh-chipselect\"\n id={`${this.id}-description`}\n error={this._error}\n description={this.description}\n descriptionLong={this.descriptionLong}\n descriptionLongTitle={this.descriptionLongTitle}\n descriptionLongUsed={descriptionLongUsed}\n moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n />\n\n {/ <stzh-dropdown\n class=\"stzh-chipselect__dropdown\"\n multiple={this.multiple}\n disabled={this.disabled}\n error={this._error}\n description={this.description}\n descriptionLong={this.descriptionLong}\n required={this.required}\n invalid={this.invalid}\n items={[this.value]}\n label={this.label}\n labelHidden={this.labelHidden}\n options={this._dataDropdown}\n hideOptional={this.hideOptional}\n onStzhChange={this.handleDropdownChange}\n ></stzh-dropdown> */}\n </Fragment>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/{p-604af41f.js → p-8cefcb61.js} RENAMED Viewed

@@ -2,8 +2,8 @@ import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-
 import { w as waitForEvent } from './p-70ec7e79.js';
 import { s as stopAnimations, a as animateTo, b as shimKeyframesAutoValues } from './p-2c0bec3e.js';
 import { h as hasSlot } from './p-289f5de2.js';
-import { d as defineCustomElement$2 } from './p-17efbc57.js';
-import { d as defineCustomElement$1 } from './p-5a8587ab.js';
+import { d as defineCustomElement$2 } from './p-dd1c0c0c.js';
+import { d as defineCustomElement$1 } from './p-7c4e756c.js';
 const stzhAccordionItemCss = ":host{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;}:host[hidden],:host[stzh-hidden]{display:none}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::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)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{--trigger-size:1.125rem;--trigger-color:currentColor;--content-background:var(--stzh-accordion-content-background);--icon-size:var(--stzh-icon-size);--button-color:var(--stzh-accordion-button-color, var(--stzh-color-primary70));--button-background-color:var(\n    --stzh-accordion-button-background-color,\n    var(--stzh-color-secondary30)\n  );--button-background-color-is-open:var(\n    --stzh-accordion-button-background-color-is-open,\n    var(--stzh-color-secondary30)\n  );--hover-button-color:var(--button-color);--hover-button-background-color:var(\n    --stzh-accordion-button-hover-background-color,\n    var(--stzh-color-secondary40)\n  );--hover-trigger-color:var(--trigger-color);--transition-duration:200ms}@media print{:host{page-break-inside:avoid;break-inside:avoid}}@media (forced-colors: active), (-ms-high-contrast: active){:host{--trigger-color:CanvasText;--hover-trigger-color:CanvasText}}:host(:where([is-variant=table])){--trigger-size:var(--stzh-icon-size);--content-background:var(--stzh-color-grey10);--button-background-color:var(--stzh-color-grey20);--trigger-color:var(--stzh-color-black);--hover-button-background-color:var(--stzh-color-grey30)}@media (forced-colors: active), (-ms-high-contrast: active){:host(:where([is-variant=table])){--trigger-color:CanvasText;--hover-trigger-color:CanvasText}}:host(:where([disabled]:not([disabled=false]))){--button-color:var(--stzh-color-grey80);--button-background-color:var(--stzh-color-grey20);--trigger-color:var(--stzh-color-grey80);--hover-button-color:var(--button-color);--hover-button-background-color:var(--button-background-color);--hover-trigger-color:var(--trigger-color)}.stzh-accordion-item{}.stzh-accordion-item__heading{position:relative;margin:0}.stzh-accordion-item__button{font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing);padding-top:var(--stzh-space-medium);padding-bottom:var(--stzh-space-medium);font-family:inherit;width:100%;appearance:none;display:flex;align-items:center;min-height:3.75rem;color:var(--button-color);background-color:var(--button-background-color);text-align:left;border:none;transition-property:background-color;transition-duration:var(--transition-duration);cursor:pointer}@media screen and (min-width: 900px){.stzh-accordion-item__button{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}@media screen and (min-width: 600px){.stzh-accordion-item__button{padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-accordion-item__button{padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-accordion-item__button{padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){.stzh-accordion-item__button{padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-accordion-item__button{padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-accordion-item__button{padding-bottom:var(--stzh-space-xxlarge)}}@media (prefers-reduced-motion: reduce){.stzh-accordion-item__button{transition:none}}.stzh-accordion-item__button:hover{color:var(--hover-button-color);background-color:var(--hover-button-background-color)}.stzh-accordion-item__button,.stzh-accordion-item__content-inner{padding-left:var(--stzh-space-medium);padding-right:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-accordion-item__button,.stzh-accordion-item__content-inner{padding-left:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-accordion-item__button,.stzh-accordion-item__content-inner{padding-left:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-accordion-item__button,.stzh-accordion-item__content-inner{padding-left:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){.stzh-accordion-item__button,.stzh-accordion-item__content-inner{padding-right:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-accordion-item__button,.stzh-accordion-item__content-inner{padding-right:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-accordion-item__button,.stzh-accordion-item__content-inner{padding-right:var(--stzh-space-xxlarge)}}.stzh-accordion-item__button-text{flex-grow:1}.stzh-accordion-item__button-icon.is-default{position:relative;display:block;width:var(--trigger-size);height:var(--trigger-size);margin-left:var(--stzh-space-medium)}.stzh-accordion-item__button-icon.is-default::before,.stzh-accordion-item__button-icon.is-default::after{position:absolute;top:50%;left:50%;content:\"\";display:block;width:var(--trigger-size);height:0.15625rem;transition-property:transform, background-color;transition-duration:var(--transition-duration);transform-origin:top left;background-color:var(--trigger-color)}@media (prefers-reduced-motion: reduce){.stzh-accordion-item__button-icon.is-default::before,.stzh-accordion-item__button-icon.is-default::after{transition:none}}.stzh-accordion-item__button-icon.is-default::before{transform:rotate(180deg) translate(-50%, -50%)}.stzh-accordion-item__button-icon.is-default::after{transform:rotate(90deg) translate(-50%, -50%)}.stzh-accordion-item__button-icon.is-table{--size:var(--trigger-size);transition-property:transform, color;transition-duration:var(--transition-duration);color:var(--trigger-color)}@media (prefers-reduced-motion: reduce){.stzh-accordion-item__button-icon.is-table{transition:none}}.stzh-accordion-item__button:hover .stzh-accordion-item__button-icon.is-default::before,.stzh-accordion-item__button:hover .stzh-accordion-item__button-icon.is-default::after{background-color:var(--hover-trigger-color)}.stzh-accordion-item__button:hover .stzh-accordion-item__button-icon.is-table{color:var(--hover-trigger-color)}.stzh-accordion-item__content{overflow:hidden;background-color:var(--content-background)}@media print{.stzh-accordion-item__content{height:auto !important;overflow:visible !important;display:block !important}}.stzh-accordion-item__content-inner{padding-top:var(--stzh-space-large);padding-bottom:var(--stzh-space-large)}@media screen and (min-width: 600px){.stzh-accordion-item__content-inner{padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px){.stzh-accordion-item__content-inner{padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-accordion-item__content-inner{padding-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 600px){.stzh-accordion-item__content-inner{padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px){.stzh-accordion-item__content-inner{padding-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-accordion-item__content-inner{padding-bottom:var(--stzh-space-xxxlarge)}}.stzh-accordion-item__icon-wrapper{--stzh-icon-size:var(--icon-size);align-self:flex-start}.stzh-accordion-item__badge{position:absolute;right:-0.3125rem;top:-0.3125rem}.stzh-accordion-item__description{font-size:var(--stzh-font-curve-caption-default-font-size, var(--stzh-font-nano-font-size));line-height:var(--stzh-font-curve-caption-default-text-line-height, var(--stzh-font-nano-text-line-height))}@media screen and (min-width: 900px){.stzh-accordion-item__description{font-size:var(--stzh-font-curve-caption-medium-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-caption-medium-text-line-height, var(--stzh-font-micro-text-line-height))}}.stzh-accordion-item__heading-text,.stzh-accordion-item__description,.stzh-accordion-item__subtitle{display:block}.stzh-accordion-item__subtitle{font-size:var(--stzh-font-curve-p2-default-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-p2-default-text-line-height, var(--stzh-font-micro-text-line-height))}@media screen and (min-width: 900px){.stzh-accordion-item__subtitle{font-size:var(--stzh-font-curve-p2-medium-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p2-medium-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p2-medium-text-letter-spacing)}}.stzh-accordion-item--has-icon .stzh-accordion-item__icon-wrapper{margin-right:var(--stzh-space-xsmall)}.stzh-accordion-item--title .stzh-accordion-item__heading-text,.stzh-accordion-item--has-subtitle .stzh-accordion-item__heading-text{font-family:var(--stzh-font-family-title);font-weight:var(--stzh-font-weight-title);font-style:var(--stzh-font-style-title);font-size:var(--stzh-font-curve-h3-default-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h3-default-heading-line-height, var(--stzh-font-centi-heading-line-height));letter-spacing:var(--stzh-font-curve-h3-default-heading-letter-spacing)}@media screen and (min-width: 600px){.stzh-accordion-item--title .stzh-accordion-item__heading-text,.stzh-accordion-item--has-subtitle .stzh-accordion-item__heading-text{font-size:var(--stzh-font-curve-h3-small-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h3-small-heading-line-height, var(--stzh-font-deci-heading-line-height));letter-spacing:var(--stzh-font-curve-h3-small-heading-letter-spacing)}}@media screen and (min-width: 900px){.stzh-accordion-item--title .stzh-accordion-item__heading-text,.stzh-accordion-item--has-subtitle .stzh-accordion-item__heading-text{font-size:var(--stzh-font-curve-h3-medium-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h3-medium-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h3-medium-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}@media screen and (min-width: 1600px){.stzh-accordion-item--title .stzh-accordion-item__heading-text,.stzh-accordion-item--has-subtitle .stzh-accordion-item__heading-text{font-size:var(--stzh-font-curve-h3-ultra-font-size, var(--stzh-font-hecto-font-size));line-height:var(--stzh-font-curve-h3-ultra-heading-line-height, var(--stzh-font-hecto-text-line-height));letter-spacing:var(--stzh-font-curve-h3-ultra-heading-letter-spacing, var(--stzh-font-hecto-text-letter-spacing))}}.stzh-accordion-item--title .stzh-accordion-item__subtitle:not(:empty)+.stzh-accordion-item__heading-text,.stzh-accordion-item--has-subtitle .stzh-accordion-item__subtitle:not(:empty)+.stzh-accordion-item__heading-text{margin-top:var(--stzh-space-xxsmall)}@media screen and (min-width: 900px){.stzh-accordion-item--title .stzh-accordion-item__subtitle:not(:empty)+.stzh-accordion-item__heading-text,.stzh-accordion-item--has-subtitle .stzh-accordion-item__subtitle:not(:empty)+.stzh-accordion-item__heading-text{margin-top:var(--stzh-space-xsmall)}}@media screen and (min-width: 1260px){.stzh-accordion-item--title .stzh-accordion-item__subtitle:not(:empty)+.stzh-accordion-item__heading-text,.stzh-accordion-item--has-subtitle .stzh-accordion-item__subtitle:not(:empty)+.stzh-accordion-item__heading-text{margin-top:var(--stzh-space-small)}}@media screen and (min-width: 900px){.stzh-accordion-item--title .stzh-accordion-item__subtitle:not(:empty)+.stzh-accordion-item__heading-text,.stzh-accordion-item--has-subtitle .stzh-accordion-item__subtitle:not(:empty)+.stzh-accordion-item__heading-text{margin-top:var(--stzh-space-xsmall)}}.stzh-accordion-item--is-open .stzh-accordion-item__button{background-color:var(--button-background-color-is-open)}.stzh-accordion-item--is-open .stzh-accordion-item__button-icon.is-default::before,.stzh-accordion-item--is-open .stzh-accordion-item__button-icon.is-default::after{transform:rotate(0) translate(-50%, -50%)}.stzh-accordion-item--is-open .stzh-accordion-item__button-icon.is-table{transform:rotate(180deg)}.stzh-accordion-item--table .stzh-accordion-item__button,.stzh-accordion-item--table .stzh-accordion-item__content-inner{padding-left:var(--stzh-space-medium);padding-right:var(--stzh-space-medium)}.stzh-accordion-item__button{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);padding-top:var(--stzh-space-medium);padding-bottom:var(--stzh-space-medium);min-height:3.5rem}.stzh-accordion-item--table .stzh-accordion-item__content-inner{padding-top:var(--stzh-space-xxsmall);padding-bottom:var(--stzh-space-medium)}@media screen and (min-width: 900px){.stzh-accordion-item--table .stzh-accordion-item__content-inner{padding-top:var(--stzh-space-xsmall)}}@media screen and (min-width: 1260px){.stzh-accordion-item--table .stzh-accordion-item__content-inner{padding-top:var(--stzh-space-small)}}@media screen and (min-width: 600px){.stzh-accordion-item--table .stzh-accordion-item__content-inner{padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-accordion-item--table .stzh-accordion-item__content-inner{padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-accordion-item--table .stzh-accordion-item__content-inner{padding-bottom:var(--stzh-space-xxlarge)}}.stzh-accordion-item--table .stzh-accordion-item__heading-text{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy)}.stzh-accordion-item--is-disabled .stzh-accordion-item__button{cursor:not-allowed}";
 const StzhAccordionItemStyle0 = stzhAccordionItemCss;
@@ -260,7 +260,7 @@ const StzhAccordionItem = /*@__PURE__*/ proxyCustomElement(class StzhAccordionIt
             "stzh-accordion-item--is-disabled": this.disabled,
             [`stzh-accordion-item--${this._variant}`]: !!this._variant,
         };
-        return (h(Host, { key: '61514fa28a1ca259af4ff2de3d72275e95239fc2', tabindex: this.disabled ? null : this.rootTabindex, "is-variant": this._variant }, h("div", { key: 'fa26849b917c3a286414c4ad4cb0d1c18bed001c', class: classes }, h(Heading, { key: 'e1c8c628271db445f973a6c37ded9617b046eb87', id: `${this.accordionItemId}-header`, class: "stzh-accordion-item__heading", onClick: this.handleHeaderClick }, h("button", { key: '425d569fe25e1aac4bd94f5df74abb3770991d28', ref: el => (this.buttonElement = el), class: "stzh-accordion-item__button", "aria-controls": `${this.accordionItemId}-content`, "aria-expanded": `${this.open ? "true" : "false"}`, disabled: this.disabled, onFocus: this.onFocus, onBlur: this.onBlur, onKeyDown: this.onButtonKeydown, type: "button", "s-object-id": this.analyticsId || this.heading }, h("span", { key: '707db12ff7972c66db1839e60d9c6ca9b354e462', class: "stzh-accordion-item__icon-wrapper", ref: el => (this.iconWrapperElement = el) }, this.icon ? (h("stzh-icon", { class: "stzh-accordion-item__icon", name: this.icon })) : (h("slot", { name: "icon" }))), h("span", { key: 'ce9bff58b26adf7d53c79cac0579d81ea512ee34', class: "stzh-accordion-item__button-text" }, h("span", { key: '89c14682bec0972a14133642cff2435185c31ff3', class: "stzh-accordion-item__subtitle" }, this.subtitle), h("span", { key: '6de37e921ff86fa89ed020c9cfaa460f94d3c402', class: "stzh-accordion-item__heading-text" }, this.heading), h("span", { key: 'deadfc4cba8a93d4db9d01b5414940e79e1fc60c', class: "stzh-accordion-item__description" }, this.description)), this._variant === "table" ? (h("stzh-icon", { name: "angle-down", class: "stzh-accordion-item__button-icon is-table" })) : (h("span", { class: "stzh-accordion-item__button-icon is-default" })), (this.badge || this.badgeEmpty) && (h("stzh-badge", { key: 'd57f5c7ca47f533c5db226f9992d29850916f1c5', class: "stzh-accordion-item__badge", label: this.badge, type: this.badgeType })))), h("div", { key: '0df6c426a4b9954eeb892024d45c9b00403f8f9a', id: `${this.accordionItemId}-content`, ref: el => (this.bodyElement = el), class: "stzh-accordion-item__content", "aria-labelledby": `${this.accordionItemId}-header`, role: "region", onKeyDown: this.onContentKeydown }, h("div", { key: 'ea23df78bab0aa4e6a2188f138d9192f9b72b4b3', class: "stzh-accordion-item__content-inner" }, h("slot", { key: 'b253b9f2d883f2e58265600a5c76ab6c9108a1f4' }))))));
+        return (h(Host, { key: 'a8c56e353d7902a77917eb6efec2ced839e66bcc', tabindex: this.disabled ? null : this.rootTabindex, "is-variant": this._variant }, h("div", { key: '739947ef46cd567c819aef178de914ba41593879', class: classes }, h(Heading, { key: '43df5b0e8314df3b4a84e336fbcf0b2f6d362d58', id: `${this.accordionItemId}-header`, class: "stzh-accordion-item__heading", onClick: this.handleHeaderClick }, h("button", { key: 'a86ce8dda8443f36614db81c4b697969688fa22e', ref: el => (this.buttonElement = el), class: "stzh-accordion-item__button", "aria-controls": `${this.accordionItemId}-content`, "aria-expanded": `${this.open ? "true" : "false"}`, disabled: this.disabled, onFocus: this.onFocus, onBlur: this.onBlur, onKeyDown: this.onButtonKeydown, type: "button", "s-object-id": this.analyticsId || this.heading }, h("span", { key: '536a30b9b0de27bfd77057f1b8f7621dd60f8b4c', class: "stzh-accordion-item__icon-wrapper", ref: el => (this.iconWrapperElement = el) }, this.icon ? (h("stzh-icon", { class: "stzh-accordion-item__icon", name: this.icon })) : (h("slot", { name: "icon" }))), h("span", { key: '3ddc1b31fe83b63306a7a46fd789361bed08e0b4', class: "stzh-accordion-item__button-text" }, h("span", { key: '552a2947ed3a485acf1c86bcd013be344c0ef6fc', class: "stzh-accordion-item__subtitle" }, this.subtitle), h("span", { key: 'b4adaec387a75f405fa7ef34b4b88126f134143b', class: "stzh-accordion-item__heading-text" }, this.heading), h("span", { key: '6890cabc94d0f53a4288eb67f9e6b160ae462ee8', class: "stzh-accordion-item__description" }, this.description)), this._variant === "table" ? (h("stzh-icon", { name: "angle-down", class: "stzh-accordion-item__button-icon is-table" })) : (h("span", { class: "stzh-accordion-item__button-icon is-default" })), (this.badge || this.badgeEmpty) && (h("stzh-badge", { key: '6418a9bd2bfa948525154bbc7065a68d38ebd20c', class: "stzh-accordion-item__badge", label: this.badge, type: this.badgeType })))), h("div", { key: '55b11d742681dea18161d5c301ad664917164b90', id: `${this.accordionItemId}-content`, ref: el => (this.bodyElement = el), class: "stzh-accordion-item__content", "aria-labelledby": `${this.accordionItemId}-header`, role: "region", onKeyDown: this.onContentKeydown }, h("div", { key: 'd4e0d502d8d3ab6728c0ff2b0925919c9ca1d0bb', class: "stzh-accordion-item__content-inner" }, h("slot", { key: 'ddf28eeec9a50f0717210e7bf61d055eea0a1217' }))))));
     }
     get element() { return this; }
     static get watchers() { return {
@@ -317,4 +317,4 @@ function defineCustomElement() {
 export { StzhAccordionItem as S, defineCustomElement as d };
-//# sourceMappingURL=p-604af41f.js.map
+//# sourceMappingURL=p-8cefcb61.js.map

package/dist/components/{p-604af41f.js.map → p-8cefcb61.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-604af41f.js","mappings":"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","names":[],"sources":["src/components/stzh-accordion-item/stzh-accordion-item.scss?tag=stzh-accordion-item&encapsulation=shadow","src/components/stzh-accordion-item/stzh-accordion-item.tsx"],"sourcesContent":["/*\n @prop --content-background: Content background\n \n @prop --stzh-accordion-content-background: Global: Content background\n * @prop --stzh-accordion-button-color: Global: Button label background\n /\n\n:host {\n --trigger-size: 18px;\n --trigger-color: currentColor;\n --content-background: #{$accordionContentBackground};\n --icon-size: #{iconSize()};\n --button-color: var(--stzh-accordion-button-color, #{$colorPrimary70});\n --button-background-color: var(\n --stzh-accordion-button-background-color,\n #{$colorSecondary30}\n );\n --button-background-color-is-open: var(\n --stzh-accordion-button-background-color-is-open,\n #{$colorSecondary30}\n );\n\n --hover-button-color: var(--button-color);\n --hover-button-background-color: var(\n --stzh-accordion-button-hover-background-color,\n #{$colorSecondary40}\n );\n --hover-trigger-color: var(--trigger-color);\n\n --transition-duration: 200ms;\n\n @media print {\n page-break-inside: avoid;\n break-inside: avoid;\n }\n\n @include highContrast() {\n --trigger-color: CanvasText;\n\n --hover-trigger-color: CanvasText;\n }\n}\n\n/ Table /\n:host(:where([is-variant=\"table\"])) {\n --trigger-size: #{iconSize()};\n --content-background: #{$colorGrey10};\n --button-background-color: #{$colorGrey20};\n --trigger-color: #{$colorBlack};\n\n --hover-button-background-color: #{$colorGrey30};\n\n @include highContrast() {\n --trigger-color: CanvasText;\n\n --hover-trigger-color: CanvasText;\n }\n}\n\n/ Disabled /\n\n:host(:where([disabled]:not([disabled=\"false\"]))) {\n --button-color: #{$colorGrey80};\n --button-background-color: #{$colorGrey20};\n --trigger-color: #{$colorGrey80};\n\n --hover-button-color: var(--button-color);\n --hover-button-background-color: var(--button-background-color);\n --hover-trigger-color: var(--trigger-color);\n}\n\n.stzh-accordion-item {\n &__heading {\n position: relative;\n margin: 0;\n }\n\n &__button {\n @include fontCurve(\"p1\");\n @include spaceCurve(\"padding-top\", \"regular\");\n @include spaceCurve(\"padding-bottom\", \"regular\");\n font-family: inherit;\n width: 100%;\n appearance: none;\n display: flex;\n align-items: center;\n min-height: 60px;\n color: var(--button-color);\n background-color: var(--button-background-color);\n text-align: left;\n border: none;\n transition-property: background-color;\n transition-duration: var(--transition-duration);\n cursor: pointer;\n\n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n\n &:hover {\n color: var(--hover-button-color);\n background-color: var(--hover-button-background-color);\n }\n }\n\n &__button,\n &__content-inner {\n @include spaceCurve(\"padding-left\", \"regular\");\n @include spaceCurve(\"padding-right\", \"regular\");\n }\n\n &__button-text {\n flex-grow: 1;\n }\n\n &__button-icon {\n &.is-default {\n position: relative;\n display: block;\n width: var(--trigger-size);\n height: var(--trigger-size);\n margin-left: space(\"medium\");\n\n &::before,\n &::after {\n position: absolute;\n top: 50%;\n left: 50%;\n content: \"\";\n display: block;\n width: var(--trigger-size);\n height: 2.5px;\n transition-property: transform, background-color;\n transition-duration: var(--transition-duration);\n transform-origin: top left;\n background-color: var(--trigger-color);\n\n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n }\n\n &::before {\n transform: rotate(180deg) translate(-50%, -50%);\n }\n\n &::after {\n transform: rotate(90deg) translate(-50%, -50%);\n }\n }\n\n &.is-table {\n --size: var(--trigger-size);\n\n transition-property: transform, color;\n transition-duration: var(--transition-duration);\n color: var(--trigger-color);\n\n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n }\n }\n\n &__button:hover &__button-icon {\n &.is-default {\n &::before,\n &::after {\n background-color: var(--hover-trigger-color);\n }\n }\n\n &.is-table {\n color: var(--hover-trigger-color);\n }\n }\n\n &__content {\n overflow: hidden;\n background-color: var(--content-background);\n\n @media print {\n height: auto !important;\n overflow: visible !important;\n display: block !important;\n }\n }\n\n &__content-inner {\n @include spaceCurve(\"padding-top\", \"medium\");\n @include spaceCurve(\"padding-bottom\", \"medium\");\n }\n\n &__icon-wrapper {\n --stzh-icon-size: var(--icon-size);\n\n align-self: flex-start;\n }\n\n &__badge {\n position: absolute;\n right: -5px;\n top: -5px;\n }\n\n &__description {\n @include fontCurve(\"caption\");\n }\n\n &__heading-text,\n &__description,\n &__subtitle {\n display: block;\n }\n\n &__subtitle {\n @include fontCurve(\"p2\");\n }\n\n / Has icon /\n\n &--has-icon &__icon-wrapper {\n margin-right: space(\"xsmall\");\n }\n\n / Title Variant / Subtitle /\n\n &--title &__heading-text,\n &--has-subtitle &__heading-text {\n @include font(\"title\");\n @include fontCurve(\"h3\", \"heading\");\n }\n\n &--title &__subtitle:not(:empty) + &__heading-text,\n &--has-subtitle &__subtitle:not(:empty) + &__heading-text {\n @include spaceCurve(\"margin-top\", \"tiny\");\n\n @include mq($from: medium) {\n margin-top: space(\"xsmall\");\n }\n }\n\n / Open /\n\n &--is-open &__button {\n background-color: var(--button-background-color-is-open);\n }\n\n &--is-open &__button-icon {\n &.is-default {\n &::before,\n &::after {\n transform: rotate(0) translate(-50%, -50%);\n }\n }\n\n &.is-table {\n transform: rotate(180deg);\n }\n }\n\n / Table Variant /\n\n &--table &__button,\n &--table &__content-inner {\n padding-left: space(\"medium\");\n padding-right: space(\"medium\");\n }\n\n &__button {\n @include fontSize(\"milli\");\n padding-top: space(\"medium\");\n padding-bottom: space(\"medium\");\n min-height: 56px;\n }\n\n &--table &__content-inner {\n @include spaceCurve(\"padding-top\", \"tiny\");\n @include spaceCurve(\"padding-bottom\", \"regular\");\n }\n\n &--table &__heading-text {\n @include font(\"heavy\");\n }\n\n / Disabled /\n\n &--is-disabled &__button {\n cursor: not-allowed;\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Method, Prop, State, Watch } from \"@stencil/core\";\n\nimport {\n StzhAccordionItemBlurEvent,\n StzhAccordionItemClosedEvent,\n StzhAccordionItemCloseEvent,\n StzhAccordionItemFocusEvent,\n StzhAccordionItemOpenedEvent,\n StzhAccordionItemOpenEvent,\n StzhAccordionVariant,\n StzhAccordionVariantChangeEvent,\n StzhBadgeType,\n} from \"../../index\";\n\nimport { waitForEvent } from \"../../utils/event-utils\";\nimport { animateTo, shimKeyframesAutoValues, stopAnimations } from \"../../utils/animation-utils\";\nimport { hasSlot } from \"../../utils/utils\";\n\nconst ANIMATION_SHOW = {\n keyframes: [\n { height: \"0\", opacity: \"0\" },\n { height: \"auto\", opacity: \"1\" },\n ],\n options: { duration: 300, easing: \"linear\" },\n};\n\nconst ANIMATION_HIDE = {\n keyframes: [\n { height: \"auto\", opacity: \"1\" },\n { height: \"0\", opacity: \"0\" },\n ],\n options: { duration: 300, easing: \"linear\" },\n};\n\nlet accordionItemCounter = 0;\n\n/\n @slot - Slot for any content\n * @slot icon - Slot for icon element\n /\n@Component({\n tag: \"stzh-accordion-item\",\n styleUrl: \"stzh-accordion-item.scss\",\n shadow: true,\n})\nexport class StzhAccordionItem {\n /* Variant (overwrites variant from accordion parent) /\n @Prop() variant: StzhAccordionVariant;\n\n /* Whether fold is collapsible (overwrites collapsible from accordion parent) /\n @Prop() collapsible: boolean;\n\n /* Whether fold is open /\n @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n /* Whether fold disabled /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* Heading title /\n @Prop() heading: string = \"\";\n\n /* Subtitle /\n @Prop() subtitle: string = \"\";\n\n /* Description /\n @Prop() description: string = \"\";\n\n /* Icon (use instead of icon slot) /\n @Prop() icon: string = \"\";\n\n /* Badge /\n @Prop() badge: string = \"\";\n\n /* Whether badge should be displayed empty /\n @Prop({ reflect: true }) badgeEmpty: boolean = false;\n\n /* Badge type /\n @Prop({ reflect: true }) badgeType: StzhBadgeType = \"default\";\n\n /* Heading level, for accessibility, no visual impact /\n @Prop({ reflect: true }) headingLevel: \"1\" \| \"2\" \| \"3\" \| \"4\" = \"3\";\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the button element.\n * Default value will be taken from `heading` prop.\n /\n @Prop() analyticsId: string;\n\n @Element() element: HTMLStzhAccordionItemElement;\n\n /* Open event /\n @Event() stzhOpen: EventEmitter<StzhAccordionItemOpenEvent>;\n\n /* Opened event (after animation) /\n @Event() stzhOpened: EventEmitter<StzhAccordionItemOpenedEvent>;\n\n /* Close event /\n @Event() stzhClose: EventEmitter<StzhAccordionItemCloseEvent>;\n\n /* Closed event (after animation) /\n @Event() stzhClosed: EventEmitter<StzhAccordionItemClosedEvent>;\n\n @Watch(\"variant\")\n variantWatcher(newValue: StzhAccordionVariant) {\n if (typeof newValue !== \"undefined\") {\n this._variant = newValue;\n } else if (this.accordion) {\n this._variant = this.accordion.variant;\n }\n }\n\n @Watch(\"open\")\n async openWatcher(newValue: boolean) {\n if (!this.bodyElement) {\n return;\n }\n\n if (newValue) {\n if (this.toggledByMethod) {\n this.stzhOpen.emit({\n component: \"stzh-accordion-item\",\n });\n }\n\n await stopAnimations(this.bodyElement);\n this.bodyElement.hidden = false;\n\n await animateTo(\n this.bodyElement,\n shimKeyframesAutoValues(ANIMATION_SHOW.keyframes, {\n height: this.bodyElement.scrollHeight,\n }),\n ANIMATION_SHOW.options,\n );\n\n this.bodyElement.style.height = \"auto\";\n this.bodyElement.style.overflow = \"visible\";\n\n if (this.toggledByMethod) {\n this.stzhOpened.emit({\n component: \"stzh-accordion-item\",\n });\n }\n } else {\n if (this.toggledByMethod) {\n this.stzhClose.emit({\n component: \"stzh-accordion-item\",\n });\n }\n\n await stopAnimations(this.bodyElement);\n this.bodyElement.style.overflow = \"hidden\";\n\n await animateTo(\n this.bodyElement,\n shimKeyframesAutoValues(ANIMATION_HIDE.keyframes, {\n height: this.bodyElement.scrollHeight,\n }),\n ANIMATION_HIDE.options,\n );\n\n this.bodyElement.hidden = true;\n this.bodyElement.style.height = \"0px\";\n\n if (this.toggledByMethod) {\n this.stzhClosed.emit({\n component: \"stzh-accordion-item\",\n });\n }\n }\n\n this.toggledByMethod = false;\n }\n\n /* Show accordion item content /\n @Method()\n async show() {\n if (this.open \|\| this.disabled) {\n return;\n }\n\n this.toggledByMethod = true;\n this.open = true;\n return waitForEvent(this.element, \"stzhOpened\");\n }\n\n /* Hide accordion item content /\n @Method()\n async hide() {\n if (!this.open \|\| this.disabled) {\n return;\n }\n\n this.toggledByMethod = true;\n this.open = false;\n return waitForEvent(this.element, \"stzhClosed\");\n }\n\n /* Toggle accordion item content /\n @Method()\n async toggle() {\n if (this.open) {\n return await this.hide();\n } else {\n return await this.show();\n }\n }\n\n /* Focus event /\n @Event() stzhFocus: EventEmitter<StzhAccordionItemFocusEvent>;\n\n /* Input blur event */\n @Event() stzhBlur: EventEmitter<StzhAccordionItemBlurEvent>;\n\n @Listen(\"keydown\", { target: \"document\", capture: true })\n handleKeydown(event: KeyboardEvent) {\n if (event.key === \"Shift\") {\n this.shiftPressed = true;\n }\n }\n\n @Listen(\"keyup\", { target: \"document\", capture: true })\n handleKeyup(event: KeyboardEvent) {\n if (event.key === \"Shift\") {\n this.shiftPressed = false;\n }\n }\n\n @State() rootTabindex: number = 0;\n @State() _variant: StzhAccordionVariant;\n\n private toggledByMethod: boolean = false;\n private bodyElement: HTMLDivElement;\n // @ts-ignore\n private buttonElement: HTMLButtonElement;\n private iconWrapperElement: HTMLDivElement;\n private accordionItemId: string;\n private accordion: HTMLStzhAccordionElement;\n // @ts-ignore\n private focusedByInput: boolean = false;\n private shiftPressed: boolean = false;\n\n private handleVariantChange = (_event: CustomEvent<StzhAccordionVariantChangeEvent>) => {\n this.variantWatcher(this.variant);\n };\n\n private handleHeaderClick = () => {\n if (typeof this.collapsible !== \"undefined\") {\n if (this.collapsible) {\n this.toggle();\n } else if (!this.open) {\n this.show();\n }\n } else if (!this.accordion \|\| this.accordion.collapsible) {\n this.toggle();\n } else if (!this.open) {\n this.show();\n }\n };\n\n private onFocus = (event: FocusEvent) => {\n this.focusedByInput = true;\n\n if (this.shiftPressed) {\n // user presses currently shift\n this.rootTabindex = -1;\n }\n\n this.stzhFocus.emit({\n component: \"stzh-accordion-item\",\n originalEvent: event,\n });\n };\n\n private onBlur = (event: FocusEvent) => {\n this.rootTabindex = 0;\n\n this.stzhBlur.emit({\n component: \"stzh-accordion-item\",\n originalEvent: event,\n });\n };\n\n private onButtonKeydown = (event: KeyboardEvent) => {\n let action = null;\n\n if (event.key === \"ArrowDown\") {\n action = \"next\";\n } else if (event.key === \"ArrowUp\") {\n action = \"prev\";\n } else if (event.key === \"Home\") {\n action = \"first\";\n } else if (event.key === \"End\") {\n action = \"last\";\n } else if (event.key === \"PageDown\" && event.ctrlKey) {\n action = \"next\";\n } else if (event.key === \"PageUp\" && event.ctrlKey) {\n action = \"prev\";\n }\n\n if (event.key === \"Shift\") {\n this.rootTabindex = -1;\n }\n\n if (action) {\n event.preventDefault();\n this.accordion.setItemFocus(this.element, action);\n }\n };\n\n private onContentKeydown = (event: KeyboardEvent) => {\n if (!event.ctrlKey) {\n return;\n }\n\n let action = null;\n\n if (event.key === \"PageDown\") {\n action = \"next\";\n } else if (event.key === \"PageUp\") {\n action = \"prev\";\n }\n\n if (action) {\n event.preventDefault();\n this.accordion.setItemFocus(this.element, action);\n }\n };\n\n componentWillLoad() {\n this.accordionItemId = `stzh-accordion-item-${accordionItemCounter++}`;\n }\n\n componentDidLoad() {\n this.bodyElement.hidden = !this.open;\n this.bodyElement.style.height = this.open ? \"auto\" : \"0px\";\n this.bodyElement.style.overflow = this.open ? \"visible\" : \"hidden\";\n }\n\n async connectedCallback() {\n this.accordion = this.element.closest(\"stzh-accordion\");\n\n if (this.accordion) {\n this.accordion.addEventListener(\"stzhVariantChange\", this.handleVariantChange);\n }\n\n this.variantWatcher(this.variant);\n }\n\n disconnectedCallback() {\n if (this.accordion) {\n this.accordion.removeEventListener(\"stzhVariantChange\", this.handleVariantChange);\n this.accordion = null;\n }\n }\n\n render() {\n let hasIcon = hasSlot(this.element, \"icon\") \|\| !!this.icon;\n if (this.iconWrapperElement) {\n hasIcon = hasSlot(this.iconWrapperElement, \"icon\") \|\| !!this.icon;\n }\n\n const Heading = `h${this.headingLevel}`;\n const classes = {\n \"stzh-accordion-item\": true,\n \"stzh-accordion-item--has-icon\": hasIcon,\n \"stzh-accordion-item--has-description\": !!this.description,\n \"stzh-accordion-item--has-subtitle\": !!this.subtitle,\n \"stzh-accordion-item--is-open\": this.open,\n \"stzh-accordion-item--is-disabled\": this.disabled,\n [`stzh-accordion-item--${this._variant}`]: !!this._variant,\n };\n\n return (\n <Host tabindex={this.disabled ? null : this.rootTabindex} is-variant={this._variant}>\n <div class={classes}>\n <Heading\n id={`${this.accordionItemId}-header`}\n class=\"stzh-accordion-item__heading\"\n onClick={this.handleHeaderClick}\n >\n <button\n ref={el => (this.buttonElement = el as HTMLButtonElement)}\n class=\"stzh-accordion-item__button\"\n aria-controls={`${this.accordionItemId}-content`}\n aria-expanded={`${this.open ? \"true\" : \"false\"}`}\n disabled={this.disabled}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n onKeyDown={this.onButtonKeydown}\n type=\"button\"\n s-object-id={this.analyticsId \|\| this.heading}\n >\n <span\n class=\"stzh-accordion-item__icon-wrapper\"\n ref={el => (this.iconWrapperElement = el as HTMLDivElement)}\n >\n {this.icon ? (\n <stzh-icon class=\"stzh-accordion-item__icon\" name={this.icon}></stzh-icon>\n ) : (\n <slot name=\"icon\"></slot>\n )}\n </span>\n <span class=\"stzh-accordion-item__button-text\">\n <span class=\"stzh-accordion-item__subtitle\">{this.subtitle}</span>\n <span class=\"stzh-accordion-item__heading-text\">{this.heading}</span>\n <span class=\"stzh-accordion-item__description\">{this.description}</span>\n </span>\n {this._variant === \"table\" ? (\n <stzh-icon name=\"angle-down\" class=\"stzh-accordion-item__button-icon is-table\"></stzh-icon>\n ) : (\n <span class=\"stzh-accordion-item__button-icon is-default\"></span>\n )}\n\n {(this.badge \|\| this.badgeEmpty) && (\n <stzh-badge class=\"stzh-accordion-item__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n )}\n </button>\n </Heading>\n <div\n id={`${this.accordionItemId}-content`}\n ref={el => (this.bodyElement = el as HTMLDivElement)}\n class=\"stzh-accordion-item__content\"\n aria-labelledby={`${this.accordionItemId}-header`}\n role=\"region\"\n onKeyDown={this.onContentKeydown}\n >\n <div class=\"stzh-accordion-item__content-inner\">\n <slot></slot>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-8cefcb61.js","mappings":"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","names":[],"sources":["src/components/stzh-accordion-item/stzh-accordion-item.scss?tag=stzh-accordion-item&encapsulation=shadow","src/components/stzh-accordion-item/stzh-accordion-item.tsx"],"sourcesContent":["/*\n @prop --content-background: Content background\n \n @prop --stzh-accordion-content-background: Global: Content background\n * @prop --stzh-accordion-button-color: Global: Button label background\n /\n\n:host {\n --trigger-size: 18px;\n --trigger-color: currentColor;\n --content-background: #{$accordionContentBackground};\n --icon-size: #{iconSize()};\n --button-color: var(--stzh-accordion-button-color, #{$colorPrimary70});\n --button-background-color: var(\n --stzh-accordion-button-background-color,\n #{$colorSecondary30}\n );\n --button-background-color-is-open: var(\n --stzh-accordion-button-background-color-is-open,\n #{$colorSecondary30}\n );\n\n --hover-button-color: var(--button-color);\n --hover-button-background-color: var(\n --stzh-accordion-button-hover-background-color,\n #{$colorSecondary40}\n );\n --hover-trigger-color: var(--trigger-color);\n\n --transition-duration: 200ms;\n\n @media print {\n page-break-inside: avoid;\n break-inside: avoid;\n }\n\n @include highContrast() {\n --trigger-color: CanvasText;\n\n --hover-trigger-color: CanvasText;\n }\n}\n\n/ Table /\n:host(:where([is-variant=\"table\"])) {\n --trigger-size: #{iconSize()};\n --content-background: #{$colorGrey10};\n --button-background-color: #{$colorGrey20};\n --trigger-color: #{$colorBlack};\n\n --hover-button-background-color: #{$colorGrey30};\n\n @include highContrast() {\n --trigger-color: CanvasText;\n\n --hover-trigger-color: CanvasText;\n }\n}\n\n/ Disabled /\n\n:host(:where([disabled]:not([disabled=\"false\"]))) {\n --button-color: #{$colorGrey80};\n --button-background-color: #{$colorGrey20};\n --trigger-color: #{$colorGrey80};\n\n --hover-button-color: var(--button-color);\n --hover-button-background-color: var(--button-background-color);\n --hover-trigger-color: var(--trigger-color);\n}\n\n.stzh-accordion-item {\n &__heading {\n position: relative;\n margin: 0;\n }\n\n &__button {\n @include fontCurve(\"p1\");\n @include spaceCurve(\"padding-top\", \"regular\");\n @include spaceCurve(\"padding-bottom\", \"regular\");\n font-family: inherit;\n width: 100%;\n appearance: none;\n display: flex;\n align-items: center;\n min-height: 60px;\n color: var(--button-color);\n background-color: var(--button-background-color);\n text-align: left;\n border: none;\n transition-property: background-color;\n transition-duration: var(--transition-duration);\n cursor: pointer;\n\n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n\n &:hover {\n color: var(--hover-button-color);\n background-color: var(--hover-button-background-color);\n }\n }\n\n &__button,\n &__content-inner {\n @include spaceCurve(\"padding-left\", \"regular\");\n @include spaceCurve(\"padding-right\", \"regular\");\n }\n\n &__button-text {\n flex-grow: 1;\n }\n\n &__button-icon {\n &.is-default {\n position: relative;\n display: block;\n width: var(--trigger-size);\n height: var(--trigger-size);\n margin-left: space(\"medium\");\n\n &::before,\n &::after {\n position: absolute;\n top: 50%;\n left: 50%;\n content: \"\";\n display: block;\n width: var(--trigger-size);\n height: 2.5px;\n transition-property: transform, background-color;\n transition-duration: var(--transition-duration);\n transform-origin: top left;\n background-color: var(--trigger-color);\n\n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n }\n\n &::before {\n transform: rotate(180deg) translate(-50%, -50%);\n }\n\n &::after {\n transform: rotate(90deg) translate(-50%, -50%);\n }\n }\n\n &.is-table {\n --size: var(--trigger-size);\n\n transition-property: transform, color;\n transition-duration: var(--transition-duration);\n color: var(--trigger-color);\n\n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n }\n }\n\n &__button:hover &__button-icon {\n &.is-default {\n &::before,\n &::after {\n background-color: var(--hover-trigger-color);\n }\n }\n\n &.is-table {\n color: var(--hover-trigger-color);\n }\n }\n\n &__content {\n overflow: hidden;\n background-color: var(--content-background);\n\n @media print {\n height: auto !important;\n overflow: visible !important;\n display: block !important;\n }\n }\n\n &__content-inner {\n @include spaceCurve(\"padding-top\", \"medium\");\n @include spaceCurve(\"padding-bottom\", \"medium\");\n }\n\n &__icon-wrapper {\n --stzh-icon-size: var(--icon-size);\n\n align-self: flex-start;\n }\n\n &__badge {\n position: absolute;\n right: -5px;\n top: -5px;\n }\n\n &__description {\n @include fontCurve(\"caption\");\n }\n\n &__heading-text,\n &__description,\n &__subtitle {\n display: block;\n }\n\n &__subtitle {\n @include fontCurve(\"p2\");\n }\n\n / Has icon /\n\n &--has-icon &__icon-wrapper {\n margin-right: space(\"xsmall\");\n }\n\n / Title Variant / Subtitle /\n\n &--title &__heading-text,\n &--has-subtitle &__heading-text {\n @include font(\"title\");\n @include fontCurve(\"h3\", \"heading\");\n }\n\n &--title &__subtitle:not(:empty) + &__heading-text,\n &--has-subtitle &__subtitle:not(:empty) + &__heading-text {\n @include spaceCurve(\"margin-top\", \"tiny\");\n\n @include mq($from: medium) {\n margin-top: space(\"xsmall\");\n }\n }\n\n / Open /\n\n &--is-open &__button {\n background-color: var(--button-background-color-is-open);\n }\n\n &--is-open &__button-icon {\n &.is-default {\n &::before,\n &::after {\n transform: rotate(0) translate(-50%, -50%);\n }\n }\n\n &.is-table {\n transform: rotate(180deg);\n }\n }\n\n / Table Variant /\n\n &--table &__button,\n &--table &__content-inner {\n padding-left: space(\"medium\");\n padding-right: space(\"medium\");\n }\n\n &__button {\n @include fontSize(\"milli\");\n padding-top: space(\"medium\");\n padding-bottom: space(\"medium\");\n min-height: 56px;\n }\n\n &--table &__content-inner {\n @include spaceCurve(\"padding-top\", \"tiny\");\n @include spaceCurve(\"padding-bottom\", \"regular\");\n }\n\n &--table &__heading-text {\n @include font(\"heavy\");\n }\n\n / Disabled /\n\n &--is-disabled &__button {\n cursor: not-allowed;\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Method, Prop, State, Watch } from \"@stencil/core\";\n\nimport {\n StzhAccordionItemBlurEvent,\n StzhAccordionItemClosedEvent,\n StzhAccordionItemCloseEvent,\n StzhAccordionItemFocusEvent,\n StzhAccordionItemOpenedEvent,\n StzhAccordionItemOpenEvent,\n StzhAccordionVariant,\n StzhAccordionVariantChangeEvent,\n StzhBadgeType,\n} from \"../../index\";\n\nimport { waitForEvent } from \"../../utils/event-utils\";\nimport { animateTo, shimKeyframesAutoValues, stopAnimations } from \"../../utils/animation-utils\";\nimport { hasSlot } from \"../../utils/utils\";\n\nconst ANIMATION_SHOW = {\n keyframes: [\n { height: \"0\", opacity: \"0\" },\n { height: \"auto\", opacity: \"1\" },\n ],\n options: { duration: 300, easing: \"linear\" },\n};\n\nconst ANIMATION_HIDE = {\n keyframes: [\n { height: \"auto\", opacity: \"1\" },\n { height: \"0\", opacity: \"0\" },\n ],\n options: { duration: 300, easing: \"linear\" },\n};\n\nlet accordionItemCounter = 0;\n\n/\n @slot - Slot for any content\n * @slot icon - Slot for icon element\n /\n@Component({\n tag: \"stzh-accordion-item\",\n styleUrl: \"stzh-accordion-item.scss\",\n shadow: true,\n})\nexport class StzhAccordionItem {\n /* Variant (overwrites variant from accordion parent) /\n @Prop() variant: StzhAccordionVariant;\n\n /* Whether fold is collapsible (overwrites collapsible from accordion parent) /\n @Prop() collapsible: boolean;\n\n /* Whether fold is open /\n @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n /* Whether fold disabled /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* Heading title /\n @Prop() heading: string = \"\";\n\n /* Subtitle /\n @Prop() subtitle: string = \"\";\n\n /* Description /\n @Prop() description: string = \"\";\n\n /* Icon (use instead of icon slot) /\n @Prop() icon: string = \"\";\n\n /* Badge /\n @Prop() badge: string = \"\";\n\n /* Whether badge should be displayed empty /\n @Prop({ reflect: true }) badgeEmpty: boolean = false;\n\n /* Badge type /\n @Prop({ reflect: true }) badgeType: StzhBadgeType = \"default\";\n\n /* Heading level, for accessibility, no visual impact /\n @Prop({ reflect: true }) headingLevel: \"1\" \| \"2\" \| \"3\" \| \"4\" = \"3\";\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the button element.\n * Default value will be taken from `heading` prop.\n /\n @Prop() analyticsId: string;\n\n @Element() element: HTMLStzhAccordionItemElement;\n\n /* Open event /\n @Event() stzhOpen: EventEmitter<StzhAccordionItemOpenEvent>;\n\n /* Opened event (after animation) /\n @Event() stzhOpened: EventEmitter<StzhAccordionItemOpenedEvent>;\n\n /* Close event /\n @Event() stzhClose: EventEmitter<StzhAccordionItemCloseEvent>;\n\n /* Closed event (after animation) /\n @Event() stzhClosed: EventEmitter<StzhAccordionItemClosedEvent>;\n\n @Watch(\"variant\")\n variantWatcher(newValue: StzhAccordionVariant) {\n if (typeof newValue !== \"undefined\") {\n this._variant = newValue;\n } else if (this.accordion) {\n this._variant = this.accordion.variant;\n }\n }\n\n @Watch(\"open\")\n async openWatcher(newValue: boolean) {\n if (!this.bodyElement) {\n return;\n }\n\n if (newValue) {\n if (this.toggledByMethod) {\n this.stzhOpen.emit({\n component: \"stzh-accordion-item\",\n });\n }\n\n await stopAnimations(this.bodyElement);\n this.bodyElement.hidden = false;\n\n await animateTo(\n this.bodyElement,\n shimKeyframesAutoValues(ANIMATION_SHOW.keyframes, {\n height: this.bodyElement.scrollHeight,\n }),\n ANIMATION_SHOW.options,\n );\n\n this.bodyElement.style.height = \"auto\";\n this.bodyElement.style.overflow = \"visible\";\n\n if (this.toggledByMethod) {\n this.stzhOpened.emit({\n component: \"stzh-accordion-item\",\n });\n }\n } else {\n if (this.toggledByMethod) {\n this.stzhClose.emit({\n component: \"stzh-accordion-item\",\n });\n }\n\n await stopAnimations(this.bodyElement);\n this.bodyElement.style.overflow = \"hidden\";\n\n await animateTo(\n this.bodyElement,\n shimKeyframesAutoValues(ANIMATION_HIDE.keyframes, {\n height: this.bodyElement.scrollHeight,\n }),\n ANIMATION_HIDE.options,\n );\n\n this.bodyElement.hidden = true;\n this.bodyElement.style.height = \"0px\";\n\n if (this.toggledByMethod) {\n this.stzhClosed.emit({\n component: \"stzh-accordion-item\",\n });\n }\n }\n\n this.toggledByMethod = false;\n }\n\n /* Show accordion item content /\n @Method()\n async show() {\n if (this.open \|\| this.disabled) {\n return;\n }\n\n this.toggledByMethod = true;\n this.open = true;\n return waitForEvent(this.element, \"stzhOpened\");\n }\n\n /* Hide accordion item content /\n @Method()\n async hide() {\n if (!this.open \|\| this.disabled) {\n return;\n }\n\n this.toggledByMethod = true;\n this.open = false;\n return waitForEvent(this.element, \"stzhClosed\");\n }\n\n /* Toggle accordion item content /\n @Method()\n async toggle() {\n if (this.open) {\n return await this.hide();\n } else {\n return await this.show();\n }\n }\n\n /* Focus event /\n @Event() stzhFocus: EventEmitter<StzhAccordionItemFocusEvent>;\n\n /* Input blur event */\n @Event() stzhBlur: EventEmitter<StzhAccordionItemBlurEvent>;\n\n @Listen(\"keydown\", { target: \"document\", capture: true })\n handleKeydown(event: KeyboardEvent) {\n if (event.key === \"Shift\") {\n this.shiftPressed = true;\n }\n }\n\n @Listen(\"keyup\", { target: \"document\", capture: true })\n handleKeyup(event: KeyboardEvent) {\n if (event.key === \"Shift\") {\n this.shiftPressed = false;\n }\n }\n\n @State() rootTabindex: number = 0;\n @State() _variant: StzhAccordionVariant;\n\n private toggledByMethod: boolean = false;\n private bodyElement: HTMLDivElement;\n // @ts-ignore\n private buttonElement: HTMLButtonElement;\n private iconWrapperElement: HTMLDivElement;\n private accordionItemId: string;\n private accordion: HTMLStzhAccordionElement;\n // @ts-ignore\n private focusedByInput: boolean = false;\n private shiftPressed: boolean = false;\n\n private handleVariantChange = (_event: CustomEvent<StzhAccordionVariantChangeEvent>) => {\n this.variantWatcher(this.variant);\n };\n\n private handleHeaderClick = () => {\n if (typeof this.collapsible !== \"undefined\") {\n if (this.collapsible) {\n this.toggle();\n } else if (!this.open) {\n this.show();\n }\n } else if (!this.accordion \|\| this.accordion.collapsible) {\n this.toggle();\n } else if (!this.open) {\n this.show();\n }\n };\n\n private onFocus = (event: FocusEvent) => {\n this.focusedByInput = true;\n\n if (this.shiftPressed) {\n // user presses currently shift\n this.rootTabindex = -1;\n }\n\n this.stzhFocus.emit({\n component: \"stzh-accordion-item\",\n originalEvent: event,\n });\n };\n\n private onBlur = (event: FocusEvent) => {\n this.rootTabindex = 0;\n\n this.stzhBlur.emit({\n component: \"stzh-accordion-item\",\n originalEvent: event,\n });\n };\n\n private onButtonKeydown = (event: KeyboardEvent) => {\n let action = null;\n\n if (event.key === \"ArrowDown\") {\n action = \"next\";\n } else if (event.key === \"ArrowUp\") {\n action = \"prev\";\n } else if (event.key === \"Home\") {\n action = \"first\";\n } else if (event.key === \"End\") {\n action = \"last\";\n } else if (event.key === \"PageDown\" && event.ctrlKey) {\n action = \"next\";\n } else if (event.key === \"PageUp\" && event.ctrlKey) {\n action = \"prev\";\n }\n\n if (event.key === \"Shift\") {\n this.rootTabindex = -1;\n }\n\n if (action) {\n event.preventDefault();\n this.accordion.setItemFocus(this.element, action);\n }\n };\n\n private onContentKeydown = (event: KeyboardEvent) => {\n if (!event.ctrlKey) {\n return;\n }\n\n let action = null;\n\n if (event.key === \"PageDown\") {\n action = \"next\";\n } else if (event.key === \"PageUp\") {\n action = \"prev\";\n }\n\n if (action) {\n event.preventDefault();\n this.accordion.setItemFocus(this.element, action);\n }\n };\n\n componentWillLoad() {\n this.accordionItemId = `stzh-accordion-item-${accordionItemCounter++}`;\n }\n\n componentDidLoad() {\n this.bodyElement.hidden = !this.open;\n this.bodyElement.style.height = this.open ? \"auto\" : \"0px\";\n this.bodyElement.style.overflow = this.open ? \"visible\" : \"hidden\";\n }\n\n async connectedCallback() {\n this.accordion = this.element.closest(\"stzh-accordion\");\n\n if (this.accordion) {\n this.accordion.addEventListener(\"stzhVariantChange\", this.handleVariantChange);\n }\n\n this.variantWatcher(this.variant);\n }\n\n disconnectedCallback() {\n if (this.accordion) {\n this.accordion.removeEventListener(\"stzhVariantChange\", this.handleVariantChange);\n this.accordion = null;\n }\n }\n\n render() {\n let hasIcon = hasSlot(this.element, \"icon\") \|\| !!this.icon;\n if (this.iconWrapperElement) {\n hasIcon = hasSlot(this.iconWrapperElement, \"icon\") \|\| !!this.icon;\n }\n\n const Heading = `h${this.headingLevel}`;\n const classes = {\n \"stzh-accordion-item\": true,\n \"stzh-accordion-item--has-icon\": hasIcon,\n \"stzh-accordion-item--has-description\": !!this.description,\n \"stzh-accordion-item--has-subtitle\": !!this.subtitle,\n \"stzh-accordion-item--is-open\": this.open,\n \"stzh-accordion-item--is-disabled\": this.disabled,\n [`stzh-accordion-item--${this._variant}`]: !!this._variant,\n };\n\n return (\n <Host tabindex={this.disabled ? null : this.rootTabindex} is-variant={this._variant}>\n <div class={classes}>\n <Heading\n id={`${this.accordionItemId}-header`}\n class=\"stzh-accordion-item__heading\"\n onClick={this.handleHeaderClick}\n >\n <button\n ref={el => (this.buttonElement = el as HTMLButtonElement)}\n class=\"stzh-accordion-item__button\"\n aria-controls={`${this.accordionItemId}-content`}\n aria-expanded={`${this.open ? \"true\" : \"false\"}`}\n disabled={this.disabled}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n onKeyDown={this.onButtonKeydown}\n type=\"button\"\n s-object-id={this.analyticsId \|\| this.heading}\n >\n <span\n class=\"stzh-accordion-item__icon-wrapper\"\n ref={el => (this.iconWrapperElement = el as HTMLDivElement)}\n >\n {this.icon ? (\n <stzh-icon class=\"stzh-accordion-item__icon\" name={this.icon}></stzh-icon>\n ) : (\n <slot name=\"icon\"></slot>\n )}\n </span>\n <span class=\"stzh-accordion-item__button-text\">\n <span class=\"stzh-accordion-item__subtitle\">{this.subtitle}</span>\n <span class=\"stzh-accordion-item__heading-text\">{this.heading}</span>\n <span class=\"stzh-accordion-item__description\">{this.description}</span>\n </span>\n {this._variant === \"table\" ? (\n <stzh-icon name=\"angle-down\" class=\"stzh-accordion-item__button-icon is-table\"></stzh-icon>\n ) : (\n <span class=\"stzh-accordion-item__button-icon is-default\"></span>\n )}\n\n {(this.badge \|\| this.badgeEmpty) && (\n <stzh-badge class=\"stzh-accordion-item__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n )}\n </button>\n </Heading>\n <div\n id={`${this.accordionItemId}-content`}\n ref={el => (this.bodyElement = el as HTMLDivElement)}\n class=\"stzh-accordion-item__content\"\n aria-labelledby={`${this.accordionItemId}-header`}\n role=\"region\"\n onKeyDown={this.onContentKeydown}\n >\n <div class=\"stzh-accordion-item__content-inner\">\n <slot></slot>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/{p-e87822db.js → p-8d606617.js} RENAMED Viewed

@@ -4042,7 +4042,7 @@ const StzhSortable = /*@__PURE__*/ proxyCustomElement(class StzhSortable extends
             "stzh-sortable": true,
             "stzh-sortable--disabled": this.disabled,
         };
-        return (h(Host, { key: 'ff42878834e103659161fa8fe1125e8f290c69ba' }, h("div", { key: '209df0c0947821ff28b6e4a0a07fbecd62e19a05', class: classes }, !this.disabled && (h("div", { key: '6b702e2919bf91401389870b08dce3363c720894', id: `${this.sortableId}-description`, class: "stzh-sortable__description" }, this.localization.description)), h("div", { key: 'f271702521f077ca0d0ab47a8d761af6beedce14', ref: el => (this.ariaLiveElement = el), "aria-live": "assertive", class: "stzh-sortable__aria-live" }), h("div", { key: '6bed399b0231648d1f86393d320c3cf58d7ef4b7', ref: el => (this.containerElement = el), class: "stzh-sortable__container" }, h("slot", { key: 'a4be5231727ebbad9e25ca0b20f40ac65768d5cf' })))));
+        return (h(Host, { key: 'c0fcc3ea7f0df3028b8a53bc5476a29feef8440f' }, h("div", { key: '70713c2e141417f83434c161ad3f961f7706c658', class: classes }, !this.disabled && (h("div", { key: '5f197fce7d95fe0d460b46c5edbe8bc67ccb78e3', id: `${this.sortableId}-description`, class: "stzh-sortable__description" }, this.localization.description)), h("div", { key: '235e348891ffbd9bce59702458818ffc65b0c56a', ref: el => (this.ariaLiveElement = el), "aria-live": "assertive", class: "stzh-sortable__aria-live" }), h("div", { key: 'b8f29e10d876dfe5880bc4ad58e19af5e6408b54', ref: el => (this.containerElement = el), class: "stzh-sortable__container" }, h("slot", { key: 'fd1b30cfa0483571dea1056142c86bf74faf226d' })))));
     }
     get element() { return this; }
     static get watchers() { return {
@@ -4080,4 +4080,4 @@ function defineCustomElement() {
 export { StzhSortable as S, defineCustomElement as d };
-//# sourceMappingURL=p-e87822db.js.map
+//# sourceMappingURL=p-8d606617.js.map