@oiz/stzh-components 4.9.0-beta1 → 4.9.0-beta3

package/dist/components/{p-DdSOIotl.js.map → p-B1xdvkSy.js.map}

@@ -1 +1 @@
-{"file":"p-DdSOIotl.js","mappings":";;AAAA,MAAM,YAAY,GAAG,MAAM,CAAC,ynaAAyna,CAAC;;MCYzoa,SAAS,iBAAAA,kBAAA,CAAA,MAAA,SAAA,SAAAC,CAAA,CAAA;AALtB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAO2B,QAAA,IAAK,CAAA,KAAA,GAAiB,MAAM;;AAc5B,QAAA,IAAO,CAAA,OAAA,GAAmB,OAAO;;AAGjC,QAAA,IAAK,CAAA,KAAA,GAAiB,OAAO;;AAG7B,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;;AAGvB,QAAA,IAAM,CAAA,MAAA,GAA+E,MAAM;AAkBrH;IAhBC,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,YAAY,EAAE,IAAI;gBAClB,uBAAuB,EAAE,IAAI,CAAC,MAAM;gBACpC,CAAC,CAAA,oBAAA,EAAuB,IAAI,CAAC,OAAO,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;gBACvD,CAAC,CAAA,kBAAA,EAAqB,IAAI,CAAC,KAAK,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK;AAClD,aAAA,EAAA,EAED,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-space/stzh-space.scss?tag=stzh-space&encapsulation=shadow","src/components/stzh-space/stzh-space.tsx"],"sourcesContent":["@use \"sass:map\";\n\n:host {\n  --space: #{space()};\n  --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: calc((var(--space) / 2) * var(--around));\n    margin: calc((var(--space) / 2) * (1 - var(--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  --around: 1;\n\n  width: var(--space);\n  height: var(--space);\n}\n\n:host([around]:not([around=\"false\"])) {\n  --around: 1;\n}\n\n/* Border variants */\n\n:host([border=\"top\"]),\n:host([border=\"top-bottom\"]) {\n  border-top: 1px solid $baseBorderColor;\n}\n\n:host([border=\"bottom\"]),\n:host([border=\"top-bottom\"]) {\n  border-bottom: 1px solid $baseBorderColor;\n}\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 curve variant */\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-vspace {\n  :host([curve=\"#{$spaceCurve}\"]) {\n    --space: #{space($defaultSize)};\n\n    @each $breakpoint, $size in $breakpointSizes {\n      @include mq($from: $breakpoint) {\n        --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-vspace {\n      :host([size-#{$breakpoint}=\"#{$space}\"]) {\n        @include mq($from: $breakpoint) {\n          --space: #{$value};\n        }\n      }\n    } @else {\n      // :host([size=\"#{$space}\"]) > .stzh-vspace {\n      :host([size=\"#{$space}\"]) {\n        --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-space {\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  flex-wrap: wrap;\n  padding: calc((var(--space) / -2) * var(--around));\n  margin: calc((var(--space) / -2) * (1 - var(--around)));\n\n  &--is-around {\n    padding: calc((var(--space) / 2) * var(--around));\n    margin: calc((var(--space) / 2) * (1 - var(--around)));\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 vertically spaced\n */\n@Component({\n  tag: \"stzh-space\",\n  styleUrl: \"stzh-space.scss\",\n  shadow: true,\n})\nexport class StzhSpace {\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 */\n  @Prop({ reflect: true }) around: boolean = false;\n\n  /** Add border */\n  @Prop({ reflect: true }) border: \"none\" | \"top\" | \"bottom\" | \"left\" | \"right\" | \"left-right\" | \"top-bottom\" = \"none\";\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            \"stzh-space\": true,\n            \"stzh-space--is-around\": this.around,\n            [`stzh-space--justify-${this.justify}`]: !!this.justify,\n            [`stzh-space--items-${this.items}`]: !!this.items,\n          }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-B1xdvkSy.js","mappings":";;AAAA,MAAM,YAAY,GAAG,MAAM,CAAC,ynaAAyna,CAAC;;MCYzoa,SAAS,iBAAAA,kBAAA,CAAA,MAAA,SAAA,SAAAC,CAAA,CAAA;AALtB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAO2B,QAAA,IAAK,CAAA,KAAA,GAAiB,MAAM;;AAc5B,QAAA,IAAO,CAAA,OAAA,GAAmB,OAAO;;AAGjC,QAAA,IAAK,CAAA,KAAA,GAAiB,OAAO;;AAG7B,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;;AAGvB,QAAA,IAAM,CAAA,MAAA,GAA+E,MAAM;AAkBrH;IAhBC,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,YAAY,EAAE,IAAI;gBAClB,uBAAuB,EAAE,IAAI,CAAC,MAAM;gBACpC,CAAC,CAAA,oBAAA,EAAuB,IAAI,CAAC,OAAO,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;gBACvD,CAAC,CAAA,kBAAA,EAAqB,IAAI,CAAC,KAAK,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK;AAClD,aAAA,EAAA,EAED,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-space/stzh-space.scss?tag=stzh-space&encapsulation=shadow","src/components/stzh-space/stzh-space.tsx"],"sourcesContent":["@use \"sass:map\";\n\n:host {\n  --space: #{space()};\n  --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: calc((var(--space) / 2) * var(--around));\n    margin: calc((var(--space) / 2) * (1 - var(--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  --around: 1;\n\n  width: var(--space);\n  height: var(--space);\n}\n\n:host([around]:not([around=\"false\"])) {\n  --around: 1;\n}\n\n/* Border variants */\n\n:host([border=\"top\"]),\n:host([border=\"top-bottom\"]) {\n  border-top: 1px solid $baseBorderColor;\n}\n\n:host([border=\"bottom\"]),\n:host([border=\"top-bottom\"]) {\n  border-bottom: 1px solid $baseBorderColor;\n}\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 curve variant */\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-vspace {\n  :host([curve=\"#{$spaceCurve}\"]) {\n    --space: #{space($defaultSize)};\n\n    @each $breakpoint, $size in $breakpointSizes {\n      @include mq($from: $breakpoint) {\n        --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-vspace {\n      :host([size-#{$breakpoint}=\"#{$space}\"]) {\n        @include mq($from: $breakpoint) {\n          --space: #{$value};\n        }\n      }\n    } @else {\n      // :host([size=\"#{$space}\"]) > .stzh-vspace {\n      :host([size=\"#{$space}\"]) {\n        --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-space {\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  flex-wrap: wrap;\n  padding: calc((var(--space) / -2) * var(--around));\n  margin: calc((var(--space) / -2) * (1 - var(--around)));\n\n  &--is-around {\n    padding: calc((var(--space) / 2) * var(--around));\n    margin: calc((var(--space) / 2) * (1 - var(--around)));\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 vertically spaced\n */\n@Component({\n  tag: \"stzh-space\",\n  styleUrl: \"stzh-space.scss\",\n  shadow: true,\n})\nexport class StzhSpace {\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 */\n  @Prop({ reflect: true }) around: boolean = false;\n\n  /** Add border */\n  @Prop({ reflect: true }) border: \"none\" | \"top\" | \"bottom\" | \"left\" | \"right\" | \"left-right\" | \"top-bottom\" = \"none\";\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            \"stzh-space\": true,\n            \"stzh-space--is-around\": this.around,\n            [`stzh-space--justify-${this.justify}`]: !!this.justify,\n            [`stzh-space--items-${this.items}`]: !!this.items,\n          }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-fgVZM2q9.js → p-B6zrbO8N.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, e as Host, t as transformTag } from './p-NuLYh9v8.js';
+import { p as proxyCustomElement, H, h, e as Host, t as transformTag } from './p-ptAFQZzh.js';
 
 const stzhRatioCss = () => `: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{}: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{--background-color:var(--stzh-ratio-background-color);--ratio:16 /
     9;--max-height:inherit;--overflow:inherit}:host ::slotted(*){position:absolute;width:100%;height:100%;inset:0;object-fit:cover}:host ::slotted(.stzh-card-searchresult__image-placeholder){display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:var(--placeholder-image-color)}:host([fit=contain]) ::slotted(*){object-fit:contain}:host([portrait]:not([portrait=false])){--ratio:9 /
@@ -58,6 +58,6 @@ function defineCustomElement() {
 }
 
 export { StzhRatio as S, defineCustomElement as d };
-//# sourceMappingURL=p-fgVZM2q9.js.map
+//# sourceMappingURL=p-B6zrbO8N.js.map
 
-//# sourceMappingURL=p-fgVZM2q9.js.map
+//# sourceMappingURL=p-B6zrbO8N.js.map

package/dist/components/{p-fgVZM2q9.js.map → p-B6zrbO8N.js.map}

@@ -1 +1 @@
-{"file":"p-fgVZM2q9.js","mappings":";;AAAA,MAAM,YAAY,GAAG,MAAM,CAAC;AAC5B;AACA,0pMAA0pM,CAAC;;MCU9oM,SAAS,iBAAAA,kBAAA,CAAA,MAAA,SAAA,SAAAC,CAAA,CAAA;AALtB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAO2B,QAAA,IAAK,CAAA,KAAA,GAAiB,MAAM;;AAE5B,QAAA,IAAU,CAAA,UAAA,GAA6B,SAAS;;AAEhD,QAAA,IAAW,CAAA,WAAA,GAA6B,SAAS;;AAEjD,QAAA,IAAU,CAAA,UAAA,GAA6B,SAAS;;AAEhD,QAAA,IAAU,CAAA,UAAA,GAA6B,SAAS;;AAGhD,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;;AAGzB,QAAA,IAAG,CAAA,GAAA,GAAwB,OAAO;AAkB5D;IAdC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,YAAY,EAAE,IAAI;SACnB;QAED,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,OAAO,EAAA,EACjB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAQ,CAAA,EAC1B,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-ratio/stzh-ratio.scss?tag=stzh-ratio&encapsulation=shadow","src/components/stzh-ratio/stzh-ratio.tsx"],"sourcesContent":["@use \"sass:map\";\n@use \"sass:list\";\n\n/**\n * @prop --ratio: Ratio (e.g. 16 / 9)\n * @prop --background-color: Background color of ratio area\n * @prop --max-height: Max height of the ratio, useful when viewport is huge\n * @prop --overflow: In combination with max height you might wanna hide overflow\n *\n * @prop --stzh-ratio-background-color: **Global**: Background color of ratios\n */\n\n:host {\n  --background-color: #{$ratioBackgroundColor};\n  --ratio: #{list.nth(map.get($ratios, $ratioDefault), 1)} /\n    #{list.nth(map.get($ratios, $ratioDefault), 2)};\n  --max-height: inherit;\n  --overflow: inherit;\n\n  ::slotted(*) {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    inset: 0;\n    object-fit: cover;\n  }\n\n  ::slotted(.stzh-card-searchresult__image-placeholder) {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n    color: var(--placeholder-image-color);\n  }\n}\n\n:host([fit=\"contain\"]) ::slotted(*) {\n  object-fit: contain;\n}\n\n/* Ratio variants */\n\n:host([portrait]:not([portrait=\"false\"])) {\n  --ratio: #{list.nth(map.get($ratios, $ratioDefault), 2)} /\n    #{list.nth(map.get($ratios, $ratioDefault), 1)};\n}\n\n@mixin ratioProps($breakpoint: null) {\n  @each $ratio, $value in $ratios {\n    $firstNr: list.nth($value, 1);\n    $secondNr: list.nth($value, 2);\n\n    @if $breakpoint {\n      :host([ratio-#{$breakpoint}=\"#{$ratio}\"]) {\n        @include mq($from: $breakpoint) {\n          --ratio: #{$firstNr} / #{$secondNr};\n        }\n      }\n\n      :host(\n        [ratio-#{$breakpoint}=\"#{$ratio}\"][portrait]:not([portrait=\"false\"])\n      ) {\n        @include mq($from: $breakpoint) {\n          --ratio: #{$secondNr} / #{$firstNr};\n        }\n      }\n    } @else {\n      :host([ratio=\"#{$ratio}\"]) {\n        --ratio: #{$firstNr} / #{$secondNr};\n      }\n\n      :host([ratio=\"#{$ratio}\"][portrait]:not([portrait=\"false\"])) {\n        --ratio: #{$secondNr} / #{$firstNr};\n      }\n    }\n  }\n}\n\n@include ratioProps();\n\n@each $breakpoint, $size in $breakpoints {\n  @include ratioProps($breakpoint);\n}\n\n.stzh-ratio {\n  position: relative;\n  width: 100%;\n  aspect-ratio: var(--stzh-ratio, var(--ratio));\n  background: var(--background-color);\n  max-height: var(--max-height);\n  overflow: var(--overflow);\n}\n","import { Component, Element, h, Host, Prop } from \"@stencil/core\";\n\nimport { Layout } from \"../../index\";\n\n/**\n * @slot - Slot for e.g. image or video\n */\n@Component({\n  tag: \"stzh-ratio\",\n  styleUrl: \"stzh-ratio.scss\",\n  shadow: true,\n})\nexport class StzhRatio {\n  /** Aspect ratio */\n  @Prop({ reflect: true }) ratio: Layout.Ratio = \"16:9\";\n  /** Aspect ratio above small breakpoint */\n  @Prop({ reflect: true }) ratioSmall: Layout.Ratio | \"inherit\" = \"inherit\";\n  /** Aspect ratio above medium breakpoint */\n  @Prop({ reflect: true }) ratioMedium: Layout.Ratio | \"inherit\" = \"inherit\";\n  /** Aspect ratio above large breakpoint */\n  @Prop({ reflect: true }) ratioLarge: Layout.Ratio | \"inherit\" = \"inherit\";\n  /** Aspect ratio above ultra breakpoint */\n  @Prop({ reflect: true }) ratioUltra: Layout.Ratio | \"inherit\" = \"inherit\";\n\n  /** Whether aspect ratio is in portrait mode */\n  @Prop({ reflect: true }) portrait: boolean = false;\n\n  /** Fit mode */\n  @Prop({ reflect: true }) fit: \"cover\" | \"contain\" = \"cover\";\n\n  @Element() element: HTMLStzhRatioElement;\n\n  render() {\n    const classes = {\n      \"stzh-ratio\": true,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <slot name=\"image\"></slot>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-B6zrbO8N.js","mappings":";;AAAA,MAAM,YAAY,GAAG,MAAM,CAAC;AAC5B;AACA,0pMAA0pM,CAAC;;MCU9oM,SAAS,iBAAAA,kBAAA,CAAA,MAAA,SAAA,SAAAC,CAAA,CAAA;AALtB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAO2B,QAAA,IAAK,CAAA,KAAA,GAAiB,MAAM;;AAE5B,QAAA,IAAU,CAAA,UAAA,GAA6B,SAAS;;AAEhD,QAAA,IAAW,CAAA,WAAA,GAA6B,SAAS;;AAEjD,QAAA,IAAU,CAAA,UAAA,GAA6B,SAAS;;AAEhD,QAAA,IAAU,CAAA,UAAA,GAA6B,SAAS;;AAGhD,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;;AAGzB,QAAA,IAAG,CAAA,GAAA,GAAwB,OAAO;AAkB5D;IAdC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,YAAY,EAAE,IAAI;SACnB;QAED,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,OAAO,EAAA,EACjB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAQ,CAAA,EAC1B,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-ratio/stzh-ratio.scss?tag=stzh-ratio&encapsulation=shadow","src/components/stzh-ratio/stzh-ratio.tsx"],"sourcesContent":["@use \"sass:map\";\n@use \"sass:list\";\n\n/**\n * @prop --ratio: Ratio (e.g. 16 / 9)\n * @prop --background-color: Background color of ratio area\n * @prop --max-height: Max height of the ratio, useful when viewport is huge\n * @prop --overflow: In combination with max height you might wanna hide overflow\n *\n * @prop --stzh-ratio-background-color: **Global**: Background color of ratios\n */\n\n:host {\n  --background-color: #{$ratioBackgroundColor};\n  --ratio: #{list.nth(map.get($ratios, $ratioDefault), 1)} /\n    #{list.nth(map.get($ratios, $ratioDefault), 2)};\n  --max-height: inherit;\n  --overflow: inherit;\n\n  ::slotted(*) {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    inset: 0;\n    object-fit: cover;\n  }\n\n  ::slotted(.stzh-card-searchresult__image-placeholder) {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n    color: var(--placeholder-image-color);\n  }\n}\n\n:host([fit=\"contain\"]) ::slotted(*) {\n  object-fit: contain;\n}\n\n/* Ratio variants */\n\n:host([portrait]:not([portrait=\"false\"])) {\n  --ratio: #{list.nth(map.get($ratios, $ratioDefault), 2)} /\n    #{list.nth(map.get($ratios, $ratioDefault), 1)};\n}\n\n@mixin ratioProps($breakpoint: null) {\n  @each $ratio, $value in $ratios {\n    $firstNr: list.nth($value, 1);\n    $secondNr: list.nth($value, 2);\n\n    @if $breakpoint {\n      :host([ratio-#{$breakpoint}=\"#{$ratio}\"]) {\n        @include mq($from: $breakpoint) {\n          --ratio: #{$firstNr} / #{$secondNr};\n        }\n      }\n\n      :host(\n        [ratio-#{$breakpoint}=\"#{$ratio}\"][portrait]:not([portrait=\"false\"])\n      ) {\n        @include mq($from: $breakpoint) {\n          --ratio: #{$secondNr} / #{$firstNr};\n        }\n      }\n    } @else {\n      :host([ratio=\"#{$ratio}\"]) {\n        --ratio: #{$firstNr} / #{$secondNr};\n      }\n\n      :host([ratio=\"#{$ratio}\"][portrait]:not([portrait=\"false\"])) {\n        --ratio: #{$secondNr} / #{$firstNr};\n      }\n    }\n  }\n}\n\n@include ratioProps();\n\n@each $breakpoint, $size in $breakpoints {\n  @include ratioProps($breakpoint);\n}\n\n.stzh-ratio {\n  position: relative;\n  width: 100%;\n  aspect-ratio: var(--stzh-ratio, var(--ratio));\n  background: var(--background-color);\n  max-height: var(--max-height);\n  overflow: var(--overflow);\n}\n","import { Component, Element, h, Host, Prop } from \"@stencil/core\";\n\nimport { Layout } from \"../../index\";\n\n/**\n * @slot - Slot for e.g. image or video\n */\n@Component({\n  tag: \"stzh-ratio\",\n  styleUrl: \"stzh-ratio.scss\",\n  shadow: true,\n})\nexport class StzhRatio {\n  /** Aspect ratio */\n  @Prop({ reflect: true }) ratio: Layout.Ratio = \"16:9\";\n  /** Aspect ratio above small breakpoint */\n  @Prop({ reflect: true }) ratioSmall: Layout.Ratio | \"inherit\" = \"inherit\";\n  /** Aspect ratio above medium breakpoint */\n  @Prop({ reflect: true }) ratioMedium: Layout.Ratio | \"inherit\" = \"inherit\";\n  /** Aspect ratio above large breakpoint */\n  @Prop({ reflect: true }) ratioLarge: Layout.Ratio | \"inherit\" = \"inherit\";\n  /** Aspect ratio above ultra breakpoint */\n  @Prop({ reflect: true }) ratioUltra: Layout.Ratio | \"inherit\" = \"inherit\";\n\n  /** Whether aspect ratio is in portrait mode */\n  @Prop({ reflect: true }) portrait: boolean = false;\n\n  /** Fit mode */\n  @Prop({ reflect: true }) fit: \"cover\" | \"contain\" = \"cover\";\n\n  @Element() element: HTMLStzhRatioElement;\n\n  render() {\n    const classes = {\n      \"stzh-ratio\": true,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <slot name=\"image\"></slot>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-Cz5bXTUE.js → p-B8VeEjIy.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, e as Host, t as transformTag } from './p-NuLYh9v8.js';
+import { p as proxyCustomElement, H, h, e as Host, t as transformTag } from './p-ptAFQZzh.js';
 
 const stzhIconCss = () => `: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{}: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{--size:var(--stzh-icon-size);--color:var(--stzh-icon-color);--vertical-align:var(--stzh-icon-vertical-align);display:inline-flex;justify-content:center;align-items:center;color:var(--color);vertical-align:var(--vertical-align);width:var(--size);height:var(--size)}@media print{:host{-webkit-print-color-adjust:exact;print-color-adjust:exact}}.stzh-icon{display:none}.stzh-icon__svg{width:var(--size);height:var(--size)}`;
 
@@ -122,6 +122,6 @@ function defineCustomElement() {
 }
 
 export { StzhIcon as S, defineCustomElement as d };
-//# sourceMappingURL=p-Cz5bXTUE.js.map
+//# sourceMappingURL=p-B8VeEjIy.js.map
 
-//# sourceMappingURL=p-Cz5bXTUE.js.map
+//# sourceMappingURL=p-B8VeEjIy.js.map

package/dist/components/{p-Cz5bXTUE.js.map → p-B8VeEjIy.js.map}

@@ -1 +1 @@
-{"file":"p-Cz5bXTUE.js","mappings":";;AAAA,MAAM,WAAW,GAAG,MAAM,CAAC,8zCAA8zC,CAAC;;ACE11C,IAAI,WAAW,GAAG,CAAC;AAEnB;AACA,MAAM,SAAS,GAAG,IAAI,GAAG,EAA2B;MAOvC,QAAQ,iBAAAA,kBAAA,CAAA,MAAA,QAAA,SAAAC,CAAA,CAAA;AALrB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAME;;;AAGG;AACK,QAAA,IAAI,CAAA,IAAA,GAAW,EAAE;AAEzB;;;AAGG;AACgC,QAAA,IAAS,CAAA,SAAA,GAAW,EAAE;AAIhD,QAAA,IAAO,CAAA,OAAA,GAAW,EAAE;AACpB,QAAA,IAAW,CAAA,WAAA,GAAW,MAAM;AAwFtC;IArFC,MAAM,WAAW,CAAC,IAAY,EAAA;AAC5B,QAAA,IAAI,CAAC,WAAW,GAAG,MAAM;QAEzB,IAAI,IAAI,EAAE;AACR,YAAA,IAAI,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;gBACvB,IAAI,CAAC,OAAO,GAAG,MAAM,SAAS,CAAC,GAAG,CAAC,IAAI,CAAE;gBACzC,IAAI,CAAC,6BAA6B,EAAE;gBACpC,IAAI,CAAC,QAAQ,EAAE;;iBACV;AACL,gBAAA,MAAM,eAAe,GAAG,KAAK,CAAC,GAAG,MAAM,CAAC,cAAc,CAAC,SAAS,CAAe,YAAA,EAAA,IAAI,CAAC,IAAI,MAAM;qBAC3F,IAAI,CAAC,QAAQ,IAAG;AACf,oBAAA,IAAI,QAAQ,CAAC,MAAM,KAAK,GAAG,EAAE;AAC3B,wBAAA,OAAO,QAAQ,CAAC,IAAI,EAAE;;AAExB,oBAAA,MAAM,IAAI,KAAK,CAAC,sBAAsB,CAAC;AACzC,iBAAC;qBACA,IAAI,CAAC,SAAS,IAAG;AAChB,oBAAA,MAAM,MAAM,GAAG,IAAI,SAAS,EAAE;oBAC9B,MAAM,MAAM,GAAG,MAAM,CAAC,eAAe,CAAC,SAAS,EAAE,eAAe,CAAC;AACjE,oBAAA,MAAM,UAAU,GAAG,MAAM,CAAC,eAAwC;AAClE,oBAAA,UAAU,CAAC,SAAS,CAAC,GAAG,CAAC,gBAAgB,CAAC;oBAE1C,OAAO,UAAU,CAAC,SAAS;AAC7B,iBAAC,CAAC;AAEJ,gBAAA,SAAS,CAAC,GAAG,CAAC,IAAI,EAAE,eAAe,CAAC;AAEpC,gBAAA,IAAI,CAAC,OAAO,GAAG,MAAM,eAAe;gBACpC,IAAI,CAAC,6BAA6B,EAAE;gBACpC,IAAI,CAAC,QAAQ,EAAE;;;aAEZ;AACL,YAAA,IAAI,CAAC,UAAU,GAAG,IAAI;AACtB,YAAA,IAAI,CAAC,OAAO,GAAG,EAAE;;;AAKrB,IAAA,gBAAgB,CAAC,SAAiB,EAAA;QAChC,IAAI,CAAC,IAAI,CAAC,UAAU;YAAE;AAEtB,QAAA,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,aAAa,EAAE,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AACzE,QAAA,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,WAAW,EAAE,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC;QACvE,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,iBAAiB,EAAE,SAAS,GAAG,CAAG,EAAA,IAAI,CAAC,MAAM,CAAA,MAAA,CAAQ,GAAG,IAAI,CAAC;QAE1F,IAAI,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC;QAElD,IAAI,CAAC,KAAK,EAAE;AACV,YAAA,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC;YACvC,KAAK,CAAC,EAAE,GAAG,CAAA,EAAG,IAAI,CAAC,MAAM,QAAQ;AACjC,YAAA,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,CAAC;;AAGpC,QAAA,KAAK,CAAC,SAAS,GAAG,SAAS;QAC3B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,SAAS;;AAM1C,IAAA,MAAM,iBAAiB,GAAA;AACrB,QAAA,IAAI,CAAC,MAAM,GAAG,aAAa,WAAW,EAAE,EAAE;QAC1C,MAAM,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC;;IAG3B,6BAA6B,GAAA;AACnC,QAAA,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,SAAS,CAAC;;IAG/B,QAAQ,GAAA;;;;AAId,QAAA,MAAM,CAAC,UAAU,CAAC,MAAK;AACrB,YAAA,IAAI,CAAC,WAAW,GAAG,UAAU;SAC9B,EAAE,CAAC,CAAC;;IAGP,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,WAAW,EAAC,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE,EAAE,SAAS,EAAE,IAAI,CAAC,OAAO,EAAA,CAAQ,CACvF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"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}
+{"file":"p-B8VeEjIy.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"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-BHivTAEt.js → p-B8oKMYV6.js}

@@ -1,7 +1,7 @@
-import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-NuLYh9v8.js';
-import { d as defineCustomElement$3 } from './p-Db3dTAjX.js';
-import { d as defineCustomElement$2 } from './p-Cz5bXTUE.js';
-import { d as defineCustomElement$1 } from './p-Dq7hTryw.js';
+import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-ptAFQZzh.js';
+import { d as defineCustomElement$3 } from './p-BaC_gScF.js';
+import { d as defineCustomElement$2 } from './p-B8VeEjIy.js';
+import { d as defineCustomElement$1 } from './p-BK7VtwAc.js';
 
 const stzhClampCss = () => `: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{}: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}stzh-clamp{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}stzh-clamp[hidden],stzh-clamp[stzh-hidden]{display:none}stzh-clamp::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}stzh-clamp *,stzh-clamp *::before,stzh-clamp *::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)}stzh-clamp{}stzh-clamp .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}stzh-clamp .stzh-fylingfocus-focused{outline-style:none !important}stzh-clamp .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}stzh-clamp{--current-lines:var(--lines, 0)}@media screen and (min-width: 600px){stzh-clamp{--current-lines:var(--lines-small, var(--lines, 0))}}@media screen and (min-width: 900px){stzh-clamp{--current-lines:var(--lines-medium, var(--lines-small, var(--lines, 0)))}}@media screen and (min-width: 1260px){stzh-clamp{--current-lines:var(
       --lines-large,
@@ -163,6 +163,6 @@ function defineCustomElement() {
 }
 
 export { StzhClamp as S, defineCustomElement as d };
-//# sourceMappingURL=p-BHivTAEt.js.map
+//# sourceMappingURL=p-B8oKMYV6.js.map
 
-//# sourceMappingURL=p-BHivTAEt.js.map
+//# sourceMappingURL=p-B8oKMYV6.js.map

package/dist/components/{p-BHivTAEt.js.map → p-B8oKMYV6.js.map}

@@ -1 +1 @@
-{"file":"p-BHivTAEt.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-clamp/stzh-clamp.scss?tag=stzh-clamp","src/components/stzh-clamp/stzh-clamp.tsx"],"sourcesContent":["/**\n * @prop --current-lines: Currently clamped lines number (can be used instead of `lines-{BREAKPOINT}` attributes)\n */\n\nstzh-clamp {\n  @include host;\n  --current-lines: var(--lines, 0);\n\n  @include mq($from: small) {\n    --current-lines: var(--lines-small, var(--lines, 0));\n  }\n\n  @include mq($from: medium) {\n    --current-lines: var(--lines-medium, var(--lines-small, var(--lines, 0)));\n  }\n\n  @include mq($from: large) {\n    --current-lines: var(\n      --lines-large,\n      var(--lines-medium, var(--lines-small, var(--lines, 0)))\n    );\n  }\n\n  @include mq($from: ultra) {\n    --current-lines: var(\n      --lines-ultra,\n      var(\n        --lines-large,\n        var(--lines-medium, var(--lines-small, var(--lines, 0)))\n      )\n    );\n  }\n\n  width: 100%;\n  color: inherit;\n  font-family: inherit;\n  font-weight: inherit;\n  font-style: inherit;\n  font-size: inherit;\n  line-height: inherit;\n}\n\n.stzh-clamp {\n  position: relative;\n\n  &__text {\n    @include wordWrap;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n\n    & > *:first-child {\n      margin-top: 0 !important;\n    }\n\n    & > *:last-child {\n      margin-bottom: 0 !important;\n    }\n\n    &.is-clone {\n      position: absolute;\n      visibility: hidden;\n      opacity: 0;\n      top: 0;\n      left: 0;\n      width: 100%;\n    }\n  }\n\n  &__trigger {\n    @include mq($from: medium) {\n      margin-top: space(\"xxsmall\");\n    }\n  }\n\n  &--is-not-expanded &__text,\n  &__text.is-clone {\n    -webkit-line-clamp: var(--current-lines);\n    line-clamp: var(--current-lines);\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from \"@stencil/core\";\n\nimport { StzhClampClampEvent, StzhClampExpandEvent } from \"../../index\";\n\nimport { StzhClampLocalizedText } from \"./stzh-clamp.localization\";\n\n/**\n * @slot - Slot for clamp text\n */\n@Component({\n  tag: \"stzh-clamp\",\n  styleUrl: \"stzh-clamp.scss\",\n})\nexport class StzhClamp {\n  /** Translation strings */\n  @Prop() localization: StzhClampLocalizedText;\n\n  /** Line number */\n  @Prop() lines: number = 1;\n  /** Line number above small breakpoint */\n  @Prop() linesSmall: number = 0;\n  /** Line number above medium breakpoint */\n  @Prop() linesMedium: number = 0;\n  /** Line number above large breakpoint */\n  @Prop() linesLarge: number = 0;\n  /** Line number above ultra breakpoint */\n  @Prop() linesUltra: number = 0;\n\n  /** Whether expand link is shown */\n  @Prop() showExpandLink: boolean = false;\n\n  /** Whether clamping is expanded */\n  @Prop({ mutable: true, reflect: true }) expanded: boolean = false;\n\n  /** Whether the text is currently clamped (readonly) */\n  @Prop({ mutable: true, reflect: true }) clamped: boolean = false;\n\n  @Element() element: HTMLStzhClampElement;\n\n  /** Event when clamping state changed */\n  @Event() stzhClamp: EventEmitter<StzhClampClampEvent>;\n\n  /** Event when expanding state changed */\n  @Event() stzhExpand: EventEmitter<StzhClampExpandEvent>;\n\n  @Method()\n  async update() {\n    this.textCloneElement.innerHTML = this.textElement.innerHTML;\n    this.updateClamped();\n  }\n\n  private textElement: HTMLElement;\n  private textCloneElement: HTMLElement;\n\n  private debounceResize: number;\n  private resizeObserver: ResizeObserver;\n  private mutationObserver: MutationObserver;\n  private renderPromiseResolve: (value?: unknown) => void;\n\n  private updateClamped = () => {\n    if (!this.textCloneElement) {\n      return;\n    }\n\n    const beforeClamped = this.clamped;\n    this.clamped = this.textCloneElement.scrollHeight > this.textCloneElement.clientHeight;\n\n    if (beforeClamped !== this.clamped) {\n      this.stzhClamp.emit({\n        component: \"stzh-clamp\",\n        clamped: this.clamped,\n      });\n    }\n  };\n\n  private handleResize = () => {\n    if (this.debounceResize) {\n      window.cancelAnimationFrame(this.debounceResize);\n    }\n\n    this.debounceResize = requestAnimationFrame(this.updateClamped);\n  };\n\n  private handleMutaton = () => {\n    this.update();\n  };\n\n  private handleExpandClick = async () => {\n    this.expanded = !this.expanded;\n    await this.waitForNextRender();\n\n    this.stzhExpand.emit({\n      component: \"stzh-clamp\",\n      expanded: this.expanded,\n    });\n  };\n\n  private waitForNextRender() {\n    return new Promise(resolve => (this.renderPromiseResolve = resolve));\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"clamp\");\n    }\n  }\n\n  componentDidLoad() {\n    this.mutationObserver = new MutationObserver(this.handleMutaton);\n    this.mutationObserver.observe(this.textElement, {\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  componentDidRender() {\n    if (this.renderPromiseResolve) {\n      this.renderPromiseResolve();\n    }\n\n    this.update();\n  }\n\n  connectedCallback() {\n    this.resizeObserver = new ResizeObserver(this.handleResize);\n    this.resizeObserver.observe(this.element);\n  }\n\n  disconnectedCallback() {\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n\n    if (this.mutationObserver) {\n      this.mutationObserver.disconnect();\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-clamp\": true,\n      \"stzh-clamp--is-not-expanded\": !this.expanded,\n    };\n\n    return (\n      <Host\n        style={{\n          \"--lines\": this.lines ? this.lines.toString() : null,\n          \"--lines-small\": this.linesSmall ? this.linesSmall.toString() : null,\n          \"--lines-medium\": this.linesMedium ? this.linesMedium.toString() : null,\n          \"--lines-large\": this.linesLarge ? this.linesLarge.toString() : null,\n          \"--lines-ultra\": this.linesUltra ? this.linesUltra.toString() : null,\n        }}\n      >\n        <div class={classes}>\n          <div ref={el => (this.textElement = el as HTMLDivElement)} class=\"stzh-clamp__text\">\n            <slot></slot>\n          </div>\n\n          <div\n            ref={el => (this.textCloneElement = el as HTMLDivElement)}\n            class=\"stzh-clamp__text is-clone rs_skip\"\n            aria-hidden=\"true\"\n          ></div>\n\n          {this.showExpandLink && this.clamped && (\n            <stzh-link\n              class=\"stzh-clamp__trigger\"\n              a11yTabindex=\"-1\"\n              aria-hidden=\"true\"\n              onClick={this.handleExpandClick}\n            >\n              {!this.expanded ? this.localization.showMore : this.localization.showLess}\n            </stzh-link>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-B8oKMYV6.js","mappings":";;;;;AAAA,MAAM,YAAY,GAAG,MAAM,CAAC;AAC5B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kxBAAkxB,CAAC;;MCItwB,SAAS,iBAAAA,kBAAA,CAAA,MAAA,SAAA,SAAAC,CAAA,CAAA;AAJtB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;;AASU,QAAA,IAAK,CAAA,KAAA,GAAW,CAAC;;AAEjB,QAAA,IAAU,CAAA,UAAA,GAAW,CAAC;;AAEtB,QAAA,IAAW,CAAA,WAAA,GAAW,CAAC;;AAEvB,QAAA,IAAU,CAAA,UAAA,GAAW,CAAC;;AAEtB,QAAA,IAAU,CAAA,UAAA,GAAW,CAAC;;AAGtB,QAAA,IAAc,CAAA,cAAA,GAAY,KAAK;;AAGC,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;;AAGzB,QAAA,IAAO,CAAA,OAAA,GAAY,KAAK;AAwBxD,QAAA,IAAa,CAAA,aAAA,GAAG,MAAK;AAC3B,YAAA,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE;gBAC1B;;AAGF,YAAA,MAAM,aAAa,GAAG,IAAI,CAAC,OAAO;AAClC,YAAA,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,gBAAgB,CAAC,YAAY,GAAG,IAAI,CAAC,gBAAgB,CAAC,YAAY;AAEtF,YAAA,IAAI,aAAa,KAAK,IAAI,CAAC,OAAO,EAAE;AAClC,gBAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;AAClB,oBAAA,SAAS,EAAE,YAAY;oBACvB,OAAO,EAAE,IAAI,CAAC,OAAO;AACtB,iBAAA,CAAC;;AAEN,SAAC;AAEO,QAAA,IAAY,CAAA,YAAA,GAAG,MAAK;AAC1B,YAAA,IAAI,IAAI,CAAC,cAAc,EAAE;AACvB,gBAAA,MAAM,CAAC,oBAAoB,CAAC,IAAI,CAAC,cAAc,CAAC;;YAGlD,IAAI,CAAC,cAAc,GAAG,qBAAqB,CAAC,IAAI,CAAC,aAAa,CAAC;AACjE,SAAC;AAEO,QAAA,IAAa,CAAA,aAAA,GAAG,MAAK;YAC3B,IAAI,CAAC,MAAM,EAAE;AACf,SAAC;AAEO,QAAA,IAAiB,CAAA,iBAAA,GAAG,YAAW;AACrC,YAAA,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ;AAC9B,YAAA,MAAM,IAAI,CAAC,iBAAiB,EAAE;AAE9B,YAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;AACnB,gBAAA,SAAS,EAAE,YAAY;gBACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;AACxB,aAAA,CAAC;AACJ,SAAC;AAoFF;AArIC,IAAA,MAAM,MAAM,GAAA;QACV,IAAI,CAAC,gBAAgB,CAAC,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC,SAAS;QAC5D,IAAI,CAAC,aAAa,EAAE;;IAiDd,iBAAiB,GAAA;AACvB,QAAA,OAAO,IAAI,OAAO,CAAC,OAAO,KAAK,IAAI,CAAC,oBAAoB,GAAG,OAAO,CAAC,CAAC;;AAGtE,IAAA,MAAM,iBAAiB,GAAA;AACrB,QAAA,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;AACtB,YAAA,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC;;;IAIlG,gBAAgB,GAAA;QACd,IAAI,CAAC,gBAAgB,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,aAAa,CAAC;QAChE,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE;AAC9C,YAAA,SAAS,EAAE,IAAI;AACf,YAAA,OAAO,EAAE,IAAI;AACd,SAAA,CAAC;;IAGJ,kBAAkB,GAAA;AAChB,QAAA,IAAI,IAAI,CAAC,oBAAoB,EAAE;YAC7B,IAAI,CAAC,oBAAoB,EAAE;;QAG7B,IAAI,CAAC,MAAM,EAAE;;IAGf,iBAAiB,GAAA;QACf,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,IAAI,CAAC,YAAY,CAAC;QAC3D,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC;;IAG3C,oBAAoB,GAAA;AAClB,QAAA,IAAI,IAAI,CAAC,cAAc,EAAE;AACvB,YAAA,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE;;AAGlC,QAAA,IAAI,IAAI,CAAC,gBAAgB,EAAE;AACzB,YAAA,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE;;;IAItC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,YAAY,EAAE,IAAI;AAClB,YAAA,6BAA6B,EAAE,CAAC,IAAI,CAAC,QAAQ;SAC9C;QAED,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;AACL,gBAAA,SAAS,EAAE,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,GAAG,IAAI;AACpD,gBAAA,eAAe,EAAE,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC,QAAQ,EAAE,GAAG,IAAI;AACpE,gBAAA,gBAAgB,EAAE,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE,GAAG,IAAI;AACvE,gBAAA,eAAe,EAAE,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC,QAAQ,EAAE,GAAG,IAAI;AACpE,gBAAA,eAAe,EAAE,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC,QAAQ,EAAE,GAAG,IAAI;AACrE,aAAA,EAAA,EAED,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,OAAO,EAAA,EACjB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,WAAW,GAAG,EAAoB,CAAC,EAAE,KAAK,EAAC,kBAAkB,EAAA,EACjF,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,EAEN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,gBAAgB,GAAG,EAAoB,CAAC,EACzD,KAAK,EAAC,mCAAmC,EAAA,aAAA,EAC7B,MAAM,EACb,CAAA,EAEN,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,OAAO,KAClC,CAAA,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,qBAAqB,EAC3B,YAAY,EAAC,IAAI,EACL,aAAA,EAAA,MAAM,EAClB,OAAO,EAAE,IAAI,CAAC,iBAAiB,EAAA,EAE9B,CAAC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,YAAY,CAAC,QAAQ,GAAG,IAAI,CAAC,YAAY,CAAC,QAAQ,CAC/D,CACb,CACG,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-clamp/stzh-clamp.scss?tag=stzh-clamp","src/components/stzh-clamp/stzh-clamp.tsx"],"sourcesContent":["/**\n * @prop --current-lines: Currently clamped lines number (can be used instead of `lines-{BREAKPOINT}` attributes)\n */\n\nstzh-clamp {\n  @include host;\n  --current-lines: var(--lines, 0);\n\n  @include mq($from: small) {\n    --current-lines: var(--lines-small, var(--lines, 0));\n  }\n\n  @include mq($from: medium) {\n    --current-lines: var(--lines-medium, var(--lines-small, var(--lines, 0)));\n  }\n\n  @include mq($from: large) {\n    --current-lines: var(\n      --lines-large,\n      var(--lines-medium, var(--lines-small, var(--lines, 0)))\n    );\n  }\n\n  @include mq($from: ultra) {\n    --current-lines: var(\n      --lines-ultra,\n      var(\n        --lines-large,\n        var(--lines-medium, var(--lines-small, var(--lines, 0)))\n      )\n    );\n  }\n\n  width: 100%;\n  color: inherit;\n  font-family: inherit;\n  font-weight: inherit;\n  font-style: inherit;\n  font-size: inherit;\n  line-height: inherit;\n}\n\n.stzh-clamp {\n  position: relative;\n\n  &__text {\n    @include wordWrap;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n\n    & > *:first-child {\n      margin-top: 0 !important;\n    }\n\n    & > *:last-child {\n      margin-bottom: 0 !important;\n    }\n\n    &.is-clone {\n      position: absolute;\n      visibility: hidden;\n      opacity: 0;\n      top: 0;\n      left: 0;\n      width: 100%;\n    }\n  }\n\n  &__trigger {\n    @include mq($from: medium) {\n      margin-top: space(\"xxsmall\");\n    }\n  }\n\n  &--is-not-expanded &__text,\n  &__text.is-clone {\n    -webkit-line-clamp: var(--current-lines);\n    line-clamp: var(--current-lines);\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from \"@stencil/core\";\n\nimport { StzhClampClampEvent, StzhClampExpandEvent } from \"../../index\";\n\nimport { StzhClampLocalizedText } from \"./stzh-clamp.localization\";\n\n/**\n * @slot - Slot for clamp text\n */\n@Component({\n  tag: \"stzh-clamp\",\n  styleUrl: \"stzh-clamp.scss\",\n})\nexport class StzhClamp {\n  /** Translation strings */\n  @Prop() localization: StzhClampLocalizedText;\n\n  /** Line number */\n  @Prop() lines: number = 1;\n  /** Line number above small breakpoint */\n  @Prop() linesSmall: number = 0;\n  /** Line number above medium breakpoint */\n  @Prop() linesMedium: number = 0;\n  /** Line number above large breakpoint */\n  @Prop() linesLarge: number = 0;\n  /** Line number above ultra breakpoint */\n  @Prop() linesUltra: number = 0;\n\n  /** Whether expand link is shown */\n  @Prop() showExpandLink: boolean = false;\n\n  /** Whether clamping is expanded */\n  @Prop({ mutable: true, reflect: true }) expanded: boolean = false;\n\n  /** Whether the text is currently clamped (readonly) */\n  @Prop({ mutable: true, reflect: true }) clamped: boolean = false;\n\n  @Element() element: HTMLStzhClampElement;\n\n  /** Event when clamping state changed */\n  @Event() stzhClamp: EventEmitter<StzhClampClampEvent>;\n\n  /** Event when expanding state changed */\n  @Event() stzhExpand: EventEmitter<StzhClampExpandEvent>;\n\n  @Method()\n  async update() {\n    this.textCloneElement.innerHTML = this.textElement.innerHTML;\n    this.updateClamped();\n  }\n\n  private textElement: HTMLElement;\n  private textCloneElement: HTMLElement;\n\n  private debounceResize: number;\n  private resizeObserver: ResizeObserver;\n  private mutationObserver: MutationObserver;\n  private renderPromiseResolve: (value?: unknown) => void;\n\n  private updateClamped = () => {\n    if (!this.textCloneElement) {\n      return;\n    }\n\n    const beforeClamped = this.clamped;\n    this.clamped = this.textCloneElement.scrollHeight > this.textCloneElement.clientHeight;\n\n    if (beforeClamped !== this.clamped) {\n      this.stzhClamp.emit({\n        component: \"stzh-clamp\",\n        clamped: this.clamped,\n      });\n    }\n  };\n\n  private handleResize = () => {\n    if (this.debounceResize) {\n      window.cancelAnimationFrame(this.debounceResize);\n    }\n\n    this.debounceResize = requestAnimationFrame(this.updateClamped);\n  };\n\n  private handleMutaton = () => {\n    this.update();\n  };\n\n  private handleExpandClick = async () => {\n    this.expanded = !this.expanded;\n    await this.waitForNextRender();\n\n    this.stzhExpand.emit({\n      component: \"stzh-clamp\",\n      expanded: this.expanded,\n    });\n  };\n\n  private waitForNextRender() {\n    return new Promise(resolve => (this.renderPromiseResolve = resolve));\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"clamp\");\n    }\n  }\n\n  componentDidLoad() {\n    this.mutationObserver = new MutationObserver(this.handleMutaton);\n    this.mutationObserver.observe(this.textElement, {\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  componentDidRender() {\n    if (this.renderPromiseResolve) {\n      this.renderPromiseResolve();\n    }\n\n    this.update();\n  }\n\n  connectedCallback() {\n    this.resizeObserver = new ResizeObserver(this.handleResize);\n    this.resizeObserver.observe(this.element);\n  }\n\n  disconnectedCallback() {\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n\n    if (this.mutationObserver) {\n      this.mutationObserver.disconnect();\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-clamp\": true,\n      \"stzh-clamp--is-not-expanded\": !this.expanded,\n    };\n\n    return (\n      <Host\n        style={{\n          \"--lines\": this.lines ? this.lines.toString() : null,\n          \"--lines-small\": this.linesSmall ? this.linesSmall.toString() : null,\n          \"--lines-medium\": this.linesMedium ? this.linesMedium.toString() : null,\n          \"--lines-large\": this.linesLarge ? this.linesLarge.toString() : null,\n          \"--lines-ultra\": this.linesUltra ? this.linesUltra.toString() : null,\n        }}\n      >\n        <div class={classes}>\n          <div ref={el => (this.textElement = el as HTMLDivElement)} class=\"stzh-clamp__text\">\n            <slot></slot>\n          </div>\n\n          <div\n            ref={el => (this.textCloneElement = el as HTMLDivElement)}\n            class=\"stzh-clamp__text is-clone rs_skip\"\n            aria-hidden=\"true\"\n          ></div>\n\n          {this.showExpandLink && this.clamped && (\n            <stzh-link\n              class=\"stzh-clamp__trigger\"\n              a11yTabindex=\"-1\"\n              aria-hidden=\"true\"\n              onClick={this.handleExpandClick}\n            >\n              {!this.expanded ? this.localization.showMore : this.localization.showLess}\n            </stzh-link>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-BTdpB4Zw.js → p-BAyjpcR6.js}

@@ -1,13 +1,13 @@
-import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-NuLYh9v8.js';
+import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-ptAFQZzh.js';
 import { m as media, a as addMediaChangeListener, r as removeMediaChangeListener } from './p-CUGRmgip.js';
-import { d as defineCustomElement$8 } from './p-Db3dTAjX.js';
-import { d as defineCustomElement$7 } from './p-By320y5w.js';
-import { d as defineCustomElement$6 } from './p-Cz5bXTUE.js';
-import { d as defineCustomElement$5 } from './p-MTG7y9yt.js';
-import { d as defineCustomElement$4 } from './p-CRHNeJCO.js';
-import { d as defineCustomElement$3 } from './p-B_Cs1tAp.js';
-import { d as defineCustomElement$2 } from './p-BV3gXOYs.js';
-import { d as defineCustomElement$1 } from './p-B03GEdxi.js';
+import { d as defineCustomElement$8 } from './p-BaC_gScF.js';
+import { d as defineCustomElement$7 } from './p-ka1rmhv9.js';
+import { d as defineCustomElement$6 } from './p-B8VeEjIy.js';
+import { d as defineCustomElement$5 } from './p-BwM7stPL.js';
+import { d as defineCustomElement$4 } from './p-DRWnsFU7.js';
+import { d as defineCustomElement$3 } from './p-BIFNWpLw.js';
+import { d as defineCustomElement$2 } from './p-BxhXhWgp.js';
+import { d as defineCustomElement$1 } from './p-BVrrMSYA.js';
 
 const stzhActionsetCss = () => `.sc-stzh-actionset-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-actionset-h,[stzh-hidden].sc-stzh-actionset-h{display:none}.sc-stzh-actionset-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-actionset-h *.sc-stzh-actionset,.sc-stzh-actionset-h *.sc-stzh-actionset::before,.sc-stzh-actionset-h *.sc-stzh-actionset::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-actionset-h .has-focus.sc-stzh-actionset{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-actionset-h .stzh-fylingfocus-focused.sc-stzh-actionset{outline-style:none !important}.sc-stzh-actionset-h .stzh-fylingfocus-focused.sc-stzh-actionset::-moz-focus-inner{border:0 !important}.stzh-actionset__actions.sc-stzh-actionset{display:flex;align-items:center}.stzh-actionset__actions-wrapper.sc-stzh-actionset{position:relative;display:flex;flex-wrap:wrap;overflow:hidden}.stzh-actionset__action.sc-stzh-actionset:not(:last-child){margin-right:var(--stzh-space-xsmall)}.stzh-actionset__action-popover-wrapper.sc-stzh-actionset{opacity:0}.stzh-actionset--has-collapsed-items.sc-stzh-actionset .stzh-actionset__action-popover-wrapper.sc-stzh-actionset{opacity:1}.stzh-actionset--has-collapsed-items.sc-stzh-actionset .stzh-actionset__action-popover.sc-stzh-actionset{--width:auto}@media screen and (min-width: 900px){.stzh-actionset--overflow.sc-stzh-actionset .stzh-actionset__action.sc-stzh-actionset{--white-space:nowrap}}@media screen and (max-width: 599px){.stzh-actionset--stack.sc-stzh-actionset .stzh-actionset__actions.sc-stzh-actionset{flex-direction:column;align-items:stretch}}@media screen and (max-width: 599px){.stzh-actionset--stack.sc-stzh-actionset .stzh-actionset__actions-wrapper.sc-stzh-actionset{flex-direction:column;align-items:stretch}}@media screen and (min-width: 600px){.stzh-actionset--stack.sc-stzh-actionset .stzh-actionset__action.sc-stzh-actionset{--white-space:nowrap}}@media screen and (max-width: 599px){.stzh-actionset--stack.sc-stzh-actionset .stzh-actionset__action.sc-stzh-actionset:not(:last-child){margin-bottom:var(--stzh-space-xsmall);margin-right:0}}@media screen and (max-width: 599px){.stzh-actionset--stack.sc-stzh-actionset .stzh-actionset__action-popover-wrapper.sc-stzh-actionset{margin-top:var(--stzh-space-xsmall)}}@media screen and (max-width: 599px){.stzh-actionset--stack.sc-stzh-actionset:not(.stzh-actionset--has-collapsed-items) .stzh-actionset__action-popover-wrapper.sc-stzh-actionset{display:none}}`;
 
@@ -237,6 +237,6 @@ function defineCustomElement() {
 }
 
 export { StzhActionset as S, defineCustomElement as d };
-//# sourceMappingURL=p-BTdpB4Zw.js.map
+//# sourceMappingURL=p-BAyjpcR6.js.map
 
-//# sourceMappingURL=p-BTdpB4Zw.js.map
+//# sourceMappingURL=p-BAyjpcR6.js.map

package/dist/components/{p-BTdpB4Zw.js.map → p-BAyjpcR6.js.map}

@@ -1 +1 @@
-{"file":"p-BTdpB4Zw.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-actionset/stzh-actionset.scss?tag=stzh-actionset&encapsulation=scoped","src/components/stzh-actionset/stzh-actionset.tsx"],"sourcesContent":[":host {\n}\n\n.stzh-actionset {\n  &__actions {\n    display: flex;\n    align-items: center;\n  }\n\n  &__actions-wrapper {\n    position: relative;\n    display: flex;\n    flex-wrap: wrap;\n    overflow: hidden;\n  }\n\n  &__action {\n    &:not(:last-child) {\n      margin-right: space(\"xsmall\");\n    }\n  }\n\n  &__action-popover-wrapper {\n    opacity: 0;\n  }\n\n  &--has-collapsed-items &__action-popover-wrapper {\n    opacity: 1;\n  }\n\n  &--has-collapsed-items &__action-popover {\n    --width: auto;\n  }\n\n  /* Overflow variant */\n\n  &--overflow &__action {\n    @include mq($from: medium) {\n      --white-space: nowrap;\n    }\n  }\n\n  /* Stack variant */\n\n  &--stack &__actions {\n    @include mq($to: small) {\n      flex-direction: column;\n      align-items: stretch;\n    }\n  }\n\n  &--stack &__actions-wrapper {\n    @include mq($to: small) {\n      flex-direction: column;\n      align-items: stretch;\n    }\n  }\n\n  &--stack &__action {\n    @include mq($from: small) {\n      --white-space: nowrap;\n    }\n\n    &:not(:last-child) {\n      @include mq($to: small) {\n        margin-bottom: space(\"xsmall\");\n        margin-right: 0;\n      }\n    }\n  }\n\n  &--stack &__action-popover-wrapper {\n    @include mq($to: small) {\n      margin-top: space(\"xsmall\");\n    }\n  }\n\n  // Hide more action popover on small if it has no collapsed items\n\n  &--stack:not(#{&}--has-collapsed-items) &__action-popover-wrapper {\n    @include mq($to: small) {\n      display: none;\n    }\n  }\n}\n","import { Component, Host, Prop, h, Element, Watch, Event, EventEmitter, State } from \"@stencil/core\";\n\nimport { StzhActionsetItem, StzhActionsetItemClickEvent } from \"../../index\";\n\nimport { StzhActionsetLocalizedText } from \"./stzh-actionset.localization\";\n\nimport { media, addMediaChangeListener, removeMediaChangeListener } from \"../../utils/media-utils\";\n\nimport { Placement } from \"@floating-ui/dom\";\n\n/**\n */\n@Component({\n  tag: \"stzh-actionset\",\n  styleUrl: \"stzh-actionset.scss\",\n  scoped: true,\n})\nexport class StzhActionset {\n  /** Translation strings */\n  @Prop() localization: StzhActionsetLocalizedText;\n\n  /** Variant determining what position the action buttons are */\n  @Prop({ reflect: true }) variant: \"stack\" | \"overflow\" = \"stack\";\n\n  /** Button variant of popover button (button thats holds collapsed actions) */\n  @Prop({ reflect: true }) popoverButtonVariant: \"\" | \"default\" | \"secondary\" | \"tertiary\" = \"\";\n\n  /** Button size of popover button (button that holds collapsed actions) */\n  @Prop({ reflect: true }) popoverButtonSize: \"\" | \"default\" | \"small\" | \"tiny\" = \"\";\n\n  /** Popover placement of button that holds collapsed actions */\n  @Prop({ reflect: true }) popoverPlacement: Placement = \"bottom-end\";\n\n  /**\n   * Card header actions.\n   * Array of objects that can include the button attributes `id`, `variant`, `icon`, `size`, `iconPosition`, `iconOnly`, `label` or `badge`:\n   * `[{\"id\":\"action-1\", \"icon\": \"alarm-bell\", \"label\": \"Lorem\"}, {\"id\":\"action-2\", \"icon\": \"mail\", \"label\": \"Lorem\"}]`\n   */\n  @Prop() actions: StzhActionsetItem[] | string = [];\n  private _actions: StzhActionsetItem[] = [];\n\n  /** Header action click event */\n  @Event() stzhActionClick: EventEmitter<StzhActionsetItemClickEvent>;\n\n  @Element() element: HTMLStzhActionsetElement;\n\n  @Watch(\"actions\")\n  actionsWatcher(newValue: StzhActionsetItem[] | string) {\n    if (typeof newValue === \"string\") {\n      this._actions = JSON.parse(newValue);\n    } else {\n      this._actions = newValue;\n    }\n  }\n\n  @State() actionsCollapsed: StzhActionsetItem[] = [];\n  @State() dynamicActions: boolean;\n  @State() isSmall: boolean;\n  @State() isMedium: boolean;\n\n  private actionsElement: HTMLElement;\n  private debounceResize: number;\n  private resizeObserver: ResizeObserver;\n\n  private actionClick = (action: StzhActionsetItem, originalEvent: MouseEvent) => {\n    this.stzhActionClick.emit({\n      component: \"stzh-actionset\",\n      action,\n      originalEvent,\n    });\n  };\n\n  private update = () => {\n    this.isSmall = media(\"small\").matches;\n    this.isMedium = media(\"medium\").matches;\n\n    if (!this.actionsElement) {\n      return;\n    }\n\n    Object.assign(this.actionsElement.style, {\n      width: null,\n      height: null,\n    });\n\n    let newActionsVisible = 0;\n\n    if ((this.variant === \"overflow\" && this.isMedium) || (this.variant === \"stack\" && this.isSmall)) {\n      this.dynamicActions = true;\n\n      let newActionsHeight = 0;\n      let newActionsWidth = 0;\n\n      // update height and width\n      Array.from(this.actionsElement.children).forEach((child: HTMLElement) => {\n        // check which item is visible and\n        if (child.offsetTop === 0) {\n          newActionsVisible++;\n\n          const { width, height } = child.getBoundingClientRect();\n\n          const style = getComputedStyle(child);\n          const marginLeft = parseInt(style.marginLeft);\n          const marginRight = parseInt(style.marginRight);\n          const marginTop = parseInt(style.marginTop);\n          const marginBottom = parseInt(style.marginBottom);\n\n          const childWidth = width + marginLeft + marginRight;\n          const childHeight = height + marginTop + marginBottom;\n\n          if (newActionsHeight < childHeight) {\n            newActionsHeight = childHeight;\n          }\n\n          newActionsWidth = newActionsWidth + childWidth;\n        }\n      });\n\n      Object.assign(this.actionsElement.style, {\n        width: `${newActionsWidth}px`,\n        height: `${newActionsHeight}px`,\n      });\n    } else {\n      this.dynamicActions = false;\n\n      if (this.variant === \"overflow\") {\n        newActionsVisible = 0;\n      } else if (this.variant === \"stack\") {\n        newActionsVisible = this._actions.length <= 3 ? this._actions.length : 2;\n      }\n    }\n\n    this.actionsCollapsed = this._actions.slice(newActionsVisible);\n  };\n\n  private handleResize = () => {\n    if (this.debounceResize) {\n      window.cancelAnimationFrame(this.debounceResize);\n    }\n\n    this.debounceResize = requestAnimationFrame(this.update);\n  };\n\n  private mediaChangeHandler = () => {\n    this.actionsCollapsed = [];\n    requestAnimationFrame(this.update);\n  };\n\n  async componentWillLoad() {\n    this.actionsWatcher(this.actions);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"actionset\");\n    }\n  }\n\n  connectedCallback() {\n    addMediaChangeListener(this.mediaChangeHandler);\n\n    this.resizeObserver = new ResizeObserver(this.handleResize);\n    this.resizeObserver.observe(this.element);\n  }\n\n  disconnectedCallback() {\n    removeMediaChangeListener(this.mediaChangeHandler);\n\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  componentDidLoad() {\n    this.update();\n  }\n\n  render() {\n    const classes = {\n      \"stzh-actionset\": true,\n      // \"stzh-actionset--has-dynamic-actions\": this.dynamicActions,\n      \"stzh-actionset--has-collapsed-items\": this.actionsCollapsed.length > 0,\n      [`stzh-actionset--${this.variant}`]: !!this.variant,\n    };\n\n    const Action = (action: StzhActionsetItem, disableTabbing: boolean) => (\n      <stzh-button\n        a11yTabindex={disableTabbing ? \"-1\" : null}\n        class={{\n          \"stzh-actionset__action\": true,\n          \"is-button\": true,\n        }}\n        label={action.label}\n        icon={action.icon}\n        iconPosition={action.iconPosition}\n        iconOnly={action.iconOnly}\n        badge={action.badge}\n        variant={action.variant ? action.variant : this.variant === \"stack\" ? \"secondary\" : \"tertiary\"}\n        size={action.size ? action.size : this.variant === \"stack\" ? \"small\" : \"tiny\"}\n        badgePosition=\"icon\"\n        onClick={e => {\n          this.actionClick(action, e);\n        }}\n      ></stzh-button>\n    );\n\n    return (\n      <Host has-collapsed-items={this.actionsCollapsed.length > 0}>\n        <div class={classes}>\n          <div class=\"stzh-actionset__actions\" role=\"group\">\n            <div ref={el => (this.actionsElement = el as HTMLElement)} class=\"stzh-actionset__actions-wrapper\">\n              {this._actions.map(\n                action =>\n                  (this.dynamicActions || (!this.dynamicActions && this.actionsCollapsed.indexOf(action) === -1)) &&\n                  (action.tooltipContent ? (\n                    <stzh-tooltip strategy=\"fixed\" content={action.tooltipContent}>\n                      {Action(action, this.dynamicActions && this.actionsCollapsed.indexOf(action) > -1)}\n                    </stzh-tooltip>\n                  ) : (\n                    Action(action, this.dynamicActions && this.actionsCollapsed.indexOf(action) > -1)\n                  )),\n              )}\n            </div>\n\n            <div class=\"stzh-actionset__action-popover-wrapper\">\n              <stzh-popover\n                label={\n                  this.variant === \"stack\"\n                    ? this.localization.furtherActions\n                    : !this.isMedium\n                      ? this.localization.actions\n                      : \"\"\n                }\n                strategy=\"fixed\"\n                placement={this.popoverPlacement}\n                class=\"stzh-actionset__action-popover\"\n              >\n                <stzh-button\n                  fullwidth\n                  disabled={this.actionsCollapsed.length === 0}\n                  class=\"stzh-actionset__action is-further\"\n                  variant={\n                    this.popoverButtonVariant !== \"\"\n                      ? this.popoverButtonVariant\n                      : this.variant === \"stack\"\n                        ? \"secondary\"\n                        : \"tertiary\"\n                  }\n                  size={\n                    this.popoverButtonSize !== \"\" ? this.popoverButtonSize : this.variant === \"stack\" ? \"small\" : \"tiny\"\n                  }\n                  icon={this.variant === \"stack\" ? \"angle-down\" : \"more-vertical\"}\n                  iconOnly={this.variant === \"overflow\" && this.isMedium}\n                  iconPosition=\"right\"\n                  label={\n                    this.variant === \"stack\"\n                      ? this.localization.furtherActions\n                      : !this.isMedium\n                        ? this.localization.actions\n                        : \"\"\n                  }\n                  a11yLabel={this.variant === \"overflow\" && this.localization.actions}\n                ></stzh-button>\n                <stzh-menu slot=\"content\">\n                  {this.actionsCollapsed.map(action => (\n                    <stzh-menu-item\n                      // class=\"hide-medium show-when-collapsed\"\n                      icon={action.icon}\n                      badge={action.badge}\n                      badgeEmpty={action.badgeEmpty}\n                      badgeType={action.badgeType}\n                      onClick={e => {\n                        this.actionClick(action, e);\n                      }}\n                    >\n                      {action.label}\n                    </stzh-menu-item>\n                  ))}\n                </stzh-menu>\n              </stzh-popover>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-BAyjpcR6.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-actionset/stzh-actionset.scss?tag=stzh-actionset&encapsulation=scoped","src/components/stzh-actionset/stzh-actionset.tsx"],"sourcesContent":[":host {\n}\n\n.stzh-actionset {\n  &__actions {\n    display: flex;\n    align-items: center;\n  }\n\n  &__actions-wrapper {\n    position: relative;\n    display: flex;\n    flex-wrap: wrap;\n    overflow: hidden;\n  }\n\n  &__action {\n    &:not(:last-child) {\n      margin-right: space(\"xsmall\");\n    }\n  }\n\n  &__action-popover-wrapper {\n    opacity: 0;\n  }\n\n  &--has-collapsed-items &__action-popover-wrapper {\n    opacity: 1;\n  }\n\n  &--has-collapsed-items &__action-popover {\n    --width: auto;\n  }\n\n  /* Overflow variant */\n\n  &--overflow &__action {\n    @include mq($from: medium) {\n      --white-space: nowrap;\n    }\n  }\n\n  /* Stack variant */\n\n  &--stack &__actions {\n    @include mq($to: small) {\n      flex-direction: column;\n      align-items: stretch;\n    }\n  }\n\n  &--stack &__actions-wrapper {\n    @include mq($to: small) {\n      flex-direction: column;\n      align-items: stretch;\n    }\n  }\n\n  &--stack &__action {\n    @include mq($from: small) {\n      --white-space: nowrap;\n    }\n\n    &:not(:last-child) {\n      @include mq($to: small) {\n        margin-bottom: space(\"xsmall\");\n        margin-right: 0;\n      }\n    }\n  }\n\n  &--stack &__action-popover-wrapper {\n    @include mq($to: small) {\n      margin-top: space(\"xsmall\");\n    }\n  }\n\n  // Hide more action popover on small if it has no collapsed items\n\n  &--stack:not(#{&}--has-collapsed-items) &__action-popover-wrapper {\n    @include mq($to: small) {\n      display: none;\n    }\n  }\n}\n","import { Component, Host, Prop, h, Element, Watch, Event, EventEmitter, State } from \"@stencil/core\";\n\nimport { StzhActionsetItem, StzhActionsetItemClickEvent } from \"../../index\";\n\nimport { StzhActionsetLocalizedText } from \"./stzh-actionset.localization\";\n\nimport { media, addMediaChangeListener, removeMediaChangeListener } from \"../../utils/media-utils\";\n\nimport { Placement } from \"@floating-ui/dom\";\n\n/**\n */\n@Component({\n  tag: \"stzh-actionset\",\n  styleUrl: \"stzh-actionset.scss\",\n  scoped: true,\n})\nexport class StzhActionset {\n  /** Translation strings */\n  @Prop() localization: StzhActionsetLocalizedText;\n\n  /** Variant determining what position the action buttons are */\n  @Prop({ reflect: true }) variant: \"stack\" | \"overflow\" = \"stack\";\n\n  /** Button variant of popover button (button thats holds collapsed actions) */\n  @Prop({ reflect: true }) popoverButtonVariant: \"\" | \"default\" | \"secondary\" | \"tertiary\" = \"\";\n\n  /** Button size of popover button (button that holds collapsed actions) */\n  @Prop({ reflect: true }) popoverButtonSize: \"\" | \"default\" | \"small\" | \"tiny\" = \"\";\n\n  /** Popover placement of button that holds collapsed actions */\n  @Prop({ reflect: true }) popoverPlacement: Placement = \"bottom-end\";\n\n  /**\n   * Card header actions.\n   * Array of objects that can include the button attributes `id`, `variant`, `icon`, `size`, `iconPosition`, `iconOnly`, `label` or `badge`:\n   * `[{\"id\":\"action-1\", \"icon\": \"alarm-bell\", \"label\": \"Lorem\"}, {\"id\":\"action-2\", \"icon\": \"mail\", \"label\": \"Lorem\"}]`\n   */\n  @Prop() actions: StzhActionsetItem[] | string = [];\n  private _actions: StzhActionsetItem[] = [];\n\n  /** Header action click event */\n  @Event() stzhActionClick: EventEmitter<StzhActionsetItemClickEvent>;\n\n  @Element() element: HTMLStzhActionsetElement;\n\n  @Watch(\"actions\")\n  actionsWatcher(newValue: StzhActionsetItem[] | string) {\n    if (typeof newValue === \"string\") {\n      this._actions = JSON.parse(newValue);\n    } else {\n      this._actions = newValue;\n    }\n  }\n\n  @State() actionsCollapsed: StzhActionsetItem[] = [];\n  @State() dynamicActions: boolean;\n  @State() isSmall: boolean;\n  @State() isMedium: boolean;\n\n  private actionsElement: HTMLElement;\n  private debounceResize: number;\n  private resizeObserver: ResizeObserver;\n\n  private actionClick = (action: StzhActionsetItem, originalEvent: MouseEvent) => {\n    this.stzhActionClick.emit({\n      component: \"stzh-actionset\",\n      action,\n      originalEvent,\n    });\n  };\n\n  private update = () => {\n    this.isSmall = media(\"small\").matches;\n    this.isMedium = media(\"medium\").matches;\n\n    if (!this.actionsElement) {\n      return;\n    }\n\n    Object.assign(this.actionsElement.style, {\n      width: null,\n      height: null,\n    });\n\n    let newActionsVisible = 0;\n\n    if ((this.variant === \"overflow\" && this.isMedium) || (this.variant === \"stack\" && this.isSmall)) {\n      this.dynamicActions = true;\n\n      let newActionsHeight = 0;\n      let newActionsWidth = 0;\n\n      // update height and width\n      Array.from(this.actionsElement.children).forEach((child: HTMLElement) => {\n        // check which item is visible and\n        if (child.offsetTop === 0) {\n          newActionsVisible++;\n\n          const { width, height } = child.getBoundingClientRect();\n\n          const style = getComputedStyle(child);\n          const marginLeft = parseInt(style.marginLeft);\n          const marginRight = parseInt(style.marginRight);\n          const marginTop = parseInt(style.marginTop);\n          const marginBottom = parseInt(style.marginBottom);\n\n          const childWidth = width + marginLeft + marginRight;\n          const childHeight = height + marginTop + marginBottom;\n\n          if (newActionsHeight < childHeight) {\n            newActionsHeight = childHeight;\n          }\n\n          newActionsWidth = newActionsWidth + childWidth;\n        }\n      });\n\n      Object.assign(this.actionsElement.style, {\n        width: `${newActionsWidth}px`,\n        height: `${newActionsHeight}px`,\n      });\n    } else {\n      this.dynamicActions = false;\n\n      if (this.variant === \"overflow\") {\n        newActionsVisible = 0;\n      } else if (this.variant === \"stack\") {\n        newActionsVisible = this._actions.length <= 3 ? this._actions.length : 2;\n      }\n    }\n\n    this.actionsCollapsed = this._actions.slice(newActionsVisible);\n  };\n\n  private handleResize = () => {\n    if (this.debounceResize) {\n      window.cancelAnimationFrame(this.debounceResize);\n    }\n\n    this.debounceResize = requestAnimationFrame(this.update);\n  };\n\n  private mediaChangeHandler = () => {\n    this.actionsCollapsed = [];\n    requestAnimationFrame(this.update);\n  };\n\n  async componentWillLoad() {\n    this.actionsWatcher(this.actions);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"actionset\");\n    }\n  }\n\n  connectedCallback() {\n    addMediaChangeListener(this.mediaChangeHandler);\n\n    this.resizeObserver = new ResizeObserver(this.handleResize);\n    this.resizeObserver.observe(this.element);\n  }\n\n  disconnectedCallback() {\n    removeMediaChangeListener(this.mediaChangeHandler);\n\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  componentDidLoad() {\n    this.update();\n  }\n\n  render() {\n    const classes = {\n      \"stzh-actionset\": true,\n      // \"stzh-actionset--has-dynamic-actions\": this.dynamicActions,\n      \"stzh-actionset--has-collapsed-items\": this.actionsCollapsed.length > 0,\n      [`stzh-actionset--${this.variant}`]: !!this.variant,\n    };\n\n    const Action = (action: StzhActionsetItem, disableTabbing: boolean) => (\n      <stzh-button\n        a11yTabindex={disableTabbing ? \"-1\" : null}\n        class={{\n          \"stzh-actionset__action\": true,\n          \"is-button\": true,\n        }}\n        label={action.label}\n        icon={action.icon}\n        iconPosition={action.iconPosition}\n        iconOnly={action.iconOnly}\n        badge={action.badge}\n        variant={action.variant ? action.variant : this.variant === \"stack\" ? \"secondary\" : \"tertiary\"}\n        size={action.size ? action.size : this.variant === \"stack\" ? \"small\" : \"tiny\"}\n        badgePosition=\"icon\"\n        onClick={e => {\n          this.actionClick(action, e);\n        }}\n      ></stzh-button>\n    );\n\n    return (\n      <Host has-collapsed-items={this.actionsCollapsed.length > 0}>\n        <div class={classes}>\n          <div class=\"stzh-actionset__actions\" role=\"group\">\n            <div ref={el => (this.actionsElement = el as HTMLElement)} class=\"stzh-actionset__actions-wrapper\">\n              {this._actions.map(\n                action =>\n                  (this.dynamicActions || (!this.dynamicActions && this.actionsCollapsed.indexOf(action) === -1)) &&\n                  (action.tooltipContent ? (\n                    <stzh-tooltip strategy=\"fixed\" content={action.tooltipContent}>\n                      {Action(action, this.dynamicActions && this.actionsCollapsed.indexOf(action) > -1)}\n                    </stzh-tooltip>\n                  ) : (\n                    Action(action, this.dynamicActions && this.actionsCollapsed.indexOf(action) > -1)\n                  )),\n              )}\n            </div>\n\n            <div class=\"stzh-actionset__action-popover-wrapper\">\n              <stzh-popover\n                label={\n                  this.variant === \"stack\"\n                    ? this.localization.furtherActions\n                    : !this.isMedium\n                      ? this.localization.actions\n                      : \"\"\n                }\n                strategy=\"fixed\"\n                placement={this.popoverPlacement}\n                class=\"stzh-actionset__action-popover\"\n              >\n                <stzh-button\n                  fullwidth\n                  disabled={this.actionsCollapsed.length === 0}\n                  class=\"stzh-actionset__action is-further\"\n                  variant={\n                    this.popoverButtonVariant !== \"\"\n                      ? this.popoverButtonVariant\n                      : this.variant === \"stack\"\n                        ? \"secondary\"\n                        : \"tertiary\"\n                  }\n                  size={\n                    this.popoverButtonSize !== \"\" ? this.popoverButtonSize : this.variant === \"stack\" ? \"small\" : \"tiny\"\n                  }\n                  icon={this.variant === \"stack\" ? \"angle-down\" : \"more-vertical\"}\n                  iconOnly={this.variant === \"overflow\" && this.isMedium}\n                  iconPosition=\"right\"\n                  label={\n                    this.variant === \"stack\"\n                      ? this.localization.furtherActions\n                      : !this.isMedium\n                        ? this.localization.actions\n                        : \"\"\n                  }\n                  a11yLabel={this.variant === \"overflow\" && this.localization.actions}\n                ></stzh-button>\n                <stzh-menu slot=\"content\">\n                  {this.actionsCollapsed.map(action => (\n                    <stzh-menu-item\n                      // class=\"hide-medium show-when-collapsed\"\n                      icon={action.icon}\n                      badge={action.badge}\n                      badgeEmpty={action.badgeEmpty}\n                      badgeType={action.badgeType}\n                      onClick={e => {\n                        this.actionClick(action, e);\n                      }}\n                    >\n                      {action.label}\n                    </stzh-menu-item>\n                  ))}\n                </stzh-menu>\n              </stzh-popover>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-B0BEoXX-.js → p-BCH90Ynw.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, e as Host, t as transformTag } from './p-NuLYh9v8.js';
+import { p as proxyCustomElement, H, h, e as Host, t as transformTag } from './p-ptAFQZzh.js';
 
 const stzhStatusCss = () => `.sc-stzh-status-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-status-h,[stzh-hidden].sc-stzh-status-h{display:none}.sc-stzh-status-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-status-h *.sc-stzh-status,.sc-stzh-status-h *.sc-stzh-status::before,.sc-stzh-status-h *.sc-stzh-status::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-status-h .has-focus.sc-stzh-status{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-status-h .stzh-fylingfocus-focused.sc-stzh-status{outline-style:none !important}.sc-stzh-status-h .stzh-fylingfocus-focused.sc-stzh-status::-moz-focus-inner{border:0 !important}.sc-stzh-status-h{--color:var(--stzh-base-color);--min-width:none}[with-loadingbar].sc-stzh-status-h:not([with-loadingbar=false]){--min-width:10rem}[type=success].sc-stzh-status-h{--color:var(--stzh-color-success70)}[type=warning].sc-stzh-status-h{--color:var(--stzh-color-warning90)}[type=error].sc-stzh-status-h{--color:var(--stzh-color-error70)}[type=info].sc-stzh-status-h{--color:var(--stzh-color-midnightblue70)}.stzh-status.sc-stzh-status{min-width:var(--min-width);color:var(--color)}.stzh-status__dot.sc-stzh-status{border-radius:50%;width:0.75rem;height:0.75rem;background-color:currentColor;margin-right:var(--stzh-space-xxsmall)}.stzh-status__bar.sc-stzh-status{display:block;height:0.25rem;border-radius:0.75rem;background-color:var(--stzh-color-old-grey13);margin-top:var(--stzh-space-xxsmall)}.stzh-status__bar-inner.sc-stzh-status{display:block;height:100%;width:0;border-radius:0.75rem;background:currentColor}.stzh-status__text.sc-stzh-status{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);display:flex;align-items:center}`;
 
@@ -49,6 +49,6 @@ function defineCustomElement() {
 }
 
 export { StzhStatus as S, defineCustomElement as d };
-//# sourceMappingURL=p-B0BEoXX-.js.map
+//# sourceMappingURL=p-BCH90Ynw.js.map
 
-//# sourceMappingURL=p-B0BEoXX-.js.map
+//# sourceMappingURL=p-BCH90Ynw.js.map

package/dist/components/{p-B0BEoXX-.js.map → p-BCH90Ynw.js.map}

@@ -1 +1 @@
-{"file":"p-B0BEoXX-.js","mappings":";;AAAA,MAAM,aAAa,GAAG,MAAM,CAAC,gqEAAgqE,CAAC;;MCWjrE,UAAU,iBAAAA,kBAAA,CAAA,MAAA,UAAA,SAAAC,CAAA,CAAA;AALvB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAOU,QAAA,IAAO,CAAA,OAAA,GAAW,CAAC;;AAGF,QAAA,IAAc,CAAA,cAAA,GAAY,KAAK;;AAGhD,QAAA,IAAK,CAAA,KAAA,GAAW,EAAE;;AAGD,QAAA,IAAI,CAAA,IAAA,GAAmB,SAAS;AA+B1D;IA3BC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,aAAa,EAAE,IAAI;YACnB,CAAC,CAAA,kBAAA,EAAqB,IAAI,CAAC,IAAI,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI;SAChD;QAED,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,OAAO,EAAA,EACjB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,mBAAmB,EAAA,EAC3B,CAAC,IAAI,CAAC,cAAc,IAAI,4DAAK,KAAK,EAAC,kBAAkB,EAAO,CAAA,EAC5D,IAAI,CAAC,KAAK,IAAI,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,oBAAoB,EAAA,EAAE,IAAI,CAAC,KAAK,CAAO,CAC7D,EACL,IAAI,CAAC,cAAc,KAClB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAC3B,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,wBAAwB,EAC9B,KAAK,EAAE;AACL,gBAAA,KAAK,EAAE,CAAA,EAAG,IAAI,CAAC,OAAO,CAAG,CAAA,CAAA;AAC1B,aAAA,EAAA,CACI,CACH,CACP,CACG,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"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}
+{"file":"p-BCH90Ynw.js","mappings":";;AAAA,MAAM,aAAa,GAAG,MAAM,CAAC,gqEAAgqE,CAAC;;MCWjrE,UAAU,iBAAAA,kBAAA,CAAA,MAAA,UAAA,SAAAC,CAAA,CAAA;AALvB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAOU,QAAA,IAAO,CAAA,OAAA,GAAW,CAAC;;AAGF,QAAA,IAAc,CAAA,cAAA,GAAY,KAAK;;AAGhD,QAAA,IAAK,CAAA,KAAA,GAAW,EAAE;;AAGD,QAAA,IAAI,CAAA,IAAA,GAAmB,SAAS;AA+B1D;IA3BC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,aAAa,EAAE,IAAI;YACnB,CAAC,CAAA,kBAAA,EAAqB,IAAI,CAAC,IAAI,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI;SAChD;QAED,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,OAAO,EAAA,EACjB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,mBAAmB,EAAA,EAC3B,CAAC,IAAI,CAAC,cAAc,IAAI,4DAAK,KAAK,EAAC,kBAAkB,EAAO,CAAA,EAC5D,IAAI,CAAC,KAAK,IAAI,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,oBAAoB,EAAA,EAAE,IAAI,CAAC,KAAK,CAAO,CAC7D,EACL,IAAI,CAAC,cAAc,KAClB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAC3B,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,wBAAwB,EAC9B,KAAK,EAAE;AACL,gBAAA,KAAK,EAAE,CAAA,EAAG,IAAI,CAAC,OAAO,CAAG,CAAA,CAAA;AAC1B,aAAA,EAAA,CACI,CACH,CACP,CACG,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"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-CX7La9YT.js → p-BD-4HK9u.js}

@@ -1,7 +1,7 @@
-import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-NuLYh9v8.js';
-import { d as defineCustomElement$3 } from './p-Db3dTAjX.js';
-import { d as defineCustomElement$2 } from './p-By320y5w.js';
-import { d as defineCustomElement$1 } from './p-Cz5bXTUE.js';
+import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-ptAFQZzh.js';
+import { d as defineCustomElement$3 } from './p-BaC_gScF.js';
+import { d as defineCustomElement$2 } from './p-ka1rmhv9.js';
+import { d as defineCustomElement$1 } from './p-B8VeEjIy.js';
 
 const stzhMessageCss = () => `.sc-stzh-message-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-message-h,[stzh-hidden].sc-stzh-message-h{display:none}.sc-stzh-message-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-message-h *.sc-stzh-message,.sc-stzh-message-h *.sc-stzh-message::before,.sc-stzh-message-h *.sc-stzh-message::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-message-h .has-focus.sc-stzh-message{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-message-h .stzh-fylingfocus-focused.sc-stzh-message{outline-style:none !important}.sc-stzh-message-h .stzh-fylingfocus-focused.sc-stzh-message::-moz-focus-inner{border:0 !important}.sc-stzh-message-h{--background-color:var(--stzh-color-grey20);--icon-color:var(--stzh-color-info50);--close-color:var(--stzh-color-grey90);--label-color:var(--stzh-color-info70);--description-color:var(--stzh-color-grey90)}[type=success].sc-stzh-message-h{--label-color:var(--stzh-color-success70);--icon-color:var(--stzh-color-success50);--background-color:var(--stzh-color-success20)}[type=warning].sc-stzh-message-h{--label-color:var(--stzh-color-warning90);--icon-color:var(--stzh-color-warning70);--background-color:var(--stzh-color-warning20)}[type=error].sc-stzh-message-h{--label-color:var(--stzh-color-error70);--icon-color:var(--stzh-color-error50);--background-color:var(--stzh-color-error20)}[type=page-message].sc-stzh-message-h{--label-color:var(--stzh-color-info70);--icon-color:var(--stzh-color-info50);--background-color:var(--stzh-color-info20)}.stzh-message.sc-stzh-message{position:relative;display:flex;box-shadow:var(--stzh-box-shadow-message);background-color:var(--background-color);border-radius:var(--stzh-button-border-radius)}.stzh-message__content.sc-stzh-message{padding-top:var(--stzh-space-xsmall)}@media screen and (min-width: 600px){.stzh-message__content.sc-stzh-message{padding-top:var(--stzh-space-small)}}@media screen and (min-width: 900px){.stzh-message__content.sc-stzh-message{padding-top:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-message__content.sc-stzh-message{padding-top:var(--stzh-space-xlarge)}}.stzh-message__content.sc-stzh-message{padding-bottom:var(--stzh-space-xsmall)}@media screen and (min-width: 600px){.stzh-message__content.sc-stzh-message{padding-bottom:var(--stzh-space-small)}}@media screen and (min-width: 900px){.stzh-message__content.sc-stzh-message{padding-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-message__content.sc-stzh-message{padding-bottom:var(--stzh-space-xlarge)}}.stzh-message__content.sc-stzh-message{padding-right:var(--stzh-space-large)}@media screen and (min-width: 600px){.stzh-message__content.sc-stzh-message{padding-right:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px){.stzh-message__content.sc-stzh-message{padding-right:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-message__content.sc-stzh-message{padding-right:var(--stzh-space-xxxlarge)}}.stzh-message__content.sc-stzh-message{gap:var(--stzh-space-xsmall)}@media screen and (min-width: 600px){.stzh-message__content.sc-stzh-message{gap:var(--stzh-space-small)}}@media screen and (min-width: 900px){.stzh-message__content.sc-stzh-message{gap:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-message__content.sc-stzh-message{gap:var(--stzh-space-xlarge)}}.stzh-message__content.sc-stzh-message{display:flex;flex-direction:column;flex-grow:1;padding-left:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-message__content.sc-stzh-message{flex-direction:row;align-items:flex-start}}@media screen and (min-width: 900px){.stzh-message__content.sc-stzh-message{padding-left:var(--stzh-space-large)}}.stzh-message__icon-wrapper.sc-stzh-message{display:flex;flex-shrink:0}.stzh-message__icon.sc-stzh-message{--size:var(--stzh-icon-size-large);color:var(--icon-color)}@media screen and (min-width: 600px){.stzh-message__text-wrapper.sc-stzh-message{flex-grow:1}}@media screen and (min-width: 1260px){.stzh-message__text-wrapper.sc-stzh-message{align-items:center}}.stzh-message__label.sc-stzh-message{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-h4-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-h4-default-heading-line-height, var(--stzh-font-milli-heading-line-height));letter-spacing:var(--stzh-font-curve-h4-default-heading-letter-spacing)}@media screen and (min-width: 600px){.stzh-message__label.sc-stzh-message{font-size:var(--stzh-font-curve-h4-small-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h4-small-heading-line-height, var(--stzh-font-centi-heading-line-height));letter-spacing:var(--stzh-font-curve-h4-small-heading-letter-spacing)}}@media screen and (min-width: 1260px){.stzh-message__label.sc-stzh-message{font-size:var(--stzh-font-curve-h4-large-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h4-large-heading-line-height, var(--stzh-font-deci-heading-line-height));letter-spacing:var(--stzh-font-curve-h4-large-heading-letter-spacing)}}@media screen and (min-width: 1600px){.stzh-message__label.sc-stzh-message{font-size:var(--stzh-font-curve-h4-ultra-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h4-ultra-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h4-ultra-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}.stzh-message__label.sc-stzh-message{color:var(--label-color)}@media screen and (min-width: 1260px){.stzh-message__label.sc-stzh-message{font-size:var(--stzh-font-deci-font-size) !important}}.stzh-message__label.sc-stzh-message:not(:empty){margin-bottom:var(--stzh-space-xsmall)}.stzh-message__description.sc-stzh-message{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)}@media screen and (min-width: 900px){.stzh-message__description.sc-stzh-message{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)}}.stzh-message__description.sc-stzh-message{color:var(--description-color);overflow-wrap:break-word;word-wrap:break-word;word-break:break-word}.stzh-message__description.sc-stzh-message:not(:empty)+.stzh-message__link.sc-stzh-message:not(:empty){margin-top:var(--stzh-space-xxsmall)}@media screen and (min-width: 900px){.stzh-message__description.sc-stzh-message:not(:empty)+.stzh-message__link.sc-stzh-message:not(:empty){margin-top:var(--stzh-space-xsmall)}}@media screen and (min-width: 1260px){.stzh-message__description.sc-stzh-message:not(:empty)+.stzh-message__link.sc-stzh-message:not(:empty){margin-top:var(--stzh-space-small)}}.stzh-message__close[variant=tertiary].sc-stzh-message{--color:var(--close-color);position:absolute;top:0;right:0}.stzh-message.sc-stzh-message:has(.stzh-message__description:empty):has(.stzh-message__link:empty) .stzh-message__label.sc-stzh-message:not(:empty){margin-top:var(--stzh-space-xxsmall);margin-bottom:0}.stzh-message--type-page-message.sc-stzh-message .stzh-message__content.sc-stzh-message{padding-left:1.25rem;padding-right:1.25rem}@media screen and (min-width: 600px){.stzh-message--type-page-message.sc-stzh-message .stzh-message__content.sc-stzh-message{padding-left:2rem;padding-right:2rem}}@media screen and (min-width: 900px){.stzh-message--type-page-message.sc-stzh-message .stzh-message__content.sc-stzh-message{padding-left:2.5rem;padding-right:2.5rem}}@media screen and (min-width: 1260px){.stzh-message--type-page-message.sc-stzh-message .stzh-message__content.sc-stzh-message{padding-left:4rem;padding-right:4rem}}@media screen and (min-width: 1600px){.stzh-message--type-page-message.sc-stzh-message .stzh-message__content.sc-stzh-message{padding-left:calc((100vw - 84.25rem) / 2);padding-right:calc((100vw - 84.25rem) / 2)}}.stzh-message--type-page-message.sc-stzh-message .stzh-message__content.sc-stzh-message{padding-top:var(--stzh-space-xsmall)}@media screen and (min-width: 600px){.stzh-message--type-page-message.sc-stzh-message .stzh-message__content.sc-stzh-message{padding-top:var(--stzh-space-small)}}@media screen and (min-width: 900px){.stzh-message--type-page-message.sc-stzh-message .stzh-message__content.sc-stzh-message{padding-top:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-message--type-page-message.sc-stzh-message .stzh-message__content.sc-stzh-message{padding-top:var(--stzh-space-xlarge)}}.stzh-message--type-page-message.sc-stzh-message .stzh-message__content.sc-stzh-message{padding-bottom:var(--stzh-space-xsmall)}@media screen and (min-width: 600px){.stzh-message--type-page-message.sc-stzh-message .stzh-message__content.sc-stzh-message{padding-bottom:var(--stzh-space-small)}}@media screen and (min-width: 900px){.stzh-message--type-page-message.sc-stzh-message .stzh-message__content.sc-stzh-message{padding-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-message--type-page-message.sc-stzh-message .stzh-message__content.sc-stzh-message{padding-bottom:var(--stzh-space-xlarge)}}.stzh-message--type-page-message.sc-stzh-message .stzh-message__content.sc-stzh-message{align-items:flex-start;flex-direction:row}@media screen and (max-width: 1259px){.stzh-message--type-page-message.sc-stzh-message .stzh-message__content.sc-stzh-message{padding-right:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-message--type-page-message.sc-stzh-message .stzh-message__content.sc-stzh-message{align-items:center}}.stzh-message--type-page-message.sc-stzh-message .stzh-message__text-wrapper.sc-stzh-message{display:flex;flex-direction:column}@media screen and (min-width: 1260px){.stzh-message--type-page-message.sc-stzh-message .stzh-message__text-wrapper.sc-stzh-message{flex-direction:row;gap:var(--stzh-space-xsmall)}}@media screen and (min-width: 1260px) and (min-width: 600px){.stzh-message--type-page-message.sc-stzh-message .stzh-message__text-wrapper.sc-stzh-message{gap:var(--stzh-space-small)}}@media screen and (min-width: 1260px) and (min-width: 900px){.stzh-message--type-page-message.sc-stzh-message .stzh-message__text-wrapper.sc-stzh-message{gap:var(--stzh-space-medium)}}@media screen and (min-width: 1260px) and (min-width: 1260px){.stzh-message--type-page-message.sc-stzh-message .stzh-message__text-wrapper.sc-stzh-message{gap:var(--stzh-space-xlarge)}}.stzh-message--type-page-message.sc-stzh-message .stzh-message__icon.sc-stzh-message{--size:var(--stzh-icon-size-small)}.stzh-message--type-page-message.sc-stzh-message .stzh-message__label.sc-stzh-message{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-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)}@media screen and (min-width: 900px){.stzh-message--type-page-message.sc-stzh-message .stzh-message__label.sc-stzh-message{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)}}.stzh-message--type-page-message.sc-stzh-message .stzh-message__label.sc-stzh-message{margin:0}@media screen and (min-width: 600px){.stzh-message--type-page-message.sc-stzh-message .stzh-message__close.sc-stzh-message{top:0.625rem;right:0.625rem}}@media screen and (min-width: 900px){.stzh-message--type-page-message.sc-stzh-message .stzh-message__text-wrapper.sc-stzh-message .stzh-message__link.sc-stzh-message{margin-top:0}}`;
 
@@ -98,6 +98,6 @@ function defineCustomElement() {
 }
 
 export { StzhMessage as S, defineCustomElement as d };
-//# sourceMappingURL=p-CX7La9YT.js.map
+//# sourceMappingURL=p-BD-4HK9u.js.map
 
-//# sourceMappingURL=p-CX7La9YT.js.map
+//# sourceMappingURL=p-BD-4HK9u.js.map

package/dist/components/{p-CX7La9YT.js.map → p-BD-4HK9u.js.map}

@@ -1 +1 @@
-{"file":"p-CX7La9YT.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-message/stzh-message.scss?tag=stzh-message&encapsulation=scoped","src/components/stzh-message/stzh-message.tsx"],"sourcesContent":[":host {\n  --background-color: #{$colorGrey20};\n  --icon-color: #{$colorInfo50};\n  --close-color: #{$colorGrey90};\n  --label-color: #{$colorInfo70};\n  --description-color: #{$colorGrey90};\n\n  &[type=\"success\"] {\n    --label-color: #{$colorSuccess70};\n    --icon-color: #{$colorSuccess50};\n    --background-color: #{$colorSuccess20};\n  }\n\n  &[type=\"warning\"] {\n    --label-color: #{$colorWarning90};\n    --icon-color: #{$colorWarning70};\n    --background-color: #{$colorWarning20};\n  }\n\n  &[type=\"error\"] {\n    --label-color: #{$colorError70};\n    --icon-color: #{$colorError50};\n    --background-color: #{$colorError20};\n  }\n\n  &[type=\"page-message\"] {\n    --label-color: #{$colorInfo70};\n    --icon-color: #{$colorInfo50};\n    --background-color: #{$colorInfo20};\n  }\n}\n\n.stzh-message {\n  position: relative;\n  display: flex;\n  box-shadow: $boxShadowMessage;\n  background-color: var(--background-color);\n  border-radius: #{$buttonBorderRadius};\n\n  &__content {\n    @include spaceCurve(\"padding-top\", \"small\");\n    @include spaceCurve(\"padding-bottom\", \"small\");\n    @include spaceCurve(\"padding-right\", \"medium\");\n    @include spaceCurve(\"gap\", \"small\");\n    display: flex;\n    flex-direction: column;\n    flex-grow: 1;\n    padding-left: space(\"medium\");\n\n    @include mq($from: small) {\n      flex-direction: row;\n      align-items: flex-start;\n    }\n\n    @include mq($from: medium) {\n      padding-left: space(\"large\");\n    }\n  }\n\n  &__icon-wrapper {\n    display: flex;\n    flex-shrink: 0;\n  }\n\n  &__icon {\n    --size: #{iconSize(\"large\")};\n    color: var(--icon-color);\n  }\n\n  &__text-wrapper {\n    @include mq($from: small) {\n      flex-grow: 1;\n    }\n    @include mq($from: large) {\n      align-items: center;\n    }\n  }\n\n  &__label {\n    @include font(\"title\");\n    @include fontCurve(\"h4\", \"heading\");\n    color: var(--label-color);\n\n    @include mq($from: large) {\n      font-size: var(--stzh-font-deci-font-size) !important;\n    }\n\n    &:not(:empty) {\n      margin-bottom: var(--stzh-space-xsmall);\n    }\n  }\n\n  &__description {\n    @include fontCurve(\"p1\");\n    color: var(--description-color);\n    overflow-wrap: break-word;\n    word-wrap: break-word;\n    word-break: break-word;\n  }\n\n  &__description:not(:empty) + &__link:not(:empty) {\n    @include spaceCurve(\"margin-top\", \"tiny\");\n  }\n\n  &__close[variant=\"tertiary\"] {\n    --color: var(--close-color);\n\n    position: absolute;\n    top: 0;\n    right: 0;\n  }\n\n  /* Only label variant */\n\n  &:has(#{&}__description:empty):has(#{&}__link:empty) &__label:not(:empty) {\n    margin-top: space(\"xxsmall\");\n    margin-bottom: 0;\n  }\n\n  /* Type page-message */\n\n  &--type-page-message &__content {\n    @include containerPadding;\n    @include spaceCurve(\"padding-top\", \"small\");\n    @include spaceCurve(\"padding-bottom\", \"small\");\n    align-items: flex-start;\n    flex-direction: row;\n\n    @include mq($to: large) {\n      padding-right: space(\"xxxlarge\");\n    }\n\n    @include mq($from: large) {\n      align-items: center;\n    }\n  }\n\n  &--type-page-message &__text-wrapper {\n    display: flex;\n    flex-direction: column;\n\n    @include mq($from: large) {\n      flex-direction: row;\n      @include spaceCurve(\"gap\", \"small\");\n    }\n  }\n\n  &--type-page-message &__icon {\n    --size: #{iconSize(\"small\")};\n  }\n\n  &--type-page-message &__label {\n    @include font(\"title\");\n    @include fontCurve(\"p1\");\n    margin: 0;\n  }\n\n  &--type-page-message &__close {\n    @include mq($from: small) {\n      top: 10px;\n      right: 10px;\n    }\n  }\n\n  &--type-page-message &__text-wrapper &__link {\n    @include mq($from: medium) {\n      margin-top: 0;\n    }\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from \"@stencil/core\";\n\nimport { StzhMessageCloseEvent, StzhMessageOpenEvent } from \"../../index\";\n\nimport { StzhMessageLocalizedText } from \"./stzh-message.localization\";\n\n/**\n * @slot - Slot for description content (use instead of description property)\n * @slot label - Slot for label (use as alternative for property)\n * @slot link - Slot for optional stzh-link element\n */\n@Component({\n  tag: \"stzh-message\",\n  styleUrl: \"stzh-message.scss\",\n  scoped: true,\n})\nexport class StzhMessage {\n  /** Label (slot can also be used as alternative) */\n  @Prop() label: string = \"\";\n\n  /** Description (use instead of default slot) */\n  @Prop() description: string = \"\";\n\n  /** Type */\n  /** Do not use page-message property. It will be deprecated with the next major release. */\n  @Prop({ reflect: true }) type: \"info\" | \"success\" | \"warning\" | \"error\" | \"page-message\" = \"info\";\n\n  /** Whether to hide close button */\n  @Prop() hideClose: boolean = false;\n\n  /** Translation strings. */\n  @Prop() localization: StzhMessageLocalizedText;\n\n  /** Message open event */\n  @Event() stzhOpen: EventEmitter<StzhMessageOpenEvent>;\n\n  /** Message close event */\n  @Event() stzhClose: EventEmitter<StzhMessageCloseEvent>;\n\n  @Element() element: HTMLStzhMessageElement;\n\n  /** Open state */\n  @State() open: boolean = true;\n\n  @Method()\n  async show() {\n    this.open = true;\n    this.stzhOpen.emit({\n      component: \"stzh-message\",\n    });\n  }\n\n  @Method()\n  async hide() {\n    this.open = false;\n    this.stzhClose.emit({\n      component: \"stzh-message\",\n    });\n  }\n\n  private onCloseButtonClick = () => {\n    this.hide();\n  };\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"message\");\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-message\": true,\n      \"stzh-message--has-close-hidden\": this.hideClose,\n      [`stzh-message--type-${this.type}`]: !!this.type,\n    };\n\n    return (\n      <Host hidden={!this.open}>\n        <div class={classes}>\n          <div class=\"stzh-message__content\">\n            <div class=\"stzh-message__icon-wrapper\">\n              <stzh-icon\n                class=\"stzh-message__icon\"\n                name={\n                  ((this.type === \"info\" || this.type === \"page-message\") && \"info-help-filled\") ||\n                  (this.type === \"success\" && \"checkmark-circle-filled\") ||\n                  (this.type === \"warning\" && \"important-warning-filled\") ||\n                  (this.type === \"error\" && \"warning-filled\")\n                }\n              ></stzh-icon>\n            </div>\n            <div class=\"stzh-message__text-wrapper\">\n              <div class=\"stzh-message__label\">{this.label ? this.label : <slot name=\"label\"></slot>}</div>\n              <div class=\"stzh-message__description\">{this.description ? this.description : <slot></slot>}</div>\n              <div class=\"stzh-message__link\">\n                <slot name=\"link\"></slot>\n              </div>\n            </div>\n          </div>\n\n          {!this.hideClose && (\n            <stzh-button\n              class=\"stzh-message__close\"\n              onClick={this.onCloseButtonClick}\n              a11yLabel={this.localization.close}\n              variant=\"tertiary\"\n              size=\"small\"\n              iconOnly={true}\n              icon=\"close-big\"\n            ></stzh-button>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-BD-4HK9u.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-message/stzh-message.scss?tag=stzh-message&encapsulation=scoped","src/components/stzh-message/stzh-message.tsx"],"sourcesContent":[":host {\n  --background-color: #{$colorGrey20};\n  --icon-color: #{$colorInfo50};\n  --close-color: #{$colorGrey90};\n  --label-color: #{$colorInfo70};\n  --description-color: #{$colorGrey90};\n\n  &[type=\"success\"] {\n    --label-color: #{$colorSuccess70};\n    --icon-color: #{$colorSuccess50};\n    --background-color: #{$colorSuccess20};\n  }\n\n  &[type=\"warning\"] {\n    --label-color: #{$colorWarning90};\n    --icon-color: #{$colorWarning70};\n    --background-color: #{$colorWarning20};\n  }\n\n  &[type=\"error\"] {\n    --label-color: #{$colorError70};\n    --icon-color: #{$colorError50};\n    --background-color: #{$colorError20};\n  }\n\n  &[type=\"page-message\"] {\n    --label-color: #{$colorInfo70};\n    --icon-color: #{$colorInfo50};\n    --background-color: #{$colorInfo20};\n  }\n}\n\n.stzh-message {\n  position: relative;\n  display: flex;\n  box-shadow: $boxShadowMessage;\n  background-color: var(--background-color);\n  border-radius: #{$buttonBorderRadius};\n\n  &__content {\n    @include spaceCurve(\"padding-top\", \"small\");\n    @include spaceCurve(\"padding-bottom\", \"small\");\n    @include spaceCurve(\"padding-right\", \"medium\");\n    @include spaceCurve(\"gap\", \"small\");\n    display: flex;\n    flex-direction: column;\n    flex-grow: 1;\n    padding-left: space(\"medium\");\n\n    @include mq($from: small) {\n      flex-direction: row;\n      align-items: flex-start;\n    }\n\n    @include mq($from: medium) {\n      padding-left: space(\"large\");\n    }\n  }\n\n  &__icon-wrapper {\n    display: flex;\n    flex-shrink: 0;\n  }\n\n  &__icon {\n    --size: #{iconSize(\"large\")};\n    color: var(--icon-color);\n  }\n\n  &__text-wrapper {\n    @include mq($from: small) {\n      flex-grow: 1;\n    }\n    @include mq($from: large) {\n      align-items: center;\n    }\n  }\n\n  &__label {\n    @include font(\"title\");\n    @include fontCurve(\"h4\", \"heading\");\n    color: var(--label-color);\n\n    @include mq($from: large) {\n      font-size: var(--stzh-font-deci-font-size) !important;\n    }\n\n    &:not(:empty) {\n      margin-bottom: var(--stzh-space-xsmall);\n    }\n  }\n\n  &__description {\n    @include fontCurve(\"p1\");\n    color: var(--description-color);\n    overflow-wrap: break-word;\n    word-wrap: break-word;\n    word-break: break-word;\n  }\n\n  &__description:not(:empty) + &__link:not(:empty) {\n    @include spaceCurve(\"margin-top\", \"tiny\");\n  }\n\n  &__close[variant=\"tertiary\"] {\n    --color: var(--close-color);\n\n    position: absolute;\n    top: 0;\n    right: 0;\n  }\n\n  /* Only label variant */\n\n  &:has(#{&}__description:empty):has(#{&}__link:empty) &__label:not(:empty) {\n    margin-top: space(\"xxsmall\");\n    margin-bottom: 0;\n  }\n\n  /* Type page-message */\n\n  &--type-page-message &__content {\n    @include containerPadding;\n    @include spaceCurve(\"padding-top\", \"small\");\n    @include spaceCurve(\"padding-bottom\", \"small\");\n    align-items: flex-start;\n    flex-direction: row;\n\n    @include mq($to: large) {\n      padding-right: space(\"xxxlarge\");\n    }\n\n    @include mq($from: large) {\n      align-items: center;\n    }\n  }\n\n  &--type-page-message &__text-wrapper {\n    display: flex;\n    flex-direction: column;\n\n    @include mq($from: large) {\n      flex-direction: row;\n      @include spaceCurve(\"gap\", \"small\");\n    }\n  }\n\n  &--type-page-message &__icon {\n    --size: #{iconSize(\"small\")};\n  }\n\n  &--type-page-message &__label {\n    @include font(\"title\");\n    @include fontCurve(\"p1\");\n    margin: 0;\n  }\n\n  &--type-page-message &__close {\n    @include mq($from: small) {\n      top: 10px;\n      right: 10px;\n    }\n  }\n\n  &--type-page-message &__text-wrapper &__link {\n    @include mq($from: medium) {\n      margin-top: 0;\n    }\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from \"@stencil/core\";\n\nimport { StzhMessageCloseEvent, StzhMessageOpenEvent } from \"../../index\";\n\nimport { StzhMessageLocalizedText } from \"./stzh-message.localization\";\n\n/**\n * @slot - Slot for description content (use instead of description property)\n * @slot label - Slot for label (use as alternative for property)\n * @slot link - Slot for optional stzh-link element\n */\n@Component({\n  tag: \"stzh-message\",\n  styleUrl: \"stzh-message.scss\",\n  scoped: true,\n})\nexport class StzhMessage {\n  /** Label (slot can also be used as alternative) */\n  @Prop() label: string = \"\";\n\n  /** Description (use instead of default slot) */\n  @Prop() description: string = \"\";\n\n  /** Type */\n  /** Do not use page-message property. It will be deprecated with the next major release. */\n  @Prop({ reflect: true }) type: \"info\" | \"success\" | \"warning\" | \"error\" | \"page-message\" = \"info\";\n\n  /** Whether to hide close button */\n  @Prop() hideClose: boolean = false;\n\n  /** Translation strings. */\n  @Prop() localization: StzhMessageLocalizedText;\n\n  /** Message open event */\n  @Event() stzhOpen: EventEmitter<StzhMessageOpenEvent>;\n\n  /** Message close event */\n  @Event() stzhClose: EventEmitter<StzhMessageCloseEvent>;\n\n  @Element() element: HTMLStzhMessageElement;\n\n  /** Open state */\n  @State() open: boolean = true;\n\n  @Method()\n  async show() {\n    this.open = true;\n    this.stzhOpen.emit({\n      component: \"stzh-message\",\n    });\n  }\n\n  @Method()\n  async hide() {\n    this.open = false;\n    this.stzhClose.emit({\n      component: \"stzh-message\",\n    });\n  }\n\n  private onCloseButtonClick = () => {\n    this.hide();\n  };\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"message\");\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-message\": true,\n      \"stzh-message--has-close-hidden\": this.hideClose,\n      [`stzh-message--type-${this.type}`]: !!this.type,\n    };\n\n    return (\n      <Host hidden={!this.open}>\n        <div class={classes}>\n          <div class=\"stzh-message__content\">\n            <div class=\"stzh-message__icon-wrapper\">\n              <stzh-icon\n                class=\"stzh-message__icon\"\n                name={\n                  ((this.type === \"info\" || this.type === \"page-message\") && \"info-help-filled\") ||\n                  (this.type === \"success\" && \"checkmark-circle-filled\") ||\n                  (this.type === \"warning\" && \"important-warning-filled\") ||\n                  (this.type === \"error\" && \"warning-filled\")\n                }\n              ></stzh-icon>\n            </div>\n            <div class=\"stzh-message__text-wrapper\">\n              <div class=\"stzh-message__label\">{this.label ? this.label : <slot name=\"label\"></slot>}</div>\n              <div class=\"stzh-message__description\">{this.description ? this.description : <slot></slot>}</div>\n              <div class=\"stzh-message__link\">\n                <slot name=\"link\"></slot>\n              </div>\n            </div>\n          </div>\n\n          {!this.hideClose && (\n            <stzh-button\n              class=\"stzh-message__close\"\n              onClick={this.onCloseButtonClick}\n              a11yLabel={this.localization.close}\n              variant=\"tertiary\"\n              size=\"small\"\n              iconOnly={true}\n              icon=\"close-big\"\n            ></stzh-button>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-CT0yhj7Q.js → p-BDRf5Lg2.js}

@@ -1,7 +1,7 @@
-import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-NuLYh9v8.js';
-import { d as defineCustomElement$3 } from './p-Db3dTAjX.js';
-import { d as defineCustomElement$2 } from './p-Cz5bXTUE.js';
-import { d as defineCustomElement$1 } from './p-Dq7hTryw.js';
+import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-ptAFQZzh.js';
+import { d as defineCustomElement$3 } from './p-BaC_gScF.js';
+import { d as defineCustomElement$2 } from './p-B8VeEjIy.js';
+import { d as defineCustomElement$1 } from './p-BK7VtwAc.js';
 
 const stzhAppNavCss = () => `: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{}: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}.stzh-app-nav{background-color:var(--stzh-color-coolgrey10)}@media screen and (max-width: 899px){.stzh-app-nav{height:var(--stzh-app-nav-height)}}.stzh-app-nav__links{display:flex;flex-direction:row;justify-content:space-between;padding:var(--stzh-space-medium) var(--stzh-space-large) var(--stzh-space-xlarge)}@media screen and (min-width: 900px){.stzh-app-nav__links{padding:0;align-items:center}}.stzh-app-nav__link,.stzh-app-nav .stzh-app-nav__link a{--text-decoration-line:none;--hover-text-decoration-line:none;color:var(--stzh-color-coolgrey90)}@media screen and (min-width: 900px){.stzh-app-nav__link,.stzh-app-nav .stzh-app-nav__link a{margin-right:var(--stzh-space-xlarge)}}.stzh-app-nav__link:last-child,.stzh-app-nav .stzh-app-nav__link a:last-child{margin-right:0}.stzh-app-nav__link:hover,.stzh-app-nav .stzh-app-nav__link a:hover{color:var(--stzh-color-primary60)}.stzh-app-nav .stzh-app-nav__link a.stzh-link--is-active,.stzh-app-nav .stzh-app-nav__link.stzh-link--is-active{text-decoration:none;color:var(--stzh-color-primary70)}@media screen and (min-width: 900px){.stzh-app-nav .stzh-app-nav__link a.stzh-link--is-active,.stzh-app-nav .stzh-app-nav__link.stzh-link--is-active{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy)}}.stzh-app-nav .stzh-link__inner{flex-direction:column}@media screen and (min-width: 900px){.stzh-app-nav .stzh-link__inner{flex-direction:row}}.stzh-app-nav .stzh-link__text{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);font-size:var(--stzh-font-pico-font-size);line-height:var(--stzh-font-pico-text-line-height)}@media screen and (min-width: 900px){.stzh-app-nav .stzh-link__text{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);font-weight:var(--stzh-font-weight-medium)}}.stzh-app-nav .stzh-link__icon-wrapper.sc-stzh-link:not(:empty)+.stzh-link__text.sc-stzh-link:not(:empty),.stzh-app-nav .stzh-link__text.sc-stzh-link:not(:empty)+.stzh-link__icon-wrapper.sc-stzh-link:not(:empty){margin-top:var(--stzh-space-xxsmall);margin-left:0}@media screen and (min-width: 900px){.stzh-app-nav .stzh-link__icon-wrapper.sc-stzh-link:not(:empty)+.stzh-link__text.sc-stzh-link:not(:empty),.stzh-app-nav .stzh-link__text.sc-stzh-link:not(:empty)+.stzh-link__icon-wrapper.sc-stzh-link:not(:empty){margin-left:var(--stzh-space-xsmall);margin-top:0}}`;
 
@@ -72,6 +72,6 @@ function defineCustomElement() {
 }
 
 export { StzhAppNav as S, defineCustomElement as d };
-//# sourceMappingURL=p-CT0yhj7Q.js.map
+//# sourceMappingURL=p-BDRf5Lg2.js.map
 
-//# sourceMappingURL=p-CT0yhj7Q.js.map
+//# sourceMappingURL=p-BDRf5Lg2.js.map

package/dist/components/{p-CT0yhj7Q.js.map → p-BDRf5Lg2.js.map}

@@ -1 +1 @@
-{"file":"p-CT0yhj7Q.js","mappings":";;;;;AAAA,MAAM,aAAa,GAAG,MAAM,CAAC,q4GAAq4G,CAAC;;MCUt5G,UAAU,iBAAAA,kBAAA,CAAA,MAAA,UAAA,SAAAC,CAAA,CAAA;AAJvB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AASU,QAAA,IAAK,CAAA,KAAA,GAAqB,EAAE;QAgB5B,IAAA,CAAA,qBAAqB,GAAG,CAAC,KAAiB,EAAE,IAAoB,KAAI;AAC1E,YAAA,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC;AAC5B,gBAAA,SAAS,EAAE,cAAc;gBACzB,IAAI;AACJ,gBAAA,aAAa,EAAE,KAAK;AACrB,aAAA,CAAC;AACJ,SAAC;AAkCF;AA9CC,IAAA,MAAM,iBAAiB,GAAA;AACrB,QAAA,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;AACtB,YAAA,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,QAAQ,CAAC;;;IAYnG,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,cAAc,EAAE,IAAI;SACrB;AAED,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,YAAY,EAAC,KAAK,EAAE,OAAO,EAAA,YAAA,EAAc,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,EAAE,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,EAAE,QAAQ,EAAC,IAAI,EAAA,EAClH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,qBAAqB,EAAC,IAAI,EAAC,MAAM,EACzC,EAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,KAClB,CAAA,CAAA,WAAA,EAAA,EACE,KAAK,EAAC,oBAAoB,EAC1B,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,IAAI,EAAC,UAAU,EACD,cAAA,EAAA,IAAI,CAAC,WAAW,EAC9B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,IAAI,EAAE,IAAI,CAAC,IAAI,EACN,SAAA,EAAA,IAAI,CAAC,EAAE,EAChB,OAAO,EAAE,CAAC,CAAa,KAAI;AACzB,gBAAA,IAAI,CAAC,qBAAqB,CAAC,CAAC,EAAE,IAAI,CAAC;AACrC,aAAC,EAAA,EAEA,IAAI,CAAC,IAAI,CACA,CACb,CAAC,CACE,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-app-nav/stzh-app-nav.scss?tag=stzh-app-nav","src/components/stzh-app-nav/stzh-app-nav.tsx"],"sourcesContent":[".stzh-app-nav {\n  background-color: var(--stzh-color-coolgrey10);\n\n  @include mq($to: medium) {\n    height: var(--stzh-app-nav-height);\n  }\n\n  &__links {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    padding: space(\"medium\") space(\"large\") space(\"xlarge\");\n\n    @include mq($from: medium) {\n      padding: 0;\n      align-items: center;\n    }\n  }\n\n  &__link,\n  .stzh-app-nav__link a {\n    --text-decoration-line: none;\n    --hover-text-decoration-line: none;\n    color: var(--stzh-color-coolgrey90);\n\n    @include mq($from: medium) {\n      margin-right: space(\"xlarge\");\n    }\n\n    &:last-child {\n      margin-right: 0;\n    }\n\n    &:hover {\n      color: var(--stzh-color-primary60);\n    }\n  }\n\n  .stzh-app-nav__link a.stzh-link--is-active,\n  .stzh-app-nav__link.stzh-link--is-active {\n    text-decoration: none;\n    color: var(--stzh-color-primary70);\n\n    @include mq($from: medium) {\n      @include font(\"heavy\");\n    }\n  }\n\n  .stzh-link__inner {\n    flex-direction: column;\n\n    @include mq($from: medium) {\n      flex-direction: row;\n    }\n  }\n\n  .stzh-link__text {\n    @include font(\"medium\");\n    @include fontSize(\"pico\");\n\n    @include mq($from: medium) {\n      @include fontSize(\"milli\");\n      font-weight: var(--stzh-font-weight-medium);\n    }\n  }\n\n  .stzh-link__icon-wrapper.sc-stzh-link:not(:empty)\n    + .stzh-link__text.sc-stzh-link:not(:empty),\n  .stzh-link__text.sc-stzh-link:not(:empty)\n    + .stzh-link__icon-wrapper.sc-stzh-link:not(:empty) {\n    margin-top: space(\"xxsmall\");\n    margin-left: 0;\n\n    @include mq($from: medium) {\n      margin-left: space(\"xsmall\");\n      margin-top: 0;\n    }\n  }\n}\n","import { Component, Prop, h, Host, Element, Event, EventEmitter } from \"@stencil/core\";\n\nimport { StzhAppNavLocalizedText } from \"./stzh-app-nav.localization\";\n\nimport { StzhAppNavItem, StzhAppNavItemClickEvent } from \"../../index\";\n\n@Component({\n  tag: \"stzh-app-nav\",\n  styleUrl: \"stzh-app-nav.scss\",\n})\nexport class StzhAppNav {\n  /** Translation strings */\n  @Prop() localization: StzhAppNavLocalizedText;\n\n  /** AppNav menu items */\n  @Prop() items: StzhAppNavItem[] = [];\n\n  /** AppNav element ID */\n  @Prop() appNavId: string;\n\n  @Element() element: HTMLStzhAppNavElement;\n\n  /** AppNav item click event */\n  @Event() stzhAppNavItemClick: EventEmitter<StzhAppNavItemClickEvent>;\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"appnav\");\n    }\n  }\n\n  private handleAppNavItemClick = (event: MouseEvent, item: StzhAppNavItem) => {\n    this.stzhAppNavItemClick.emit({\n      component: \"stzh-app-nav\",\n      item,\n      originalEvent: event,\n    });\n  };\n\n  render() {\n    const classes = {\n      \"stzh-app-nav\": true,\n    };\n\n    return (\n      <Host>\n        <nav role=\"navigation\" class={classes} aria-label={this.localization.title} id={this.appNavId || null} tabindex=\"-1\">\n          <div class=\"stzh-app-nav__links\" role=\"list\">\n            {this.items.map(item => (\n              <stzh-link\n                class=\"stzh-app-nav__link\"\n                active={item.active}\n                role=\"listitem\"\n                a11y-current={item.a11yCurrent}\n                href={item.href}\n                badge={item.badge}\n                badgeType={item.badgeType}\n                icon={item.icon}\n                link-id={item.id}\n                onClick={(e: MouseEvent) => {\n                  this.handleAppNavItemClick(e, item);\n                }}\n              >\n                {item.text}\n              </stzh-link>\n            ))}\n          </div>\n        </nav>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-BDRf5Lg2.js","mappings":";;;;;AAAA,MAAM,aAAa,GAAG,MAAM,CAAC,q4GAAq4G,CAAC;;MCUt5G,UAAU,iBAAAA,kBAAA,CAAA,MAAA,UAAA,SAAAC,CAAA,CAAA;AAJvB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AASU,QAAA,IAAK,CAAA,KAAA,GAAqB,EAAE;QAgB5B,IAAA,CAAA,qBAAqB,GAAG,CAAC,KAAiB,EAAE,IAAoB,KAAI;AAC1E,YAAA,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC;AAC5B,gBAAA,SAAS,EAAE,cAAc;gBACzB,IAAI;AACJ,gBAAA,aAAa,EAAE,KAAK;AACrB,aAAA,CAAC;AACJ,SAAC;AAkCF;AA9CC,IAAA,MAAM,iBAAiB,GAAA;AACrB,QAAA,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;AACtB,YAAA,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,QAAQ,CAAC;;;IAYnG,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,cAAc,EAAE,IAAI;SACrB;AAED,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,YAAY,EAAC,KAAK,EAAE,OAAO,EAAA,YAAA,EAAc,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,EAAE,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,EAAE,QAAQ,EAAC,IAAI,EAAA,EAClH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,qBAAqB,EAAC,IAAI,EAAC,MAAM,EACzC,EAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,KAClB,CAAA,CAAA,WAAA,EAAA,EACE,KAAK,EAAC,oBAAoB,EAC1B,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,IAAI,EAAC,UAAU,EACD,cAAA,EAAA,IAAI,CAAC,WAAW,EAC9B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,IAAI,EAAE,IAAI,CAAC,IAAI,EACN,SAAA,EAAA,IAAI,CAAC,EAAE,EAChB,OAAO,EAAE,CAAC,CAAa,KAAI;AACzB,gBAAA,IAAI,CAAC,qBAAqB,CAAC,CAAC,EAAE,IAAI,CAAC;AACrC,aAAC,EAAA,EAEA,IAAI,CAAC,IAAI,CACA,CACb,CAAC,CACE,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-app-nav/stzh-app-nav.scss?tag=stzh-app-nav","src/components/stzh-app-nav/stzh-app-nav.tsx"],"sourcesContent":[".stzh-app-nav {\n  background-color: var(--stzh-color-coolgrey10);\n\n  @include mq($to: medium) {\n    height: var(--stzh-app-nav-height);\n  }\n\n  &__links {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    padding: space(\"medium\") space(\"large\") space(\"xlarge\");\n\n    @include mq($from: medium) {\n      padding: 0;\n      align-items: center;\n    }\n  }\n\n  &__link,\n  .stzh-app-nav__link a {\n    --text-decoration-line: none;\n    --hover-text-decoration-line: none;\n    color: var(--stzh-color-coolgrey90);\n\n    @include mq($from: medium) {\n      margin-right: space(\"xlarge\");\n    }\n\n    &:last-child {\n      margin-right: 0;\n    }\n\n    &:hover {\n      color: var(--stzh-color-primary60);\n    }\n  }\n\n  .stzh-app-nav__link a.stzh-link--is-active,\n  .stzh-app-nav__link.stzh-link--is-active {\n    text-decoration: none;\n    color: var(--stzh-color-primary70);\n\n    @include mq($from: medium) {\n      @include font(\"heavy\");\n    }\n  }\n\n  .stzh-link__inner {\n    flex-direction: column;\n\n    @include mq($from: medium) {\n      flex-direction: row;\n    }\n  }\n\n  .stzh-link__text {\n    @include font(\"medium\");\n    @include fontSize(\"pico\");\n\n    @include mq($from: medium) {\n      @include fontSize(\"milli\");\n      font-weight: var(--stzh-font-weight-medium);\n    }\n  }\n\n  .stzh-link__icon-wrapper.sc-stzh-link:not(:empty)\n    + .stzh-link__text.sc-stzh-link:not(:empty),\n  .stzh-link__text.sc-stzh-link:not(:empty)\n    + .stzh-link__icon-wrapper.sc-stzh-link:not(:empty) {\n    margin-top: space(\"xxsmall\");\n    margin-left: 0;\n\n    @include mq($from: medium) {\n      margin-left: space(\"xsmall\");\n      margin-top: 0;\n    }\n  }\n}\n","import { Component, Prop, h, Host, Element, Event, EventEmitter } from \"@stencil/core\";\n\nimport { StzhAppNavLocalizedText } from \"./stzh-app-nav.localization\";\n\nimport { StzhAppNavItem, StzhAppNavItemClickEvent } from \"../../index\";\n\n@Component({\n  tag: \"stzh-app-nav\",\n  styleUrl: \"stzh-app-nav.scss\",\n})\nexport class StzhAppNav {\n  /** Translation strings */\n  @Prop() localization: StzhAppNavLocalizedText;\n\n  /** AppNav menu items */\n  @Prop() items: StzhAppNavItem[] = [];\n\n  /** AppNav element ID */\n  @Prop() appNavId: string;\n\n  @Element() element: HTMLStzhAppNavElement;\n\n  /** AppNav item click event */\n  @Event() stzhAppNavItemClick: EventEmitter<StzhAppNavItemClickEvent>;\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"appnav\");\n    }\n  }\n\n  private handleAppNavItemClick = (event: MouseEvent, item: StzhAppNavItem) => {\n    this.stzhAppNavItemClick.emit({\n      component: \"stzh-app-nav\",\n      item,\n      originalEvent: event,\n    });\n  };\n\n  render() {\n    const classes = {\n      \"stzh-app-nav\": true,\n    };\n\n    return (\n      <Host>\n        <nav role=\"navigation\" class={classes} aria-label={this.localization.title} id={this.appNavId || null} tabindex=\"-1\">\n          <div class=\"stzh-app-nav__links\" role=\"list\">\n            {this.items.map(item => (\n              <stzh-link\n                class=\"stzh-app-nav__link\"\n                active={item.active}\n                role=\"listitem\"\n                a11y-current={item.a11yCurrent}\n                href={item.href}\n                badge={item.badge}\n                badgeType={item.badgeType}\n                icon={item.icon}\n                link-id={item.id}\n                onClick={(e: MouseEvent) => {\n                  this.handleAppNavItemClick(e, item);\n                }}\n              >\n                {item.text}\n              </stzh-link>\n            ))}\n          </div>\n        </nav>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-NjuIpMSt.js → p-BDne2rQr.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-NuLYh9v8.js';
+import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-ptAFQZzh.js';
 import { g as getDefaultExportFromCjs } from './p-E-ZsRS8r.js';
 
 var dist$1 = {};
@@ -4105,6 +4105,6 @@ function defineCustomElement() {
 }
 
 export { StzhSortable as S, defineCustomElement as d };
-//# sourceMappingURL=p-NjuIpMSt.js.map
+//# sourceMappingURL=p-BDne2rQr.js.map
 
-//# sourceMappingURL=p-NjuIpMSt.js.map
+//# sourceMappingURL=p-BDne2rQr.js.map