npm - @oiz/stzh-components - Versions diffs - 2.8.0-alpha → 2.8.0-beta - Mend

@oiz/stzh-components 2.8.0-alpha → 2.8.0-beta

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

Files changed (132) hide show

package/dist/stzh-components/{p-2009a8df.system.entry.js.map → p-88440469.system.entry.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["stzhBadgeCss","StzhBadge","exports","class_1","prototype","render","classes","_a","concat","this","type","h","Host","class","label","stzhButtonCss","StzhButton","focusedByInput","onInput","event","_this","checked","input","stzhChange","emit","component","originalEvent","value","onRootFocus","setFocus","onFocus","focusEvent","FocusEvent","view","window","bubbles","cancelable","element","dispatchEvent","stzhFocus","onBlur","blurEvent","stzhBlur","onClick","disabled","stopPropagation","preventDefault","class_2","button","focus","renderIcon","iconUsed","icon","name","badge","badgeEmpty","badgePosition","badgeType","renderContent","rel","includes","localization","$globals","externalLinkLabel","download","downloadLinkLabel","ref","el","text","renderInner","Fragment","iconPosition","componentWillLoad","fetchTranslations","_b","sent","componentDidRender","requestAnimationFrame","setAttribute","analyticsId","innerText","hasSlot","iconOnly","floating","rounded","fullwidth","a11yDisabled","active","effect","textAlign","size","variant","tabindex","href","target","a11yLabel","a11yDescribedby","a11yExpanded","a11yControls","accessKey","linkAccesskey","a11yTabindex","stzhIconCss","iconCounter","StzhIcon","class_3","iconId","role","a11yTitle","focusable","id"],"sources":["src/components/stzh-badge/stzh-badge.scss?tag=stzh-badge&encapsulation=scoped","src/components/stzh-badge/stzh-badge.tsx","src/components/stzh-button/stzh-button.scss?tag=stzh-button&encapsulation=scoped","src/components/stzh-button/stzh-button.tsx","src/components/stzh-icon/stzh-icon.scss?tag=stzh-icon&encapsulation=scoped","src/components/stzh-icon/stzh-icon.tsx"],"sourcesContent":[":host {\n --color: #{$colorWhite};\n --background-color: #{$baseColor};\n display: inline-flex;\n\n &[type=\"success\"] {\n --background-color: #{$colorTruegreen};\n }\n\n &[type=\"warning\"] {\n --color: #{$colorGrey87};\n --background-color: #{$colorWarning};\n }\n\n &[type=\"error\"] {\n --background-color: #{$colorError};\n }\n\n &[type=\"info\"] {\n --background-color: #{$colorZueriblue};\n }\n}\n\n.stzh-badge {\n @include badge;\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n} from \"@stencil/core\";\n\n/*\n @slot - Slot badge content\n /\n@Component({\n tag: \"stzh-badge\",\n styleUrl: \"stzh-badge.scss\",\n scoped: true\n})\nexport class StzhBadge {\n /* Text content of the badge /\n @Prop() label: string = \"\";\n\n /* Type /\n @Prop({ reflect: true }) type: \"default\" \| \"success\" \| \"warning\" \| \"error\" \| \"info\" = \"default\";\n\n render() {\n const classes = {\n \"stzh-badge\": true,\n [`stzh-badge--type-${this.type}`]: !!this.type\n };\n\n return (\n <Host>\n <div class={classes}>\n {this.label}\n </div>\n </Host>\n );\n }\n}\n",":host {\n --color: #{$colorWhite};\n --background-color: #{$colorPrimary};\n --border-width: 1px;\n --border-color: #{$colorPrimary};\n --border-radius: #{$buttonBorderRadius};\n --height: #{$formInputHeight};\n --icon-size: #{iconSize('small')};\n --icon-text-margin: #{space('small')};\n --badge-icon-text-margin: calc(var(--icon-text-margin) + #{space('xxsmall')});\n --padding: calc(#{space('xsmall')} - 1px) #{space('xlarge')};\n --white-space: normal;\n --border-radius: #{$buttonBorderRadius};\n\n --hover-color: #{$colorWhite};\n --hover-background-color: #{$colorPrimaryHover};\n --hover-border-color: #{$colorPrimaryHover};\n\n --floating-position: sticky;\n --floating-float: right;\n --floating-bottom: #{space('medium')};\n --floating-right: #{space('medium')};\n\n display: inline-block;\n\n @include mq($from: small) {\n --floating-bottom: #{space('xlarge')};\n --floating-right: #{space('xlarge')};\n }\n\n &[fullwidth]:not([fullwidth=\"false\"]) {\n width: 100%;\n display: block;\n }\n\n &[rounded]:not([rounded=\"false\"]) {\n --border-radius: var(--height);\n }\n\n &[floating]:not([floating=\"false\"]) {\n position: var(--floating-position);\n bottom: var(--floating-bottom);\n right: var(--floating-right);\n float: var(--floating-float);\n }\n\n &[size=\"small\"] {\n --height: #{$formInputHeightSmall};\n }\n\n &[size=\"tiny\"] {\n --height: #{$formInputHeightTiny};\n --icon-text-margin: #{space('xsmall')};\n --padding: calc(#{space('xxsmall')} - 1px) #{space('medium')};\n }\n\n &[variant=\"secondary\"] {\n --color: #{$colorPrimary};\n --background-color: #{$colorWhite};\n --border-color: #{$colorPrimary60op};\n }\n\n &[variant=\"input\"] {\n --color: #{$formColor};\n --background-color: transparent;\n --border-color: #{$formBorderColor};\n\n --hover-color: #{$colorPrimaryHover};\n --hover-background-color: transparent;\n --hover-border-color: #{$colorPrimaryHover};\n }\n\n &[variant=\"tertiary\"] {\n --color: #{$colorPrimary};\n --background-color: transparent;\n --border-color: transparent;\n\n --hover-color: #{$colorPrimaryHover};\n --hover-background-color: #{$buttonTextHoverBackground};\n --hover-border-color: transparent;\n }\n\n &[active]:not([active=\"false\"]) {\n --color: #{$colorWhite};\n --background-color: #{$colorPrimaryHover};\n --border-color: #{$colorPrimaryHover};\n\n --hover-color: #{$colorWhite};\n --hover-background-color: #{$colorPrimaryHover};\n --hover-border-color: #{$colorPrimaryHover};\n }\n\n &[disabled]:not([disabled=\"false\"]),\n &[a11y-disabled]:not([a11y-disabled=\"false\"]) {\n --border-color: #{$colorGrey13};\n --background-color: #{$colorGrey13};\n\n --hover-border-color: #{$colorGrey13};\n --hover-background-color: #{$colorGrey13};\n }\n\n &[disabled]:not([disabled=\"false\"])[variant=\"secondary\"],\n &[disabled]:not([disabled=\"false\"])[variant=\"input\"],\n &[disabled]:not([disabled=\"false\"])[variant=\"tertiary\"],\n &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"secondary\"],\n &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"input\"],\n &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"tertiary\"] {\n --color: #{$colorGrey25};\n --border-color: #{$colorGrey13};\n --background-color: transparent;\n\n --hover-color: #{$colorGrey25};\n --hover-border-color: #{$colorGrey13};\n --hover-background-color: transparent;\n }\n}\n\n@keyframes stzh-button-effect-cta {\n\t0%,\n\t20%,\n\t50%,\n\t80%,\n\t100% {\n\t\ttransform: translateX(0);\n\t}\n\n\t40% {\n\t\ttransform: translateX(-8px);\n\t}\n\n\t60% {\n\t\ttransform: translateX(-4px);\n\t}\n}\n\n:host ::slotted(stzh-icon),\n.stzh-button__icon {\n --size: var(--icon-size);\n}\n\n.stzh-button {\n @include fontSize('milli');\n line-height: 1.25;\n font-family: inherit;\n position: relative;\n z-index: 0;\n overflow: visible;\n display: flex;\n align-items: center;\n justify-content: stretch;\n appearance: none;\n color: var(--color);\n padding: var(--padding);\n background-color: var(--background-color);\n transition-duration: $baseTransitionAnimationSpeed;\n transition-property: color, background-color, border-color;\n border-style: solid;\n border-width: var(--border-width);\n border-color: var(--border-color);\n cursor: pointer;\n text-decoration-line: none;\n width: 100%;\n min-width: var(--height);\n min-height: var(--height);\n border-radius: var(--border-radius);\n text-align: left;\n\n &:hover {\n border-color: var(--hover-border-color);\n background-color: var(--hover-background-color);\n color: var(--hover-color);\n }\n\n &__vhidden {\n @include visuallyhidden;\n }\n\n &__inner {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-grow: 1;\n }\n\n &__icon-wrapper {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: auto;\n height: 1em;\n }\n\n &__text {\n @include wordWrap;\n white-space: var(--white-space);\n text-align: center;\n }\n\n &__icon-wrapper:not(:empty) + &__text:not(:empty),\n &__text:not(:empty) + &__icon-wrapper:not(:empty) {\n margin-left: var(--icon-text-margin);\n }\n\n &__badge {\n position: absolute;\n z-index: 1;\n top: 0;\n right: 0;\n }\n\n &__input {\n @include visuallyhiddenInput;\n }\n\n &__mark {\n @include radio__mark();\n width: 20px;\n height: 20px;\n margin-right: space('xsmall');\n border-color: currentColor;\n }\n\n &__check {\n @include radio__check();\n }\n\n / Hover / Focus / Checked / Disabled of Radio Type /\n\n &__input:checked:hover ~ &__inner &__mark &__check,\n &__input:checked:focus ~ &__inner &__mark &__check {\n color: $colorPrimaryHover;\n }\n\n &:hover &__mark,\n &__input:focus:hover ~ &__inner &__mark,\n &__input:checked:hover ~ &__inner &__mark,\n &__input:checked:focus ~ &__inner &__mark {\n border-color: $colorPrimaryHover;\n }\n\n &__input:focus ~ &__inner &__mark,\n &__input:checked ~ &__inner &__mark {\n border-color: $colorPrimary;\n }\n\n &__input:checked ~ &__inner &__mark &__check {\n opacity: 1;\n }\n\n &--is-disabled &__input ~ &__inner &__mark &__check {\n color: $formDisabledColor;\n }\n\n &--is-disabled &__input ~ &__inner &__mark {\n border-color: $formDisabledBorderColor;\n }\n\n &--is-disabled &__mark {\n background-color: $formDisabledBackgroundColor;\n }\n\n / Size variants /\n\n &--size-small,\n &--size-tiny {\n @include fontSize('micro');\n }\n\n / Floating /\n\n &--is-floating {\n box-shadow: $boxShadowOverlay;\n }\n\n / Badge positioning variants /\n\n &--badge-position-button &__icon-wrapper {\n position: static;\n }\n\n &__badge,\n &--badge-position-button &__badge {\n top: calc(#{space('xsmall')} -1);\n right: calc(#{space('xsmall')} * -1);\n }\n\n &--badge-position-icon#{&}--has-icon &__icon-wrapper {\n position: relative;\n }\n\n &--badge-position-icon#{&}--has-icon &__badge {\n top: calc(#{space('xsmall')} * -1);\n right: calc(#{space('small')} * -1);\n }\n\n &--badge-position-icon#{&}--has-icon#{&}--has-badge &__icon-wrapper:not(:empty) + &__text:not(:empty),\n &--badge-position-icon#{&}--has-icon#{&}--has-badge &__text:not(:empty) + &__icon-wrapper:not(:empty) {\n margin-left: var(--badge-icon-text-margin);\n }\n\n /* Variant if button only has icon /\n\n &--has-icon-only {\n width: var(--height);\n height: var(--height);\n padding: 0;\n }\n\n &--has-icon-only &__text {\n @include visuallyhidden;\n }\n\n / Effect /\n\n &--effect-cta:hover &__icon-wrapper {\n\t\tanimation: stzh-button-effect-cta 1s;\n }\n\n / Alignment variants /\n\n &--align-left &__inner {\n justify-content: flex-start;\n }\n\n &--align-right &__inner {\n justify-content: flex-end;\n }\n\n &--align-center &__inner {\n justify-content: center;\n }\n\n &--align-space-between &__inner {\n justify-content: space-between;\n }\n\n / Disabled variant /\n\n &--is-disabled {\n cursor: not-allowed;\n }\n}\n","import {\n Component,\n Host,\n Method,\n Fragment,\n Element,\n h,\n Prop,\n Event,\n EventEmitter\n} from \"@stencil/core\";\n\nimport {\n StzhButtonFocusEvent,\n StzhButtonBlurEvent,\n StzhButtonChangeEvent\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { fetchTranslations, StzhLocaleComponent } from \"../../utils/translation-utils\";\n\n/\n @slot - Slot for label/text content\n * @slot icon - Slot for icon element\n /\n@Component({\n tag: \"stzh-button\",\n styleUrl: \"stzh-button.scss\",\n scoped: true\n})\nexport class StzhButton {\n /* Translation strings /\n @Prop() localization: StzhLocaleComponent;\n\n /* Display a badge aligned to button or icons /\n @Prop() badge: string = \"\";\n\n /* Badge type /\n @Prop({ reflect: true }) badgeType: \"default\" \| \"success\" \| \"warning\" \| \"error\" \| \"info\" = \"default\";\n\n /* Badge position /\n @Prop({ reflect: true }) badgePosition: \"icon\" \| \"button\" = \"button\";\n\n /* Whether badge should be displayed empty /\n @Prop({ reflect: true }) badgeEmpty: boolean = false;\n\n /* Whether the button is full width /\n @Prop({ reflect: true }) fullwidth: boolean = false;\n\n /* Whether the button is rounded /\n @Prop({ reflect: true }) rounded: boolean = false;\n\n /* Whether the button is floating /\n @Prop({ reflect: true }) floating: boolean = false;\n\n /* Size variant /\n @Prop({ reflect: true }) size: \"default\" \| \"small\" \| \"tiny\" = \"default\";\n\n /* Text alignment /\n @Prop({ reflect: true }) textAlign: \"left\" \| \"center\" \| \"right\" \| \"space-between\" \| \"default\" = \"default\";\n\n /* Variant style /\n @Prop({ reflect: true }) variant: \"default\" \| \"secondary\" \| \"input\" \| \"tertiary\" = \"default\";\n\n /* Icon (use instead of icon slot) /\n @Prop() icon: string = \"\";\n\n /* Icon Position /\n @Prop({ reflect: true }) iconPosition: \"left\" \| \"right\" = \"left\";\n\n /* Checked status (if type is radio) /\n @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n /* The name of the input element (if type is radio) /\n @Prop({ reflect: true }) name: string = \"\";\n\n /* The value of the input element (if type is radio) /\n @Prop({ mutable: true }) value: string = \"\";\n\n /* `href` if the button should be used as link /\n @Prop() href: string = \"\";\n\n /* Rel (if href is used) /\n @Prop() rel: string;\n\n /* Target if the button is used as link (if `href` used) /\n @Prop() target: string = \"\";\n\n /* Download attribute of link (if `href` used) /\n @Prop() download: string;\n\n /* Type of the button /\n @Prop() type: \"button\" \| \"submit\" \| \"reset\" \| \"radio\" = \"button\";\n\n /* Whether the button is disabled /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* Whether the button is active /\n @Prop({ reflect: true }) active: boolean = false;\n\n /* Label /\n @Prop() label: string = \"\";\n\n /* Effect/Animation used /\n @Prop() effect: \"default\" \| \"cta\" = \"default\";\n\n /* Whether only an icon is used inside the button /\n @Prop({ reflect: true }) iconOnly: boolean = false;\n\n /* Access key of link (usually a number e.g. 1) /\n @Prop() linkAccesskey: string;\n\n /* Accessible label for screen readers to replace visible text /\n @Prop({ attribute: \"a11y-label\" }) a11yLabel: string;\n\n /* Id for element which describes the button (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) /\n @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n /* Aria expanded of link/button /\n @Prop({ reflect: true, attribute: \"a11y-expanded\" }) a11yExpanded: boolean;\n\n /* Aria disabled of link/button /\n @Prop({ reflect: true, attribute: \"a11y-disabled\" }) a11yDisabled: boolean;\n\n /* Aria controls of link/button /\n @Prop({ attribute: \"a11y-controls\" }) a11yControls: string;\n\n /* Tabindex of link/button /\n @Prop({ attribute: \"a11y-tabindex\" }) a11yTabindex: string;\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the link/button element.\n * Default value will be taken from `label` prop or default slot.\n /\n @Prop() analyticsId: string;\n\n @Element() element: HTMLStzhButtonElement;\n\n /* Focus button /\n @Method()\n async setFocus() {\n this.button.focus();\n }\n\n /* Focus event /\n @Event() stzhFocus: EventEmitter<StzhButtonFocusEvent>;\n\n /* Input blur event /\n @Event() stzhBlur: EventEmitter<StzhButtonBlurEvent>;\n\n /* Change event (only called if type is radio) /\n @Event() stzhChange: EventEmitter<StzhButtonChangeEvent>;\n\n private button: HTMLButtonElement \| HTMLAnchorElement \| HTMLLabelElement;\n private input: HTMLInputElement;\n private text: HTMLDivElement;\n private focusedByInput: boolean = false;\n\n private onInput = (event: InputEvent) => {\n this.checked = this.input.checked;\n this.stzhChange.emit({\n component: \"stzh-button\",\n originalEvent: event,\n value: this.value,\n checked: this.checked\n });\n }\n\n private onRootFocus = () => {\n if (!this.focusedByInput) {\n this.setFocus();\n }\n\n this.focusedByInput = false;\n }\n\n private onFocus = (event: FocusEvent) => {\n this.focusedByInput = true;\n\n const focusEvent = new FocusEvent(\"focus\", {\n view: window,\n bubbles: false,\n cancelable: false\n });\n\n this.element.dispatchEvent(focusEvent);\n this.stzhFocus.emit({\n component: \"stzh-button\",\n originalEvent: event\n });\n }\n\n private onBlur = (event: FocusEvent) => {\n const blurEvent = new FocusEvent(\"blur\", {\n view: window,\n bubbles: false,\n cancelable: false\n });\n\n this.element.dispatchEvent(blurEvent);\n this.stzhBlur.emit({\n component: \"stzh-button\",\n originalEvent: event\n });\n }\n\n private onClick = (event: MouseEvent) => {\n if (this.disabled) {\n event.stopPropagation();\n event.preventDefault();\n }\n }\n\n private renderIcon(iconUsed: boolean): HTMLInputElement {\n return (\n <div class=\"stzh-button__icon-wrapper\">\n {this.icon ?\n <stzh-icon class=\"stzh-button__icon\" name={this.icon}></stzh-icon>\n :\n <slot name=\"icon\"></slot>\n }\n {(this.badge \|\| this.badgeEmpty) && this.badgePosition === \"icon\" && iconUsed &&\n <stzh-badge class=\"stzh-button__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n }\n </div>\n );\n }\n\n private renderContent(): HTMLDivElement {\n return (\n <div class=\"stzh-button__text\">\n {this.rel && this.rel.includes('external') && <div class=\"stzh-button__vhidden\">{this.localization.$globals.externalLinkLabel}</div>}\n {this.download && <div class=\"stzh-button__vhidden\">{this.localization.$globals.downloadLinkLabel}</div>}\n <div ref={(el) => (this.text = el as HTMLDivElement)}>{this.label ? this.label : <slot></slot>}</div>\n </div>\n );\n }\n\n private renderInner(iconUsed: boolean): DocumentFragment {\n return (\n <Fragment>\n <div\n class=\"stzh-button__inner\"\n onClick={this.onClick}\n >\n {this.type === \"radio\" &&\n <div class=\"stzh-button__mark\">\n <div class=\"stzh-button__check\"></div>\n </div>\n }\n {this.iconPosition === \"left\" && this.renderIcon(iconUsed)}\n {this.renderContent()}\n {this.iconPosition === \"right\" && this.renderIcon(iconUsed)}\n </div>\n {(this.badge \|\| this.badgeEmpty) && (this.badgePosition === \"button\" \|\| !iconUsed) &&\n <stzh-badge\n class=\"stzh-button__badge\"\n label={this.badge}\n type={this.badgeType}\n onClick={this.onClick}\n ></stzh-badge>\n }\n </Fragment>\n );\n }\n\n async componentWillLoad() {\n if (!this.localization) {\n this.localization = await fetchTranslations(this.element, \"button\");\n }\n }\n\n componentDidRender() {\n requestAnimationFrame(() => {\n this.button.setAttribute(\"s-object-id\", this.analyticsId \|\| this.text.innerText);\n });\n }\n\n render() {\n const iconUsed: boolean = hasSlot(this.element, \"icon\") \|\| !!this.icon;\n const classes = {\n \"stzh-button\": true,\n \"stzh-button--has-icon\": iconUsed,\n \"stzh-button--has-icon-only\": this.iconOnly,\n \"stzh-button--has-badge\": !!this.badge,\n \"stzh-button--is-floating\": this.floating,\n \"stzh-button--is-rounded\": this.rounded,\n \"stzh-button--is-fullwidth\": this.fullwidth,\n \"stzh-button--is-disabled\": this.disabled \|\| this.a11yDisabled,\n \"stzh-button--is-active\": this.active,\n [`stzh-button--effect-${this.effect}`]: !!this.effect,\n [`stzh-button--badge-position-${this.badgePosition}`]: !!this.badgePosition,\n [`stzh-button--align-${this.textAlign}`]: !!this.textAlign,\n [`stzh-button--size-${this.size}`]: !!this.size,\n [`stzh-button--type-${this.type}`]: !!this.type,\n [`stzh-button--${this.variant}`]: !!this.variant\n };\n\n return (\n <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n {this.href ?\n <a\n ref={(el) => (this.button = el as HTMLAnchorElement)}\n href={this.disabled ? null : this.href}\n rel={this.rel}\n download={this.download}\n target={this.target}\n class={classes}\n aria-label={this.a11yLabel}\n aria-describedby={this.a11yDescribedby}\n aria-disabled={typeof this.a11yDisabled !== \"undefined\"\n ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n aria-controls={this.a11yControls}\n accessKey={this.linkAccesskey}\n tabindex={this.a11yTabindex}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n onClick={this.onClick}\n >\n {this.renderInner(iconUsed)}\n </a>\n :\n this.type === \"radio\" ?\n <label\n ref={(el) => (this.button = el as HTMLLabelElement)}\n class={classes}\n onClick={this.onClick}\n >\n <input\n ref={(el) => (this.input = el as HTMLInputElement)}\n type=\"radio\"\n class=\"stzh-button__input\"\n name={this.name}\n value={this.value}\n checked={this.checked}\n disabled={this.disabled}\n aria-label={this.a11yLabel}\n aria-describedby={this.a11yDescribedby}\n aria-disabled={typeof this.a11yDisabled !== \"undefined\"\n ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n aria-controls={this.a11yControls}\n accessKey={this.linkAccesskey}\n tabindex={this.a11yTabindex}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n onClick={this.onClick}\n onInput={this.onInput}\n />\n {this.renderInner(iconUsed)}\n </label>\n :\n <button\n ref={(el) => (this.button = el as HTMLButtonElement)}\n class={classes}\n type={this.type}\n disabled={this.disabled}\n aria-label={this.a11yLabel}\n aria-describedby={this.a11yDescribedby}\n aria-disabled={typeof this.a11yDisabled !== \"undefined\"\n ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n aria-controls={this.a11yControls}\n accessKey={this.linkAccesskey}\n tabindex={this.a11yTabindex}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n onClick={this.onClick}\n >\n {this.renderInner(iconUsed)}\n </button>\n }\n </Host>\n );\n }\n}\n",":host {\n --size: #{iconSize()};\n\n display: inline-flex;\n justify-content: center;\n align-items: center;\n color: currentColor;\n vertical-align: text-top;\n}\n\n.stzh-icon {\n width: var(--size);\n height: var(--size);\n}\n","import {\n Component,\n Host,\n h,\n Prop\n} from \"@stencil/core\";\n\nlet iconCounter = 0;\n\n@Component({\n tag: \"stzh-icon\",\n styleUrl: \"stzh-icon.scss\",\n scoped: 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 private iconId: string;\n\n componentWillLoad() {\n this.iconId = `stzh-icon-${iconCounter++}`;\n }\n\n render() {\n return (\n <Host>\n {this.name &&\n <svg\n class=\"stzh-icon\"\n role={this.a11yTitle ? 'img' : 'presentation'}\n aria-hidden={this.a11yTitle ? null : 'true'}\n focusable={this.a11yTitle ? 'true' : 'false'}\n aria-labelledby={this.a11yTitle ? `${this.iconId}-title` : null}\n >\n {this.a11yTitle &&\n <title id={`${this.iconId}-title`}>\n {this.a11yTitle}\n </title>\n }\n <use href={`#stzh-icon-${this.name}`}></use>\n </svg>\n }\n </Host>\n );\n }\n}\n"],"mappings":"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"}
1	+ {"version":3,"names":["stzhBadgeCss","StzhBadge","exports","class_1","prototype","render","classes","_a","concat","this","type","h","Host","class","label","stzhButtonCss","StzhButton","focusedByInput","onInput","event","_this","checked","input","stzhChange","emit","component","originalEvent","value","onRootFocus","setFocus","onFocus","focusEvent","FocusEvent","view","window","bubbles","cancelable","element","dispatchEvent","stzhFocus","onBlur","blurEvent","stzhBlur","onClick","disabled","stopPropagation","preventDefault","class_2","button","focus","renderIcon","iconUsed","icon","name","badge","badgeEmpty","badgePosition","badgeType","renderContent","rel","includes","localization","$globals","externalLinkLabel","download","downloadLinkLabel","ref","el","text","renderInner","Fragment","iconPosition","componentWillLoad","fetchTranslations","_b","sent","componentDidRender","requestAnimationFrame","setAttribute","analyticsId","innerText","hasSlot","iconOnly","floating","rounded","fullwidth","a11yDisabled","active","effect","textAlign","size","variant","tabindex","href","target","a11yLabel","a11yDescribedby","a11yExpanded","a11yControls","accessKey","linkAccesskey","a11yTabindex","stzhIconCss","iconCounter","StzhIcon","class_3","iconId","role","a11yTitle","focusable","id"],"sources":["src/components/stzh-badge/stzh-badge.scss?tag=stzh-badge&encapsulation=scoped","src/components/stzh-badge/stzh-badge.tsx","src/components/stzh-button/stzh-button.scss?tag=stzh-button&encapsulation=scoped","src/components/stzh-button/stzh-button.tsx","src/components/stzh-icon/stzh-icon.scss?tag=stzh-icon&encapsulation=scoped","src/components/stzh-icon/stzh-icon.tsx"],"sourcesContent":[":host {\n --color: #{$colorWhite};\n --background-color: #{$baseColor};\n display: inline-flex;\n\n &[type=\"success\"] {\n --background-color: #{$colorTruegreen};\n }\n\n &[type=\"warning\"] {\n --color: #{$colorGrey87};\n --background-color: #{$colorWarning};\n }\n\n &[type=\"error\"] {\n --background-color: #{$colorError};\n }\n\n &[type=\"info\"] {\n --background-color: #{$colorZueriblue};\n }\n}\n\n.stzh-badge {\n @include badge;\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n} from \"@stencil/core\";\n\n/*\n @slot - Slot badge content\n /\n@Component({\n tag: \"stzh-badge\",\n styleUrl: \"stzh-badge.scss\",\n scoped: true\n})\nexport class StzhBadge {\n /* Text content of the badge /\n @Prop() label: string = \"\";\n\n /* Type /\n @Prop({ reflect: true }) type: \"default\" \| \"success\" \| \"warning\" \| \"error\" \| \"info\" = \"default\";\n\n render() {\n const classes = {\n \"stzh-badge\": true,\n [`stzh-badge--type-${this.type}`]: !!this.type\n };\n\n return (\n <Host>\n <div class={classes}>\n {this.label}\n </div>\n </Host>\n );\n }\n}\n",":host {\n --color: #{$colorWhite};\n --background-color: #{$colorPrimary};\n --border-width: 1px;\n --border-color: #{$colorPrimary};\n --border-radius: #{$buttonBorderRadius};\n --height: #{$formInputHeight};\n --icon-size: #{iconSize('small')};\n --icon-text-margin: #{space('small')};\n --badge-icon-text-margin: calc(var(--icon-text-margin) + #{space('xxsmall')});\n --padding: calc(#{space('xsmall')} - 1px) #{space('xlarge')};\n --white-space: normal;\n --border-radius: #{$buttonBorderRadius};\n\n --hover-color: #{$colorWhite};\n --hover-background-color: #{$colorPrimaryHover};\n --hover-border-color: #{$colorPrimaryHover};\n\n --floating-position: sticky;\n --floating-float: right;\n --floating-bottom: #{space('medium')};\n --floating-right: #{space('medium')};\n\n display: inline-block;\n\n @include mq($from: small) {\n --floating-bottom: #{space('xlarge')};\n --floating-right: #{space('xlarge')};\n }\n\n &[fullwidth]:not([fullwidth=\"false\"]) {\n width: 100%;\n display: block;\n }\n\n &[rounded]:not([rounded=\"false\"]) {\n --border-radius: var(--height);\n }\n\n &[floating]:not([floating=\"false\"]) {\n position: var(--floating-position);\n bottom: var(--floating-bottom);\n right: var(--floating-right);\n float: var(--floating-float);\n }\n\n &[size=\"small\"] {\n --height: #{$formInputHeightSmall};\n }\n\n &[size=\"tiny\"] {\n --height: #{$formInputHeightTiny};\n --icon-text-margin: #{space('xsmall')};\n --padding: calc(#{space('xxsmall')} - 1px) #{space('medium')};\n }\n\n &[variant=\"secondary\"] {\n --color: #{$colorPrimary};\n --background-color: #{$colorWhite};\n --border-color: #{$colorPrimary60op};\n }\n\n &[variant=\"input\"] {\n --color: #{$formColor};\n --background-color: transparent;\n --border-color: #{$formBorderColor};\n\n --hover-color: #{$colorPrimaryHover};\n --hover-background-color: transparent;\n --hover-border-color: #{$colorPrimaryHover};\n }\n\n &[variant=\"tertiary\"] {\n --color: #{$colorPrimary};\n --background-color: transparent;\n --border-color: transparent;\n\n --hover-color: #{$colorPrimaryHover};\n --hover-background-color: #{$buttonTextHoverBackground};\n --hover-border-color: transparent;\n }\n\n &[active]:not([active=\"false\"]) {\n --color: #{$colorWhite};\n --background-color: #{$colorPrimaryHover};\n --border-color: #{$colorPrimaryHover};\n\n --hover-color: #{$colorWhite};\n --hover-background-color: #{$colorPrimaryHover};\n --hover-border-color: #{$colorPrimaryHover};\n }\n\n &[disabled]:not([disabled=\"false\"]),\n &[a11y-disabled]:not([a11y-disabled=\"false\"]) {\n --border-color: #{$colorGrey13};\n --background-color: #{$colorGrey13};\n\n --hover-border-color: #{$colorGrey13};\n --hover-background-color: #{$colorGrey13};\n }\n\n &[disabled]:not([disabled=\"false\"])[variant=\"secondary\"],\n &[disabled]:not([disabled=\"false\"])[variant=\"input\"],\n &[disabled]:not([disabled=\"false\"])[variant=\"tertiary\"],\n &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"secondary\"],\n &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"input\"],\n &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"tertiary\"] {\n --color: #{$colorGrey25};\n --border-color: #{$colorGrey13};\n --background-color: transparent;\n\n --hover-color: #{$colorGrey25};\n --hover-border-color: #{$colorGrey13};\n --hover-background-color: transparent;\n }\n}\n\n@keyframes stzh-button-effect-cta {\n\t0%,\n\t20%,\n\t50%,\n\t80%,\n\t100% {\n\t\ttransform: translateX(0);\n\t}\n\n\t40% {\n\t\ttransform: translateX(-8px);\n\t}\n\n\t60% {\n\t\ttransform: translateX(-4px);\n\t}\n}\n\n:host ::slotted(stzh-icon),\n.stzh-button__icon {\n --size: var(--icon-size);\n}\n\n.stzh-button {\n @include fontSize('milli');\n line-height: 1.25;\n font-family: inherit;\n position: relative;\n z-index: 0;\n overflow: visible;\n display: flex;\n align-items: center;\n justify-content: stretch;\n appearance: none;\n color: var(--color);\n padding: var(--padding);\n background-color: var(--background-color);\n transition-duration: $baseTransitionAnimationSpeed;\n transition-property: color, background-color, border-color;\n border-style: solid;\n border-width: var(--border-width);\n border-color: var(--border-color);\n cursor: pointer;\n text-decoration-line: none;\n width: 100%;\n min-width: var(--height);\n min-height: var(--height);\n border-radius: var(--border-radius);\n text-align: left;\n\n &:hover {\n border-color: var(--hover-border-color);\n background-color: var(--hover-background-color);\n color: var(--hover-color);\n }\n\n &__vhidden {\n @include visuallyhidden;\n }\n\n &__inner {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-grow: 1;\n }\n\n &__icon-wrapper {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: auto;\n height: 1em;\n }\n\n &__text {\n @include wordWrap;\n white-space: var(--white-space);\n text-align: center;\n }\n\n &__icon-wrapper:not(:empty) + &__text:not(:empty),\n &__text:not(:empty) + &__icon-wrapper:not(:empty) {\n margin-left: var(--icon-text-margin);\n }\n\n &__badge {\n position: absolute;\n z-index: 1;\n top: 0;\n right: 0;\n }\n\n &__input {\n @include visuallyhiddenInput;\n }\n\n &__mark {\n @include radio__mark();\n width: 20px;\n height: 20px;\n margin-right: space('xsmall');\n border-color: currentColor;\n }\n\n &__check {\n @include radio__check();\n }\n\n / Hover / Focus / Checked / Disabled of Radio Type /\n\n &__input:checked:hover ~ &__inner &__mark &__check,\n &__input:checked:focus ~ &__inner &__mark &__check {\n color: $colorPrimaryHover;\n }\n\n &:hover &__mark,\n &__input:focus:hover ~ &__inner &__mark,\n &__input:checked:hover ~ &__inner &__mark,\n &__input:checked:focus ~ &__inner &__mark {\n border-color: $colorPrimaryHover;\n }\n\n &__input:focus ~ &__inner &__mark,\n &__input:checked ~ &__inner &__mark {\n border-color: $colorPrimary;\n }\n\n &__input:checked ~ &__inner &__mark &__check {\n opacity: 1;\n }\n\n &--is-disabled &__input ~ &__inner &__mark &__check {\n color: $formDisabledColor;\n }\n\n &--is-disabled &__input ~ &__inner &__mark {\n border-color: $formDisabledBorderColor;\n }\n\n &--is-disabled &__mark {\n background-color: $formDisabledBackgroundColor;\n }\n\n / Size variants /\n\n &--size-small,\n &--size-tiny {\n @include fontSize('micro');\n }\n\n / Floating /\n\n &--is-floating {\n box-shadow: $boxShadowOverlay;\n }\n\n / Badge positioning variants /\n\n &--badge-position-button &__icon-wrapper {\n position: static;\n }\n\n &__badge,\n &--badge-position-button &__badge {\n top: calc(#{space('xsmall')} -1);\n right: calc(#{space('xsmall')} * -1);\n }\n\n &--badge-position-icon#{&}--has-icon &__icon-wrapper {\n position: relative;\n }\n\n &--badge-position-icon#{&}--has-icon &__badge {\n top: calc(#{space('xsmall')} * -1);\n right: calc(#{space('small')} * -1);\n }\n\n &--badge-position-icon#{&}--has-icon#{&}--has-badge &__icon-wrapper:not(:empty) + &__text:not(:empty),\n &--badge-position-icon#{&}--has-icon#{&}--has-badge &__text:not(:empty) + &__icon-wrapper:not(:empty) {\n margin-left: var(--badge-icon-text-margin);\n }\n\n /* Variant if button only has icon /\n\n &--has-icon-only {\n width: var(--height);\n height: var(--height);\n padding: 0;\n }\n\n &--has-icon-only &__text {\n @include visuallyhidden;\n }\n\n / Effect /\n\n &--effect-cta:hover &__icon-wrapper {\n\t\tanimation: stzh-button-effect-cta 1s;\n }\n\n / Alignment variants /\n\n &--align-left &__inner {\n justify-content: flex-start;\n }\n\n &--align-right &__inner {\n justify-content: flex-end;\n }\n\n &--align-center &__inner {\n justify-content: center;\n }\n\n &--align-space-between &__inner {\n justify-content: space-between;\n }\n\n / Disabled variant /\n\n &--is-disabled {\n cursor: not-allowed;\n }\n}\n","import {\n Component,\n Host,\n Method,\n Fragment,\n Element,\n h,\n Prop,\n Event,\n EventEmitter\n} from \"@stencil/core\";\n\nimport {\n StzhButtonFocusEvent,\n StzhButtonBlurEvent,\n StzhButtonChangeEvent\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { fetchTranslations, StzhLocaleComponent } from \"../../utils/translation-utils\";\n\n/\n @slot - Slot for label/text content\n * @slot icon - Slot for icon element\n /\n@Component({\n tag: \"stzh-button\",\n styleUrl: \"stzh-button.scss\",\n scoped: true\n})\nexport class StzhButton {\n /* Translation strings /\n @Prop() localization: StzhLocaleComponent;\n\n /* Display a badge aligned to button or icons /\n @Prop() badge: string = \"\";\n\n /* Badge type /\n @Prop({ reflect: true }) badgeType: \"default\" \| \"success\" \| \"warning\" \| \"error\" \| \"info\" = \"default\";\n\n /* Badge position /\n @Prop({ reflect: true }) badgePosition: \"icon\" \| \"button\" = \"button\";\n\n /* Whether badge should be displayed empty /\n @Prop({ reflect: true }) badgeEmpty: boolean = false;\n\n /* Whether the button is full width /\n @Prop({ reflect: true }) fullwidth: boolean = false;\n\n /* Whether the button is rounded /\n @Prop({ reflect: true }) rounded: boolean = false;\n\n /* Whether the button is floating /\n @Prop({ reflect: true }) floating: boolean = false;\n\n /* Size variant /\n @Prop({ reflect: true }) size: \"default\" \| \"small\" \| \"tiny\" = \"default\";\n\n /* Text alignment /\n @Prop({ reflect: true }) textAlign: \"left\" \| \"center\" \| \"right\" \| \"space-between\" \| \"default\" = \"default\";\n\n /* Variant style /\n @Prop({ reflect: true }) variant: \"default\" \| \"secondary\" \| \"input\" \| \"tertiary\" = \"default\";\n\n /* Icon (use instead of icon slot) /\n @Prop() icon: string = \"\";\n\n /* Icon Position /\n @Prop({ reflect: true }) iconPosition: \"left\" \| \"right\" = \"left\";\n\n /* Checked status (if type is radio) /\n @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n /* The name of the input element (if type is radio) /\n @Prop({ reflect: true }) name: string = \"\";\n\n /* The value of the input element (if type is radio) /\n @Prop({ mutable: true }) value: string = \"\";\n\n /* `href` if the button should be used as link /\n @Prop() href: string = \"\";\n\n /* Rel (if href is used) /\n @Prop() rel: string;\n\n /* Target if the button is used as link (if `href` used) /\n @Prop() target: string = \"\";\n\n /* Download attribute of link (if `href` used) /\n @Prop() download: string;\n\n /* Type of the button /\n @Prop() type: \"button\" \| \"submit\" \| \"reset\" \| \"radio\" = \"button\";\n\n /* Whether the button is disabled /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* Whether the button is active /\n @Prop({ reflect: true }) active: boolean = false;\n\n /* Label /\n @Prop() label: string = \"\";\n\n /* Effect/Animation used /\n @Prop() effect: \"default\" \| \"cta\" = \"default\";\n\n /* Whether only an icon is used inside the button /\n @Prop({ reflect: true }) iconOnly: boolean = false;\n\n /* Access key of link (usually a number e.g. 1) /\n @Prop() linkAccesskey: string;\n\n /* Accessible label for screen readers to replace visible text /\n @Prop({ attribute: \"a11y-label\" }) a11yLabel: string;\n\n /* Id for element which describes the button (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) /\n @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n /* Aria expanded of link/button /\n @Prop({ reflect: true, attribute: \"a11y-expanded\" }) a11yExpanded: boolean;\n\n /* Aria disabled of link/button /\n @Prop({ reflect: true, attribute: \"a11y-disabled\" }) a11yDisabled: boolean;\n\n /* Aria controls of link/button /\n @Prop({ attribute: \"a11y-controls\" }) a11yControls: string;\n\n /* Tabindex of link/button /\n @Prop({ attribute: \"a11y-tabindex\" }) a11yTabindex: string;\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the link/button element.\n * Default value will be taken from `label` prop or default slot.\n /\n @Prop() analyticsId: string;\n\n @Element() element: HTMLStzhButtonElement;\n\n /* Focus button /\n @Method()\n async setFocus() {\n this.button.focus();\n }\n\n /* Focus event /\n @Event() stzhFocus: EventEmitter<StzhButtonFocusEvent>;\n\n /* Input blur event /\n @Event() stzhBlur: EventEmitter<StzhButtonBlurEvent>;\n\n /* Change event (only called if type is radio) /\n @Event() stzhChange: EventEmitter<StzhButtonChangeEvent>;\n\n private button: HTMLButtonElement \| HTMLAnchorElement \| HTMLLabelElement;\n private input: HTMLInputElement;\n private text: HTMLDivElement;\n private focusedByInput: boolean = false;\n\n private onInput = (event: InputEvent) => {\n this.checked = this.input.checked;\n this.stzhChange.emit({\n component: \"stzh-button\",\n originalEvent: event,\n value: this.value,\n checked: this.checked\n });\n }\n\n private onRootFocus = () => {\n if (!this.focusedByInput) {\n this.setFocus();\n }\n\n this.focusedByInput = false;\n }\n\n private onFocus = (event: FocusEvent) => {\n this.focusedByInput = true;\n\n const focusEvent = new FocusEvent(\"focus\", {\n view: window,\n bubbles: false,\n cancelable: false\n });\n\n this.element.dispatchEvent(focusEvent);\n this.stzhFocus.emit({\n component: \"stzh-button\",\n originalEvent: event\n });\n }\n\n private onBlur = (event: FocusEvent) => {\n const blurEvent = new FocusEvent(\"blur\", {\n view: window,\n bubbles: false,\n cancelable: false\n });\n\n this.element.dispatchEvent(blurEvent);\n this.stzhBlur.emit({\n component: \"stzh-button\",\n originalEvent: event\n });\n }\n\n private onClick = (event: MouseEvent) => {\n if (this.disabled) {\n event.stopPropagation();\n event.preventDefault();\n }\n }\n\n private renderIcon(iconUsed: boolean): HTMLInputElement {\n return (\n <div class=\"stzh-button__icon-wrapper\">\n {this.icon ?\n <stzh-icon class=\"stzh-button__icon\" name={this.icon}></stzh-icon>\n :\n <slot name=\"icon\"></slot>\n }\n {(this.badge \|\| this.badgeEmpty) && this.badgePosition === \"icon\" && iconUsed &&\n <stzh-badge class=\"stzh-button__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n }\n </div>\n );\n }\n\n private renderContent(): HTMLDivElement {\n return (\n <div class=\"stzh-button__text\">\n {this.rel && this.rel.includes('external') && <div class=\"stzh-button__vhidden\">{this.localization.$globals.externalLinkLabel}</div>}\n {this.download && <div class=\"stzh-button__vhidden\">{this.localization.$globals.downloadLinkLabel}</div>}\n <div ref={(el) => (this.text = el as HTMLDivElement)}>{this.label ? this.label : <slot></slot>}</div>\n </div>\n );\n }\n\n private renderInner(iconUsed: boolean): DocumentFragment {\n return (\n <Fragment>\n <div\n class=\"stzh-button__inner\"\n onClick={this.onClick}\n >\n {this.type === \"radio\" &&\n <div class=\"stzh-button__mark\">\n <div class=\"stzh-button__check\"></div>\n </div>\n }\n {this.iconPosition === \"left\" && this.renderIcon(iconUsed)}\n {this.renderContent()}\n {this.iconPosition === \"right\" && this.renderIcon(iconUsed)}\n </div>\n {(this.badge \|\| this.badgeEmpty) && (this.badgePosition === \"button\" \|\| !iconUsed) &&\n <stzh-badge\n class=\"stzh-button__badge\"\n label={this.badge}\n type={this.badgeType}\n onClick={this.onClick}\n ></stzh-badge>\n }\n </Fragment>\n );\n }\n\n async componentWillLoad() {\n if (!this.localization) {\n this.localization = await fetchTranslations(this.element, \"button\");\n }\n }\n\n componentDidRender() {\n requestAnimationFrame(() => {\n this.button.setAttribute(\"s-object-id\", this.analyticsId \|\| this.text.innerText);\n });\n }\n\n render() {\n const iconUsed: boolean = hasSlot(this.element, \"icon\") \|\| !!this.icon;\n const classes = {\n \"stzh-button\": true,\n \"stzh-button--has-icon\": iconUsed,\n \"stzh-button--has-icon-only\": this.iconOnly,\n \"stzh-button--has-badge\": !!this.badge,\n \"stzh-button--is-floating\": this.floating,\n \"stzh-button--is-rounded\": this.rounded,\n \"stzh-button--is-fullwidth\": this.fullwidth,\n \"stzh-button--is-disabled\": this.disabled \|\| this.a11yDisabled,\n \"stzh-button--is-active\": this.active,\n [`stzh-button--effect-${this.effect}`]: !!this.effect,\n [`stzh-button--badge-position-${this.badgePosition}`]: !!this.badgePosition,\n [`stzh-button--align-${this.textAlign}`]: !!this.textAlign,\n [`stzh-button--size-${this.size}`]: !!this.size,\n [`stzh-button--type-${this.type}`]: !!this.type,\n [`stzh-button--${this.variant}`]: !!this.variant\n };\n\n return (\n <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n {this.href ?\n <a\n ref={(el) => (this.button = el as HTMLAnchorElement)}\n href={this.disabled ? null : this.href}\n rel={this.rel}\n download={this.download}\n target={this.target}\n class={classes}\n aria-label={this.a11yLabel \|\| null}\n aria-describedby={this.a11yDescribedby \|\| null}\n aria-disabled={typeof this.a11yDisabled !== \"undefined\"\n ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n aria-controls={this.a11yControls \|\| null}\n accessKey={this.linkAccesskey}\n tabindex={this.a11yTabindex}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n onClick={this.onClick}\n >\n {this.renderInner(iconUsed)}\n </a>\n :\n this.type === \"radio\" ?\n <label\n ref={(el) => (this.button = el as HTMLLabelElement)}\n class={classes}\n onClick={this.onClick}\n >\n <input\n ref={(el) => (this.input = el as HTMLInputElement)}\n type=\"radio\"\n class=\"stzh-button__input\"\n name={this.name}\n value={this.value}\n checked={this.checked}\n disabled={this.disabled}\n aria-label={this.a11yLabel \|\| null}\n aria-describedby={this.a11yDescribedby \|\| null}\n aria-disabled={typeof this.a11yDisabled !== \"undefined\"\n ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n aria-controls={this.a11yControls \|\| null}\n accessKey={this.linkAccesskey}\n tabindex={this.a11yTabindex}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n onClick={this.onClick}\n onInput={this.onInput}\n />\n {this.renderInner(iconUsed)}\n </label>\n :\n <button\n ref={(el) => (this.button = el as HTMLButtonElement)}\n class={classes}\n type={this.type}\n disabled={this.disabled}\n aria-label={this.a11yLabel \|\| null}\n aria-describedby={this.a11yDescribedby \|\| null}\n aria-disabled={typeof this.a11yDisabled !== \"undefined\"\n ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n aria-controls={this.a11yControls \|\| null}\n accessKey={this.linkAccesskey}\n tabindex={this.a11yTabindex}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n onClick={this.onClick}\n >\n {this.renderInner(iconUsed)}\n </button>\n }\n </Host>\n );\n }\n}\n",":host {\n --size: #{iconSize()};\n\n display: inline-flex;\n justify-content: center;\n align-items: center;\n color: currentColor;\n vertical-align: text-top;\n}\n\n.stzh-icon {\n width: var(--size);\n height: var(--size);\n}\n","import {\n Component,\n Host,\n h,\n Prop\n} from \"@stencil/core\";\n\nlet iconCounter = 0;\n\n@Component({\n tag: \"stzh-icon\",\n styleUrl: \"stzh-icon.scss\",\n scoped: 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 private iconId: string;\n\n componentWillLoad() {\n this.iconId = `stzh-icon-${iconCounter++}`;\n }\n\n render() {\n return (\n <Host>\n {this.name &&\n <svg\n class=\"stzh-icon\"\n role={this.a11yTitle ? 'img' : 'presentation'}\n aria-hidden={this.a11yTitle ? null : 'true'}\n focusable={this.a11yTitle ? 'true' : 'false'}\n aria-labelledby={this.a11yTitle ? `${this.iconId}-title` : null}\n >\n {this.a11yTitle &&\n <title id={`${this.iconId}-title`}>\n {this.a11yTitle}\n </title>\n }\n <use href={`#stzh-icon-${this.name}`}></use>\n </svg>\n }\n </Host>\n );\n }\n}\n"],"mappings":"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"}

