npm - @oiz/stzh-components - Versions diffs - 4.9.0-beta1 → 4.9.0-beta2 - Mend

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

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 (853) hide show

package/dist/components/{p-By320y5w.js.map → p-BtU8igAM.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-By320y5w.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-button/stzh-button.scss?tag=stzh-button&encapsulation=scoped","src/components/stzh-button/stzh-button.tsx"],"sourcesContent":["/*\n @prop --height: Height of button\n * @prop --padding-top: Padding top of button\n * @prop --padding-bottom: Padding bottom of button\n * @prop --padding-left: Padding left of button\n * @prop --padding-right: Padding right of button\n * @prop --border-radius: Border radius of button\n * @prop --color: Color of button\n * @prop --background-color: Background color of button\n * @prop --border-color: Border color of button\n * @prop --icon-size: Size of icon next to button\n * @prop --hover-color: Hover color of button\n * @prop --hover-background-color: Hover background color of button\n * @prop --hover-border-color: Hover border color of button\n * @prop --white-space: White space behaviour of button\n \n @prop --stzh-form-input-height: Global: Height of fields & buttons\n * @prop --stzh-form-input-small-height: Global: Height of fields & buttons when small variant is used\n * @prop --stzh-form-input-tiny-height: Global: Height of fields & buttons when tiny variant is used\n /\n\n@mixin button--size-default() {\n --height: #{$formInputHeight};\n --padding-top: calc(#{space(\"xsmall\")} - var(--border-width));\n --padding-bottom: calc(#{space(\"xsmall\")} - var(--border-width));\n --padding-left: #{space(\"xlarge\")};\n --padding-right: #{space(\"xlarge\")};\n --font-size: var(--stzh-font-centi-font-size);\n --line-height: var(--stzh-font-centi-text-line-height);\n --letter-spacing: normal;\n --icon-size: #{iconSize(\"medium\")};\n --icon-toggle-size: 14.5px;\n\n &:where([icon-only]:not([icon-only=\"false\"])) {\n --icon-size: #{iconSize(\"large\")};\n }\n}\n\n@mixin button--size-small() {\n --height: #{$formInputHeightSmall};\n --padding-left: #{space(\"large\")};\n --padding-right: #{space(\"large\")};\n --font-size: var(--stzh-font-milli-font-size);\n --line-height: var(--stzh-font-milli-text-line-height);\n --icon-size: #{iconSize(\"medium\")};\n}\n\n@mixin button--size-tiny() {\n --height: #{$formInputHeightTiny};\n --padding-left: #{space(\"medium\")};\n --padding-right: #{space(\"medium\")};\n --padding-top: calc(#{space(\"xxsmall\")} - var(--border-width));\n --padding-bottom: calc(#{space(\"xxsmall\")} - var(--border-width));\n --font-size: var(--stzh-font-milli-font-size);\n --line-height: var(--stzh-font-milli-text-line-height);\n --icon-size: #{iconSize(\"medium\")};\n}\n\n:host {\n @include button--size-default;\n --color: var(--stzh-button-color, #{$colorWhite});\n --background-color: var(--stzh-button-background-color, #{$colorPrimary70});\n --border-width: 0px;\n --border-color: transparent;\n --border-radius: 0px;\n --icon-text-margin: #{space(\"xsmall\")};\n --icon-toggle-color: currentColor;\n --badge-icon-text-margin: calc(var(--icon-text-margin) + #{space(\"xxsmall\")});\n --white-space: var(--stzh-button-white-space, normal);\n --box-shadow: none;\n --cursor: pointer;\n\n --hover-color: var(--stzh-button-hover-color, #{$colorWhite});\n --hover-background-color: var(\n --stzh-button-hover-background-color,\n #{$colorSecondary60}\n );\n --hover-border-color: transparent;\n\n display: inline-flex;\n width: auto;\n min-width: var(--height);\n min-height: var(--height);\n pointer-events: var(--stzh-button-pointer-events, auto);\n\n @media print {\n -webkit-print-color-adjust: exact;\n print-color-adjust: exact;\n }\n\n &[icon-only]:not([icon-only=\"false\"]) {\n --padding-top: 0;\n --padding-bottom: 0;\n --padding-left: 0;\n --padding-right: 0;\n\n width: var(--height);\n height: var(--height);\n }\n\n &[fullwidth]:not([fullwidth=\"false\"]) {\n width: 100%;\n display: grid;\n flex: 0 0 100%;\n }\n\n &[rounded]:not([rounded=\"false\"]) {\n --border-radius: var(--height);\n }\n\n &[no-padding-left]:not([no-padding-left=\"false\"]) {\n --padding-left: 0px;\n }\n\n &[no-padding-right]:not([no-padding-right=\"false\"]) {\n --padding-right: 0px;\n }\n\n &[variant=\"secondary\"] {\n --color: var(--stzh-button-secondary-color, #{$colorPrimary70});\n --background-color: var(\n --stzh-button-secondary-background-color,\n #{$colorSecondary30}\n );\n\n --hover-color: var(--stzh-button-secondary-hover-color, #{$colorPrimary80});\n --hover-background-color: var(\n --stzh-button-secondary-hover-background-color,\n #{$colorSecondary40}\n );\n }\n\n &[variant=\"tertiary\"] {\n --color: var(--stzh-button-tertiary-color, #{$colorPrimary70});\n --background-color: var(\n --stzh-button-tertiary-background-color,\n transparent\n );\n\n --hover-color: var(--stzh-button-tertiary-hover-color, #{$colorPrimary80});\n --hover-background-color: var(\n --stzh-button-tertiary-hover-background-color,\n #{$colorSecondary20}\n );\n }\n\n &[variant=\"tertiary-plain\"] {\n --color: var(--stzh-button-tertiary-color, #{$colorPrimary70});\n --background-color: transparent;\n\n --hover-color: var(--stzh-button-tertiary-hover-color, #{$colorPrimary80});\n --hover-background-color: var(--background-color);\n }\n\n &[active]:not([active=\"false\"]) {\n --color: var(--stzh-button-active-color, #{$colorWhite});\n --background-color: var(\n --stzh-button-active-background-color,\n #{$colorSecondary60}\n );\n }\n\n &[active][variant=\"secondary\"]:not([active=\"false\"]) {\n --color: var(--stzh-button-secondary-hover-color, #{$colorPrimary80});\n --background-color: var(\n --stzh-button-secondary-hover-background-color,\n #{$colorSecondary40}\n );\n }\n\n &[active][variant=\"tertiary\"]:not([active=\"false\"]) {\n --color: var(--stzh-button-tertiary-hover-color, #{$colorPrimary80});\n --background-color: var(\n --stzh-button-tertiary-hover-background-color,\n #{$colorSecondary20}\n );\n }\n\n &[active][variant=\"tertiary-plain\"]:not([active=\"false\"]) {\n --color: var(--stzh-button-tertiary-hover-color, #{$colorPrimary80});\n --background-color: transparent;\n }\n\n &[disabled]:not([disabled=\"false\"]),\n &[a11y-disabled]:not([a11y-disabled=\"false\"]) {\n --color: var(--stzh-button-disabled-color, #{$colorWhite});\n --background-color: var(\n --stzh-button-disabled-background-color,\n #{$colorGrey70}\n );\n\n --hover-color: var(--color);\n --hover-background-color: var(--background-color);\n }\n\n &[disabled]:not([disabled=\"false\"])[variant=\"secondary\"],\n &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"secondary\"] {\n --color: var(--stzh-button-secondary-disabled-color, #{$colorGrey80});\n --background-color: var(\n --stzh-button-secondary-disabled-background-color,\n #{$colorGrey20}\n );\n }\n\n &[disabled]:not([disabled=\"false\"])[variant=\"input\"],\n &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"input\"] {\n --color: var(--stzh-button-input-disabled-color, #{$colorGrey80});\n --background-color: var(\n --stzh-button-input-disabled-background-color,\n #{$colorGrey20}\n );\n }\n\n &[disabled]:not([disabled=\"false\"])[variant=\"tertiary\"],\n &[disabled]:not([disabled=\"false\"])[variant=\"tertiary-plain\"],\n &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"tertiary\"],\n &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"tertiary-plain\"] {\n --color: var(--stzh-button-tertiary-disabled-color, #{$colorGrey70});\n --background-color: var(\n --stzh-button-tertiary-disabled-background-color,\n transparent\n );\n }\n}\n\n:host(:where([size=\"small\"])) {\n @include button--size-small;\n}\n\n:host(:where([size=\"tiny\"])) {\n @include button--size-tiny;\n}\n\n@each $breakpoint, $size in $breakpoints {\n @include mq($from: $breakpoint) {\n :host(:where([size-#{$breakpoint}=\"default\"])) {\n @include button--size-default;\n }\n\n :host(:where([size-#{$breakpoint}=\"small\"])) {\n @include button--size-small;\n }\n\n :host(:where([size-#{$breakpoint}=\"tiny\"])) {\n @include button--size-tiny;\n }\n }\n}\n\n@keyframes stzh-button-effect-cta {\n 0%,\n 20%,\n 50%,\n 80%,\n 100% {\n transform: translateX(0);\n }\n\n 40% {\n transform: translateX(-8px);\n }\n\n 60% {\n transform: translateX(-4px);\n }\n}\n\n.stzh-button {\n @include font(\"heavy\");\n font-size: var(--font-size);\n line-height: var(--line-height);\n letter-spacing: var(--letter-spacing);\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-top: var(--padding-top);\n padding-bottom: var(--padding-bottom);\n padding-left: var(--padding-left);\n padding-right: var(--padding-right);\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: var(--cursor);\n text-decoration-line: none;\n width: 100%;\n min-height: 100%;\n margin: 0;\n border-radius: var(--border-radius);\n text-align: left;\n box-shadow: var(--box-shadow);\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 &__toggle-icon-wrapper {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n }\n\n &__icon-wrapper {\n --stzh-icon-size: var(--icon-size);\n width: auto;\n height: 1em;\n }\n\n &__toggle-icon-wrapper {\n width: var(--icon-size);\n height: var(--icon-size);\n }\n\n &__toggle-icon {\n position: relative;\n display: block;\n width: var(--icon-toggle-size);\n height: var(--icon-toggle-size);\n\n &::before,\n &::after {\n position: absolute;\n top: 50%;\n left: 50%;\n content: \"\";\n display: block;\n width: var(--icon-toggle-size);\n height: 2px;\n transition-property: transform, background-color;\n transition-duration: 500ms;\n transform-origin: top left;\n background-color: var(--icon-toggle-color);\n\n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n }\n\n &::before {\n transform: rotate(180deg) translate(-50%, -50%);\n }\n\n &::after {\n transform: rotate(90deg) translate(-50%, -50%);\n }\n }\n\n &__text {\n @include wordWrap;\n white-space: var(--white-space);\n text-align: center;\n }\n\n &--not-hyphenated &__text {\n hyphens: none;\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: $colorSecondary60;\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: $colorSecondary60;\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 / Is expanded /\n\n &--is-expanded &__toggle-icon {\n &::before,\n &::after {\n transform: rotate(0) translate(-50%, -50%);\n }\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\n &__icon-wrapper:not(:empty)\n + &__text:not(:empty),\n &--badge-position-icon#{&}--has-icon#{&}--has-badge\n &__text:not(:empty)\n + &__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 &__text {\n @include visuallyhidden;\n }\n\n / Effect /\n\n &--effect-cta:hover &__icon-wrapper {\n animation: 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 / Default /\n\n &--default.has-focus {\n outline: var(--stzh-flyingfocus-color) solid 3px;\n }\n}\n","import { Component, Element, Event, EventEmitter, Fragment, h, Host, Listen, Prop } from \"@stencil/core\";\n\nimport {\n StzhBadgeType,\n StzhButtonBlurEvent,\n StzhButtonChangeEvent,\n StzhButtonClickEvent,\n StzhButtonFocusEvent,\n StzhButtonSize,\n StzhButtonVariant,\n StzhLocaleComponent,\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/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 /* Disable hyphenation for text inside button /\n @Prop() noHyphenation: boolean = false;\n\n /* Badge type /\n @Prop({ reflect: true }) badgeType: StzhBadgeType = \"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 /* Size variant /\n @Prop({ reflect: true }) size: StzhButtonSize = \"default\";\n\n /* Size variant (above small breakpoint) /\n @Prop({ reflect: true }) sizeSmall: StzhButtonSize;\n\n /* Size variant (above medium breakpoint) /\n @Prop({ reflect: true }) sizeMedium: StzhButtonSize;\n\n /* Size variant (above large breakpoint) /\n @Prop({ reflect: true }) sizeLarge: StzhButtonSize;\n\n /* Size variant (above ultra breakpoint) /\n @Prop({ reflect: true }) sizeUltra: StzhButtonSize;\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: StzhButtonVariant = \"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 /* Default checked (used by reset, if type is radio) /\n @Prop({ mutable: true }) defaultChecked: boolean;\n\n /* The name of the input element (if type is button or radio) /\n @Prop({ reflect: true }) name: string = \"\";\n\n /* The value of the input element (if type is button or 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 to disable the button on click or not /\n @Prop() disableOnClick: 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 /* Whether padding left should be removed /\n @Prop({ reflect: true }) noPaddingLeft: boolean = false;\n\n /* Whether padding right should be removed /\n @Prop({ reflect: true }) noPaddingRight: boolean = false;\n\n /* Access key of button (usually a number e.g. 1) /\n @Prop() buttonAccesskey: string;\n\n /* ID of button element /\n @Prop() buttonId: string;\n\n /* Whether to show toggle icon (show minus when a11yExpanded=true, otherwise plus) /\n @Prop({ reflect: true }) showToggleIcon: boolean = false;\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 /* Aria current of link/button /\n @Prop({ attribute: \"a11y-current\" }) a11yCurrent: 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 @Listen(\"reset\", { target: \"document\" })\n resetListener(event: Event) {\n if ((event.target as HTMLElement).contains(this.element)) {\n requestAnimationFrame(() => {\n this.handleReset();\n });\n }\n }\n\n /* Focus event /\n @Event() stzhFocus: EventEmitter<StzhButtonFocusEvent>;\n\n /* Blur event /\n @Event() stzhBlur: EventEmitter<StzhButtonBlurEvent>;\n\n /* Change event (only called if type is radio) /\n @Event() stzhChange: EventEmitter<StzhButtonChangeEvent>;\n\n /* Click event */\n @Event() stzhClick: EventEmitter<StzhButtonClickEvent>;\n\n private button: HTMLButtonElement \| HTMLAnchorElement \| HTMLLabelElement;\n private input: HTMLInputElement;\n private text: HTMLDivElement;\n private focusedByInput: boolean = false;\n\n private handleReset = async () => {\n this.checked = this.defaultChecked;\n };\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.button.focus();\n }\n\n this.focusedByInput = false;\n };\n\n private onFocus = (event: FocusEvent) => {\n this.focusedByInput = true;\n\n const focusEvent = new FocusEvent(\"focus\", {\n view: window,\n bubbles: false,\n cancelable: false,\n });\n\n this.element.dispatchEvent(focusEvent);\n this.stzhFocus.emit({\n component: \"stzh-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 } else {\n if (this.disableOnClick) {\n this.disabled = true;\n }\n this.stzhClick.emit({\n component: \"stzh-button\",\n originalEvent: event,\n href: this.href,\n });\n }\n };\n\n private renderIcon(iconUsed: boolean): HTMLInputElement {\n return (\n <div class=\"stzh-button__icon-wrapper\">\n {this.icon && <stzh-icon class=\"stzh-button__icon\" name={this.icon}></stzh-icon>}\n {!this.icon && this.showToggleIcon && (\n <div class=\"stzh-button__toggle-icon-wrapper\">\n <div class=\"stzh-button__toggle-icon\"></div>\n </div>\n )}\n {!this.icon && !this.showToggleIcon && <slot name=\"icon\"></slot>}\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\" ref={el => (this.text = el as HTMLDivElement)}>\n {this.rel && this.rel.includes(\"external\") && (\n <div class=\"stzh-button__vhidden\">{this.localization.$globals.externalLinkLabel}</div>\n )}\n {this.download && <div class=\"stzh-button__vhidden\">{this.localization.$globals.downloadLinkLabel}</div>}\n {this.label ? this.label : <slot></slot>}\n </div>\n );\n }\n\n private renderInner(iconUsed: boolean): DocumentFragment {\n return (\n <Fragment>\n <div class=\"stzh-button__inner\">\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 class=\"stzh-button__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n )}\n </Fragment>\n );\n }\n\n async componentWillLoad() {\n this.defaultChecked = typeof this.defaultChecked === \"boolean\" ? this.defaultChecked : this.checked;\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.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-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--is-expanded\": this.a11yExpanded,\n \"stzh-button--not-hyphenated\": this.noHyphenation,\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--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\" ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n aria-expanded={typeof this.a11yExpanded !== \"undefined\" ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n aria-controls={this.a11yControls \|\| null}\n aria-current={this.a11yCurrent \|\| null}\n id={this.buttonId}\n accessKey={this.buttonAccesskey}\n tabindex={this.a11yTabindex}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n onClick={this.onClick}\n >\n {this.renderInner(iconUsed)}\n </a>\n ) : this.type === \"radio\" ? (\n <label ref={el => (this.button = el as HTMLLabelElement)} class={classes} onClick={this.onClick}>\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 defaultChecked={this.defaultChecked}\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\" ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n aria-expanded={typeof this.a11yExpanded !== \"undefined\" ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n aria-controls={this.a11yControls \|\| null}\n aria-current={this.a11yCurrent \|\| null}\n id={this.buttonId}\n accessKey={this.buttonAccesskey}\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 name={this.name}\n value={this.value}\n disabled={this.disabled}\n aria-label={this.a11yLabel \|\| null}\n aria-describedby={this.a11yDescribedby \|\| null}\n aria-disabled={typeof this.a11yDisabled !== \"undefined\" ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n aria-expanded={typeof this.a11yExpanded !== \"undefined\" ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n aria-controls={this.a11yControls \|\| null}\n aria-current={this.a11yCurrent \|\| null}\n id={this.buttonId}\n accessKey={this.buttonAccesskey}\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"],"version":3}
1	+ {"file":"p-BtU8igAM.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-button/stzh-button.scss?tag=stzh-button&encapsulation=scoped","src/components/stzh-button/stzh-button.tsx"],"sourcesContent":["/*\n @prop --height: Height of button\n * @prop --padding-top: Padding top of button\n * @prop --padding-bottom: Padding bottom of button\n * @prop --padding-left: Padding left of button\n * @prop --padding-right: Padding right of button\n * @prop --border-radius: Border radius of button\n * @prop --color: Color of button\n * @prop --background-color: Background color of button\n * @prop --border-color: Border color of button\n * @prop --icon-size: Size of icon next to button\n * @prop --hover-color: Hover color of button\n * @prop --hover-background-color: Hover background color of button\n * @prop --hover-border-color: Hover border color of button\n * @prop --white-space: White space behaviour of button\n \n @prop --stzh-form-input-height: Global: Height of fields & buttons\n * @prop --stzh-form-input-small-height: Global: Height of fields & buttons when small variant is used\n * @prop --stzh-form-input-tiny-height: Global: Height of fields & buttons when tiny variant is used\n /\n\n@mixin button--size-default() {\n --height: #{$formInputHeight};\n --padding-top: calc(#{space(\"xsmall\")} - var(--border-width));\n --padding-bottom: calc(#{space(\"xsmall\")} - var(--border-width));\n --padding-left: #{space(\"xlarge\")};\n --padding-right: #{space(\"xlarge\")};\n --font-size: var(--stzh-font-centi-font-size);\n --line-height: var(--stzh-font-centi-text-line-height);\n --letter-spacing: normal;\n --icon-size: #{iconSize(\"medium\")};\n --icon-toggle-size: 14.5px;\n\n &:where([icon-only]:not([icon-only=\"false\"])) {\n --icon-size: #{iconSize(\"large\")};\n }\n}\n\n@mixin button--size-small() {\n --height: #{$formInputHeightSmall};\n --padding-left: #{space(\"large\")};\n --padding-right: #{space(\"large\")};\n --font-size: var(--stzh-font-milli-font-size);\n --line-height: var(--stzh-font-milli-text-line-height);\n --icon-size: #{iconSize(\"medium\")};\n}\n\n@mixin button--size-tiny() {\n --height: #{$formInputHeightTiny};\n --padding-left: #{space(\"medium\")};\n --padding-right: #{space(\"medium\")};\n --padding-top: calc(#{space(\"xxsmall\")} - var(--border-width));\n --padding-bottom: calc(#{space(\"xxsmall\")} - var(--border-width));\n --font-size: var(--stzh-font-milli-font-size);\n --line-height: var(--stzh-font-milli-text-line-height);\n --icon-size: #{iconSize(\"medium\")};\n}\n\n:host {\n @include button--size-default;\n --color: var(--stzh-button-color, #{$colorWhite});\n --background-color: var(--stzh-button-background-color, #{$colorPrimary70});\n --border-width: 0px;\n --border-color: transparent;\n --border-radius: 0px;\n --icon-text-margin: #{space(\"xsmall\")};\n --icon-toggle-color: currentColor;\n --badge-icon-text-margin: calc(var(--icon-text-margin) + #{space(\"xxsmall\")});\n --white-space: var(--stzh-button-white-space, normal);\n --box-shadow: none;\n --cursor: pointer;\n\n --hover-color: var(--stzh-button-hover-color, #{$colorWhite});\n --hover-background-color: var(\n --stzh-button-hover-background-color,\n #{$colorSecondary60}\n );\n --hover-border-color: transparent;\n\n display: inline-flex;\n width: auto;\n min-width: var(--height);\n min-height: var(--height);\n pointer-events: var(--stzh-button-pointer-events, auto);\n\n @media print {\n -webkit-print-color-adjust: exact;\n print-color-adjust: exact;\n }\n\n &[icon-only]:not([icon-only=\"false\"]) {\n --padding-top: 0;\n --padding-bottom: 0;\n --padding-left: 0;\n --padding-right: 0;\n\n width: var(--height);\n height: var(--height);\n }\n\n &[fullwidth]:not([fullwidth=\"false\"]) {\n width: 100%;\n display: grid;\n flex: 0 0 100%;\n }\n\n &[rounded]:not([rounded=\"false\"]) {\n --border-radius: var(--height);\n }\n\n &[no-padding-left]:not([no-padding-left=\"false\"]) {\n --padding-left: 0px;\n }\n\n &[no-padding-right]:not([no-padding-right=\"false\"]) {\n --padding-right: 0px;\n }\n\n &[variant=\"secondary\"] {\n --color: var(--stzh-button-secondary-color, #{$colorPrimary70});\n --background-color: var(\n --stzh-button-secondary-background-color,\n #{$colorSecondary30}\n );\n\n --hover-color: var(--stzh-button-secondary-hover-color, #{$colorPrimary80});\n --hover-background-color: var(\n --stzh-button-secondary-hover-background-color,\n #{$colorSecondary40}\n );\n }\n\n &[variant=\"tertiary\"] {\n --color: var(--stzh-button-tertiary-color, #{$colorPrimary70});\n --background-color: var(\n --stzh-button-tertiary-background-color,\n transparent\n );\n\n --hover-color: var(--stzh-button-tertiary-hover-color, #{$colorPrimary80});\n --hover-background-color: var(\n --stzh-button-tertiary-hover-background-color,\n #{$colorSecondary20}\n );\n }\n\n &[variant=\"tertiary-plain\"] {\n --color: var(--stzh-button-tertiary-color, #{$colorPrimary70});\n --background-color: transparent;\n\n --hover-color: var(--stzh-button-tertiary-hover-color, #{$colorPrimary80});\n --hover-background-color: var(--background-color);\n }\n\n &[active]:not([active=\"false\"]) {\n --color: var(--stzh-button-active-color, #{$colorWhite});\n --background-color: var(\n --stzh-button-active-background-color,\n #{$colorSecondary60}\n );\n }\n\n &[active][variant=\"secondary\"]:not([active=\"false\"]) {\n --color: var(--stzh-button-secondary-hover-color, #{$colorPrimary80});\n --background-color: var(\n --stzh-button-secondary-hover-background-color,\n #{$colorSecondary40}\n );\n }\n\n &[active][variant=\"tertiary\"]:not([active=\"false\"]) {\n --color: var(--stzh-button-tertiary-hover-color, #{$colorPrimary80});\n --background-color: var(\n --stzh-button-tertiary-hover-background-color,\n #{$colorSecondary20}\n );\n }\n\n &[active][variant=\"tertiary-plain\"]:not([active=\"false\"]) {\n --color: var(--stzh-button-tertiary-hover-color, #{$colorPrimary80});\n --background-color: transparent;\n }\n\n &[disabled]:not([disabled=\"false\"]),\n &[a11y-disabled]:not([a11y-disabled=\"false\"]) {\n --color: var(--stzh-button-disabled-color, #{$colorWhite});\n --background-color: var(\n --stzh-button-disabled-background-color,\n #{$colorGrey70}\n );\n\n --hover-color: var(--color);\n --hover-background-color: var(--background-color);\n }\n\n &[disabled]:not([disabled=\"false\"])[variant=\"secondary\"],\n &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"secondary\"] {\n --color: var(--stzh-button-secondary-disabled-color, #{$colorGrey80});\n --background-color: var(\n --stzh-button-secondary-disabled-background-color,\n #{$colorGrey20}\n );\n }\n\n &[disabled]:not([disabled=\"false\"])[variant=\"input\"],\n &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"input\"] {\n --color: var(--stzh-button-input-disabled-color, #{$colorGrey80});\n --background-color: var(\n --stzh-button-input-disabled-background-color,\n #{$colorGrey20}\n );\n }\n\n &[disabled]:not([disabled=\"false\"])[variant=\"tertiary\"],\n &[disabled]:not([disabled=\"false\"])[variant=\"tertiary-plain\"],\n &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"tertiary\"],\n &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"tertiary-plain\"] {\n --color: var(--stzh-button-tertiary-disabled-color, #{$colorGrey70});\n --background-color: var(\n --stzh-button-tertiary-disabled-background-color,\n transparent\n );\n }\n}\n\n:host(:where([size=\"small\"])) {\n @include button--size-small;\n}\n\n:host(:where([size=\"tiny\"])) {\n @include button--size-tiny;\n}\n\n@each $breakpoint, $size in $breakpoints {\n @include mq($from: $breakpoint) {\n :host(:where([size-#{$breakpoint}=\"default\"])) {\n @include button--size-default;\n }\n\n :host(:where([size-#{$breakpoint}=\"small\"])) {\n @include button--size-small;\n }\n\n :host(:where([size-#{$breakpoint}=\"tiny\"])) {\n @include button--size-tiny;\n }\n }\n}\n\n@keyframes stzh-button-effect-cta {\n 0%,\n 20%,\n 50%,\n 80%,\n 100% {\n transform: translateX(0);\n }\n\n 40% {\n transform: translateX(-8px);\n }\n\n 60% {\n transform: translateX(-4px);\n }\n}\n\n.stzh-button {\n @include font(\"heavy\");\n font-size: var(--font-size);\n line-height: var(--line-height);\n letter-spacing: var(--letter-spacing);\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-top: var(--padding-top);\n padding-bottom: var(--padding-bottom);\n padding-left: var(--padding-left);\n padding-right: var(--padding-right);\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: var(--cursor);\n text-decoration-line: none;\n width: 100%;\n min-height: 100%;\n margin: 0;\n border-radius: var(--border-radius);\n text-align: left;\n box-shadow: var(--box-shadow);\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 &__toggle-icon-wrapper {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n }\n\n &__icon-wrapper {\n --stzh-icon-size: var(--icon-size);\n width: auto;\n height: 1em;\n }\n\n &__toggle-icon-wrapper {\n width: var(--icon-size);\n height: var(--icon-size);\n }\n\n &__toggle-icon {\n position: relative;\n display: block;\n width: var(--icon-toggle-size);\n height: var(--icon-toggle-size);\n\n &::before,\n &::after {\n position: absolute;\n top: 50%;\n left: 50%;\n content: \"\";\n display: block;\n width: var(--icon-toggle-size);\n height: 2px;\n transition-property: transform, background-color;\n transition-duration: 500ms;\n transform-origin: top left;\n background-color: var(--icon-toggle-color);\n\n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n }\n\n &::before {\n transform: rotate(180deg) translate(-50%, -50%);\n }\n\n &::after {\n transform: rotate(90deg) translate(-50%, -50%);\n }\n }\n\n &__text {\n @include wordWrap;\n white-space: var(--white-space);\n text-align: center;\n }\n\n &--not-hyphenated &__text {\n hyphens: none;\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: $colorSecondary60;\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: $colorSecondary60;\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 / Is expanded /\n\n &--is-expanded &__toggle-icon {\n &::before,\n &::after {\n transform: rotate(0) translate(-50%, -50%);\n }\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\n &__icon-wrapper:not(:empty)\n + &__text:not(:empty),\n &--badge-position-icon#{&}--has-icon#{&}--has-badge\n &__text:not(:empty)\n + &__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 &__text {\n @include visuallyhidden;\n }\n\n / Effect /\n\n &--effect-cta:hover &__icon-wrapper {\n animation: 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 / Default /\n\n &--default.has-focus {\n outline: var(--stzh-flyingfocus-color) solid 3px;\n }\n}\n","import { Component, Element, Event, EventEmitter, Fragment, h, Host, Listen, Prop } from \"@stencil/core\";\n\nimport {\n StzhBadgeType,\n StzhButtonBlurEvent,\n StzhButtonChangeEvent,\n StzhButtonClickEvent,\n StzhButtonFocusEvent,\n StzhButtonSize,\n StzhButtonVariant,\n StzhLocaleComponent,\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/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 /* Disable hyphenation for text inside button /\n @Prop() noHyphenation: boolean = false;\n\n /* Badge type /\n @Prop({ reflect: true }) badgeType: StzhBadgeType = \"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 /* Size variant /\n @Prop({ reflect: true }) size: StzhButtonSize = \"default\";\n\n /* Size variant (above small breakpoint) /\n @Prop({ reflect: true }) sizeSmall: StzhButtonSize;\n\n /* Size variant (above medium breakpoint) /\n @Prop({ reflect: true }) sizeMedium: StzhButtonSize;\n\n /* Size variant (above large breakpoint) /\n @Prop({ reflect: true }) sizeLarge: StzhButtonSize;\n\n /* Size variant (above ultra breakpoint) /\n @Prop({ reflect: true }) sizeUltra: StzhButtonSize;\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: StzhButtonVariant = \"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 /* Default checked (used by reset, if type is radio) /\n @Prop({ mutable: true }) defaultChecked: boolean;\n\n /* The name of the input element (if type is button or radio) /\n @Prop({ reflect: true }) name: string = \"\";\n\n /* The value of the input element (if type is button or 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 to disable the button on click or not /\n @Prop() disableOnClick: 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 /* Whether padding left should be removed /\n @Prop({ reflect: true }) noPaddingLeft: boolean = false;\n\n /* Whether padding right should be removed /\n @Prop({ reflect: true }) noPaddingRight: boolean = false;\n\n /* Access key of button (usually a number e.g. 1) /\n @Prop() buttonAccesskey: string;\n\n /* ID of button element /\n @Prop() buttonId: string;\n\n /* Whether to show toggle icon (show minus when a11yExpanded=true, otherwise plus) /\n @Prop({ reflect: true }) showToggleIcon: boolean = false;\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 /* Aria current of link/button /\n @Prop({ attribute: \"a11y-current\" }) a11yCurrent: 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 @Listen(\"reset\", { target: \"document\" })\n resetListener(event: Event) {\n if ((event.target as HTMLElement).contains(this.element)) {\n requestAnimationFrame(() => {\n this.handleReset();\n });\n }\n }\n\n /* Focus event /\n @Event() stzhFocus: EventEmitter<StzhButtonFocusEvent>;\n\n /* Blur event /\n @Event() stzhBlur: EventEmitter<StzhButtonBlurEvent>;\n\n /* Change event (only called if type is radio) /\n @Event() stzhChange: EventEmitter<StzhButtonChangeEvent>;\n\n /* Click event */\n @Event() stzhClick: EventEmitter<StzhButtonClickEvent>;\n\n private button: HTMLButtonElement \| HTMLAnchorElement \| HTMLLabelElement;\n private input: HTMLInputElement;\n private text: HTMLDivElement;\n private focusedByInput: boolean = false;\n\n private handleReset = async () => {\n this.checked = this.defaultChecked;\n };\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.button.focus();\n }\n\n this.focusedByInput = false;\n };\n\n private onFocus = (event: FocusEvent) => {\n this.focusedByInput = true;\n\n const focusEvent = new FocusEvent(\"focus\", {\n view: window,\n bubbles: false,\n cancelable: false,\n });\n\n this.element.dispatchEvent(focusEvent);\n this.stzhFocus.emit({\n component: \"stzh-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 } else {\n if (this.disableOnClick) {\n this.disabled = true;\n }\n this.stzhClick.emit({\n component: \"stzh-button\",\n originalEvent: event,\n href: this.href,\n });\n }\n };\n\n private renderIcon(iconUsed: boolean): HTMLInputElement {\n return (\n <div class=\"stzh-button__icon-wrapper\">\n {this.icon && <stzh-icon class=\"stzh-button__icon\" name={this.icon}></stzh-icon>}\n {!this.icon && this.showToggleIcon && (\n <div class=\"stzh-button__toggle-icon-wrapper\">\n <div class=\"stzh-button__toggle-icon\"></div>\n </div>\n )}\n {!this.icon && !this.showToggleIcon && <slot name=\"icon\"></slot>}\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\" ref={el => (this.text = el as HTMLDivElement)}>\n {this.rel && this.rel.includes(\"external\") && (\n <div class=\"stzh-button__vhidden\">{this.localization.$globals.externalLinkLabel}</div>\n )}\n {this.download && <div class=\"stzh-button__vhidden\">{this.localization.$globals.downloadLinkLabel}</div>}\n {this.label ? this.label : <slot></slot>}\n </div>\n );\n }\n\n private renderInner(iconUsed: boolean): DocumentFragment {\n return (\n <Fragment>\n <div class=\"stzh-button__inner\">\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 class=\"stzh-button__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n )}\n </Fragment>\n );\n }\n\n async componentWillLoad() {\n this.defaultChecked = typeof this.defaultChecked === \"boolean\" ? this.defaultChecked : this.checked;\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.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-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--is-expanded\": this.a11yExpanded,\n \"stzh-button--not-hyphenated\": this.noHyphenation,\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--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\" ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n aria-expanded={typeof this.a11yExpanded !== \"undefined\" ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n aria-controls={this.a11yControls \|\| null}\n aria-current={this.a11yCurrent \|\| null}\n id={this.buttonId}\n accessKey={this.buttonAccesskey}\n tabindex={this.a11yTabindex}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n onClick={this.onClick}\n >\n {this.renderInner(iconUsed)}\n </a>\n ) : this.type === \"radio\" ? (\n <label ref={el => (this.button = el as HTMLLabelElement)} class={classes} onClick={this.onClick}>\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 defaultChecked={this.defaultChecked}\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\" ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n aria-expanded={typeof this.a11yExpanded !== \"undefined\" ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n aria-controls={this.a11yControls \|\| null}\n aria-current={this.a11yCurrent \|\| null}\n id={this.buttonId}\n accessKey={this.buttonAccesskey}\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 name={this.name}\n value={this.value}\n disabled={this.disabled}\n aria-label={this.a11yLabel \|\| null}\n aria-describedby={this.a11yDescribedby \|\| null}\n aria-disabled={typeof this.a11yDisabled !== \"undefined\" ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n aria-expanded={typeof this.a11yExpanded !== \"undefined\" ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n aria-controls={this.a11yControls \|\| null}\n aria-current={this.a11yCurrent \|\| null}\n id={this.buttonId}\n accessKey={this.buttonAccesskey}\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"],"version":3}

