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

@oiz/stzh-components 3.2.0-beta1 → 3.2.0

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

package/dist/stzh-components/p-1c75b53f.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["stzhBadgeCss","StzhBadge","render","classes","this","type","h","Host","filled","label","class","stzhButtonCss","StzhButton","focusedByInput","handleReset","async","checked","defaultChecked","onInput","event","input","stzhChange","emit","component","originalEvent","value","onRootFocus","button","focus","onFocus","focusEvent","FocusEvent","view","window","bubbles","cancelable","element","dispatchEvent","stzhFocus","onBlur","blurEvent","stzhBlur","onClick","disabled","stopPropagation","preventDefault","stzhClick","href","resetListener","target","contains","requestAnimationFrame","renderIcon","iconUsed","icon","name","showToggleIcon","badge","badgeEmpty","badgePosition","badgeType","renderContent","ref","el","text","rel","includes","localization","$globals","externalLinkLabel","download","downloadLinkLabel","renderInner","Fragment","iconPosition","componentWillLoad","stzhComponents","utils","fetchTranslations","componentDidRender","_a","setAttribute","analyticsId","innerText","hasSlot","iconOnly","rounded","fullwidth","a11yDisabled","active","a11yExpanded","effect","textAlign","variant","tabindex","a11yLabel","a11yDescribedby","a11yControls","a11yCurrent","id","buttonId","accessKey","buttonAccesskey","a11yTabindex","stzhIconCss","iconCounter","StzhIcon","nameWatcher","iconDisplay","response","fetch","pathMedia","status","svgString","parser","DOMParser","svgDoc","parseFromString","svgElement","documentElement","classList","add","setTimeout","a11yTitleWatcher","a11yTitle","svgHtml","iconId","title","querySelector","document","createElement","appendChild","innerHTML","outerHTML","style","display"],"sources":["src/components/stzh-badge/stzh-badge.scss?tag=stzh-badge&encapsulation=scoped","src/components/stzh-badge/stzh-badge.tsx","src/components/stzh-button/stzh-button.scss?tag=stzh-button&encapsulation=scoped","src/components/stzh-button/stzh-button.tsx","src/components/stzh-icon/stzh-icon.scss?tag=stzh-icon&encapsulation=shadow","src/components/stzh-icon/stzh-icon.tsx"],"sourcesContent":[":host {\n --color: #{$colorWhite};\n --background-color: #{$colorGrey90};\n display: inline-flex;\n\n &[type=\"success\"] {\n --background-color: #{$colorSuccess70};\n }\n\n &[type=\"warning\"] {\n --color: #{$colorBlack};\n --background-color: #{$colorWarning60};\n }\n\n &[type=\"error\"] {\n --background-color: #{$colorError60};\n }\n\n &[type=\"info\"] {\n --background-color: #{$colorPrimary70};\n }\n\n &[filled][type=\"error\"] {\n --background-color: #{$colorError70};\n }\n}\n\n.stzh-badge {\n @include badge;\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n} from \"@stencil/core\";\n\nimport { StzhBadgeType } from \"../../index\";\n\n/**\n * @slot - Slot badge content\n */\n@Component({\n tag: \"stzh-badge\",\n styleUrl: \"stzh-badge.scss\",\n scoped: true\n})\nexport class StzhBadge {\n /** Text content of the badge */\n @Prop() label: string = \"\";\n\n /** Type */\n @Prop({ reflect: true }) type: StzhBadgeType = \"default\";\n\n render() {\n const classes = {\n \"stzh-badge\": true,\n [`stzh-badge--type-${this.type}`]: !!this.type\n };\n\n return (\n <Host filled={!!this.label}>\n <div class={classes}>\n {this.label || <slot></slot>}\n </div>\n </Host>\n );\n }\n}\n","/**\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(--stzh-button-hover-background-color, #{$colorSecondary60});\n --hover-border-color: transparent;\n\n display: inline-grid;\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 }\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(--stzh-button-secondary-background-color, #{$colorSecondary30});\n\n --hover-color: var(--stzh-button-secondary-hover-color, #{$colorPrimary80});\n --hover-background-color: var(--stzh-button-secondary-hover-background-color, #{$colorSecondary40});\n }\n\n &[variant=\"tertiary\"] {\n --color: var(--stzh-button-tertiary-color, #{$colorPrimary70});\n --background-color: var(--stzh-button-tertiary-background-color, transparent);\n\n --hover-color: var(--stzh-button-tertiary-hover-color, #{$colorPrimary80});\n --hover-background-color: var(--stzh-button-tertiary-hover-background-color, #{$colorSecondary20});\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(--stzh-button-active-background-color, #{$colorSecondary60});\n\n --hover-color: var(--stzh-button-active-hover-color, #{$colorWhite});\n --hover-background-color: var(--stzh-button-active-hover-background-color, #{$colorSecondary60});\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(--stzh-button-disabled-background-color, #{$colorGrey70});\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(--stzh-button-secondary-disabled-background-color, #{$colorGrey20});\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(--stzh-button-input-disabled-background-color, #{$colorGrey20});\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(--stzh-button-tertiary-disabled-background-color, transparent);\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\t0%,\n\t20%,\n\t50%,\n\t80%,\n\t100% {\n\t\ttransform: translateX(0);\n\t}\n\n\t40% {\n\t\ttransform: translateX(-8px);\n\t}\n\n\t60% {\n\t\ttransform: translateX(-4px);\n\t}\n}\n\n.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 height: 100%;\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 &__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 &__icon-wrapper:not(:empty) + &__text:not(:empty),\n &--badge-position-icon#{&}--has-icon#{&}--has-badge &__text:not(:empty) + &__icon-wrapper:not(:empty) {\n margin-left: var(--badge-icon-text-margin);\n }\n\n /* Variant if button only has icon */\n\n &--has-icon-only &__text {\n @include visuallyhidden;\n }\n\n /* Effect */\n\n &--effect-cta:hover &__icon-wrapper {\n\t\tanimation: stzh-button-effect-cta 1s;\n }\n\n /* Alignment variants */\n\n &--align-left &__inner {\n justify-content: flex-start;\n }\n\n &--align-right &__inner {\n justify-content: flex-end;\n }\n\n &--align-center &__inner {\n justify-content: center;\n }\n\n &--align-space-between &__inner {\n justify-content: space-between;\n }\n\n /* Disabled variant */\n\n &--is-disabled {\n cursor: not-allowed;\n }\n\n /* Default */\n\n &--default.has-focus {\n outline: var(--stzh-flyingfocus-color) solid 3px;\n }\n}\n","import {\n Component,\n Host,\n Fragment,\n Element,\n h,\n Prop,\n Event,\n EventEmitter,\n Listen\n} from \"@stencil/core\";\n\nimport {\n StzhButtonFocusEvent,\n StzhButtonBlurEvent,\n StzhButtonChangeEvent,\n StzhButtonSize,\n StzhButtonVariant,\n StzhBadgeType,\n StzhButtonClickEvent\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\n/**\n * @slot - Slot for label/text content\n * @slot icon - Slot for icon element\n */\n@Component({\n tag: \"stzh-button\",\n styleUrl: \"stzh-button.scss\",\n scoped: true\n})\nexport class StzhButton {\n /** Translation strings */\n @Prop() localization: StzhLocaleComponent;\n\n /** Display a badge aligned to button or icons */\n @Prop() badge: string = \"\";\n\n /** Badge type */\n @Prop({ reflect: true }) badgeType: 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 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 }\n else {\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 &&\n <stzh-icon class=\"stzh-button__icon\" name={this.icon}></stzh-icon>\n }\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 &&\n <slot name=\"icon\"></slot>\n }\n {(this.badge || this.badgeEmpty) && this.badgePosition === \"icon\" && iconUsed &&\n <stzh-badge class=\"stzh-button__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n }\n </div>\n );\n }\n\n private renderContent(): HTMLDivElement {\n return (\n <div\n class=\"stzh-button__text\"\n ref={(el) => (this.text = el as HTMLDivElement)}\n >\n {this.rel && this.rel.includes('external') && <div class=\"stzh-button__vhidden\">{this.localization.$globals.externalLinkLabel}</div>}\n {this.download && <div class=\"stzh-button__vhidden\">{this.localization.$globals.downloadLinkLabel}</div>}\n {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\n class=\"stzh-button__badge\"\n label={this.badge}\n type={this.badgeType}\n ></stzh-badge>\n }\n </Fragment>\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--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\"\n ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n aria-controls={this.a11yControls || null}\n 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 :\n this.type === \"radio\" ?\n <label\n ref={(el) => (this.button = el as HTMLLabelElement)}\n class={classes}\n onClick={this.onClick}\n >\n <input\n ref={(el) => (this.input = el as HTMLInputElement)}\n type=\"radio\"\n class=\"stzh-button__input\"\n name={this.name}\n value={this.value}\n 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\"\n ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n aria-controls={this.a11yControls || null}\n 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\"\n ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n aria-controls={this.a11yControls || null}\n 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","/**\n * @prop --size: Icon size\n * @prop --color: Icon color\n *\n * @prop --stzh-icon-size: **Global**: Default icon size. [See available icon sizes here](/docs/tokens-icons--docs#sizes).\n * @prop --stzh-icon-color: **Global**: Icon color\n * @prop --stzh-icon-vertical-align: **Global**: Icon vertical alignment\n */\n\n:host {\n --size: #{iconSize()};\n --color: #{$iconColor};\n --vertical-align: #{$iconVerticalAlign};\n\n display: inline-flex;\n justify-content: center;\n align-items: center;\n color: var(--color);\n vertical-align: var(--vertical-align);\n width: var(--size);\n height: var(--size);\n\n @media print {\n -webkit-print-color-adjust: exact;\n print-color-adjust: exact;\n }\n}\n\n.stzh-icon {\n display: none;\n\n &__svg {\n width: var(--size);\n height: var(--size);\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Watch,\n State,\n Element\n} from \"@stencil/core\";\n\nlet iconCounter = 0;\n\n@Component({\n tag: \"stzh-icon\",\n styleUrl: \"stzh-icon.scss\",\n shadow: true\n})\nexport class StzhIcon {\n /**\n * Icon which should be displayed\n * See the [icon overview](stzh-components/assets/svgsprites/symbol/sprite.symbol.html) for a list of all available icons.\n */\n @Prop() name: string = \"\";\n\n /**\n * Hidden icon title for screenreader\n * (usually not needed when e.g. inside links or buttons that have text)\n */\n @Prop({ attribute: 'a11y-title' }) a11yTitle: string = \"\";\n\n @Element() element: HTMLStzhIconElement;\n\n @State() svgHtml: string = \"\";\n @State() iconDisplay: string = \"none\";\n\n @Watch(\"name\")\n async nameWatcher(name: string) {\n this.iconDisplay = \"none\";\n\n if (name) {\n const response = await fetch(`${window.stzhComponents.pathMedia}/icons/mono/${this.name}.svg`);\n\n if (response.status === 200) {\n const svgString = await response.text();\n\n const parser = new DOMParser();\n const svgDoc = parser.parseFromString(svgString, 'image/svg+xml');\n\n this.svgElement = svgDoc.documentElement as unknown as SVGElement;\n this.svgElement.classList.add('stzh-icon__svg');\n\n // for some obscure reason we need to delay showing the icon in safari,\n // otherwise the icon doesn't show up randomly\n // TODO: sometimes the icon still randomely disappears when clicked on page (check on newer safari if problems still occur)\n window.setTimeout(() => {\n this.iconDisplay = \"contents\";\n }, 0);\n\n this.a11yTitleWatcher(this.a11yTitle);\n } else {\n this.svgElement = null;\n this.svgHtml = '';\n }\n } else {\n this.svgElement = null;\n this.svgHtml = '';\n }\n }\n\n @Watch(\"a11yTitle\")\n a11yTitleWatcher(a11yTitle: string) {\n this.svgElement.setAttribute(\"aria-hidden\", a11yTitle ? \"false\" : \"true\");\n this.svgElement.setAttribute(\"focusable\", a11yTitle ? \"true\" : \"false\");\n this.svgElement.setAttribute(\"aria-labelledby\", a11yTitle ? `${this.iconId}-title` : null);\n\n let title = this.svgElement.querySelector('title');\n\n if (!title) {\n title = document.createElement('title');\n title.id = `${this.iconId}-title`;\n this.svgElement.appendChild(title);\n }\n\n title.innerHTML = a11yTitle;\n this.svgHtml = this.svgElement.outerHTML;\n }\n\n private svgElement: SVGElement | null;\n private iconId: string;\n\n async componentWillLoad() {\n this.iconId = `stzh-icon-${iconCounter++}`;\n this.nameWatcher(this.name);\n }\n\n render() {\n return (\n <Host>\n <div class=\"stzh-icon\" style={{ display: this.iconDisplay }} innerHTML={this.svgHtml}></div>\n </Host>\n );\n }\n}\n"],"mappings":"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"}

