npm - @oiz/stzh-components - Versions diffs - 2.14.0 → 2.14.2 - Mend

@oiz/stzh-components 2.14.0 → 2.14.2

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

package/dist/components/stzh-card2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"stzh-card2.js","mappings":"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","names":[],"sources":["src/components/stzh-card/stzh-card.scss?tag=stzh-card&encapsulation=scoped","src/components/stzh-card/stzh-card.tsx"],"sourcesContent":["/*\n @prop --content-min-height: Min height of content\n /\n\n:host {\n --box-shadow: #{$boxShadowPopover};\n --border-color: #{$baseBorderColor};\n --border-radius: 3px;\n\n --content-min-height: 120px;\n\n --dnd-visibility: hidden;\n --dnd-opacity: 0;\n\n display: flex;\n flex-direction: column;\n position: relative;\n border-radius: var(--border-radius);\n\n @media print {\n page-break-inside: avoid;\n break-inside: avoid;\n }\n\n &[collapsed]:not([collapsed=\"false\"]) {\n --content-min-height: none;\n }\n\n &[checked]:not([checked=\"false\"]) {\n outline: 3px solid $colorPrimary;\n }\n\n &[hide-elevation]:not([hide-elevation=\"false\"]) {\n --box-shadow: none;\n\n &[href]:hover,\n &[href]:focus-within,\n &.is-selected,\n &.is-chosen,\n .is-selected &,\n .is-chosen & {\n --box-shadow: #{$boxShadowPopover};\n }\n }\n\n &.is-ghost::after,\n .is-ghost &::after {\n border-radius: var(--border-radius);\n }\n\n &[href]:hover,\n &[href]:focus-within,\n &.is-selected,\n &.is-chosen,\n .is-selected &,\n .is-chosen & {\n --box-shadow: #{$boxShadowOverlay};\n }\n\n &.is-ghost,\n .is-ghost & {\n --box-shadow: none;\n --border-color: transparent;\n\n overflow: hidden;\n }\n\n &.is-drag,\n &.is-chosen,\n &.is-ghost,\n &.is-selected,\n .is-drag &,\n .is-chosen &,\n .is-ghost &,\n .is-selected &,\n &[is-sortable]:hover {\n --dnd-visibility: visible;\n --dnd-opacity: 1;\n }\n\n ::slotted() {\n @include fontSize('milli');\n }\n\n ::slotted([slot=\"image\"]) {\n width: 100%;\n max-width: 100%;\n background-color: $colorGrey13;\n }\n\n ::slotted(img[slot=\"image\"]) {\n display: block;\n }\n\n ::slotted([slot=\"meta\"]:not(:last-child)) {\n margin-right: space('xsmall');\n }\n\n ::slotted(table) {\n border: 0;\n border-spacing: 0;\n\n th {\n @include font;\n }\n\n td, th {\n padding: 0;\n }\n\n td {\n color: $colorBlack;\n padding-left: space('xsmall');\n }\n }\n}\n\n:host ::slotted([slot=\"heading\"]),\n.stzh-card__title {\n @include font('heavy');\n @include fontCurve('h3', 'heading');\n}\n\n.stzh-card {\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n\tbackground-color: $colorWhite;\n\tborder-radius: var(--border-radius);\n\tbox-shadow: var(--box-shadow);\n border-width: 1px;\n border-style: solid;\n border-color: var(--border-color);\n\ttransition: box-shadow $baseTransitionAnimationSpeed;\n\n .vshow-medium {\n @include mq($to: medium) {\n @include visuallyhidden;\n }\n }\n\n .show-medium {\n @include mq($to: medium) {\n display: none;\n }\n }\n\n .hide-medium {\n @include mq($from: medium) {\n display: none;\n }\n }\n\n &__content-wrapper {\n position: relative;\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n min-height: var(--content-min-height);\n }\n\n\t&__dnd {\n --size: #{iconSize('xsmall')};\n\t\tposition: absolute;\n // INFO: we don't use space() values here, because we want this element to align with the heading\n left: 3px;\n top: 23px;\n\t\tdisplay: flex;\n\t\tvisibility: var(--dnd-visibility);\n\t\topacity: var(--dnd-opacity);\n\t\ttransition: all $baseTransitionAnimationSpeed;\n display: none;\n\n @include mq($from: medium) {\n display: block;\n }\n\n @include mq($from: large) {\n // INFO: we don't use space() values here, because we want this element to align with the heading\n left: 4px;\n top: 27px;\n }\n\t}\n\n &__header-top {\n\t\tdisplay: flex;\n\t\tjustify-content: space-between;\n\t\talign-items: flex-start;\n }\n\n &__header-meta {\n &:not(:empty) {\n display: inline-flex;\n margin-top: space('xsmall');\n }\n }\n\n\t&__header-left,\n\t&__header-right {\n\t\tdisplay: flex;\n\t}\n\n\t&__header-right {\n @include spaceCurve('padding-left', 'tiny');\n\t}\n\n\t&__left {\n\t\talign-self: center;\n\t}\n\n\t&__title-area {\n\t\t@include wordWrap;\n\t\toverflow: hidden;\n\t}\n\n\t&__title,\n\t&__subtitle {\n\t\tmargin: 0;\n\t}\n\n &__title-link {\n color: inherit;\n text-decoration-line: none;\n }\n\n &__image-link {\n display: block;\n }\n\n\t&__subtitle {\n @include fontCurve('p1');\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tflex-wrap: wrap;\n\t\ttext-decoration-line: none;\n // INFO: we don't use space() values here, since we try to mimic the width of a whitespace here\n\t\tmargin-left: -0.5625em;\n\t}\n\n\t&__subtitle-text {\n\t\tposition: relative;\n\t\tdisplay: inline-flex;\n // INFO: we don't use space() values here, since we try to mimic the width of a whitespace here\n\t\tpadding-left: 0.5625em;\n\n\t\t&::after {\n\t\t\tcontent: ',';\n\t\t\tposition: absolute;\n\t\t\tleft: 0;\n\t\t}\n\t}\n\n\t&__content {\n flex-grow: 1;\n\n &:not(:empty) {\n @include spaceCurve('padding', 'regular');\n }\n\t}\n\n &__footer-arrow {\n --size: #{iconSize('medium')};\n color: $colorPrimary;\n }\n\n &__card-actions {\n\t\tdisplay: inline-flex;\n white-space: nowrap;\n\t}\n\n\t&__card-action {\n @include mq($to: medium) {\n --icon-text-margin: 0px;\n --badge-icon-text-margin: 0px;\n }\n\n &[variant=\"tertiary\"] {\n --color: #{$colorGrey70};\n }\n\n &.is-button {\n --icon-size: #{iconSize('small')};\n }\n\n &.is-placeholder {\n width: space('xxlarge');\n height: space('xxlarge');\n }\n\n &.is-star {\n }\n\t}\n\n &__card-action-popover {\n --width: auto;\n }\n\n /* Has header /\n\n &--has-header &__header {\n\t\t@include spaceCurve('padding', 'regular');\n\t\tborder-bottom: 1px solid $baseBorderColor;\n\t}\n\n / Has footer /\n\n &--has-footer &__footer {\n @include spaceCurve('padding', 'regular');\n border-top: 1px solid $baseBorderColor;\n }\n\n / Has Link /\n\n &--has-link &__title-link {\n color: $colorPrimary;\n text-decoration-line: none;\n transition: color $baseTransitionAnimationSpeed;\n border-radius: $buttonBorderRadius;\n\n &::before,\n &::after {\n content: '';\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n }\n\n // &::before {\n // transition: all $baseTransitionAnimationSpeed;\n // }\n\n &::after {\n z-index: 1;\n }\n }\n\n &--has-link &__card-actions,\n &--has-link &__header-meta,\n &--has-link &__footer-actionset,\n &--has-link &__footer-select-button {\n position: relative;\n z-index: 2;\n }\n\n &--has-link &__image-link:hover + &__content-wrapper &__title-link,\n &--has-link &__title-link:hover,\n &--has-link &__title-link:focus {\n color: $colorPrimaryHover;\n\n // &::before,\n // &::before {\n // background-color: $colorPrimary4;\n // }\n }\n\n &--has-link:hover &__footer-arrow {\n color: $colorPrimaryHover;\n }\n\n / Interactive Subtitle /\n\n &--has-subtitle-interactive &__subtitle {\n cursor: pointer;\n font-family: inherit;\n padding: 0;\n appearance: none;\n background: none;\n border: none;\n transition: color $baseTransitionAnimationSpeed;\n color: $colorPrimary;\n\n &:hover,\n &:focus {\n color: $colorPrimaryHover;\n }\n }\n\n / Is collapsible /\n\n &--is-collapsible &__header {\n cursor: pointer;\n }\n\n / Collapsed (Header) /\n\n &--is-collapsed,\n &--has-collapsed-header &__header {\n .vhide-when-collapsed {\n @include visuallyhidden;\n }\n\n .hide-when-collapsed {\n display: none;\n }\n\n .show-when-collapsed {\n display: block;\n }\n }\n\n &--is-collapsed &__header {\n border-bottom: none;\n }\n\n &--is-collapsed &__card-action,\n &--has-collapsed-header &__card-action {\n --icon-text-margin: 0px;\n --badge-icon-text-margin: 0px;\n }\n\n / Starred /\n\n &--is-starred &__card-action.is-star {\n color: $colorPrimary;\n\n &:hover,\n &:focus {\n color: $colorPrimaryHover;\n }\n }\n\n /* Hidden header / footer border /\n\n &--has-hidden-header-border &__header {\n\t\tborder-bottom: none;\n padding-bottom: 0;\n }\n\n &--has-hidden-footer-border &__footer {\n &:not(:empty) {\n padding-top: 0;\n border-top: none;\n }\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Watch,\n Event,\n EventEmitter,\n Fragment,\n forceUpdate\n} from \"@stencil/core\";\n\nimport {\n StzhCardHeaderAction,\n StzhActionsetItem,\n StzhCardCollapseEvent,\n StzhCardSubtitleClickEvent,\n StzhCardStarClickEvent,\n StzhCardClickEvent,\n StzhCardHeaderActionClickEvent,\n StzhButtonChangeEvent\n} from \"../../index\";\n\nimport { hasSlot, setPropsIfNull } from \"../../utils/utils\";\nimport { media } from '../../utils/media-utils';\n\nimport { StzhCardLocalizedText } from './stzh-card.localization';\n\n/\n @slot heading - Slot for heading\n * @slot image - Slot for optional image element\n * @slot content - Slot for content for any elements\n * @slot meta - Slot for meta elements (status or chip)\n * @slot footer - Slot to replace footer content (`footerActions`, 'withArrow`, and `selectable` button are not shown anymore)\n /\n@Component({\n tag: \"stzh-card\",\n styleUrl: \"stzh-card.scss\",\n scoped: true\n})\nexport class StzhCard {\n /* Translation strings /\n @Prop() localization: StzhCardLocalizedText;\n\n /* Whether card is collapsed or not /\n @Prop({ reflect: true, mutable: true }) collapsed: boolean = false;\n\n /* Whether card was starred /\n @Prop({ reflect: true, mutable: true }) starred: boolean = false;\n\n /\n Whether card star is displayed (with tooltip and menu-item in mobile popover).\n * The tooltip / menu-item text can be adjusted in the translations file (`actionAdd` & `actionRemove`).\n /\n @Prop({ reflect: true }) starrable: boolean = false;\n\n /* Whether card is selectable /\n @Prop({ reflect: true }) selectable: boolean = false;\n\n /* Whether card is checked (if card is selectable) /\n @Prop({ reflect: true }) checked: boolean = false;\n\n /* The name of the input element (if card is selectable) /\n @Prop({ reflect: true }) name: string = \"\";\n\n /* Href of card /\n @Prop({ reflect: true }) href: string;\n\n /* target if the button is used as link (if href used) /\n @Prop() target: string;\n\n /* The value of the input element (if card is selectable) /\n @Prop({ mutable: true }) value: string = \"\";\n\n /* Whether the element is disabled or not (if card is selectable) /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* Whether card arrow is shown in footer area /\n @Prop({ reflect: true }) withArrow: boolean = false;\n\n /* Heading (or use heading slot instead) /\n @Prop() heading: string = \"\";\n\n /* Heading level /\n @Prop({ reflect: true }) headingLevel: \"1\" \| \"2\" \| \"3\" \| \"4\" = \"3\";\n\n /* Subtitle /\n @Prop() subtitle: string \| string[] = \"\";\n private _subtitles = [];\n\n /* Card header actions /\n @Prop() headerActions: string \| StzhCardHeaderAction[] = [];\n private _headerActions: StzhCardHeaderAction[];\n\n /\n Card footer actions.\n * The [`stzh-actionset`](?path=/story/components-actionset) component is used internally.\n * You can listen to clicks with the `stzhActionClick` event.\n /\n @Prop() footerActions: string \| StzhActionsetItem[] = [];\n private _footerActions: StzhActionsetItem[];\n\n /* Whether subtitle should be rendered as button and event `stzhSubtitleClick` executed on click /\n @Prop() subtitleInteractive: boolean = false;\n\n /\n Whether sorting should be disabled.\n * Has no effect if card is not inside a `card-list` element, which has `sortableEnabled` property set to true.\n /\n @Prop({ reflect: true }) sortableDisabled: boolean = false;\n\n /* Whether card is collapsible /\n @Prop({ reflect: true }) collapsible: boolean = false;\n\n /* Whether to hide header separation border /\n @Prop({ reflect: true }) hideHeaderBorder: boolean = false;\n\n /* Whether to hide footer separation border /\n @Prop({ reflect: true }) hideFooterBorder: boolean = false;\n\n /* Whether card elevation should be hidden /\n @Prop({ reflect: true }) hideElevation: boolean = false;\n\n /\n Whether movement menu items should be shown.\n * Has no effect if card is not inside a `card-list` element, which has `sortableEnabled` property set to true.\n /\n @Prop() hideMovementActions: boolean = false;\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the link elements.\n * Default value will be taken from `heading` prop/slot.\n /\n @Prop() analyticsId: string;\n\n @Element() element: HTMLStzhCardElement;\n\n /* Click event (if href is used) /\n @Event() stzhClick: EventEmitter<StzhCardClickEvent>;\n\n /* Collapse event /\n @Event() stzhCollapse: EventEmitter<StzhCardCollapseEvent>;\n\n /* Subtitle click event /\n @Event() stzhSubtitleClick: EventEmitter<StzhCardSubtitleClickEvent>;\n\n /* Star click event /\n @Event() stzhStarClick: EventEmitter<StzhCardStarClickEvent>;\n\n /* Header action click event /\n @Event() stzhHeaderActionClick: EventEmitter<StzhCardHeaderActionClickEvent>;\n\n @Watch(\"subtitle\")\n subtitleWatcher(newValue: string[] \| string) {\n if (typeof newValue === \"string\") {\n if (newValue === \"\") {\n this._subtitles = [];\n } else {\n try {\n this._subtitles = JSON.parse(newValue);\n } catch(err) {\n this._subtitles = [newValue];\n }\n }\n } else {\n this._subtitles = newValue;\n }\n }\n\n @Watch(\"headerActions\")\n headerActionsWatcher(newValue: StzhCardHeaderAction[] \| string) {\n if (typeof newValue === \"string\") {\n this._headerActions = JSON.parse(newValue);\n } else {\n this._headerActions = newValue;\n }\n }\n\n @Watch(\"footerActions\")\n footerActionsWatcher(newValue: StzhActionsetItem[] \| string) {\n if (typeof newValue === \"string\") {\n this._footerActions = JSON.parse(newValue);\n } else {\n this._footerActions = newValue;\n }\n }\n\n @Watch(\"collapsed\")\n collapsedWatcher() {\n this.handleResize();\n }\n\n private observer: MutationObserver;\n\n private nodeChange = (entries) => {\n let changeInSlot = false;\n\n entries.forEach((entry) => {\n if (entry.target.closest('[slot]') \|\| entry.target.hasAttribute('slot')) {\n changeInSlot = true;\n }\n });\n\n if (changeInSlot) {\n forceUpdate(this.element);\n }\n };\n\n private mainElement: HTMLElement;\n private headerElement: HTMLElement;\n private headerLeftElement: HTMLElement;\n private headerRightElement: HTMLElement;\n private imageLinkElement: HTMLAnchorElement;\n private titleLinkElement: HTMLAnchorElement;\n private headingTextElement: HTMLDivElement;\n private sortable: HTMLStzhSortableElement;\n\n private debounceResize: number;\n private resizeObserver: ResizeObserver;\n\n private update = () => {\n if (!this.mainElement) {\n return;\n }\n\n this.mainElement.classList.remove(\"stzh-card--has-collapsed-header\");\n\n if (media('medium').matches) {\n const headerWidth = this.headerElement.clientWidth;\n const leftWidth = this.headerLeftElement.clientWidth;\n const rightWidth = this.headerRightElement.clientWidth;\n\n if (headerWidth - leftWidth <= rightWidth) {\n this.mainElement.classList.add(\"stzh-card--has-collapsed-header\");\n }\n }\n }\n\n private headerClick = (event: MouseEvent) => {\n if (!this.collapsible) {\n return;\n }\n\n const filterTags = [\"stzh-popover\", \"stzh-tooltip\", \"button\", \"a\", \"input\", \"select\", \"textarea\", \"iframe\", \"details\", \"label\", \"area\"];\n const composedPathTags = event.composedPath().map(element => (element as HTMLElement).tagName?.toLowerCase());\n const found = composedPathTags.some(r => filterTags.includes(r))\n\n if (!found) {\n this.collapsed = !this.collapsed;\n\n this.stzhCollapse.emit({\n component: \"stzh-card\",\n collapsed: this.collapsed\n });\n }\n }\n\n private subtitleClick = () => {\n if (this.subtitleInteractive) {\n this.stzhSubtitleClick.emit({\n component: \"stzh-card\"\n });\n }\n }\n\n private starToggleClick = () => {\n this.stzhStarClick.emit({\n component: \"stzh-card\",\n starred: this.starred\n });\n }\n\n private actionClick = (action: StzhCardHeaderAction) => {\n this.stzhHeaderActionClick.emit({\n component: \"stzh-card\",\n action\n });\n }\n\n private arrowUpClick = () => {\n const sortable = this.element.closest(\"stzh-sortable\");\n\n if (sortable) {\n const element = this.findSortableChildElement();\n sortable.moveItem(element, \"up\");\n }\n }\n\n private arrowDownClick = () => {\n const sortable = this.element.closest(\"stzh-sortable\");\n\n if (sortable) {\n const element = this.findSortableChildElement();\n sortable.moveItem(element, \"down\");\n }\n }\n\n private updateElementInsideSortable = () => {\n const currentSortable = this.element.closest(\"stzh-sortable\");\n\n // check if element is still inside sortable\n if (!currentSortable) {\n this.sortable.removeEventListener(\"stzhUpdate\", this.updateElementInsideSortable);\n this.sortable.removeEventListener(\"stzhDisable\", this.updateElementInsideSortable)\n return;\n }\n\n if (this.element) {\n forceUpdate(this.element);\n }\n }\n\n private init = () => {\n const chips = this.element.querySelectorAll(\n 'stzh-chip[slot=\"meta\"], [slot=\"meta\"] stzh-chip'\n );\n\n chips.forEach((chip) => {\n setPropsIfNull(chip, {\n size: \"small\"\n } as HTMLStzhChipElement)\n });\n }\n\n private handleResize = () => {\n if (this.debounceResize) {\n window.cancelAnimationFrame(this.debounceResize);\n }\n\n this.debounceResize = requestAnimationFrame(this.update);\n }\n\n private handleMutation = (entries) => {\n this.init();\n this.nodeChange(entries);\n }\n\n private handleSelectionChange = (event: CustomEvent<StzhButtonChangeEvent>) => {\n this.checked = event.detail.checked;\n }\n\n private cardClick = (originalEvent: MouseEvent) => {\n this.stzhClick.emit({\n component: \"stzh-card\",\n originalEvent\n });\n }\n\n private findSortableChildElement(): HTMLElement \| undefined {\n const sortable = this.element.closest(\"stzh-sortable\");\n\n if (sortable) {\n let element: HTMLElement = this.element;\n let sortableContainer = null;\n\n if (typeof sortable.container === \"function\") {\n sortableContainer = sortable.container();\n } else {\n sortableContainer = sortable.container;\n }\n\n while (element.parentElement && element.parentElement !== sortableContainer) {\n element = element.parentElement;\n }\n\n return element;\n }\n }\n\n async componentWillLoad() {\n this.subtitleWatcher(this.subtitle);\n this.headerActionsWatcher(this.headerActions);\n this.footerActionsWatcher(this.footerActions);\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"card\");\n }\n }\n\n componentDidLoad() {\n this.sortable = this.element.closest(\"stzh-sortable\");\n\n if (this.sortable) {\n this.sortable.addEventListener(\"stzhUpdate\", this.updateElementInsideSortable);\n this.sortable.addEventListener(\"stzhDisable\", this.updateElementInsideSortable)\n }\n }\n\n componentDidRender() {\n requestAnimationFrame(() => {\n const objectId = this.analyticsId \|\| this.headingTextElement?.innerText;\n\n if (objectId) {\n this.imageLinkElement?.setAttribute(\"s-object-id\", objectId);\n this.titleLinkElement?.setAttribute(\"s-object-id\", objectId);\n }\n });\n }\n\n connectedCallback() {\n this.init();\n\n this.observer = new MutationObserver(this.handleMutation);\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 imageUsed: boolean = hasSlot(this.element, \"image\");\n const headingUsed: boolean = hasSlot(this.element, \"heading\");\n const footerUsed: boolean = hasSlot(this.element, \"footer\");\n const contentUsed: boolean = hasSlot(this.element, \"content\");\n\n const Heading = `h${this.headingLevel}`;\n const Subtitle = `${this.subtitleInteractive ? 'button' : 'span'}`;\n\n const sortableChildElement = this.findSortableChildElement();\n\n const isFirstItemInSortable = sortableChildElement?.parentElement\n && Array.from(sortableChildElement?.parentElement?.children)\n .indexOf(sortableChildElement) === 0;\n\n const isLastItemInSortable = sortableChildElement?.parentElement\n && Array.from(sortableChildElement?.parentElement?.children)\n .indexOf(sortableChildElement) === sortableChildElement?.parentElement?.children.length - 1;\n\n const sortableEnabled = !this.sortableDisabled && this.sortable && !this.sortable.disabled;\n const sortableActionsEnabled = sortableEnabled && !this.hideMovementActions;\n\n const nonCollapsingTextHeaderActions = this._headerActions.filter(action => !action.onlyCollapseText);\n\n // const headerActions = [\n // ...this._headerActions\n // ];\n\n const hasHeading = !!this.heading \|\| headingUsed;\n\n const hasHeader = hasHeading\n \|\| this._subtitles.length > 0\n \|\| this._headerActions.length > 0\n \|\| nonCollapsingTextHeaderActions.length > 0\n \|\| this.starrable\n \|\| sortableActionsEnabled;\n\n const hasFooter = footerUsed\n \|\| this._footerActions.length > 0\n \|\| this.selectable\n \|\| this.withArrow;\n\n const classes = {\n \"stzh-card\": true,\n \"stzh-card--has-link\": !!this.href,\n \"stzh-card--has-image\": imageUsed,\n \"stzh-card--has-content\": contentUsed,\n \"stzh-card--has-subtitle\": !!this.subtitle,\n \"stzh-card--has-subtitle-interactive\": !!this.subtitle && this.subtitleInteractive,\n \"stzh-card--has-hidden-header-border\": this.hideHeaderBorder,\n \"stzh-card--has-hidden-footer-border\": this.hideFooterBorder,\n \"stzh-card--has-header\": hasHeader,\n \"stzh-card--has-footer\": hasFooter,\n \"stzh-card--is-collapsible\": this.collapsible,\n \"stzh-card--is-collapsed\": this.collapsed,\n \"stzh-card--is-starred\": this.starred,\n \"stzh-card--is-checked\": this.checked,\n \"stzh-card--is-sortable\": sortableEnabled\n };\n\n return (\n <Host role=\"listitem\" aria-label={this.heading} is-sortable={sortableEnabled}>\n <article\n ref={(el) => (this.mainElement = el as HTMLElement)}\n class={classes}\n >\n <a\n ref={(el) => (this.imageLinkElement = el as HTMLAnchorElement)}\n aria-hidden=\"true\"\n tabindex=\"-1\"\n class=\"stzh-card__image-link\"\n href={this.href}\n target={this.target}\n onClick={this.href ? this.cardClick : null}\n >\n <slot name=\"image\"></slot>\n </a>\n <div class=\"stzh-card__content-wrapper\">\n <stzh-icon class=\"stzh-card__dnd\" name=\"drag\"></stzh-icon>\n\n <header\n ref={(el) => (this.headerElement = el as HTMLElement)}\n class=\"stzh-card__header\"\n onClick={this.headerClick}\n >\n <div class=\"stzh-card__header-top\">\n <div\n ref={(el) => (this.headerLeftElement = el as HTMLElement)}\n class=\"stzh-card__header-left\"\n >\n <div class=\"stzh-card__title-area\">\n {hasHeading &&\n <Heading class=\"stzh-card__title\">\n <a\n ref={(el) => (this.titleLinkElement = el as HTMLAnchorElement)}\n class=\"stzh-card__title-link\"\n href={this.href}\n target={this.target}\n onClick={this.href ? this.cardClick : null}\n >\n <div ref={(el) => (this.headingTextElement = el as HTMLDivElement)}>\n {this.heading ? this.heading : <slot name=\"heading\"></slot>}\n </div>\n </a>\n </Heading>\n }\n {this._subtitles.length > 0 &&\n <Subtitle class=\"stzh-card__subtitle\" onClick={this.subtitleClick}>\n {this._subtitles.map(subtitle => (\n <span class=\"stzh-card__subtitle-text\">{subtitle}</span>\n ))}\n </Subtitle>\n }\n </div>\n </div>\n <div\n ref={(el) => (this.headerRightElement = el as HTMLElement)}\n class=\"stzh-card__header-right\"\n >\n <div class=\"stzh-card__card-actions\">\n {this._headerActions.map(action => (\n <stzh-button\n class={{\n \"stzh-card__card-action\": true,\n \"is-button\": true,\n \"show-medium\": !action.onlyCollapseText,\n \"hide-when-collapsed\": !action.onlyCollapseText,\n \"hide-text-when-collapsed\": action.onlyCollapseText\n }}\n icon={action.icon}\n badge={action.badge}\n badgeEmpty={action.badgeEmpty}\n badgeType={action.badgeType}\n variant=\"tertiary\"\n size=\"tiny\"\n badgePosition=\"icon\"\n onClick={() => { this.actionClick(action) }}\n >\n <span\n class={{\n \"vshow-medium\": action.onlyCollapseText,\n \"vhide-when-collapsed\": action.onlyCollapseText\n }}\n >\n {action.label}\n </span>\n </stzh-button>\n ))}\n\n {this.starrable &&\n <stzh-tooltip>\n <stzh-button\n class=\"stzh-card__card-action is-star\"\n icon={this.starred ? \"star-filled\" : \"star\"}\n variant=\"tertiary\"\n size=\"tiny\"\n iconOnly={true}\n onClick={this.starToggleClick}\n ></stzh-button>\n <div slot=\"content\">\n {this.starred ? this.localization.actionRemove : this.localization.actionAdd}\n </div>\n </stzh-tooltip>\n }\n\n {/ <stzh-actionset actions={headerActions} variant=\"overflow\"></stzh-actionset> */}\n\n {(nonCollapsingTextHeaderActions.length > 0 \|\| this.starrable \|\| sortableActionsEnabled) &&\n <stzh-popover\n label={this.localization.actionsPopoverLabel}\n placement=\"bottom-end\"\n class={{\n \"stzh-card__card-action-popover\": true,\n \"hide-medium show-when-collapsed\": !this.starrable && !sortableActionsEnabled\n }}\n >\n <stzh-button\n class=\"stzh-card__card-action is-further\"\n variant=\"tertiary\"\n size=\"tiny\"\n icon=\"more-vertical\"\n iconOnly={true}\n ></stzh-button>\n <stzh-menu slot=\"content\">\n {this.starrable &&\n <stzh-menu-item icon={this.starred ? \"star-filled\" : \"star\"} onClick={this.starToggleClick}>\n {this.starred ? this.localization.actionRemove : this.localization.actionAdd}\n </stzh-menu-item>\n }\n\n {nonCollapsingTextHeaderActions.map(action => (\n <stzh-menu-item\n class=\"hide-medium show-when-collapsed\"\n icon={action.icon}\n badge={action.badge}\n badgeEmpty={action.badgeEmpty}\n badgeType={action.badgeType}\n onClick={() => { this.actionClick(action) }}\n >\n {action.label}\n </stzh-menu-item>\n ))}\n\n {sortableActionsEnabled &&\n <Fragment>\n {!isFirstItemInSortable &&\n <stzh-menu-item icon=\"arrow-up\" onClick={this.arrowUpClick}>\n {this.localization.actionMoveUp}\n </stzh-menu-item>\n }\n {!isLastItemInSortable &&\n <stzh-menu-item icon=\"arrow-down\" onClick={this.arrowDownClick}>\n {this.localization.actionMoveDown}\n </stzh-menu-item>\n }\n </Fragment>\n }\n </stzh-menu>\n </stzh-popover>\n }\n </div>\n </div>\n </div>\n\n <div class=\"stzh-card__header-meta\">\n <slot name=\"meta\"></slot>\n </div>\n </header>\n\n <div class=\"stzh-card__content hide-when-collapsed\">\n <slot name=\"content\"></slot>\n </div>\n\n <div class=\"stzh-card__footer hide-when-collapsed\">\n <slot name=\"footer\">\n {this._footerActions.length > 0 &&\n <stzh-actionset\n class=\"stzh-card__footer-actionset\"\n actions={this._footerActions}\n ></stzh-actionset>\n }\n\n {this.selectable &&\n <stzh-button\n class=\"stzh-card__footer-select-button\"\n fullwidth\n type=\"radio\"\n variant=\"secondary\"\n name={this.name}\n value={this.value}\n checked={this.checked}\n disabled={this.disabled}\n label={this.localization.select}\n onStzhChange={this.handleSelectionChange}\n ></stzh-button>\n }\n\n {this.withArrow &&\n <stzh-icon\n class=\"stzh-card__footer-arrow\"\n name=\"arrow-right-long\"\n ></stzh-icon>}\n </slot>\n </div>\n </div>\n </article>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"stzh-card2.js","mappings":"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","names":[],"sources":["src/components/stzh-card/stzh-card.scss?tag=stzh-card&encapsulation=scoped","src/components/stzh-card/stzh-card.tsx"],"sourcesContent":["/*\n @prop --content-min-height: Min height of content\n /\n\n:host {\n --box-shadow: #{$boxShadowPopover};\n --border-color: #{$baseBorderColor};\n --border-radius: 3px;\n\n --content-min-height: 120px;\n\n --dnd-visibility: hidden;\n --dnd-opacity: 0;\n\n display: flex;\n flex-direction: column;\n position: relative;\n border-radius: var(--border-radius);\n\n @media print {\n page-break-inside: avoid;\n break-inside: avoid;\n }\n\n &[collapsed]:not([collapsed=\"false\"]) {\n --content-min-height: none;\n }\n\n &[checked]:not([checked=\"false\"]) {\n outline: 3px solid $colorPrimary;\n }\n\n &[hide-elevation]:not([hide-elevation=\"false\"]) {\n --box-shadow: none;\n\n &[href]:hover,\n &[href]:focus-within,\n &.is-selected,\n &.is-chosen,\n .is-selected &,\n .is-chosen & {\n --box-shadow: #{$boxShadowPopover};\n }\n }\n\n &.is-ghost::after,\n .is-ghost &::after {\n border-radius: var(--border-radius);\n }\n\n &[href]:hover,\n &[href]:focus-within,\n &.is-selected,\n &.is-chosen,\n .is-selected &,\n .is-chosen & {\n --box-shadow: #{$boxShadowOverlay};\n }\n\n &.is-ghost,\n .is-ghost & {\n --box-shadow: none;\n --border-color: transparent;\n\n overflow: hidden;\n }\n\n &.is-drag,\n &.is-chosen,\n &.is-ghost,\n &.is-selected,\n .is-drag &,\n .is-chosen &,\n .is-ghost &,\n .is-selected &,\n &[is-sortable]:hover {\n --dnd-visibility: visible;\n --dnd-opacity: 1;\n }\n\n ::slotted() {\n @include fontSize('milli');\n }\n\n ::slotted([slot=\"image\"]) {\n width: 100%;\n max-width: 100%;\n background-color: $colorGrey13;\n }\n\n ::slotted(img[slot=\"image\"]) {\n display: block;\n }\n\n ::slotted([slot=\"meta\"]:not(:last-child)) {\n margin-right: space('xsmall');\n }\n\n ::slotted(table) {\n border: 0;\n border-spacing: 0;\n\n th {\n @include font;\n }\n\n td, th {\n padding: 0;\n }\n\n td {\n color: $colorBlack;\n padding-left: space('xsmall');\n }\n }\n}\n\n:host ::slotted([slot=\"heading\"]),\n.stzh-card__title {\n @include font('heavy');\n @include fontCurve('h3', 'heading');\n}\n\n.stzh-card {\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n\tbackground-color: $colorWhite;\n\tborder-radius: var(--border-radius);\n\tbox-shadow: var(--box-shadow);\n border-width: 1px;\n border-style: solid;\n border-color: var(--border-color);\n\ttransition: box-shadow $baseTransitionAnimationSpeed;\n\n // .vshow-medium {\n // @include mq($to: medium) {\n // @include visuallyhidden;\n // }\n // }\n\n // .show-medium {\n // @include mq($to: medium) {\n // display: none;\n // }\n // }\n\n // .hide-medium {\n // @include mq($from: medium) {\n // display: none;\n // }\n // }\n\n &__content-wrapper {\n position: relative;\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n min-height: var(--content-min-height);\n }\n\n\t&__dnd {\n --size: #{iconSize('xsmall')};\n\t\tposition: absolute;\n // INFO: we don't use space() values here, because we want this element to align with the heading\n left: 3px;\n top: 23px;\n\t\tdisplay: flex;\n\t\tvisibility: var(--dnd-visibility);\n\t\topacity: var(--dnd-opacity);\n\t\ttransition: all $baseTransitionAnimationSpeed;\n display: none;\n\n @include mq($from: medium) {\n display: block;\n }\n\n @include mq($from: large) {\n // INFO: we don't use space() values here, because we want this element to align with the heading\n left: 4px;\n top: 27px;\n }\n\t}\n\n &__header-top {\n\t\tdisplay: flex;\n\t\tjustify-content: space-between;\n\t\talign-items: flex-start;\n }\n\n &__header-meta {\n &:not(:empty) {\n display: inline-flex;\n margin-top: space('xsmall');\n }\n }\n\n\t&__header-left,\n\t&__header-right {\n\t\tdisplay: flex;\n\t}\n\n\t&__header-right {\n @include spaceCurve('padding-left', 'tiny');\n\t}\n\n\t&__left {\n\t\talign-self: center;\n\t}\n\n\t&__title-area {\n\t\t@include wordWrap;\n\t\toverflow: hidden;\n\t}\n\n\t&__title,\n\t&__subtitle {\n\t\tmargin: 0;\n\t}\n\n &__title-link {\n color: inherit;\n text-decoration-line: none;\n }\n\n &__image-link {\n display: block;\n }\n\n\t&__subtitle {\n @include fontCurve('p1');\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tflex-wrap: wrap;\n\t\ttext-decoration-line: none;\n // INFO: we don't use space() values here, since we try to mimic the width of a whitespace here\n\t\tmargin-left: -0.5625em;\n\t}\n\n\t&__subtitle-text {\n\t\tposition: relative;\n\t\tdisplay: inline-flex;\n // INFO: we don't use space() values here, since we try to mimic the width of a whitespace here\n\t\tpadding-left: 0.5625em;\n\n\t\t&::after {\n\t\t\tcontent: ',';\n\t\t\tposition: absolute;\n\t\t\tleft: 0;\n\t\t}\n\t}\n\n\t&__content {\n flex-grow: 1;\n\n &:not(:empty) {\n @include spaceCurve('padding', 'regular');\n }\n\t}\n\n &__footer-arrow {\n --size: #{iconSize('medium')};\n color: $colorPrimary;\n }\n\n &__card-actions {\n\t\tdisplay: inline-flex;\n white-space: nowrap;\n\t}\n\n\t&__card-action {\n @include mq($to: medium) {\n --icon-text-margin: 0px;\n --badge-icon-text-margin: 0px;\n }\n\n &[variant=\"tertiary\"] {\n --color: #{$colorGrey70};\n }\n\n &.is-button {\n --icon-size: #{iconSize('small')};\n }\n\n &.is-placeholder {\n width: space('xxlarge');\n height: space('xxlarge');\n }\n\n &.is-star {\n }\n\t}\n\n &__card-action-popover {\n --width: auto;\n }\n\n /* Has header /\n\n &--has-header &__header {\n\t\t@include spaceCurve('padding', 'regular');\n\t\tborder-bottom: 1px solid $baseBorderColor;\n\t}\n\n / Has footer /\n\n &--has-footer &__footer {\n @include spaceCurve('padding', 'regular');\n border-top: 1px solid $baseBorderColor;\n }\n\n / Has Link /\n\n &--has-link &__title-link {\n color: $colorPrimary;\n text-decoration-line: none;\n transition: color $baseTransitionAnimationSpeed;\n border-radius: $buttonBorderRadius;\n\n &::before,\n &::after {\n content: '';\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n }\n\n // &::before {\n // transition: all $baseTransitionAnimationSpeed;\n // }\n\n &::after {\n z-index: 1;\n }\n }\n\n &--has-link &__card-actions,\n &--has-link &__header-meta,\n &--has-link &__footer-actionset,\n &--has-link &__footer-select-button {\n position: relative;\n z-index: 2;\n }\n\n &--has-link &__image-link:hover + &__content-wrapper &__title-link,\n &--has-link &__title-link:hover,\n &--has-link &__title-link:focus {\n color: $colorPrimaryHover;\n\n // &::before,\n // &::before {\n // background-color: $colorPrimary4;\n // }\n }\n\n &--has-link:hover &__footer-arrow {\n color: $colorPrimaryHover;\n }\n\n / Interactive Subtitle /\n\n &--has-subtitle-interactive &__subtitle {\n cursor: pointer;\n font-family: inherit;\n padding: 0;\n appearance: none;\n background: none;\n border: none;\n transition: color $baseTransitionAnimationSpeed;\n color: $colorPrimary;\n\n &:hover,\n &:focus {\n color: $colorPrimaryHover;\n }\n }\n\n / Is collapsible /\n\n &--is-collapsible &__header {\n cursor: pointer;\n }\n\n / Collapsed (Header) /\n\n &--is-collapsed,\n &--has-collapsed-header &__header {\n // .vhide-when-collapsed {\n // @include visuallyhidden;\n // }\n\n .hide-when-collapsed {\n display: none;\n }\n\n // .show-when-collapsed {\n // display: block;\n // }\n }\n\n &--is-collapsed &__header {\n border-bottom: none;\n }\n\n &--is-collapsed &__card-action,\n &--has-collapsed-header &__card-action {\n --icon-text-margin: 0px;\n --badge-icon-text-margin: 0px;\n }\n\n / Starred /\n\n &--is-starred &__card-action.is-star {\n color: $colorPrimary;\n\n &:hover,\n &:focus {\n color: $colorPrimaryHover;\n }\n }\n\n /* Hidden header / footer border /\n\n &--has-hidden-header-border &__header {\n\t\tborder-bottom: none;\n padding-bottom: 0;\n }\n\n &--has-hidden-footer-border &__footer {\n &:not(:empty) {\n padding-top: 0;\n border-top: none;\n }\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Watch,\n Event,\n EventEmitter,\n Fragment,\n forceUpdate\n} from \"@stencil/core\";\n\nimport {\n StzhCardHeaderAction,\n StzhActionsetItem,\n StzhCardCollapseEvent,\n StzhCardSubtitleClickEvent,\n StzhCardStarClickEvent,\n StzhCardClickEvent,\n StzhCardHeaderActionClickEvent,\n StzhButtonChangeEvent\n} from \"../../index\";\n\nimport { hasSlot, setPropsIfNull } from \"../../utils/utils\";\nimport { media } from '../../utils/media-utils';\n\nimport { StzhCardLocalizedText } from './stzh-card.localization';\n\n/\n @slot heading - Slot for heading\n * @slot image - Slot for optional image element\n * @slot content - Slot for content for any elements\n * @slot meta - Slot for meta elements (status or chip)\n * @slot footer - Slot to replace footer content (`footerActions`, 'withArrow`, and `selectable` button are not shown anymore)\n /\n@Component({\n tag: \"stzh-card\",\n styleUrl: \"stzh-card.scss\",\n scoped: true\n})\nexport class StzhCard {\n /* Translation strings /\n @Prop() localization: StzhCardLocalizedText;\n\n /* Whether card is collapsed or not /\n @Prop({ reflect: true, mutable: true }) collapsed: boolean = false;\n\n /* Whether card was starred /\n @Prop({ reflect: true, mutable: true }) starred: boolean = false;\n\n /\n Whether card star is displayed (with tooltip and menu-item in mobile popover).\n * The tooltip / menu-item text can be adjusted in the translations file (`actionAdd` & `actionRemove`).\n /\n @Prop({ reflect: true }) starrable: boolean = false;\n\n /* Whether card is selectable /\n @Prop({ reflect: true }) selectable: boolean = false;\n\n /* Whether card is checked (if card is selectable) /\n @Prop({ reflect: true }) checked: boolean = false;\n\n /* The name of the input element (if card is selectable) /\n @Prop({ reflect: true }) name: string = \"\";\n\n /* Href of card /\n @Prop({ reflect: true }) href: string;\n\n /* target if the button is used as link (if href used) /\n @Prop() target: string;\n\n /* The value of the input element (if card is selectable) /\n @Prop({ mutable: true }) value: string = \"\";\n\n /* Whether the element is disabled or not (if card is selectable) /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* Whether card arrow is shown in footer area /\n @Prop({ reflect: true }) withArrow: boolean = false;\n\n /* Heading (or use heading slot instead) /\n @Prop() heading: string = \"\";\n\n /* Heading level /\n @Prop({ reflect: true }) headingLevel: \"1\" \| \"2\" \| \"3\" \| \"4\" = \"3\";\n\n /* Subtitle /\n @Prop() subtitle: string \| string[] = \"\";\n private _subtitles = [];\n\n /* Card header actions /\n @Prop() headerActions: string \| StzhCardHeaderAction[] = [];\n private _headerActions: StzhCardHeaderAction[];\n\n /\n Card footer actions.\n * The [`stzh-actionset`](?path=/story/components-actionset) component is used internally.\n * You can listen to clicks with the `stzhActionClick` event.\n /\n @Prop() footerActions: string \| StzhActionsetItem[] = [];\n private _footerActions: StzhActionsetItem[];\n\n /* Whether subtitle should be rendered as button and event `stzhSubtitleClick` executed on click /\n @Prop() subtitleInteractive: boolean = false;\n\n /\n Whether sorting should be disabled.\n * Has no effect if card is not inside a `card-list` element, which has `sortableEnabled` property set to true.\n /\n @Prop({ reflect: true }) sortableDisabled: boolean = false;\n\n /* Whether card is collapsible /\n @Prop({ reflect: true }) collapsible: boolean = false;\n\n /* Whether to hide header separation border /\n @Prop({ reflect: true }) hideHeaderBorder: boolean = false;\n\n /* Whether to hide footer separation border /\n @Prop({ reflect: true }) hideFooterBorder: boolean = false;\n\n /* Whether card elevation should be hidden /\n @Prop({ reflect: true }) hideElevation: boolean = false;\n\n /\n Whether movement menu items should be shown.\n * Has no effect if card is not inside a `card-list` element, which has `sortableEnabled` property set to true.\n /\n @Prop() hideMovementActions: boolean = false;\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the link elements.\n * Default value will be taken from `heading` prop/slot.\n /\n @Prop() analyticsId: string;\n\n @Element() element: HTMLStzhCardElement;\n\n /* Click event (if href is used) /\n @Event() stzhClick: EventEmitter<StzhCardClickEvent>;\n\n /* Collapse event /\n @Event() stzhCollapse: EventEmitter<StzhCardCollapseEvent>;\n\n /* Subtitle click event /\n @Event() stzhSubtitleClick: EventEmitter<StzhCardSubtitleClickEvent>;\n\n /* Star click event /\n @Event() stzhStarClick: EventEmitter<StzhCardStarClickEvent>;\n\n /* Header action click event /\n @Event() stzhHeaderActionClick: EventEmitter<StzhCardHeaderActionClickEvent>;\n\n @Watch(\"subtitle\")\n subtitleWatcher(newValue: string[] \| string) {\n if (typeof newValue === \"string\") {\n if (newValue === \"\") {\n this._subtitles = [];\n } else {\n try {\n this._subtitles = JSON.parse(newValue);\n } catch(err) {\n this._subtitles = [newValue];\n }\n }\n } else {\n this._subtitles = newValue;\n }\n }\n\n @Watch(\"headerActions\")\n headerActionsWatcher(newValue: StzhCardHeaderAction[] \| string) {\n if (typeof newValue === \"string\") {\n this._headerActions = JSON.parse(newValue);\n } else {\n this._headerActions = newValue;\n }\n }\n\n @Watch(\"footerActions\")\n footerActionsWatcher(newValue: StzhActionsetItem[] \| string) {\n if (typeof newValue === \"string\") {\n this._footerActions = JSON.parse(newValue);\n } else {\n this._footerActions = newValue;\n }\n }\n\n @Watch(\"collapsed\")\n collapsedWatcher() {\n this.handleResize();\n }\n\n private observer: MutationObserver;\n\n private nodeChange = (entries) => {\n let changeInSlot = false;\n\n entries.forEach((entry) => {\n if (entry.target.closest('[slot]') \|\| entry.target.hasAttribute('slot')) {\n changeInSlot = true;\n }\n });\n\n if (changeInSlot) {\n forceUpdate(this.element);\n }\n };\n\n private mainElement: HTMLElement;\n private headerElement: HTMLElement;\n private headerLeftElement: HTMLElement;\n private headerRightElement: HTMLElement;\n private imageLinkElement: HTMLAnchorElement;\n private titleLinkElement: HTMLAnchorElement;\n private headingTextElement: HTMLDivElement;\n private sortable: HTMLStzhSortableElement;\n\n private debounceResize: number;\n private resizeObserver: ResizeObserver;\n\n private update = () => {\n if (!this.mainElement) {\n return;\n }\n\n this.mainElement.classList.remove(\"stzh-card--has-collapsed-header\");\n\n if (media('medium').matches) {\n const headerWidth = this.headerElement.clientWidth;\n const leftWidth = this.headerLeftElement.clientWidth;\n const rightWidth = this.headerRightElement.clientWidth;\n\n if (headerWidth - leftWidth <= rightWidth) {\n this.mainElement.classList.add(\"stzh-card--has-collapsed-header\");\n }\n }\n }\n\n private headerClick = (event: MouseEvent) => {\n if (!this.collapsible) {\n return;\n }\n\n const filterTags = [\"stzh-popover\", \"stzh-tooltip\", \"button\", \"a\", \"input\", \"select\", \"textarea\", \"iframe\", \"details\", \"label\", \"area\"];\n const composedPathTags = event.composedPath().map(element => (element as HTMLElement).tagName?.toLowerCase());\n const found = composedPathTags.some(r => filterTags.includes(r))\n\n if (!found) {\n this.collapsed = !this.collapsed;\n\n this.stzhCollapse.emit({\n component: \"stzh-card\",\n collapsed: this.collapsed\n });\n }\n }\n\n private subtitleClick = () => {\n if (this.subtitleInteractive) {\n this.stzhSubtitleClick.emit({\n component: \"stzh-card\"\n });\n }\n }\n\n private starToggleClick = () => {\n this.stzhStarClick.emit({\n component: \"stzh-card\",\n starred: this.starred\n });\n }\n\n private actionClick = (action: StzhCardHeaderAction) => {\n this.stzhHeaderActionClick.emit({\n component: \"stzh-card\",\n action\n });\n }\n\n private arrowUpClick = () => {\n const sortable = this.element.closest(\"stzh-sortable\");\n\n if (sortable) {\n const element = this.findSortableChildElement();\n sortable.moveItem(element, \"up\");\n }\n }\n\n private arrowDownClick = () => {\n const sortable = this.element.closest(\"stzh-sortable\");\n\n if (sortable) {\n const element = this.findSortableChildElement();\n sortable.moveItem(element, \"down\");\n }\n }\n\n private updateElementInsideSortable = () => {\n const currentSortable = this.element.closest(\"stzh-sortable\");\n\n // check if element is still inside sortable\n if (!currentSortable) {\n this.sortable.removeEventListener(\"stzhUpdate\", this.updateElementInsideSortable);\n this.sortable.removeEventListener(\"stzhDisable\", this.updateElementInsideSortable)\n return;\n }\n\n if (this.element) {\n forceUpdate(this.element);\n }\n }\n\n private init = () => {\n const chips = this.element.querySelectorAll(\n 'stzh-chip[slot=\"meta\"], [slot=\"meta\"] stzh-chip'\n );\n\n chips.forEach((chip) => {\n setPropsIfNull(chip, {\n size: \"small\"\n } as HTMLStzhChipElement)\n });\n }\n\n private handleResize = () => {\n if (this.debounceResize) {\n window.cancelAnimationFrame(this.debounceResize);\n }\n\n this.debounceResize = requestAnimationFrame(this.update);\n }\n\n private handleMutation = (entries) => {\n this.init();\n this.nodeChange(entries);\n }\n\n private handleSelectionChange = (event: CustomEvent<StzhButtonChangeEvent>) => {\n this.checked = event.detail.checked;\n }\n\n private cardClick = (originalEvent: MouseEvent) => {\n this.stzhClick.emit({\n component: \"stzh-card\",\n originalEvent\n });\n }\n\n private findSortableChildElement(): HTMLElement \| undefined {\n const sortable = this.element.closest(\"stzh-sortable\");\n\n if (sortable) {\n let element: HTMLElement = this.element;\n let sortableContainer = null;\n\n if (typeof sortable.container === \"function\") {\n sortableContainer = sortable.container();\n } else {\n sortableContainer = sortable.container;\n }\n\n while (element.parentElement && element.parentElement !== sortableContainer) {\n element = element.parentElement;\n }\n\n return element;\n }\n }\n\n async componentWillLoad() {\n this.subtitleWatcher(this.subtitle);\n this.headerActionsWatcher(this.headerActions);\n this.footerActionsWatcher(this.footerActions);\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"card\");\n }\n }\n\n componentDidLoad() {\n this.sortable = this.element.closest(\"stzh-sortable\");\n\n if (this.sortable) {\n this.sortable.addEventListener(\"stzhUpdate\", this.updateElementInsideSortable);\n this.sortable.addEventListener(\"stzhDisable\", this.updateElementInsideSortable)\n }\n }\n\n componentDidRender() {\n requestAnimationFrame(() => {\n const objectId = this.analyticsId \|\| this.headingTextElement?.innerText;\n\n if (objectId) {\n this.imageLinkElement?.setAttribute(\"s-object-id\", objectId);\n this.titleLinkElement?.setAttribute(\"s-object-id\", objectId);\n }\n });\n }\n\n connectedCallback() {\n this.init();\n\n this.observer = new MutationObserver(this.handleMutation);\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 imageUsed: boolean = hasSlot(this.element, \"image\");\n const headingUsed: boolean = hasSlot(this.element, \"heading\");\n const footerUsed: boolean = hasSlot(this.element, \"footer\");\n const contentUsed: boolean = hasSlot(this.element, \"content\");\n\n const Heading = `h${this.headingLevel}`;\n const Subtitle = `${this.subtitleInteractive ? 'button' : 'span'}`;\n\n const sortableChildElement = this.findSortableChildElement();\n\n const isFirstItemInSortable = sortableChildElement?.parentElement\n && Array.from(sortableChildElement?.parentElement?.children)\n .indexOf(sortableChildElement) === 0;\n\n const isLastItemInSortable = sortableChildElement?.parentElement\n && Array.from(sortableChildElement?.parentElement?.children)\n .indexOf(sortableChildElement) === sortableChildElement?.parentElement?.children.length - 1;\n\n const sortableEnabled = !this.sortableDisabled && this.sortable && !this.sortable.disabled;\n const sortableActionsEnabled = sortableEnabled && !this.hideMovementActions;\n\n // const nonCollapsingTextHeaderActions = this._headerActions.filter(action => !action.onlyCollapseText);\n\n // const headerActions = [\n // ...this._headerActions\n // ];\n\n const hasHeading = !!this.heading \|\| headingUsed;\n\n const hasHeader = hasHeading\n \|\| this._subtitles.length > 0\n \|\| this._headerActions.length > 0\n // \|\| nonCollapsingTextHeaderActions.length > 0\n \|\| this.starrable\n \|\| sortableActionsEnabled;\n\n const hasFooter = footerUsed\n \|\| this._footerActions.length > 0\n \|\| this.selectable\n \|\| this.withArrow;\n\n const classes = {\n \"stzh-card\": true,\n \"stzh-card--has-link\": !!this.href,\n \"stzh-card--has-image\": imageUsed,\n \"stzh-card--has-content\": contentUsed,\n \"stzh-card--has-subtitle\": !!this.subtitle,\n \"stzh-card--has-subtitle-interactive\": !!this.subtitle && this.subtitleInteractive,\n \"stzh-card--has-hidden-header-border\": this.hideHeaderBorder,\n \"stzh-card--has-hidden-footer-border\": this.hideFooterBorder,\n \"stzh-card--has-header\": hasHeader,\n \"stzh-card--has-footer\": hasFooter,\n \"stzh-card--is-collapsible\": this.collapsible,\n \"stzh-card--is-collapsed\": this.collapsed,\n \"stzh-card--is-starred\": this.starred,\n \"stzh-card--is-checked\": this.checked,\n \"stzh-card--is-sortable\": sortableEnabled\n };\n\n return (\n <Host role=\"listitem\" aria-label={this.heading} is-sortable={sortableEnabled}>\n <article\n ref={(el) => (this.mainElement = el as HTMLElement)}\n class={classes}\n >\n <a\n ref={(el) => (this.imageLinkElement = el as HTMLAnchorElement)}\n aria-hidden=\"true\"\n tabindex=\"-1\"\n class=\"stzh-card__image-link\"\n href={this.href}\n target={this.target}\n onClick={this.href ? this.cardClick : null}\n >\n <slot name=\"image\"></slot>\n </a>\n <div class=\"stzh-card__content-wrapper\">\n <stzh-icon class=\"stzh-card__dnd\" name=\"drag\"></stzh-icon>\n\n <header\n ref={(el) => (this.headerElement = el as HTMLElement)}\n class=\"stzh-card__header\"\n onClick={this.headerClick}\n >\n <div class=\"stzh-card__header-top\">\n <div\n ref={(el) => (this.headerLeftElement = el as HTMLElement)}\n class=\"stzh-card__header-left\"\n >\n <div class=\"stzh-card__title-area\">\n {hasHeading &&\n <Heading class=\"stzh-card__title\">\n <a\n ref={(el) => (this.titleLinkElement = el as HTMLAnchorElement)}\n class=\"stzh-card__title-link\"\n href={this.href}\n target={this.target}\n onClick={this.href ? this.cardClick : null}\n >\n <div ref={(el) => (this.headingTextElement = el as HTMLDivElement)}>\n {this.heading ? this.heading : <slot name=\"heading\"></slot>}\n </div>\n </a>\n </Heading>\n }\n {this._subtitles.length > 0 &&\n <Subtitle class=\"stzh-card__subtitle\" onClick={this.subtitleClick}>\n {this._subtitles.map(subtitle => (\n <span class=\"stzh-card__subtitle-text\">{subtitle}</span>\n ))}\n </Subtitle>\n }\n </div>\n </div>\n <div\n ref={(el) => (this.headerRightElement = el as HTMLElement)}\n class=\"stzh-card__header-right\"\n >\n <div class=\"stzh-card__card-actions\">\n {/ {this._headerActions.map(action => (\n <stzh-button\n class={{\n \"stzh-card__card-action\": true,\n \"is-button\": true,\n \"show-medium\": !action.onlyCollapseText,\n \"hide-when-collapsed\": !action.onlyCollapseText,\n \"hide-text-when-collapsed\": action.onlyCollapseText\n }}\n icon={action.icon}\n badge={action.badge}\n badgeEmpty={action.badgeEmpty}\n badgeType={action.badgeType}\n variant=\"tertiary\"\n size=\"tiny\"\n badgePosition=\"icon\"\n onClick={() => { this.actionClick(action) }}\n >\n <span\n class={{\n \"vshow-medium\": action.onlyCollapseText,\n \"vhide-when-collapsed\": action.onlyCollapseText\n }}\n >\n {action.label}\n </span>\n </stzh-button>\n ))} /}\n\n {this.starrable &&\n <stzh-tooltip>\n <stzh-button\n class=\"stzh-card__card-action is-star\"\n icon={this.starred ? \"star-filled\" : \"star\"}\n variant=\"tertiary\"\n size=\"tiny\"\n iconOnly={true}\n onClick={this.starToggleClick}\n ></stzh-button>\n <div slot=\"content\">\n {this.starred ? this.localization.actionRemove : this.localization.actionAdd}\n </div>\n </stzh-tooltip>\n }\n\n {/ <stzh-actionset actions={headerActions} variant=\"overflow\"></stzh-actionset> /}\n {/ {(nonCollapsingTextHeaderActions.length > 0 \|\| this.starrable \|\| sortableActionsEnabled) && /}\n {(this._headerActions.length > 0 \|\| this.starrable \|\| sortableActionsEnabled) &&\n <stzh-popover\n label={this.localization.actionsPopoverLabel}\n placement=\"bottom-end\"\n class={{\n \"stzh-card__card-action-popover\": true,\n // \"hide-medium show-when-collapsed\": !this.starrable && !sortableActionsEnabled\n }}\n >\n <stzh-button\n class=\"stzh-card__card-action is-further\"\n variant=\"tertiary\"\n size=\"tiny\"\n icon=\"more-vertical\"\n iconOnly={true}\n ></stzh-button>\n <stzh-menu slot=\"content\">\n {/ {nonCollapsingTextHeaderActions.map(action => ( */}\n {this._headerActions.map(action => (\n <stzh-menu-item\n // class=\"hide-medium show-when-collapsed\"\n icon={action.icon}\n badge={action.badge}\n badgeEmpty={action.badgeEmpty}\n badgeType={action.badgeType}\n onClick={() => { this.actionClick(action) }}\n >\n {action.label}\n </stzh-menu-item>\n ))}\n\n {sortableActionsEnabled &&\n <Fragment>\n {!isFirstItemInSortable &&\n <stzh-menu-item icon=\"arrow-up\" onClick={this.arrowUpClick}>\n {this.localization.actionMoveUp}\n </stzh-menu-item>\n }\n {!isLastItemInSortable &&\n <stzh-menu-item icon=\"arrow-down\" onClick={this.arrowDownClick}>\n {this.localization.actionMoveDown}\n </stzh-menu-item>\n }\n </Fragment>\n }\n\n {this.starrable &&\n <stzh-menu-item icon={this.starred ? \"star-filled\" : \"star\"} onClick={this.starToggleClick}>\n {this.starred ? this.localization.actionRemove : this.localization.actionAdd}\n </stzh-menu-item>\n }\n </stzh-menu>\n </stzh-popover>\n }\n </div>\n </div>\n </div>\n\n <div class=\"stzh-card__header-meta\">\n <slot name=\"meta\"></slot>\n </div>\n </header>\n\n <div class=\"stzh-card__content hide-when-collapsed\">\n <slot name=\"content\"></slot>\n </div>\n\n <div class=\"stzh-card__footer hide-when-collapsed\">\n <slot name=\"footer\">\n {this._footerActions.length > 0 &&\n <stzh-actionset\n class=\"stzh-card__footer-actionset\"\n actions={this._footerActions}\n ></stzh-actionset>\n }\n\n {this.selectable &&\n <stzh-button\n class=\"stzh-card__footer-select-button\"\n fullwidth\n type=\"radio\"\n variant=\"secondary\"\n name={this.name}\n value={this.value}\n checked={this.checked}\n disabled={this.disabled}\n label={this.localization.select}\n onStzhChange={this.handleSelectionChange}\n ></stzh-button>\n }\n\n {this.withArrow &&\n <stzh-icon\n class=\"stzh-card__footer-arrow\"\n name=\"arrow-right-long\"\n ></stzh-icon>}\n </slot>\n </div>\n </div>\n </article>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/stzh-header.js CHANGED Viewed

@@ -91,9 +91,9 @@ const StzhHeader$1 = /*@__PURE__*/ proxyCustomElement(class StzhHeader extends H
       return;
     }
     readTask(() => {
-      this.scrollTop = window.scrollY;
-      this.scrollingUp = this.lastScrollTop && this.lastScrollTop > this.scrollTop;
-      this.lastScrollTop = this.scrollTop;
+      this.currentScrollY = window.scrollY;
+      this.scrollingUp = this.lastScrollY && this.lastScrollY > this.currentScrollY;
+      this.lastScrollY = this.currentScrollY;
       this.innerHeight = this.innerElement ? this.innerElement.offsetHeight : 0;
       this.mainHeight = this.mainElement ? this.mainElement.offsetHeight : 0;
       this.logobarHeight = this.sticky
@@ -103,9 +103,9 @@ const StzhHeader$1 = /*@__PURE__*/ proxyCustomElement(class StzhHeader extends H
         : this.logobarElement
           ? this.logobarElement.offsetHeight
           : 0;
-      this.belowStayStickyPoint = this.scrollTop > this.logobarHeight;
-      this.belowStartStickyPoint = this.scrollTop > this.headerHeight;
-      this.headerOverlap = (this.headerTop - this.scrollTop) / -1;
+      this.belowStayStickyPoint = this.currentScrollY > this.logobarHeight;
+      this.belowStartStickyPoint = this.currentScrollY > this.headerHeight;
+      this.headerOverlap = (this.headerTop - this.currentScrollY) / -1;
       this.hideLogo = this.isSmallheader && this.headerOverlap > 10;
     });
     writeTask(() => {

package/dist/components/stzh-header.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"stzh-header.js","mappings":"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","names":["StzhHeader"],"sources":["src/components/stzh-header/stzh-header.scss?tag=stzh-header&encapsulation=scoped","src/components/stzh-header/stzh-header.tsx"],"sourcesContent":["/*\n @prop --stzh-header-height: Global: Height of header (readonly variable)\n * @prop --stzh-header-appnav-height: Global: Height of appnav header if exists (readonly variable)\n * @prop --stzh-header-metabar-height: Global: Height of metabar header (readonly variable)\n * @prop --stzh-header-sticky-appnav-height: Global: Height of appnav header if he is sticky (readonly variable)\n /\n\n@keyframes stzh-header-open {\n\tfrom {\n\t\ttransform: translateY(-100%);\n\t}\n\n\tto {\n\t\ttransform: translateY(0%);\n\t}\n}\n\n@keyframes stzh-header-close {\n\tfrom {\n\t\ttransform: translateY(0%);\n\t}\n\n\tto {\n\t\ttransform: translateY(-100%);\n\t}\n}\n\n:host {\n @media print {\n display: none;\n }\n\n ::slotted([slot=\"logo\"]) {\n width: auto;\n height: 100%;\n }\n\n ::slotted(stzh-logo[slot=\"logo\"]) {\n --width: auto;\n --height: 100%;\n }\n\n ::slotted(stzh-logo[slot=\"logo\"]:not([type=\"stzh\"]):not([type=\"none\"])) {\n --width: auto;\n --height: 31px;\n\n @include mq($from: medium) {\n --height: 35px;\n }\n\n @include mq($from: ultra) {\n --height: 53px;\n }\n }\n\n ::slotted(stzh-popover[slot=\"login\"]) {\n display: flex;\n flex-grow: 1;\n\n .stzh-popover,\n .stzh-popover__trigger {\n display: flex;\n flex-grow: 1;\n }\n\n .stzh-popover .stzh-popover__trigger stzh-button .stzh-button {\n @include fontSize('micro');\n height: auto;\n\n @include mq($to: smallheader) {\n border-radius: 0;\n height: 100%;\n }\n\n &__badge {\n @include mq($to: smallheader) {\n top: 8px;\n right: 7px;\n }\n }\n }\n }\n}\n\n.header {\n &__inner {\n transition: box-shadow $baseTransitionAnimationSpeed;\n }\n\n &__main {\n position: relative;\n z-index: $zIndexHeader;\n display: flex;\n flex-direction: column;\n position: relative;\n box-shadow: $boxShadowHeader;\n background-color: $colorWhite;\n transition: box-shadow $baseTransitionAnimationSpeed;\n\n @include mq($from: smallheader) {\n box-shadow: none;\n flex-direction: column-reverse;\n border-bottom: 1px solid $baseBorderColor;\n padding-top: $headerMetabarHeightRegularUp;\n\n @supports (position: sticky) {\n padding-top: 0;\n }\n }\n }\n\n &__metabar {\n border-top: 1px solid $baseBorderColor;\n\n @include mq($from: smallheader) {\n border-top: none;\n background-color: $colorGrey5;\n z-index: 1;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n\n @supports (position: sticky) {\n position: sticky;\n }\n }\n }\n\n &__metabar-inner {\n @include container;\n display: flex;\n align-items: stretch;\n height: $headerMetabarHeight;\n\n\t\t@include mq($to: smallheader) {\n // overwrite container margin for smallheader\n // to be able to use fullwidth of metabar\n margin: 0 auto;\n }\n\n\t\t@include mq($from: smallheader) {\n justify-content: flex-end;\n align-items: center;\n height: $headerMetabarHeightRegularUp;\n }\n }\n\n &__metabar-nav,\n &__metabar-langnav {\n display: none;\n\n @include mq($from: smallheader) {\n display: inline-flex;\n }\n }\n\n &__metabar-login {\n display: flex;\n flex-basis: 50%;\n\n &:not(:empty) {\n \t\t@include mq($from: smallheader) {\n flex-basis: auto;\n margin-left: space('small');\n }\n }\n }\n\n &__metabar-langnav {\n &:not(:empty) {\n @include mq($from: smallheader) {\n margin-left: space('medium');\n }\n }\n }\n\n &__logobar {\n display: flex;\n background-color: $colorPrimary;\n }\n\n &__logobar-logo {\n box-sizing: content-box;\n display: flex;\n background-color: $colorWhite;\n overflow: hidden;\n width: calc(100% - #{$headerMetabarHeight} - 1px);\n\n\t\t@include mq($from: smallheader) {\n width: 400px;\n }\n\n\t\t@include mq($from: large) {\n\t\t width: 460px;\n\t\t}\n\n\t\t@include mq($from: ultra) {\n \t\tpadding-left: calc((100vw - #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px)) / 2);\n\t\t}\n }\n\n &__logo-link {\n flex-grow: 1;\n display: inline-flex;\n\t\theight: 76px;\n padding: space('medium');\n padding-left: $containerMargin;\n transition: opacity $baseTransitionAnimationSpeed;\n\n\t\t@include mq($from: small) {\n\t\t\tpadding-left: $containerMarginSmall;\n\t\t}\n\n\t\t@include mq($from: smallheader) {\n\t\t\theight: 90px;\n\t\t}\n\n\t\t@include mq($from: large) {\n\t\t\theight: 120px;\n padding: space('large');\n\t\t\tpadding-left: $containerMarginLarge;\n }\n\n\t\t@include mq($from: ultra) {\n padding-left: 0;\n }\n }\n\n &__appnav {\n position: fixed;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: calc(#{$zIndexHeader} - 1);\n box-shadow: $boxShadowHeader;\n background-color: $colorWhite;\n\n @include mq($from: small) {\n position: static;\n box-shadow: none;\n }\n }\n\n &__appnav-inner {\n @include mq($from: small) {\n @include container;\n }\n }\n\n / Hide logo /\n\n &--hide-logo &__logo-link {\n opacity: 0;\n }\n\n / Has empty metabar /\n\n &--has-empty-metabar-mobile &__metabar {\n @include mq($to: smallheader) {\n display: none;\n }\n }\n\n / Has empty metabar /\n\n &--has-empty-metabar &__metabar {\n display: none;\n }\n\n / Metabar Stay /\n\n &--has-metabar-stay &__metabar-langnav {\n @include mq($to: smallheader) {\n display: inline-flex;\n }\n }\n\n &--has-metabar-stay &__metabar-nav {\n @include mq($to: smallheader) {\n display: inline-flex;\n }\n }\n\n &--has-metabar-stay &__main {\n @include mq($to: smallheader) {\n box-shadow: none;\n flex-direction: column-reverse;\n border-bottom: 1px solid $baseBorderColor;\n }\n }\n\n &--has-metabar-stay &__metabar {\n @include mq($to: smallheader) {\n display: block;\n border-top: none;\n background-color: $colorGrey5;\n }\n }\n\n &--has-metabar-stay &__metabar-inner {\n @include mq($to: smallheader) {\n @include container;\n justify-content: flex-end;\n align-items: center;\n }\n }\n\n / Sticky metabar /\n\n &--sticky-metabar:not(#{&}--sticky):not(#{&}--is-sticky-disabled) &__metabar {\n @include mq($from: smallheader) {\n position: fixed;\n }\n }\n\n / Sticky variant /\n\n &--sticky &__inner {\n\t\t@include mq($from: small) {\n animation: stzh-header-open $baseTransitionAnimationSpeed;\n z-index: $zIndexHeader;\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n margin: 0;\n box-shadow: $boxShadowHeader;\n }\n }\n\n &--sticky &__main {\n\t\t@include mq($to: small) {\n animation: stzh-header-open $baseTransitionAnimationSpeed;\n z-index: $zIndexHeader;\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n margin: 0;\n }\n\n\t\t@include mq($from: small) {\n box-shadow: none;\n }\n }\n\n &--sticky &__appnav {\n\t\t@include mq($to: smallheader) {\n border-top: 1px solid $baseBorderColor;\n }\n }\n\n &--sticky &__metabar {\n border-top: none;\n }\n\n &--sticky#{&}--has-empty-metabar &__metabar {\n display: none;\n }\n\n &--sticky#{&}--has-empty-metabar:not(#{&}--has-appnav) &__main {\n\t\t@include mq($from: small) {\n border-bottom: none;\n }\n }\n\n &--sticky &__logobar {\n display: none;\n }\n\n &--sticky#{&}--has-metabar-stay &__main {\n\t\t@include mq($to: small) {\n box-shadow: $boxShadowHeader;\n }\n }\n\n / Sticky closing /\n\n &--sticky-closing &__inner {\n\t\t@include mq($from: small) {\n animation: stzh-header-close $baseTransitionAnimationSpeed;\n }\n }\n\n &--sticky-closing &__main {\n\t\t@include mq($to: small) {\n animation: stzh-header-close $baseTransitionAnimationSpeed;\n }\n }\n\n / Sticky disabled /\n\n &--is-sticky-disabled &__main {\n @include mq($from: smallheader) {\n @supports (position: sticky) {\n padding-top: $headerMetabarHeightRegularUp;\n }\n }\n }\n\n &--is-sticky-disabled &__metabar {\n @include mq($from: smallheader) {\n @supports (position: sticky) {\n position: absolute;\n }\n }\n }\n}\n","import {\n Component,\n Element,\n Listen,\n Host,\n State,\n h,\n writeTask,\n readTask,\n Method,\n Prop,\n} from \"@stencil/core\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { media } from \"../../utils/media-utils\";\n\n/\n @slot logo - Slot for brand logo\n * @slot nav - Slot for `stzh-metanav` element\n * @slot login - Slot for login button\n * @slot appnav - Slot for `stzh-appnav` element\n * @slot langnav - Slot for `stzh-langnav` element\n /\n@Component({\n tag: \"stzh-header\",\n styleUrl: \"stzh-header.scss\",\n scoped: true\n})\nexport class StzhHeader {\n /* Portal link (for logo) /\n @Prop() href: string = \"https://www.stadt-zuerich.ch\";\n\n /* Whether grey metabar should stay (on top) on mobile /\n @Prop() metabarStay: boolean = false;\n\n /* Whether sticky behaviour should be disabled /\n @Prop() stickyDisabled: boolean = false;\n\n /\n Prevent creating a appnav placeholder element\n * with the size of appnav inside header parent element.\n * This prevents the fixed appnav to overlap\n * content at the end on mikro breakpoint,\n * but could lead to problems with certain layouts.\n /\n @Prop() preventAppnavPlaceholder: boolean = false;\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the logo link element.\n * Default value is \"Header Logo\".\n /\n @Prop() logoAnalyticsId: string;\n\n @State() hideLogo: boolean = false;\n @State() paddingTop: number;\n @State() metabarTransform: string;\n @State() sticky: boolean = false;\n @State() stickyClosing: boolean = false;\n @State() stickyMetabar: boolean = false;\n @State() stickyMetabarEnd: boolean = false;\n\n @Element() element: HTMLStzhHeaderElement;\n\n /* Update position / sticky state of header */\n @Method()\n async updatePosition() {\n if (this.stickyDisabled) {\n return;\n }\n\n const removeSticky = () => {\n this.sticky = false;\n this.stickyClosing = false;\n this.paddingTop = 0;\n }\n\n if (this.scrollingUp && this.belowStayStickyPoint) {\n if (!this.sticky && this.belowStartStickyPoint) {\n this.paddingTop = this.headerHeight;\n this.sticky = true;\n }\n\n this.updateMetabarPosition();\n } else {\n if (this.sticky && this.belowStayStickyPoint) {\n const animationEnd = () => {\n removeSticky();\n this.updateMetabarPosition();\n this.innerElement.removeEventListener(\"animationend\", animationEnd);\n };\n\n this.innerElement.addEventListener(\"animationend\", animationEnd);\n this.stickyClosing = true;\n } else {\n removeSticky();\n this.updateMetabarPosition();\n }\n }\n }\n\n @Listen(\"scroll\", { target: \"window\" })\n scrollListener() {\n if (this.stickyDisabled) {\n return;\n }\n\n readTask(() => {\n this.scrollTop = window.scrollY;\n this.scrollingUp = this.lastScrollTop && this.lastScrollTop > this.scrollTop;\n this.lastScrollTop = this.scrollTop;\n\n this.innerHeight = this.innerElement ? this.innerElement.offsetHeight : 0;\n this.mainHeight = this.mainElement ? this.mainElement.offsetHeight : 0;\n\n this.logobarHeight = this.sticky\n ? this.isSmall\n ? this.headerHeight - this.innerHeight\n : this.headerHeight - this.mainHeight\n : this.logobarElement\n ? this.logobarElement.offsetHeight\n : 0;\n\n this.belowStayStickyPoint = this.scrollTop > this.logobarHeight;\n this.belowStartStickyPoint = this.scrollTop > this.headerHeight;\n\n this.headerOverlap = (this.headerTop - this.scrollTop) / -1;\n this.hideLogo = this.isSmallheader && this.headerOverlap > 10;\n });\n\n writeTask(() => {\n this.updatePosition();\n });\n }\n\n private scrollTop: number;\n private lastScrollTop: number;\n private headerOverlap: number;\n private scrollingUp: boolean;\n private belowStayStickyPoint: boolean;\n private belowStartStickyPoint: boolean;\n\n private headerTop: number;\n private headerHeight: number;\n private innerHeight: number;\n private mainHeight: number;\n private metabarHeight: number;\n private logobarHeight: number;\n private appnavHeight: number;\n\n private isSmall: boolean;\n private isSmallheader: boolean;\n\n private debounceResize: number;\n private resizeObserver: ResizeObserver;\n\n private innerElement: HTMLDivElement;\n private mainElement: HTMLDivElement;\n private logobarElement: HTMLDivElement;\n private metabarElement: HTMLDivElement;\n private appnavElement: HTMLDivElement;\n private appnavPlaceholderElement: HTMLDivElement;\n\n private handleResize = () => {\n if (this.stickyDisabled) {\n return;\n }\n\n if (this.debounceResize) {\n window.cancelAnimationFrame(this.debounceResize);\n }\n\n this.debounceResize = requestAnimationFrame(() => {\n readTask(() => {\n this.isSmall = media(\"small\").matches;\n this.isSmallheader = media(\"smallheader\").matches;\n\n this.headerTop = this.element.offsetTop;\n this.headerHeight = this.element.offsetHeight;\n this.appnavHeight = this.appnavElement ? this.appnavElement.offsetHeight : 0;\n this.metabarHeight = this.metabarElement ? this.metabarElement.offsetHeight : 0;\n });\n\n writeTask(() => {\n document.documentElement.style.setProperty('--stzh-header-height', `${this.headerHeight}px`);\n document.documentElement.style.setProperty('--stzh-header-appnav-height', `${this.appnavHeight}px`);\n document.documentElement.style.setProperty('--stzh-header-metabar-height', `${this.metabarHeight}px`);\n\n if (this.appnavHeight && !this.isSmall && !this.preventAppnavPlaceholder) {\n this.appnavPlaceholderElement.style.height = `${this.appnavHeight}px`;\n document.documentElement.style.setProperty('--stzh-header-sticky-appnav-height', `${this.appnavHeight}px`);\n } else {\n this.appnavPlaceholderElement.style.height = \"0px\";\n document.documentElement.style.setProperty('--stzh-header-sticky-appnav-height', \"0px\");\n }\n });\n\n this.scrollListener();\n });\n }\n\n private updateMetabarPosition() {\n if (!this.metabarElement \|\| this.stickyDisabled) {\n return;\n }\n\n if (CSS && CSS.supports && CSS.supports(\"position\", \"sticky\")) {\n return;\n }\n\n if (this.isSmallheader && this.headerOverlap > 0 && !this.sticky && !this.stickyClosing) {\n if (this.headerOverlap < this.mainHeight - this.metabarHeight) {\n this.stickyMetabar = true;\n this.stickyMetabarEnd = false;\n this.metabarTransform = \"translateY(0)\";\n } else {\n this.stickyMetabar = false;\n this.stickyMetabarEnd = true;\n this.metabarTransform = `translateY(${this.logobarHeight}px)`;\n }\n } else {\n this.stickyMetabar = false;\n this.stickyMetabarEnd = false;\n this.metabarTransform = \"translateY(0)\";\n }\n }\n\n connectedCallback() {\n this.appnavPlaceholderElement = document.createElement(\"div\");\n this.element.parentElement.appendChild(this.appnavPlaceholderElement);\n\n this.resizeObserver = new ResizeObserver(this.handleResize);\n this.resizeObserver.observe(this.element);\n }\n\n disconnectedCallback() {\n this.appnavPlaceholderElement.parentElement.removeChild(this.appnavPlaceholderElement);\n\n if (this.resizeObserver) {\n this.resizeObserver.disconnect();\n }\n }\n\n render() {\n const navSlotUsed: boolean = hasSlot(this.element, \"nav\");\n const loginSlotUsed: boolean = hasSlot(this.element, \"login\");\n const appnavSlotUsed: boolean = hasSlot(this.element, \"appnav\");\n const langNavSlotUsed = hasSlot(this.element, \"langnav\");\n\n const classes = {\n \"header\": true,\n \"header--is-sticky-disabled\": this.stickyDisabled,\n \"header--sticky\": this.sticky,\n \"header--sticky-closing\": this.stickyClosing,\n \"header--hide-logo\": this.hideLogo,\n \"header--sticky-metabar\": this.stickyMetabar,\n \"header--sticky-metabar-end\": this.stickyMetabarEnd,\n \"header--has-metabar-stay\": this.metabarStay,\n \"header--has-empty-metabar-mobile\": !loginSlotUsed, // check for searchfield and burger slot when implemented\n \"header--has-empty-metabar\": !loginSlotUsed && !langNavSlotUsed && !navSlotUsed,\n \"header--has-appnav\": appnavSlotUsed\n };\n\n return (\n <Host>\n <header style={{paddingTop: `${this.paddingTop}px`}} class={classes}>\n <div\n class=\"header__inner\"\n ref={(el) => (this.innerElement = el as HTMLDivElement)}\n >\n <div\n class=\"header__main\"\n ref={(el) => (this.mainElement = el as HTMLDivElement)}\n >\n <div\n class=\"header__logobar\"\n ref={(el) => (this.logobarElement = el as HTMLDivElement)}\n >\n <div class=\"header__logobar-logo\">\n <a href={this.href} class=\"header__logo-link\" s-object-id={this.logoAnalyticsId \|\| \"Header Logo\"}>\n <slot name=\"logo\"></slot>\n </a>\n </div>\n </div>\n\n <div\n class=\"header__metabar\"\n style={{transform: this.metabarTransform}}\n ref={(el) => (this.metabarElement = el as HTMLDivElement)}\n >\n <div class=\"header__metabar-inner\">\n <div class=\"header__metabar-nav\">\n <slot name=\"nav\"></slot>\n </div>\n <div class=\"header__metabar-login\">\n <slot name=\"login\"></slot>\n </div>\n <div class=\"header__metabar-langnav\">\n <slot name=\"langnav\"></slot>\n </div>\n </div>\n </div>\n </div>\n\n <div\n class=\"header__appnav\"\n ref={(el) => (this.appnavElement = el as HTMLDivElement)}\n >\n <div class=\"header__appnav-inner\">\n <slot name=\"appnav\"></slot>\n </div>\n </div>\n </div>\n </header>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"stzh-header.js","mappings":"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","names":["StzhHeader"],"sources":["src/components/stzh-header/stzh-header.scss?tag=stzh-header&encapsulation=scoped","src/components/stzh-header/stzh-header.tsx"],"sourcesContent":["/*\n @prop --stzh-header-height: Global: Height of header (readonly variable)\n * @prop --stzh-header-appnav-height: Global: Height of appnav header if exists (readonly variable)\n * @prop --stzh-header-metabar-height: Global: Height of metabar header (readonly variable)\n * @prop --stzh-header-sticky-appnav-height: Global: Height of appnav header if he is sticky (readonly variable)\n /\n\n@keyframes stzh-header-open {\n\tfrom {\n\t\ttransform: translateY(-100%);\n\t}\n\n\tto {\n\t\ttransform: translateY(0%);\n\t}\n}\n\n@keyframes stzh-header-close {\n\tfrom {\n\t\ttransform: translateY(0%);\n\t}\n\n\tto {\n\t\ttransform: translateY(-100%);\n\t}\n}\n\n:host {\n @media print {\n display: none;\n }\n\n ::slotted([slot=\"logo\"]) {\n width: auto;\n height: 100%;\n }\n\n ::slotted(stzh-logo[slot=\"logo\"]) {\n --width: auto;\n --height: 100%;\n }\n\n ::slotted(stzh-logo[slot=\"logo\"]:not([type=\"stzh\"]):not([type=\"none\"])) {\n --width: auto;\n --height: 31px;\n\n @include mq($from: medium) {\n --height: 35px;\n }\n\n @include mq($from: ultra) {\n --height: 53px;\n }\n }\n\n ::slotted(stzh-popover[slot=\"login\"]) {\n display: flex;\n flex-grow: 1;\n\n .stzh-popover,\n .stzh-popover__trigger {\n display: flex;\n flex-grow: 1;\n }\n\n .stzh-popover .stzh-popover__trigger stzh-button .stzh-button {\n @include fontSize('micro');\n height: auto;\n\n @include mq($to: smallheader) {\n border-radius: 0;\n height: 100%;\n }\n\n &__badge {\n @include mq($to: smallheader) {\n top: 8px;\n right: 7px;\n }\n }\n }\n }\n}\n\n.header {\n &__inner {\n transition: box-shadow $baseTransitionAnimationSpeed;\n }\n\n &__main {\n position: relative;\n z-index: $zIndexHeader;\n display: flex;\n flex-direction: column;\n position: relative;\n box-shadow: $boxShadowHeader;\n background-color: $colorWhite;\n transition: box-shadow $baseTransitionAnimationSpeed;\n\n @include mq($from: smallheader) {\n box-shadow: none;\n flex-direction: column-reverse;\n border-bottom: 1px solid $baseBorderColor;\n padding-top: $headerMetabarHeightRegularUp;\n\n @supports (position: sticky) {\n padding-top: 0;\n }\n }\n }\n\n &__metabar {\n border-top: 1px solid $baseBorderColor;\n\n @include mq($from: smallheader) {\n border-top: none;\n background-color: $colorGrey5;\n z-index: 1;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n\n @supports (position: sticky) {\n position: sticky;\n }\n }\n }\n\n &__metabar-inner {\n @include container;\n display: flex;\n align-items: stretch;\n height: $headerMetabarHeight;\n\n\t\t@include mq($to: smallheader) {\n // overwrite container margin for smallheader\n // to be able to use fullwidth of metabar\n margin: 0 auto;\n }\n\n\t\t@include mq($from: smallheader) {\n justify-content: flex-end;\n align-items: center;\n height: $headerMetabarHeightRegularUp;\n }\n }\n\n &__metabar-nav,\n &__metabar-langnav {\n display: none;\n\n @include mq($from: smallheader) {\n display: inline-flex;\n }\n }\n\n &__metabar-login {\n display: flex;\n flex-basis: 50%;\n\n &:not(:empty) {\n \t\t@include mq($from: smallheader) {\n flex-basis: auto;\n margin-left: space('small');\n }\n }\n }\n\n &__metabar-langnav {\n &:not(:empty) {\n @include mq($from: smallheader) {\n margin-left: space('medium');\n }\n }\n }\n\n &__logobar {\n display: flex;\n background-color: $colorPrimary;\n }\n\n &__logobar-logo {\n box-sizing: content-box;\n display: flex;\n background-color: $colorWhite;\n overflow: hidden;\n width: calc(100% - #{$headerMetabarHeight} - 1px);\n\n\t\t@include mq($from: smallheader) {\n width: 400px;\n }\n\n\t\t@include mq($from: large) {\n\t\t width: 460px;\n\t\t}\n\n\t\t@include mq($from: ultra) {\n \t\tpadding-left: calc((100vw - #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px)) / 2);\n\t\t}\n }\n\n &__logo-link {\n flex-grow: 1;\n display: inline-flex;\n\t\theight: 76px;\n padding: space('medium');\n padding-left: $containerMargin;\n transition: opacity $baseTransitionAnimationSpeed;\n\n\t\t@include mq($from: small) {\n\t\t\tpadding-left: $containerMarginSmall;\n\t\t}\n\n\t\t@include mq($from: smallheader) {\n\t\t\theight: 90px;\n\t\t}\n\n\t\t@include mq($from: large) {\n\t\t\theight: 120px;\n padding: space('large');\n\t\t\tpadding-left: $containerMarginLarge;\n }\n\n\t\t@include mq($from: ultra) {\n padding-left: 0;\n }\n }\n\n &__appnav {\n position: fixed;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: calc(#{$zIndexHeader} - 1);\n box-shadow: $boxShadowHeader;\n background-color: $colorWhite;\n\n @include mq($from: small) {\n position: static;\n box-shadow: none;\n }\n }\n\n &__appnav-inner {\n @include mq($from: small) {\n @include container;\n }\n }\n\n / Hide logo /\n\n &--hide-logo &__logo-link {\n opacity: 0;\n }\n\n / Has empty metabar /\n\n &--has-empty-metabar-mobile &__metabar {\n @include mq($to: smallheader) {\n display: none;\n }\n }\n\n / Has empty metabar /\n\n &--has-empty-metabar &__metabar {\n display: none;\n }\n\n / Metabar Stay /\n\n &--has-metabar-stay &__metabar-langnav {\n @include mq($to: smallheader) {\n display: inline-flex;\n }\n }\n\n &--has-metabar-stay &__metabar-nav {\n @include mq($to: smallheader) {\n display: inline-flex;\n }\n }\n\n &--has-metabar-stay &__main {\n @include mq($to: smallheader) {\n box-shadow: none;\n flex-direction: column-reverse;\n border-bottom: 1px solid $baseBorderColor;\n }\n }\n\n &--has-metabar-stay &__metabar {\n @include mq($to: smallheader) {\n display: block;\n border-top: none;\n background-color: $colorGrey5;\n }\n }\n\n &--has-metabar-stay &__metabar-inner {\n @include mq($to: smallheader) {\n @include container;\n justify-content: flex-end;\n align-items: center;\n }\n }\n\n / Sticky metabar /\n\n &--sticky-metabar:not(#{&}--sticky):not(#{&}--is-sticky-disabled) &__metabar {\n @include mq($from: smallheader) {\n position: fixed;\n }\n }\n\n / Sticky variant /\n\n &--sticky &__inner {\n\t\t@include mq($from: small) {\n animation: stzh-header-open $baseTransitionAnimationSpeed;\n z-index: $zIndexHeader;\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n margin: 0;\n box-shadow: $boxShadowHeader;\n }\n }\n\n &--sticky &__main {\n\t\t@include mq($to: small) {\n animation: stzh-header-open $baseTransitionAnimationSpeed;\n z-index: $zIndexHeader;\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n margin: 0;\n }\n\n\t\t@include mq($from: small) {\n box-shadow: none;\n }\n }\n\n &--sticky &__appnav {\n\t\t@include mq($to: smallheader) {\n border-top: 1px solid $baseBorderColor;\n }\n }\n\n &--sticky &__metabar {\n border-top: none;\n }\n\n &--sticky#{&}--has-empty-metabar &__metabar {\n display: none;\n }\n\n &--sticky#{&}--has-empty-metabar:not(#{&}--has-appnav) &__main {\n\t\t@include mq($from: small) {\n border-bottom: none;\n }\n }\n\n &--sticky &__logobar {\n display: none;\n }\n\n &--sticky#{&}--has-metabar-stay &__main {\n\t\t@include mq($to: small) {\n box-shadow: $boxShadowHeader;\n }\n }\n\n / Sticky closing /\n\n &--sticky-closing &__inner {\n\t\t@include mq($from: small) {\n animation: stzh-header-close $baseTransitionAnimationSpeed;\n }\n }\n\n &--sticky-closing &__main {\n\t\t@include mq($to: small) {\n animation: stzh-header-close $baseTransitionAnimationSpeed;\n }\n }\n\n / Sticky disabled /\n\n &--is-sticky-disabled &__main {\n @include mq($from: smallheader) {\n @supports (position: sticky) {\n padding-top: $headerMetabarHeightRegularUp;\n }\n }\n }\n\n &--is-sticky-disabled &__metabar {\n @include mq($from: smallheader) {\n @supports (position: sticky) {\n position: absolute;\n }\n }\n }\n}\n","import {\n Component,\n Element,\n Listen,\n Host,\n State,\n h,\n writeTask,\n readTask,\n Method,\n Prop,\n} from \"@stencil/core\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { media } from \"../../utils/media-utils\";\n\n/\n @slot logo - Slot for brand logo\n * @slot nav - Slot for `stzh-metanav` element\n * @slot login - Slot for login button\n * @slot appnav - Slot for `stzh-appnav` element\n * @slot langnav - Slot for `stzh-langnav` element\n /\n@Component({\n tag: \"stzh-header\",\n styleUrl: \"stzh-header.scss\",\n scoped: true\n})\nexport class StzhHeader {\n /* Portal link (for logo) /\n @Prop() href: string = \"https://www.stadt-zuerich.ch\";\n\n /* Whether grey metabar should stay (on top) on mobile /\n @Prop() metabarStay: boolean = false;\n\n /* Whether sticky behaviour should be disabled /\n @Prop() stickyDisabled: boolean = false;\n\n /\n Prevent creating a appnav placeholder element\n * with the size of appnav inside header parent element.\n * This prevents the fixed appnav to overlap\n * content at the end on mikro breakpoint,\n * but could lead to problems with certain layouts.\n /\n @Prop() preventAppnavPlaceholder: boolean = false;\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the logo link element.\n * Default value is \"Header Logo\".\n /\n @Prop() logoAnalyticsId: string;\n\n @State() hideLogo: boolean = false;\n @State() paddingTop: number;\n @State() metabarTransform: string;\n @State() sticky: boolean = false;\n @State() stickyClosing: boolean = false;\n @State() stickyMetabar: boolean = false;\n @State() stickyMetabarEnd: boolean = false;\n\n @Element() element: HTMLStzhHeaderElement;\n\n /* Update position / sticky state of header */\n @Method()\n async updatePosition() {\n if (this.stickyDisabled) {\n return;\n }\n\n const removeSticky = () => {\n this.sticky = false;\n this.stickyClosing = false;\n this.paddingTop = 0;\n }\n\n if (this.scrollingUp && this.belowStayStickyPoint) {\n if (!this.sticky && this.belowStartStickyPoint) {\n this.paddingTop = this.headerHeight;\n this.sticky = true;\n }\n\n this.updateMetabarPosition();\n } else {\n if (this.sticky && this.belowStayStickyPoint) {\n const animationEnd = () => {\n removeSticky();\n this.updateMetabarPosition();\n this.innerElement.removeEventListener(\"animationend\", animationEnd);\n };\n\n this.innerElement.addEventListener(\"animationend\", animationEnd);\n this.stickyClosing = true;\n } else {\n removeSticky();\n this.updateMetabarPosition();\n }\n }\n }\n\n @Listen(\"scroll\", { target: \"window\" })\n scrollListener() {\n if (this.stickyDisabled) {\n return;\n }\n\n readTask(() => {\n this.currentScrollY = window.scrollY;\n this.scrollingUp = this.lastScrollY && this.lastScrollY > this.currentScrollY;\n this.lastScrollY = this.currentScrollY;\n\n this.innerHeight = this.innerElement ? this.innerElement.offsetHeight : 0;\n this.mainHeight = this.mainElement ? this.mainElement.offsetHeight : 0;\n\n this.logobarHeight = this.sticky\n ? this.isSmall\n ? this.headerHeight - this.innerHeight\n : this.headerHeight - this.mainHeight\n : this.logobarElement\n ? this.logobarElement.offsetHeight\n : 0;\n\n this.belowStayStickyPoint = this.currentScrollY > this.logobarHeight;\n this.belowStartStickyPoint = this.currentScrollY > this.headerHeight;\n\n this.headerOverlap = (this.headerTop - this.currentScrollY) / -1;\n this.hideLogo = this.isSmallheader && this.headerOverlap > 10;\n });\n\n writeTask(() => {\n this.updatePosition();\n });\n }\n\n private currentScrollY: number;\n private lastScrollY: number;\n private headerOverlap: number;\n private scrollingUp: boolean;\n private belowStayStickyPoint: boolean;\n private belowStartStickyPoint: boolean;\n\n private headerTop: number;\n private headerHeight: number;\n private innerHeight: number;\n private mainHeight: number;\n private metabarHeight: number;\n private logobarHeight: number;\n private appnavHeight: number;\n\n private isSmall: boolean;\n private isSmallheader: boolean;\n\n private debounceResize: number;\n private resizeObserver: ResizeObserver;\n\n private innerElement: HTMLDivElement;\n private mainElement: HTMLDivElement;\n private logobarElement: HTMLDivElement;\n private metabarElement: HTMLDivElement;\n private appnavElement: HTMLDivElement;\n private appnavPlaceholderElement: HTMLDivElement;\n\n private handleResize = () => {\n if (this.stickyDisabled) {\n return;\n }\n\n if (this.debounceResize) {\n window.cancelAnimationFrame(this.debounceResize);\n }\n\n this.debounceResize = requestAnimationFrame(() => {\n readTask(() => {\n this.isSmall = media(\"small\").matches;\n this.isSmallheader = media(\"smallheader\").matches;\n\n this.headerTop = this.element.offsetTop;\n this.headerHeight = this.element.offsetHeight;\n this.appnavHeight = this.appnavElement ? this.appnavElement.offsetHeight : 0;\n this.metabarHeight = this.metabarElement ? this.metabarElement.offsetHeight : 0;\n });\n\n writeTask(() => {\n document.documentElement.style.setProperty('--stzh-header-height', `${this.headerHeight}px`);\n document.documentElement.style.setProperty('--stzh-header-appnav-height', `${this.appnavHeight}px`);\n document.documentElement.style.setProperty('--stzh-header-metabar-height', `${this.metabarHeight}px`);\n\n if (this.appnavHeight && !this.isSmall && !this.preventAppnavPlaceholder) {\n this.appnavPlaceholderElement.style.height = `${this.appnavHeight}px`;\n document.documentElement.style.setProperty('--stzh-header-sticky-appnav-height', `${this.appnavHeight}px`);\n } else {\n this.appnavPlaceholderElement.style.height = \"0px\";\n document.documentElement.style.setProperty('--stzh-header-sticky-appnav-height', \"0px\");\n }\n });\n\n this.scrollListener();\n });\n }\n\n private updateMetabarPosition() {\n if (!this.metabarElement \|\| this.stickyDisabled) {\n return;\n }\n\n if (CSS && CSS.supports && CSS.supports(\"position\", \"sticky\")) {\n return;\n }\n\n if (this.isSmallheader && this.headerOverlap > 0 && !this.sticky && !this.stickyClosing) {\n if (this.headerOverlap < this.mainHeight - this.metabarHeight) {\n this.stickyMetabar = true;\n this.stickyMetabarEnd = false;\n this.metabarTransform = \"translateY(0)\";\n } else {\n this.stickyMetabar = false;\n this.stickyMetabarEnd = true;\n this.metabarTransform = `translateY(${this.logobarHeight}px)`;\n }\n } else {\n this.stickyMetabar = false;\n this.stickyMetabarEnd = false;\n this.metabarTransform = \"translateY(0)\";\n }\n }\n\n connectedCallback() {\n this.appnavPlaceholderElement = document.createElement(\"div\");\n this.element.parentElement.appendChild(this.appnavPlaceholderElement);\n\n this.resizeObserver = new ResizeObserver(this.handleResize);\n this.resizeObserver.observe(this.element);\n }\n\n disconnectedCallback() {\n this.appnavPlaceholderElement.parentElement.removeChild(this.appnavPlaceholderElement);\n\n if (this.resizeObserver) {\n this.resizeObserver.disconnect();\n }\n }\n\n render() {\n const navSlotUsed: boolean = hasSlot(this.element, \"nav\");\n const loginSlotUsed: boolean = hasSlot(this.element, \"login\");\n const appnavSlotUsed: boolean = hasSlot(this.element, \"appnav\");\n const langNavSlotUsed = hasSlot(this.element, \"langnav\");\n\n const classes = {\n \"header\": true,\n \"header--is-sticky-disabled\": this.stickyDisabled,\n \"header--sticky\": this.sticky,\n \"header--sticky-closing\": this.stickyClosing,\n \"header--hide-logo\": this.hideLogo,\n \"header--sticky-metabar\": this.stickyMetabar,\n \"header--sticky-metabar-end\": this.stickyMetabarEnd,\n \"header--has-metabar-stay\": this.metabarStay,\n \"header--has-empty-metabar-mobile\": !loginSlotUsed, // check for searchfield and burger slot when implemented\n \"header--has-empty-metabar\": !loginSlotUsed && !langNavSlotUsed && !navSlotUsed,\n \"header--has-appnav\": appnavSlotUsed\n };\n\n return (\n <Host>\n <header style={{paddingTop: `${this.paddingTop}px`}} class={classes}>\n <div\n class=\"header__inner\"\n ref={(el) => (this.innerElement = el as HTMLDivElement)}\n >\n <div\n class=\"header__main\"\n ref={(el) => (this.mainElement = el as HTMLDivElement)}\n >\n <div\n class=\"header__logobar\"\n ref={(el) => (this.logobarElement = el as HTMLDivElement)}\n >\n <div class=\"header__logobar-logo\">\n <a href={this.href} class=\"header__logo-link\" s-object-id={this.logoAnalyticsId \|\| \"Header Logo\"}>\n <slot name=\"logo\"></slot>\n </a>\n </div>\n </div>\n\n <div\n class=\"header__metabar\"\n style={{transform: this.metabarTransform}}\n ref={(el) => (this.metabarElement = el as HTMLDivElement)}\n >\n <div class=\"header__metabar-inner\">\n <div class=\"header__metabar-nav\">\n <slot name=\"nav\"></slot>\n </div>\n <div class=\"header__metabar-login\">\n <slot name=\"login\"></slot>\n </div>\n <div class=\"header__metabar-langnav\">\n <slot name=\"langnav\"></slot>\n </div>\n </div>\n </div>\n </div>\n\n <div\n class=\"header__appnav\"\n ref={(el) => (this.appnavElement = el as HTMLDivElement)}\n >\n <div class=\"header__appnav-inner\">\n <slot name=\"appnav\"></slot>\n </div>\n </div>\n </div>\n </header>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/{app-globals-327436ba.js → app-globals-8a09d78c.js} RENAMED Viewed

@@ -832,7 +832,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
 })();
 const name = "@oiz/stzh-components";
-const version = "2.14.0";
+const version = "2.14.2";
 const packageName = name.substring(name.indexOf('/')+1);
@@ -1174,4 +1174,4 @@ const globalScripts = appGlobalScript;
 export { globalScripts as g };
-//# sourceMappingURL=app-globals-327436ba.js.map
+//# sourceMappingURL=app-globals-8a09d78c.js.map