package/dist/components/{p-BTdpB4Zw.js → p-Bu43XylS.js} RENAMED Viewed

@@ -1,13 +1,13 @@
-import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-NuLYh9v8.js';
+import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-DAS4ghWk.js';
 import { m as media, a as addMediaChangeListener, r as removeMediaChangeListener } from './p-CUGRmgip.js';
-import { d as defineCustomElement$8 } from './p-Db3dTAjX.js';
-import { d as defineCustomElement$7 } from './p-By320y5w.js';
-import { d as defineCustomElement$6 } from './p-Cz5bXTUE.js';
-import { d as defineCustomElement$5 } from './p-MTG7y9yt.js';
-import { d as defineCustomElement$4 } from './p-CRHNeJCO.js';
-import { d as defineCustomElement$3 } from './p-B_Cs1tAp.js';
-import { d as defineCustomElement$2 } from './p-BV3gXOYs.js';
-import { d as defineCustomElement$1 } from './p-B03GEdxi.js';
+import { d as defineCustomElement$8 } from './p-Cz-ha88J.js';
+import { d as defineCustomElement$7 } from './p-BtU8igAM.js';
+import { d as defineCustomElement$6 } from './p-BU4OH8Cm.js';
+import { d as defineCustomElement$5 } from './p-BaT57zfB.js';
+import { d as defineCustomElement$4 } from './p-BRbEuDtS.js';
+import { d as defineCustomElement$3 } from './p-BQMsQk8o.js';
+import { d as defineCustomElement$2 } from './p-BN-54ren.js';
+import { d as defineCustomElement$1 } from './p-C6jXw99A.js';
 const stzhActionsetCss = () => `.sc-stzh-actionset-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-actionset-h,[stzh-hidden].sc-stzh-actionset-h{display:none}.sc-stzh-actionset-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-actionset-h *.sc-stzh-actionset,.sc-stzh-actionset-h *.sc-stzh-actionset::before,.sc-stzh-actionset-h *.sc-stzh-actionset::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-actionset-h .has-focus.sc-stzh-actionset{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-actionset-h .stzh-fylingfocus-focused.sc-stzh-actionset{outline-style:none !important}.sc-stzh-actionset-h .stzh-fylingfocus-focused.sc-stzh-actionset::-moz-focus-inner{border:0 !important}.stzh-actionset__actions.sc-stzh-actionset{display:flex;align-items:center}.stzh-actionset__actions-wrapper.sc-stzh-actionset{position:relative;display:flex;flex-wrap:wrap;overflow:hidden}.stzh-actionset__action.sc-stzh-actionset:not(:last-child){margin-right:var(--stzh-space-xsmall)}.stzh-actionset__action-popover-wrapper.sc-stzh-actionset{opacity:0}.stzh-actionset--has-collapsed-items.sc-stzh-actionset .stzh-actionset__action-popover-wrapper.sc-stzh-actionset{opacity:1}.stzh-actionset--has-collapsed-items.sc-stzh-actionset .stzh-actionset__action-popover.sc-stzh-actionset{--width:auto}@media screen and (min-width: 900px){.stzh-actionset--overflow.sc-stzh-actionset .stzh-actionset__action.sc-stzh-actionset{--white-space:nowrap}}@media screen and (max-width: 599px){.stzh-actionset--stack.sc-stzh-actionset .stzh-actionset__actions.sc-stzh-actionset{flex-direction:column;align-items:stretch}}@media screen and (max-width: 599px){.stzh-actionset--stack.sc-stzh-actionset .stzh-actionset__actions-wrapper.sc-stzh-actionset{flex-direction:column;align-items:stretch}}@media screen and (min-width: 600px){.stzh-actionset--stack.sc-stzh-actionset .stzh-actionset__action.sc-stzh-actionset{--white-space:nowrap}}@media screen and (max-width: 599px){.stzh-actionset--stack.sc-stzh-actionset .stzh-actionset__action.sc-stzh-actionset:not(:last-child){margin-bottom:var(--stzh-space-xsmall);margin-right:0}}@media screen and (max-width: 599px){.stzh-actionset--stack.sc-stzh-actionset .stzh-actionset__action-popover-wrapper.sc-stzh-actionset{margin-top:var(--stzh-space-xsmall)}}@media screen and (max-width: 599px){.stzh-actionset--stack.sc-stzh-actionset:not(.stzh-actionset--has-collapsed-items) .stzh-actionset__action-popover-wrapper.sc-stzh-actionset{display:none}}`;