package/dist/stzh-components/p-29c1cb5c.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["stzhLinkCss","StzhLink","this","focusedByInput","onRootFocus","link","focus","onFocus","event","focusEvent","FocusEvent","view","window","bubbles","cancelable","element","dispatchEvent","stzhFocus","emit","component","originalEvent","onBlur","blurEvent","stzhBlur","onClick","stzhClick","href","renderIcon","h","class","icon","name","badge","badgeEmpty","label","type","badgeType","renderContent","rel","includes","localization","$globals","externalLinkLabel","download","downloadLinkLabel","ref","el","text","renderInner","iconUsed","Fragment","iconPosition","componentWillLoad","stzhComponents","utils","fetchTranslations","componentDidRender","requestAnimationFrame","_a","setAttribute","analyticsId","innerText","render","hasSlot","classes","iconOnly","fullwidth","disabled","active","badgePosition","textAlign","variant","Host","tabindex","target","id","linkId","accessKey","linkAccesskey","a11yTabindex","a11yLabel","a11yDescribedby","a11yDisabled","a11yExpanded","a11yControls","a11yCurrent"],"sources":["src/components/stzh-link/stzh-link.scss?tag=stzh-link&encapsulation=scoped","src/components/stzh-link/stzh-link.tsx"],"sourcesContent":["/*\n @prop --color: Color of link\n * @prop --hover-color: Hover color of link\n * @prop --text-decoration-line: Text decoration of link\n * @prop --hover-text-decoration-line: Hover text decoration of link\n * @prop --icon-size: Size of icon next to link\n * @prop --min-height: Min height of link\n \n @prop --stzh-link-color: Global: Color of link\n * @prop --stzh-link-hover-color: Global: Hover color of link\n * @prop --stzh-link-text-decoration-line: Global: Text decoration of link\n * @prop --stzh-link-hover-text-decoration-line: Global: Text decoration of link\n * @prop --stzh-link-icon-size: Global: Size of icon next to link\n * @prop --stzh-link-text-decoration-thickness: Global: Text decoration thickness\n * @prop --stzh-link-text-decoration-skip-ink: Global: Whether to skip ink in text decoration\n * @prop --stzh-link-text-underline-offset: Global: Text underline offset\n /\n\n@mixin link--size-default() {\n --font-size: var(--stzh-font-milli-font-size);\n --line-height: var(--stzh-font-milli-text-line-height);\n --letter-spacing: normal;\n\n @include mq($from: medium) {\n --font-size: var(--stzh-font-centi-font-size);\n --line-height: var(--stzh-font-centi-text-line-height);\n --letter-spacing: normal;\n }\n}\n\n@mixin link--size-small() {\n --font-size: var(--stzh-font-micro-font-size);\n --line-height: var(--stzh-font-micro-text-line-height);\n --letter-spacing: normal;\n}\n\n@mixin link--size-inherit() {\n --font-size: inherit;\n --line-height: inherit;\n --letter-spacing: inherit;\n}\n\n:host {\n @include link--size-default;\n --color: #{$linkColor};\n --text-decoration-line: #{$linkTextDecorationLine};\n --icon-wrapper-height: #{$linkIconWrapperHeight};\n --icon-size: #{$linkIconSize};\n --height: var(--stzh-link-height, 40px);\n\n --hover-color: #{$linkHoverColor};\n --hover-text-decoration-line: #{$linkHoverTextDecorationLine};\n\n @include mq($from: medium) {\n --height: var(--stzh-link-height, auto);\n }\n\n color: var(--color);\n display: inline-grid;\n width: auto;\n min-height: var(--height);\n pointer-events: var(--stzh-link-pointer-events, auto);\n\n &[height=\"auto\"] {\n --height: var(--stzh-link-auto-height, auto);\n }\n\n &[fullwidth]:not([fullwidth=\"false\"]) {\n width: 100%;\n display: grid;\n }\n\n &[variant=\"secondary\"] {\n --color: #{$linkSecondaryColor};\n --hover-color: #{$linkSecondaryHoverColor};\n }\n\n &[variant=\"back\"] {\n --text-decoration-line: none;\n --hover-color: var(--color);\n }\n\n &[active]:not([active=\"false\"]) {\n --color: var(--hover-color);\n }\n\n &[disabled]:not([disabled=\"false\"]) {\n --color: #{$colorGrey60};\n --hover-color: #{$colorGrey60};\n }\n}\n\n:host(:where([size=\"small\"])) {\n @include link--size-small;\n}\n\n:host(:where([size=\"inherit\"])) {\n @include link--size-inherit;\n}\n\n@each $breakpoint, $size in $breakpoints {\n @include mq($from: $breakpoint) {\n :host(:where([size-#{$breakpoint}=\"default\"])) {\n @include link--size-default;\n }\n \n :host(:where([size-#{$breakpoint}=\"small\"])) {\n @include link--size-small;\n }\n \n :host(:where([size-#{$breakpoint}=\"inherit\"])) {\n @include link--size-inherit;\n }\n }\n}\n\n.stzh-link {\n font-size: var(--font-size);\n line-height: var(--line-height);\n letter-spacing: var(--letter-spacing);\n font-family: inherit;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: stretch;\n appearance: none;\n border: none;\n color: var(--color);\n transition: color $baseTransitionAnimationSpeed;\n cursor: pointer;\n width: 100%;\n text-decoration-line: none;\n background-color: transparent;\n padding: 0;\n border-radius: $buttonBorderRadius;\n text-align: left;\n\n &:hover {\n color: var(--hover-color);\n }\n\n &:hover &__text {\n text-decoration-line: var(--hover-text-decoration-line);\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 --stzh-icon-size: var(--icon-size);\n\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: auto;\n height: var(--icon-wrapper-height);\n }\n\n &__text {\n --stzh-base-color: initial;\n\n text-decoration-line: var(--text-decoration-line);\n }\n\n &__icon-wrapper:not(:empty) + &__text:not(:empty),\n &__text:not(:empty) + &__icon-wrapper:not(:empty) {\n margin-left: space('xxsmall');\n }\n\n &__badge {\n position: absolute;\n z-index: 1;\n top: 0;\n right: 0;\n }\n\n / Variant if link only has icon /\n\n &--has-icon-only &__text {\n @include visuallyhidden;\n }\n\n / Badge positioning variants /\n\n &--badge-position-link &__icon-wrapper {\n position: static;\n }\n\n &__badge,\n &--badge-position-link &__badge {\n top: calc(#{space('xxsmall')} -1);\n right: calc(#{space('large')} * -1);\n }\n\n &--badge-position-icon#{&}--has-icon &__icon-wrapper {\n position: relative;\n }\n\n &--badge-position-icon#{&}--has-icon &__badge {\n top: calc(#{space('xsmall')} * -1);\n right: calc(#{space('small')} * -1);;\n }\n\n &--badge-position-icon#{&}--has-icon#{&}--has-badge &__icon-wrapper + &__text:not(:empty) {\n margin-left: space('small');\n }\n\n /* Alignment variants /\n\n &--align-left &__inner {\n justify-content: flex-start;\n }\n\n &--align-right &__inner {\n justify-content: flex-end;\n }\n\n &--align-center &__inner {\n justify-content: center;\n }\n\n &--align-space-between &__inner {\n justify-content: space-between;\n }\n\n / Disabled variant /\n\n &--is-disabled {\n cursor: not-allowed;\n }\n}\n","import {\n Component,\n Host,\n Fragment,\n Element,\n h,\n Prop,\n Event,\n EventEmitter\n} from \"@stencil/core\";\n\nimport {\n StzhLinkFocusEvent,\n StzhLinkBlurEvent,\n StzhLinkSize,\n StzhBadgeType,\n StzhLinkClickEvent\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\n/\n @slot - Slot for text content\n * @slot icon - Slot for icon element\n /\n@Component({\n tag: \"stzh-link\",\n styleUrl: \"stzh-link.scss\",\n scoped: true\n})\nexport class StzhLink {\n /* Translation strings /\n @Prop() localization: StzhLocaleComponent;\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 /* Height variant (none prevent setting min-height for mikro and small breakpoint) /\n @Prop({ reflect: true }) height: \"default\" \| \"auto\" = \"default\";\n\n /* Size variant /\n @Prop({ reflect: true }) size: StzhLinkSize = \"default\";\n\n /* Size variant (above small breakpoint) /\n @Prop({ reflect: true }) sizeSmall: StzhLinkSize;\n\n /* Size variant (above medium breakpoint) /\n @Prop({ reflect: true }) sizeMedium: StzhLinkSize;\n\n /* Size variant (above large breakpoint) /\n @Prop({ reflect: true }) sizeLarge: StzhLinkSize;\n\n /* Size variant (above ultra breakpoint) /\n @Prop({ reflect: true }) sizeUltra: StzhLinkSize;\n\n /* href attribute of the 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, if used as button (if no href used) /\n @Prop() type: \"button\" \| \"submit\" \| \"reset\" = \"button\";\n\n /* Variant style /\n @Prop({ reflect: true }) variant: \"default\" \| \"secondary\" \| \"back\" = \"default\";\n\n /* Whether the link is full width /\n @Prop({ reflect: true }) fullwidth: boolean = false;\n\n /* Text alignment /\n @Prop({ reflect: true }) textAlign: \"left\" \| \"center\" \| \"right\" \| \"space-between\" \| \"default\" = \"default\";\n\n /* Badge text /\n @Prop() badge: string = \"\";\n\n /* Badge type /\n @Prop({ reflect: true }) badgeType: StzhBadgeType = \"default\";\n\n /* Whether badge should be displayed empty /\n @Prop({ reflect: true }) badgeEmpty: boolean = false;\n\n /* Badge position /\n @Prop({ reflect: true }) badgePosition: \"icon\" \| \"link\" = \"icon\";\n\n /* Disabled status /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* Active status /\n @Prop({ reflect: true }) active: boolean = false;\n\n /* Whether only an icon is used inside the link /\n @Prop({ reflect: true }) iconOnly: boolean = false;\n\n /* Label /\n @Prop() label: string = \"\";\n\n /* Access key of link (usually a number e.g. 1) /\n @Prop() linkAccesskey: string;\n\n /* ID of link element /\n @Prop() linkId: string;\n\n /* Accessible label for screen readers to replace visible text /\n @Prop({ attribute: \"a11y-label\" }) a11yLabel: string;\n\n /* Id for element which describes the button (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) /\n @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n /* Aria expanded of link/button /\n @Prop({ reflect: true, attribute: \"a11y-expanded\" }) a11yExpanded: boolean;\n\n /* Aria disabled of link/button /\n @Prop({ reflect: true, attribute: \"a11y-disabled\" }) a11yDisabled: boolean;\n\n /* Aria controls of link/button /\n @Prop({ attribute: \"a11y-controls\" }) a11yControls: string;\n\n /* Tabindex of link/button /\n @Prop({ attribute: \"a11y-tabindex\" }) a11yTabindex: string;\n\n /* Aria current of link/button /\n @Prop({ attribute: \"a11y-current\" }) a11yCurrent: 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: HTMLStzhLinkElement;\n\n /* Click event /\n @Event() stzhClick: EventEmitter<StzhLinkClickEvent>;\n\n /* Focus event /\n @Event() stzhFocus: EventEmitter<StzhLinkFocusEvent>;\n\n /* Input blur event */\n @Event() stzhBlur: EventEmitter<StzhLinkBlurEvent>;\n\n private link: HTMLButtonElement \| HTMLAnchorElement;\n private text: HTMLDivElement;\n private focusedByInput: boolean = false;\n\n private onRootFocus = () => {\n if (!this.focusedByInput) {\n this.link.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-link\",\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-link\",\n originalEvent: event\n });\n }\n\n private onClick = (event: MouseEvent) => {\n this.stzhClick.emit({\n component: \"stzh-link\",\n originalEvent: event,\n href: this.href\n });\n }\n\n private renderIcon(): HTMLInputElement {\n return (\n <div class=\"stzh-link__icon-wrapper\">\n {this.icon ?\n <stzh-icon class=\"stzh-link__icon\" name={this.icon}></stzh-icon>\n :\n <slot name=\"icon\"></slot>\n }\n {(this.badge \|\| this.badgeEmpty) &&\n <stzh-badge class=\"stzh-link__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-link__text\">\n {this.rel && this.rel.includes('external') && <div class=\"stzh-link__vhidden\">{this.localization.$globals.externalLinkLabel}</div>}\n {this.download && <div class=\"stzh-link__vhidden\">{this.localization.$globals.downloadLinkLabel}</div>}\n <div ref={(el) => (this.text = el as HTMLDivElement)}>{this.label ? this.label : <slot></slot>}</div>\n </div>\n );\n }\n\n private renderInner(iconUsed: boolean): DocumentFragment {\n return (\n <Fragment>\n <div class=\"stzh-link__inner\">\n {this.iconPosition === \"left\" && this.renderIcon()}\n {this.renderContent()}\n {this.iconPosition === \"right\" && this.renderIcon()}\n </div>\n {(this.badge \|\| this.badgeEmpty) && !iconUsed &&\n <stzh-badge class=\"stzh-link__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n }\n </Fragment>\n );\n }\n\n async componentWillLoad() {\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"link\");\n }\n }\n\n componentDidRender() {\n requestAnimationFrame(() => {\n this.link?.setAttribute(\"s-object-id\", this.analyticsId \|\| this.text.innerText);\n });\n }\n\n render() {\n const iconUsed = hasSlot(this.element, \"icon\") \|\| !!this.icon;\n const classes = {\n \"stzh-link\": true,\n \"stzh-link--has-icon\": iconUsed,\n \"stzh-link--has-icon-only\": this.iconOnly,\n \"stzh-link--has-badge\": !!this.badge,\n \"stzh-link--is-fullwidth\": this.fullwidth,\n \"stzh-link--is-disabled\": this.disabled,\n \"stzh-link--is-active\": this.active,\n [`stzh-link--badge-position-${this.badgePosition}`]: !!this.badgePosition,\n [`stzh-link--align-${this.textAlign}`]: !!this.textAlign,\n [`stzh-link--${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.link = el as HTMLAnchorElement)}\n href={this.disabled ? null : this.href}\n download={this.download}\n rel={this.rel}\n target={this.target}\n class={classes}\n id={this.linkId}\n accessKey={this.linkAccesskey}\n tabindex={this.a11yTabindex}\n aria-label={this.a11yLabel \|\| null}\n aria-describedby={this.a11yDescribedby \|\| null}\n aria-disabled={typeof this.a11yDisabled !== \"undefined\"\n ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n aria-controls={this.a11yControls \|\| null}\n aria-current={this.a11yCurrent \|\| null}\n onClick={this.onClick}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n >\n {this.renderInner(iconUsed)}\n </a>\n :\n <button\n ref={(el) => (this.link = el as HTMLButtonElement)}\n class={classes}\n type={this.type}\n disabled={this.disabled}\n id={this.linkId}\n accessKey={this.linkAccesskey}\n tabindex={this.a11yTabindex}\n aria-label={this.a11yLabel \|\| null}\n aria-describedby={this.a11yDescribedby \|\| null}\n aria-disabled={typeof this.a11yDisabled !== \"undefined\"\n ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n aria-controls={this.a11yControls \|\| null}\n aria-current={this.a11yCurrent \|\| null}\n onClick={this.onClick}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n >\n {this.renderInner(iconUsed)}\n </button>\n }\n </Host>\n );\n }\n}\n"],"mappings":"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"}
1	+ {"version":3,"names":["stzhLinkCss","StzhLink","this","focusedByInput","onRootFocus","link","focus","onFocus","event","focusEvent","FocusEvent","view","window","bubbles","cancelable","element","dispatchEvent","stzhFocus","emit","component","originalEvent","onBlur","blurEvent","stzhBlur","onClick","stzhClick","href","renderIcon","h","class","icon","name","badge","badgeEmpty","label","type","badgeType","renderContent","rel","includes","localization","$globals","externalLinkLabel","download","downloadLinkLabel","ref","el","text","renderInner","iconUsed","Fragment","iconPosition","componentWillLoad","stzhComponents","utils","fetchTranslations","componentDidRender","requestAnimationFrame","_a","setAttribute","analyticsId","innerText","render","hasSlot","classes","iconOnly","fullwidth","disabled","active","badgePosition","textAlign","variant","Host","tabindex","target","id","linkId","accessKey","linkAccesskey","a11yTabindex","a11yLabel","a11yDescribedby","a11yDisabled","a11yExpanded","a11yControls","a11yCurrent"],"sources":["src/components/stzh-link/stzh-link.scss?tag=stzh-link&encapsulation=scoped","src/components/stzh-link/stzh-link.tsx"],"sourcesContent":["/*\n @prop --color: Color of link\n * @prop --hover-color: Hover color of link\n * @prop --text-decoration-line: Text decoration of link\n * @prop --hover-text-decoration-line: Hover text decoration of link\n * @prop --icon-size: Size of icon next to link\n * @prop --min-height: Min height of link\n \n @prop --stzh-link-color: Global: Color of link\n * @prop --stzh-link-hover-color: Global: Hover color of link\n * @prop --stzh-link-text-decoration-line: Global: Text decoration of link\n * @prop --stzh-link-hover-text-decoration-line: Global: Text decoration of link\n * @prop --stzh-link-icon-size: Global: Size of icon next to link\n * @prop --stzh-link-text-decoration-thickness: Global: Text decoration thickness\n * @prop --stzh-link-text-decoration-skip-ink: Global: Whether to skip ink in text decoration\n * @prop --stzh-link-text-underline-offset: Global: Text underline offset\n /\n\n@mixin link--size-default() {\n --font-size: var(--stzh-font-milli-font-size);\n --line-height: var(--stzh-font-milli-text-line-height);\n --letter-spacing: normal;\n\n @include mq($from: medium) {\n --font-size: var(--stzh-font-centi-font-size);\n --line-height: var(--stzh-font-centi-text-line-height);\n --letter-spacing: normal;\n }\n}\n\n@mixin link--size-small() {\n --font-size: var(--stzh-font-micro-font-size);\n --line-height: var(--stzh-font-micro-text-line-height);\n --letter-spacing: normal;\n}\n\n@mixin link--size-inherit() {\n --font-size: inherit;\n --line-height: inherit;\n --letter-spacing: inherit;\n}\n\n:host {\n @include link--size-default;\n --color: #{$linkColor};\n --text-decoration-line: #{$linkTextDecorationLine};\n --icon-wrapper-height: #{$linkIconWrapperHeight};\n --icon-size: #{$linkIconSize};\n --height: var(--stzh-link-height, 40px);\n\n --hover-color: #{$linkHoverColor};\n --hover-text-decoration-line: #{$linkHoverTextDecorationLine};\n\n @include mq($from: medium) {\n --height: var(--stzh-link-height, auto);\n }\n\n color: var(--color);\n display: inline-grid;\n width: auto;\n min-height: var(--height);\n pointer-events: var(--stzh-link-pointer-events, auto);\n\n &[height=\"auto\"] {\n --height: var(--stzh-link-auto-height, auto);\n }\n\n &[fullwidth]:not([fullwidth=\"false\"]) {\n width: 100%;\n display: grid;\n }\n\n &[variant=\"secondary\"] {\n --color: #{$linkSecondaryColor};\n --hover-color: #{$linkSecondaryHoverColor};\n }\n\n &[variant=\"back\"] {\n --text-decoration-line: none;\n --hover-color: var(--color);\n }\n\n &[active]:not([active=\"false\"]) {\n --color: var(--hover-color);\n }\n\n &[disabled]:not([disabled=\"false\"]) {\n --color: #{$colorGrey60};\n --hover-color: #{$colorGrey60};\n }\n}\n\n:host(:where([size=\"small\"])) {\n @include link--size-small;\n}\n\n:host(:where([size=\"inherit\"])) {\n @include link--size-inherit;\n}\n\n@each $breakpoint, $size in $breakpoints {\n @include mq($from: $breakpoint) {\n :host(:where([size-#{$breakpoint}=\"default\"])) {\n @include link--size-default;\n }\n \n :host(:where([size-#{$breakpoint}=\"small\"])) {\n @include link--size-small;\n }\n \n :host(:where([size-#{$breakpoint}=\"inherit\"])) {\n @include link--size-inherit;\n }\n }\n}\n\n.stzh-link {\n font-size: var(--font-size);\n line-height: var(--line-height);\n letter-spacing: var(--letter-spacing);\n font-family: inherit;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: stretch;\n appearance: none;\n border: none;\n color: var(--color);\n transition: color $baseTransitionAnimationSpeed;\n cursor: pointer;\n width: 100%;\n text-decoration-line: none;\n background-color: transparent;\n padding: 0;\n border-radius: $buttonBorderRadius;\n text-align: left;\n\n &:hover {\n color: var(--hover-color);\n }\n\n &:hover &__text {\n text-decoration-line: var(--hover-text-decoration-line);\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 --stzh-icon-size: var(--icon-size);\n\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: auto;\n height: var(--icon-wrapper-height);\n }\n\n &__text {\n --stzh-base-color: initial;\n\n text-decoration-line: var(--text-decoration-line);\n }\n\n &__icon-wrapper:not(:empty) + &__text:not(:empty),\n &__text:not(:empty) + &__icon-wrapper:not(:empty) {\n margin-left: space('xxsmall');\n }\n\n &__badge {\n position: absolute;\n z-index: 1;\n top: 0;\n right: 0;\n }\n\n / Variant if link only has icon /\n\n &--has-icon-only &__text {\n @include visuallyhidden;\n }\n\n / Badge positioning variants /\n\n &--badge-position-link &__icon-wrapper {\n position: static;\n }\n\n &__badge,\n &--badge-position-link &__badge {\n top: calc(#{space('xxsmall')} -1);\n right: calc(#{space('large')} * -1);\n }\n\n &--badge-position-icon#{&}--has-icon &__icon-wrapper {\n position: relative;\n }\n\n &--badge-position-icon#{&}--has-icon &__badge {\n top: calc(#{space('xsmall')} * -1);\n right: calc(#{space('small')} * -1);;\n }\n\n &--badge-position-icon#{&}--has-icon#{&}--has-badge &__icon-wrapper + &__text:not(:empty) {\n margin-left: space('small');\n }\n\n /* Alignment variants /\n\n &--align-left &__inner {\n justify-content: flex-start;\n }\n\n &--align-right &__inner {\n justify-content: flex-end;\n }\n\n &--align-center &__inner {\n justify-content: center;\n }\n\n &--align-space-between &__inner {\n justify-content: space-between;\n }\n\n / Disabled variant /\n\n &--is-disabled {\n cursor: not-allowed;\n }\n}\n","import {\n Component,\n Host,\n Fragment,\n Element,\n h,\n Prop,\n Event,\n EventEmitter\n} from \"@stencil/core\";\n\nimport {\n StzhLinkFocusEvent,\n StzhLinkBlurEvent,\n StzhLinkSize,\n StzhBadgeType,\n StzhLinkClickEvent\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\n/\n @slot icon - Slot for icon element\n * @slot - Slot for label/text content\n /\n@Component({\n tag: \"stzh-link\",\n styleUrl: \"stzh-link.scss\",\n scoped: true\n})\nexport class StzhLink {\n /* Translation strings /\n @Prop() localization: StzhLocaleComponent;\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 /* Height variant (none prevent setting min-height for mikro and small breakpoint) /\n @Prop({ reflect: true }) height: \"default\" \| \"auto\" = \"default\";\n\n /* Size variant /\n @Prop({ reflect: true }) size: StzhLinkSize = \"default\";\n\n /* Size variant (above small breakpoint) /\n @Prop({ reflect: true }) sizeSmall: StzhLinkSize;\n\n /* Size variant (above medium breakpoint) /\n @Prop({ reflect: true }) sizeMedium: StzhLinkSize;\n\n /* Size variant (above large breakpoint) /\n @Prop({ reflect: true }) sizeLarge: StzhLinkSize;\n\n /* Size variant (above ultra breakpoint) /\n @Prop({ reflect: true }) sizeUltra: StzhLinkSize;\n\n /* href attribute of the 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, if used as button (if no href used) /\n @Prop() type: \"button\" \| \"submit\" \| \"reset\" = \"button\";\n\n /* Variant style /\n @Prop({ reflect: true }) variant: \"default\" \| \"secondary\" \| \"back\" = \"default\";\n\n /* Whether the link is full width /\n @Prop({ reflect: true }) fullwidth: boolean = false;\n\n /* Text alignment /\n @Prop({ reflect: true }) textAlign: \"left\" \| \"center\" \| \"right\" \| \"space-between\" \| \"default\" = \"default\";\n\n /* Badge text /\n @Prop() badge: string = \"\";\n\n /* Badge type /\n @Prop({ reflect: true }) badgeType: StzhBadgeType = \"default\";\n\n /* Whether badge should be displayed empty /\n @Prop({ reflect: true }) badgeEmpty: boolean = false;\n\n /* Badge position /\n @Prop({ reflect: true }) badgePosition: \"icon\" \| \"link\" = \"icon\";\n\n /* Disabled status /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* Active status /\n @Prop({ reflect: true }) active: boolean = false;\n\n /* Whether only an icon is used inside the link /\n @Prop({ reflect: true }) iconOnly: boolean = false;\n\n /* Label /\n @Prop() label: string = \"\";\n\n /* Access key of link (usually a number e.g. 1) /\n @Prop() linkAccesskey: string;\n\n /* ID of link element /\n @Prop() linkId: string;\n\n /* Accessible label for screen readers to replace visible text /\n @Prop({ attribute: \"a11y-label\" }) a11yLabel: string;\n\n /* Id for element which describes the button (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) /\n @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n /* Aria expanded of link/button /\n @Prop({ reflect: true, attribute: \"a11y-expanded\" }) a11yExpanded: boolean;\n\n /* Aria disabled of link/button /\n @Prop({ reflect: true, attribute: \"a11y-disabled\" }) a11yDisabled: boolean;\n\n /* Aria controls of link/button /\n @Prop({ attribute: \"a11y-controls\" }) a11yControls: string;\n\n /* Tabindex of link/button /\n @Prop({ attribute: \"a11y-tabindex\" }) a11yTabindex: string;\n\n /* Aria current of link/button /\n @Prop({ attribute: \"a11y-current\" }) a11yCurrent: 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: HTMLStzhLinkElement;\n\n /* Click event /\n @Event() stzhClick: EventEmitter<StzhLinkClickEvent>;\n\n /* Focus event /\n @Event() stzhFocus: EventEmitter<StzhLinkFocusEvent>;\n\n /* Input blur event */\n @Event() stzhBlur: EventEmitter<StzhLinkBlurEvent>;\n\n private link: HTMLButtonElement \| HTMLAnchorElement;\n private text: HTMLDivElement;\n private focusedByInput: boolean = false;\n\n private onRootFocus = () => {\n if (!this.focusedByInput) {\n this.link.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-link\",\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-link\",\n originalEvent: event\n });\n }\n\n private onClick = (event: MouseEvent) => {\n this.stzhClick.emit({\n component: \"stzh-link\",\n originalEvent: event,\n href: this.href\n });\n }\n\n private renderIcon(): HTMLInputElement {\n return (\n <div class=\"stzh-link__icon-wrapper\">\n {this.icon ?\n <stzh-icon class=\"stzh-link__icon\" name={this.icon}></stzh-icon>\n :\n <slot name=\"icon\"></slot>\n }\n {(this.badge \|\| this.badgeEmpty) &&\n <stzh-badge class=\"stzh-link__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-link__text\">\n {this.rel && this.rel.includes('external') && <div class=\"stzh-link__vhidden\">{this.localization.$globals.externalLinkLabel}</div>}\n {this.download && <div class=\"stzh-link__vhidden\">{this.localization.$globals.downloadLinkLabel}</div>}\n <div ref={(el) => (this.text = el as HTMLDivElement)}>{this.label ? this.label : <slot></slot>}</div>\n </div>\n );\n }\n\n private renderInner(iconUsed: boolean): DocumentFragment {\n return (\n <Fragment>\n <div class=\"stzh-link__inner\">\n {this.iconPosition === \"left\" && this.renderIcon()}\n {this.renderContent()}\n {this.iconPosition === \"right\" && this.renderIcon()}\n </div>\n {(this.badge \|\| this.badgeEmpty) && !iconUsed &&\n <stzh-badge class=\"stzh-link__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n }\n </Fragment>\n );\n }\n\n async componentWillLoad() {\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"link\");\n }\n }\n\n componentDidRender() {\n requestAnimationFrame(() => {\n this.link?.setAttribute(\"s-object-id\", this.analyticsId \|\| this.text.innerText);\n });\n }\n\n render() {\n const iconUsed = hasSlot(this.element, \"icon\") \|\| !!this.icon;\n const classes = {\n \"stzh-link\": true,\n \"stzh-link--has-icon\": iconUsed,\n \"stzh-link--has-icon-only\": this.iconOnly,\n \"stzh-link--has-badge\": !!this.badge,\n \"stzh-link--is-fullwidth\": this.fullwidth,\n \"stzh-link--is-disabled\": this.disabled,\n \"stzh-link--is-active\": this.active,\n [`stzh-link--badge-position-${this.badgePosition}`]: !!this.badgePosition,\n [`stzh-link--align-${this.textAlign}`]: !!this.textAlign,\n [`stzh-link--${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.link = el as HTMLAnchorElement)}\n href={this.disabled ? null : this.href}\n download={this.download}\n rel={this.rel}\n target={this.target}\n class={classes}\n id={this.linkId}\n accessKey={this.linkAccesskey}\n tabindex={this.a11yTabindex}\n aria-label={this.a11yLabel \|\| null}\n aria-describedby={this.a11yDescribedby \|\| null}\n aria-disabled={typeof this.a11yDisabled !== \"undefined\"\n ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n aria-controls={this.a11yControls \|\| null}\n aria-current={this.a11yCurrent \|\| null}\n onClick={this.onClick}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n >\n {this.renderInner(iconUsed)}\n </a>\n :\n <button\n ref={(el) => (this.link = el as HTMLButtonElement)}\n class={classes}\n type={this.type}\n disabled={this.disabled}\n id={this.linkId}\n accessKey={this.linkAccesskey}\n tabindex={this.a11yTabindex}\n aria-label={this.a11yLabel \|\| null}\n aria-describedby={this.a11yDescribedby \|\| null}\n aria-disabled={typeof this.a11yDisabled !== \"undefined\"\n ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n aria-controls={this.a11yControls \|\| null}\n aria-current={this.a11yCurrent \|\| null}\n onClick={this.onClick}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n >\n {this.renderInner(iconUsed)}\n </button>\n }\n </Host>\n );\n }\n}\n"],"mappings":"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"}