package/dist/stzh-components/{p-0f71e85f.entry.js → p-8a44987c.entry.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{r as o,c as t,h as r,F as i,a as s,g as e}from"./p-9e02896c.js";import{f as h}from"./p-25a09313.js";const c=".sc-stzh-chip-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-chip-h{display:none}.sc-stzh-chip-h *.sc-stzh-chip,.sc-stzh-chip-h *.sc-stzh-chip::before,.sc-stzh-chip-h *.sc-stzh-chip::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-chip-h{--color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--height:2rem;--padding:0 var(--stzh-space-medium);--border-color:var(--stzh-color-grey13);--border-radius:1rem;--remove-color:var(--stzh-base-lead-color);--remove-border-radius:1.5rem;--background-color:var(--stzh-color-white);--icon-size:var(--stzh-icon-size-small);--icon-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--icon-gap:var(--stzh-space-xsmall);--counter-color:var(--stzh-color-primary60op);--counter-gap:var(--stzh-space-xsmall);--hover-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-border-color:var(--border-color);--hover-background-color:var(--stzh-color-primary8);--hover-remove-color:var(--hover-color);--hover-remove-background-color:var(--hover-background-color);--hover-icon-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-counter-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));display:-ms-inline-flexbox;display:inline-flex}@media (forced-colors: active), (-ms-high-contrast: active){.sc-stzh-chip-h{--hover-color:Highlight;--hover-border:0.0625rem solid Highlight;--hover-background-color:Canvas;--hover-remove-color:Highlight;--hover-remove-background-color:Canvas;--hover-icon-color:Highlight;--hover-counter-color:Highlight}}[size=large].sc-stzh-chip-h{--height:2.5rem;--border-radius:1.25rem;--padding:0 var(--stzh-space-xlarge)}[size=small].sc-stzh-chip-h{--height:1.5rem;--icon-size:var(--stzh-icon-size-xsmall);--counter-gap:var(--stzh-space-xxsmall)}[variant=input].sc-stzh-chip-h{--border-color:transparent;--background-color:var(--stzh-color-grey5);--hover-border-color:transparent}[variant=tag].sc-stzh-chip-h{--color:var(--stzh-base-color);--icon-color:var(--stzh-base-color);--counter-color:var(--stzh-base-color);--border-color:transparent;--background-color:var(--stzh-color-black8);--hover-color:var(--stzh-base-color);--hover-border-color:transparent;--hover-background-color:var(--stzh-color-black8);--hover-icon-color:var(--stzh-base-color);--hover-counter-color:var(--stzh-base-color)}[variant=input][size=small].sc-stzh-chip-h{--padding:0 var(--stzh-space-small);--icon-gap:var(--stzh-space-xxsmall)}[variant=tag][size=small].sc-stzh-chip-h{--padding:0 var(--stzh-space-xsmall);--icon-gap:var(--stzh-space-xxsmall)}[type=secondary].sc-stzh-chip-h{--color:var(--stzh-base-lead-color);--counter-color:var(--stzh-color-grey40)}[type=important].sc-stzh-chip-h{--color:var(--stzh-color-error);--icon-color:var(--stzh-color-error);--counter-color:var(--stzh-color-error);--hover-color:var(--stzh-color-error);--hover-icon-color:var(--stzh-color-error);--hover-counter-color:var(--stzh-color-error)}@media (forced-colors: active), (-ms-high-contrast: active){[type=important].sc-stzh-chip-h{--hover-color:Highlight;--hover-icon-color:Highlight;--hover-counter-color:Highlight}}[active].sc-stzh-chip-h:not([active=false]){--color:var(--stzh-color-white);--border-color:transparent;--remove-color:var(--stzh-color-white);--background-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--icon-color:var(--stzh-color-white);--counter-color:var(--stzh-color-white56);--hover-color:var(--stzh-color-white);--hover-border-color:transparent;--hover-background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-remove-color:var(--stzh-color-white);--hover-remove-background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-icon-color:var(--stzh-color-white);--hover-counter-color:var(--stzh-color-white56)}@media (forced-colors: active), (-ms-high-contrast: active){[active].sc-stzh-chip-h:not([active=false]){--color:SelectedItem;--border-color:SelectedItem;--remove-color:SelectedItem;--background-color:Canvas;--icon-color:SelectedItem;--counter-color:SelectedItem;--hover-color:Highlight;--hover-border-color:Highlight;--hover-background-color:Canvas;--hover-remove-color:Highlight;--hover-remove-background-color:Canvas;--hover-icon-color:Highlight;--hover-counter-color:Highlight}}[non-interactive].sc-stzh-chip-h:not([non-interactive=false]){--hover-color:var(--color);--hover-border:var(--border-color);--hover-background-color:var(--background-color);--hover-icon-color:var(--icon-color);--hover-counter-color:var(--counter-color)}[disabled].sc-stzh-chip-h:not([disabled=false]){--color:var(--stzh-color-grey25);--border-color:var(--stzh-base-border-color);--remove-color:var(--stzh-color-grey13);--background-color:var(--stzh-color-white);--icon-color:var(--stzh-color-grey25);--counter-color:var(--stzh-color-grey25);--hover-color:var(--stzh-color-grey25);--hover-border-color:var(--stzh-base-border-color);--hover-background-color:var(--stzh-color-white);--hover-remove-color:var(--stzh-color-grey13);--hover-remove-background-color:transparent;--hover-icon-color:var(--stzh-color-grey25);--hover-counter-color:var(--stzh-color-grey25)}.sc-stzh-chip-h .sc-stzh-chip-s>stzh-icon,.stzh-chip__icon.sc-stzh-chip{--size:var(--icon-size)}.stzh-chip.sc-stzh-chip{position:relative}.stzh-chip__vhidden.sc-stzh-chip{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-chip__button.sc-stzh-chip{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);font-family:inherit;height:var(--height);display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;border-radius:var(--border-radius);padding:var(--padding);color:var(--color);-webkit-appearance:none;-moz-appearance:none;appearance:none;border-width:0.0625rem;border-style:solid;border-color:var(--border-color);background-color:var(--background-color);-webkit-transition-duration:var(--stzh-base-transition-animation-speed);transition-duration:var(--stzh-base-transition-animation-speed);-webkit-transition-property:color, background-color, border-color;transition-property:color, background-color, border-color;-webkit-text-decoration-line:none;text-decoration-line:none}.stzh-chip__button.is-button.sc-stzh-chip,.stzh-chip__button.is-link.sc-stzh-chip{cursor:pointer}.stzh-chip__label.sc-stzh-chip{text-align:left}.stzh-chip__icon-wrapper.sc-stzh-chip{display:-ms-flexbox;display:flex;color:var(--icon-color);-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);-ms-flex-negative:0;flex-shrink:0}.stzh-chip__icon-wrapper.sc-stzh-chip:not(:empty){margin-right:var(--icon-gap)}.stzh-chip__counter.sc-stzh-chip{display:-ms-flexbox;display:flex;font-variant-numeric:tabular-nums;margin-left:var(--counter-gap);color:var(--counter-color);-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed)}.stzh-chip__remove.sc-stzh-chip{position:absolute;top:0;right:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;border:none;background:none;padding:0;width:var(--height);height:var(--height);border-radius:var(--remove-border-radius);display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;margin-left:var(--stzh-space-xxsmall);color:var(--remove-color);-webkit-transition-duration:var(--stzh-base-transition-animation-speed);transition-duration:var(--stzh-base-transition-animation-speed);-webkit-transition-property:color, background-color, border-color;transition-property:color, background-color, border-color;cursor:pointer}.stzh-chip__remove.sc-stzh-chip:hover{color:var(--hover-remove-color);background-color:var(--hover-remove-background-color)}.stzh-chip__remove-icon.sc-stzh-chip{--size:var(--stzh-icon-size-xxsmall)}.stzh-chip__button.sc-stzh-chip:hover,.stzh-chip__remove.sc-stzh-chip:hover+.stzh-chip__button.sc-stzh-chip{color:var(--hover-color);background-color:var(--hover-background-color);border-color:var(--hover-border-color)}.stzh-chip__button.sc-stzh-chip:hover .stzh-chip__counter.sc-stzh-chip,.stzh-chip__remove.sc-stzh-chip:hover+.stzh-chip__button.sc-stzh-chip .stzh-chip__counter.sc-stzh-chip{color:var(--hover-counter-color)}.stzh-chip__button.sc-stzh-chip:hover .stzh-chip__icon-wrapper.sc-stzh-chip,.stzh-chip__remove.sc-stzh-chip:hover+.stzh-chip__button.sc-stzh-chip .stzh-chip__icon-wrapper.sc-stzh-chip{color:var(--hover-icon-color)}.stzh-chip--size-small.sc-stzh-chip .stzh-chip__button.sc-stzh-chip{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}.stzh-chip--is-removable.sc-stzh-chip .stzh-chip__button.sc-stzh-chip{padding-right:calc(var(--height) + var(--stzh-space-xxsmall))}.stzh-chip--is-disabled.sc-stzh-chip .stzh-chip__button.sc-stzh-chip,.stzh-chip--is-disabled.sc-stzh-chip .stzh-chip__remove.sc-stzh-chip{cursor:not-allowed}";const a=class{constructor(r){o(this,r);this.stzhClick=t(this,"stzhClick",7);this.stzhRemove=t(this,"stzhRemove",7);this.stzhFocus=t(this,"stzhFocus",7);this.stzhBlur=t(this,"stzhBlur",7);this.focusedByInput=false;this.onRootFocus=()=>{if(!this.focusedByInput){this.setFocus()}this.focusedByInput=false};this.onFocus=o=>{this.focusedByInput=true;const t=new FocusEvent("focus",{view:window,bubbles:false,cancelable:false});this.element.dispatchEvent(t);this.stzhFocus.emit({component:"stzh-chip",originalEvent:o})};this.onBlur=o=>{const t=new FocusEvent("blur",{view:window,bubbles:false,cancelable:false});this.element.dispatchEvent(t);this.stzhBlur.emit({component:"stzh-chip",originalEvent:o})};this.onClick=o=>{this.stzhClick.emit({component:"stzh-chip",originalEvent:o})};this.onRemoveClick=o=>{this.stzhRemove.emit({component:"stzh-chip",originalEvent:o})};this.label="";this.icon="";this.href="";this.target="";this.nonInteractive=false;this.removable=false;this.variant="tag";this.size="default";this.type="default";this.counter="";this.removeLabel="";this.active=false;this.disabled=false;this.a11yTabindex=undefined;this.a11yLabel=undefined;this.a11yDescribedby="";this.analyticsId=undefined;this.removeAnalyticsId=undefined}async setFocus(){this.chip.focus()}componentDidRender(){requestAnimationFrame((()=>{this.chip.setAttribute("s-object-id",this.analyticsId||this.text.innerText)}))}renderInner(){return r(i,null,r("div",{class:"stzh-chip__icon-wrapper"},this.icon?r("stzh-icon",{class:"stzh-chip__icon",name:this.icon}):r("slot",{name:"icon"})),r("stzh-clamp",{lines:1,class:"stzh-chip__label",ref:o=>this.text=o},this.label?this.label:r("slot",null),this.counter&&r("span",{class:"stzh-chip__vhidden"}," (",this.counter,")")),this.counter&&r("div",{class:"stzh-chip__counter","aria-hidden":"true"},this.counter))}render(){const o={"stzh-chip":true,"stzh-chip--is-active":this.active,"stzh-chip--is-disabled":this.disabled,"stzh-chip--is-removable":this.removable,"stzh-chip--has-counter":!!this.counter,[`stzh-chip--type-${this.type}`]:!!this.type,[`stzh-chip--size-${this.size}`]:!!this.size,[`stzh-chip--${this.variant}`]:!!this.variant};const t=this.nonInteractive?"div":this.href?"a":"button";return r(s,{tabindex:this.disabled?null:"-1",onFocus:this.onRootFocus},r("div",{class:o},this.removable&&r("button",{class:"stzh-chip__remove",onClick:this.onRemoveClick,disabled:this.disabled,"aria-label":this.removeLabel,type:"button","s-object-id":this.removeAnalyticsId||this.removeLabel},r("stzh-icon",{class:"stzh-chip__remove-icon",name:"close"})),this.href?r(t,{ref:o=>this.chip=o,class:{"stzh-chip__button":true,"is-button":!this.nonInteractive&&!this.href,"is-link":!this.nonInteractive&&!!this.href},href:this.disabled?null:this.href,target:this.target,tabindex:this.a11yTabindex,"aria-label":this.a11yLabel,"aria-describedby":this.a11yDescribedby,onClick:this.onClick,onFocus:this.onFocus,onBlur:this.onBlur},this.renderInner()):r(t,{ref:o=>this.chip=o,class:{"stzh-chip__button":true,"is-button":!this.nonInteractive&&!this.href,"is-link":!this.nonInteractive&&!!this.href},disabled:this.disabled,type:"button",tabindex:this.a11yTabindex,"aria-label":this.a11yLabel,"aria-describedby":this.a11yDescribedby,onClick:this.onClick,onFocus:this.onFocus,onBlur:this.onBlur},this.renderInner())))}get element(){return e(this)}};a.style=c;const n=":host{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}:host[hidden]{display:none}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}stzh-clamp{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block;--current-lines:var(--lines, 0);width:100%;color:inherit;font-family:inherit;font-weight:inherit;font-style:inherit;font-size:inherit;line-height:inherit}stzh-clamp[hidden]{display:none}stzh-clamp *,stzh-clamp *::before,stzh-clamp *::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}@media screen and (min-width: 600px){stzh-clamp{--current-lines:var(--lines-small, var(--lines, 0))}}@media screen and (min-width: 1024px){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, var(--lines-medium, var(--lines-small, var(--lines, 0))))}}@media screen and (min-width: 1440px){stzh-clamp{--current-lines:var(--lines-ultra, var(--lines-large, var(--lines-medium, var(--lines-small, var(--lines, 0)))))}}.stzh-clamp{position:relative}.stzh-clamp__text{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.stzh-clamp__text>*:first-child{margin-top:0 !important}.stzh-clamp__text>*:last-child{margin-bottom:0 !important}.stzh-clamp__text.is-clone{position:absolute;visibility:hidden;opacity:0;top:0;left:0;width:100%}.stzh-clamp__trigger{margin-top:var(--stzh-space-xxsmall)}.stzh-clamp--is-not-expanded .stzh-clamp__text,.stzh-clamp__text.is-clone{-webkit-line-clamp:var(--current-lines);line-clamp:var(--current-lines)}";const l=class{constructor(r){o(this,r);this.stzhClamp=t(this,"stzhClamp",7);this.stzhExpand=t(this,"stzhExpand",7);this.updateClamped=()=>{if(!this.textCloneElement){return}const o=this.clamped;this.clamped=this.textCloneElement.scrollHeight>this.textCloneElement.clientHeight;if(o!==this.clamped){this.stzhClamp.emit({component:"stzh-clamp",clamped:this.clamped})}};this.handleResize=()=>{if(this.debounceResize){window.cancelAnimationFrame(this.debounceResize)}this.debounceResize=requestAnimationFrame(this.updateClamped)};this.handleMutaton=()=>{this.update()};this.handleExpandClick=()=>{this.expanded=!this.expanded;this.stzhExpand.emit({component:"stzh-clamp",expanded:this.expanded})};this.localization=undefined;this.lines=1;this.linesSmall=0;this.linesMedium=0;this.linesLarge=0;this.linesUltra=0;this.showExpandLink=false;this.expanded=false;this.clamped=false}async update(){this.textCloneElement.innerHTML=this.textElement.innerHTML;this.updateClamped()}async componentWillLoad(){if(!this.localization){this.localization=await h(this.element,"clamp")}}componentDidLoad(){this.mutationObserver=new MutationObserver(this.handleMutaton);this.mutationObserver.observe(this.textElement,{childList:true,subtree:true})}componentDidRender(){this.update()}connectedCallback(){this.resizeObserver=new ResizeObserver(this.handleResize);this.resizeObserver.observe(this.element)}disconnectedCallback(){if(this.resizeObserver){this.resizeObserver.disconnect()}if(this.mutationObserver){this.mutationObserver.disconnect()}}render(){const o={"stzh-clamp":true,"stzh-clamp--is-not-expanded":!this.expanded};return r(s,{style:{"--lines":this.lines?this.lines.toString():null,"--lines-small":this.linesSmall?this.linesSmall.toString():null,"--lines-medium":this.linesMedium?this.linesMedium.toString():null,"--lines-large":this.linesLarge?this.linesLarge.toString():null,"--lines-ultra":this.linesUltra?this.linesUltra.toString():null}},r("div",{class:o},r("div",{ref:o=>this.textElement=o,class:"stzh-clamp__text"},r("slot",null)),r("div",{ref:o=>this.textCloneElement=o,class:"stzh-clamp__text is-clone","aria-hidden":"true"}),this.showExpandLink&&this.clamped&&r("stzh-link",{class:"stzh-clamp__trigger",a11yTabindex:"-1","aria-hidden":"true",onClick:this.handleExpandClick},!this.expanded?this.localization.showMore:this.localization.showLess)))}get element(){return e(this)}};l.style=n;export{a as stzh_chip,l as stzh_clamp};
-//# sourceMappingURL=p-0f71e85f.entry.js.map
+import{r as o,c as t,h as r,F as i,a as s,g as e}from"./p-9e02896c.js";import{f as h}from"./p-25a09313.js";const c=".sc-stzh-chip-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-chip-h{display:none}.sc-stzh-chip-h *.sc-stzh-chip,.sc-stzh-chip-h *.sc-stzh-chip::before,.sc-stzh-chip-h *.sc-stzh-chip::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-chip-h{--color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--height:2rem;--padding:0 var(--stzh-space-medium);--border-color:var(--stzh-color-grey13);--border-radius:1rem;--remove-color:var(--stzh-base-lead-color);--remove-border-radius:1.5rem;--background-color:var(--stzh-color-white);--icon-size:var(--stzh-icon-size-small);--icon-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--icon-gap:var(--stzh-space-xsmall);--counter-color:var(--stzh-color-primary60op);--counter-gap:var(--stzh-space-xsmall);--hover-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-border-color:var(--border-color);--hover-background-color:var(--stzh-color-primary8);--hover-remove-color:var(--hover-color);--hover-remove-background-color:var(--hover-background-color);--hover-icon-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-counter-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));display:-ms-inline-flexbox;display:inline-flex}@media (forced-colors: active), (-ms-high-contrast: active){.sc-stzh-chip-h{--hover-color:Highlight;--hover-border:0.0625rem solid Highlight;--hover-background-color:Canvas;--hover-remove-color:Highlight;--hover-remove-background-color:Canvas;--hover-icon-color:Highlight;--hover-counter-color:Highlight}}[size=large].sc-stzh-chip-h{--height:2.5rem;--border-radius:1.25rem;--padding:0 var(--stzh-space-xlarge)}[size=small].sc-stzh-chip-h{--height:1.5rem;--icon-size:var(--stzh-icon-size-xsmall);--counter-gap:var(--stzh-space-xxsmall)}[variant=input].sc-stzh-chip-h{--border-color:transparent;--background-color:var(--stzh-color-grey5);--hover-border-color:transparent}[variant=tag].sc-stzh-chip-h{--color:var(--stzh-base-color);--icon-color:var(--stzh-base-color);--counter-color:var(--stzh-base-color);--border-color:transparent;--background-color:var(--stzh-color-black8);--hover-color:var(--stzh-base-color);--hover-border-color:transparent;--hover-background-color:var(--stzh-color-black8);--hover-icon-color:var(--stzh-base-color);--hover-counter-color:var(--stzh-base-color)}[variant=input][size=small].sc-stzh-chip-h{--padding:0 var(--stzh-space-small);--icon-gap:var(--stzh-space-xxsmall)}[variant=tag][size=small].sc-stzh-chip-h{--padding:0 var(--stzh-space-xsmall);--icon-gap:var(--stzh-space-xxsmall)}[type=secondary].sc-stzh-chip-h{--color:var(--stzh-base-lead-color);--counter-color:var(--stzh-color-grey40)}[type=important].sc-stzh-chip-h{--color:var(--stzh-color-error);--icon-color:var(--stzh-color-error);--counter-color:var(--stzh-color-error);--hover-color:var(--stzh-color-error);--hover-icon-color:var(--stzh-color-error);--hover-counter-color:var(--stzh-color-error)}@media (forced-colors: active), (-ms-high-contrast: active){[type=important].sc-stzh-chip-h{--hover-color:Highlight;--hover-icon-color:Highlight;--hover-counter-color:Highlight}}[active].sc-stzh-chip-h:not([active=false]){--color:var(--stzh-color-white);--border-color:transparent;--remove-color:var(--stzh-color-white);--background-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--icon-color:var(--stzh-color-white);--counter-color:var(--stzh-color-white56);--hover-color:var(--stzh-color-white);--hover-border-color:transparent;--hover-background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-remove-color:var(--stzh-color-white);--hover-remove-background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-icon-color:var(--stzh-color-white);--hover-counter-color:var(--stzh-color-white56)}@media (forced-colors: active), (-ms-high-contrast: active){[active].sc-stzh-chip-h:not([active=false]){--color:SelectedItem;--border-color:SelectedItem;--remove-color:SelectedItem;--background-color:Canvas;--icon-color:SelectedItem;--counter-color:SelectedItem;--hover-color:Highlight;--hover-border-color:Highlight;--hover-background-color:Canvas;--hover-remove-color:Highlight;--hover-remove-background-color:Canvas;--hover-icon-color:Highlight;--hover-counter-color:Highlight}}[non-interactive].sc-stzh-chip-h:not([non-interactive=false]){--hover-color:var(--color);--hover-border:var(--border-color);--hover-background-color:var(--background-color);--hover-icon-color:var(--icon-color);--hover-counter-color:var(--counter-color)}[disabled].sc-stzh-chip-h:not([disabled=false]){--color:var(--stzh-color-grey25);--border-color:var(--stzh-base-border-color);--remove-color:var(--stzh-color-grey13);--background-color:var(--stzh-color-white);--icon-color:var(--stzh-color-grey25);--counter-color:var(--stzh-color-grey25);--hover-color:var(--stzh-color-grey25);--hover-border-color:var(--stzh-base-border-color);--hover-background-color:var(--stzh-color-white);--hover-remove-color:var(--stzh-color-grey13);--hover-remove-background-color:transparent;--hover-icon-color:var(--stzh-color-grey25);--hover-counter-color:var(--stzh-color-grey25)}.sc-stzh-chip-h .sc-stzh-chip-s>stzh-icon,.stzh-chip__icon.sc-stzh-chip{--size:var(--icon-size)}.stzh-chip.sc-stzh-chip{position:relative}.stzh-chip__vhidden.sc-stzh-chip{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-chip__button.sc-stzh-chip{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);font-family:inherit;height:var(--height);display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;border-radius:var(--border-radius);padding:var(--padding);color:var(--color);-webkit-appearance:none;-moz-appearance:none;appearance:none;border-width:0.0625rem;border-style:solid;border-color:var(--border-color);background-color:var(--background-color);-webkit-transition-duration:var(--stzh-base-transition-animation-speed);transition-duration:var(--stzh-base-transition-animation-speed);-webkit-transition-property:color, background-color, border-color;transition-property:color, background-color, border-color;-webkit-text-decoration-line:none;text-decoration-line:none}.stzh-chip__button.is-button.sc-stzh-chip,.stzh-chip__button.is-link.sc-stzh-chip{cursor:pointer}.stzh-chip__label.sc-stzh-chip{text-align:left}.stzh-chip__icon-wrapper.sc-stzh-chip{display:-ms-flexbox;display:flex;color:var(--icon-color);-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);-ms-flex-negative:0;flex-shrink:0}.stzh-chip__icon-wrapper.sc-stzh-chip:not(:empty){margin-right:var(--icon-gap)}.stzh-chip__counter.sc-stzh-chip{display:-ms-flexbox;display:flex;font-variant-numeric:tabular-nums;margin-left:var(--counter-gap);color:var(--counter-color);-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed)}.stzh-chip__remove.sc-stzh-chip{position:absolute;top:0;right:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;border:none;background:none;padding:0;width:var(--height);height:var(--height);border-radius:var(--remove-border-radius);display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;margin-left:var(--stzh-space-xxsmall);color:var(--remove-color);-webkit-transition-duration:var(--stzh-base-transition-animation-speed);transition-duration:var(--stzh-base-transition-animation-speed);-webkit-transition-property:color, background-color, border-color;transition-property:color, background-color, border-color;cursor:pointer}.stzh-chip__remove.sc-stzh-chip:hover{color:var(--hover-remove-color);background-color:var(--hover-remove-background-color)}.stzh-chip__remove-icon.sc-stzh-chip{--size:var(--stzh-icon-size-xxsmall)}.stzh-chip__button.sc-stzh-chip:hover,.stzh-chip__remove.sc-stzh-chip:hover+.stzh-chip__button.sc-stzh-chip{color:var(--hover-color);background-color:var(--hover-background-color);border-color:var(--hover-border-color)}.stzh-chip__button.sc-stzh-chip:hover .stzh-chip__counter.sc-stzh-chip,.stzh-chip__remove.sc-stzh-chip:hover+.stzh-chip__button.sc-stzh-chip .stzh-chip__counter.sc-stzh-chip{color:var(--hover-counter-color)}.stzh-chip__button.sc-stzh-chip:hover .stzh-chip__icon-wrapper.sc-stzh-chip,.stzh-chip__remove.sc-stzh-chip:hover+.stzh-chip__button.sc-stzh-chip .stzh-chip__icon-wrapper.sc-stzh-chip{color:var(--hover-icon-color)}.stzh-chip--size-small.sc-stzh-chip .stzh-chip__button.sc-stzh-chip{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}.stzh-chip--is-removable.sc-stzh-chip .stzh-chip__button.sc-stzh-chip{padding-right:calc(var(--height) + var(--stzh-space-xxsmall))}.stzh-chip--is-disabled.sc-stzh-chip .stzh-chip__button.sc-stzh-chip,.stzh-chip--is-disabled.sc-stzh-chip .stzh-chip__remove.sc-stzh-chip{cursor:not-allowed}";const a=class{constructor(r){o(this,r);this.stzhClick=t(this,"stzhClick",7);this.stzhRemove=t(this,"stzhRemove",7);this.stzhFocus=t(this,"stzhFocus",7);this.stzhBlur=t(this,"stzhBlur",7);this.focusedByInput=false;this.onRootFocus=()=>{if(!this.focusedByInput){this.setFocus()}this.focusedByInput=false};this.onFocus=o=>{this.focusedByInput=true;const t=new FocusEvent("focus",{view:window,bubbles:false,cancelable:false});this.element.dispatchEvent(t);this.stzhFocus.emit({component:"stzh-chip",originalEvent:o})};this.onBlur=o=>{const t=new FocusEvent("blur",{view:window,bubbles:false,cancelable:false});this.element.dispatchEvent(t);this.stzhBlur.emit({component:"stzh-chip",originalEvent:o})};this.onClick=o=>{this.stzhClick.emit({component:"stzh-chip",originalEvent:o})};this.onRemoveClick=o=>{this.stzhRemove.emit({component:"stzh-chip",originalEvent:o})};this.label="";this.icon="";this.href="";this.target="";this.nonInteractive=false;this.removable=false;this.variant="tag";this.size="default";this.type="default";this.counter="";this.removeLabel="";this.active=false;this.disabled=false;this.a11yTabindex=undefined;this.a11yLabel=undefined;this.a11yDescribedby="";this.analyticsId=undefined;this.removeAnalyticsId=undefined}async setFocus(){this.chip.focus()}componentDidRender(){requestAnimationFrame((()=>{this.chip.setAttribute("s-object-id",this.analyticsId||this.text.innerText)}))}renderInner(){return r(i,null,r("div",{class:"stzh-chip__icon-wrapper"},this.icon?r("stzh-icon",{class:"stzh-chip__icon",name:this.icon}):r("slot",{name:"icon"})),r("stzh-clamp",{lines:1,class:"stzh-chip__label",ref:o=>this.text=o},this.label?this.label:r("slot",null),this.counter&&r("span",{class:"stzh-chip__vhidden"}," (",this.counter,")")),this.counter&&r("div",{class:"stzh-chip__counter","aria-hidden":"true"},this.counter))}render(){const o={"stzh-chip":true,"stzh-chip--is-active":this.active,"stzh-chip--is-disabled":this.disabled,"stzh-chip--is-removable":this.removable,"stzh-chip--has-counter":!!this.counter,[`stzh-chip--type-${this.type}`]:!!this.type,[`stzh-chip--size-${this.size}`]:!!this.size,[`stzh-chip--${this.variant}`]:!!this.variant};const t=this.nonInteractive?"div":this.href?"a":"button";return r(s,{tabindex:this.disabled?null:"-1",onFocus:this.onRootFocus},r("div",{class:o},this.removable&&r("button",{class:"stzh-chip__remove",onClick:this.onRemoveClick,disabled:this.disabled,"aria-label":this.removeLabel,type:"button","s-object-id":this.removeAnalyticsId||this.removeLabel},r("stzh-icon",{class:"stzh-chip__remove-icon",name:"close"})),this.href?r(t,{ref:o=>this.chip=o,class:{"stzh-chip__button":true,"is-button":!this.nonInteractive&&!this.href,"is-link":!this.nonInteractive&&!!this.href},href:this.disabled?null:this.href,target:this.target,tabindex:this.a11yTabindex,"aria-label":this.a11yLabel||null,"aria-describedby":this.a11yDescribedby||null,onClick:this.onClick,onFocus:this.onFocus,onBlur:this.onBlur},this.renderInner()):r(t,{ref:o=>this.chip=o,class:{"stzh-chip__button":true,"is-button":!this.nonInteractive&&!this.href,"is-link":!this.nonInteractive&&!!this.href},disabled:this.disabled,type:"button",tabindex:this.a11yTabindex,"aria-label":this.a11yLabel||null,"aria-describedby":this.a11yDescribedby||null,onClick:this.onClick,onFocus:this.onFocus,onBlur:this.onBlur},this.renderInner())))}get element(){return e(this)}};a.style=c;const n=":host{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}:host[hidden]{display:none}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}stzh-clamp{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block;--current-lines:var(--lines, 0);width:100%;color:inherit;font-family:inherit;font-weight:inherit;font-style:inherit;font-size:inherit;line-height:inherit}stzh-clamp[hidden]{display:none}stzh-clamp *,stzh-clamp *::before,stzh-clamp *::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}@media screen and (min-width: 600px){stzh-clamp{--current-lines:var(--lines-small, var(--lines, 0))}}@media screen and (min-width: 1024px){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, var(--lines-medium, var(--lines-small, var(--lines, 0))))}}@media screen and (min-width: 1440px){stzh-clamp{--current-lines:var(--lines-ultra, var(--lines-large, var(--lines-medium, var(--lines-small, var(--lines, 0)))))}}.stzh-clamp{position:relative}.stzh-clamp__text{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.stzh-clamp__text>*:first-child{margin-top:0 !important}.stzh-clamp__text>*:last-child{margin-bottom:0 !important}.stzh-clamp__text.is-clone{position:absolute;visibility:hidden;opacity:0;top:0;left:0;width:100%}.stzh-clamp__trigger{margin-top:var(--stzh-space-xxsmall)}.stzh-clamp--is-not-expanded .stzh-clamp__text,.stzh-clamp__text.is-clone{-webkit-line-clamp:var(--current-lines);line-clamp:var(--current-lines)}";const l=class{constructor(r){o(this,r);this.stzhClamp=t(this,"stzhClamp",7);this.stzhExpand=t(this,"stzhExpand",7);this.updateClamped=()=>{if(!this.textCloneElement){return}const o=this.clamped;this.clamped=this.textCloneElement.scrollHeight>this.textCloneElement.clientHeight;if(o!==this.clamped){this.stzhClamp.emit({component:"stzh-clamp",clamped:this.clamped})}};this.handleResize=()=>{if(this.debounceResize){window.cancelAnimationFrame(this.debounceResize)}this.debounceResize=requestAnimationFrame(this.updateClamped)};this.handleMutaton=()=>{this.update()};this.handleExpandClick=()=>{this.expanded=!this.expanded;this.stzhExpand.emit({component:"stzh-clamp",expanded:this.expanded})};this.localization=undefined;this.lines=1;this.linesSmall=0;this.linesMedium=0;this.linesLarge=0;this.linesUltra=0;this.showExpandLink=false;this.expanded=false;this.clamped=false}async update(){this.textCloneElement.innerHTML=this.textElement.innerHTML;this.updateClamped()}async componentWillLoad(){if(!this.localization){this.localization=await h(this.element,"clamp")}}componentDidLoad(){this.mutationObserver=new MutationObserver(this.handleMutaton);this.mutationObserver.observe(this.textElement,{childList:true,subtree:true})}componentDidRender(){this.update()}connectedCallback(){this.resizeObserver=new ResizeObserver(this.handleResize);this.resizeObserver.observe(this.element)}disconnectedCallback(){if(this.resizeObserver){this.resizeObserver.disconnect()}if(this.mutationObserver){this.mutationObserver.disconnect()}}render(){const o={"stzh-clamp":true,"stzh-clamp--is-not-expanded":!this.expanded};return r(s,{style:{"--lines":this.lines?this.lines.toString():null,"--lines-small":this.linesSmall?this.linesSmall.toString():null,"--lines-medium":this.linesMedium?this.linesMedium.toString():null,"--lines-large":this.linesLarge?this.linesLarge.toString():null,"--lines-ultra":this.linesUltra?this.linesUltra.toString():null}},r("div",{class:o},r("div",{ref:o=>this.textElement=o,class:"stzh-clamp__text"},r("slot",null)),r("div",{ref:o=>this.textCloneElement=o,class:"stzh-clamp__text is-clone","aria-hidden":"true"}),this.showExpandLink&&this.clamped&&r("stzh-link",{class:"stzh-clamp__trigger",a11yTabindex:"-1","aria-hidden":"true",onClick:this.handleExpandClick},!this.expanded?this.localization.showMore:this.localization.showLess)))}get element(){return e(this)}};l.style=n;export{a as stzh_chip,l as stzh_clamp};
+//# sourceMappingURL=p-8a44987c.entry.js.map

package/dist/stzh-components/{p-0f71e85f.entry.js.map → p-8a44987c.entry.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["stzhChipCss","StzhChip","this","focusedByInput","onRootFocus","setFocus","onFocus","event","focusEvent","FocusEvent","view","window","bubbles","cancelable","element","dispatchEvent","stzhFocus","emit","component","originalEvent","onBlur","blurEvent","stzhBlur","onClick","stzhClick","onRemoveClick","stzhRemove","async","chip","focus","componentDidRender","requestAnimationFrame","setAttribute","analyticsId","text","innerText","renderInner","h","Fragment","class","icon","name","lines","ref","el","label","counter","render","classes","active","disabled","removable","type","size","variant","Chip","nonInteractive","href","Host","tabindex","removeLabel","removeAnalyticsId","target","a11yTabindex","a11yLabel","a11yDescribedby","stzhClampCss","StzhClamp","updateClamped","textCloneElement","beforeClamped","clamped","scrollHeight","clientHeight","stzhClamp","handleResize","debounceResize","cancelAnimationFrame","handleMutaton","update","handleExpandClick","expanded","stzhExpand","innerHTML","textElement","localization","fetchTranslations","componentDidLoad","mutationObserver","MutationObserver","observe","childList","subtree","connectedCallback","resizeObserver","ResizeObserver","disconnectedCallback","disconnect","style","toString","linesSmall","linesMedium","linesLarge","linesUltra","showExpandLink","showMore","showLess"],"sources":["./src/components/stzh-chip/stzh-chip.scss?tag=stzh-chip&encapsulation=scoped","./src/components/stzh-chip/stzh-chip.tsx","./src/components/stzh-clamp/stzh-clamp.scss?tag=stzh-clamp","./src/components/stzh-clamp/stzh-clamp.tsx"],"sourcesContent":[":host {\n --color: #{$colorPrimary};\n --height: 32px;\n --padding: 0 #{space('medium')};\n --border-color: #{$colorGrey13};\n --border-radius: 16px;\n --remove-color: #{$baseLeadColor};\n --remove-border-radius: 24px;\n --background-color: #{$colorWhite};\n --icon-size: #{iconSize('small')};\n --icon-color: #{$colorPrimary};\n --icon-gap: #{space('xsmall')};\n --counter-color: #{$colorPrimary60op};\n --counter-gap: #{space('xsmall')};\n\n --hover-color: #{$colorPrimaryHover};\n --hover-border-color: var(--border-color);\n --hover-background-color: #{$colorPrimary8};\n --hover-remove-color: var(--hover-color);\n --hover-remove-background-color: var(--hover-background-color);\n --hover-icon-color: #{$colorPrimaryHover};\n --hover-counter-color: #{$colorPrimaryHover};\n\n display: inline-flex;\n\n @include highContrast() {\n --hover-color: Highlight;\n --hover-border: 1px solid Highlight;\n --hover-background-color: Canvas;\n --hover-remove-color: Highlight;\n --hover-remove-background-color: Canvas;\n --hover-icon-color: Highlight;\n --hover-counter-color: Highlight;\n }\n\n &[size=\"large\"] {\n --height: 40px;\n --border-radius: 20px;\n --padding: 0 #{space('xlarge')};\n }\n\n &[size=\"small\"] {\n --height: 24px;\n --icon-size: #{iconSize('xsmall')};\n --counter-gap: #{space('xxsmall')};\n }\n\n &[variant=\"input\"] {\n --border-color: transparent;\n --background-color: #{$colorGrey5};\n\n --hover-border-color: transparent;\n }\n\n &[variant=\"tag\"] {\n --color: #{$baseColor};\n --icon-color: #{$baseColor};\n --counter-color: #{$baseColor};\n --border-color: transparent;\n --background-color: #{$colorBlack8};\n\n --hover-color: #{$baseColor};\n --hover-border-color: transparent;\n --hover-background-color: #{$colorBlack8};\n --hover-icon-color: #{$baseColor};\n --hover-counter-color: #{$baseColor};\n }\n\n &[variant=\"input\"][size=\"small\"] {\n --padding: 0 #{space('small')};\n --icon-gap: #{space('xxsmall')};\n }\n\n &[variant=\"tag\"][size=\"small\"] {\n --padding: 0 #{space('xsmall')};\n --icon-gap: #{space('xxsmall')};\n }\n\n &[type=\"secondary\"] {\n --color: #{$baseLeadColor};\n --counter-color: #{$colorGrey40};\n }\n\n &[type=\"important\"] {\n --color: #{$colorError};\n --icon-color: #{$colorError};\n --counter-color: #{$colorError};\n\n --hover-color: #{$colorError};\n --hover-icon-color: #{$colorError};\n --hover-counter-color: #{$colorError};\n\n @include highContrast() {\n --hover-color: Highlight;\n --hover-icon-color: Highlight;\n --hover-counter-color: Highlight;\n }\n }\n\n &[active]:not([active=\"false\"]) {\n --color: #{$colorWhite};\n --border-color: transparent;\n --remove-color: #{$colorWhite};\n --background-color: #{$colorPrimary};\n --icon-color: #{$colorWhite};\n --counter-color: #{$colorWhite56};\n\n --hover-color: #{$colorWhite};\n --hover-border-color: transparent;\n --hover-background-color: #{$colorPrimaryHover};\n --hover-remove-color: #{$colorWhite};\n --hover-remove-background-color: #{$colorPrimaryHover};\n --hover-icon-color: #{$colorWhite};\n --hover-counter-color: #{$colorWhite56};\n\n @include highContrast() {\n --color: SelectedItem;\n --border-color: SelectedItem;\n --remove-color: SelectedItem;\n --background-color: Canvas;\n --icon-color: SelectedItem;\n --counter-color: SelectedItem;\n\n --hover-color: Highlight;\n --hover-border-color: Highlight;\n --hover-background-color: Canvas;\n --hover-remove-color: Highlight;\n --hover-remove-background-color: Canvas;\n --hover-icon-color: Highlight;\n --hover-counter-color: Highlight;\n }\n }\n\n &[non-interactive]:not([non-interactive=\"false\"]) {\n --hover-color: var(--color);\n --hover-border: var(--border-color);\n --hover-background-color: var(--background-color);\n --hover-icon-color: var(--icon-color);\n --hover-counter-color: var(--counter-color);\n }\n\n &[disabled]:not([disabled=\"false\"]) {\n --color: #{$colorGrey25};\n --border-color: #{$baseBorderColor};\n --remove-color: #{$colorGrey13};\n --background-color: #{$colorWhite};\n --icon-color: #{$colorGrey25};\n --counter-color: #{$colorGrey25};\n\n --hover-color: #{$colorGrey25};\n --hover-border-color: #{$baseBorderColor};\n --hover-background-color: #{$colorWhite};\n --hover-remove-color: #{$colorGrey13};\n --hover-remove-background-color: transparent;\n --hover-icon-color: #{$colorGrey25};\n --hover-counter-color: #{$colorGrey25};\n }\n}\n\n:host ::slotted(stzh-icon),\n.stzh-chip__icon {\n --size: var(--icon-size);\n}\n\n.stzh-chip {\n position: relative;\n\n &__vhidden {\n @include visuallyhidden;\n }\n\n &__button {\n @include fontSize('micro');\n font-family: inherit;\n height: var(--height);\n display: flex;\n flex-direction: row;\n align-items: center;\n border-radius: var(--border-radius);\n padding: var(--padding);\n color: var(--color);\n appearance: none;\n border-width: 1px;\n border-style: solid;\n border-color: var(--border-color);\n background-color: var(--background-color);\n transition-duration: $baseTransitionAnimationSpeed;\n transition-property: color, background-color, border-color;\n text-decoration-line: none;\n\n &.is-button,\n &.is-link {\n cursor: pointer;\n }\n }\n\n &__label {\n text-align: left;\n }\n\n &__icon-wrapper {\n display: flex;\n color: var(--icon-color);\n transition: color $baseTransitionAnimationSpeed;\n flex-shrink: 0;\n\n &:not(:empty) {\n margin-right: var(--icon-gap);\n }\n }\n\n &__counter {\n display: flex;\n font-variant-numeric: tabular-nums;\n margin-left: var(--counter-gap);\n color: var(--counter-color);\n transition: color $baseTransitionAnimationSpeed;\n }\n\n &__remove {\n position: absolute;\n top: 0;\n right: 0;\n appearance: none;\n font-family: inherit;\n border: none;\n background: none;\n padding: 0;\n width: var(--height);\n height: var(--height);\n border-radius: var(--remove-border-radius);\n display: flex;\n justify-content: center;\n align-items: center;\n margin-left: space('xxsmall');\n color: var(--remove-color);\n transition-duration: $baseTransitionAnimationSpeed;\n transition-property: color, background-color, border-color;\n cursor: pointer;\n\n &:hover {\n color: var(--hover-remove-color);\n background-color: var(--hover-remove-background-color);\n }\n }\n\n &__remove-icon {\n --size: #{iconSize('xxsmall')};\n }\n\n &__button:hover,\n &__remove:hover + &__button {\n color: var(--hover-color);\n background-color: var(--hover-background-color);\n border-color: var(--hover-border-color);\n }\n\n &__button:hover &__counter,\n &__remove:hover + &__button &__counter {\n color: var(--hover-counter-color);\n }\n\n &__button:hover &__icon-wrapper,\n &__remove:hover + &__button &__icon-wrapper {\n color: var(--hover-icon-color);\n }\n\n /* Size /\n\n &--size-small &__button {\n @include fontSize('nano');\n }\n\n / Removeable /\n\n &--is-removable &__button {\n padding-right: calc(var(--height) + #{space('xxsmall')});\n }\n\n / Disabled /\n\n &--is-disabled &__button,\n &--is-disabled &__remove {\n cursor: not-allowed;\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Event,\n EventEmitter,\n Element,\n Method,\n Fragment\n} from \"@stencil/core\";\n\nimport {\n StzhChipClickEvent,\n StzhChipRemoveEvent,\n StzhChipFocusEvent,\n StzhChipBlurEvent\n} from \"../../index\";\n\n/\n @slot - Slot for label\n * @slot icon - Slot for icon\n /\n@Component({\n tag: \"stzh-chip\",\n styleUrl: \"stzh-chip.scss\",\n scoped: true\n})\nexport class StzhChip {\n /* Label /\n @Prop() label: string = \"\";\n\n /* Icon (use instead of icon slot) /\n @Prop() icon: string = \"\";\n\n /* `href` if the chip should be used as link /\n @Prop() href: string = \"\";\n\n /* Target if the button is used as link (if `href` used) /\n @Prop() target: string = \"\";\n\n /* Whether chip is not interactive /\n @Prop({ reflect: true }) nonInteractive: boolean = false;\n\n /* Whether remove button should be shown /\n @Prop({ reflect: true }) removable: boolean = false;\n\n /* Variant /\n @Prop({ reflect: true }) variant: \"tag\" \| \"filter\" \| \"input\" = \"tag\";\n\n /* Size /\n @Prop({ reflect: true }) size: \"default\" \| \"small\" \| \"large\" = \"default\";\n\n /* Type /\n @Prop({ reflect: true }) type: \"default\" \| \"secondary\" \| \"important\" = \"default\";\n\n /* Counter /\n @Prop() counter: string = \"\";\n\n /* Label of remove button for screenreaders /\n @Prop() removeLabel: string = \"\";\n\n /* Active /\n @Prop({ reflect: true }) active: boolean = false;\n\n /* Disabled /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* Tabindex of link/button /\n @Prop({ attribute: \"a11y-tabindex\" }) a11yTabindex: string;\n\n /* Accessible label for screen readers to replace visible text /\n @Prop({ attribute: \"a11y-label\" }) a11yLabel: string;\n\n /* Id for element which describes the link/button /\n @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the link/button element.\n * Default value will be taken from `label` prop or default slot.\n /\n @Prop() analyticsId: string;\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the remove button element.\n * Default value will be taken from `removeLabel` prop.\n /\n @Prop() removeAnalyticsId: string;\n\n @Element() element: HTMLStzhChipElement;\n\n /* Focus menu item /\n @Method()\n async setFocus() {\n this.chip.focus();\n }\n\n /* Chip click event /\n @Event() stzhClick: EventEmitter<StzhChipClickEvent>;\n\n /* Chip remove event /\n @Event() stzhRemove: EventEmitter<StzhChipRemoveEvent>;\n\n /* Focus event /\n @Event() stzhFocus: EventEmitter<StzhChipFocusEvent>;\n\n /* Input blur event /\n @Event() stzhBlur: EventEmitter<StzhChipBlurEvent>;\n\n private chip: HTMLButtonElement \| HTMLAnchorElement;\n private text: HTMLElement;\n private focusedByInput: boolean = false;\n\n componentDidRender() {\n requestAnimationFrame(() => {\n this.chip.setAttribute(\"s-object-id\", this.analyticsId \|\| this.text.innerText);\n });\n }\n\n private renderInner(): DocumentFragment {\n return (\n <Fragment>\n <div class=\"stzh-chip__icon-wrapper\">\n {this.icon ?\n <stzh-icon class=\"stzh-chip__icon\" name={this.icon}></stzh-icon>\n :\n <slot name=\"icon\"></slot>\n }\n </div>\n\n <stzh-clamp\n lines={1}\n class=\"stzh-chip__label\"\n ref={(el) => (this.text = el as HTMLElement)}\n >\n {this.label ? this.label : <slot></slot>}\n {this.counter &&\n <span class=\"stzh-chip__vhidden\">\n  ({this.counter})\n </span>\n }\n </stzh-clamp>\n\n {this.counter &&\n <div class=\"stzh-chip__counter\" aria-hidden=\"true\">\n {this.counter}\n </div>\n }\n </Fragment>\n );\n }\n\n private onRootFocus = () => {\n if (!this.focusedByInput) {\n this.setFocus();\n }\n\n this.focusedByInput = false;\n }\n\n private onFocus = (event: FocusEvent) => {\n this.focusedByInput = true;\n\n const focusEvent = new FocusEvent(\"focus\", {\n view: window,\n bubbles: false,\n cancelable: false\n });\n\n this.element.dispatchEvent(focusEvent);\n this.stzhFocus.emit({\n component: \"stzh-chip\",\n originalEvent: event\n });\n }\n\n private onBlur = (event: FocusEvent) => {\n const blurEvent = new FocusEvent(\"blur\", {\n view: window,\n bubbles: false,\n cancelable: false\n });\n\n this.element.dispatchEvent(blurEvent);\n this.stzhBlur.emit({\n component: \"stzh-chip\",\n originalEvent: event\n });\n }\n\n private onClick = (event: MouseEvent) => {\n this.stzhClick.emit({\n component: \"stzh-chip\",\n originalEvent: event\n });\n }\n\n private onRemoveClick = (event: MouseEvent) => {\n this.stzhRemove.emit({\n component: \"stzh-chip\",\n originalEvent: event\n });\n }\n\n render() {\n const classes = {\n \"stzh-chip\": true,\n \"stzh-chip--is-active\": this.active,\n \"stzh-chip--is-disabled\": this.disabled,\n \"stzh-chip--is-removable\": this.removable,\n \"stzh-chip--has-counter\": !!this.counter,\n [`stzh-chip--type-${this.type}`]: !!this.type,\n [`stzh-chip--size-${this.size}`]: !!this.size,\n [`stzh-chip--${this.variant}`]: !!this.variant\n };\n\n const Chip = this.nonInteractive ? \"div\" :\n this.href ? \"a\" : \"button\";\n\n return (\n <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n <div class={classes}>\n {this.removable &&\n <button\n class=\"stzh-chip__remove\"\n onClick={this.onRemoveClick}\n disabled={this.disabled}\n aria-label={this.removeLabel}\n type=\"button\"\n s-object-id={this.removeAnalyticsId \|\| this.removeLabel}\n >\n <stzh-icon class=\"stzh-chip__remove-icon\" name=\"close\"></stzh-icon>\n </button>\n }\n\n {this.href ?\n <Chip\n ref={(el) => (this.chip = el as HTMLAnchorElement)}\n class={{\n \"stzh-chip__button\": true,\n \"is-button\": !this.nonInteractive && !this.href,\n \"is-link\": !this.nonInteractive && !!this.href\n }}\n href={this.disabled ? null : this.href}\n target={this.target}\n tabindex={this.a11yTabindex}\n aria-label={this.a11yLabel}\n aria-describedby={this.a11yDescribedby}\n onClick={this.onClick}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n >\n {this.renderInner()}\n </Chip>\n :\n <Chip\n ref={(el) => (this.chip = el as HTMLButtonElement)}\n class={{\n \"stzh-chip__button\": true,\n \"is-button\": !this.nonInteractive && !this.href,\n \"is-link\": !this.nonInteractive && !!this.href\n }}\n disabled={this.disabled}\n type=\"button\"\n tabindex={this.a11yTabindex}\n aria-label={this.a11yLabel}\n aria-describedby={this.a11yDescribedby}\n onClick={this.onClick}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n >\n {this.renderInner()}\n </Chip>\n }\n </div>\n </Host>\n );\n }\n}\n","stzh-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(--lines-large, var(--lines-medium, var(--lines-small, var(--lines, 0))));\n }\n\n @include mq($from: ultra) {\n --current-lines: var(--lines-ultra, var(--lines-large, var(--lines-medium, var(--lines-small, var(--lines, 0)))));\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 margin-top: space('xxsmall');\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 {\n Component,\n Host,\n h,\n Prop,\n Method,\n Element,\n Event,\n EventEmitter\n} from \"@stencil/core\";\n\nimport {\n StzhClampClampEvent,\n StzhClampExpandEvent\n} from \"../../index\";\n\nimport { fetchTranslations } from \"../../utils/translation-utils\";\nimport { StzhClampLocalizedText } from \"./stzh-clamp.localization\";\n\n/\n \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 clamping is expanded /\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\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 = () => {\n this.expanded = !this.expanded;\n\n this.stzhExpand.emit({\n component: \"stzh-clamp\",\n expanded: this.expanded\n });\n }\n\n async componentWillLoad() {\n if (!this.localization) {\n this.localization = await 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 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\n ref={(el) => (this.textElement = el as HTMLDivElement)}\n class=\"stzh-clamp__text\"\n >\n <slot></slot>\n </div>\n\n <div\n ref={(el) => (this.textCloneElement = el as HTMLDivElement)}\n class=\"stzh-clamp__text is-clone\"\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"],"mappings":"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"}
1	+ {"version":3,"names":["stzhChipCss","StzhChip","this","focusedByInput","onRootFocus","setFocus","onFocus","event","focusEvent","FocusEvent","view","window","bubbles","cancelable","element","dispatchEvent","stzhFocus","emit","component","originalEvent","onBlur","blurEvent","stzhBlur","onClick","stzhClick","onRemoveClick","stzhRemove","async","chip","focus","componentDidRender","requestAnimationFrame","setAttribute","analyticsId","text","innerText","renderInner","h","Fragment","class","icon","name","lines","ref","el","label","counter","render","classes","active","disabled","removable","type","size","variant","Chip","nonInteractive","href","Host","tabindex","removeLabel","removeAnalyticsId","target","a11yTabindex","a11yLabel","a11yDescribedby","stzhClampCss","StzhClamp","updateClamped","textCloneElement","beforeClamped","clamped","scrollHeight","clientHeight","stzhClamp","handleResize","debounceResize","cancelAnimationFrame","handleMutaton","update","handleExpandClick","expanded","stzhExpand","innerHTML","textElement","localization","fetchTranslations","componentDidLoad","mutationObserver","MutationObserver","observe","childList","subtree","connectedCallback","resizeObserver","ResizeObserver","disconnectedCallback","disconnect","style","toString","linesSmall","linesMedium","linesLarge","linesUltra","showExpandLink","showMore","showLess"],"sources":["./src/components/stzh-chip/stzh-chip.scss?tag=stzh-chip&encapsulation=scoped","./src/components/stzh-chip/stzh-chip.tsx","./src/components/stzh-clamp/stzh-clamp.scss?tag=stzh-clamp","./src/components/stzh-clamp/stzh-clamp.tsx"],"sourcesContent":[":host {\n --color: #{$colorPrimary};\n --height: 32px;\n --padding: 0 #{space('medium')};\n --border-color: #{$colorGrey13};\n --border-radius: 16px;\n --remove-color: #{$baseLeadColor};\n --remove-border-radius: 24px;\n --background-color: #{$colorWhite};\n --icon-size: #{iconSize('small')};\n --icon-color: #{$colorPrimary};\n --icon-gap: #{space('xsmall')};\n --counter-color: #{$colorPrimary60op};\n --counter-gap: #{space('xsmall')};\n\n --hover-color: #{$colorPrimaryHover};\n --hover-border-color: var(--border-color);\n --hover-background-color: #{$colorPrimary8};\n --hover-remove-color: var(--hover-color);\n --hover-remove-background-color: var(--hover-background-color);\n --hover-icon-color: #{$colorPrimaryHover};\n --hover-counter-color: #{$colorPrimaryHover};\n\n display: inline-flex;\n\n @include highContrast() {\n --hover-color: Highlight;\n --hover-border: 1px solid Highlight;\n --hover-background-color: Canvas;\n --hover-remove-color: Highlight;\n --hover-remove-background-color: Canvas;\n --hover-icon-color: Highlight;\n --hover-counter-color: Highlight;\n }\n\n &[size=\"large\"] {\n --height: 40px;\n --border-radius: 20px;\n --padding: 0 #{space('xlarge')};\n }\n\n &[size=\"small\"] {\n --height: 24px;\n --icon-size: #{iconSize('xsmall')};\n --counter-gap: #{space('xxsmall')};\n }\n\n &[variant=\"input\"] {\n --border-color: transparent;\n --background-color: #{$colorGrey5};\n\n --hover-border-color: transparent;\n }\n\n &[variant=\"tag\"] {\n --color: #{$baseColor};\n --icon-color: #{$baseColor};\n --counter-color: #{$baseColor};\n --border-color: transparent;\n --background-color: #{$colorBlack8};\n\n --hover-color: #{$baseColor};\n --hover-border-color: transparent;\n --hover-background-color: #{$colorBlack8};\n --hover-icon-color: #{$baseColor};\n --hover-counter-color: #{$baseColor};\n }\n\n &[variant=\"input\"][size=\"small\"] {\n --padding: 0 #{space('small')};\n --icon-gap: #{space('xxsmall')};\n }\n\n &[variant=\"tag\"][size=\"small\"] {\n --padding: 0 #{space('xsmall')};\n --icon-gap: #{space('xxsmall')};\n }\n\n &[type=\"secondary\"] {\n --color: #{$baseLeadColor};\n --counter-color: #{$colorGrey40};\n }\n\n &[type=\"important\"] {\n --color: #{$colorError};\n --icon-color: #{$colorError};\n --counter-color: #{$colorError};\n\n --hover-color: #{$colorError};\n --hover-icon-color: #{$colorError};\n --hover-counter-color: #{$colorError};\n\n @include highContrast() {\n --hover-color: Highlight;\n --hover-icon-color: Highlight;\n --hover-counter-color: Highlight;\n }\n }\n\n &[active]:not([active=\"false\"]) {\n --color: #{$colorWhite};\n --border-color: transparent;\n --remove-color: #{$colorWhite};\n --background-color: #{$colorPrimary};\n --icon-color: #{$colorWhite};\n --counter-color: #{$colorWhite56};\n\n --hover-color: #{$colorWhite};\n --hover-border-color: transparent;\n --hover-background-color: #{$colorPrimaryHover};\n --hover-remove-color: #{$colorWhite};\n --hover-remove-background-color: #{$colorPrimaryHover};\n --hover-icon-color: #{$colorWhite};\n --hover-counter-color: #{$colorWhite56};\n\n @include highContrast() {\n --color: SelectedItem;\n --border-color: SelectedItem;\n --remove-color: SelectedItem;\n --background-color: Canvas;\n --icon-color: SelectedItem;\n --counter-color: SelectedItem;\n\n --hover-color: Highlight;\n --hover-border-color: Highlight;\n --hover-background-color: Canvas;\n --hover-remove-color: Highlight;\n --hover-remove-background-color: Canvas;\n --hover-icon-color: Highlight;\n --hover-counter-color: Highlight;\n }\n }\n\n &[non-interactive]:not([non-interactive=\"false\"]) {\n --hover-color: var(--color);\n --hover-border: var(--border-color);\n --hover-background-color: var(--background-color);\n --hover-icon-color: var(--icon-color);\n --hover-counter-color: var(--counter-color);\n }\n\n &[disabled]:not([disabled=\"false\"]) {\n --color: #{$colorGrey25};\n --border-color: #{$baseBorderColor};\n --remove-color: #{$colorGrey13};\n --background-color: #{$colorWhite};\n --icon-color: #{$colorGrey25};\n --counter-color: #{$colorGrey25};\n\n --hover-color: #{$colorGrey25};\n --hover-border-color: #{$baseBorderColor};\n --hover-background-color: #{$colorWhite};\n --hover-remove-color: #{$colorGrey13};\n --hover-remove-background-color: transparent;\n --hover-icon-color: #{$colorGrey25};\n --hover-counter-color: #{$colorGrey25};\n }\n}\n\n:host ::slotted(stzh-icon),\n.stzh-chip__icon {\n --size: var(--icon-size);\n}\n\n.stzh-chip {\n position: relative;\n\n &__vhidden {\n @include visuallyhidden;\n }\n\n &__button {\n @include fontSize('micro');\n font-family: inherit;\n height: var(--height);\n display: flex;\n flex-direction: row;\n align-items: center;\n border-radius: var(--border-radius);\n padding: var(--padding);\n color: var(--color);\n appearance: none;\n border-width: 1px;\n border-style: solid;\n border-color: var(--border-color);\n background-color: var(--background-color);\n transition-duration: $baseTransitionAnimationSpeed;\n transition-property: color, background-color, border-color;\n text-decoration-line: none;\n\n &.is-button,\n &.is-link {\n cursor: pointer;\n }\n }\n\n &__label {\n text-align: left;\n }\n\n &__icon-wrapper {\n display: flex;\n color: var(--icon-color);\n transition: color $baseTransitionAnimationSpeed;\n flex-shrink: 0;\n\n &:not(:empty) {\n margin-right: var(--icon-gap);\n }\n }\n\n &__counter {\n display: flex;\n font-variant-numeric: tabular-nums;\n margin-left: var(--counter-gap);\n color: var(--counter-color);\n transition: color $baseTransitionAnimationSpeed;\n }\n\n &__remove {\n position: absolute;\n top: 0;\n right: 0;\n appearance: none;\n font-family: inherit;\n border: none;\n background: none;\n padding: 0;\n width: var(--height);\n height: var(--height);\n border-radius: var(--remove-border-radius);\n display: flex;\n justify-content: center;\n align-items: center;\n margin-left: space('xxsmall');\n color: var(--remove-color);\n transition-duration: $baseTransitionAnimationSpeed;\n transition-property: color, background-color, border-color;\n cursor: pointer;\n\n &:hover {\n color: var(--hover-remove-color);\n background-color: var(--hover-remove-background-color);\n }\n }\n\n &__remove-icon {\n --size: #{iconSize('xxsmall')};\n }\n\n &__button:hover,\n &__remove:hover + &__button {\n color: var(--hover-color);\n background-color: var(--hover-background-color);\n border-color: var(--hover-border-color);\n }\n\n &__button:hover &__counter,\n &__remove:hover + &__button &__counter {\n color: var(--hover-counter-color);\n }\n\n &__button:hover &__icon-wrapper,\n &__remove:hover + &__button &__icon-wrapper {\n color: var(--hover-icon-color);\n }\n\n /* Size /\n\n &--size-small &__button {\n @include fontSize('nano');\n }\n\n / Removeable /\n\n &--is-removable &__button {\n padding-right: calc(var(--height) + #{space('xxsmall')});\n }\n\n / Disabled /\n\n &--is-disabled &__button,\n &--is-disabled &__remove {\n cursor: not-allowed;\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Event,\n EventEmitter,\n Element,\n Method,\n Fragment\n} from \"@stencil/core\";\n\nimport {\n StzhChipClickEvent,\n StzhChipRemoveEvent,\n StzhChipFocusEvent,\n StzhChipBlurEvent\n} from \"../../index\";\n\n/\n @slot - Slot for label\n * @slot icon - Slot for icon\n /\n@Component({\n tag: \"stzh-chip\",\n styleUrl: \"stzh-chip.scss\",\n scoped: true\n})\nexport class StzhChip {\n /* Label /\n @Prop() label: string = \"\";\n\n /* Icon (use instead of icon slot) /\n @Prop() icon: string = \"\";\n\n /* `href` if the chip should be used as link /\n @Prop() href: string = \"\";\n\n /* Target if the button is used as link (if `href` used) /\n @Prop() target: string = \"\";\n\n /* Whether chip is not interactive /\n @Prop({ reflect: true }) nonInteractive: boolean = false;\n\n /* Whether remove button should be shown /\n @Prop({ reflect: true }) removable: boolean = false;\n\n /* Variant /\n @Prop({ reflect: true }) variant: \"tag\" \| \"filter\" \| \"input\" = \"tag\";\n\n /* Size /\n @Prop({ reflect: true }) size: \"default\" \| \"small\" \| \"large\" = \"default\";\n\n /* Type /\n @Prop({ reflect: true }) type: \"default\" \| \"secondary\" \| \"important\" = \"default\";\n\n /* Counter /\n @Prop() counter: string = \"\";\n\n /* Label of remove button for screenreaders /\n @Prop() removeLabel: string = \"\";\n\n /* Active /\n @Prop({ reflect: true }) active: boolean = false;\n\n /* Disabled /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* Tabindex of link/button /\n @Prop({ attribute: \"a11y-tabindex\" }) a11yTabindex: string;\n\n /* Accessible label for screen readers to replace visible text /\n @Prop({ attribute: \"a11y-label\" }) a11yLabel: string;\n\n /* Id for element which describes the link/button /\n @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the link/button element.\n * Default value will be taken from `label` prop or default slot.\n /\n @Prop() analyticsId: string;\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the remove button element.\n * Default value will be taken from `removeLabel` prop.\n /\n @Prop() removeAnalyticsId: string;\n\n @Element() element: HTMLStzhChipElement;\n\n /* Focus menu item /\n @Method()\n async setFocus() {\n this.chip.focus();\n }\n\n /* Chip click event /\n @Event() stzhClick: EventEmitter<StzhChipClickEvent>;\n\n /* Chip remove event /\n @Event() stzhRemove: EventEmitter<StzhChipRemoveEvent>;\n\n /* Focus event /\n @Event() stzhFocus: EventEmitter<StzhChipFocusEvent>;\n\n /* Input blur event /\n @Event() stzhBlur: EventEmitter<StzhChipBlurEvent>;\n\n private chip: HTMLButtonElement \| HTMLAnchorElement;\n private text: HTMLElement;\n private focusedByInput: boolean = false;\n\n componentDidRender() {\n requestAnimationFrame(() => {\n this.chip.setAttribute(\"s-object-id\", this.analyticsId \|\| this.text.innerText);\n });\n }\n\n private renderInner(): DocumentFragment {\n return (\n <Fragment>\n <div class=\"stzh-chip__icon-wrapper\">\n {this.icon ?\n <stzh-icon class=\"stzh-chip__icon\" name={this.icon}></stzh-icon>\n :\n <slot name=\"icon\"></slot>\n }\n </div>\n\n <stzh-clamp\n lines={1}\n class=\"stzh-chip__label\"\n ref={(el) => (this.text = el as HTMLElement)}\n >\n {this.label ? this.label : <slot></slot>}\n {this.counter &&\n <span class=\"stzh-chip__vhidden\">\n  ({this.counter})\n </span>\n }\n </stzh-clamp>\n\n {this.counter &&\n <div class=\"stzh-chip__counter\" aria-hidden=\"true\">\n {this.counter}\n </div>\n }\n </Fragment>\n );\n }\n\n private onRootFocus = () => {\n if (!this.focusedByInput) {\n this.setFocus();\n }\n\n this.focusedByInput = false;\n }\n\n private onFocus = (event: FocusEvent) => {\n this.focusedByInput = true;\n\n const focusEvent = new FocusEvent(\"focus\", {\n view: window,\n bubbles: false,\n cancelable: false\n });\n\n this.element.dispatchEvent(focusEvent);\n this.stzhFocus.emit({\n component: \"stzh-chip\",\n originalEvent: event\n });\n }\n\n private onBlur = (event: FocusEvent) => {\n const blurEvent = new FocusEvent(\"blur\", {\n view: window,\n bubbles: false,\n cancelable: false\n });\n\n this.element.dispatchEvent(blurEvent);\n this.stzhBlur.emit({\n component: \"stzh-chip\",\n originalEvent: event\n });\n }\n\n private onClick = (event: MouseEvent) => {\n this.stzhClick.emit({\n component: \"stzh-chip\",\n originalEvent: event\n });\n }\n\n private onRemoveClick = (event: MouseEvent) => {\n this.stzhRemove.emit({\n component: \"stzh-chip\",\n originalEvent: event\n });\n }\n\n render() {\n const classes = {\n \"stzh-chip\": true,\n \"stzh-chip--is-active\": this.active,\n \"stzh-chip--is-disabled\": this.disabled,\n \"stzh-chip--is-removable\": this.removable,\n \"stzh-chip--has-counter\": !!this.counter,\n [`stzh-chip--type-${this.type}`]: !!this.type,\n [`stzh-chip--size-${this.size}`]: !!this.size,\n [`stzh-chip--${this.variant}`]: !!this.variant\n };\n\n const Chip = this.nonInteractive ? \"div\" :\n this.href ? \"a\" : \"button\";\n\n return (\n <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n <div class={classes}>\n {this.removable &&\n <button\n class=\"stzh-chip__remove\"\n onClick={this.onRemoveClick}\n disabled={this.disabled}\n aria-label={this.removeLabel}\n type=\"button\"\n s-object-id={this.removeAnalyticsId \|\| this.removeLabel}\n >\n <stzh-icon class=\"stzh-chip__remove-icon\" name=\"close\"></stzh-icon>\n </button>\n }\n\n {this.href ?\n <Chip\n ref={(el) => (this.chip = el as HTMLAnchorElement)}\n class={{\n \"stzh-chip__button\": true,\n \"is-button\": !this.nonInteractive && !this.href,\n \"is-link\": !this.nonInteractive && !!this.href\n }}\n href={this.disabled ? null : this.href}\n target={this.target}\n tabindex={this.a11yTabindex}\n aria-label={this.a11yLabel \|\| null}\n aria-describedby={this.a11yDescribedby \|\| null}\n onClick={this.onClick}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n >\n {this.renderInner()}\n </Chip>\n :\n <Chip\n ref={(el) => (this.chip = el as HTMLButtonElement)}\n class={{\n \"stzh-chip__button\": true,\n \"is-button\": !this.nonInteractive && !this.href,\n \"is-link\": !this.nonInteractive && !!this.href\n }}\n disabled={this.disabled}\n type=\"button\"\n tabindex={this.a11yTabindex}\n aria-label={this.a11yLabel \|\| null}\n aria-describedby={this.a11yDescribedby \|\| null}\n onClick={this.onClick}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n >\n {this.renderInner()}\n </Chip>\n }\n </div>\n </Host>\n );\n }\n}\n","stzh-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(--lines-large, var(--lines-medium, var(--lines-small, var(--lines, 0))));\n }\n\n @include mq($from: ultra) {\n --current-lines: var(--lines-ultra, var(--lines-large, var(--lines-medium, var(--lines-small, var(--lines, 0)))));\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 margin-top: space('xxsmall');\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 {\n Component,\n Host,\n h,\n Prop,\n Method,\n Element,\n Event,\n EventEmitter\n} from \"@stencil/core\";\n\nimport {\n StzhClampClampEvent,\n StzhClampExpandEvent\n} from \"../../index\";\n\nimport { fetchTranslations } from \"../../utils/translation-utils\";\nimport { StzhClampLocalizedText } from \"./stzh-clamp.localization\";\n\n/\n \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 clamping is expanded /\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\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 = () => {\n this.expanded = !this.expanded;\n\n this.stzhExpand.emit({\n component: \"stzh-clamp\",\n expanded: this.expanded\n });\n }\n\n async componentWillLoad() {\n if (!this.localization) {\n this.localization = await 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 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\n ref={(el) => (this.textElement = el as HTMLDivElement)}\n class=\"stzh-clamp__text\"\n >\n <slot></slot>\n </div>\n\n <div\n ref={(el) => (this.textCloneElement = el as HTMLDivElement)}\n class=\"stzh-clamp__text is-clone\"\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"],"mappings":"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"}

package/dist/stzh-components/{p-78f89f65.entry.js → p-8eaac610.entry.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{r as t,c as i,h as s,a,g as e,F as l}from"./p-9e02896c.js";import{m as h,a as n,r as d}from"./p-9111e257.js";import{f as o}from"./p-25a09313.js";const r=".sc-stzh-datalist-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-datalist-h{display:none}.sc-stzh-datalist-h *.sc-stzh-datalist,.sc-stzh-datalist-h *.sc-stzh-datalist::before,.sc-stzh-datalist-h *.sc-stzh-datalist::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-datalist-h{--item-label-min-width:7.5rem}@media screen and (min-width: 800px){.sc-stzh-datalist-h{--item-label-min-width:9rem}}[disable-label-min-width].sc-stzh-datalist-h:not([disable-label-min-width=false]){--item-label-min-width:none}.sc-stzh-datalist-h .sc-stzh-datalist-s>stzh-details,.stzh-datalist.sc-stzh-datalist stzh-details.sc-stzh-datalist{--content-grid-column:1 / 6;--content-padding:var(--stzh-space-large) 0 var(--stzh-space-xlarge);--content-border-bottom:0.0625rem solid var(--stzh-base-border-color)}@media screen and (min-width: 1024px){.sc-stzh-datalist-h .sc-stzh-datalist-s>stzh-details,.stzh-datalist.sc-stzh-datalist stzh-details.sc-stzh-datalist{--content-padding:var(--stzh-space-large) 0 var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-datalist-h .sc-stzh-datalist-s>stzh-details,.stzh-datalist.sc-stzh-datalist stzh-details.sc-stzh-datalist{--content-padding:var(--stzh-space-large) 0 var(--stzh-space-xxxlarge)}}.stzh-datalist__list.sc-stzh-datalist{width:100%}.stzh-datalist--has-hidden-border.sc-stzh-datalist .stzh-datalist__list.sc-stzh-datalist{margin-top:calc(var(--stzh-space-xsmall) / -2);margin-bottom:calc(var(--stzh-space-xsmall) / -2)}.stzh-datalist--direction-horizontal.sc-stzh-datalist .stzh-datalist__list.sc-stzh-datalist{width:100%;display:grid;border-collapse:collapse;grid-template-columns:auto auto minmax(auto, 1fr) auto auto;-ms-flex-align:stretch;align-items:stretch}";const c=class{constructor(s){t(this,s);this.stzhDirectionChange=i(this,"stzhDirectionChange",7);this.stzhHideBorderChange=i(this,"stzhHideBorderChange",7);this._items=[];this.resizeHandler=()=>{if(h("ultra").matches&&this.directionUltra!=="inherit"){this.currentDirection=this.directionUltra}else if(h("large").matches&&this.directionLarge!=="inherit"){this.currentDirection=this.directionLarge}else if(h("medium").matches&&this.directionMedium!=="inherit"){this.currentDirection=this.directionMedium}else if(h("small").matches&&this.directionSmall!=="inherit"){this.currentDirection=this.directionSmall}else{this.currentDirection=this.direction}};this.direction="vertical";this.directionSmall="horizontal";this.directionMedium="inherit";this.directionLarge="inherit";this.directionUltra="inherit";this.hideBorder=false;this.disableLabelMinWidth=false;this.currentDirection=undefined;this.items=[]}hideBorderWatcher(t){this.stzhHideBorderChange.emit({component:"stzh-datalist",value:t})}directionWatcher(){this.resizeHandler()}currentDirectionWatcher(t){this.stzhDirectionChange.emit({component:"stzh-datalist",value:t})}itemsWatcher(t){if(typeof t==="string"){this._items=JSON.parse(t)}else{this._items=t}}async componentWillLoad(){this.itemsWatcher(this.items);this.hideBorderWatcher(this.hideBorder);this.resizeHandler()}connectedCallback(){n(this.resizeHandler)}disconnectedCallback(){d(this.resizeHandler)}render(){const t={"stzh-datalist":true,"stzh-datalist--has-hidden-border":this.hideBorder,[`stzh-datalist--direction-${this.currentDirection}`]:!!this.currentDirection};return s(a,null,s("div",{class:t},s("div",{class:"stzh-datalist__list",role:"list"},this._items.map((t=>s("stzh-datalist-item",Object.assign({},t),t.items&&t.items.length>0&&s("stzh-datalist",{items:t.items})))),s("slot",null))))}get element(){return e(this)}static get watchers(){return{hideBorder:["hideBorderWatcher"],direction:["directionWatcher"],directionSmall:["directionWatcher"],directionMedium:["directionWatcher"],directionLarge:["directionWatcher"],directionUltra:["directionWatcher"],currentDirection:["currentDirectionWatcher"],items:["itemsWatcher"]}}};c.style=r;const m='.sc-stzh-datalist-item-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-datalist-item-h{display:none}.sc-stzh-datalist-item-h *.sc-stzh-datalist-item,.sc-stzh-datalist-item-h *.sc-stzh-datalist-item::before,.sc-stzh-datalist-item-h *.sc-stzh-datalist-item::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-datalist-item-h{--font-family:var(--stzh-font-family-regular);--font-weight:var(--stzh-font-weight-regular);--color:inherit;--action-display:flex;--label-min-width:var(--item-label-min-width, none);--leading-icon-background-color:var(--stzh-color-grey5);--leading-icon-color:var(--stzh-color-grey70);--hover-leading-icon-background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-leading-icon-color:var(--stzh-color-white);--horizontal-min-height:3rem;display:contents}[href].sc-stzh-datalist-item-h:not([href=""]),[a11y-expanded].sc-stzh-datalist-item-h,[a11y-controls].sc-stzh-datalist-item-h{--color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--hover-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.sc-stzh-datalist-item-h .sc-stzh-datalist-item-s>stzh-datalist{margin-left:var(--stzh-space-large)}.stzh-datalist-item.sc-stzh-datalist-item{position:relative;-webkit-text-decoration-line:none;text-decoration-line:none}.stzh-datalist-item__vhidden.sc-stzh-datalist-item{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-datalist-item__wrapper.sc-stzh-datalist-item{-ms-flex-positive:1;flex-grow:1;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start}.stzh-datalist-item__leading.sc-stzh-datalist-item,.stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item__meta.sc-stzh-datalist-item,.stzh-datalist-item__action-list.sc-stzh-datalist-item{color:inherit;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;background:transparent;border:none;padding:0;-webkit-text-decoration-line:none;text-decoration-line:none}.stzh-datalist-item__leading.is-button.sc-stzh-datalist-item,.stzh-datalist-item__leading.is-link.sc-stzh-datalist-item,.stzh-datalist-item__value.is-button.sc-stzh-datalist-item,.stzh-datalist-item__value.is-link.sc-stzh-datalist-item,.stzh-datalist-item__label.is-button.sc-stzh-datalist-item,.stzh-datalist-item__label.is-link.sc-stzh-datalist-item,.stzh-datalist-item__meta.is-button.sc-stzh-datalist-item,.stzh-datalist-item__meta.is-link.sc-stzh-datalist-item,.stzh-datalist-item__action-list.is-button.sc-stzh-datalist-item,.stzh-datalist-item__action-list.is-link.sc-stzh-datalist-item{cursor:pointer}.stzh-datalist-item__leading.sc-stzh-datalist-item{-ms-flex-negative:0;flex-shrink:0}.stzh-datalist-item__leading.sc-stzh-datalist-item:not(:empty){padding-right:var(--stzh-space-xsmall)}.stzh-datalist-item__leading-icon-container.sc-stzh-datalist-item{color:var(--leading-icon-color);background-color:var(--leading-icon-background-color);width:2.5rem;height:2.5rem;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;border-radius:50%;-webkit-transition-property:color, background-color;transition-property:color, background-color;-webkit-transition-duration:var(--stzh-base-transition-animation-speed);transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-datalist-item__value.sc-stzh-datalist-item{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);font-family:var(--font-family);font-weight:var(--font-weight);-ms-flex-positive:1;flex-grow:1}@media screen and (min-width: 1024px){.stzh-datalist-item__value.sc-stzh-datalist-item{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-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item__icon.sc-stzh-datalist-item{color:var(--color)}.stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item__meta.sc-stzh-datalist-item{font-size:var(--stzh-font-curve-caption-default-font-size, var(--stzh-font-nano-font-size));line-height:var(--stzh-font-curve-caption-default-text-line-height, var(--stzh-font-nano-text-line-height))}@media screen and (min-width: 1024px){.stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item__meta.sc-stzh-datalist-item{font-size:var(--stzh-font-curve-caption-medium-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-caption-medium-text-line-height, var(--stzh-font-micro-text-line-height))}}.stzh-datalist-item__meta.sc-stzh-datalist-item{-ms-flex-pack:end;justify-content:flex-end}.stzh-datalist-item__label.sc-stzh-datalist-item{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:normal;color:var(--stzh-base-lead-color)}.stzh-datalist-item__action-list.sc-stzh-datalist-item{display:var(--action-display);-ms-flex-pack:center;justify-content:center;text-align:center}.stzh-datalist-item__action-list.sc-stzh-datalist-item:not(:empty){padding-left:var(--stzh-space-xsmall)}.stzh-datalist-item__action.is-non-interactive.sc-stzh-datalist-item{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;width:var(--stzh-form-input-tiny-height);height:var(--stzh-form-input-tiny-height)}.stzh-datalist-item__action.is-button[variant=tertiary].sc-stzh-datalist-item{--color:inherit}.stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item__icon.sc-stzh-datalist-item{-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed)}.stzh-datalist-item__richtext.sc-stzh-datalist-item{color:inherit;font-family:inherit;font-weight:inherit}.stzh-datalist-item__interactive.sc-stzh-datalist-item{position:absolute;top:0;left:0}.stzh-datalist-item--is-button.sc-stzh-datalist-item .stzh-datalist-item__icon.is-open.sc-stzh-datalist-item{display:none}.stzh-datalist-item--is-button.stzh-datalist-item--is-expanded.sc-stzh-datalist-item .stzh-datalist-item__icon.is-closed.sc-stzh-datalist-item{display:none}.stzh-datalist-item--is-button.stzh-datalist-item--is-expanded.sc-stzh-datalist-item .stzh-datalist-item__icon.is-open.sc-stzh-datalist-item{display:-ms-inline-flexbox;display:inline-flex}.stzh-datalist-item--is-interactive.sc-stzh-datalist-item:hover .stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item--is-interactive.sc-stzh-datalist-item:hover .stzh-datalist-item__icon.sc-stzh-datalist-item{color:var(--hover-color)}.stzh-datalist-item--is-interactive.sc-stzh-datalist-item:hover .stzh-datalist-item__value.sc-stzh-datalist-item{-webkit-text-decoration-line:underline;text-decoration-line:underline}.stzh-datalist-item--is-interactive.sc-stzh-datalist-item:hover .stzh-datalist-item__leading-icon-container.sc-stzh-datalist-item,.stzh-datalist-item--is-interactive.sc-stzh-datalist-item:focus-within .stzh-datalist-item__leading-icon-container.sc-stzh-datalist-item{color:var(--hover-leading-icon-color);background-color:var(--hover-leading-icon-background-color)}.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item{display:-ms-flexbox;display:flex;padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-xsmall)}.stzh-datalist-item--direction-vertical.stzh-datalist-item--has-hidden-border.sc-stzh-datalist-item{padding-top:calc(var(--stzh-space-xsmall) / 2);padding-bottom:calc(var(--stzh-space-xsmall) / 2)}.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item:not(.stzh-datalist-item--has-hidden-border){border-bottom:0.0625rem solid var(--stzh-base-border-color)}.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__leading-icon-container.sc-stzh-datalist-item{width:2.5rem;height:2.5rem}.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__leading-icon.sc-stzh-datalist-item{--size:var(--stzh-icon-size-medium)}.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item{-ms-flex-direction:column;flex-direction:column}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item+.stzh-datalist-item__nested.sc-stzh-datalist-item{display:contents}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item+.stzh-datalist-item__nested.sc-stzh-datalist-item .stzh-datalist-item__nested-inner.sc-stzh-datalist-item{grid-column:1/6}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__leading.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__action-list.sc-stzh-datalist-item{min-height:var(--horizontal-min-height)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item{padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-xsmall)}.stzh-datalist-item--direction-horizontal.stzh-datalist-item--has-hidden-border.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.stzh-datalist-item--has-hidden-border.sc-stzh-datalist-item .stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.stzh-datalist-item--has-hidden-border.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item{padding-top:calc(var(--stzh-space-xsmall) / 2);padding-bottom:calc(var(--stzh-space-xsmall) / 2)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item:not(.stzh-datalist-item--has-hidden-border) .stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item:not(.stzh-datalist-item--has-hidden-border) .stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item:not(.stzh-datalist-item--has-hidden-border) .stzh-datalist-item__meta.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item:not(.stzh-datalist-item--has-hidden-border) .stzh-datalist-item__action-list.sc-stzh-datalist-item{border-bottom:0.0625rem solid var(--stzh-base-border-color)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item:not(:empty){min-width:var(--label-min-width);padding-right:var(--stzh-space-xsmall)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item:not(:empty){padding-left:var(--stzh-space-xsmall)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__leading-icon-container.sc-stzh-datalist-item{width:2rem;height:2rem}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__meta-status.sc-stzh-datalist-item+.stzh-datalist-item__meta-text.sc-stzh-datalist-item{margin-left:var(--stzh-space-xsmall)}';let z=0;const _=class{constructor(s){t(this,s);this.stzhItemActionClick=i(this,"stzhItemActionClick",7);this.actionClick=t=>{this.stzhItemActionClick.emit({component:"stzh-datalist-item",originalEvent:t})};this.handleDirectionChange=t=>{this.direction=t.detail.value};this.handleHideBorderChange=t=>{this.hideBorder=t.detail.value};this.localization=undefined;this.direction="vertical";this.href=undefined;this.rel=undefined;this.target=undefined;this.download=undefined;this.leadingIcon=undefined;this.icon=undefined;this.iconLabel=undefined;this.iconTooltip=undefined;this.label="";this.value="";this.meta="";this.statusLabel="";this.statusType="default";this.hideBorder=false;this.a11yExpanded=undefined;this.a11yControls=undefined;this.external=false}externalWatcher(){this.external=this.rel&&this.rel.includes("external")}renderInner(t){const i=t?"button":this.href?"a":"div";return s(l,null,s(i,{"aria-hidden":this.label?null:"true",tabindex:"-1",id:`${this.datalistItemId}-label`,class:{"stzh-datalist-item__label":true,"is-button":t,"is-link":!!this.href},href:this.href,rel:this.rel,target:this.target,download:this.download},this.label),s(i,{id:`${this.datalistItemId}-value`,class:{"stzh-datalist-item__value":true,"is-button":t,"is-link":!!this.href},href:this.href,rel:this.rel,target:this.target,download:this.download,"aria-labelledby":i!=="div"?`${this.datalistItemId}-label ${this.datalistItemId}-value ${this.datalistItemId}-meta`:null,"aria-controls":this.a11yControls,"aria-expanded":typeof this.a11yExpanded!=="undefined"?this.a11yExpanded?"true":"false":null},this.external&&s("div",{class:"stzh-datalist-item__vhidden"},this.localization.$globals.externalLinkLabel),this.download&&s("div",{class:"stzh-datalist-item__vhidden"},this.localization.$globals.downloadLinkLabel),s("stzh-richtext",{class:"stzh-datalist-item__richtext",innerHTML:this.value},s("slot",{name:"value"}))),s(i,{"aria-hidden":this.statusLabel||this.meta?null:"true",tabindex:"-1",id:`${this.datalistItemId}-meta`,class:{"stzh-datalist-item__meta":true,"is-button":t,"is-link":!!this.href},href:this.href,rel:this.rel,target:this.target,download:this.download},this.statusLabel&&s("stzh-status",{class:"stzh-datalist-item__meta-status",label:this.statusLabel,type:this.statusType}),this.meta&&s("span",{class:"stzh-datalist-item__meta-text"},this.meta)))}renderLeadingIcon(t){const i=t?"button":this.href?"a":"div";return s(i,{role:"presentation","aria-hidden":"true",tabindex:"-1",class:{"stzh-datalist-item__leading":true,"is-button":t,"is-link":!!this.href},href:this.href,rel:this.rel,target:this.target,download:this.download},this.leadingIcon&&s("div",{class:"stzh-datalist-item__leading-icon-container"},s("stzh-icon",{class:"stzh-datalist-item__leading-icon",name:this.leadingIcon})))}async connectedCallback(){this.datalist=this.element.closest("stzh-datalist");if(this.datalist){this.direction=this.datalist.currentDirection;this.hideBorder=this.datalist.hideBorder;this.datalist.addEventListener("stzhDirectionChange",this.handleDirectionChange);this.datalist.addEventListener("stzhHideBorderChange",this.handleHideBorderChange)}}disconnectedCallback(){if(this.datalist){this.datalist.removeEventListener("stzhDirectionChange",this.handleDirectionChange);this.datalist.removeEventListener("stzhHideBorderChange",this.handleHideBorderChange);this.datalist=null}}async componentWillLoad(){this.datalistItemId=`stzh-datalist-item-${z++}`;this.externalWatcher();if(!this.localization){this.localization=await o(this.element,"datalist-item")}}render(){const t=typeof this.a11yExpanded!=="undefined"||typeof this.a11yControls!=="undefined";const i=!this.href&&this.icon;const e={"stzh-datalist-item":true,"stzh-datalist-item--is-interactive":!!this.href||t,"stzh-datalist-item--is-link":!!this.href,"stzh-datalist-item--is-button":t,"stzh-datalist-item--is-expanded":this.a11yExpanded,"stzh-datalist-item--has-hidden-border":this.hideBorder,[`stzh-datalist-item--direction-${this.direction}`]:!!this.direction};const h=t?"button":this.href?"a":"div";const n=()=>s("stzh-button",{class:{"stzh-datalist-item__action":true,"is-button":true},variant:"tertiary",size:"tiny","aria-label":this.iconLabel||`${this.label} ${this.value}`,iconOnly:true,icon:this.icon,onClick:this.actionClick});return s(a,{role:"listitem"},s("div",{class:e},this.direction==="horizontal"?s(l,null,this.renderLeadingIcon(t),this.renderInner(t)):s(l,null,this.renderLeadingIcon(t),s("div",{class:"stzh-datalist-item__wrapper"},this.renderInner(t))),s(h,{role:i?null:"presentation","aria-hidden":i?null:"true",tabindex:"-1",class:{"stzh-datalist-item__action-list":true,"is-button":t,"is-link":!!this.href},href:this.href,rel:this.rel,target:this.target,download:this.download},this.href&&(this.download?s("div",{class:"stzh-datalist-item__action is-non-interactive"},s("stzh-icon",{class:"stzh-datalist-item__icon",name:this.icon?this.icon:"download"})):s("div",{class:"stzh-datalist-item__action is-non-interactive"},s("stzh-icon",{class:"stzh-datalist-item__icon",name:this.icon?this.icon:this.external?"external-link":"arrow-right"}))),t&&s("div",{class:"stzh-datalist-item__action is-non-interactive"},s("stzh-icon",{class:"stzh-datalist-item__icon is-closed",name:this.icon?this.icon:"plus"}),s("stzh-icon",{class:"stzh-datalist-item__icon is-open",name:this.icon?this.icon:"minus"})),i&&(this.iconTooltip?s("stzh-tooltip",{content:this.iconTooltip},n()):n()))),s("div",{class:"stzh-datalist-item__nested"},s("div",{class:"stzh-datalist-item__nested-inner"},s("slot",null))))}get element(){return e(this)}static get watchers(){return{rel:["externalWatcher"]}}};_.style=m;export{c as stzh_datalist,_ as stzh_datalist_item};
-//# sourceMappingURL=p-78f89f65.entry.js.map
+import{r as t,c as i,h as s,a,g as e,F as l}from"./p-9e02896c.js";import{m as h,a as n,r as d}from"./p-9111e257.js";import{f as o}from"./p-25a09313.js";const r=".sc-stzh-datalist-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-datalist-h{display:none}.sc-stzh-datalist-h *.sc-stzh-datalist,.sc-stzh-datalist-h *.sc-stzh-datalist::before,.sc-stzh-datalist-h *.sc-stzh-datalist::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-datalist-h{--item-label-min-width:7.5rem}@media screen and (min-width: 800px){.sc-stzh-datalist-h{--item-label-min-width:9rem}}[disable-label-min-width].sc-stzh-datalist-h:not([disable-label-min-width=false]){--item-label-min-width:none}.sc-stzh-datalist-h .sc-stzh-datalist-s>stzh-details,.stzh-datalist.sc-stzh-datalist stzh-details.sc-stzh-datalist{--content-grid-column:1 / 6;--content-padding:var(--stzh-space-large) 0 var(--stzh-space-xlarge);--content-border-bottom:0.0625rem solid var(--stzh-base-border-color)}@media screen and (min-width: 1024px){.sc-stzh-datalist-h .sc-stzh-datalist-s>stzh-details,.stzh-datalist.sc-stzh-datalist stzh-details.sc-stzh-datalist{--content-padding:var(--stzh-space-large) 0 var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-datalist-h .sc-stzh-datalist-s>stzh-details,.stzh-datalist.sc-stzh-datalist stzh-details.sc-stzh-datalist{--content-padding:var(--stzh-space-large) 0 var(--stzh-space-xxxlarge)}}.stzh-datalist__list.sc-stzh-datalist{width:100%}.stzh-datalist--has-hidden-border.sc-stzh-datalist .stzh-datalist__list.sc-stzh-datalist{margin-top:calc(var(--stzh-space-xsmall) / -2);margin-bottom:calc(var(--stzh-space-xsmall) / -2)}.stzh-datalist--direction-horizontal.sc-stzh-datalist .stzh-datalist__list.sc-stzh-datalist{width:100%;display:grid;border-collapse:collapse;grid-template-columns:auto auto minmax(auto, 1fr) auto auto;-ms-flex-align:stretch;align-items:stretch}";const c=class{constructor(s){t(this,s);this.stzhDirectionChange=i(this,"stzhDirectionChange",7);this.stzhHideBorderChange=i(this,"stzhHideBorderChange",7);this._items=[];this.resizeHandler=()=>{if(h("ultra").matches&&this.directionUltra!=="inherit"){this.currentDirection=this.directionUltra}else if(h("large").matches&&this.directionLarge!=="inherit"){this.currentDirection=this.directionLarge}else if(h("medium").matches&&this.directionMedium!=="inherit"){this.currentDirection=this.directionMedium}else if(h("small").matches&&this.directionSmall!=="inherit"){this.currentDirection=this.directionSmall}else{this.currentDirection=this.direction}};this.direction="vertical";this.directionSmall="horizontal";this.directionMedium="inherit";this.directionLarge="inherit";this.directionUltra="inherit";this.hideBorder=false;this.disableLabelMinWidth=false;this.currentDirection=undefined;this.items=[]}hideBorderWatcher(t){this.stzhHideBorderChange.emit({component:"stzh-datalist",value:t})}directionWatcher(){this.resizeHandler()}currentDirectionWatcher(t){this.stzhDirectionChange.emit({component:"stzh-datalist",value:t})}itemsWatcher(t){if(typeof t==="string"){this._items=JSON.parse(t)}else{this._items=t}}async componentWillLoad(){this.itemsWatcher(this.items);this.hideBorderWatcher(this.hideBorder);this.resizeHandler()}connectedCallback(){n(this.resizeHandler)}disconnectedCallback(){d(this.resizeHandler)}render(){const t={"stzh-datalist":true,"stzh-datalist--has-hidden-border":this.hideBorder,[`stzh-datalist--direction-${this.currentDirection}`]:!!this.currentDirection};return s(a,null,s("div",{class:t},s("div",{class:"stzh-datalist__list",role:"list"},this._items.map((t=>s("stzh-datalist-item",Object.assign({},t),t.items&&t.items.length>0&&s("stzh-datalist",{items:t.items})))),s("slot",null))))}get element(){return e(this)}static get watchers(){return{hideBorder:["hideBorderWatcher"],direction:["directionWatcher"],directionSmall:["directionWatcher"],directionMedium:["directionWatcher"],directionLarge:["directionWatcher"],directionUltra:["directionWatcher"],currentDirection:["currentDirectionWatcher"],items:["itemsWatcher"]}}};c.style=r;const m='.sc-stzh-datalist-item-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-datalist-item-h{display:none}.sc-stzh-datalist-item-h *.sc-stzh-datalist-item,.sc-stzh-datalist-item-h *.sc-stzh-datalist-item::before,.sc-stzh-datalist-item-h *.sc-stzh-datalist-item::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-datalist-item-h{--font-family:var(--stzh-font-family-regular);--font-weight:var(--stzh-font-weight-regular);--color:inherit;--action-display:flex;--label-min-width:var(--item-label-min-width, none);--leading-icon-background-color:var(--stzh-color-grey5);--leading-icon-color:var(--stzh-color-grey70);--hover-leading-icon-background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-leading-icon-color:var(--stzh-color-white);--horizontal-min-height:3rem;display:contents}[href].sc-stzh-datalist-item-h:not([href=""]),[a11y-expanded].sc-stzh-datalist-item-h,[a11y-controls].sc-stzh-datalist-item-h{--color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--hover-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.sc-stzh-datalist-item-h .sc-stzh-datalist-item-s>stzh-datalist{margin-left:var(--stzh-space-large)}.stzh-datalist-item.sc-stzh-datalist-item{position:relative;-webkit-text-decoration-line:none;text-decoration-line:none}.stzh-datalist-item__vhidden.sc-stzh-datalist-item{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-datalist-item__wrapper.sc-stzh-datalist-item{-ms-flex-positive:1;flex-grow:1;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start}.stzh-datalist-item__leading.sc-stzh-datalist-item,.stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item__meta.sc-stzh-datalist-item,.stzh-datalist-item__action-list.sc-stzh-datalist-item{color:inherit;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;background:transparent;border:none;padding:0;-webkit-text-decoration-line:none;text-decoration-line:none}.stzh-datalist-item__leading.is-button.sc-stzh-datalist-item,.stzh-datalist-item__leading.is-link.sc-stzh-datalist-item,.stzh-datalist-item__value.is-button.sc-stzh-datalist-item,.stzh-datalist-item__value.is-link.sc-stzh-datalist-item,.stzh-datalist-item__label.is-button.sc-stzh-datalist-item,.stzh-datalist-item__label.is-link.sc-stzh-datalist-item,.stzh-datalist-item__meta.is-button.sc-stzh-datalist-item,.stzh-datalist-item__meta.is-link.sc-stzh-datalist-item,.stzh-datalist-item__action-list.is-button.sc-stzh-datalist-item,.stzh-datalist-item__action-list.is-link.sc-stzh-datalist-item{cursor:pointer}.stzh-datalist-item__leading.sc-stzh-datalist-item{-ms-flex-negative:0;flex-shrink:0}.stzh-datalist-item__leading.sc-stzh-datalist-item:not(:empty){padding-right:var(--stzh-space-xsmall)}.stzh-datalist-item__leading-icon-container.sc-stzh-datalist-item{color:var(--leading-icon-color);background-color:var(--leading-icon-background-color);width:2.5rem;height:2.5rem;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;border-radius:50%;-webkit-transition-property:color, background-color;transition-property:color, background-color;-webkit-transition-duration:var(--stzh-base-transition-animation-speed);transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-datalist-item__value.sc-stzh-datalist-item{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);font-family:var(--font-family);font-weight:var(--font-weight);-ms-flex-positive:1;flex-grow:1}@media screen and (min-width: 1024px){.stzh-datalist-item__value.sc-stzh-datalist-item{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-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item__icon.sc-stzh-datalist-item{color:var(--color)}.stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item__meta.sc-stzh-datalist-item{font-size:var(--stzh-font-curve-caption-default-font-size, var(--stzh-font-nano-font-size));line-height:var(--stzh-font-curve-caption-default-text-line-height, var(--stzh-font-nano-text-line-height))}@media screen and (min-width: 1024px){.stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item__meta.sc-stzh-datalist-item{font-size:var(--stzh-font-curve-caption-medium-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-caption-medium-text-line-height, var(--stzh-font-micro-text-line-height))}}.stzh-datalist-item__meta.sc-stzh-datalist-item{-ms-flex-pack:end;justify-content:flex-end}.stzh-datalist-item__label.sc-stzh-datalist-item{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:normal;color:var(--stzh-base-lead-color)}.stzh-datalist-item__action-list.sc-stzh-datalist-item{display:var(--action-display);-ms-flex-pack:center;justify-content:center;text-align:center}.stzh-datalist-item__action-list.sc-stzh-datalist-item:not(:empty){padding-left:var(--stzh-space-xsmall)}.stzh-datalist-item__action.is-non-interactive.sc-stzh-datalist-item{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;width:var(--stzh-form-input-tiny-height);height:var(--stzh-form-input-tiny-height)}.stzh-datalist-item__action.is-button[variant=tertiary].sc-stzh-datalist-item{--color:inherit}.stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item__icon.sc-stzh-datalist-item{-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed)}.stzh-datalist-item__richtext.sc-stzh-datalist-item{color:inherit;font-family:inherit;font-weight:inherit}.stzh-datalist-item__interactive.sc-stzh-datalist-item{position:absolute;top:0;left:0}.stzh-datalist-item--is-button.sc-stzh-datalist-item .stzh-datalist-item__icon.is-open.sc-stzh-datalist-item{display:none}.stzh-datalist-item--is-button.stzh-datalist-item--is-expanded.sc-stzh-datalist-item .stzh-datalist-item__icon.is-closed.sc-stzh-datalist-item{display:none}.stzh-datalist-item--is-button.stzh-datalist-item--is-expanded.sc-stzh-datalist-item .stzh-datalist-item__icon.is-open.sc-stzh-datalist-item{display:-ms-inline-flexbox;display:inline-flex}.stzh-datalist-item--is-interactive.sc-stzh-datalist-item:hover .stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item--is-interactive.sc-stzh-datalist-item:hover .stzh-datalist-item__icon.sc-stzh-datalist-item{color:var(--hover-color)}.stzh-datalist-item--is-interactive.sc-stzh-datalist-item:hover .stzh-datalist-item__value.sc-stzh-datalist-item{-webkit-text-decoration-line:underline;text-decoration-line:underline}.stzh-datalist-item--is-interactive.sc-stzh-datalist-item:hover .stzh-datalist-item__leading-icon-container.sc-stzh-datalist-item,.stzh-datalist-item--is-interactive.sc-stzh-datalist-item:focus-within .stzh-datalist-item__leading-icon-container.sc-stzh-datalist-item{color:var(--hover-leading-icon-color);background-color:var(--hover-leading-icon-background-color)}.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item{display:-ms-flexbox;display:flex;padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-xsmall)}.stzh-datalist-item--direction-vertical.stzh-datalist-item--has-hidden-border.sc-stzh-datalist-item{padding-top:calc(var(--stzh-space-xsmall) / 2);padding-bottom:calc(var(--stzh-space-xsmall) / 2)}.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item:not(.stzh-datalist-item--has-hidden-border){border-bottom:0.0625rem solid var(--stzh-base-border-color)}.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__leading-icon-container.sc-stzh-datalist-item{width:2.5rem;height:2.5rem}.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__leading-icon.sc-stzh-datalist-item{--size:var(--stzh-icon-size-medium)}.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item{-ms-flex-direction:column;flex-direction:column}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item+.stzh-datalist-item__nested.sc-stzh-datalist-item{display:contents}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item+.stzh-datalist-item__nested.sc-stzh-datalist-item .stzh-datalist-item__nested-inner.sc-stzh-datalist-item{grid-column:1/6}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__leading.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__action-list.sc-stzh-datalist-item{min-height:var(--horizontal-min-height)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item{padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-xsmall)}.stzh-datalist-item--direction-horizontal.stzh-datalist-item--has-hidden-border.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.stzh-datalist-item--has-hidden-border.sc-stzh-datalist-item .stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.stzh-datalist-item--has-hidden-border.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item{padding-top:calc(var(--stzh-space-xsmall) / 2);padding-bottom:calc(var(--stzh-space-xsmall) / 2)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item:not(.stzh-datalist-item--has-hidden-border) .stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item:not(.stzh-datalist-item--has-hidden-border) .stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item:not(.stzh-datalist-item--has-hidden-border) .stzh-datalist-item__meta.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item:not(.stzh-datalist-item--has-hidden-border) .stzh-datalist-item__action-list.sc-stzh-datalist-item{border-bottom:0.0625rem solid var(--stzh-base-border-color)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item:not(:empty){min-width:var(--label-min-width);padding-right:var(--stzh-space-xsmall)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item:not(:empty){padding-left:var(--stzh-space-xsmall)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__leading-icon-container.sc-stzh-datalist-item{width:2rem;height:2rem}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__meta-status.sc-stzh-datalist-item+.stzh-datalist-item__meta-text.sc-stzh-datalist-item{margin-left:var(--stzh-space-xsmall)}';let z=0;const _=class{constructor(s){t(this,s);this.stzhItemActionClick=i(this,"stzhItemActionClick",7);this.actionClick=t=>{this.stzhItemActionClick.emit({component:"stzh-datalist-item",originalEvent:t})};this.handleDirectionChange=t=>{this.direction=t.detail.value};this.handleHideBorderChange=t=>{this.hideBorder=t.detail.value};this.localization=undefined;this.direction="vertical";this.href=undefined;this.rel=undefined;this.target=undefined;this.download=undefined;this.leadingIcon=undefined;this.icon=undefined;this.iconLabel=undefined;this.iconTooltip=undefined;this.label="";this.value="";this.meta="";this.statusLabel="";this.statusType="default";this.hideBorder=false;this.a11yExpanded=undefined;this.a11yControls=undefined;this.external=false}externalWatcher(){this.external=this.rel&&this.rel.includes("external")}renderInner(t){const i=t?"button":this.href?"a":"div";return s(l,null,s(i,{"aria-hidden":this.label?null:"true",tabindex:"-1",id:`${this.datalistItemId}-label`,class:{"stzh-datalist-item__label":true,"is-button":t,"is-link":!!this.href},href:this.href,rel:this.rel,target:this.target,download:this.download},this.label),s(i,{id:`${this.datalistItemId}-value`,class:{"stzh-datalist-item__value":true,"is-button":t,"is-link":!!this.href},href:this.href,rel:this.rel,target:this.target,download:this.download,"aria-labelledby":i!=="div"?`${this.datalistItemId}-label ${this.datalistItemId}-value ${this.datalistItemId}-meta`:null,"aria-controls":this.a11yControls||null,"aria-expanded":typeof this.a11yExpanded!=="undefined"?this.a11yExpanded?"true":"false":null},this.external&&s("div",{class:"stzh-datalist-item__vhidden"},this.localization.$globals.externalLinkLabel),this.download&&s("div",{class:"stzh-datalist-item__vhidden"},this.localization.$globals.downloadLinkLabel),s("stzh-richtext",{class:"stzh-datalist-item__richtext",innerHTML:this.value},s("slot",{name:"value"}))),s(i,{"aria-hidden":this.statusLabel||this.meta?null:"true",tabindex:"-1",id:`${this.datalistItemId}-meta`,class:{"stzh-datalist-item__meta":true,"is-button":t,"is-link":!!this.href},href:this.href,rel:this.rel,target:this.target,download:this.download},this.statusLabel&&s("stzh-status",{class:"stzh-datalist-item__meta-status",label:this.statusLabel,type:this.statusType}),this.meta&&s("span",{class:"stzh-datalist-item__meta-text"},this.meta)))}renderLeadingIcon(t){const i=t?"button":this.href?"a":"div";return s(i,{role:"presentation","aria-hidden":"true",tabindex:"-1",class:{"stzh-datalist-item__leading":true,"is-button":t,"is-link":!!this.href},href:this.href,rel:this.rel,target:this.target,download:this.download},this.leadingIcon&&s("div",{class:"stzh-datalist-item__leading-icon-container"},s("stzh-icon",{class:"stzh-datalist-item__leading-icon",name:this.leadingIcon})))}async connectedCallback(){this.datalist=this.element.closest("stzh-datalist");if(this.datalist){this.direction=this.datalist.currentDirection;this.hideBorder=this.datalist.hideBorder;this.datalist.addEventListener("stzhDirectionChange",this.handleDirectionChange);this.datalist.addEventListener("stzhHideBorderChange",this.handleHideBorderChange)}}disconnectedCallback(){if(this.datalist){this.datalist.removeEventListener("stzhDirectionChange",this.handleDirectionChange);this.datalist.removeEventListener("stzhHideBorderChange",this.handleHideBorderChange);this.datalist=null}}async componentWillLoad(){this.datalistItemId=`stzh-datalist-item-${z++}`;this.externalWatcher();if(!this.localization){this.localization=await o(this.element,"datalist-item")}}render(){const t=typeof this.a11yExpanded!=="undefined"||typeof this.a11yControls!=="undefined";const i=!this.href&&this.icon;const e={"stzh-datalist-item":true,"stzh-datalist-item--is-interactive":!!this.href||t,"stzh-datalist-item--is-link":!!this.href,"stzh-datalist-item--is-button":t,"stzh-datalist-item--is-expanded":this.a11yExpanded,"stzh-datalist-item--has-hidden-border":this.hideBorder,[`stzh-datalist-item--direction-${this.direction}`]:!!this.direction};const h=t?"button":this.href?"a":"div";const n=()=>s("stzh-button",{class:{"stzh-datalist-item__action":true,"is-button":true},variant:"tertiary",size:"tiny","aria-label":this.iconLabel||`${this.label} ${this.value}`,iconOnly:true,icon:this.icon,onClick:this.actionClick});return s(a,{role:"listitem"},s("div",{class:e},this.direction==="horizontal"?s(l,null,this.renderLeadingIcon(t),this.renderInner(t)):s(l,null,this.renderLeadingIcon(t),s("div",{class:"stzh-datalist-item__wrapper"},this.renderInner(t))),s(h,{role:i?null:"presentation","aria-hidden":i?null:"true",tabindex:"-1",class:{"stzh-datalist-item__action-list":true,"is-button":t,"is-link":!!this.href},href:this.href,rel:this.rel,target:this.target,download:this.download},this.href&&(this.download?s("div",{class:"stzh-datalist-item__action is-non-interactive"},s("stzh-icon",{class:"stzh-datalist-item__icon",name:this.icon?this.icon:"download"})):s("div",{class:"stzh-datalist-item__action is-non-interactive"},s("stzh-icon",{class:"stzh-datalist-item__icon",name:this.icon?this.icon:this.external?"external-link":"arrow-right"}))),t&&s("div",{class:"stzh-datalist-item__action is-non-interactive"},s("stzh-icon",{class:"stzh-datalist-item__icon is-closed",name:this.icon?this.icon:"plus"}),s("stzh-icon",{class:"stzh-datalist-item__icon is-open",name:this.icon?this.icon:"minus"})),i&&(this.iconTooltip?s("stzh-tooltip",{content:this.iconTooltip},n()):n()))),s("div",{class:"stzh-datalist-item__nested"},s("div",{class:"stzh-datalist-item__nested-inner"},s("slot",null))))}get element(){return e(this)}static get watchers(){return{rel:["externalWatcher"]}}};_.style=m;export{c as stzh_datalist,_ as stzh_datalist_item};
+//# sourceMappingURL=p-8eaac610.entry.js.map