@@ -237,6 +237,6 @@ function defineCustomElement() {
 }
 export { StzhActionset as S, defineCustomElement as d };
-//# sourceMappingURL=p-BTdpB4Zw.js.map
+//# sourceMappingURL=p-Bu43XylS.js.map
-//# sourceMappingURL=p-BTdpB4Zw.js.map
+//# sourceMappingURL=p-Bu43XylS.js.map

package/dist/components/{p-BTdpB4Zw.js.map → p-Bu43XylS.js.map} RENAMED Viewed

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

package/dist/components/{p-BmcTBZ4w.js → p-C-L1Esh9.js} RENAMED Viewed

@@ -1,8 +1,8 @@
-import { p as proxyCustomElement, H, d as createEvent, h, F as Fragment, e as Host, t as transformTag } from './p-NuLYh9v8.js';
-import { d as defineCustomElement$4 } from './p-Db3dTAjX.js';
-import { d as defineCustomElement$3 } from './p-BHivTAEt.js';
-import { d as defineCustomElement$2 } from './p-Cz5bXTUE.js';
-import { d as defineCustomElement$1 } from './p-Dq7hTryw.js';
+import { p as proxyCustomElement, H, d as createEvent, h, F as Fragment, e as Host, t as transformTag } from './p-DAS4ghWk.js';
+import { d as defineCustomElement$4 } from './p-Cz-ha88J.js';
+import { d as defineCustomElement$3 } from './p-CgEDyVYF.js';
+import { d as defineCustomElement$2 } from './p-BU4OH8Cm.js';
+import { d as defineCustomElement$1 } from './p-CVGsVbS2.js';
 const stzhTagCss = () => `.sc-stzh-tag-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-tag-h,[stzh-hidden].sc-stzh-tag-h{display:none}.sc-stzh-tag-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-tag-h *.sc-stzh-tag,.sc-stzh-tag-h *.sc-stzh-tag::before,.sc-stzh-tag-h *.sc-stzh-tag::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-tag-h .has-focus.sc-stzh-tag{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-tag-h .stzh-fylingfocus-focused.sc-stzh-tag{outline-style:none !important}.sc-stzh-tag-h .stzh-fylingfocus-focused.sc-stzh-tag::-moz-focus-inner{border:0 !important}.sc-stzh-tag-h{--color:var(--stzh-tag-color, var(--stzh-color-secondary60));--height:1.5rem;--padding-top:0;--padding-bottom:0;--padding-left:var(--stzh-space-small);--padding-right:var(--stzh-space-small);--background-color:var(--stzh-tag-background-color, var(--stzh-color-grey20));--hover-color:var(--stzh-tag-hover-color, var(--stzh-color-secondary60));--hover-background-color:var(
     --stzh-tag-hover-background-color,
@@ -166,6 +166,6 @@ function defineCustomElement() {
 }
 export { StzhTag as S, defineCustomElement as d };
-//# sourceMappingURL=p-BmcTBZ4w.js.map
+//# sourceMappingURL=p-C-L1Esh9.js.map
-//# sourceMappingURL=p-BmcTBZ4w.js.map
+//# sourceMappingURL=p-C-L1Esh9.js.map

package/dist/components/{p-BmcTBZ4w.js.map → p-C-L1Esh9.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-BmcTBZ4w.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-tag/stzh-tag.scss?tag=stzh-tag&encapsulation=scoped","src/components/stzh-tag/stzh-tag.tsx"],"sourcesContent":[":host {\n --color: var(--stzh-tag-color, #{$colorSecondary60});\n --height: 24px;\n --padding-top: 0;\n --padding-bottom: 0;\n --padding-left: #{space(\"small\")};\n --padding-right: #{space(\"small\")};\n --background-color: var(--stzh-tag-background-color, #{$colorGrey20});\n\n --hover-color: var(--stzh-tag-hover-color, #{$colorSecondary60});\n --hover-background-color: var(\n --stzh-tag-hover-background-color,\n var(--background-color)\n );\n\n display: inline-flex;\n\n &[size=\"large\"] {\n --height: 32px;\n }\n\n &[size=\"default\"][type=\"secondary\"] {\n --background-color: var(\n --stzh-tag-secondary-background-color,\n #{$colorSecondary60}\n );\n }\n\n &[type=\"secondary\"] {\n --color: var(--stzh-tag-secondary-color, #{$colorWhite});\n --background-color: var(\n --stzh-tag-secondary-background-color,\n #{$colorSecondary60}\n );\n --hover-color: var(--stzh-tag-secondary-hover-color, #{$colorWhite});\n --hover-background-color: var(\n --stzh-tag-secondary-hover-background-color,\n var(--background-color)\n );\n }\n\n &[non-interactive]:not([non-interactive=\"false\"]) {\n --hover-color: var(--color);\n --hover-background-color: var(--background-color);\n }\n\n &[disabled]:not([disabled=\"false\"]) {\n --color: var(--stzh-tag-disabled-color, #{$colorGrey70});\n --background-color: var(\n --stzh-tag-disabled-background-color,\n #{$colorGrey20}\n );\n\n --hover-color: var(--color);\n --hover-background-color: var(--background-color);\n }\n}\n\n.stzh-tag {\n position: relative;\n\n &__button {\n @include fontSize(\"nano\");\n font-family: inherit;\n height: var(--height);\n display: flex;\n flex-direction: row;\n align-items: center;\n padding-top: var(--padding-top);\n padding-bottom: var(--padding-bottom);\n padding-left: var(--padding-left);\n padding-right: var(--padding-right);\n color: var(--color);\n appearance: none;\n border: none;\n background-color: var(--background-color);\n transition-duration: $baseTransitionAnimationSpeed;\n transition-property: color, background-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 &__button:hover {\n color: var(--hover-color);\n background-color: var(--hover-background-color);\n }\n\n /* Size /\n\n &--size-large &__button {\n @include font(\"heavy\");\n @include fontSize(\"milli\");\n }\n\n / Disabled /\n\n &--is-disabled &__button {\n cursor: not-allowed;\n }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, Element, Fragment } from \"@stencil/core\";\n\nimport { StzhTagType, StzhTagSize, StzhTagClickEvent, StzhTagFocusEvent, StzhTagBlurEvent } from \"../../index\";\n\n/\n @slot - Slot for label\n /\n@Component({\n tag: \"stzh-tag\",\n styleUrl: \"stzh-tag.scss\",\n scoped: true,\n})\nexport class StzhTag {\n /* Label /\n @Prop() label: string = \"\";\n\n /* `href` if the tag 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 tag is not interactive /\n @Prop({ reflect: true }) nonInteractive: boolean = false;\n\n /* Type /\n @Prop({ reflect: true }) type: StzhTagType = \"default\";\n\n /* Size /\n @Prop({ reflect: true }) size: StzhTagSize = \"default\";\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: HTMLStzhTagElement;\n\n /* Click event /\n @Event() stzhClick: EventEmitter<StzhTagClickEvent>;\n\n /* Focus event /\n @Event() stzhFocus: EventEmitter<StzhTagFocusEvent>;\n\n /* Input blur event */\n @Event() stzhBlur: EventEmitter<StzhTagBlurEvent>;\n\n private tag: HTMLButtonElement \| HTMLAnchorElement \| HTMLDivElement;\n private text: HTMLElement;\n private focusedByInput: boolean = false;\n\n componentDidRender() {\n requestAnimationFrame(() => {\n if (!this.nonInteractive) {\n this.tag?.setAttribute(\"s-object-id\", this.analyticsId \|\| this.text.innerText);\n }\n });\n }\n\n private renderInner(): DocumentFragment {\n return (\n <Fragment>\n <stzh-clamp lines={1} class=\"stzh-tag__label\" ref={el => (this.text = el as HTMLElement)}>\n {this.label ? this.label : <slot></slot>}\n </stzh-clamp>\n </Fragment>\n );\n }\n\n private onRootFocus = () => {\n if (!this.focusedByInput) {\n this.tag.focus();\n }\n\n this.focusedByInput = false;\n };\n\n private onFocus = (event: FocusEvent) => {\n this.focusedByInput = true;\n\n const focusEvent = new FocusEvent(\"focus\", {\n view: window,\n bubbles: false,\n cancelable: false,\n });\n\n this.element.dispatchEvent(focusEvent);\n this.stzhFocus.emit({\n component: \"stzh-tag\",\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-tag\",\n originalEvent: event,\n });\n };\n\n private onClick = (event: MouseEvent) => {\n this.stzhClick.emit({\n component: \"stzh-tag\",\n originalEvent: event,\n href: this.href,\n });\n };\n\n render() {\n const classes = {\n \"stzh-tag\": true,\n \"stzh-tag--is-disabled\": this.disabled,\n [`stzh-tag--size-${this.size}`]: !!this.size,\n [`stzh-tag--${this.type}`]: !!this.type,\n };\n\n const Tag = this.nonInteractive ? \"div\" : this.href ? \"a\" : \"button\";\n\n return (\n <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n <div class={classes}>\n {this.href ? (\n <Tag\n ref={el => (this.tag = el as HTMLAnchorElement)}\n class={{\n \"stzh-tag__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 </Tag>\n ) : (\n <Tag\n ref={el => (this.tag = el as HTMLButtonElement \| HTMLDivElement)}\n class={{\n \"stzh-tag__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 </Tag>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-C-L1Esh9.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-tag/stzh-tag.scss?tag=stzh-tag&encapsulation=scoped","src/components/stzh-tag/stzh-tag.tsx"],"sourcesContent":[":host {\n --color: var(--stzh-tag-color, #{$colorSecondary60});\n --height: 24px;\n --padding-top: 0;\n --padding-bottom: 0;\n --padding-left: #{space(\"small\")};\n --padding-right: #{space(\"small\")};\n --background-color: var(--stzh-tag-background-color, #{$colorGrey20});\n\n --hover-color: var(--stzh-tag-hover-color, #{$colorSecondary60});\n --hover-background-color: var(\n --stzh-tag-hover-background-color,\n var(--background-color)\n );\n\n display: inline-flex;\n\n &[size=\"large\"] {\n --height: 32px;\n }\n\n &[size=\"default\"][type=\"secondary\"] {\n --background-color: var(\n --stzh-tag-secondary-background-color,\n #{$colorSecondary60}\n );\n }\n\n &[type=\"secondary\"] {\n --color: var(--stzh-tag-secondary-color, #{$colorWhite});\n --background-color: var(\n --stzh-tag-secondary-background-color,\n #{$colorSecondary60}\n );\n --hover-color: var(--stzh-tag-secondary-hover-color, #{$colorWhite});\n --hover-background-color: var(\n --stzh-tag-secondary-hover-background-color,\n var(--background-color)\n );\n }\n\n &[non-interactive]:not([non-interactive=\"false\"]) {\n --hover-color: var(--color);\n --hover-background-color: var(--background-color);\n }\n\n &[disabled]:not([disabled=\"false\"]) {\n --color: var(--stzh-tag-disabled-color, #{$colorGrey70});\n --background-color: var(\n --stzh-tag-disabled-background-color,\n #{$colorGrey20}\n );\n\n --hover-color: var(--color);\n --hover-background-color: var(--background-color);\n }\n}\n\n.stzh-tag {\n position: relative;\n\n &__button {\n @include fontSize(\"nano\");\n font-family: inherit;\n height: var(--height);\n display: flex;\n flex-direction: row;\n align-items: center;\n padding-top: var(--padding-top);\n padding-bottom: var(--padding-bottom);\n padding-left: var(--padding-left);\n padding-right: var(--padding-right);\n color: var(--color);\n appearance: none;\n border: none;\n background-color: var(--background-color);\n transition-duration: $baseTransitionAnimationSpeed;\n transition-property: color, background-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 &__button:hover {\n color: var(--hover-color);\n background-color: var(--hover-background-color);\n }\n\n /* Size /\n\n &--size-large &__button {\n @include font(\"heavy\");\n @include fontSize(\"milli\");\n }\n\n / Disabled /\n\n &--is-disabled &__button {\n cursor: not-allowed;\n }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, Element, Fragment } from \"@stencil/core\";\n\nimport { StzhTagType, StzhTagSize, StzhTagClickEvent, StzhTagFocusEvent, StzhTagBlurEvent } from \"../../index\";\n\n/\n @slot - Slot for label\n /\n@Component({\n tag: \"stzh-tag\",\n styleUrl: \"stzh-tag.scss\",\n scoped: true,\n})\nexport class StzhTag {\n /* Label /\n @Prop() label: string = \"\";\n\n /* `href` if the tag 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 tag is not interactive /\n @Prop({ reflect: true }) nonInteractive: boolean = false;\n\n /* Type /\n @Prop({ reflect: true }) type: StzhTagType = \"default\";\n\n /* Size /\n @Prop({ reflect: true }) size: StzhTagSize = \"default\";\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: HTMLStzhTagElement;\n\n /* Click event /\n @Event() stzhClick: EventEmitter<StzhTagClickEvent>;\n\n /* Focus event /\n @Event() stzhFocus: EventEmitter<StzhTagFocusEvent>;\n\n /* Input blur event */\n @Event() stzhBlur: EventEmitter<StzhTagBlurEvent>;\n\n private tag: HTMLButtonElement \| HTMLAnchorElement \| HTMLDivElement;\n private text: HTMLElement;\n private focusedByInput: boolean = false;\n\n componentDidRender() {\n requestAnimationFrame(() => {\n if (!this.nonInteractive) {\n this.tag?.setAttribute(\"s-object-id\", this.analyticsId \|\| this.text.innerText);\n }\n });\n }\n\n private renderInner(): DocumentFragment {\n return (\n <Fragment>\n <stzh-clamp lines={1} class=\"stzh-tag__label\" ref={el => (this.text = el as HTMLElement)}>\n {this.label ? this.label : <slot></slot>}\n </stzh-clamp>\n </Fragment>\n );\n }\n\n private onRootFocus = () => {\n if (!this.focusedByInput) {\n this.tag.focus();\n }\n\n this.focusedByInput = false;\n };\n\n private onFocus = (event: FocusEvent) => {\n this.focusedByInput = true;\n\n const focusEvent = new FocusEvent(\"focus\", {\n view: window,\n bubbles: false,\n cancelable: false,\n });\n\n this.element.dispatchEvent(focusEvent);\n this.stzhFocus.emit({\n component: \"stzh-tag\",\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-tag\",\n originalEvent: event,\n });\n };\n\n private onClick = (event: MouseEvent) => {\n this.stzhClick.emit({\n component: \"stzh-tag\",\n originalEvent: event,\n href: this.href,\n });\n };\n\n render() {\n const classes = {\n \"stzh-tag\": true,\n \"stzh-tag--is-disabled\": this.disabled,\n [`stzh-tag--size-${this.size}`]: !!this.size,\n [`stzh-tag--${this.type}`]: !!this.type,\n };\n\n const Tag = this.nonInteractive ? \"div\" : this.href ? \"a\" : \"button\";\n\n return (\n <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n <div class={classes}>\n {this.href ? (\n <Tag\n ref={el => (this.tag = el as HTMLAnchorElement)}\n class={{\n \"stzh-tag__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 </Tag>\n ) : (\n <Tag\n ref={el => (this.tag = el as HTMLButtonElement \| HTMLDivElement)}\n class={{\n \"stzh-tag__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 </Tag>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/{p-BpikYN__.js → p-C1ciJM24.js} RENAMED Viewed

@@ -1,5 +1,5 @@
-import { p as proxyCustomElement, H, d as createEvent, h, F as Fragment, e as Host, t as transformTag } from './p-NuLYh9v8.js';
-import { d as defineCustomElement$1 } from './p-Cz5bXTUE.js';
+import { p as proxyCustomElement, H, d as createEvent, h, F as Fragment, e as Host, t as transformTag } from './p-DAS4ghWk.js';
+import { d as defineCustomElement$1 } from './p-BU4OH8Cm.js';
 const stzhBreadcrumbCss = () => `.sc-stzh-breadcrumb-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-breadcrumb-h,[stzh-hidden].sc-stzh-breadcrumb-h{display:none}.sc-stzh-breadcrumb-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-breadcrumb-h *.sc-stzh-breadcrumb,.sc-stzh-breadcrumb-h *.sc-stzh-breadcrumb::before,.sc-stzh-breadcrumb-h *.sc-stzh-breadcrumb::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-breadcrumb-h .has-focus.sc-stzh-breadcrumb{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-breadcrumb-h .stzh-fylingfocus-focused.sc-stzh-breadcrumb{outline-style:none !important}.sc-stzh-breadcrumb-h .stzh-fylingfocus-focused.sc-stzh-breadcrumb::-moz-focus-inner{border:0 !important}.sc-stzh-breadcrumb-h{overflow:hidden;--color:var(--stzh-breadcrumb-color, var(--stzh-color-primary70))}@media print{.sc-stzh-breadcrumb-h{display:none}}[variant=teaser].sc-stzh-breadcrumb-h{--color:var(--stzh-color-grey80)}.stzh-breadcrumb.sc-stzh-breadcrumb{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);color:var(--color)}.stzh-breadcrumb__list.sc-stzh-breadcrumb,.stzh-breadcrumb__item.sc-stzh-breadcrumb,.stzh-breadcrumb__item-link.sc-stzh-breadcrumb{display:flex;align-items:center}.stzh-breadcrumb__list.sc-stzh-breadcrumb{list-style:none;margin:0;padding:0;white-space:nowrap}.stzh-breadcrumb__item.is-expand.sc-stzh-breadcrumb .stzh-breadcrumb__item-link.sc-stzh-breadcrumb{cursor:pointer}.stzh-breadcrumb__item.is-hidden.sc-stzh-breadcrumb{position:absolute;visibility:hidden}.stzh-breadcrumb__item.is-last.sc-stzh-breadcrumb .stzh-breadcrumb__item-link.sc-stzh-breadcrumb{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy)}.stzh-breadcrumb__item.is-first.sc-stzh-breadcrumb .stzh-breadcrumb__item-label.sc-stzh-breadcrumb{border:0;clip:rect(0 0 0 0);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-breadcrumb__item-link.sc-stzh-breadcrumb{appearance:none;background-color:transparent;border:none;text-decoration:none;color:inherit}.stzh-breadcrumb__item-link.is-link.sc-stzh-breadcrumb{cursor:pointer;transition:color var(--stzh-base-transition-animation-speed)}.stzh-breadcrumb__item-link.is-link.sc-stzh-breadcrumb:hover{color:var(--stzh-color-primary90)}.stzh-breadcrumb__item-icon.sc-stzh-breadcrumb{margin-right:var(--stzh-space-xxsmall)}.stzh-breadcrumb__item-icon.is-separator.sc-stzh-breadcrumb{--size:var(--stzh-icon-size-small)}.stzh-breadcrumb__item-label-hidden.sc-stzh-breadcrumb{border:0;clip:rect(0 0 0 0);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-breadcrumb--is-expanded.sc-stzh-breadcrumb .stzh-breadcrumb__list.sc-stzh-breadcrumb{flex-wrap:wrap;white-space:initial}.stzh-breadcrumb--is-expanded.sc-stzh-breadcrumb .is-expand.sc-stzh-breadcrumb{position:absolute}.stzh-breadcrumb--teaser.sc-stzh-breadcrumb{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}`;
@@ -201,6 +201,6 @@ function defineCustomElement() {
 }
 export { StzhBreadcrumb as S, defineCustomElement as d };
-//# sourceMappingURL=p-BpikYN__.js.map
+//# sourceMappingURL=p-C1ciJM24.js.map
-//# sourceMappingURL=p-BpikYN__.js.map
+//# sourceMappingURL=p-C1ciJM24.js.map

package/dist/components/{p-BpikYN__.js.map → p-C1ciJM24.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-BpikYN__.js","mappings":";;;AAAA,MAAM,iBAAiB,GAAG,MAAM,CAAC,giHAAgiH,CAAC;;ACMlkH,MAAM,iBAAiB,GAAG,CAAC;AAC3B,MAAM,gBAAgB,GAAG,CAAC,CAAC;MAUd,cAAc,iBAAAA,kBAAA,CAAA,MAAA,cAAA,SAAAC,CAAA,CAAA;AAL3B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAU2B,QAAA,IAAO,CAAA,OAAA,GAAyB,SAAS;;AAG1D,QAAA,IAAK,CAAA,KAAA,GAAkC,EAAE;;AAIT,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AA2BxD,QAAA,IAAc,CAAA,cAAA,GAAY,KAAK;AAkBhC,QAAA,IAAe,CAAA,eAAA,GAAG,MAAK;YAC7B,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;gBACvC;;AAGF,YAAA,MAAM,cAAc,GAAG,IAAI,CAAC,UAAU,CAAC,WAAW;AAElD,YAAA,MAAM,gCAAgC,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,QAAQ,EAAE,IAAI,EAAE,KAAK,KAAI;AACvF,gBAAA,IAAI,KAAK,KAAK,iBAAiB,EAAE;AAC/B,oBAAA,OAAO,QAAQ;;qBACV;AACL,oBAAA,OAAO,QAAQ,GAAG,IAAI,CAAC,CAAC,CAAC;;aAE5B,EAAE,CAAC,CAAC;AAEL,YAAA,IAAI,gCAAgC,IAAI,cAAc,IAAI,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;gBACrG,MAAM,SAAS,GAAG,EAAE;gBAEpB,MAAM,eAAe,GAAG,IAAI,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC;AAC5D,gBAAA,IAAI,kBAAkB,GAAG,iBAAiB,GAAG,gBAAgB;gBAC7D,IAAI,qCAAqC,GAAG,gCAAgC;AAE5E,gBAAA,GAAG;oBACD,MAAM,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,kBAAkB,CAAC;oBAClD,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;AAC1B,oBAAA,qCAAqC,GAAG,qCAAqC,GAAG,OAAO,CAAC,CAAC,CAAC;AAC1F,oBAAA,kBAAkB,GAAG,kBAAkB,GAAG,gBAAgB;AAC5D,iBAAC,QACC,qCAAqC,GAAG,eAAe,IAAI,cAAc;AACzE,oBAAA,kBAAkB,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM;AAG5C,gBAAA,IAAI,CAAC,cAAc,GAAG,IAAI;AAE1B,gBAAA,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,KAAK,KAAI;AACvC,oBAAA,IAAI,KAAK,KAAK,iBAAiB,EAAE;AAC/B,wBAAA,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC;;yBAC7B;AACL,wBAAA,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,EAAE,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;;AAEhE,iBAAC,CAAC;;iBACG;AACL,gBAAA,IAAI,CAAC,cAAc,GAAG,KAAK;AAE3B,gBAAA,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,KAAK,KAAI;AACvC,oBAAA,IAAI,KAAK,KAAK,iBAAiB,EAAE;AAC/B,wBAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,WAAW,CAAC;;yBAC1B;AACL,wBAAA,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC;;AAEtC,iBAAC,CAAC;;AAEN,SAAC;AAEO,QAAA,IAAW,CAAA,WAAA,GAAG,MAAK;AACzB,YAAA,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;gBACpB;;;AAIF,YAAA,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,wBAAwB,CAAC,CAAkB;AACrG,YAAA,IAAI,CAAC,SAAS,GAAG,EAAE;AAEnB,YAAA,KAAK,CAAC,OAAO,CAAC,IAAI,IAAG;gBACnB,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,qBAAqB,EAAE;gBAC9C,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;AACpC,aAAC,CAAC;YAEF,IAAI,CAAC,eAAe,EAAE;AACxB,SAAC;AAEO,QAAA,IAAqB,CAAA,qBAAA,GAAG,MAAK;AACnC,YAAA,IAAI,IAAI,CAAC,cAAc,EAAE;AACvB,gBAAA,MAAM,CAAC,oBAAoB,CAAC,IAAI,CAAC,cAAc,CAAC;;YAGlD,IAAI,CAAC,cAAc,GAAG,qBAAqB,CAAC,IAAI,CAAC,eAAe,CAAC;AACnE,SAAC;AAEO,QAAA,IAAgB,CAAA,gBAAA,GAAG,MAAK;AAC9B,YAAA,IAAI,IAAI,CAAC,mBAAmB,EAAE;AAC5B,gBAAA,MAAM,CAAC,oBAAoB,CAAC,IAAI,CAAC,mBAAmB,CAAC;;YAGvD,IAAI,CAAC,mBAAmB,GAAG,qBAAqB,CAAC,IAAI,CAAC,WAAW,CAAC;AACpE,SAAC;AAEO,QAAA,IAAiB,CAAA,iBAAA,GAAG,MAAK;AAC/B,YAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;AAEpB,YAAA,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,6BAA6B,CAAC,CAAkB;AAC9G,YAAA,SAAS,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE;AACtB,SAAC;AAkGF;AAtOC,IAAA,YAAY,CAAC,QAAuC,EAAA;QAClD,IAAI,CAAC,QAAQ,EAAE;AACb,YAAA,IAAI,CAAC,MAAM,GAAG,EAAE;;AACX,aAAA,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;AACvC,YAAA,IAAI;gBACF,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;;YAClC,OAAO,CAAC,EAAE;AACV,gBAAA,IAAI,CAAC,MAAM,GAAG,EAAE;;;aAEb;AACL,YAAA,IAAI,CAAC,MAAM,GAAG,QAAQ;;;IAK1B,eAAe,GAAA;QACb,IAAI,CAAC,eAAe,EAAE;;IAgBhB,WAAW,CAAC,IAAwB,EAAE,aAAyB,EAAA;AACrE,QAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;AACtB,YAAA,SAAS,EAAE,iBAAiB;YAC5B,IAAI;YACJ,aAAa;AACd,SAAA,CAAC;;AAiGJ,IAAA,MAAM,iBAAiB,GAAA;AACrB,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC;AAE7B,QAAA,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;AACtB,YAAA,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,YAAY,CAAC;;;IAIvG,kBAAkB,GAAA;QAChB,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC;QAE5C,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,wBAAwB,CAAC;AACxE,QAAA,KAAK,CAAC,OAAO,CAAC,IAAI,IAAG;AACnB,YAAA,IAAI,CAAC,mBAAmB,CAAC,OAAO,CAAC,IAAI,CAAC;AACxC,SAAC,CAAC;;IAGJ,iBAAiB,GAAA;QACf,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,IAAI,CAAC,qBAAqB,CAAC;QACpE,IAAI,CAAC,mBAAmB,GAAG,IAAI,cAAc,CAAC,IAAI,CAAC,gBAAgB,CAAC;;IAGtE,oBAAoB,GAAA;AAClB,QAAA,IAAI,IAAI,CAAC,cAAc,EAAE;AACvB,YAAA,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE;;AAGlC,QAAA,IAAI,IAAI,CAAC,mBAAmB,EAAE;AAC5B,YAAA,IAAI,CAAC,mBAAmB,CAAC,UAAU,EAAE;;;IAIzC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,iBAAiB,EAAE,IAAI;YACvB,8BAA8B,EAAE,IAAI,CAAC,QAAQ;YAC7C,mCAAmC,EAAE,IAAI,CAAC,cAAc;YACxD,CAAC,CAAA,iBAAA,EAAoB,IAAI,CAAC,OAAO,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;YACpD,OAAO,EAAE,IAAI;SACd;QAED,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,OAAO,EAAA,EACjB,CACE,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,UAAU,GAAG,EAAiB,CAAC,EAChD,KAAK,EAAC,sBAAsB,EAC5B,IAAI,EAAC,YAAY,EAAA,YAAA,EACL,IAAI,CAAC,YAAY,CAAC,KAAK,EAAA,EAEnC,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAI,KAAK,EAAC,uBAAuB,IAC9B,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,MAC3B,EAAC,QAAQ,EAAA,IAAA,EACP,CAAA,CAAA,IAAA,EAAA,EACE,KAAK,EAAE;AACL,gBAAA,uBAAuB,EAAE,IAAI;gBAC7B,SAAS,EAAE,KAAK,GAAG,CAAC,KAAK,IAAI,CAAC,MAAM,CAAC,MAAM;gBAC3C,UAAU,EAAE,KAAK,KAAK,CAAC;aACxB,EAAA,EAED,CAAA,CAAA,GAAA,EAAA,EAAA,cAAA,EACgB,KAAK,GAAG,CAAC,KAAK,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,MAAM,GAAG,IAAI,EAC9D,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC,CAAC,EACvC,KAAK,EAAE;AACL,gBAAA,4BAA4B,EAAE,IAAI;AAClC,gBAAA,SAAS,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI;AACvB,aAAA,EAAA,EAEA,KAAK,KAAK,CAAC,IACV,CAAW,CAAA,WAAA,EAAA,EAAA,KAAK,EAAC,4BAA4B,EAAC,IAAI,EAAC,MAAM,EAAa,CAAA,KAEtE,CAAW,CAAA,WAAA,EAAA,EAAA,KAAK,EAAC,yCAAyC,EAAC,IAAI,EAAC,aAAa,GAAa,CAC3F,EACD,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,6BAA6B,EAAC,SAAS,EAAE,IAAI,CAAC,KAAK,EAAS,CAAA,CACtE,CACD,EACJ,KAAK,KAAK,CAAC,KACV,CAAI,CAAA,IAAA,EAAA,EAAA,KAAK,EAAC,iCAAiC,EAAA,EACzC,CAAQ,CAAA,QAAA,EAAA,EAAA,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,EAAA,EACxE,CAAA,CAAA,WAAA,EAAA,EAAW,KAAK,EAAC,yCAAyC,EAAC,IAAI,EAAC,aAAa,EAAa,CAAA,EAC1F,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,6BAA6B,EAAA,EACvC,CAAA,CAAA,MAAA,EAAA,EAAA,aAAA,EAAkB,MAAM,EAAE,EAAA,IAAI,CAAC,YAAY,CAAC,WAAW,CAAQ,EAC/D,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,oCAAoC,EAAA,EAAE,IAAI,CAAC,YAAY,CAAC,iBAAiB,CAAQ,CACxF,CACA,CACN,CACN,CACQ,CACZ,CAAC,CACC,CACD,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-breadcrumb/stzh-breadcrumb.scss?tag=stzh-breadcrumb&encapsulation=scoped","src/components/stzh-breadcrumb/stzh-breadcrumb.tsx"],"sourcesContent":[":host {\n overflow: hidden;\n --color: var(--stzh-breadcrumb-color, #{$colorPrimary70});\n\n @media print {\n display: none;\n }\n\n &[variant=\"teaser\"] {\n --color: #{$colorGrey80};\n }\n}\n\n.stzh-breadcrumb {\n @include fontSize(\"milli\");\n color: var(--color);\n\n &__list,\n &__item,\n &__item-link {\n display: flex;\n align-items: center;\n }\n\n &__list {\n list-style: none;\n margin: 0;\n padding: 0;\n white-space: nowrap;\n }\n\n &__item.is-expand &__item-link {\n cursor: pointer;\n }\n\n &__item.is-hidden {\n position: absolute;\n visibility: hidden;\n }\n\n &__item.is-last &__item-link {\n @include font(\"heavy\");\n }\n\n &__item.is-first &__item-label {\n @include visuallyhidden;\n }\n\n &__item-link {\n appearance: none;\n background-color: transparent;\n border: none;\n text-decoration: none;\n color: inherit;\n }\n\n &__item-link.is-link {\n cursor: pointer;\n transition: color $baseTransitionAnimationSpeed;\n\n &:hover {\n color: $colorPrimary90;\n }\n }\n\n &__item-icon {\n margin-right: space(\"xxsmall\");\n\n &.is-separator {\n --size: #{iconSize(\"small\")};\n }\n }\n\n &__item-label-hidden {\n @include visuallyhidden;\n }\n\n /* Expanded variant /\n\n &--is-expanded &__list {\n flex-wrap: wrap;\n white-space: initial;\n }\n\n &--is-expanded .is-expand {\n position: absolute;\n }\n\n / Teaser variant /\n\n &--teaser {\n @include fontSize(\"micro\");\n }\n}\n","import { Component, Host, h, Element, Prop, Watch, State, Fragment, Event, EventEmitter } from \"@stencil/core\";\n\nimport { StzhBreadcrumbItem, StzhBreadcrumbItemClickEvent } from \"../../index\";\n\nimport { StzhBreadcrumbLocalizedText } from \"./stzh-breadcrumb.localization\";\n\nconst ITEM_EXPAND_INDEX = 1;\nconst SHRINK_DIRECTION = 1; // 1 = removes item to the right / -1 = removes item to the left\n\n/\n \n /\n@Component({\n tag: \"stzh-breadcrumb\",\n styleUrl: \"stzh-breadcrumb.scss\",\n scoped: true,\n})\nexport class StzhBreadcrumb {\n /* Translation strings /\n @Prop() localization: StzhBreadcrumbLocalizedText;\n\n /* Variant /\n @Prop({ reflect: true }) variant: \"default\" \| \"teaser\" = \"default\";\n\n /* Breadcrumb items /\n @Prop() items: StzhBreadcrumbItem[] \| string = [];\n private _items: StzhBreadcrumbItem[];\n\n /* Whether all items are shown (true) or everything should fit into one line and not wrap (false, default) /\n @Prop({ mutable: true, reflect: true }) expanded: boolean = false;\n\n @Element() element: HTMLStzhBreadcrumbElement;\n\n @Watch(\"items\")\n itemsWatcher(newValue: StzhBreadcrumbItem[] \| string) {\n if (!newValue) {\n this._items = [];\n } else if (typeof newValue === \"string\") {\n try {\n this._items = JSON.parse(newValue);\n } catch (e) {\n this._items = [];\n }\n } else {\n this._items = newValue;\n }\n }\n\n @Watch(\"expanded\")\n expandedWatcher() {\n this.updateContainer();\n }\n\n /* Item click event */\n @Event() stzhItemClick: EventEmitter<StzhBreadcrumbItemClickEvent>;\n\n @State() hasHiddenItems: boolean = false;\n\n private navElement: HTMLElement;\n private itemSizes: [HTMLElement, number][];\n\n private debounceResize: number;\n private resizeObserver: ResizeObserver;\n private debounceResizeItems: number;\n private resizeItemsObserver: ResizeObserver;\n\n private handleClick(item: StzhBreadcrumbItem, originalEvent: MouseEvent) {\n this.stzhItemClick.emit({\n component: \"stzh-breadcrumb\",\n item,\n originalEvent,\n });\n }\n\n private updateContainer = () => {\n if (!this.navElement \|\| !this.itemSizes) {\n return;\n }\n\n const containerWidth = this.navElement.clientWidth;\n\n const totalItemsWidthWithoutExpandItem = this.itemSizes.reduce((previous, item, index) => {\n if (index === ITEM_EXPAND_INDEX) {\n return previous;\n } else {\n return previous + item[1];\n }\n }, 0);\n\n if (totalItemsWidthWithoutExpandItem >= containerWidth && this.itemSizes.length > 2 && !this.expanded) {\n const hideItems = [];\n\n const expandItemWidth = this.itemSizes[ITEM_EXPAND_INDEX][1];\n let currentIndexToHide = ITEM_EXPAND_INDEX + SHRINK_DIRECTION;\n let totalItemsShownWidthWithoutExpandItem = totalItemsWidthWithoutExpandItem;\n\n do {\n const current = this.itemSizes[currentIndexToHide];\n hideItems.push(current[0]);\n totalItemsShownWidthWithoutExpandItem = totalItemsShownWidthWithoutExpandItem - current[1];\n currentIndexToHide = currentIndexToHide + SHRINK_DIRECTION;\n } while (\n totalItemsShownWidthWithoutExpandItem + expandItemWidth >= containerWidth &&\n currentIndexToHide < this.itemSizes.length\n );\n\n this.hasHiddenItems = true;\n\n this.itemSizes.forEach(([item], index) => {\n if (index === ITEM_EXPAND_INDEX) {\n item.classList.remove(\"is-hidden\");\n } else {\n item.classList.toggle(\"is-hidden\", hideItems.includes(item));\n }\n });\n } else {\n this.hasHiddenItems = false;\n\n this.itemSizes.forEach(([item], index) => {\n if (index === ITEM_EXPAND_INDEX) {\n item.classList.add(\"is-hidden\");\n } else {\n item.classList.remove(\"is-hidden\");\n }\n });\n }\n };\n\n private updateItems = () => {\n if (!this.navElement) {\n return;\n }\n\n // TODO: current updates all item sizes, but could be optimized only to update really resized items with using passed ResizeObserver entries\n const items = Array.from(this.navElement.querySelectorAll(\".stzh-breadcrumb__item\")) as HTMLElement[];\n this.itemSizes = [];\n\n items.forEach(item => {\n const { width } = item.getBoundingClientRect();\n this.itemSizes.push([item, width]);\n });\n\n this.updateContainer();\n };\n\n private handleContainerResize = () => {\n if (this.debounceResize) {\n window.cancelAnimationFrame(this.debounceResize);\n }\n\n this.debounceResize = requestAnimationFrame(this.updateContainer);\n };\n\n private handleItemResize = () => {\n if (this.debounceResizeItems) {\n window.cancelAnimationFrame(this.debounceResizeItems);\n }\n\n this.debounceResizeItems = requestAnimationFrame(this.updateItems);\n };\n\n private handleExpandClick = () => {\n this.expanded = true;\n\n const itemLinks = Array.from(this.navElement.querySelectorAll(\".stzh-breadcrumb__item-link\")) as HTMLElement[];\n itemLinks[2].focus();\n };\n\n async componentWillLoad() {\n this.itemsWatcher(this.items);\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"breadcrumb\");\n }\n }\n\n componentDidRender() {\n this.resizeObserver.observe(this.navElement);\n\n const items = this.navElement.querySelectorAll(\".stzh-breadcrumb__item\");\n items.forEach(item => {\n this.resizeItemsObserver.observe(item);\n });\n }\n\n connectedCallback() {\n this.resizeObserver = new ResizeObserver(this.handleContainerResize);\n this.resizeItemsObserver = new ResizeObserver(this.handleItemResize);\n }\n\n disconnectedCallback() {\n if (this.resizeObserver) {\n this.resizeObserver.disconnect();\n }\n\n if (this.resizeItemsObserver) {\n this.resizeItemsObserver.disconnect();\n }\n }\n\n render() {\n const classes = {\n \"stzh-breadcrumb\": true,\n \"stzh-breadcrumb--is-expanded\": this.expanded,\n \"stzh-breadcrumb--has-hidden-items\": this.hasHiddenItems,\n [`stzh-breadcrumb--${this.variant}`]: !!this.variant,\n rs_skip: true, // will prevent component being read by readspeaker\n };\n\n return (\n <Host>\n <div class={classes}>\n <nav\n ref={el => (this.navElement = el as HTMLElement)}\n class=\"stzh-breadcrumb__nav\"\n role=\"navigation\"\n aria-label={this.localization.title}\n >\n <ol class=\"stzh-breadcrumb__list\">\n {this._items.map((item, index) => (\n <Fragment>\n <li\n class={{\n \"stzh-breadcrumb__item\": true,\n \"is-last\": index + 1 === this._items.length,\n \"is-first\": index === 0,\n }}\n >\n <a\n aria-current={index + 1 === this._items.length ? \"page\" : null}\n href={item.href}\n onClick={e => this.handleClick(item, e)}\n class={{\n \"stzh-breadcrumb__item-link\": true,\n \"is-link\": !!item.href,\n }}\n >\n {index === 0 ? (\n <stzh-icon class=\"stzh-breadcrumb__item-icon\" name=\"home\"></stzh-icon>\n ) : (\n <stzh-icon class=\"stzh-breadcrumb__item-icon is-separator\" name=\"angle-right\"></stzh-icon>\n )}\n <span class=\"stzh-breadcrumb__item-label\" innerHTML={item.label}></span>\n </a>\n </li>\n {index === 0 && (\n <li class=\"stzh-breadcrumb__item is-expand\">\n <button class=\"stzh-breadcrumb__item-link\" onClick={this.handleExpandClick}>\n <stzh-icon class=\"stzh-breadcrumb__item-icon is-separator\" name=\"angle-right\"></stzh-icon>\n <span class=\"stzh-breadcrumb__item-label\">\n <span aria-hdiden=\"true\">{this.localization.expandLabel}</span>\n <span class=\"stzh-breadcrumb__item-label-hidden\">{this.localization.expandHiddenLabel}</span>\n </span>\n </button>\n </li>\n )}\n </Fragment>\n ))}\n </ol>\n </nav>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-C1ciJM24.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-breadcrumb/stzh-breadcrumb.scss?tag=stzh-breadcrumb&encapsulation=scoped","src/components/stzh-breadcrumb/stzh-breadcrumb.tsx"],"sourcesContent":[":host {\n overflow: hidden;\n --color: var(--stzh-breadcrumb-color, #{$colorPrimary70});\n\n @media print {\n display: none;\n }\n\n &[variant=\"teaser\"] {\n --color: #{$colorGrey80};\n }\n}\n\n.stzh-breadcrumb {\n @include fontSize(\"milli\");\n color: var(--color);\n\n &__list,\n &__item,\n &__item-link {\n display: flex;\n align-items: center;\n }\n\n &__list {\n list-style: none;\n margin: 0;\n padding: 0;\n white-space: nowrap;\n }\n\n &__item.is-expand &__item-link {\n cursor: pointer;\n }\n\n &__item.is-hidden {\n position: absolute;\n visibility: hidden;\n }\n\n &__item.is-last &__item-link {\n @include font(\"heavy\");\n }\n\n &__item.is-first &__item-label {\n @include visuallyhidden;\n }\n\n &__item-link {\n appearance: none;\n background-color: transparent;\n border: none;\n text-decoration: none;\n color: inherit;\n }\n\n &__item-link.is-link {\n cursor: pointer;\n transition: color $baseTransitionAnimationSpeed;\n\n &:hover {\n color: $colorPrimary90;\n }\n }\n\n &__item-icon {\n margin-right: space(\"xxsmall\");\n\n &.is-separator {\n --size: #{iconSize(\"small\")};\n }\n }\n\n &__item-label-hidden {\n @include visuallyhidden;\n }\n\n /* Expanded variant /\n\n &--is-expanded &__list {\n flex-wrap: wrap;\n white-space: initial;\n }\n\n &--is-expanded .is-expand {\n position: absolute;\n }\n\n / Teaser variant /\n\n &--teaser {\n @include fontSize(\"micro\");\n }\n}\n","import { Component, Host, h, Element, Prop, Watch, State, Fragment, Event, EventEmitter } from \"@stencil/core\";\n\nimport { StzhBreadcrumbItem, StzhBreadcrumbItemClickEvent } from \"../../index\";\n\nimport { StzhBreadcrumbLocalizedText } from \"./stzh-breadcrumb.localization\";\n\nconst ITEM_EXPAND_INDEX = 1;\nconst SHRINK_DIRECTION = 1; // 1 = removes item to the right / -1 = removes item to the left\n\n/\n \n /\n@Component({\n tag: \"stzh-breadcrumb\",\n styleUrl: \"stzh-breadcrumb.scss\",\n scoped: true,\n})\nexport class StzhBreadcrumb {\n /* Translation strings /\n @Prop() localization: StzhBreadcrumbLocalizedText;\n\n /* Variant /\n @Prop({ reflect: true }) variant: \"default\" \| \"teaser\" = \"default\";\n\n /* Breadcrumb items /\n @Prop() items: StzhBreadcrumbItem[] \| string = [];\n private _items: StzhBreadcrumbItem[];\n\n /* Whether all items are shown (true) or everything should fit into one line and not wrap (false, default) /\n @Prop({ mutable: true, reflect: true }) expanded: boolean = false;\n\n @Element() element: HTMLStzhBreadcrumbElement;\n\n @Watch(\"items\")\n itemsWatcher(newValue: StzhBreadcrumbItem[] \| string) {\n if (!newValue) {\n this._items = [];\n } else if (typeof newValue === \"string\") {\n try {\n this._items = JSON.parse(newValue);\n } catch (e) {\n this._items = [];\n }\n } else {\n this._items = newValue;\n }\n }\n\n @Watch(\"expanded\")\n expandedWatcher() {\n this.updateContainer();\n }\n\n /* Item click event */\n @Event() stzhItemClick: EventEmitter<StzhBreadcrumbItemClickEvent>;\n\n @State() hasHiddenItems: boolean = false;\n\n private navElement: HTMLElement;\n private itemSizes: [HTMLElement, number][];\n\n private debounceResize: number;\n private resizeObserver: ResizeObserver;\n private debounceResizeItems: number;\n private resizeItemsObserver: ResizeObserver;\n\n private handleClick(item: StzhBreadcrumbItem, originalEvent: MouseEvent) {\n this.stzhItemClick.emit({\n component: \"stzh-breadcrumb\",\n item,\n originalEvent,\n });\n }\n\n private updateContainer = () => {\n if (!this.navElement \|\| !this.itemSizes) {\n return;\n }\n\n const containerWidth = this.navElement.clientWidth;\n\n const totalItemsWidthWithoutExpandItem = this.itemSizes.reduce((previous, item, index) => {\n if (index === ITEM_EXPAND_INDEX) {\n return previous;\n } else {\n return previous + item[1];\n }\n }, 0);\n\n if (totalItemsWidthWithoutExpandItem >= containerWidth && this.itemSizes.length > 2 && !this.expanded) {\n const hideItems = [];\n\n const expandItemWidth = this.itemSizes[ITEM_EXPAND_INDEX][1];\n let currentIndexToHide = ITEM_EXPAND_INDEX + SHRINK_DIRECTION;\n let totalItemsShownWidthWithoutExpandItem = totalItemsWidthWithoutExpandItem;\n\n do {\n const current = this.itemSizes[currentIndexToHide];\n hideItems.push(current[0]);\n totalItemsShownWidthWithoutExpandItem = totalItemsShownWidthWithoutExpandItem - current[1];\n currentIndexToHide = currentIndexToHide + SHRINK_DIRECTION;\n } while (\n totalItemsShownWidthWithoutExpandItem + expandItemWidth >= containerWidth &&\n currentIndexToHide < this.itemSizes.length\n );\n\n this.hasHiddenItems = true;\n\n this.itemSizes.forEach(([item], index) => {\n if (index === ITEM_EXPAND_INDEX) {\n item.classList.remove(\"is-hidden\");\n } else {\n item.classList.toggle(\"is-hidden\", hideItems.includes(item));\n }\n });\n } else {\n this.hasHiddenItems = false;\n\n this.itemSizes.forEach(([item], index) => {\n if (index === ITEM_EXPAND_INDEX) {\n item.classList.add(\"is-hidden\");\n } else {\n item.classList.remove(\"is-hidden\");\n }\n });\n }\n };\n\n private updateItems = () => {\n if (!this.navElement) {\n return;\n }\n\n // TODO: current updates all item sizes, but could be optimized only to update really resized items with using passed ResizeObserver entries\n const items = Array.from(this.navElement.querySelectorAll(\".stzh-breadcrumb__item\")) as HTMLElement[];\n this.itemSizes = [];\n\n items.forEach(item => {\n const { width } = item.getBoundingClientRect();\n this.itemSizes.push([item, width]);\n });\n\n this.updateContainer();\n };\n\n private handleContainerResize = () => {\n if (this.debounceResize) {\n window.cancelAnimationFrame(this.debounceResize);\n }\n\n this.debounceResize = requestAnimationFrame(this.updateContainer);\n };\n\n private handleItemResize = () => {\n if (this.debounceResizeItems) {\n window.cancelAnimationFrame(this.debounceResizeItems);\n }\n\n this.debounceResizeItems = requestAnimationFrame(this.updateItems);\n };\n\n private handleExpandClick = () => {\n this.expanded = true;\n\n const itemLinks = Array.from(this.navElement.querySelectorAll(\".stzh-breadcrumb__item-link\")) as HTMLElement[];\n itemLinks[2].focus();\n };\n\n async componentWillLoad() {\n this.itemsWatcher(this.items);\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"breadcrumb\");\n }\n }\n\n componentDidRender() {\n this.resizeObserver.observe(this.navElement);\n\n const items = this.navElement.querySelectorAll(\".stzh-breadcrumb__item\");\n items.forEach(item => {\n this.resizeItemsObserver.observe(item);\n });\n }\n\n connectedCallback() {\n this.resizeObserver = new ResizeObserver(this.handleContainerResize);\n this.resizeItemsObserver = new ResizeObserver(this.handleItemResize);\n }\n\n disconnectedCallback() {\n if (this.resizeObserver) {\n this.resizeObserver.disconnect();\n }\n\n if (this.resizeItemsObserver) {\n this.resizeItemsObserver.disconnect();\n }\n }\n\n render() {\n const classes = {\n \"stzh-breadcrumb\": true,\n \"stzh-breadcrumb--is-expanded\": this.expanded,\n \"stzh-breadcrumb--has-hidden-items\": this.hasHiddenItems,\n [`stzh-breadcrumb--${this.variant}`]: !!this.variant,\n rs_skip: true, // will prevent component being read by readspeaker\n };\n\n return (\n <Host>\n <div class={classes}>\n <nav\n ref={el => (this.navElement = el as HTMLElement)}\n class=\"stzh-breadcrumb__nav\"\n role=\"navigation\"\n aria-label={this.localization.title}\n >\n <ol class=\"stzh-breadcrumb__list\">\n {this._items.map((item, index) => (\n <Fragment>\n <li\n class={{\n \"stzh-breadcrumb__item\": true,\n \"is-last\": index + 1 === this._items.length,\n \"is-first\": index === 0,\n }}\n >\n <a\n aria-current={index + 1 === this._items.length ? \"page\" : null}\n href={item.href}\n onClick={e => this.handleClick(item, e)}\n class={{\n \"stzh-breadcrumb__item-link\": true,\n \"is-link\": !!item.href,\n }}\n >\n {index === 0 ? (\n <stzh-icon class=\"stzh-breadcrumb__item-icon\" name=\"home\"></stzh-icon>\n ) : (\n <stzh-icon class=\"stzh-breadcrumb__item-icon is-separator\" name=\"angle-right\"></stzh-icon>\n )}\n <span class=\"stzh-breadcrumb__item-label\" innerHTML={item.label}></span>\n </a>\n </li>\n {index === 0 && (\n <li class=\"stzh-breadcrumb__item is-expand\">\n <button class=\"stzh-breadcrumb__item-link\" onClick={this.handleExpandClick}>\n <stzh-icon class=\"stzh-breadcrumb__item-icon is-separator\" name=\"angle-right\"></stzh-icon>\n <span class=\"stzh-breadcrumb__item-label\">\n <span aria-hdiden=\"true\">{this.localization.expandLabel}</span>\n <span class=\"stzh-breadcrumb__item-label-hidden\">{this.localization.expandHiddenLabel}</span>\n </span>\n </button>\n </li>\n )}\n </Fragment>\n ))}\n </ol>\n </nav>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}