package/dist/stzh-components/p-30a522e0.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["stzhPiPagetitleCss","StzhPiPagetitle","this","init","heading","element","querySelector","leads","querySelectorAll","readspeakerButton","setPropsIfNull","curve","level","variant","noPaddingLeft","noPaddingRight","size","sizeMedium","buttonAccesskey","forEach","lead","handleLevelChange","menuElement","breakout","componentDidLoad","connectedCallback","render","imageSlotUsed","hasSlot","leadSlotUsed","readspeakerSlotUsed","menuSlotUsed","hasArticleInfo","author","date","classes","h","Host","class","name","indexOf","ratio","ratioSmall"],"sources":["src/components/stzh-pi-pagetitle/stzh-pi-pagetitle.scss?tag=stzh-pi-pagetitle&encapsulation=scoped","src/components/stzh-pi-pagetitle/stzh-pi-pagetitle.tsx"],"sourcesContent":["/*\n @prop --stzh-pi-pagetitle-hero-background-color: Background color\n * @prop --stzh-pi-pagetitle-lead-background-color: Background of lead section\n /\n\n:host {\n --hero-background-color: var(--stzh-pi-pagetitle-hero-background-color, #{$colorPrimary10});\n --lead-background-color: var(--stzh-pi-pagetitle-lead-background-color, #{$colorPrimary40});\n --grid-template-areas: \"hero hero hero hero\" \"image-lead-menu image-lead-menu image-lead-menu image-lead-menu\";\n\n @include mq($from: medium) {\n --grid-template-areas: \". . hero hero hero hero . .\" \"image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu\";\n }\n\n @include mq($from: large) {\n --grid-template-areas: \". . . hero hero hero hero hero hero . . .\" \"image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu\";\n }\n\n ::slotted([slot=\"dateline\"]) {\n @include fontSize('milli');\n @include font('heavy');\n --color: var(--stzh-color-black80op);\n }\n\n ::slotted([slot=\"heading\"]),\n ::slotted([slot=\"lead\"]) ,\n ::slotted([slot=\"breadcrumb\"]) {\n --color: var(--stzh-color-black);\n }\n\n ::slotted([slot=\"readspeaker\"]) * {\n --color: var(--stzh-color-coolgrey70);\n --hover-color: var(--stzh-color-coolgrey70);\n }\n\n ::slotted([slot=\"menu\"]) {\n --stzh-pi-menu-padding-left: #{$containerMargin};\n\n @include mq($from: small) {\n --stzh-pi-menu-padding-left: #{$containerMarginSmall};\n }\n\n @include mq($from: large) {\n --stzh-pi-menu-padding-left: #{$containerMarginLarge};\n }\n\n @include mq($from: ultra) {\n --stzh-pi-menu-padding-left: calc((100vw - #{$containerMaxWidth}) / 2);\n }\n }\n}\n\n.stzh-pi-pagetitle {\n @include spaceCurve('margin-bottom', 'large');\n\n\n /* Containers /\n\n &__hero-container {\n @include grid;\n grid-template-areas: var(--grid-template-areas);\n background-color: var(--hero-background-color);\n @include spaceCurve('padding-top', 'regular');\n @include containerPadding;\n }\n\n &__image-lead-menu-container {\n @include grid;\n grid-template-areas: var(--grid-template-areas);\n background-color: var(--hero-background-color);\n\n @include mq($from: medium) {\n @include containerPadding;\n }\n }\n\n &__lead-container {\n @include grid;\n grid-template-areas: \"lead lead lead lead\";\n background-color: var(--lead-background-color);\n @include containerPadding;\n\n @include mq($from: medium) {\n grid-template-areas: \". . lead lead lead lead lead lead\";\n }\n\n @include mq($from: large) {\n grid-template-areas: \". . . lead lead lead lead lead lead . . .\";\n }\n }\n\n &__image-lead-menu {\n grid-area: image-lead-menu;\n\n @include grid;\n grid-template-areas: \"image image image image\" \"lead lead lead lead\";\n\n @include mq($from: medium) {\n grid-template-areas: \". . image image image image image image\" \"lead lead lead lead lead lead lead lead\";\n }\n\n @include mq($from: large) {\n grid-template-areas: \". . . image image image image image image image image image\" \"lead lead lead lead lead lead lead lead lead lead lead lead\";\n }\n }\n\n / Elements /\n\n &__hero {\n grid-area: hero;\n }\n\n &__menu {\n display: none;\n grid-area: menu;\n }\n\n &__image {\n grid-area: image;\n\n @include mq($from: medium) {\n margin-right: -$containerMarginMedium;\n }\n\n @include mq($from: large) {\n margin-right: -$containerMarginLarge;\n }\n\n @include mq($from: ultra) {\n margin-right: calc((100vw - #{$containerMaxWidth}) / -2)\n }\n }\n\n &__lead {\n --stzh-base-lead-color: #{$headingColor};\n grid-area: lead;\n background-color: var(--lead-background-color);\n @include spaceCurve('padding-top', 'regular');\n @include spaceCurve('padding-bottom', 'regular');\n }\n\n &__text {\n @include spaceCurve('padding-top', 'big');\n @include spaceCurve('padding-bottom', 'big');\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n\n &__meta {\n display: flex;\n flex-direction: column-reverse;\n row-gap: space('xsmall');\n\n @include mq($from: medium) {\n flex-direction: row;\n }\n }\n\n &__readspeaker {\n margin-bottom: space('medium');\n\n @include mq($from: small) {\n margin-bottom: space('large');\n }\n\n @include mq($from: small, $to: medium) {\n --stzh-readspeaker-dropdown-position: relative;\n --stzh-readspeaker-dropdown-top: auto;\n }\n }\n\n\n &__dateline {\n margin-bottom: space('xxsmall');\n\n @include mq($from: medium) {\n @include spaceCurve('margin-bottom', 'small');\n }\n }\n\n &__breadcrumbs {\n @include spaceCurve('margin-bottom', 'regular');\n }\n\n &__heading {\n @include spaceCurve('margin-bottom', 'regular');\n }\n\n /\n Menu.\n /\n\n &__menu-inner {\n @include mq($from: medium) {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n }\n }\n\n\n / Article Info /\n &__article-info-wrapper {\n @include container();\n @include spaceCurve('padding-top', 'large');\n @include grid;\n grid-template-areas: \"article-info article-info article-info article-info\";\n\n @include mq($from: medium) {\n grid-template-areas: \". . article-info article-info article-info article-info article-info article-info\";\n }\n\n @include mq($from: large) {\n grid-template-areas: \". . . article-info article-info article-info article-info article-info article-info article-info article-info article-info\";\n }\n }\n\n &__article-info {\n grid-area: article-info;\n }\n\n &__author {\n margin-top: 0;\n margin-bottom: var(--stzh-space-xxsmall);\n color: var(--stzh-color-coolgrey70);\n @include font('heavy');\n @include fontCurve('p1');\n }\n\n &__date {\n margin: 0;\n @include fontCurve('p1');\n }\n\n /\n Has menu.\n /\n &--has-menu &__image-lead-menu {\n grid-template-columns: auto repeat(3, minmax(0, 1fr));\n grid-template-areas: \"menu image image image\" \"menu lead lead lead\";\n\n @include mq($from: medium) {\n grid-template-columns: $gridColumnsMedium;\n grid-template-areas: \"menu menu image image image image image image\" \"menu menu lead lead lead lead lead lead\";\n }\n\n @include mq($from: large) {\n grid-template-columns: $gridColumnsLarge;\n grid-template-areas: \"menu menu menu image image image image image image image image image\" \"menu menu menu lead lead lead lead lead lead lead lead lead\";\n }\n }\n\n &--has-menu &__image-lead-menu-container {\n background-color: var(--stzh-color-coolgrey10);\n }\n\n &--has-menu &__menu {\n position: relative;\n display: inherit;\n margin-right: calc(#{$gridGutter} -1);\n\n @include mq($from: small) {\n margin-right: calc(#{$gridGutterSmall} * -1);\n }\n\n @include mq($from: medium) {\n margin-right: calc(#{$gridGutterMedium} * -1);\n margin-left: -$containerMarginMedium;\n }\n\n @include mq($from: large) {\n margin-right: calc(#{$gridGutterLarge} * -1);\n margin-left: -$containerMarginLarge;\n }\n\n @include mq($from: ultra) {\n margin-right: calc(#{$gridGutterUltra} * -1);\n margin-left: calc((100vw - #{$containerMaxWidth}) / -2);\n }\n }\n\n &--has-menu &__lead {\n @include spaceCurve('padding-left', 'regular');\n\n @include mq($from: medium) {\n margin-right: -$containerMarginMedium;\n padding-right: $containerMarginMedium;\n }\n\n @include mq($from: large) {\n margin-right: -$containerMarginLarge;\n padding-right: $containerMarginLarge;\n }\n\n @include mq($from: ultra) {\n margin-right: calc((100vw - #{$containerMaxWidth}) / -2);\n padding-right: calc((100vw - 84.25rem) / 2);\n }\n }\n\n /* Has meta /\n\n &--has-meta &__text {\n @include spaceCurve('padding-top', 'regular');\n }\n\n / Level 3-4 /\n &--level-3,\n &--level-4 {\n --hero-background-color: var(--stzh-color-coolgrey20);\n --lead-background-color: var(--stzh-color-coolgrey30);\n }\n}\n\n","import { Component, Element, h, Host, Prop, Watch } from \"@stencil/core\";\n\nimport { hasSlot, setPropsIfNull } from \"../../utils/utils\";\n\n/\n @slot heading - Slot for `stzh-heading` element\n * @slot image - Slot for `stzh-figure` or `img` element\n * @slot lead - Slot for `stzh-text` element\n * @slot readspeaker - Slot for `stzh-readspeaker` element\n /\n@Component({\n tag: \"stzh-pi-pagetitle\",\n styleUrl: \"stzh-pi-pagetitle.scss\",\n scoped: true,\n})\nexport class StzhPiPagetitle {\n /* Level /\n @Prop({ reflect: true }) level: 1 \| 2 \| 3 \| 4 = 1;\n\n /* Author of the content /\n @Prop({ reflect: true }) author: string = \"\";\n\n /* Date of the content */\n @Prop({ reflect: true }) date: string = \"\";\n\n @Element() element: HTMLStzhPiPagetitleElement;\n\n private init = () => {\n const heading = this.element.querySelector('stzh-heading[slot=\"heading\"], [slot=\"heading\"] stzh-heading');\n const leads = this.element.querySelectorAll('stzh-text[slot=\"lead\"], [slot=\"lead\"] stzh-text');\n const readspeakerButton = this.element.querySelector('[slot=\"readspeaker\"] stzh-button');\n\n if (heading) {\n setPropsIfNull(heading, {\n curve: \"hero\",\n level: \"1\",\n } as HTMLStzhHeadingElement);\n }\n\n if (readspeakerButton) {\n setPropsIfNull(readspeakerButton, {\n variant: \"tertiary-plain\",\n noPaddingLeft: true,\n noPaddingRight: true,\n size: \"small\",\n sizeMedium: \"tiny\",\n buttonAccesskey: \"L\",\n } as HTMLStzhButtonElement);\n }\n\n leads.forEach(lead => {\n setPropsIfNull(lead, {\n lead: true,\n } as HTMLStzhTextElement);\n });\n };\n\n @Watch(\"level\")\n handleLevelChange(level: number) {\n const menuElement = this.element.querySelector(\"stzh-pi-menu\");\n if (menuElement) {\n menuElement.breakout = level >= 3;\n }\n }\n\n async componentDidLoad() {\n this.handleLevelChange(this.level);\n }\n\n connectedCallback() {\n this.init();\n }\n\n render() {\n const imageSlotUsed = hasSlot(this.element, \"image\");\n const leadSlotUsed = hasSlot(this.element, \"lead\");\n const readspeakerSlotUsed = hasSlot(this.element, \"readspeaker\");\n const menuSlotUsed = hasSlot(this.element, \"menu\");\n const hasArticleInfo = !!this.author \|\| !!this.date;\n\n const classes = {\n \"stzh-pi-pagetitle\": true,\n \"stzh-pi-pagetitle--has-image\": imageSlotUsed,\n \"stzh-pi-pagetitle--has-no-image\": !imageSlotUsed,\n \"stzh-pi-pagetitle--has-lead\": leadSlotUsed,\n \"stzh-pi-pagetitle--has-meta\": readspeakerSlotUsed,\n \"stzh-pi-pagetitle--has-menu\": menuSlotUsed,\n \"stzh-pi-pagetitle--has-article-info\": hasArticleInfo,\n [`stzh-pi-pagetitle--level-${this.level}`]: !!this.level,\n };\n\n return (\n <Host has-menu={menuSlotUsed} has-article-info={hasArticleInfo}>\n <div class={classes}>\n <div class=\"stzh-pi-pagetitle__hero-container\">\n <div class=\"stzh-pi-pagetitle__hero\">\n <div class=\"stzh-pi-pagetitle__breadcrumbs\">\n <slot name=\"breadcrumb\"></slot>\n </div>\n\n <div class=\"stzh-pi-pagetitle__meta\">\n <div class=\"stzh-pi-pagetitle__readspeaker\">\n <slot name=\"readspeaker\"></slot>\n </div>\n </div>\n\n <div class=\"stzh-pi-pagetitle__dateline\">\n <slot name=\"dateline\"></slot>\n </div>\n\n <div class=\"stzh-pi-pagetitle__heading\">\n <slot name=\"heading\"></slot>\n </div>\n </div>\n </div>\n <div class=\"stzh-pi-pagetitle__image-lead-menu-container\">\n <div class=\"stzh-pi-pagetitle__image-lead-menu\">\n <div class=\"stzh-pi-pagetitle__menu\">\n {menuSlotUsed && (\n <div class=\"stzh-pi-pagetitle__menu-inner\">\n <slot name=\"menu\"></slot>\n </div>\n )}\n </div>\n\n <div class=\"stzh-pi-pagetitle__image\">\n {[1, 2].indexOf(this.level) > -1 && (\n <div class=\"stzh-pi-pagetitle__image-wrapper\">\n <stzh-ratio ratio={\"16:9\"} ratioSmall={\"21:9\"} class=\"stzh-pi-pagetitle__ratio\">\n <slot name={\"image\"}></slot>\n </stzh-ratio>\n </div>\n )}\n </div>\n\n {menuSlotUsed && (\n <div class=\"stzh-pi-pagetitle__lead\">\n <slot name=\"lead\"></slot>\n </div>\n )}\n </div>\n </div>\n\n {!menuSlotUsed && (\n <div class=\"stzh-pi-pagetitle__lead-container\">\n <div class=\"stzh-pi-pagetitle__lead\">\n <slot name=\"lead\"></slot>\n </div>\n </div>\n )}\n\n {hasArticleInfo && (\n <div class=\"stzh-pi-pagetitle__article-info-wrapper\">\n <div class=\"stzh-pi-pagetitle__article-info\">\n {this.author && <p class=\"stzh-pi-pagetitle__author\">{this.author}</p>}\n {this.date && <p class=\"stzh-pi-pagetitle__date\">{this.date}</p>}\n </div>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"4HAAA,MAAMA,EAAqB,u3xB,MCedC,EAAe,M,yBAYlBC,KAAAC,KAAO,KACb,MAAMC,EAAUF,KAAKG,QAAQC,cAAc,+DAC3C,MAAMC,EAAQL,KAAKG,QAAQG,iBAAiB,mDAC5C,MAAMC,EAAoBP,KAAKG,QAAQC,cAAc,oCAErD,GAAIF,EAAS,CACXM,EAAeN,EAAS,CACtBO,MAAO,OACPC,MAAO,K,CAIX,GAAIH,EAAmB,CACrBC,EAAeD,EAAmB,CAChCI,QAAS,iBACTC,cAAe,KACfC,eAAgB,KAChBC,KAAM,QACNC,WAAY,OACZC,gBAAiB,K,CAIrBX,EAAMY,SAAQC,IACZV,EAAeU,EAAM,CACnBA,KAAM,MACiB,GACzB,E,WArC4C,E,YAGN,G,UAGF,E,CAmCxC,iBAAAC,CAAkBT,GAChB,MAAMU,EAAcpB,KAAKG,QAAQC,cAAc,gBAC/C,GAAIgB,EAAa,CACfA,EAAYC,SAAWX,GAAS,C,EAIpC,sBAAMY,GACJtB,KAAKmB,kBAAkBnB,KAAKU,M,CAG9B,iBAAAa,GACEvB,KAAKC,M,CAGP,MAAAuB,GACE,MAAMC,EAAgBC,EAAQ1B,KAAKG,QAAS,SAC5C,MAAMwB,EAAeD,EAAQ1B,KAAKG,QAAS,QAC3C,MAAMyB,EAAsBF,EAAQ1B,KAAKG,QAAS,eAClD,MAAM0B,EAAeH,EAAQ1B,KAAKG,QAAS,QAC3C,MAAM2B,IAAmB9B,KAAK+B,UAAY/B,KAAKgC,KAE/C,MAAMC,EAAU,CACd,oBAAqB,KACrB,+BAAgCR,EAChC,mCAAoCA,EACpC,8BAA+BE,EAC/B,8BAA+BC,EAC/B,8BAA+BC,EAC/B,sCAAuCC,EACvC,CAAC,4BAA4B9B,KAAKU,WAAYV,KAAKU,OAGrD,OACEwB,EAACC,EAAI,YAAWN,EAAY,mBAAoBC,GAC9CI,EAAA,OAAKE,MAAOH,GACVC,EAAA,OAAKE,MAAM,qCACTF,EAAA,OAAKE,MAAM,2BACTF,EAAA,OAAKE,MAAM,kCACTF,EAAA,QAAMG,KAAK,gBAGbH,EAAA,OAAKE,MAAM,2BACTF,EAAA,OAAKE,MAAM,kCACTF,EAAA,QAAMG,KAAK,kBAIfH,EAAA,OAAKE,MAAM,+BACTF,EAAA,QAAMG,KAAK,cAGbH,EAAA,OAAKE,MAAM,8BACTF,EAAA,QAAMG,KAAK,eAIjBH,EAAA,OAAKE,MAAM,gDACTF,EAAA,OAAKE,MAAM,sCACTF,EAAA,OAAKE,MAAM,2BACRP,GACCK,EAAA,OAAKE,MAAM,iCACTF,EAAA,QAAMG,KAAK,WAKjBH,EAAA,OAAKE,MAAM,4BACR,CAAC,EAAG,GAAGE,QAAQtC,KAAKU,QAAU,GAC7BwB,EAAA,OAAKE,MAAM,oCACTF,EAAA,cAAYK,MAAO,OAAQC,WAAY,OAAQJ,MAAM,4BACnDF,EAAA,QAAMG,KAAM,aAMnBR,GACCK,EAAA,OAAKE,MAAM,2BACTF,EAAA,QAAMG,KAAK,aAMjBR,GACAK,EAAA,OAAKE,MAAM,qCACTF,EAAA,OAAKE,MAAM,2BACTF,EAAA,QAAMG,KAAK,WAKhBP,GACCI,EAAA,OAAKE,MAAM,2CACTF,EAAA,OAAKE,MAAM,mCACRpC,KAAK+B,QAAUG,EAAA,KAAGE,MAAM,6BAA6BpC,KAAK+B,QAC1D/B,KAAKgC,MAAQE,EAAA,KAAGE,MAAM,2BAA2BpC,KAAKgC,S"}
1	+ {"version":3,"names":["stzhPiPagetitleCss","StzhPiPagetitle","this","init","heading","element","querySelector","leads","querySelectorAll","readspeakerButton","setPropsIfNull","curve","level","variant","noPaddingLeft","noPaddingRight","size","sizeMedium","buttonAccesskey","forEach","lead","handleLevelChange","menuElement","breakout","componentDidLoad","connectedCallback","render","imageSlotUsed","hasSlot","leadSlotUsed","readspeakerSlotUsed","menuSlotUsed","hasArticleInfo","author","date","classes","h","Host","class","name","indexOf","ratio","ratioSmall"],"sources":["src/components/stzh-pi-pagetitle/stzh-pi-pagetitle.scss?tag=stzh-pi-pagetitle&encapsulation=scoped","src/components/stzh-pi-pagetitle/stzh-pi-pagetitle.tsx"],"sourcesContent":["/*\n @prop --stzh-pi-pagetitle-hero-background-color: Background color\n * @prop --stzh-pi-pagetitle-lead-background-color: Background of lead section\n /\n\n:host {\n --hero-background-color: var(--stzh-pi-pagetitle-hero-background-color, #{$colorPrimary10});\n --lead-background-color: var(--stzh-pi-pagetitle-lead-background-color, #{$colorPrimary40});\n --grid-template-areas: \"hero hero hero hero\" \"image-lead-menu image-lead-menu image-lead-menu image-lead-menu\";\n\n @include mq($from: medium) {\n --grid-template-areas: \". . hero hero hero hero . .\" \"image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu\";\n }\n\n @include mq($from: large) {\n --grid-template-areas: \". . . hero hero hero hero hero hero . . .\" \"image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu\";\n }\n\n ::slotted([slot=\"dateline\"]) {\n @include fontSize('milli');\n @include font('heavy');\n --color: var(--stzh-color-black80op);\n }\n\n ::slotted([slot=\"heading\"]),\n ::slotted([slot=\"lead\"]) ,\n ::slotted([slot=\"breadcrumb\"]) {\n --color: var(--stzh-color-black);\n }\n\n ::slotted([slot=\"readspeaker\"]) * {\n --color: var(--stzh-color-coolgrey70);\n --hover-color: var(--stzh-color-coolgrey70);\n }\n\n ::slotted([slot=\"menu\"]) {\n --stzh-pi-menu-padding-left: #{$containerMargin};\n\n @include mq($from: small) {\n --stzh-pi-menu-padding-left: #{$containerMarginSmall};\n }\n\n @include mq($from: large) {\n --stzh-pi-menu-padding-left: #{$containerMarginLarge};\n }\n\n @include mq($from: ultra) {\n --stzh-pi-menu-padding-left: calc((100vw - #{$containerMaxWidth}) / 2);\n }\n }\n}\n\n.stzh-pi-pagetitle {\n @include spaceCurve('margin-bottom', 'large');\n\n\n /* Containers /\n\n &__hero-container {\n @include grid;\n grid-template-areas: var(--grid-template-areas);\n background-color: var(--hero-background-color);\n @include spaceCurve('padding-top', 'regular');\n @include containerPadding;\n }\n\n &__image-lead-menu-container {\n @include grid;\n grid-template-areas: var(--grid-template-areas);\n background-color: var(--hero-background-color);\n\n @include mq($from: medium) {\n @include containerPadding;\n }\n }\n\n &__lead-container {\n @include grid;\n grid-template-areas: \"lead lead lead lead\";\n background-color: var(--lead-background-color);\n @include containerPadding;\n\n @include mq($from: medium) {\n grid-template-areas: \". . lead lead lead lead lead lead\";\n }\n\n @include mq($from: large) {\n grid-template-areas: \". . . lead lead lead lead lead lead . . .\";\n }\n }\n\n &__image-lead-menu {\n grid-area: image-lead-menu;\n\n @include grid;\n grid-template-areas: \"image image image image\" \"lead lead lead lead\";\n\n @include mq($from: medium) {\n grid-template-areas: \". . image image image image image image\" \"lead lead lead lead lead lead lead lead\";\n }\n\n @include mq($from: large) {\n grid-template-areas: \". . . image image image image image image image image image\" \"lead lead lead lead lead lead lead lead lead lead lead lead\";\n }\n }\n\n / Elements /\n\n &__hero {\n grid-area: hero;\n }\n\n &__menu {\n display: none;\n grid-area: menu;\n }\n\n &__image {\n grid-area: image;\n\n @include mq($from: medium) {\n margin-right: -$containerMarginMedium;\n }\n\n @include mq($from: large) {\n margin-right: -$containerMarginLarge;\n }\n\n @include mq($from: ultra) {\n margin-right: calc((100vw - #{$containerMaxWidth}) / -2)\n }\n }\n\n &__lead {\n --stzh-base-lead-color: #{$headingColor};\n grid-area: lead;\n background-color: var(--lead-background-color);\n @include spaceCurve('padding-top', 'regular');\n @include spaceCurve('padding-bottom', 'regular');\n }\n\n &__text {\n @include spaceCurve('padding-top', 'big');\n @include spaceCurve('padding-bottom', 'big');\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n\n &__meta {\n display: flex;\n flex-direction: column-reverse;\n row-gap: space('xsmall');\n\n @include mq($from: medium) {\n flex-direction: row;\n }\n }\n\n &__readspeaker {\n margin-bottom: space('medium');\n\n @include mq($from: small) {\n margin-bottom: space('large');\n }\n\n @include mq($from: small, $to: medium) {\n --stzh-readspeaker-dropdown-position: relative;\n --stzh-readspeaker-dropdown-top: auto;\n }\n }\n\n\n &__dateline {\n margin-bottom: space('xxsmall');\n\n @include mq($from: medium) {\n @include spaceCurve('margin-bottom', 'small');\n }\n }\n\n &__breadcrumbs {\n @include spaceCurve('margin-bottom', 'regular');\n }\n\n &__heading {\n @include spaceCurve('margin-bottom', 'regular');\n }\n\n /\n Menu.\n /\n\n &__menu-inner {\n @include mq($from: medium) {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n }\n }\n\n\n / Article Info /\n &__article-info-wrapper {\n @include container();\n @include spaceCurve('padding-top', 'large');\n @include grid;\n grid-template-areas: \"article-info article-info article-info article-info\";\n\n @include mq($from: medium) {\n grid-template-areas: \". . article-info article-info article-info article-info article-info article-info\";\n }\n\n @include mq($from: large) {\n grid-template-areas: \". . . article-info article-info article-info article-info article-info article-info article-info article-info article-info\";\n }\n }\n\n &__article-info {\n grid-area: article-info;\n }\n\n &__author {\n margin-top: 0;\n margin-bottom: var(--stzh-space-xxsmall);\n color: var(--stzh-color-coolgrey70);\n @include font('heavy');\n @include fontCurve('p1');\n }\n\n &__date {\n margin: 0;\n @include fontCurve('p1');\n }\n\n /\n Has menu.\n /\n &--has-menu &__image-lead-menu {\n grid-template-columns: auto repeat(3, minmax(0, 1fr));\n grid-template-areas: \"menu image image image\" \"menu lead lead lead\";\n\n @include mq($from: medium) {\n grid-template-columns: $gridColumnsMedium;\n grid-template-areas: \"menu menu image image image image image image\" \"menu menu lead lead lead lead lead lead\";\n }\n\n @include mq($from: large) {\n grid-template-columns: $gridColumnsLarge;\n grid-template-areas: \"menu menu menu image image image image image image image image image\" \"menu menu menu lead lead lead lead lead lead lead lead lead\";\n }\n }\n\n &--has-menu &__image-lead-menu-container {\n background-color: var(--stzh-color-coolgrey10);\n }\n\n &--has-menu &__menu {\n position: relative;\n display: inherit;\n margin-right: calc(#{$gridGutter} -1);\n\n @include mq($from: small) {\n margin-right: calc(#{$gridGutterSmall} * -1);\n }\n\n @include mq($from: medium) {\n margin-right: calc(#{$gridGutterMedium} * -1);\n margin-left: -$containerMarginMedium;\n }\n\n @include mq($from: large) {\n margin-right: calc(#{$gridGutterLarge} * -1);\n margin-left: -$containerMarginLarge;\n }\n\n @include mq($from: ultra) {\n margin-right: calc(#{$gridGutterUltra} * -1);\n margin-left: calc((100vw - #{$containerMaxWidth}) / -2);\n }\n }\n\n &--has-menu &__lead {\n @include spaceCurve('padding-left', 'regular');\n\n @include mq($from: medium) {\n margin-right: -$containerMarginMedium;\n padding-right: $containerMarginMedium;\n }\n\n @include mq($from: large) {\n margin-right: -$containerMarginLarge;\n padding-right: $containerMarginLarge;\n }\n\n @include mq($from: ultra) {\n margin-right: calc((100vw - #{$containerMaxWidth}) / -2);\n padding-right: calc((100vw - 84.25rem) / 2);\n }\n }\n\n /* Has meta /\n\n &--has-meta &__text {\n @include spaceCurve('padding-top', 'regular');\n }\n\n / Level 3-4 /\n &--level-3,\n &--level-4 {\n --hero-background-color: var(--stzh-color-coolgrey20);\n --lead-background-color: var(--stzh-color-coolgrey30);\n }\n}\n\n","import { Component, Element, h, Host, Prop, Watch } from \"@stencil/core\";\n\nimport { hasSlot, setPropsIfNull } from \"../../utils/utils\";\n\n/\n @slot - Slot for any content\n * @slot heading - Slot for `stzh-heading` element\n * @slot image - Slot for `stzh-figure` or `img` element\n * @slot lead - Slot for `stzh-text` element\n * @slot readspeaker - Slot for `stzh-readspeaker` element\n * @slot breadcrumb - Slot for `stzh-link` element\n * @slot menu - Slot for `stzh-link` element\n * @slot dateline - Slot for date or meta information\n /\n@Component({\n tag: \"stzh-pi-pagetitle\",\n styleUrl: \"stzh-pi-pagetitle.scss\",\n scoped: true,\n})\nexport class StzhPiPagetitle {\n /* Level /\n @Prop({ reflect: true }) level: 1 \| 2 \| 3 \| 4 = 1;\n\n /* Author of the content /\n @Prop({ reflect: true }) author: string = \"\";\n\n /* Date of the content */\n @Prop({ reflect: true }) date: string = \"\";\n\n @Element() element: HTMLStzhPiPagetitleElement;\n\n private init = () => {\n const heading = this.element.querySelector('stzh-heading[slot=\"heading\"], [slot=\"heading\"] stzh-heading');\n const leads = this.element.querySelectorAll('stzh-text[slot=\"lead\"], [slot=\"lead\"] stzh-text');\n const readspeakerButton = this.element.querySelector('[slot=\"readspeaker\"] stzh-button');\n\n if (heading) {\n setPropsIfNull(heading, {\n curve: \"hero\",\n level: \"1\",\n } as HTMLStzhHeadingElement);\n }\n\n if (readspeakerButton) {\n setPropsIfNull(readspeakerButton, {\n variant: \"tertiary-plain\",\n noPaddingLeft: true,\n noPaddingRight: true,\n size: \"small\",\n sizeMedium: \"tiny\",\n buttonAccesskey: \"L\",\n } as HTMLStzhButtonElement);\n }\n\n leads.forEach(lead => {\n setPropsIfNull(lead, {\n lead: true,\n } as HTMLStzhTextElement);\n });\n };\n\n @Watch(\"level\")\n handleLevelChange(level: number) {\n const menuElement = this.element.querySelector(\"stzh-pi-menu\");\n if (menuElement) {\n menuElement.breakout = level >= 3;\n }\n }\n\n async componentDidLoad() {\n this.handleLevelChange(this.level);\n }\n\n connectedCallback() {\n this.init();\n }\n\n render() {\n const imageSlotUsed = hasSlot(this.element, \"image\");\n const leadSlotUsed = hasSlot(this.element, \"lead\");\n const readspeakerSlotUsed = hasSlot(this.element, \"readspeaker\");\n const menuSlotUsed = hasSlot(this.element, \"menu\");\n const hasArticleInfo = !!this.author \|\| !!this.date;\n\n const classes = {\n \"stzh-pi-pagetitle\": true,\n \"stzh-pi-pagetitle--has-image\": imageSlotUsed,\n \"stzh-pi-pagetitle--has-no-image\": !imageSlotUsed,\n \"stzh-pi-pagetitle--has-lead\": leadSlotUsed,\n \"stzh-pi-pagetitle--has-meta\": readspeakerSlotUsed,\n \"stzh-pi-pagetitle--has-menu\": menuSlotUsed,\n \"stzh-pi-pagetitle--has-article-info\": hasArticleInfo,\n [`stzh-pi-pagetitle--level-${this.level}`]: !!this.level,\n };\n\n return (\n <Host has-menu={menuSlotUsed} has-article-info={hasArticleInfo}>\n <div class={classes}>\n <div class=\"stzh-pi-pagetitle__hero-container\">\n <div class=\"stzh-pi-pagetitle__hero\">\n <div class=\"stzh-pi-pagetitle__breadcrumbs\">\n <slot name=\"breadcrumb\"></slot>\n </div>\n\n <div class=\"stzh-pi-pagetitle__meta\">\n <div class=\"stzh-pi-pagetitle__readspeaker\">\n <slot name=\"readspeaker\"></slot>\n </div>\n </div>\n\n <div class=\"stzh-pi-pagetitle__dateline\">\n <slot name=\"dateline\"></slot>\n </div>\n\n <div class=\"stzh-pi-pagetitle__heading\">\n <slot name=\"heading\"></slot>\n </div>\n </div>\n </div>\n <div class=\"stzh-pi-pagetitle__image-lead-menu-container\">\n <div class=\"stzh-pi-pagetitle__image-lead-menu\">\n <div class=\"stzh-pi-pagetitle__menu\">\n {menuSlotUsed && (\n <div class=\"stzh-pi-pagetitle__menu-inner\">\n <slot name=\"menu\"></slot>\n </div>\n )}\n </div>\n\n <div class=\"stzh-pi-pagetitle__image\">\n {[1, 2].indexOf(this.level) > -1 && (\n <div class=\"stzh-pi-pagetitle__image-wrapper\">\n <stzh-ratio ratio={\"16:9\"} ratioSmall={\"21:9\"} class=\"stzh-pi-pagetitle__ratio\">\n <slot name={\"image\"}></slot>\n </stzh-ratio>\n </div>\n )}\n </div>\n\n {menuSlotUsed && (\n <div class=\"stzh-pi-pagetitle__lead\">\n <slot name=\"lead\"></slot>\n </div>\n )}\n </div>\n </div>\n\n {!menuSlotUsed && (\n <div class=\"stzh-pi-pagetitle__lead-container\">\n <div class=\"stzh-pi-pagetitle__lead\">\n <slot name=\"lead\"></slot>\n </div>\n </div>\n )}\n\n {hasArticleInfo && (\n <div class=\"stzh-pi-pagetitle__article-info-wrapper\">\n <div class=\"stzh-pi-pagetitle__article-info\">\n {this.author && <p class=\"stzh-pi-pagetitle__author\">{this.author}</p>}\n {this.date && <p class=\"stzh-pi-pagetitle__date\">{this.date}</p>}\n </div>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"4HAAA,MAAMA,EAAqB,u3xB,MCmBdC,EAAe,M,yBAYlBC,KAAAC,KAAO,KACb,MAAMC,EAAUF,KAAKG,QAAQC,cAAc,+DAC3C,MAAMC,EAAQL,KAAKG,QAAQG,iBAAiB,mDAC5C,MAAMC,EAAoBP,KAAKG,QAAQC,cAAc,oCAErD,GAAIF,EAAS,CACXM,EAAeN,EAAS,CACtBO,MAAO,OACPC,MAAO,K,CAIX,GAAIH,EAAmB,CACrBC,EAAeD,EAAmB,CAChCI,QAAS,iBACTC,cAAe,KACfC,eAAgB,KAChBC,KAAM,QACNC,WAAY,OACZC,gBAAiB,K,CAIrBX,EAAMY,SAAQC,IACZV,EAAeU,EAAM,CACnBA,KAAM,MACiB,GACzB,E,WArC4C,E,YAGN,G,UAGF,E,CAmCxC,iBAAAC,CAAkBT,GAChB,MAAMU,EAAcpB,KAAKG,QAAQC,cAAc,gBAC/C,GAAIgB,EAAa,CACfA,EAAYC,SAAWX,GAAS,C,EAIpC,sBAAMY,GACJtB,KAAKmB,kBAAkBnB,KAAKU,M,CAG9B,iBAAAa,GACEvB,KAAKC,M,CAGP,MAAAuB,GACE,MAAMC,EAAgBC,EAAQ1B,KAAKG,QAAS,SAC5C,MAAMwB,EAAeD,EAAQ1B,KAAKG,QAAS,QAC3C,MAAMyB,EAAsBF,EAAQ1B,KAAKG,QAAS,eAClD,MAAM0B,EAAeH,EAAQ1B,KAAKG,QAAS,QAC3C,MAAM2B,IAAmB9B,KAAK+B,UAAY/B,KAAKgC,KAE/C,MAAMC,EAAU,CACd,oBAAqB,KACrB,+BAAgCR,EAChC,mCAAoCA,EACpC,8BAA+BE,EAC/B,8BAA+BC,EAC/B,8BAA+BC,EAC/B,sCAAuCC,EACvC,CAAC,4BAA4B9B,KAAKU,WAAYV,KAAKU,OAGrD,OACEwB,EAACC,EAAI,YAAWN,EAAY,mBAAoBC,GAC9CI,EAAA,OAAKE,MAAOH,GACVC,EAAA,OAAKE,MAAM,qCACTF,EAAA,OAAKE,MAAM,2BACTF,EAAA,OAAKE,MAAM,kCACTF,EAAA,QAAMG,KAAK,gBAGbH,EAAA,OAAKE,MAAM,2BACTF,EAAA,OAAKE,MAAM,kCACTF,EAAA,QAAMG,KAAK,kBAIfH,EAAA,OAAKE,MAAM,+BACTF,EAAA,QAAMG,KAAK,cAGbH,EAAA,OAAKE,MAAM,8BACTF,EAAA,QAAMG,KAAK,eAIjBH,EAAA,OAAKE,MAAM,gDACTF,EAAA,OAAKE,MAAM,sCACTF,EAAA,OAAKE,MAAM,2BACRP,GACCK,EAAA,OAAKE,MAAM,iCACTF,EAAA,QAAMG,KAAK,WAKjBH,EAAA,OAAKE,MAAM,4BACR,CAAC,EAAG,GAAGE,QAAQtC,KAAKU,QAAU,GAC7BwB,EAAA,OAAKE,MAAM,oCACTF,EAAA,cAAYK,MAAO,OAAQC,WAAY,OAAQJ,MAAM,4BACnDF,EAAA,QAAMG,KAAM,aAMnBR,GACCK,EAAA,OAAKE,MAAM,2BACTF,EAAA,QAAMG,KAAK,aAMjBR,GACAK,EAAA,OAAKE,MAAM,qCACTF,EAAA,OAAKE,MAAM,2BACTF,EAAA,QAAMG,KAAK,WAKhBP,GACCI,EAAA,OAAKE,MAAM,2CACTF,EAAA,OAAKE,MAAM,mCACRpC,KAAK+B,QAAUG,EAAA,KAAGE,MAAM,6BAA6BpC,KAAK+B,QAC1D/B,KAAKgC,MAAQE,EAAA,KAAGE,MAAM,2BAA2BpC,KAAKgC,S"}

package/dist/stzh-components/p-32cb5b94.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["stzhTableCss","CLASS_HAS_STICKED","CLASS_IS_STICKY_LEFT","CLASS_IS_STICKY_RIGHT","StzhTable","this","updateCellClasses","tableWrapper","rows","Array","from","querySelectorAll","forEach","row","cells","children","cell","index","classList","remove","fixedLeft","add","fixedRight","updateScrollStates","wrapperScrollLeft","scrollLeft","wrapperScrollWidth","scrollWidth","wrapperClientWidth","clientWidth","isScrollable","hasScrollLeft","hasScrollRight","firstRow","cellsStickyLeft","cellsStickyRight","offsetLeft","offsetRight","offsetWidth","Math","ceil","push","indexOf","init","searchInput","element","querySelector","listSortDropdowns","setPropsIfNull","type","size","hideOptional","sortDropdown","inline","noSearch","variant","handleResize","debounceResize","window","cancelAnimationFrame","requestAnimationFrame","handleScroll","debounceScroll","fixedCellWatcher","connectedCallback","observer","MutationObserver","observe","childList","subtree","resizeObserver","ResizeObserver","disconnectedCallback","disconnect","render","headingSlotUsed","hasSlot","actionButtonSlotUsed","searchSlotUsed","hasList","classes","length","h","Host","class","name","ref","el","onScroll"],"sources":["src/components/stzh-table/stzh-table.scss?tag=stzh-table","src/components/stzh-table/stzh-table.tsx"],"sourcesContent":["/*\n @prop --max-height: Maximum height of table\n * @prop --min-width: Minium width of table\n * @prop --cell-padding: Cells padding\n * @prop --search-input-width: Search input width from small breakpoint\n\n * @prop --stzh-table-max-width: Global: Maximum height of table\n * @prop --stzh-table-min-width: Global: Minium width of table\n * @prop --stzh-table-cell-padding: Global: Cells padding\n * @prop --stzh-table-search-input-width: Global: Search input width from small breakpoint\n /\n\nstzh-table {\n @include host;\n @include table-host();\n}\n\n.stzh-table {\n @include table(\"table\");\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n State,\n Watch\n} from \"@stencil/core\";\n\nimport { setPropsIfNull, hasSlot } from \"../../utils/utils\";\n\nconst CLASS_HAS_STICKED = \"has-sticked\";\nconst CLASS_IS_STICKY_LEFT = \"is-sticky-left\";\nconst CLASS_IS_STICKY_RIGHT = \"is-sticky-right\";\n\n/\n @slot - Slot for table element\n * @slot heading - Slot for `stzh-heading`\n * @slot search - Slot for search `stzh-input` element\n * @slot action-button - Slot for action `stzh-button` element\n * @slot list - Slot for list element showing on mobile\n * @slot pagination - Slot for action `stzh-pagination` element\n /\n@Component({\n tag: \"stzh-table\",\n styleUrl: \"stzh-table.scss\"\n})\nexport class StzhTable {\n /* Columns that should be sticky on the left side (column indexes separated by comma) /\n @Prop() fixedLeft: number = null;\n\n /* Columns that should be sticky on the right side (column indexes separated by comma) /\n @Prop() fixedRight: number = null;\n\n /\n Whether to disable min-width of the table.\n \n If `false`, the default `min-width` is `700px`\n * If `true`, the `min-width` is `none`, so the table will try to squeeze down content as much as possible.\n \n You can also overwrite the min-width via CSS with the custom property `--min-width`.\n */\n @Prop({ reflect: true }) disableMinWidth: boolean = false;\n\n @State() hasScrollLeft: boolean = false;\n @State() hasScrollRight: boolean = false;\n @State() isScrollable: boolean = false;\n @State() cellsStickyLeft: number[] = [];\n @State() cellsStickyRight: number[] = [];\n\n @Element() element: HTMLStzhTableElement;\n\n @Watch(\"fixedLeft\")\n @Watch(\"fixedRight\")\n fixedCellWatcher() {\n this.updateCellClasses();\n this.updateScrollStates();\n }\n\n private tableWrapper: HTMLDivElement;\n private observer: MutationObserver;\n private debounceScroll: number;\n\n private debounceResize: number;\n private resizeObserver: ResizeObserver;\n\n private updateCellClasses = () => {\n if (!this.tableWrapper) {\n return;\n }\n\n const rows: HTMLTableRowElement[] = Array.from(this.tableWrapper.querySelectorAll(\"tr\"));\n rows.forEach((row: HTMLTableRowElement) => {\n const cells = Array.from(row.children);\n cells.forEach((cell: HTMLTableCellElement, index) => {\n cell.classList.remove(CLASS_IS_STICKY_LEFT);\n cell.classList.remove(CLASS_IS_STICKY_RIGHT);\n\n if (index === this.fixedLeft) {\n cell.classList.add(CLASS_IS_STICKY_LEFT);\n }\n\n if (index === this.fixedRight) {\n cell.classList.add(CLASS_IS_STICKY_RIGHT);\n }\n });\n });\n }\n\n private updateScrollStates = () => {\n if (!this.tableWrapper) {\n return;\n }\n\n const wrapperScrollLeft = this.tableWrapper.scrollLeft;\n const wrapperScrollWidth = this.tableWrapper.scrollWidth;\n const wrapperClientWidth = this.tableWrapper.clientWidth;\n\n this.isScrollable = wrapperScrollWidth > wrapperClientWidth;\n this.hasScrollLeft = wrapperScrollLeft > 0;\n this.hasScrollRight = wrapperScrollLeft < wrapperScrollWidth - wrapperClientWidth;\n\n const rows: HTMLTableRowElement[] = Array.from(this.tableWrapper.querySelectorAll(\"tr\"));\n const firstRow = rows[0];\n\n if (!firstRow) {\n return;\n }\n\n this.cellsStickyLeft = [];\n this.cellsStickyRight = [];\n const cells: Element[] = Array.from(firstRow.children);\n\n cells.forEach((cell: HTMLTableCellElement, index: number) => {\n const offsetLeft = cell.offsetLeft;\n const offsetRight = offsetLeft + cell.offsetWidth;\n\n if (\n this.hasScrollLeft\n && index === this.fixedLeft\n && Math.ceil(wrapperScrollLeft) >= offsetLeft\n ) {\n this.cellsStickyLeft.push(index);\n }\n\n if (\n this.hasScrollRight\n && index === this.fixedRight\n && Math.ceil(wrapperScrollLeft) + wrapperClientWidth <= offsetRight\n ) {\n this.cellsStickyRight.push(index);\n }\n });\n\n rows.forEach((row: HTMLTableRowElement) => {\n const cells = Array.from(row.children);\n cells.forEach((cell: HTMLTableCellElement, index: number) => {\n if (\n this.cellsStickyLeft.indexOf(index) > -1\n \|\| this.cellsStickyRight.indexOf(index) > -1\n ) {\n cell.classList.add(CLASS_HAS_STICKED);\n } else {\n cell.classList.remove(CLASS_HAS_STICKED);\n }\n });\n });\n }\n\n private init = () => {\n const searchInput = this.element.querySelector(\n 'stzh-input[slot=\"search\"], [slot=\"search\"] stzh-input'\n );\n\n const listSortDropdowns = this.element.querySelectorAll(\n 'stzh-dropdown[slot=\"list-sort-by-dropdown\"], [slot=\"list-sort-by-dropdown\"] stzh-dropdown, stzh-dropdown[slot=\"list-sort-direction-dropdown\"], [slot=\"list-sort-direction-dropdown\"] stzh-dropdown'\n );\n\n if (searchInput) {\n setPropsIfNull(searchInput, {\n type: \"search\",\n size: \"small\",\n hideOptional: true\n } as HTMLStzhInputElement);\n }\n\n listSortDropdowns.forEach(sortDropdown => {\n setPropsIfNull(sortDropdown, {\n inline: true,\n noSearch: true,\n variant: \"plain\",\n size: \"small\"\n } as HTMLStzhDropdownElement)\n });\n\n this.updateCellClasses();\n this.updateScrollStates();\n }\n\n handleResize = () => {\n if (this.debounceResize) {\n window.cancelAnimationFrame(this.debounceResize);\n }\n\n this.debounceResize = requestAnimationFrame(this.updateScrollStates);\n }\n\n private handleScroll = () => {\n if (this.debounceScroll) {\n window.cancelAnimationFrame(this.debounceScroll);\n }\n\n this.debounceScroll = requestAnimationFrame(this.updateScrollStates);\n }\n\n connectedCallback() {\n this.init();\n\n this.observer = new MutationObserver(this.init);\n this.observer.observe(this.element, {\n childList: true,\n subtree: true\n });\n\n this.resizeObserver = new ResizeObserver(this.handleResize);\n this.resizeObserver.observe(this.element);\n }\n\n disconnectedCallback() {\n if (this.observer) {\n this.observer.disconnect();\n }\n\n if (this.resizeObserver) {\n this.resizeObserver.disconnect();\n }\n }\n\n render() {\n const headingSlotUsed = hasSlot(this.element, \"heading\");\n const actionButtonSlotUsed = hasSlot(this.element, \"action-button\");\n const searchSlotUsed = hasSlot(this.element, \"search\");\n const hasList = hasSlot(this.element, \"list\");\n\n const classes = {\n \"stzh-table\": true,\n \"is-scrollable\": this.isScrollable,\n \"has-scroll-left\": this.hasScrollLeft,\n \"has-scroll-right\": this.hasScrollRight,\n \"has-scroll-left-shadow\": this.hasScrollLeft && this.cellsStickyLeft.length === 0,\n \"has-scroll-right-shadow\": this.hasScrollRight && this.cellsStickyRight.length === 0,\n \"has-list\": hasList,\n \"has-heading\": headingSlotUsed,\n \"has-action-or-search\": actionButtonSlotUsed \|\| searchSlotUsed,\n \"has-header\": headingSlotUsed \|\| actionButtonSlotUsed \|\| searchSlotUsed\n };\n\n return (\n <Host>\n <div class={classes}>\n <div class=\"stzh-table__header\">\n <div class=\"stzh-table__heading\">\n <slot name=\"heading\"></slot>\n </div>\n <div class=\"stzh-table__sub-header\">\n <div class=\"stzh-table__search\">\n <slot name=\"search\"></slot>\n </div>\n <div class=\"stzh-table__action-button\">\n <slot name=\"action-button\"></slot>\n </div>\n </div>\n </div>\n <div class=\"stzh-table__outer-wrapper\">\n <div\n ref={(el) => (this.tableWrapper = el as HTMLDivElement)}\n class=\"stzh-table__wrapper\"\n onScroll={this.handleScroll}\n >\n <slot></slot>\n </div>\n </div>\n <div class=\"stzh-table__list-wrapper\">\n <div class=\"stzh-table__list-sort-wrapper\">\n <slot name=\"list-sort-by-dropdown\"></slot>\n <slot name=\"list-sort-direction-dropdown\"></slot>\n </div>\n <slot name=\"list\"></slot>\n </div>\n <div class=\"stzh-table__pagination-wrapper\">\n <slot name=\"pagination\"></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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"}
1	+ {"version":3,"names":["stzhTableCss","CLASS_HAS_STICKED","CLASS_IS_STICKY_LEFT","CLASS_IS_STICKY_RIGHT","StzhTable","this","updateCellClasses","tableWrapper","rows","Array","from","querySelectorAll","forEach","row","cells","children","cell","index","classList","remove","fixedLeft","add","fixedRight","updateScrollStates","wrapperScrollLeft","scrollLeft","wrapperScrollWidth","scrollWidth","wrapperClientWidth","clientWidth","isScrollable","hasScrollLeft","hasScrollRight","firstRow","cellsStickyLeft","cellsStickyRight","offsetLeft","offsetRight","offsetWidth","Math","ceil","push","indexOf","init","searchInput","element","querySelector","listSortDropdowns","setPropsIfNull","type","size","hideOptional","sortDropdown","inline","noSearch","variant","handleResize","debounceResize","window","cancelAnimationFrame","requestAnimationFrame","handleScroll","debounceScroll","fixedCellWatcher","connectedCallback","observer","MutationObserver","observe","childList","subtree","resizeObserver","ResizeObserver","disconnectedCallback","disconnect","render","headingSlotUsed","hasSlot","actionButtonSlotUsed","searchSlotUsed","hasList","classes","length","h","Host","class","name","ref","el","onScroll"],"sources":["src/components/stzh-table/stzh-table.scss?tag=stzh-table","src/components/stzh-table/stzh-table.tsx"],"sourcesContent":["/*\n @prop --max-height: Maximum height of table\n * @prop --min-width: Minium width of table\n * @prop --cell-padding: Cells padding\n * @prop --search-input-width: Search input width from small breakpoint\n\n * @prop --stzh-table-max-width: Global: Maximum height of table\n * @prop --stzh-table-min-width: Global: Minium width of table\n * @prop --stzh-table-cell-padding: Global: Cells padding\n * @prop --stzh-table-search-input-width: Global: Search input width from small breakpoint\n /\n\nstzh-table {\n @include host;\n @include table-host();\n}\n\n.stzh-table {\n @include table(\"table\");\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n State,\n Watch\n} from \"@stencil/core\";\n\nimport { setPropsIfNull, hasSlot } from \"../../utils/utils\";\n\nconst CLASS_HAS_STICKED = \"has-sticked\";\nconst CLASS_IS_STICKY_LEFT = \"is-sticky-left\";\nconst CLASS_IS_STICKY_RIGHT = \"is-sticky-right\";\n\n/\n @slot - Slot for table element\n * @slot heading - Slot for `stzh-heading`\n * @slot search - Slot for search `stzh-input` element\n * @slot action-button - Slot for action `stzh-button` element\n * @slot list - Slot for list element showing on mobile\n * @slot pagination - Slot for action `stzh-pagination` element\n * @slot list-sort-by-dropdown - Slot for a dropdown to sort by a specific criterion\n * @slot list-sort-direction-dropdown - Slot for a dropdown to choose the sort direction\n /\n@Component({\n tag: \"stzh-table\",\n styleUrl: \"stzh-table.scss\"\n})\nexport class StzhTable {\n /* Columns that should be sticky on the left side (column indexes separated by comma) /\n @Prop() fixedLeft: number = null;\n\n /* Columns that should be sticky on the right side (column indexes separated by comma) /\n @Prop() fixedRight: number = null;\n\n /\n Whether to disable min-width of the table.\n \n If `false`, the default `min-width` is `700px`\n * If `true`, the `min-width` is `none`, so the table will try to squeeze down content as much as possible.\n \n You can also overwrite the min-width via CSS with the custom property `--min-width`.\n */\n @Prop({ reflect: true }) disableMinWidth: boolean = false;\n\n @State() hasScrollLeft: boolean = false;\n @State() hasScrollRight: boolean = false;\n @State() isScrollable: boolean = false;\n @State() cellsStickyLeft: number[] = [];\n @State() cellsStickyRight: number[] = [];\n\n @Element() element: HTMLStzhTableElement;\n\n @Watch(\"fixedLeft\")\n @Watch(\"fixedRight\")\n fixedCellWatcher() {\n this.updateCellClasses();\n this.updateScrollStates();\n }\n\n private tableWrapper: HTMLDivElement;\n private observer: MutationObserver;\n private debounceScroll: number;\n\n private debounceResize: number;\n private resizeObserver: ResizeObserver;\n\n private updateCellClasses = () => {\n if (!this.tableWrapper) {\n return;\n }\n\n const rows: HTMLTableRowElement[] = Array.from(this.tableWrapper.querySelectorAll(\"tr\"));\n rows.forEach((row: HTMLTableRowElement) => {\n const cells = Array.from(row.children);\n cells.forEach((cell: HTMLTableCellElement, index) => {\n cell.classList.remove(CLASS_IS_STICKY_LEFT);\n cell.classList.remove(CLASS_IS_STICKY_RIGHT);\n\n if (index === this.fixedLeft) {\n cell.classList.add(CLASS_IS_STICKY_LEFT);\n }\n\n if (index === this.fixedRight) {\n cell.classList.add(CLASS_IS_STICKY_RIGHT);\n }\n });\n });\n }\n\n private updateScrollStates = () => {\n if (!this.tableWrapper) {\n return;\n }\n\n const wrapperScrollLeft = this.tableWrapper.scrollLeft;\n const wrapperScrollWidth = this.tableWrapper.scrollWidth;\n const wrapperClientWidth = this.tableWrapper.clientWidth;\n\n this.isScrollable = wrapperScrollWidth > wrapperClientWidth;\n this.hasScrollLeft = wrapperScrollLeft > 0;\n this.hasScrollRight = wrapperScrollLeft < wrapperScrollWidth - wrapperClientWidth;\n\n const rows: HTMLTableRowElement[] = Array.from(this.tableWrapper.querySelectorAll(\"tr\"));\n const firstRow = rows[0];\n\n if (!firstRow) {\n return;\n }\n\n this.cellsStickyLeft = [];\n this.cellsStickyRight = [];\n const cells: Element[] = Array.from(firstRow.children);\n\n cells.forEach((cell: HTMLTableCellElement, index: number) => {\n const offsetLeft = cell.offsetLeft;\n const offsetRight = offsetLeft + cell.offsetWidth;\n\n if (\n this.hasScrollLeft\n && index === this.fixedLeft\n && Math.ceil(wrapperScrollLeft) >= offsetLeft\n ) {\n this.cellsStickyLeft.push(index);\n }\n\n if (\n this.hasScrollRight\n && index === this.fixedRight\n && Math.ceil(wrapperScrollLeft) + wrapperClientWidth <= offsetRight\n ) {\n this.cellsStickyRight.push(index);\n }\n });\n\n rows.forEach((row: HTMLTableRowElement) => {\n const cells = Array.from(row.children);\n cells.forEach((cell: HTMLTableCellElement, index: number) => {\n if (\n this.cellsStickyLeft.indexOf(index) > -1\n \|\| this.cellsStickyRight.indexOf(index) > -1\n ) {\n cell.classList.add(CLASS_HAS_STICKED);\n } else {\n cell.classList.remove(CLASS_HAS_STICKED);\n }\n });\n });\n }\n\n private init = () => {\n const searchInput = this.element.querySelector(\n 'stzh-input[slot=\"search\"], [slot=\"search\"] stzh-input'\n );\n\n const listSortDropdowns = this.element.querySelectorAll(\n 'stzh-dropdown[slot=\"list-sort-by-dropdown\"], [slot=\"list-sort-by-dropdown\"] stzh-dropdown, stzh-dropdown[slot=\"list-sort-direction-dropdown\"], [slot=\"list-sort-direction-dropdown\"] stzh-dropdown'\n );\n\n if (searchInput) {\n setPropsIfNull(searchInput, {\n type: \"search\",\n size: \"small\",\n hideOptional: true\n } as HTMLStzhInputElement);\n }\n\n listSortDropdowns.forEach(sortDropdown => {\n setPropsIfNull(sortDropdown, {\n inline: true,\n noSearch: true,\n variant: \"plain\",\n size: \"small\"\n } as HTMLStzhDropdownElement)\n });\n\n this.updateCellClasses();\n this.updateScrollStates();\n }\n\n handleResize = () => {\n if (this.debounceResize) {\n window.cancelAnimationFrame(this.debounceResize);\n }\n\n this.debounceResize = requestAnimationFrame(this.updateScrollStates);\n }\n\n private handleScroll = () => {\n if (this.debounceScroll) {\n window.cancelAnimationFrame(this.debounceScroll);\n }\n\n this.debounceScroll = requestAnimationFrame(this.updateScrollStates);\n }\n\n connectedCallback() {\n this.init();\n\n this.observer = new MutationObserver(this.init);\n this.observer.observe(this.element, {\n childList: true,\n subtree: true\n });\n\n this.resizeObserver = new ResizeObserver(this.handleResize);\n this.resizeObserver.observe(this.element);\n }\n\n disconnectedCallback() {\n if (this.observer) {\n this.observer.disconnect();\n }\n\n if (this.resizeObserver) {\n this.resizeObserver.disconnect();\n }\n }\n\n render() {\n const headingSlotUsed = hasSlot(this.element, \"heading\");\n const actionButtonSlotUsed = hasSlot(this.element, \"action-button\");\n const searchSlotUsed = hasSlot(this.element, \"search\");\n const hasList = hasSlot(this.element, \"list\");\n\n const classes = {\n \"stzh-table\": true,\n \"is-scrollable\": this.isScrollable,\n \"has-scroll-left\": this.hasScrollLeft,\n \"has-scroll-right\": this.hasScrollRight,\n \"has-scroll-left-shadow\": this.hasScrollLeft && this.cellsStickyLeft.length === 0,\n \"has-scroll-right-shadow\": this.hasScrollRight && this.cellsStickyRight.length === 0,\n \"has-list\": hasList,\n \"has-heading\": headingSlotUsed,\n \"has-action-or-search\": actionButtonSlotUsed \|\| searchSlotUsed,\n \"has-header\": headingSlotUsed \|\| actionButtonSlotUsed \|\| searchSlotUsed\n };\n\n return (\n <Host>\n <div class={classes}>\n <div class=\"stzh-table__header\">\n <div class=\"stzh-table__heading\">\n <slot name=\"heading\"></slot>\n </div>\n <div class=\"stzh-table__sub-header\">\n <div class=\"stzh-table__search\">\n <slot name=\"search\"></slot>\n </div>\n <div class=\"stzh-table__action-button\">\n <slot name=\"action-button\"></slot>\n </div>\n </div>\n </div>\n <div class=\"stzh-table__outer-wrapper\">\n <div\n ref={(el) => (this.tableWrapper = el as HTMLDivElement)}\n class=\"stzh-table__wrapper\"\n onScroll={this.handleScroll}\n >\n <slot></slot>\n </div>\n </div>\n <div class=\"stzh-table__list-wrapper\">\n <div class=\"stzh-table__list-sort-wrapper\">\n <slot name=\"list-sort-by-dropdown\"></slot>\n <slot name=\"list-sort-direction-dropdown\"></slot>\n </div>\n <slot name=\"list\"></slot>\n </div>\n <div class=\"stzh-table__pagination-wrapper\">\n <slot name=\"pagination\"></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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"}

package/dist/stzh-components/p-3cc6f193.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["stzhVbzIntroCss","StzhVbzIntro","this","_quicklinks","init","quicklinksWatcher","quicklinks","newValue","JSON","parse","e","componentWillLoad","localization","window","stzhComponents","utils","fetchTranslations","element","connectedCallback","render","classes","h","Host","class","name","length","quicklinksHeading","map","item","href","icon","label"],"sources":["src/components/stzh-vbz-intro/stzh-vbz-intro.scss?tag=stzh-vbz-intro&encapsulation=scoped","src/components/stzh-vbz-intro/stzh-vbz-intro.tsx"],"sourcesContent":["/*\n @prop --background-color: Background color of top news section\n * @prop --background-color-mostsearched: Background color of top most searched section\n \n @prop --stzh-vbz-intro-subtitle-font: Global: Font of the topnews subtitle\n * @prop --stzh-vbz-intro-topnews-item-subtitle-color: Global: Color of the topnews subtitle\n * @prop --stzh-vbz-intro-topnews-item-subtitle-highlighted-color: Global: Color of the topnews subtitle (highlighted variant)\n /\n\n:host {\n --background-color-topnews: #{$topnewsBackgroundColor};\n --background-color-mostsearched: #{$mostsearchedBackgroundColor};\n --topnews-item-subtitle-font: var(--stzh-vbz-intro-topnews-subtitle-font, #{$topnewsSubtitleFont});\n --topnews-item-subtitle-color: var(--stzh-vbz-intro-topnews-item-subtitle-color, #{$colorPrimary70});\n --topnews-item-subtitle-highlighted-color: var(--stzh-vbz-intro-topnews-item-subtitle-highlighted-color, #{$colorPrimary60});\n\n --grid-template-areas: \"ticker ticker ticker ticker\" \"quicklinks quicklinks quicklinks quicklinks\";\n\n @include mq($from: medium) {\n --grid-template-areas: \"ticker ticker ticker ticker ticker quicklinks quicklinks quicklinks\";\n }\n\n @include mq($from: large) {\n --grid-template-areas: \"ticker ticker ticker ticker ticker ticker ticker ticker quicklinks quicklinks quicklinks quicklinks\";\n }\n}\n\n.stzh-vbz-intro {\n @include grid;\n grid-template-areas: var(--grid-template-areas);\n\n &__ticker,\n &__quicklinks {\n display: flex;\n flex-direction: column;\n @include spaceCurve('padding-top', 'regular');\n @include spaceCurve('padding-bottom', 'regular');\n }\n\n &__ticker {\n grid-area: ticker;\n\n @include mq($from: ultra) {\n padding-left: 0;\n }\n }\n\n /\n Quick links.\n /\n &__quicklinks {\n grid-area: quicklinks;\n background-color: var(--stzh-color-primary60);\n padding-left: space('large');\n margin-left: $containerMargin -1;\n padding-right: space('large');\n margin-right: $containerMargin * -1;\n\n @include mq($from: small) {\n display: grid;\n gap: 0 space('large');\n grid-template-columns: repeat(2, minmax(0, 1fr));\n padding-left: $containerMarginSmall;\n margin-left: $containerMarginSmall * -1;\n padding-right: $containerMarginSmall;\n margin-right: $containerMarginSmall * -1;\n }\n\n @include mq($from: medium) {\n display: flex;\n gap: inherit;\n grid-template-columns: inherit;\n padding-left: $containerMarginMedium;\n margin-left: inherit;\n padding-right: $containerMarginMedium;\n margin-right: $containerMarginMedium * -1;\n }\n\n @include mq($from: large) {\n padding-right: $containerMarginLarge;\n margin-right: $containerMarginLarge * -1;\n }\n\n @include mq($from: ultra) {\n margin-right: calc(((100vw - #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px)) * -0.5));\n }\n }\n\n .stzh-vbz-intro-quicklinks__heading {\n --color: var(--stzh-color-white);\n margin-bottom: space('xsmall');\n }\n\n .stzh-vbz-intro-quicklink__link {\n --text-decoration-line: none;\n --color: var(--stzh-color-white);\n --hover-text-decoration-line: none;\n --hover-color: var(--stzh-color-white);\n\n transition: transform 150ms ease;\n padding-top: space('xsmall');\n padding-bottom: space('xsmall');\n\n &:hover, {\n transform: translateX(10px);\n\n @include mq($from: medium) {\n transform: translateX(20px);\n }\n }\n }\n}\n","import { Component, Element, h, Host, Prop, Watch } from \"@stencil/core\";\nimport { StzhMostsearchedItem, StzhVbzQuicklink } from \"../../index\";\nimport { StzhVbzIntroLocalizedText } from \"./stzh-vbz-intro.localization\";\n\n@Component({\n tag: \"stzh-vbz-intro\",\n styleUrl: \"stzh-vbz-intro.scss\",\n scoped: true,\n})\nexport class StzhVbzIntro {\n @Element() element: HTMLStzhVbzIntroElement;\n\n /** Translation strings. /\n @Prop() localization: StzhVbzIntroLocalizedText;\n\n /* Most searched items */\n @Prop() quicklinks: StzhVbzQuicklink[] \| string = [];\n private _quicklinks: StzhMostsearchedItem[] = [];\n\n @Watch(\"quicklinks\")\n quicklinksWatcher(newValue: StzhVbzQuicklink[] \| string) {\n if (!newValue) {\n this._quicklinks = [];\n } else if (typeof newValue === \"string\") {\n try {\n this._quicklinks = JSON.parse(newValue);\n } catch (e) {\n this._quicklinks = [];\n }\n } else {\n this._quicklinks = newValue;\n }\n }\n\n private init = () => {\n this.quicklinksWatcher(this.quicklinks);\n };\n\n async componentWillLoad() {\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"vbz-intro\");\n }\n }\n\n connectedCallback() {\n this.init();\n }\n\n render() {\n const classes = {\n \"stzh-vbz-intro\": true,\n };\n\n return (\n <Host>\n <div class={classes}>\n <div class=\"stzh-vbz-intro__ticker\">\n <slot name=\"ticker\"></slot>\n </div>\n {this._quicklinks.length > 0 && (\n <div class=\"stzh-vbz-intro__quicklinks\">\n <stzh-heading class=\"stzh-vbz-intro-quicklinks__heading\">\n {this.localization.quicklinksHeading}\n </stzh-heading>\n {this._quicklinks.map(item => (\n <div class=\"stzh-vbz-intro-quicklink\">\n <stzh-link class=\"stzh-vbz-intro-quicklink__link\" href={item.href} icon={\"arrow-right\"}>\n {item.label}\n </stzh-link>\n </div>\n ))}\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"yDAAA,MAAMA,EAAkB,+vM,~~MCSXC~~,EAAY,M,yBAQfC,KAAAC,YAAsC,GAiBtCD,KAAAE,KAAO,KACbF,KAAKG,kBAAkBH,KAAKI,WAAW,E,4CAnBS,E,CAIlD,iBAAAD,CAAkBE,GAChB,IAAKA,EAAU,CACbL,KAAKC,YAAc,E,MACd,UAAWI,IAAa,SAAU,CACvC,IACEL,KAAKC,YAAcK,KAAKC,MAAMF,E,CAC9B,MAAOG,GACPR,KAAKC,YAAc,E,MAEhB,CACLD,KAAKC,YAAcI,C,EAQvB,uBAAMI,GACJ,IAAKT,KAAKU,aAAc,CACtBV,KAAKU,mBAAqBC,OAAOC,eAAeC,MAAMC,kBAAkBd,KAAKe,QAAS,Y,EAI1F,iBAAAC,GACEhB,KAAKE,M,CAGP,MAAAe,GACE,MAAMC,EAAU,CACd,iBAAkB,MAGpB,OACEC,EAACC,EAAI,KACHD,EAAA,OAAKE,MAAOH,GACVC,EAAA,OAAKE,MAAM,0BACTF,EAAA,QAAMG,KAAK,YAEZtB,KAAKC,YAAYsB,OAAS,GACzBJ,EAAA,OAAKE,MAAM,8BACTF,EAAA,gBAAcE,MAAM,sCACjBrB,KAAKU,aAAac,mBAEpBxB,KAAKC,YAAYwB,KAAIC,GACpBP,EAAA,OAAKE,MAAM,4BACTF,EAAA,aAAWE,MAAM,iCAAiCM,KAAMD,EAAKC,KAAMC,KAAM,eACtEF,EAAKG,Y"}
1	+ {"version":3,"names":["stzhVbzIntroCss","StzhVbzIntro","this","_quicklinks","init","quicklinksWatcher","quicklinks","newValue","JSON","parse","e","componentWillLoad","localization","window","stzhComponents","utils","fetchTranslations","element","connectedCallback","render","classes","h","Host","class","name","length","quicklinksHeading","map","item","href","icon","label"],"sources":["src/components/stzh-vbz-intro/stzh-vbz-intro.scss?tag=stzh-vbz-intro&encapsulation=scoped","src/components/stzh-vbz-intro/stzh-vbz-intro.tsx"],"sourcesContent":["/*\n @prop --background-color: Background color of top news section\n * @prop --background-color-mostsearched: Background color of top most searched section\n \n @prop --stzh-vbz-intro-subtitle-font: Global: Font of the topnews subtitle\n * @prop --stzh-vbz-intro-topnews-item-subtitle-color: Global: Color of the topnews subtitle\n * @prop --stzh-vbz-intro-topnews-item-subtitle-highlighted-color: Global: Color of the topnews subtitle (highlighted variant)\n /\n\n:host {\n --background-color-topnews: #{$topnewsBackgroundColor};\n --background-color-mostsearched: #{$mostsearchedBackgroundColor};\n --topnews-item-subtitle-font: var(--stzh-vbz-intro-topnews-subtitle-font, #{$topnewsSubtitleFont});\n --topnews-item-subtitle-color: var(--stzh-vbz-intro-topnews-item-subtitle-color, #{$colorPrimary70});\n --topnews-item-subtitle-highlighted-color: var(--stzh-vbz-intro-topnews-item-subtitle-highlighted-color, #{$colorPrimary60});\n\n --grid-template-areas: \"ticker ticker ticker ticker\" \"quicklinks quicklinks quicklinks quicklinks\";\n\n @include mq($from: medium) {\n --grid-template-areas: \"ticker ticker ticker ticker ticker quicklinks quicklinks quicklinks\";\n }\n\n @include mq($from: large) {\n --grid-template-areas: \"ticker ticker ticker ticker ticker ticker ticker ticker quicklinks quicklinks quicklinks quicklinks\";\n }\n}\n\n.stzh-vbz-intro {\n @include grid;\n grid-template-areas: var(--grid-template-areas);\n\n &__ticker,\n &__quicklinks {\n display: flex;\n flex-direction: column;\n @include spaceCurve('padding-top', 'regular');\n @include spaceCurve('padding-bottom', 'regular');\n }\n\n &__ticker {\n grid-area: ticker;\n\n @include mq($from: ultra) {\n padding-left: 0;\n }\n }\n\n /\n Quick links.\n /\n &__quicklinks {\n grid-area: quicklinks;\n background-color: var(--stzh-color-primary60);\n padding-left: space('large');\n margin-left: $containerMargin -1;\n padding-right: space('large');\n margin-right: $containerMargin * -1;\n\n @include mq($from: small) {\n display: grid;\n gap: 0 space('large');\n grid-template-columns: repeat(2, minmax(0, 1fr));\n padding-left: $containerMarginSmall;\n margin-left: $containerMarginSmall * -1;\n padding-right: $containerMarginSmall;\n margin-right: $containerMarginSmall * -1;\n }\n\n @include mq($from: medium) {\n display: flex;\n gap: inherit;\n grid-template-columns: inherit;\n padding-left: $containerMarginMedium;\n margin-left: inherit;\n padding-right: $containerMarginMedium;\n margin-right: $containerMarginMedium * -1;\n }\n\n @include mq($from: large) {\n padding-right: $containerMarginLarge;\n margin-right: $containerMarginLarge * -1;\n }\n\n @include mq($from: ultra) {\n margin-right: calc(((100vw - #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px)) * -0.5));\n }\n }\n\n .stzh-vbz-intro-quicklinks__heading {\n --color: var(--stzh-color-white);\n margin-bottom: space('xsmall');\n }\n\n .stzh-vbz-intro-quicklink__link {\n --text-decoration-line: none;\n --color: var(--stzh-color-white);\n --hover-text-decoration-line: none;\n --hover-color: var(--stzh-color-white);\n\n transition: transform 150ms ease;\n padding-top: space('xsmall');\n padding-bottom: space('xsmall');\n\n &:hover, {\n transform: translateX(10px);\n\n @include mq($from: medium) {\n transform: translateX(20px);\n }\n }\n }\n}\n","import { Component, Element, h, Host, Prop, Watch } from \"@stencil/core\";\nimport { StzhMostsearchedItem, StzhVbzQuicklink } from \"../../index\";\nimport { StzhVbzIntroLocalizedText } from \"./stzh-vbz-intro.localization\";\n\n/*\n @slot ticker - slot for ticker content \n /\n@Component({\n tag: \"stzh-vbz-intro\",\n styleUrl: \"stzh-vbz-intro.scss\",\n scoped: true,\n})\nexport class StzhVbzIntro {\n @Element() element: HTMLStzhVbzIntroElement;\n\n /* Translation strings. /\n @Prop() localization: StzhVbzIntroLocalizedText;\n\n /* Most searched items */\n @Prop() quicklinks: StzhVbzQuicklink[] \| string = [];\n private _quicklinks: StzhMostsearchedItem[] = [];\n\n @Watch(\"quicklinks\")\n quicklinksWatcher(newValue: StzhVbzQuicklink[] \| string) {\n if (!newValue) {\n this._quicklinks = [];\n } else if (typeof newValue === \"string\") {\n try {\n this._quicklinks = JSON.parse(newValue);\n } catch (e) {\n this._quicklinks = [];\n }\n } else {\n this._quicklinks = newValue;\n }\n }\n\n private init = () => {\n this.quicklinksWatcher(this.quicklinks);\n };\n\n async componentWillLoad() {\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"vbz-intro\");\n }\n }\n\n connectedCallback() {\n this.init();\n }\n\n render() {\n const classes = {\n \"stzh-vbz-intro\": true,\n };\n\n return (\n <Host>\n <div class={classes}>\n <div class=\"stzh-vbz-intro__ticker\">\n <slot name=\"ticker\"></slot>\n </div>\n {this._quicklinks.length > 0 && (\n <div class=\"stzh-vbz-intro__quicklinks\">\n <stzh-heading class=\"stzh-vbz-intro-quicklinks__heading\">\n {this.localization.quicklinksHeading}\n </stzh-heading>\n {this._quicklinks.map(item => (\n <div class=\"stzh-vbz-intro-quicklink\">\n <stzh-link class=\"stzh-vbz-intro-quicklink__link\" href={item.href} icon={\"arrow-right\"}>\n {item.label}\n </stzh-link>\n </div>\n ))}\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"yDAAA,MAAMA,EAAkB,+vM,MCYXC,EAAY,M,yBAQfC,KAAAC,YAAsC,GAiBtCD,KAAAE,KAAO,KACbF,KAAKG,kBAAkBH,KAAKI,WAAW,E,4CAnBS,E,CAIlD,iBAAAD,CAAkBE,GAChB,IAAKA,EAAU,CACbL,KAAKC,YAAc,E,MACd,UAAWI,IAAa,SAAU,CACvC,IACEL,KAAKC,YAAcK,KAAKC,MAAMF,E,CAC9B,MAAOG,GACPR,KAAKC,YAAc,E,MAEhB,CACLD,KAAKC,YAAcI,C,EAQvB,uBAAMI,GACJ,IAAKT,KAAKU,aAAc,CACtBV,KAAKU,mBAAqBC,OAAOC,eAAeC,MAAMC,kBAAkBd,KAAKe,QAAS,Y,EAI1F,iBAAAC,GACEhB,KAAKE,M,CAGP,MAAAe,GACE,MAAMC,EAAU,CACd,iBAAkB,MAGpB,OACEC,EAACC,EAAI,KACHD,EAAA,OAAKE,MAAOH,GACVC,EAAA,OAAKE,MAAM,0BACTF,EAAA,QAAMG,KAAK,YAEZtB,KAAKC,YAAYsB,OAAS,GACzBJ,EAAA,OAAKE,MAAM,8BACTF,EAAA,gBAAcE,MAAM,sCACjBrB,KAAKU,aAAac,mBAEpBxB,KAAKC,YAAYwB,KAAIC,GACpBP,EAAA,OAAKE,MAAM,4BACTF,EAAA,aAAWE,MAAM,iCAAiCM,KAAMD,EAAKC,KAAMC,KAAM,eACtEF,EAAKG,Y"}

package/dist/stzh-components/p-429d2a9b.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["stzhBreadcrumbCss","ITEM_EXPAND_INDEX","SHRINK_DIRECTION","StzhBreadcrumb","this","updateContainer","navElement","itemSizes","containerWidth","clientWidth","totalItemsWidthWithoutExpandItem","reduce","previous","item","index","length","expanded","hideItems","expandItemWidth","currentIndexToHide","totalItemsShownWidthWithoutExpandItem","current","push","hasHiddenItems","forEach","classList","remove","toggle","includes","add","updateItems","items","Array","from","querySelectorAll","width","getBoundingClientRect","handleContainerResize","debounceResize","window","cancelAnimationFrame","requestAnimationFrame","handleItemResize","debounceResizeItems","handleExpandClick","itemLinks","focus","itemsWatcher","newValue","_items","JSON","parse","e","expandedWatcher","handleClick","originalEvent","stzhItemClick","emit","component","componentWillLoad","localization","stzhComponents","utils","fetchTranslations","element","componentDidRender","resizeObserver","observe","resizeItemsObserver","connectedCallback","ResizeObserver","disconnectedCallback","disconnect","render","classes","variant","rs_skip","h","Host","class","ref","el","role","title","map","Fragment","href","onClick","name","label","expandLabel","expandHiddenLabel","stzhTagCss","StzhTag","focusedByInput","onRootFocus","tag","onFocus","event","focusEvent","FocusEvent","view","bubbles","cancelable","dispatchEvent","stzhFocus","onBlur","blurEvent","stzhBlur","stzhClick","nonInteractive","_a","setAttribute","analyticsId","text","innerText","renderInner","lines","disabled","size","type","Tag","tabindex","target","a11yTabindex","a11yLabel","a11yDescribedby"],"sources":["src/components/stzh-breadcrumb/stzh-breadcrumb.scss?tag=stzh-breadcrumb&encapsulation=scoped","src/components/stzh-breadcrumb/stzh-breadcrumb.tsx","src/components/stzh-tag/stzh-tag.scss?tag=stzh-tag&encapsulation=scoped","src/components/stzh-tag/stzh-tag.tsx"],"sourcesContent":[":host {\n overflow: hidden;\n --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 / Teaser variant /\n\n &--teaser {\n @include fontSize('micro');\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Watch,\n State,\n Fragment, Event, EventEmitter,\n} 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 @slot - Slot for e.g. image or video\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\n .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\n class=\"stzh-breadcrumb__item-icon\"\n name=\"home\"\n ></stzh-icon>\n :\n <stzh-icon\n class=\"stzh-breadcrumb__item-icon is-separator\"\n name=\"angle-right\"\n ></stzh-icon>\n }\n <span class=\"stzh-breadcrumb__item-label\">\n {item.label}\n </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\n class=\"stzh-breadcrumb__item-icon is-separator\"\n name=\"angle-right\"\n ></stzh-icon>\n <span class=\"stzh-breadcrumb__item-label\">\n <span aria-hdiden=\"true\">\n {this.localization.expandLabel}\n </span>\n <span class=\"stzh-breadcrumb__item-label-hidden\">\n {this.localization.expandHiddenLabel}\n </span>\n </span>\n </button>\n </li>\n }\n </Fragment>\n )}\n </ol>\n </nav>\n </div>\n </Host>\n );\n }\n}\n",":host {\n --color: var(--stzh-tag-color, #{$colorSecondary50});\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(--stzh-tag-hover-background-color, var(--background-color));\n\n display: inline-flex;\n\n &[size=\"large\"] {\n --height: 32px;\n }\n\n &[type=\"secondary\"] {\n --color: var(--stzh-tag-secondary-color, #{$colorWhite});\n --background-color: var(--stzh-tag-secondary-background-color, #{$colorSecondary50});\n\n --hover-color: var(--stzh-tag-secondary-hover-color, #{$colorWhite});\n --hover-background-color: var(--stzh-tag-secondary-hover-background-color, var(--background-color));\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(--stzh-tag-disabled-background-color, #{$colorGrey20});\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 {\n Component,\n Host,\n h,\n Prop,\n Event,\n EventEmitter,\n Element,\n Fragment\n} from \"@stencil/core\";\n\nimport {\n StzhTagType,\n StzhTagSize,\n StzhTagClickEvent,\n StzhTagFocusEvent,\n StzhTagBlurEvent\n} 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\n lines={1}\n class=\"stzh-tag__label\"\n ref={(el) => (this.text = el as HTMLElement)}\n >\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\" :\n 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"],"mappings":"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"}
1	+ {"version":3,"names":["stzhBreadcrumbCss","ITEM_EXPAND_INDEX","SHRINK_DIRECTION","StzhBreadcrumb","this","updateContainer","navElement","itemSizes","containerWidth","clientWidth","totalItemsWidthWithoutExpandItem","reduce","previous","item","index","length","expanded","hideItems","expandItemWidth","currentIndexToHide","totalItemsShownWidthWithoutExpandItem","current","push","hasHiddenItems","forEach","classList","remove","toggle","includes","add","updateItems","items","Array","from","querySelectorAll","width","getBoundingClientRect","handleContainerResize","debounceResize","window","cancelAnimationFrame","requestAnimationFrame","handleItemResize","debounceResizeItems","handleExpandClick","itemLinks","focus","itemsWatcher","newValue","_items","JSON","parse","e","expandedWatcher","handleClick","originalEvent","stzhItemClick","emit","component","componentWillLoad","localization","stzhComponents","utils","fetchTranslations","element","componentDidRender","resizeObserver","observe","resizeItemsObserver","connectedCallback","ResizeObserver","disconnectedCallback","disconnect","render","classes","variant","rs_skip","h","Host","class","ref","el","role","title","map","Fragment","href","onClick","name","label","expandLabel","expandHiddenLabel","stzhTagCss","StzhTag","focusedByInput","onRootFocus","tag","onFocus","event","focusEvent","FocusEvent","view","bubbles","cancelable","dispatchEvent","stzhFocus","onBlur","blurEvent","stzhBlur","stzhClick","nonInteractive","_a","setAttribute","analyticsId","text","innerText","renderInner","lines","disabled","size","type","Tag","tabindex","target","a11yTabindex","a11yLabel","a11yDescribedby"],"sources":["src/components/stzh-breadcrumb/stzh-breadcrumb.scss?tag=stzh-breadcrumb&encapsulation=scoped","src/components/stzh-breadcrumb/stzh-breadcrumb.tsx","src/components/stzh-tag/stzh-tag.scss?tag=stzh-tag&encapsulation=scoped","src/components/stzh-tag/stzh-tag.tsx"],"sourcesContent":[":host {\n overflow: hidden;\n --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 / Teaser variant /\n\n &--teaser {\n @include fontSize('micro');\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Watch,\n State,\n Fragment, Event, EventEmitter,\n} 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\n .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\n class=\"stzh-breadcrumb__item-icon\"\n name=\"home\"\n ></stzh-icon>\n :\n <stzh-icon\n class=\"stzh-breadcrumb__item-icon is-separator\"\n name=\"angle-right\"\n ></stzh-icon>\n }\n <span class=\"stzh-breadcrumb__item-label\">\n {item.label}\n </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\n class=\"stzh-breadcrumb__item-icon is-separator\"\n name=\"angle-right\"\n ></stzh-icon>\n <span class=\"stzh-breadcrumb__item-label\">\n <span aria-hdiden=\"true\">\n {this.localization.expandLabel}\n </span>\n <span class=\"stzh-breadcrumb__item-label-hidden\">\n {this.localization.expandHiddenLabel}\n </span>\n </span>\n </button>\n </li>\n }\n </Fragment>\n )}\n </ol>\n </nav>\n </div>\n </Host>\n );\n }\n}\n",":host {\n --color: var(--stzh-tag-color, #{$colorSecondary50});\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(--stzh-tag-hover-background-color, var(--background-color));\n\n display: inline-flex;\n\n &[size=\"large\"] {\n --height: 32px;\n }\n\n &[type=\"secondary\"] {\n --color: var(--stzh-tag-secondary-color, #{$colorWhite});\n --background-color: var(--stzh-tag-secondary-background-color, #{$colorSecondary50});\n\n --hover-color: var(--stzh-tag-secondary-hover-color, #{$colorWhite});\n --hover-background-color: var(--stzh-tag-secondary-hover-background-color, var(--background-color));\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(--stzh-tag-disabled-background-color, #{$colorGrey20});\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 {\n Component,\n Host,\n h,\n Prop,\n Event,\n EventEmitter,\n Element,\n Fragment\n} from \"@stencil/core\";\n\nimport {\n StzhTagType,\n StzhTagSize,\n StzhTagClickEvent,\n StzhTagFocusEvent,\n StzhTagBlurEvent\n} 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\n lines={1}\n class=\"stzh-tag__label\"\n ref={(el) => (this.text = el as HTMLElement)}\n >\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\" :\n 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"],"mappings":"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"}