npm - @oiz/stzh-components - Versions diffs - 3.0.0-beta4 → 3.0.0-beta5 - Mend

@oiz/stzh-components 3.0.0-beta4 → 3.0.0-beta5

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

package/dist/stzh-components/p-b34a4e7c.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["stzhCardCss","StzhCard","this","_subtitles","nodeChange","entries","changeInSlot","forEach","entry","target","closest","hasAttribute","forceUpdate","element","headerClick","event","collapsible","filterTags","composedPathTags","composedPath","map","_a","tagName","toLowerCase","found","some","r","includes","collapsed","stzhCollapse","emit","component","subtitleClick","subtitleInteractive","stzhSubtitleClick","originalEvent","starToggleClick","stzhStarClick","starred","actionClick","action","stzhHeaderActionClick","arrowUpClick","sortable","findSortableChildElement","moveItem","arrowDownClick","updateElementInsideSortable","currentSortable","removeEventListener","init","chips","querySelectorAll","texts","chip","setPropsIfNull","size","text","handleMutation","handleSelectionChange","checked","detail","handleCardClick","stzhClick","subtitleWatcher","newValue","JSON","parse","err","headerActionsWatcher","_headerActions","footerActionsWatcher","_footerActions","sortableContainer","container","parentElement","componentWillLoad","subtitle","headerActions","footerActions","localization","window","stzhComponents","utils","fetchTranslations","componentDidLoad","addEventListener","componentDidRender","requestAnimationFrame","objectId","analyticsId","headingTextElement","innerText","_b","imageLinkElement","setAttribute","_c","titleLinkElement","connectedCallback","observer","MutationObserver","observe","childList","subtree","disconnectedCallback","disconnect","render","imageUsed","hasSlot","headingUsed","footerUsed","contentUsed","Heading","headingLevel","Subtitle","sortableChildElement","isFirstItemInSortable","Array","from","children","indexOf","isLastItemInSortable","length","sortableEnabled","sortableDisabled","disabled","sortableActionsEnabled","hideMovementActions","hasHeading","heading","hasHeader","starrable","hasFooter","selectable","headerActionsWithBadge","filter","badge","badgeEmpty","classes","href","variant","h","Host","role","class","ref","el","tabindex","onClick","name","icon","iconOnly","slot","actionRemove","actionAdd","label","actionsPopoverLabel","placement","headerActionsBadge","badgePosition","badgeType","headerActionsBadgeType","_d","e","Fragment","actionMoveUp","actionMoveDown","actions","fullwidth","type","value","select","onStzhChange","stzhCardlistCss","StzhCardlist","collapseClick","cards","card","allCollapsed","stzhCollapseAll","updateCollapsedState","sortableGhostClone","dragElement","querySelector","originalElement","clonedElement","cloneNode","collapseListener","showToggleLink","layout","description","expandAll","collapseAll","dataIdAttribute","sortableDataIdAttribute","ghostClone","stzhChipselectCss","chipselectCounter","StzhChipselect","_data","_dataDropdown","handleReset","async","defaultValue","handleChipClick","data","index","activeFocusOptionIndex","waitForNextRender","stzhChange","handleDropdownChange","isArray","findIndex","handleKeydown","newActiveIndex","activeOptionIndex","key","preventDefault","resetListener","contains","dataWatcher","counter","errorWatcher","_error","Promise","resolve","renderPromiseResolve","id","error","descriptionUsed","descriptionLongUsed","descriptionLong","errorUsed","invalid","required","a11yDescribedby","onKeyDown","inverted","active","a11yTabindex","StzhInputDescription","classPrefix","descriptionLongTitle","moreInfoButtonLabel","$globals","items","options","hideOptional"],"sources":["src/components/stzh-card/stzh-card.scss?tag=stzh-card&encapsulation=scoped","src/components/stzh-card/stzh-card.tsx","src/components/stzh-cardlist/stzh-cardlist.scss?tag=stzh-cardlist&encapsulation=scoped","src/components/stzh-cardlist/stzh-cardlist.tsx","src/components/stzh-chipselect/stzh-chipselect.scss?tag=stzh-chipselect&encapsulation=scoped","src/components/stzh-chipselect/stzh-chipselect.tsx"],"sourcesContent":["/**\n * @prop --content-min-height: Min height of content\n */\n\n:host {\n // --box-shadow: none;\n --border-radius: 0px;\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 &.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\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([slot=\"image\"]) {\n width: 100%;\n max-width: 100%;\n }\n\n ::slotted(img[slot=\"image\"]) {\n display: block;\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.stzh-card {\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n\tbackground-color: $colorWhite;\n\tborder-radius: var(--border-radius);\n\t// box-shadow: var(--box-shadow);\n\t// transition: 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 gap: 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 &__title {\n @include font('title');\n @include fontSize('milli');\n }\n\n &__image-link {\n display: block;\n }\n\n\t&__subtitle {\n @include fontSize('milli');\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 @include fontSize('milli');\n flex-grow: 1;\n\t}\n\n // &__footer-meta {\n // @include fontSize('micro');\n // display: flex;\n // flex-wrap: wrap;\n // gap: space('xsmall');\n // color: $colorGrey80;\n // }\n\n // &__footer-meta-separator {\n // width: 1px;\n // background-color: currentColor;\n // flex-shrink: 0;\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: #{$baseColor};\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 /* Service */\n\n &--service &__subtitle {\n @include fontCurve('p1');\n }\n\n &--service &__subtitle {\n @include fontCurve('p1');\n }\n\n &--service &__title {\n @include fontCurve('h3', 'heading');\n }\n\n /* Has content */\n\n &--has-content &__content {\n @include spaceCurve('padding-bottom', 'large');\n padding-top: space('xlarge');\n padding-left: space('medium');\n padding-right: space('medium');\n\n @include mq($from: medium) {\n @include spaceCurve('padding-bottom', 'medium');\n }\n }\n\n &--has-content#{&}--service &__content {\n @include spaceCurve('padding', 'regular');\n }\n\n /* Has header */\n\n &--has-header &__header {\n padding-top: space('xlarge');\n padding-left: space('medium');\n padding-right: space('medium');\n\t}\n\n &--has-header#{&}--has-content &__content {\n padding-top: space('xsmall');\n }\n\n &--has-header#{&}--service &__header {\n\t\t@include spaceCurve('padding-top', 'regular');\n\t\t@include spaceCurve('padding-left', 'regular');\n\t\t@include spaceCurve('padding-right', 'regular');\n }\n\n &--has-header#{&}--has-content#{&}--service &__content {\n @include spaceCurve('padding-top', 'regular');\n }\n\n /* Has footer */\n\n &--has-footer &__footer {\n @include spaceCurve('padding-bottom', 'medium');\n padding-left: space('medium');\n padding-right: space('medium');\n }\n\n &--has-footer#{&}--has-content &__content {\n padding-bottom: space('medium');\n }\n\n &--has-footer#{&}--service &__footer {\n\t\t@include spaceCurve('padding-bottom', 'regular');\n\t\t@include spaceCurve('padding-left', 'regular');\n\t\t@include spaceCurve('padding-right', 'regular');\n }\n\n &--has-footer#{&}--has-content#{&}--service &__content {\n @include spaceCurve('padding-bottom', 'regular');\n }\n\n /* Has tag */\n\n &--has-tag#{&}--has-header &__header {\n padding-top: space('xxxlarge');\n }\n\n /* Has Link */\n\n &--has-link &__title-link,\n &--has-link &__content {\n transition: color $baseTransitionAnimationSpeed;\n }\n\n &--has-link &__title-link {\n color: $colorPrimary;\n text-decoration-line: none;\n border-radius: $buttonBorderRadius;\n cursor: pointer;\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:has(#{&}__image-link:hover) &__title-link,\n &--has-link:has(#{&}__image-link:hover) &__content,\n &--has-link:has(#{&}__title-link:hover) &__title-link,\n &--has-link:has(#{&}__title-link:hover) &__content {\n color: $colorSecondary60;\n\n // &::before,\n // &::before {\n // background-color: $colorPrimary20;\n // }\n }\n\n // &__footer-arrow {\n // color: $colorPrimary;\n // }\n\n // &--has-link:hover &__footer-arrow {\n // color: $colorSecondary60;\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 padding-bottom: space('xlarge');\n }\n\n &--is-collapsed#{&}--service &__header {\n // border-bottom: none;\n @include spaceCurve('padding-bottom', 'regular');\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","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 // StzhLocaleAdapter\n} from \"../../index\";\n\nimport { hasSlot, setPropsIfNull } from \"../../utils/utils\";\n// import { 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` 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 /** Variant */\n @Prop({ reflect: true }) variant: \"default\" | \"service\" = \"default\";\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 /** 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 /** Author name */\n // @Prop() author: string;\n\n /** Date to display */\n // @Prop() date: Date | string;\n\n /**\n * Date adapter, for custom parsing/formatting.\n * Must be object with a `parse` function which accepts a `string` and returns a `Date`,\n * and a `format` function which accepts a `Date` and returns a `string`.\n */\n // @Prop() dateAdapter: StzhLocaleAdapter;\n\n /** Tag name */\n // @Prop() tag: string;\n\n /** Card header actions */\n @Prop() headerActions: string | StzhCardHeaderAction[] = [];\n private _headerActions: StzhCardHeaderAction[];\n\n /**\n * Set a badge text if header action badge exists (see headerActionsBadgeType for more info).\n */\n @Prop() headerActionsBadge: string;\n\n /**\n * If a header action with a badge exists inside `headerActions`, the more actions popover will automatically have a empty badge.\n * By default, it takes the badge type from the first one. With this property you can overwrite it.\n */\n @Prop() headerActionsBadgeType: \"default\" | \"success\" | \"warning\" | \"error\" | \"info\";\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 `cardlist` 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 /**\n * Whether movement menu items should be shown.\n * Has no effect if card is not inside a `cardlist` 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 = (event: MouseEvent) => {\n if (this.subtitleInteractive) {\n this.stzhSubtitleClick.emit({\n component: \"stzh-card\",\n originalEvent: event\n });\n }\n }\n\n private starToggleClick = (event: MouseEvent) => {\n this.stzhStarClick.emit({\n component: \"stzh-card\",\n starred: this.starred,\n originalEvent: event\n });\n }\n\n private actionClick = (event: MouseEvent, action: StzhCardHeaderAction) => {\n this.stzhHeaderActionClick.emit({\n component: \"stzh-card\",\n action,\n originalEvent: event\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 const texts = this.element.querySelectorAll(\n 'stzh-text[slot=\"content\"], [slot=\"meta\"] stzh-text'\n );\n\n chips.forEach((chip) => {\n setPropsIfNull(chip, {\n size: \"small\"\n } as HTMLStzhChipElement)\n });\n\n texts.forEach((text) => {\n setPropsIfNull(text, {\n size: \"inherit\"\n } as HTMLStzhTextElement)\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 handleCardClick = (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 // if (!this.dateAdapter) {\n // this.dateAdapter = window.stzhComponents.utils.createFormatParseAdapter(\n // this.localization.$formats,\n // this.localization.$globals\n // );\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.author\n // || !!this.date;\n\n const headerActionsWithBadge = this._headerActions.filter(action => !!action.badge || action.badgeEmpty);\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-header\": hasHeader,\n \"stzh-card--has-footer\": hasFooter,\n // \"stzh-card--has-tag\": !!this.tag,\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 [`stzh-card--${this.variant}`]: !!this.variant\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.handleCardClick : 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 {/* {this.tag && <div class=\"stzh-card__tag\">{this.tag}</div>} */}\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.handleCardClick : 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={(e: MouseEvent) => { this.actionClick(e, 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 badge={this.headerActionsBadge}\n badgeEmpty={headerActionsWithBadge.length > 0}\n badgePosition=\"icon\"\n badgeType={this.headerActionsBadgeType || headerActionsWithBadge[0]?.badgeType || \"default\"}\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={(e: MouseEvent) => { this.actionClick(e, 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 {/* {(this.author || this.date) &&\n <div class=\"stzh-card__footer-meta\">\n {this.author &&\n <div class=\"stzh-card__footer-author\">{this.author}</div>\n }\n {this.author && this.date &&\n <div class=\"stzh-card__footer-meta-separator\"></div>\n }\n {this.date &&\n <div class=\"stzh-card__footer-date\">\n {this.dateAdapter.format(new Date(this.date), \"dateInput\")}\n </div>\n }\n </div>\n } */}\n\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 </slot>\n </div>\n </div>\n </article>\n </Host>\n );\n }\n}\n",".stzh-cardlist {\n &__cards {\n display: grid;\n gap: $gridGutter;\n\n @include mq($from: small) {\n gap: $gridGutterSmall;\n }\n\n @include mq($from: medium) {\n gap: $gridGutterMedium;\n }\n\n @include mq($from: large) {\n gap: $gridGutterLarge;\n }\n\n @include mq($from: ultra) {\n gap: $gridGutterUltra;\n }\n }\n\n &__header {\n\t\tdisplay: flex;\n\t\tjustify-content: space-between;\n flex-direction: column;\n align-items: flex-start;\n\n @include mq($from: medium) { // was smallheader before\n flex-direction: row;\n }\n }\n\n &__description {\n @include fontCurve('p1');\n --stzh-icon-color: #{$colorPrimary70};\n\n &:not(:empty) {\n margin-bottom: space('xsmall');\n\n @include mq($from: medium) { // was smallheader before\n margin-bottom: 0;\n }\n }\n }\n\n &__switch {\n --color: inherit;\n align-self: end;\n }\n\n /* Has content inside header */\n\n &:has(#{&}__description:not(:empty)) &__header,\n &--has-toggle-link &__header {\n @include spaceCurve('margin-bottom', 'regular');\n }\n\n /* Subpages layout variant */\n\n &--layout-subpages &__cards:has(stzh-card-navigation:not([has-lead])) {\n @include spaceCurve('row-gap', 'tiny');\n\n @include mq($from: small) {\n padding-left: calc(((100% - (#{$gridGutterSmall} * 3)) / 4) + #{$gridGutterSmall});\n }\n\n @include mq($from: medium) {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n padding-left: 0;\n }\n }\n\n &--layout-subpages &__cards:has(stzh-card-navigation[has-lead]) {\n @include spaceCurve('row-gap', 'regular');\n\n @include mq($from: small) {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n\n @include mq($from: large) {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n }\n }\n\n /* Teasers layout variant */\n\n &--layout-teasers &__cards {\n @include spaceCurve('row-gap', 'large');\n\n @include mq($from: small) {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n\n @include mq($from: medium) {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n }\n }\n\n /* Searchresults layout variant */\n\n &--layout-searchresults &__cards {\n gap: space('xlarge');\n }\n\n /* Fullwidth layout variant (e.g. for MeinKonto dashboard) */\n\n &--layout-fullwidth &__cards {\n @include spaceCurve('gap', 'regular');\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Listen,\n State,\n Event,\n EventEmitter\n} from \"@stencil/core\";\n\nimport { StzhCardlistCollapseAllEvent } from \"../../index\";\nimport { StzhCardlistLocalizedText } from './stzh-cardlist.localization';\n\n/**\n * @slot - Slot for `stzh-card` elements\n * @slot description - Slot for description\n */\n@Component({\n tag: \"stzh-cardlist\",\n styleUrl: \"stzh-cardlist.scss\",\n scoped: true\n})\nexport class StzhCardlist {\n /** Translation strings */\n @Prop() localization: StzhCardlistLocalizedText;\n\n @Prop({ reflect: true }) layout: \"fullwidth\" | \"searchresults\" | \"subpages\" | \"teasers\" = \"fullwidth\";\n\n /** Description message (use description slot as alternative) */\n @Prop() description: string;\n\n /** Whether collapse/expand toggle link */\n @Prop({ reflect: true }) showToggleLink: boolean = false;\n\n /** Whether sorting should be enabled */\n @Prop() sortableEnabled: boolean = false;\n\n /** HTML attribute that is used by the `toArray()` of sortable method */\n @Prop() sortableDataIdAttribute: string = \"data-id\";\n\n @Element() element: HTMLStzhCardlistElement;\n\n /** Collapse all event */\n @Event() stzhCollapseAll: EventEmitter<StzhCardlistCollapseAllEvent>;\n\n @Listen(\"stzhCollapse\")\n collapseListener() {\n this.updateCollapsedState();\n }\n\n @State() allCollapsed: boolean = false;\n\n private collapseClick = () => {\n const cards = Array.from(this.element.querySelectorAll(\"stzh-card\"));\n cards.forEach(card => {\n if (card.collapsible) {\n card.collapsed = !this.allCollapsed\n }\n });\n\n this.allCollapsed = !this.allCollapsed;\n\n this.stzhCollapseAll.emit({\n component: \"stzh-cardlist\",\n allCollapsed: this.allCollapsed\n });\n }\n\n private updateCollapsedState = () => {\n const cards = Array.from(this.element.querySelectorAll(\"stzh-card\"));\n this.allCollapsed = !cards.some(card => !card.collapsed);\n }\n\n private sortableGhostClone: Function = (dragElement: HTMLElement) => {\n // const [clonedElement, clonedStzhElement, originalStzhElement] = cloneWrappedStzhElement(dragElement);\n\n // if (\n // clonedStzhElement\n // && originalStzhElement\n // && clonedStzhElement.tagName.toLowerCase() === \"stzh-card\"\n // ) {\n // const clonedStzhElementCard: HTMLStzhCardElement = clonedStzhElement as HTMLStzhCardElement;\n // const originalStzhElementCard: HTMLStzhCardElement = originalStzhElement as HTMLStzhCardElement;\n\n // // copy every property that is not reflected to its attribute\n // clonedStzhElementCard.heading = originalStzhElementCard.heading;\n // clonedStzhElementCard.subtitle = originalStzhElementCard.subtitle;\n // clonedStzhElementCard.headerActions = originalStzhElementCard.headerActions;\n // clonedStzhElementCard.footerActions = originalStzhElementCard.footerActions;\n // clonedStzhElementCard.hideMovementActions = originalStzhElementCard.hideMovementActions;\n // }\n\n // return clonedElement;\n\n const card = dragElement.tagName.toLowerCase() === \"stzh-card\"\n ? dragElement : dragElement.querySelector(\"stzh-card\");\n\n if (card) {\n const originalElement = dragElement as HTMLStzhCardElement;\n const clonedElement = dragElement.cloneNode(true) as HTMLStzhCardElement;\n\n // copy every property that is not reflected to its attribute\n clonedElement.heading = originalElement.heading;\n clonedElement.subtitle = originalElement.subtitle;\n clonedElement.headerActions = originalElement.headerActions;\n clonedElement.footerActions = originalElement.footerActions;\n clonedElement.hideMovementActions = originalElement.hideMovementActions;\n\n return clonedElement;\n }\n }\n\n async componentWillLoad() {\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"cardlist\");\n }\n }\n\n componentDidLoad() {\n this.updateCollapsedState();\n }\n\n render() {\n const classes = {\n \"stzh-cardlist\": true,\n \"stzh-cardlist--has-toggle-link\": this.showToggleLink,\n [`stzh-cardlist--layout-${this.layout}`]: !!this.layout\n };\n\n return (\n <Host>\n <div class={classes}>\n <div class=\"stzh-cardlist__header\">\n <div class=\"stzh-cardlist__description\">\n {this.description ? this.description : <slot name=\"description\"></slot>}\n </div>\n {this.showToggleLink &&\n <stzh-link\n class=\"stzh-cardlist__switch\"\n icon={this.allCollapsed ? \"list-expanded\" : \"list-shrinked\"}\n label={this.allCollapsed ? this.localization.expandAll : this.localization.collapseAll}\n onClick={this.collapseClick}\n ></stzh-link>\n }\n </div>\n\n <stzh-sortable\n disabled={!this.sortableEnabled}\n dataIdAttribute={this.sortableDataIdAttribute}\n ghostClone={this.sortableGhostClone}\n >\n <div class=\"stzh-cardlist__cards\" role=\"list\">\n <slot></slot>\n </div>\n </stzh-sortable>\n </div>\n </Host>\n );\n }\n}\n",":host {\n &[disabled]:not([disabled=\"false\"]) {\n --description-color: #{$formDisabledColor};\n }\n}\n\n.stzh-chipselect {\n\t@include input-description;\n\n &__chips {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n margin: calc(#{space('small')} / -2) calc(#{space('xsmall')} / -2);\n border-radius: $buttonBorderRadius;\n\n @include mq($to: medium) {\n display: none;\n }\n }\n\n &__chip {\n margin: calc(#{space('small')} / 2) calc(#{space('xsmall')} / 2);\n\n &.is-focused,\n &.is-focused[active]:not([active=false]) {\n --border-color: #{$colorPrimaryHover};\n\n @include highContrast() {\n --border-color: Highlight;\n }\n }\n\n &.is-focused[active]:not([active=false]) {\n --background-color: #{$colorPrimaryHover};\n\n @include highContrast() {\n --background-color: Canvas;\n }\n }\n }\n\n &__dropdown {\n @include mq($from: medium) {\n display: none;\n }\n }\n\n &__description-wrapper {\n @include mq($to: medium) {\n display: none;\n }\n }\n\n &--has-error &__error,\n &--has-description &__description {\n margin-top: space('xsmall');\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Watch,\n Event,\n EventEmitter,\n State,\n Fragment,\n Listen,\n} from \"@stencil/core\";\n\nimport {\n StzhChipselectItem,\n StzhChipselectChangeEvent,\n StzhDropdownChangeEvent\n} from \"../../index\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\n// import { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nlet chipselectCounter = 0;\n\n/**\n * @slot - Slot for `stzh-checkbox` elements\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot description-long-title - Slot for long description title (in popover) / instead of descriptionLongTitle or description property\n * @slot error - Slot for error\n */\n@Component({\n tag: \"stzh-chipselect\",\n styleUrl: \"stzh-chipselect.scss\",\n scoped: true\n})\nexport class StzhChipselect {\n /** Translation strings */\n @Prop() localization: StzhLocaleComponent;\n\n /** The list of chips */\n @Prop() data: string | StzhChipselectItem[] = [];\n private _data: StzhChipselectItem[] = [];\n private _dataDropdown: any[] = [];\n\n /** The name of the input element */\n @Prop({ reflect: true }) name: string;\n\n /** Label */\n @Prop() label: string = \"\";\n\n /** Value */\n @Prop({ mutable: true }) value: string = \"\";\n\n /** Default value (used by reset) */\n @Prop({ mutable: true }) defaultValue: string = \"\";\n\n /** Description message (use description slot as alternative) */\n @Prop() description: string;\n\n /** Long description message appearing in a popover (use description-long slot as alternative) */\n @Prop() descriptionLong: string;\n\n /** Long description title appearing in a popover (use description-long-title slot as or description property alternative) */\n @Prop() descriptionLongTitle: string;\n\n /** One or multiple error message (use error slot as alternative) */\n @Prop() error: string | string[];\n private _error: string[];\n\n /** Invalid status */\n @Prop({ reflect: true }) invalid: boolean = false;\n\n /** Required status */\n @Prop({ reflect: true }) required: boolean = false;\n\n /** Whether all chips are disabled or not */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /** Hide `(optional)` label (or use `required` inside form ot hide it) */\n @Prop({ reflect: true }) hideOptional: boolean = false;\n\n /** Id for element which describes the input (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */\n @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n @State() activeFocusOptionIndex: number = 0;\n\n @Element() element: HTMLStzhChipselectElement;\n\n /** Change event */\n @Event() stzhChange: EventEmitter<StzhChipselectChangeEvent>;\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 @Watch(\"data\")\n dataWatcher(newValue: StzhChipselectItem[] | string) {\n if (typeof newValue === \"string\") {\n this._data = JSON.parse(newValue);\n } else {\n this._data = newValue;\n }\n\n this._dataDropdown = this._data.map((data) => {\n return {\n text: data.counter\n ? `${data.label} (${data.counter})`\n : data.label,\n value: data.value\n }\n });\n }\n\n @Watch(\"error\")\n errorWatcher(newValue: string | string[]) {\n if (typeof newValue === \"string\") {\n try {\n this._error = JSON.parse(newValue);\n } catch (e) {\n if (newValue) {\n this._error = [newValue];\n } else {\n this._error = [];\n }\n }\n } else if (newValue) {\n this._error = newValue;\n } else {\n this._error = [];\n }\n }\n\n private id: string;\n private renderPromiseResolve: (value?: unknown) => void;\n\n private waitForNextRender() {\n return new Promise(resolve => this.renderPromiseResolve = resolve);\n }\n\n private handleReset = async () => {\n this.value = this.defaultValue;\n\n // this.stzhChange.emit({\n // component: \"stzh-chipselect\",\n // value: this.value\n // });\n }\n\n private handleChipClick = async (data: StzhChipselectItem, index: number) => {\n this.value = data.value;\n this.activeFocusOptionIndex = index;\n\n await this.waitForNextRender();\n\n this.stzhChange.emit({\n component: \"stzh-chipselect\",\n value: this.value\n })\n }\n\n private handleDropdownChange = async (event: CustomEvent<StzhDropdownChangeEvent>) => {\n this.value = Array.isArray(event.detail.value) ? event.detail.value[0] : event.detail.value;\n\n this.activeFocusOptionIndex = this._data.findIndex(data => {\n return data.value === this.value;\n });\n\n await this.waitForNextRender();\n\n this.stzhChange.emit({\n component: \"stzh-chipselect\",\n value: this.value\n })\n }\n\n private handleKeydown = (event: KeyboardEvent) => {\n let newActiveIndex: number = null;\n const activeOptionIndex = this.activeFocusOptionIndex;\n\n if (event.key === \"ArrowUp\" || event.key === \"ArrowLeft\") {\n event.preventDefault();\n\n if (activeOptionIndex > 0) {\n newActiveIndex = activeOptionIndex - 1;\n }\n } else if (event.key === \"ArrowDown\" || event.key === \"ArrowRight\") {\n event.preventDefault();\n\n if (activeOptionIndex < this._data.length - 1) {\n newActiveIndex = activeOptionIndex + 1;\n }\n } else if (event.key === \" \" || event.key === \"Enter\") {\n event.preventDefault();\n this.value = this._data[activeOptionIndex].value;\n\n this.stzhChange.emit({\n component: \"stzh-chipselect\",\n value: this.value\n });\n }\n\n if (newActiveIndex !== null) {\n this.activeFocusOptionIndex = newActiveIndex;\n }\n }\n\n componentDidRender() {\n if (this.renderPromiseResolve) {\n this.renderPromiseResolve();\n }\n }\n\n async componentWillLoad() {\n this.id = `stzh-chipselect-${chipselectCounter++}`;\n\n this.dataWatcher(this.data);\n this.errorWatcher(this.error);\n\n this.defaultValue = this.defaultValue || this.value;\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"chipselect\");\n }\n }\n\n render() {\n const descriptionUsed = !!this.description;\n const descriptionLongUsed = !!this.descriptionLong;\n const errorUsed = !!this.error;\n\n const classes = {\n \"stzh-chipselect\": true,\n \"stzh-chipselect--has-description\": descriptionUsed,\n \"stzh-chipselect--has-description-long\": descriptionLongUsed,\n \"stzh-chipselect--has-error\": errorUsed,\n \"stzh-chipselect--is-invalid\": this.invalid || errorUsed,\n \"stzh-chipselect--is-disabled\": this.disabled,\n \"stzh-chipselect--is-required\": this.required\n };\n\n return (\n <Host is-invalid={this.invalid || errorUsed}>\n <div class={classes}>\n <input\n type=\"hidden\"\n name={this.name}\n value={this.value}\n defaultValue={this.defaultValue}\n />\n\n {this._data.length > 0 &&\n <Fragment>\n <div\n class=\"stzh-chipselect__chips\"\n role=\"listbox\"\n tabindex=\"0\"\n aria-multiselectable=\"false\"\n aria-activedescendant={`${this.id}-option-${this.activeFocusOptionIndex}`}\n aria-describedby={`${this.id}-description ${this.a11yDescribedby}`}\n onKeyDown={this.handleKeydown}\n >\n {this._data.map((data, index) => (\n <stzh-chip\n role=\"option\"\n class={{\n \"stzh-chipselect__chip\": true,\n \"is-focused\": this.activeFocusOptionIndex === index\n }}\n label={data.label}\n counter={data.counter}\n icon={data.icon}\n type={data.type}\n inverted={data.inverted}\n variant={data.variant}\n size={data.size}\n disabled={this.disabled || data.disabled}\n active={this.value === data.value}\n aria-selected={this.value === data.value ? \"true\" : \"false\"}\n id={`${this.id}-option-${index}`}\n a11yTabindex=\"-1\"\n onClick={() => this.handleChipClick(data, index)}\n ></stzh-chip>\n ))}\n </div>\n\n <StzhInputDescription\n classPrefix=\"stzh-chipselect\"\n id={`${this.id}-description`}\n error={this._error}\n description={this.description}\n descriptionLong={this.descriptionLong}\n descriptionLongTitle={this.descriptionLongTitle}\n descriptionLongUsed={descriptionLongUsed}\n moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n />\n\n <stzh-dropdown\n class=\"stzh-chipselect__dropdown\"\n disabled={this.disabled}\n error={this._error}\n description={this.description}\n descriptionLong={this.descriptionLong}\n required={this.required}\n invalid={this.invalid}\n items={[this.value]}\n label={this.label}\n options={this._dataDropdown}\n hideOptional={this.hideOptional}\n onStzhChange={this.handleDropdownChange}\n ></stzh-dropdown>\n </Fragment>\n }\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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"}

package/dist/stzh-components/p-b5224e53.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{h as t,r as a,c as e,a as s,g as n}from"./p-c7bfac7a.js";import{i,b as r,g as l,c as o,p as h,D as c,d,a as z,e as p,s as f,f as u,h as v,j as m,k as g,l as b}from"./p-23d404e1.js";const y=({focusedDay:a,today:e,day:s,onDaySelect:n,onKeyboardNavigation:l,focusedDayRef:o,disabled:h,inRange:c,isSelected:d,dateFormatter:z})=>{const p=i(s,e);const f=r(s,a);const u=i(s,a);const v=!c;function m(t){n(t,s)}return t("button",{class:{"stzh-calendar__day":true,"is-outside":v,"is-today":p,"is-month":f,"is-disabled":h},tabIndex:u?0:-1,onClick:m,onKeyDown:l,"aria-disabled":h?"true":undefined,disabled:v,type:"button","aria-pressed":d?"true":"false","aria-current":p?"date":undefined,"s-object-id":z.format(s),ref:t=>{if(u&&t&&o){o(t)}}},t("span",{"aria-hidden":"true"},s.getDate()),t("span",{class:"stzh-calendar__vhidden"},z.format(s)))};function _(t,a){const e=[];for(let s=0;s<t.length;s+=a){e.push(t.slice(s,s+a))}return e}function w(t,a,e){return t.map(((s,n)=>{const i=(n+a)%t.length;return e(t[i])}))}const x=({selectedDate:a,focusedDate:e,labelledById:s,localization:n,firstDayOfWeek:r,min:h,max:c,dateFormatter:d,isDateDisabled:z,onDateSelect:p,onKeyboardNavigation:f,focusedDayRef:u})=>{const v=new Date;const m=l(e,r);return t("table",{class:"stzh-calendar__table","aria-labelledby":s},t("thead",null,t("tr",null,w(n.$globals.dayNames,r,(a=>t("th",{class:"stzh-calendar__table-header",scope:"col"},t("span",{"aria-hidden":"true"},a.substring(0,2)),t("span",{class:"stzh-calendar__vhidden"},a)))))),t("tbody",null,_(m,7).map((s=>t("tr",{class:"stzh-calendar__row"},s.map((s=>t("td",{class:"stzh-calendar__cell"},t(y,{day:s,today:v,focusedDay:e,isSelected:i(s,a),disabled:z(s),inRange:o(s,h,c),onDaySelect:p,dateFormatter:d,onKeyboardNavigation:f,focusedDayRef:u})))))))))};const k=".sc-stzh-calendar-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-calendar-h{display:none}.sc-stzh-calendar-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-calendar-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-calendar-h .sc-stzh-calendar,.sc-stzh-calendar-h .sc-stzh-calendar::before,.sc-stzh-calendar-h *.sc-stzh-calendar::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-calendar-h .has-focus.sc-stzh-calendar{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-calendar-h .stzh-fylingfocus-focused.sc-stzh-calendar{outline-style:none !important}.sc-stzh-calendar-h .stzh-fylingfocus-focused.sc-stzh-calendar::-moz-focus-inner{border:0 !important}.sc-stzh-calendar-h{--padding-top:var(--stzh-space-small);--padding-bottom:var(--stzh-space-small);--padding-left:var(--stzh-space-xsmall);--padding-right:var(--stzh-space-xsmall);width:var(--stzh-calendar-width)}.stzh-calendar.sc-stzh-calendar{display:flex;position:relative;text-align:left;touch-action:pan-y;-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:hidden;overflow:clip;padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);padding-left:var(--padding-left);padding-right:var(--padding-right)}.stzh-calendar__wrapper.sc-stzh-calendar{width:100%}.stzh-calendar__table.sc-stzh-calendar{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);border-collapse:collapse;border-spacing:0;text-align:center;width:100%}.stzh-calendar__table-header.sc-stzh-calendar,.stzh-calendar__cell.sc-stzh-calendar{padding:var(--stzh-space-xxxsmall)}.stzh-calendar__table-header.sc-stzh-calendar:first-child,.stzh-calendar__cell.sc-stzh-calendar:first-child{padding-left:0}.stzh-calendar__table-header.sc-stzh-calendar:last-child,.stzh-calendar__cell.sc-stzh-calendar:last-child{padding-right:0}.stzh-calendar__row.sc-stzh-calendar:last-child .stzh-calendar__cell.sc-stzh-calendar{padding-bottom:0}.stzh-calendar__table-header.sc-stzh-calendar{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);-webkit-text-decoration-line:none;text-decoration-line:none;padding-top:0;padding-bottom:0;width:2.75rem;height:2.5rem}.stzh-calendar__cell.sc-stzh-calendar{text-align:center}.stzh-calendar__day.sc-stzh-calendar{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;cursor:pointer;display:inline-block;font-variant-numeric:tabular-nums;width:2.5rem;height:2.5rem;text-align:center;vertical-align:middle;transition-property:color, background-color;transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-calendar__day.is-today.sc-stzh-calendar{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);color:var(--stzh-color-primary70)}.stzh-calendar__day.sc-stzh-calendar:hover{background:var(--stzh-color-grey20)}.stzh-calendar__day[aria-pressed=true].sc-stzh-calendar{background:var(--stzh-color-secondary30);color:var(--stzh-color-primary70)}.stzh-calendar__day.sc-stzh-calendar:active{background:var(--stzh-color-secondary30);color:var(--stzh-color-primary70)}.stzh-calendar__day.sc-stzh-calendar:not(.is-month),.stzh-calendar__day[aria-disabled=true].sc-stzh-calendar{background:transparent;color:var(--stzh-color-grey60);cursor:default}.stzh-calendar__day.is-disabled.sc-stzh-calendar{-webkit-text-decoration-line:line-through;text-decoration-line:line-through}.stzh-calendar__day.is-outside.sc-stzh-calendar{color:var(--stzh-color-grey60);background:var(--stzh-color-grey20);cursor:default;pointer-events:none;-webkit-text-decoration-line:none;text-decoration-line:none}.stzh-calendar__header.sc-stzh-calendar{align-items:center;display:flex;justify-content:space-between;width:100%}.stzh-calendar__nav.sc-stzh-calendar{display:flex;align-items:center}.stzh-calendar__nav.is-dropdowns.sc-stzh-calendar{gap:calc(var(--stzh-space-xsmall) + var(--stzh-space-small));margin-left:var(--stzh-space-small)}.stzh-calendar.sc-stzh-calendar stzh-dropdown.stzh-calendar__dropdown.sc-stzh-calendar{--popover-width:100%;--popover-height:calc(100% - var(--stzh-form-input-small-height) - var(--padding-top));--popover-max-height:initial;position:static}.stzh-calendar__select-wrapper.sc-stzh-calendar{display:inline-flex;position:relative}.stzh-calendar__select-wrapper.sc-stzh-calendar span.sc-stzh-calendar{margin-right:0px}.stzh-calendar__select.sc-stzh-calendar{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);cursor:pointer;height:100%;left:0;opacity:0;position:absolute;top:0;width:100%;z-index:2;border-radius:var(--stzh-form-input-border-radius)}.stzh-calendar__select-label.sc-stzh-calendar{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;align-items:center;border-radius:var(--stzh-form-input-border-radius);color:var(--stzh-color-primary70);display:flex;gap:var(--stzh-space-xsmall);padding:0;padding-left:var(--stzh-space-small);padding-right:var(--stzh-space-xsmall);position:relative;width:100%;min-height:2.5rem;z-index:1}.stzh-calendar__select-icon.sc-stzh-calendar{--size:var(--stzh-icon-size-xsmall)}.stzh-calendar__vhidden.sc-stzh-calendar{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}";function D(t,a){var e=[];for(var s=t;s<=a;s++){e.push(s)}return e}const S={TAB:9,ESC:27,SPACE:32,PAGE_UP:33,PAGE_DOWN:34,END:35,HOME:36,LEFT:37,UP:38,RIGHT:39,DOWN:40};let F=0;const O=class{constructor(t){a(this,t);this.stzhChange=e(this,"stzhChange",7);this.initialTouchX=null;this.initialTouchY=null;this.enableActiveFocus=()=>{this.activeFocus=true};this.disableActiveFocus=()=>{this.activeFocus=false};this.handleTouchStart=t=>{const a=t.changedTouches[0];this.initialTouchX=a.pageX;this.initialTouchY=a.pageY};this.handleTouchEnd=t=>{const a=t.changedTouches[0];const e=a.pageX-this.initialTouchX;const s=a.pageY-this.initialTouchY;const n=70;const i=Math.abs(e)>=n&&Math.abs(s)<=n;if(i){this.addMonths(e<0?1:-1)}this.initialTouchY=null;this.initialTouchX=null};this.handleNextMonthClick=t=>{t.preventDefault();this.addMonths(1)};this.handlePreviousMonthClick=t=>{t.preventDefault();this.addMonths(-1)};this.handleKeyboardNavigation=t=>{var a=true;switch(t.keyCode){case S.RIGHT:this.addDays(1);break;case S.LEFT:this.addDays(-1);break;case S.DOWN:this.addDays(7);break;case S.UP:this.addDays(-7);break;case S.PAGE_UP:if(t.shiftKey){this.addYears(-1)}else{this.addMonths(-1)}break;case S.PAGE_DOWN:if(t.shiftKey){this.addYears(1)}else{this.addMonths(1)}break;case S.HOME:this.startOfWeek();break;case S.END:this.endOfWeek();break;default:a=false}if(a){t.preventDefault();this.enableActiveFocus()}};this.handleDaySelect=(t,a)=>{const e=o(a,h(this.min),h(this.max));const s=!this.isDateDisabled(a);if(e&&s){this.setDate(a);this.stzhChange.emit({component:"stzh-calendar",value:this.value,valueAsDate:a})}else{this.setFocusedDay(a)}};this.handleMonthSelect=t=>{const a=Array.isArray(t.detail.value)?t.detail.value[0]:t.detail.value;this.setMonth(parseInt(a,10))};this.handleYearSelect=t=>{const a=Array.isArray(t.detail.value)?t.detail.value[0]:t.detail.value;this.setYear(parseInt(a,10))};this.processFocusedDayNode=t=>{if(this.activeFocus){setTimeout((()=>t.focus()),0)}};this.value="";this.min="";this.max="";this.firstDayOfWeek=c.Monday;this.localization=undefined;this.isDateDisabled=()=>false;this.prevMonthAnalyticsId=undefined;this.nextMonthAnalyticsId=undefined;this.activeFocus=false;this.focusedDay=new Date}createDateFormatters(){if(this.localization){this.dateFormatShort=new Intl.DateTimeFormat(this.localization.$locale,{day:"numeric",month:"long"})}}valueWatcher(t){if(t){this.setFocusedDay(h(this.value))}else{this.setFocusedDay(new Date)}}async setFocusedDay(t){this.focusedDay=d(t,h(this.min),h(this.max))}async setDate(t){this.value=z(t)}addDays(t){this.setFocusedDay(p(this.focusedDay,t))}addMonths(t){this.setMonth(this.focusedDay.getMonth()+t)}addYears(t){this.setYear(this.focusedDay.getFullYear()+t)}startOfWeek(){this.setFocusedDay(f(this.focusedDay,this.firstDayOfWeek))}endOfWeek(){this.setFocusedDay(u(this.focusedDay,this.firstDayOfWeek))}setMonth(t){const a=v(m(this.focusedDay),t);const e=g(a);const s=v(this.focusedDay,t);this.setFocusedDay(d(s,a,e))}setYear(t){const a=b(m(this.focusedDay),t);const e=g(a);const s=b(this.focusedDay,t);this.setFocusedDay(d(s,a,e))}async componentWillLoad(){this.dialogLabelId=`stzh-calendar-dialog-${F}`;F++;this.valueWatcher(this.value);if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"calendar")}}connectedCallback(){this.createDateFormatters()}render(){const a=h(this.value);const e=(a\|\|this.focusedDay).getFullYear();const n=this.focusedDay.getMonth();const i=this.focusedDay.getFullYear();const r=h(this.min);const l=h(this.max);const c=r!=null&&r.getMonth()===n&&r.getFullYear()===i;const d=l!=null&&l.getMonth()===n&&l.getFullYear()===i;const z=r?r.getFullYear():e-10;const p=l?l.getFullYear():e+10;const f=this.localization.$globals.monthNames.map(((t,a)=>({value:a.toString(),text:t,disabled:!o(new Date(i,a,1),r?m(r):null,l?g(l):null)})));const u=D(z,p).map((t=>({value:t.toString(),text:t.toString()})));return t(s,null,t("div",{class:{"stzh-calendar":true},onTouchStart:this.handleTouchStart,onTouchEnd:this.handleTouchEnd},t("div",{class:"stzh-calendar__wrapper"},t("div",{class:"stzh-calendar__header",onFocusin:this.disableActiveFocus},t("div",{class:"stzh-calendar__nav is-dropdowns"},t("h2",{id:this.dialogLabelId,class:"stzh-calendar__vhidden","aria-live":"polite","aria-atomic":"true"},this.localization.$globals.monthNames[n],this.focusedDay.getFullYear()),t("stzh-dropdown",{class:"stzh-calendar__dropdown",variant:"plain",size:"small",inline:true,"popover-fullwidth":"horizontal",noSearch:true,openOnFocus:false,items:[n.toString()],options:f,label:this.localization.monthSelectLabel,labelHidden:true,onStzhChange:this.handleMonthSelect}),t("stzh-dropdown",{class:"stzh-calendar__dropdown",variant:"plain",size:"small",inline:true,"popover-fullwidth":"horizontal",noSearch:true,openOnFocus:false,items:[i.toString()],options:u,label:this.localization.yearSelectLabel,labelHidden:true,onStzhChange:this.handleYearSelect})),t("div",{class:"stzh-calendar__nav"},t("stzh-button",{class:"stzh-calendar__prev",variant:"tertiary",size:"small",icon:"arrow-left",iconOnly:true,onClick:this.handlePreviousMonthClick,disabled:c,type:"button",a11yLabel:this.localization.prevMonthLabel,analyticsId:this.prevMonthAnalyticsId\|\|this.localization.prevMonthLabel}),t("stzh-button",{class:"stzh-calendar__next",variant:"tertiary",size:"small",icon:"arrow-right",iconOnly:true,onClick:this.handleNextMonthClick,disabled:d,type:"button",a11yLabel:this.localization.nextMonthLabel,analyticsId:this.nextMonthAnalyticsId\|\|this.localization.nextMonthLabel}))),t(x,{dateFormatter:this.dateFormatShort,selectedDate:a,focusedDate:this.focusedDay,onDateSelect:this.handleDaySelect,onKeyboardNavigation:this.handleKeyboardNavigation,labelledById:this.dialogLabelId,localization:this.localization,firstDayOfWeek:this.firstDayOfWeek,focusedDayRef:this.processFocusedDayNode,min:r,max:l,isDateDisabled:this.isDateDisabled}))))}get element(){return n(this)}static get watchers(){return{localization:["createDateFormatters"],value:["valueWatcher"]}}};O.style=k;export{O as stzh_calendar};
2	- //# sourceMappingURL=p-b5224e53.entry.js.map

package/dist/stzh-components/p-b5224e53.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["StzhCalendarDay","focusedDay","today","day","onDaySelect","onKeyboardNavigation","focusedDayRef","disabled","inRange","isSelected","dateFormatter","isToday","isEqual","isMonth","isEqualMonth","isFocused","isOutsideRange","handleClick","e","h","class","tabIndex","onClick","onKeyDown","undefined","type","format","ref","el","getDate","chunk","array","chunkSize","result","i","length","push","slice","mapWithOffset","startingOffset","mapFn","map","_","adjustedIndex","StzhCalendarMonth","selectedDate","focusedDate","labelledById","localization","firstDayOfWeek","min","max","isDateDisabled","onDateSelect","Date","days","getViewOfMonth","$globals","dayNames","dayName","scope","substring","week","stzhCalendarCss","range","from","to","keyCode","TAB","ESC","SPACE","PAGE_UP","PAGE_DOWN","END","HOME","LEFT","UP","RIGHT","DOWN","calendarCounter","StzhCalendar","this","initialTouchX","initialTouchY","enableActiveFocus","activeFocus","disableActiveFocus","handleTouchStart","event","touch","changedTouches","pageX","pageY","handleTouchEnd","distX","distY","threshold","isHorizontalSwipe","Math","abs","addMonths","handleNextMonthClick","preventDefault","handlePreviousMonthClick","handleKeyboardNavigation","handled","addDays","shiftKey","addYears","startOfWeek","endOfWeek","handleDaySelect","_event","isInRange","parseISODate","isAllowed","setDate","stzhChange","emit","component","value","valueAsDate","setFocusedDay","handleMonthSelect","Array","isArray","detail","setMonth","parseInt","handleYearSelect","setYear","processFocusedDayNode","element","setTimeout","focus","DaysOfWeek","Monday","createDateFormatters","dateFormatShort","Intl","DateTimeFormat","$locale","month","valueWatcher","newValue","clamp","date","printISODate","months","getMonth","years","getFullYear","startOfMonth","endOfMonth","year","componentWillLoad","dialogLabelId","window","stzhComponents","utils","fetchTranslations","connectedCallback","render","selectedYear","focusedMonth","focusedYear","minDate","maxDate","prevMonthDisabled","nextMonthDisabled","minYear","maxYear","monthDropdownOptions","monthNames","toString","text","yearDropdownOptions","Host","onTouchStart","onTouchEnd","onFocusin","id","variant","size","inline","noSearch","openOnFocus","items","options","label","monthSelectLabel","labelHidden","onStzhChange","yearSelectLabel","icon","iconOnly","a11yLabel","prevMonthLabel","analyticsId","prevMonthAnalyticsId","nextMonthLabel","nextMonthAnalyticsId"],"sources":["src/components/stzh-calendar/stzh-calendar-day.tsx","src/components/stzh-calendar/stzh-calendar-month.tsx","src/components/stzh-calendar/stzh-calendar.scss?tag=stzh-calendar&encapsulation=scoped","src/components/stzh-calendar/stzh-calendar.tsx"],"sourcesContent":["import { h, FunctionalComponent } from \"@stencil/core\"\nimport { isEqual, isEqualMonth } from \"../../utils/date-utils\"\n\nexport type StzhCalendarDayProps = {\n focusedDay: Date\n today: Date\n day: Date\n disabled: boolean\n inRange: boolean\n isSelected: boolean\n dateFormatter: Intl.DateTimeFormat\n onDaySelect: (event: MouseEvent, day: Date) => void\n onKeyboardNavigation: (event: KeyboardEvent) => void\n focusedDayRef?: (element: HTMLElement) => void\n}\n\nexport const StzhCalendarDay: FunctionalComponent<StzhCalendarDayProps> = ({\n focusedDay,\n today,\n day,\n onDaySelect,\n onKeyboardNavigation,\n focusedDayRef,\n disabled,\n inRange,\n isSelected,\n dateFormatter,\n}) => {\n const isToday = isEqual(day, today)\n const isMonth = isEqualMonth(day, focusedDay)\n const isFocused = isEqual(day, focusedDay)\n const isOutsideRange = !inRange\n\n function handleClick(e) {\n onDaySelect(e, day)\n }\n\n return (\n <button\n class={{\n \"stzh-calendar__day\": true,\n \"is-outside\": isOutsideRange,\n \"is-today\": isToday,\n \"is-month\": isMonth,\n \"is-disabled\": disabled,\n }}\n tabIndex={isFocused ? 0 : -1}\n onClick={handleClick}\n onKeyDown={onKeyboardNavigation}\n aria-disabled={disabled ? \"true\" : undefined}\n disabled={isOutsideRange}\n type=\"button\"\n aria-pressed={isSelected ? \"true\" : \"false\"}\n aria-current={isToday ? \"date\" : undefined}\n s-object-id={dateFormatter.format(day)}\n ref={el => {\n if (isFocused && el && focusedDayRef) {\n focusedDayRef(el)\n }\n }}\n >\n <span aria-hidden=\"true\">{day.getDate()}</span>\n <span class=\"stzh-calendar__vhidden\">{dateFormatter.format(day)}</span>\n </button>\n )\n}\n","import { h, FunctionalComponent } from \"@stencil/core\"\nimport { getViewOfMonth, inRange, DaysOfWeek, isEqual } from \"../../utils/date-utils\"\n\nimport { StzhCalendarLocalizedText } from \"./stzh-calendar.localization\"\nimport { StzhCalendarDay, StzhCalendarDayProps } from \"./stzh-calendar-day\"\nimport { StzhCalendarDateDisabledPredicate } from \"../../index\";\n\nfunction chunk<T>(array: T[], chunkSize: number): T[][] {\n const result = []\n\n for (let i = 0; i < array.length; i += chunkSize) {\n result.push(array.slice(i, i + chunkSize))\n }\n\n return result\n}\n\nfunction mapWithOffset<T, U>(array: T[], startingOffset: number, mapFn: (item: T) => U): U[] {\n return array.map((_, i) => {\n const adjustedIndex = (i + startingOffset) % array.length\n return mapFn(array[adjustedIndex])\n })\n}\n\ntype StzhCalendarMonthProps = {\n selectedDate: Date\n focusedDate: Date\n labelledById: string\n localization: StzhCalendarLocalizedText\n firstDayOfWeek: DaysOfWeek\n min?: Date\n max?: Date\n dateFormatter: Intl.DateTimeFormat\n isDateDisabled: StzhCalendarDateDisabledPredicate\n onDateSelect: StzhCalendarDayProps[\"onDaySelect\"]\n onKeyboardNavigation: StzhCalendarDayProps[\"onKeyboardNavigation\"]\n focusedDayRef: (element: HTMLElement) => void\n}\n\nexport const StzhCalendarMonth: FunctionalComponent<StzhCalendarMonthProps> = ({\n selectedDate,\n focusedDate,\n labelledById,\n localization,\n firstDayOfWeek,\n min,\n max,\n dateFormatter,\n isDateDisabled,\n onDateSelect,\n onKeyboardNavigation,\n focusedDayRef,\n}) => {\n const today = new Date()\n const days = getViewOfMonth(focusedDate, firstDayOfWeek)\n\n return (\n <table class=\"stzh-calendar__table\" aria-labelledby={labelledById}>\n <thead>\n <tr>\n {mapWithOffset(localization.$globals.dayNames, firstDayOfWeek, dayName => (\n <th class=\"stzh-calendar__table-header\" scope=\"col\">\n <span aria-hidden=\"true\">{dayName.substring(0, 2)}</span>\n <span class=\"stzh-calendar__vhidden\">{dayName}</span>\n </th>\n ))}\n </tr>\n </thead>\n <tbody>\n {chunk(days, 7).map(week => (\n <tr class=\"stzh-calendar__row\">\n {week.map(day => (\n <td class=\"stzh-calendar__cell\">\n <StzhCalendarDay\n day={day}\n today={today}\n focusedDay={focusedDate}\n isSelected={isEqual(day, selectedDate)}\n disabled={isDateDisabled(day)}\n inRange={inRange(day, min, max)}\n onDaySelect={onDateSelect}\n dateFormatter={dateFormatter}\n onKeyboardNavigation={onKeyboardNavigation}\n focusedDayRef={focusedDayRef}\n />\n </td>\n ))}\n </tr>\n ))}\n </tbody>\n </table>\n )\n}\n","/**\n * @prop --background: Background color of calendar\n * @prop --padding-top: Padding top of calendar\n * @prop --padding-bottom: Padding bottom color of calendar\n * @prop --padding-left: Padding left color of calendar\n * @prop --padding-right: Padding right color of calendar\n * @prop --background-color: Background color of calendar\n */\n\n:host {\n --padding-top: #{space('small')};\n --padding-bottom: #{space('small')};\n --padding-left: #{space('xsmall')};\n --padding-right: #{space('xsmall')};\n\n width: #{$calendarWidth};\n}\n\n.stzh-calendar {\n display: flex;\n position: relative;\n text-align: left;\n touch-action: pan-y;\n user-select: none;\n overflow: hidden;\n overflow: clip;\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\n &__wrapper {\n width: 100%;\n }\n\n &__table {\n @include font;\n @include fontSize('milli');\n border-collapse: collapse;\n border-spacing: 0;\n text-align: center;\n width: 100%;\n }\n\n &__table-header,\n &__cell {\n padding: space('xxxsmall');\n\n &:first-child {\n padding-left: 0;\n }\n\n &:last-child {\n padding-right: 0;\n }\n }\n\n &__row:last-child &__cell {\n padding-bottom: 0;\n }\n\n &__table-header {\n @include font;\n @include fontSize('nano');\n text-decoration-line: none;\n padding-top: 0;\n padding-bottom: 0;\n width: 44px;\n height: 40px;\n }\n\n &__cell {\n text-align: center;\n }\n\n &__day {\n @include font;\n @include fontSize('milli');\n appearance: none;\n background: transparent;\n border: 0;\n cursor: pointer;\n display: inline-block;\n font-variant-numeric: tabular-nums;\n width: 40px;\n height: 40px;\n text-align: center;\n vertical-align: middle;\n transition-property: color, background-color;\n transition-duration: $baseTransitionAnimationSpeed;\n // position: relative;\n // padding: 0 0 1px;\n // z-index: 1;\n\n // &::before {\n // z-index: -1;\n // bottom: 0;\n // content: \"\";\n // left: 0;\n // position: absolute;\n // right: 0;\n // top: 0;\n // }\n\n &.is-today {\n @include font('heavy');\n color: $colorPrimary70;\n // box-shadow: 0 0 0 1px $colorPrimary;\n // position: relative;\n // z-index: 200;\n }\n\n &:hover {\n background: $colorGrey20;\n }\n\n // &:hover::before {\n // background: $colorGrey20;\n // }\n\n // &:focus,\n &[aria-pressed=\"true\"] {\n background: $colorSecondary30;\n // box-shadow: none;\n color: $colorPrimary70;\n }\n\n &:active {\n background: $colorSecondary30;\n // box-shadow: 0 0 5px $colorPrimary;\n color: $colorPrimary70;\n // z-index: 200;\n }\n\n // &:focus {\n // z-index: 200;\n // }\n\n // &:not(.is-month) {\n // box-shadow: none;\n // }\n\n &:not(.is-month),\n &[aria-disabled=\"true\"] {\n background: transparent;\n color: $colorGrey60;\n cursor: default;\n }\n\n // &[aria-disabled=\"true\"] {\n // &.is-today {\n // box-shadow: 0 0 0 1px $colorGrey20;\n\n // &:focus {\n // box-shadow: 0 0 5px $colorPrimary;\n // }\n // }\n\n // &::before {\n // display: none;\n // }\n // }\n\n &.is-disabled {\n text-decoration-line: line-through;\n }\n\n &.is-outside {\n color: $colorGrey60;\n background: $colorGrey20;\n // box-shadow: none;\n cursor: default;\n pointer-events: none;\n text-decoration-line: none;\n\n // &::before {\n // display: none;\n // }\n }\n }\n\n &__header {\n align-items: center;\n display: flex;\n justify-content: space-between;\n width: 100%;\n }\n\n &__nav {\n display: flex;\n align-items: center;\n\n &.is-dropdowns {\n gap: calc(#{space('xsmall')} + #{space('small')});\n margin-left: space('small');\n }\n }\n\n // &__prev,\n // &__next {\n // align-items: center;\n // appearance: none;\n // font-family: inherit;\n // background: transparent;\n // border-radius: 50%;\n // color: $colorPrimary70;\n // cursor: pointer;\n // display: inline-flex;\n // flex-shrink: 0;\n // justify-content: center;\n // margin-left: space('xsmall');\n // padding: 0;\n // transition: background-color 300ms ease;\n // height: 32px;\n // width: 32px;\n\n // &:disabled {\n // cursor: default;\n // color: $colorGrey60;\n // }\n // }\n\n stzh-dropdown#{&}__dropdown {\n --popover-width: 100%;\n --popover-height: calc(100% - #{$formInputHeightSmall} - var(--padding-top));\n --popover-max-height: initial;\n position: static;\n }\n\n &__select-wrapper {\n display: inline-flex;\n position: relative;\n\n span {\n margin-right: 0px;\n }\n }\n\n &__select {\n @include fontSize('milli');\n cursor: pointer;\n height: 100%;\n left: 0;\n opacity: 0;\n position: absolute;\n top: 0;\n width: 100%;\n z-index: 2;\n border-radius: $formInputBorderRadius;\n }\n\n &__select-label {\n @include fontSize('milli');\n appearance: none;\n border: none;\n align-items: center;\n border-radius: $formInputBorderRadius;\n color: $colorPrimary70;\n display: flex;\n gap: space('xsmall');\n padding: 0;\n padding-left: space('small');\n padding-right: space('xsmall');\n\n position: relative;\n width: 100%;\n min-height: 40px;\n z-index: 1;\n }\n\n &__select-icon {\n --size: #{iconSize('xsmall')};\n }\n\n &__vhidden {\n @include visuallyhidden;\n }\n}\n","import {\n Component,\n ComponentInterface,\n Host,\n Prop,\n Element,\n h,\n Event,\n EventEmitter,\n State,\n Method,\n Watch\n} from \"@stencil/core\"\n\nimport {\n addDays,\n startOfWeek,\n endOfWeek,\n setMonth,\n setYear,\n clamp,\n inRange,\n endOfMonth,\n startOfMonth,\n printISODate,\n parseISODate,\n DaysOfWeek,\n} from \"../../utils/date-utils\";\n\nimport { StzhCalendarChangeEvent, StzhDropdownChangeEvent } from \"../../index\";\nimport { StzhCalendarDateDisabledPredicate } from \"../../index\";\n\nimport { StzhCalendarMonth } from \"./stzh-calendar-month\";\nimport { StzhCalendarLocalizedText } from \"./stzh-calendar.localization\";\n\nfunction range(from: number, to: number) {\n var result: number[] = []\n for (var i = from; i <= to; i++) {\n result.push(i)\n }\n return result\n}\n\nconst keyCode = {\n TAB: 9,\n ESC: 27,\n SPACE: 32,\n PAGE_UP: 33,\n PAGE_DOWN: 34,\n END: 35,\n HOME: 36,\n LEFT: 37,\n UP: 38,\n RIGHT: 39,\n DOWN: 40,\n}\n\nlet calendarCounter = 0;\n\n@Component({\n tag: \"stzh-calendar\",\n styleUrl: \"stzh-calendar.scss\",\n scoped: true\n})\nexport class StzhCalendar implements ComponentInterface {\n /** Date value. Must be in IS0-8601 format: YYYY-MM-DD. */\n @Prop({ mutable: true }) value: string = \"\"\n\n /**\n * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n * This setting can be used alone or together with the max property.\n */\n @Prop() min: string = \"\"\n\n /**\n * Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n * This setting can be used alone or together with the min property.\n */\n @Prop() max: string = \"\"\n\n /**\n * Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\n * Default is Monday.\n */\n @Prop() firstDayOfWeek: DaysOfWeek = DaysOfWeek.Monday\n\n /** Day names, month names, etc, used for localization. */\n @Prop() localization: StzhCalendarLocalizedText;\n\n /**\n * Controls which days are disabled and therefore disallowed.\n * For example, this can be used to disallow selection of weekends.\n */\n @Prop() isDateDisabled: StzhCalendarDateDisabledPredicate = () => false\n\n /**\n * For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the previous month button element.\n * Default value will be taken from translations.\n */\n @Prop() prevMonthAnalyticsId: string;\n\n /**\n * For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the next month button element.\n * Default value will be taken from translations.\n */\n @Prop() nextMonthAnalyticsId: string;\n\n @State() activeFocus = false\n @State() focusedDay = new Date()\n\n /** Event emitted when a date is selected. */\n @Event() stzhChange: EventEmitter<StzhCalendarChangeEvent>\n\n @Watch(\"localization\")\n createDateFormatters() {\n if (this.localization) {\n this.dateFormatShort = new Intl.DateTimeFormat(this.localization.$locale, { day: \"numeric\", month: \"long\" })\n }\n }\n\n @Watch(\"value\")\n valueWatcher(newValue: string) {\n if (newValue) {\n this.setFocusedDay(parseISODate(this.value));\n } else {\n this.setFocusedDay(new Date());\n }\n }\n\n /** Set focused day element by a JS Date object */\n @Method()\n async setFocusedDay(day: Date) {\n this.focusedDay = clamp(day, parseISODate(this.min), parseISODate(this.max))\n }\n\n /** Set value by a JS Date object */\n @Method()\n async setDate(date: Date) {\n this.value = printISODate(date)\n }\n\n @Element() element: HTMLStzhCalendarElement\n\n // private monthSelectId: string\n // private yearSelectId: string\n private dialogLabelId: string\n\n // private focusedDayNode: HTMLButtonElement\n\n private initialTouchX: number = null\n private initialTouchY: number = null\n\n /**\n * To format dates exclusively for the benefit of screen readers.\n *\n * We prefer DateTimeFormat over date.toLocaleDateString, as the former has\n * better performance when formatting large number of dates. See:\n * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString#Performance\n */\n private dateFormatShort: Intl.DateTimeFormat\n\n private enableActiveFocus = () => {\n this.activeFocus = true\n }\n\n private disableActiveFocus = () => {\n this.activeFocus = false\n }\n\n private addDays(days: number) {\n this.setFocusedDay(addDays(this.focusedDay, days))\n }\n\n private addMonths(months: number) {\n this.setMonth(this.focusedDay.getMonth() + months)\n }\n\n private addYears(years: number) {\n this.setYear(this.focusedDay.getFullYear() + years)\n }\n\n private startOfWeek() {\n this.setFocusedDay(startOfWeek(this.focusedDay, this.firstDayOfWeek))\n }\n\n private endOfWeek() {\n this.setFocusedDay(endOfWeek(this.focusedDay, this.firstDayOfWeek))\n }\n\n private setMonth(month: number) {\n const min = setMonth(startOfMonth(this.focusedDay), month)\n const max = endOfMonth(min)\n const date = setMonth(this.focusedDay, month)\n\n this.setFocusedDay(clamp(date, min, max))\n }\n\n private setYear(year: number) {\n const min = setYear(startOfMonth(this.focusedDay), year)\n const max = endOfMonth(min)\n const date = setYear(this.focusedDay, year)\n\n this.setFocusedDay(clamp(date, min, max))\n }\n\n private handleTouchStart = (event: TouchEvent) => {\n const touch = event.changedTouches[0]\n this.initialTouchX = touch.pageX\n this.initialTouchY = touch.pageY\n }\n\n // private handleTouchMove = (event: TouchEvent) => {\n // event.preventDefault()\n // }\n\n private handleTouchEnd = (event: TouchEvent) => {\n const touch = event.changedTouches[0]\n const distX = touch.pageX - this.initialTouchX // get horizontal dist traveled\n const distY = touch.pageY - this.initialTouchY // get vertical dist traveled\n const threshold = 70\n\n const isHorizontalSwipe = Math.abs(distX) >= threshold && Math.abs(distY) <= threshold\n\n if (isHorizontalSwipe) {\n this.addMonths(distX < 0 ? 1 : -1)\n }\n\n this.initialTouchY = null\n this.initialTouchX = null\n }\n\n private handleNextMonthClick = (event: MouseEvent) => {\n event.preventDefault()\n this.addMonths(1)\n }\n\n private handlePreviousMonthClick = (event: MouseEvent) => {\n event.preventDefault()\n this.addMonths(-1)\n }\n\n private handleKeyboardNavigation = (event: KeyboardEvent) => {\n var handled = true\n\n switch (event.keyCode) {\n case keyCode.RIGHT:\n this.addDays(1)\n break\n case keyCode.LEFT:\n this.addDays(-1)\n break\n case keyCode.DOWN:\n this.addDays(7)\n break\n case keyCode.UP:\n this.addDays(-7)\n break\n case keyCode.PAGE_UP:\n if (event.shiftKey) {\n this.addYears(-1)\n } else {\n this.addMonths(-1)\n }\n break\n case keyCode.PAGE_DOWN:\n if (event.shiftKey) {\n this.addYears(1)\n } else {\n this.addMonths(1)\n }\n break\n case keyCode.HOME:\n this.startOfWeek()\n break\n case keyCode.END:\n this.endOfWeek()\n break\n default:\n handled = false\n }\n\n if (handled) {\n event.preventDefault()\n this.enableActiveFocus()\n }\n }\n\n private handleDaySelect = (_event: MouseEvent, day: Date) => {\n const isInRange = inRange(day, parseISODate(this.min), parseISODate(this.max))\n const isAllowed = !this.isDateDisabled(day)\n\n if (isInRange && isAllowed) {\n this.setDate(day)\n\n this.stzhChange.emit({\n component: \"stzh-calendar\",\n value: this.value,\n valueAsDate: day,\n })\n } else {\n // for consistency we should set the focused day in cases where\n // user has selected a day that has been specifically disallowed\n this.setFocusedDay(day)\n }\n }\n\n private handleMonthSelect = (event: CustomEvent<StzhDropdownChangeEvent>) => {\n const value = Array.isArray(event.detail.value) ? event.detail.value[0] : event.detail.value;\n this.setMonth(parseInt(value, 10))\n }\n\n private handleYearSelect = (event: CustomEvent<StzhDropdownChangeEvent>) => {\n const value = Array.isArray(event.detail.value) ? event.detail.value[0] : event.detail.value;\n this.setYear(parseInt(value, 10))\n }\n\n private processFocusedDayNode = (element: HTMLButtonElement) => {\n // this.focusedDayNode = element\n\n if (this.activeFocus) {\n setTimeout(() => element.focus(), 0)\n }\n }\n\n async componentWillLoad() {\n // this.monthSelectId = `stzh-calendar-month-${calendarCounter}`;\n // this.yearSelectId = `stzh-calendar-year-${calendarCounter}`;\n this.dialogLabelId = `stzh-calendar-dialog-${calendarCounter}`;\n calendarCounter++;\n\n this.valueWatcher(this.value);\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, 'calendar');\n }\n }\n\n connectedCallback() {\n this.createDateFormatters()\n }\n\n render() {\n const valueAsDate = parseISODate(this.value)\n const selectedYear = (valueAsDate || this.focusedDay).getFullYear()\n const focusedMonth = this.focusedDay.getMonth()\n const focusedYear = this.focusedDay.getFullYear()\n\n const minDate = parseISODate(this.min)\n const maxDate = parseISODate(this.max)\n const prevMonthDisabled =\n minDate != null && minDate.getMonth() === focusedMonth && minDate.getFullYear() === focusedYear\n const nextMonthDisabled =\n maxDate != null && maxDate.getMonth() === focusedMonth && maxDate.getFullYear() === focusedYear\n\n const minYear = minDate ? minDate.getFullYear() : selectedYear - 10\n const maxYear = maxDate ? maxDate.getFullYear() : selectedYear + 10\n\n const monthDropdownOptions = this.localization.$globals.monthNames.map((month, i) => {\n return {\n value: i.toString(),\n text: month,\n disabled: !inRange(\n new Date(focusedYear, i, 1),\n minDate ? startOfMonth(minDate) : null,\n maxDate ? endOfMonth(maxDate) : null\n ),\n }\n });\n\n const yearDropdownOptions = range(minYear, maxYear).map(year => {\n return {\n value: year.toString(),\n text: year.toString(),\n }\n });\n\n return (\n <Host>\n <div\n class={{\n \"stzh-calendar\": true\n }}\n /* onTouchMove={this.handleTouchMove} */\n onTouchStart={this.handleTouchStart}\n onTouchEnd={this.handleTouchEnd}\n >\n <div class=\"stzh-calendar__wrapper\">\n {/*\n <div class=\"stzh-calendar__mobile\" onFocusin={this.disableActiveFocus}>\n <label class=\"stzh-calendar__mobile-heading\">{this.localization.calendarHeading}</label>\n </div>\n */}\n {/* @ts-ignore */}\n <div class=\"stzh-calendar__header\" onFocusin={this.disableActiveFocus}>\n <div class=\"stzh-calendar__nav is-dropdowns\">\n <h2\n id={this.dialogLabelId}\n class=\"stzh-calendar__vhidden\"\n aria-live=\"polite\"\n aria-atomic=\"true\"\n >\n {this.localization.$globals.monthNames[focusedMonth]}\n {this.focusedDay.getFullYear()}\n </h2>\n\n <stzh-dropdown\n class=\"stzh-calendar__dropdown\"\n variant=\"plain\"\n size=\"small\"\n inline\n popover-fullwidth=\"horizontal\"\n noSearch={true}\n openOnFocus={false}\n items={[focusedMonth.toString()]}\n options={monthDropdownOptions}\n label={this.localization.monthSelectLabel}\n labelHidden={true}\n onStzhChange={this.handleMonthSelect}\n ></stzh-dropdown>\n\n <stzh-dropdown\n class=\"stzh-calendar__dropdown\"\n variant=\"plain\"\n size=\"small\"\n inline\n popover-fullwidth=\"horizontal\"\n noSearch={true}\n openOnFocus={false}\n items={[focusedYear.toString()]}\n options={yearDropdownOptions}\n label={this.localization.yearSelectLabel}\n labelHidden={true}\n onStzhChange={this.handleYearSelect}\n ></stzh-dropdown>\n\n {/* alternative for dropdown with popover:\n <stzh-popover>\n <button class=\"stzh-calendar__select-label\" aria-label={this.localization.monthSelectLabel}>\n <span>{this.localization.$globals.monthNamesShort[focusedMonth]}</span>\n <stzh-icon class=\"stzh-calendar__select-icon\" name=\"angle-down\"></stzh-icon>\n </button>\n <stzh-menu slot=\"content\">\n {this.localization.$globals.monthNames.map((month, i) => (\n <stzh-menu-item\n // onClick={this.handleMonthSelect(month)}\n active={i === focusedMonth}\n disabled={\n !inRange(\n new Date(focusedYear, i, 1),\n minDate ? startOfMonth(minDate) : null,\n maxDate ? endOfMonth(maxDate) : null\n )\n }\n >\n {month}\n </stzh-menu-item>\n ))}\n </stzh-menu>\n </stzh-popover>\n */}\n\n {/* original implmentation with native select:\n <label htmlFor={this.monthSelectId} class=\"stzh-calendar__vhidden\">\n {this.localization.monthSelectLabel}\n </label>\n\n <div class=\"stzh-calendar__select-wrapper\">\n <select\n id={this.monthSelectId}\n class=\"stzh-calendar__select stzh-calendar__select--month\"\n onChange={this.handleMonthSelect}\n >\n {this.localization.$globals.monthNames.map((month, i) => (\n <option\n key={month}\n value={i}\n selected={i === focusedMonth}\n disabled={\n !inRange(\n new Date(focusedYear, i, 1),\n minDate ? startOfMonth(minDate) : null,\n maxDate ? endOfMonth(maxDate) : null\n )\n }\n >\n {month}\n </option>\n ))}\n </select>\n <div class=\"stzh-calendar__select-label\" aria-hidden=\"true\">\n <span>{this.localization.$globals.monthNamesShort[focusedMonth]}</span>\n <stzh-icon class=\"stzh-calendar__select-icon\" name=\"angle-down\"></stzh-icon>\n </div>\n </div>\n\n <label htmlFor={this.yearSelectId} class=\"stzh-calendar__vhidden\">\n {this.localization.yearSelectLabel}\n </label>\n\n <div class=\"stzh-calendar__select-wrapper\">\n <select\n id={this.yearSelectId}\n class=\"stzh-calendar__select stzh-calendar__select--year\"\n onChange={this.handleYearSelect}\n >\n {range(minYear, maxYear).map(year => (\n <option key={year} selected={year === focusedYear}>\n {year}\n </option>\n ))}\n </select>\n <div class=\"stzh-calendar__select-label\" aria-hidden=\"true\">\n <span>{this.focusedDay.getFullYear()}</span>\n <stzh-icon class=\"stzh-calendar__select-icon\" name=\"angle-down\"></stzh-icon>\n </div>\n </div>\n */}\n\n </div>\n\n <div class=\"stzh-calendar__nav\">\n <stzh-button\n class=\"stzh-calendar__prev\"\n variant=\"tertiary\"\n size=\"small\"\n icon=\"arrow-left\"\n iconOnly={true}\n onClick={this.handlePreviousMonthClick}\n disabled={prevMonthDisabled}\n type=\"button\"\n a11yLabel={this.localization.prevMonthLabel}\n analyticsId={this.prevMonthAnalyticsId || this.localization.prevMonthLabel}\n ></stzh-button>\n <stzh-button\n class=\"stzh-calendar__next\"\n variant=\"tertiary\"\n size=\"small\"\n icon=\"arrow-right\"\n iconOnly={true}\n onClick={this.handleNextMonthClick}\n disabled={nextMonthDisabled}\n type=\"button\"\n a11yLabel={this.localization.nextMonthLabel}\n analyticsId={this.nextMonthAnalyticsId || this.localization.nextMonthLabel}\n ></stzh-button>\n </div>\n </div>\n\n <StzhCalendarMonth\n dateFormatter={this.dateFormatShort}\n selectedDate={valueAsDate}\n focusedDate={this.focusedDay}\n onDateSelect={this.handleDaySelect}\n onKeyboardNavigation={this.handleKeyboardNavigation}\n labelledById={this.dialogLabelId}\n localization={this.localization}\n firstDayOfWeek={this.firstDayOfWeek}\n focusedDayRef={this.processFocusedDayNode}\n min={minDate}\n max={maxDate}\n isDateDisabled={this.isDateDisabled}\n />\n </div>\n </div>\n </Host>\n )\n }\n}\n"],"mappings":"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"}

package/dist/stzh-components/p-ba37488e.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as s,c as t,h as e,F as r,a,g as h}from"./p-c7bfac7a.js";import{h as c}from"./p-7e304ea3.js";import"./p-9b063923.js";const i='.sc-stzh-card-searchresult-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-card-searchresult-h{display:none}.sc-stzh-card-searchresult-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-card-searchresult-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-card-searchresult-h .sc-stzh-card-searchresult,.sc-stzh-card-searchresult-h .sc-stzh-card-searchresult::before,.sc-stzh-card-searchresult-h *.sc-stzh-card-searchresult::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-card-searchresult-h .has-focus.sc-stzh-card-searchresult{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-card-searchresult-h .stzh-fylingfocus-focused.sc-stzh-card-searchresult{outline-style:none !important}.sc-stzh-card-searchresult-h .stzh-fylingfocus-focused.sc-stzh-card-searchresult::-moz-focus-inner{border:0 !important}.sc-stzh-card-searchresult-h{--tag-right-background-color:var(--stzh-color-secondary30);--tag-right-color:var(--stzh-color-primary70);--grid-template-areas:"heading"\n "description"\n "meta"\n "download";--grid-template-rows:repeat(3, auto);--grid-template-columns:minmax(0, 1fr);display:grid}.sc-stzh-card-searchresult-h .sc-stzh-card-searchresult-s>img{width:100%;max-width:100%}[has-image].sc-stzh-card-searchresult-h{--grid-template-areas:"image"\n "heading"\n "description"\n "meta"\n "download";--grid-template-rows:repeat(4, auto);--grid-template-columns:minmax(0, 1fr)}@media screen and (min-width: 600px){[has-image].sc-stzh-card-searchresult-h{--grid-template-areas:"heading image"\n "description image"\n "meta image"\n "download image";--grid-template-rows:repeat(3, auto);--grid-template-columns:minmax(0, 1fr) minmax(11.25rem, min-content)}}@media screen and (max-width: 599px){[has-image][image-position=right].sc-stzh-card-searchresult-h{--grid-template-areas:"heading image"\n "description description"\n "meta meta"\n "download download";--grid-template-rows:repeat(3, auto);--grid-template-columns:minmax(0, 1fr) minmax(6.25rem, min-content)}}.stzh-card-searchresult.sc-stzh-card-searchresult{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);position:relative;display:grid;background-color:var(--stzh-color-grey10);grid-template-areas:var(--grid-template-areas);grid-template-rows:var(--grid-template-rows);grid-template-columns:var(--grid-template-columns);color:var(--stzh-color-grey80)}.stzh-card-searchresult__tag-left.sc-stzh-card-searchresult,.stzh-card-searchresult__dateline.sc-stzh-card-searchresult,.stzh-card-searchresult__breadcrumb.sc-stzh-card-searchresult,.stzh-card-searchresult__event-infos.sc-stzh-card-searchresult,.stzh-card-searchresult__heading-link-text.sc-stzh-card-searchresult,.stzh-card-searchresult__description.sc-stzh-card-searchresult,.stzh-card-searchresult__meta.sc-stzh-card-searchresult,.stzh-card-searchresult__download.sc-stzh-card-searchresult{z-index:1;position:relative}.stzh-card-searchresult__heading-wrapper.sc-stzh-card-searchresult,.stzh-card-searchresult__description-wrapper.sc-stzh-card-searchresult,.stzh-card-searchresult__meta.sc-stzh-card-searchresult,.stzh-card-searchresult__download.sc-stzh-card-searchresult{margin-left:var(--stzh-space-medium);margin-right:var(--stzh-space-medium);margin-bottom:var(--stzh-space-large)}.stzh-card-searchresult__heading-wrapper.sc-stzh-card-searchresult{grid-area:heading;display:grid;margin-top:var(--stzh-space-xxxlarge)}.stzh-card-searchresult__image.sc-stzh-card-searchresult{display:grid;grid-area:image;width:100%}.stzh-card-searchresult__description-wrapper.sc-stzh-card-searchresult{grid-area:description}.stzh-card-searchresult__meta.sc-stzh-card-searchresult{grid-area:meta;overflow:hidden}.stzh-card-searchresult__download.sc-stzh-card-searchresult{grid-area:download;display:flex;justify-content:space-between;align-items:center;gap:var(--stzh-space-xsmall);overflow:hidden}.stzh-card-searchresult__download-button.sc-stzh-card-searchresult{align-self:flex-end;display:flex;justify-content:center;align-items:center;width:var(--stzh-form-input-small-height);height:var(--stzh-form-input-small-height);color:var(--stzh-color-primary70)}.stzh-card-searchresult__download-heading.sc-stzh-card-searchresult{color:var(--stzh-color-primary70);text-underline-offset:var(--stzh-link-text-underline-offset);-webkit-text-decoration-line:var(--stzh-link-text-decoration-line);text-decoration-line:var(--stzh-link-text-decoration-line);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.stzh-card-searchresult__tag-left.sc-stzh-card-searchresult,.stzh-card-searchresult__tag-right.sc-stzh-card-searchresult,.stzh-card-searchresult__event-date-teaser.sc-stzh-card-searchresult{z-index:2}.stzh-card-searchresult__tag-left.sc-stzh-card-searchresult{position:absolute;left:0;top:0}.stzh-card-searchresult__tag-right.sc-stzh-card-searchresult{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);position:absolute;top:0;right:0;background-color:var(--tag-right-background-color);color:var(--tag-right-color);padding:var(--stzh-space-xsmall) var(--stzh-space-medium);text-align:center}@media screen and (min-width: 600px){.stzh-card-searchresult__tag-right.sc-stzh-card-searchresult{min-width:11.25rem}}.stzh-card-searchresult__dateline.sc-stzh-card-searchresult{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);margin-bottom:var(--stzh-space-small)}.stzh-card-searchresult__heading.sc-stzh-card-searchresult{margin-top:0px;margin-bottom:var(--stzh-space-xsmall)}.stzh-card-searchresult__heading-link.sc-stzh-card-searchresult{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);display:block;color:var(--stzh-color-primary70);-webkit-text-decoration-line:none;text-decoration-line:none}.stzh-card-searchresult__event-infos.sc-stzh-card-searchresult{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);color:var(--stzh-color-black)}.stzh-card-searchresult.sc-stzh-card-searchresult:has(.stzh-card-searchresult__description:not(:empty)) .stzh-card-searchresult__event-infos.sc-stzh-card-searchresult{margin-bottom:var(--stzh-space-small)}.stzh-card-searchresult__description.sc-stzh-card-searchresult:empty{display:none}.stzh-card-searchresult__breadcrumb.sc-stzh-card-searchresult{margin-bottom:var(--stzh-space-small)}.stzh-card-searchresult__event-date-teaser.sc-stzh-card-searchresult{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);text-transform:uppercase;display:flex;flex-direction:column;justify-content:center;align-items:center;width:5rem;height:5rem;color:var(--stzh-color-black);background-color:var(--stzh-color-secondary30);position:absolute;top:0;right:0}.stzh-card-searchresult__event-date-teaser-day.sc-stzh-card-searchresult{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-hecto-font-size);line-height:var(--stzh-font-hecto-text-line-height);letter-spacing:var(--stzh-font-hecto-text-letter-spacing);color:var(--stzh-color-primary70);margin-top:-0.4375rem;margin-bottom:-0.4375rem}.stzh-card-searchresult__meta-list.sc-stzh-card-searchresult,.stzh-card-searchresult__download-meta-list.sc-stzh-card-searchresult{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);display:flex;align-items:center;flex-wrap:wrap;-moz-column-gap:var(--stzh-space-xsmall);column-gap:var(--stzh-space-xsmall);margin-left:calc((var(--stzh-space-xsmall) + 0.0625rem) / -1)}.stzh-card-searchresult__meta-list-item.sc-stzh-card-searchresult,.stzh-card-searchresult__download-meta-list-item.sc-stzh-card-searchresult{display:flex;align-items:center;min-height:1.5rem;gap:var(--stzh-space-xsmall);white-space:nowrap}.stzh-card-searchresult__meta-list-item.sc-stzh-card-searchresult::before,.stzh-card-searchresult__download-meta-list-item.sc-stzh-card-searchresult::before{content:"";display:block;width:0.0625rem;height:1rem;background-color:currentColor}.stzh-card-searchresult--has-link.sc-stzh-card-searchresult .stzh-card-searchresult__heading-link.sc-stzh-card-searchresult{border-radius:var(--stzh-button-border-radius);cursor:pointer}.stzh-card-searchresult--has-link.sc-stzh-card-searchresult .stzh-card-searchresult__heading-link.sc-stzh-card-searchresult::before,.stzh-card-searchresult--has-link.sc-stzh-card-searchresult .stzh-card-searchresult__heading-link.sc-stzh-card-searchresult::after{content:"";display:block;position:absolute;top:0;left:0;width:100%;height:100%;transition:background-color var(--stzh-base-transition-animation-speed)}.stzh-card-searchresult--has-link.sc-stzh-card-searchresult .stzh-card-searchresult__heading-link.sc-stzh-card-searchresult::after{z-index:10}.stzh-card-searchresult--has-link.sc-stzh-card-searchresult:has(.stzh-card-searchresult__heading-link:hover) .stzh-card-searchresult__heading-link.sc-stzh-card-searchresult::before{background-color:var(--stzh-color-secondary10)}.stzh-card-searchresult--has-link.sc-stzh-card-searchresult:has(.stzh-card-searchresult__heading-link:hover) .stzh-card-searchresult__tag-left.sc-stzh-card-searchresult{--color:var(--stzh-color-secondary60)}.stzh-card-searchresult--has-tag-right.sc-stzh-card-searchresult .stzh-card-searchresult__heading-wrapper.sc-stzh-card-searchresult{margin-top:var(--stzh-space-big)}.stzh-card-searchresult--has-breadcrumb.sc-stzh-card-searchresult .stzh-card-searchresult__heading-wrapper.sc-stzh-card-searchresult{margin-top:var(--stzh-space-xlarge)}.stzh-card-searchresult--has-image.sc-stzh-card-searchresult .stzh-card-searchresult__image.sc-stzh-card-searchresult{z-index:1;position:relative}@media screen and (max-width: 599px){.stzh-card-searchresult--has-image-default.sc-stzh-card-searchresult .stzh-card-searchresult__heading-wrapper.sc-stzh-card-searchresult{margin-top:var(--stzh-space-small)}}@media screen and (max-width: 599px){.stzh-card-searchresult--has-image-right.sc-stzh-card-searchresult .stzh-card-searchresult__image.sc-stzh-card-searchresult{margin-bottom:var(--stzh-space-xsmall)}}.stzh-card-searchresult--has-image-right.sc-stzh-card-searchresult .stzh-card-searchresult__tag-right.sc-stzh-card-searchresult{position:static}.stzh-card-searchresult--has-description-wrapper.sc-stzh-card-searchresult .stzh-card-searchresult__heading-wrapper.sc-stzh-card-searchresult,.stzh-card-searchresult--has-meta.sc-stzh-card-searchresult .stzh-card-searchresult__heading-wrapper.sc-stzh-card-searchresult,.stzh-card-searchresult--has-download.sc-stzh-card-searchresult .stzh-card-searchresult__heading-wrapper.sc-stzh-card-searchresult{margin-bottom:0px}.stzh-card-searchresult--has-meta.sc-stzh-card-searchresult .stzh-card-searchresult__description-wrapper.sc-stzh-card-searchresult,.stzh-card-searchresult--has-download.sc-stzh-card-searchresult .stzh-card-searchresult__description-wrapper.sc-stzh-card-searchresult{margin-bottom:0px}.stzh-card-searchresult--has-meta.sc-stzh-card-searchresult .stzh-card-searchresult__description.sc-stzh-card-searchresult:not(:empty),.stzh-card-searchresult--has-download.sc-stzh-card-searchresult .stzh-card-searchresult__description.sc-stzh-card-searchresult:not(:empty){margin-bottom:var(--stzh-space-small)}.stzh-card-searchresult--has-download.sc-stzh-card-searchresult .stzh-card-searchresult__meta.sc-stzh-card-searchresult{margin-bottom:var(--stzh-space-xsmall)}';const l=class{constructor(e){s(this,e);this.stzhClick=t(this,"stzhClick",7);this.handleCardClick=s=>{this.stzhClick.emit({component:"stzh-card-searchresult",originalEvent:s})};this.localization=undefined;this.href=undefined;this.target=undefined;this.download=undefined;this.analyticsId=undefined;this.heading="";this.headingLevel="3";this.description="";this.tagLeft=undefined;this.tagRight=undefined;this.dateline=undefined;this.meta=undefined;this.breadcrumbItems=undefined;this.eventDateStart=undefined;this.eventDateEnd=undefined;this.eventLocation=undefined;this.imagePosition="default";this.downloadHeading=undefined;this.downloadMeta=undefined;this.dateAdapter=undefined}metaWatcher(s){if(!s){this._meta=[]}else if(typeof s==="string"){try{this._meta=JSON.parse(s)}catch(s){this._meta=[]}}else{this._meta=s}}breadcrumbItemsWatcher(s){if(!s){this._breadcrumbItems=[]}else if(typeof s==="string"){try{this._breadcrumbItems=JSON.parse(s)}catch(s){this._breadcrumbItems=[]}}else{this._breadcrumbItems=s}}downloadMetaWatcher(s){if(!s){this._downloadMeta=[]}else if(typeof s==="string"){try{this._downloadMeta=JSON.parse(s)}catch(s){this._downloadMeta=[]}}else{this._downloadMeta=s}}componentDidRender(){requestAnimationFrame((()=>{var s,t;const e=this.analyticsId\|\|((s=this.headingTextElement)===null\|\|s===void 0?void 0:s.innerText);if(e){(t=this.headingLinkElement)===null\|\|t===void 0?void 0:t.setAttribute("s-object-id",e)}}))}async componentWillLoad(){this.metaWatcher(this.meta);this.breadcrumbItemsWatcher(this.breadcrumbItems);this.downloadMetaWatcher(this.downloadMeta);if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"card-searchresult")}if(!this.dateAdapter){this.dateAdapter=window.stzhComponents.utils.createFormatParseAdapter(this.localization.$formats,this.localization.$globals)}}render(){const s=!!this.heading\|\|c(this.element,"heading");const t=!!this.description\|\|c(this.element,"description");const h=c(this.element,"image");const i=this.eventDateStart&&new Date(this.eventDateStart);const l=this.eventDateEnd&&new Date(this.eventDateEnd);const d={"stzh-card-searchresult":true,"stzh-card-searchresult--has-heading":s,"stzh-card-searchresult--has-description":t,"stzh-card-searchresult--has-description-wrapper":t\|\|!!i\|\|!!this.eventLocation,"stzh-card-searchresult--has-link":!!this.href,"stzh-card-searchresult--has-tag-right":!!this.tagRight,"stzh-card-searchresult--has-image":h,"stzh-card-searchresult--has-image-default":h&&this.imagePosition==="default","stzh-card-searchresult--has-image-right":h&&this.imagePosition==="right","stzh-card-searchresult--has-meta":this._meta.length>0,"stzh-card-searchresult--has-download":!!this.downloadHeading\|\|this._downloadMeta.length>0,"stzh-card-searchresult--has-breadcrumb":this._breadcrumbItems.length>0};const n=`h${this.headingLevel}`;const o=this.href?"a":"div";return e(a,{"has-image":h},e("article",{class:d,"aria-label":this.heading,role:"listitem"},this.tagLeft&&e("stzh-tag",{class:"stzh-card-searchresult__tag-left",label:this.tagLeft,nonInteractive:true}),e("div",{class:"stzh-card-searchresult__heading-wrapper"},this._breadcrumbItems.length>0&&e("stzh-breadcrumb",{class:"stzh-card-searchresult__breadcrumb",items:this._breadcrumbItems,variant:"teaser"}),this.dateline&&e("div",{class:"stzh-card-searchresult__dateline"},this.dateline),e(n,{class:"stzh-card-searchresult__heading"},e(o,{ref:s=>this.headingLinkElement=s,class:"stzh-card-searchresult__heading-link",href:this.href,target:this.target,download:this.download,onClick:this.handleCardClick},e("div",{class:"stzh-card-searchresult__heading-link-text",ref:s=>this.headingTextElement=s},this.heading?this.heading:e("slot",{name:"heading"}))))),e("div",{class:"stzh-card-searchresult__description-wrapper"},(i\|\|this.eventLocation)&&e("div",{class:"stzh-card-searchresult__event-infos"},i&&e("div",{class:"stzh-card-searchresult__event-date"},e("span",null,this.dateAdapter.format(i,"dateLong"),", "),this.dateAdapter.formatSpan(i,l,"time")),this.eventLocation&&e("div",{class:"stzh-card-searchresult__event-location"},this.eventLocation)),e("div",{class:"stzh-card-searchresult__description"},this.description?this.description:e("slot",{name:"description"}))),e("div",{class:"stzh-card-searchresult__image"},i&&e("div",{class:"stzh-card-searchresult__event-date-teaser"},e("div",{class:"stzh-card-searchresult__event-date-teaser-day-name"},this.localization.$globals.dayNamesShort[i.getDay()]),e("div",{class:"stzh-card-searchresult__event-date-teaser-day"},i.getDate()<10&&"0",i.getDate()),e("div",{class:"stzh-card-searchresult__event-date-teaser-month"},this.localization.$globals.monthNamesShort[i.getMonth()])),this.tagRight&&e("div",{class:"stzh-card-searchresult__tag-right"},this.tagRight),e("slot",{name:"image"})),this._meta.length>0&&e("div",{class:"stzh-card-searchresult__meta"},e("div",{class:"stzh-card-searchresult__meta-list"},this._meta.map((s=>e(r,null,e("div",{class:"stzh-card-searchresult__meta-list-item"},s)))))),(!!this.downloadHeading\|\|this._downloadMeta.length>0)&&e("div",{class:"stzh-card-searchresult__download"},e("div",{class:"stzh-card-searchresult__download-data"},this.downloadHeading&&e("div",{class:"stzh-card-searchresult__download-heading"},this.downloadHeading),this._downloadMeta.length>0&&e("div",{class:"stzh-card-searchresult__download-meta-list"},this._downloadMeta.map((s=>e(r,null,e("div",{class:"stzh-card-searchresult__download-meta-list-item"},s)))))),e("div",{class:"stzh-card-searchresult__download-button"},e("stzh-icon",{class:"stzh-card-searchresult__download-icon",name:"download"})))))}get element(){return h(this)}static get watchers(){return{meta:["metaWatcher"],breadcrumbItems:["breadcrumbItemsWatcher"],downloadMeta:["downloadMetaWatcher"]}}};l.style=i;export{l as stzh_card_searchresult};
2	- //# sourceMappingURL=p-ba37488e.entry.js.map

package/dist/stzh-components/p-ba37488e.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["stzhCardSearchresultCss","StzhCardSearchresult","this","handleCardClick","originalEvent","stzhClick","emit","component","metaWatcher","newValue","_meta","JSON","parse","e","breadcrumbItemsWatcher","_breadcrumbItems","downloadMetaWatcher","_downloadMeta","componentDidRender","requestAnimationFrame","objectId","analyticsId","_a","headingTextElement","innerText","_b","headingLinkElement","setAttribute","componentWillLoad","meta","breadcrumbItems","downloadMeta","localization","window","stzhComponents","utils","fetchTranslations","element","dateAdapter","createFormatParseAdapter","$formats","$globals","render","hasHeading","heading","hasSlot","hasDescription","description","hasImage","eventDateStart","Date","eventDateEnd","classes","eventLocation","href","tagRight","imagePosition","length","downloadHeading","Heading","headingLevel","HeadingLink","h","Host","class","role","tagLeft","label","nonInteractive","items","variant","dateline","ref","el","target","download","onClick","name","format","formatSpan","dayNamesShort","getDay","getDate","monthNamesShort","getMonth","map","Fragment"],"sources":["src/components/stzh-card-searchresult/stzh-card-searchresult.scss?tag=stzh-card-searchresult&encapsulation=scoped","src/components/stzh-card-searchresult/stzh-card-searchresult.tsx"],"sourcesContent":[":host {\n --tag-right-background-color: #{$colorSecondary30};\n --tag-right-color: #{$colorPrimary70};\n\n --grid-template-areas:\n \"heading\"\n \"description\"\n \"meta\"\n \"download\";\n --grid-template-rows: repeat(3, auto);\n --grid-template-columns: minmax(0, 1fr);\n\n display: grid;\n\n ::slotted(img) {\n width: 100%;\n max-width: 100%;\n }\n\n &[has-image] {\n --grid-template-areas:\n \"image\"\n \"heading\"\n \"description\"\n \"meta\"\n \"download\";\n --grid-template-rows: repeat(4, auto);\n --grid-template-columns: minmax(0, 1fr);\n\n @include mq($from: small) {\n --grid-template-areas:\n \"heading image\"\n \"description image\"\n \"meta image\"\n \"download image\";\n --grid-template-rows: repeat(3, auto);\n --grid-template-columns: minmax(0, 1fr) minmax(180px, min-content);\n }\n }\n\n &[has-image][image-position=\"right\"] {\n @include mq($to: small) {\n --grid-template-areas:\n \"heading image\"\n \"description description\"\n \"meta meta\"\n \"download download\";\n --grid-template-rows: repeat(3, auto);\n --grid-template-columns: minmax(0, 1fr) minmax(100px, min-content);\n }\n }\n}\n\n.stzh-card-searchresult {\n @include fontSize('milli');\n position: relative;\n display: grid;\n background-color: $colorGrey10;\n grid-template-areas: var(--grid-template-areas);\n grid-template-rows: var(--grid-template-rows);\n grid-template-columns: var(--grid-template-columns);\n color: $colorGrey80;\n\n &__tag-left,\n &__dateline,\n &__breadcrumb,\n &__event-infos,\n &__heading-link-text,\n &__description,\n &__meta,\n &__download {\n z-index: 1;\n position: relative;\n }\n\n &__heading-wrapper,\n &__description-wrapper,\n &__meta,\n &__download {\n margin-left: space('medium');\n margin-right: space('medium');\n margin-bottom: space('large');\n }\n\n &__heading-wrapper {\n grid-area: heading;\n display: grid;\n margin-top: space('xxxlarge');\n }\n\n &__image {\n display: grid;\n grid-area: image;\n width: 100%;\n }\n\n &__description-wrapper {\n grid-area: description;\n }\n\n &__meta {\n grid-area: meta;\n overflow: hidden;\n }\n\n &__download {\n grid-area: download;\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: space('xsmall');\n overflow: hidden;\n }\n\n &__download-button {\n align-self: flex-end;\n display: flex;\n justify-content: center;\n align-items: center;\n width: $formInputHeightSmall;\n height: $formInputHeightSmall;\n color: $colorPrimary70;\n }\n\n &__download-heading {\n color: $colorPrimary70;\n text-underline-offset: $linkTextUnderlineOffset;\n text-decoration-line: $linkTextDecorationLine;\n text-decoration-thickness: $linkTextDecorationThickness;\n text-decoration-skip-ink: $linkTextDecorationSkipInk;\n }\n\n &__tag-left,\n &__tag-right,\n &__event-date-teaser {\n z-index: 2;\n }\n\n &__tag-left {\n position: absolute;\n left: 0;\n top: 0;\n }\n\n &__tag-right {\n @include font('heavy');\n @include fontSize('micro');\n position: absolute;\n top: 0;\n right: 0;\n background-color: var(--tag-right-background-color);\n color: var(--tag-right-color);\n padding: space('xsmall') space('medium');\n text-align: center;\n\n @include mq($from: small) {\n min-width: 180px;\n }\n }\n\n &__dateline {\n @include fontSize('micro');\n margin-bottom: space('small');\n }\n\n &__heading {\n margin-top: 0px;\n margin-bottom: space('xsmall');\n }\n\n &__heading-link {\n @include font('heavy');\n @include fontSize('milli');\n display: block;\n color: $colorPrimary70;\n text-decoration-line: none;\n }\n\n &__event-infos {\n @include fontSize('micro');\n color: $colorBlack;\n }\n\n &:has(#{&}__description:not(:empty)) &__event-infos {\n margin-bottom: space('small');\n }\n\n &__description {\n &:empty {\n display: none;\n }\n }\n\n &__breadcrumb {\n margin-bottom: space('small');\n }\n\n &__event-date-teaser {\n @include fontSize('nano');\n text-transform: uppercase;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: 80px;\n height: 80px;\n color: $colorBlack;\n background-color: $colorSecondary30;\n position: absolute;\n top: 0;\n right: 0;\n }\n\n &__event-date-teaser-day {\n @include font('heavy');\n @include fontSize('hecto');\n color: $colorPrimary70;\n margin-top: -7px;\n margin-bottom: -7px;\n }\n\n &__meta-list,\n &__download-meta-list {\n @include fontSize('micro');\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n column-gap: space('xsmall');\n margin-left: calc((#{space('xsmall')} + 1px) / -1);\n }\n\n &__meta-list-item,\n &__download-meta-list-item {\n display: flex;\n align-items: center;\n min-height: 24px;\n gap: space('xsmall');\n white-space: nowrap;\n\n &::before {\n content: '';\n display: block;\n width: 1px;\n height: 16px;\n background-color: currentColor;\n }\n }\n\n /* Has link */\n\n &--has-link &__heading-link {\n border-radius: $buttonBorderRadius;\n cursor: pointer;\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 transition: background-color $baseTransitionAnimationSpeed;\n }\n\n &::after {\n z-index: 10;\n }\n }\n\n &--has-link:has(#{&}__heading-link:hover) &__heading-link {\n &::before {\n background-color: $colorSecondary10;\n }\n }\n\n &--has-link:has(#{&}__heading-link:hover) &__tag-left {\n --color: #{$colorSecondary60};\n }\n\n /* Has tag right */\n\n &--has-tag-right &__heading-wrapper {\n margin-top: space('big');\n }\n\n /* Has breadcrumb */\n\n &--has-breadcrumb &__heading-wrapper {\n margin-top: space('xlarge');\n }\n\n /* Has image (default) */\n\n &--has-image &__image {\n z-index: 1;\n position: relative;\n }\n\n &--has-image-default &__heading-wrapper {\n @include mq($to: small) {\n margin-top: space('small');\n }\n }\n\n /* Has image right */\n\n &--has-image-right &__image {\n @include mq($to: small) {\n margin-bottom: space('xsmall');\n }\n }\n\n &--has-image-right &__tag-right {\n position: static;\n }\n\n /* Has description wrapper, meta or download */\n\n &--has-description-wrapper &__heading-wrapper,\n &--has-meta &__heading-wrapper,\n &--has-download &__heading-wrapper {\n margin-bottom: 0px;\n }\n\n &--has-meta &__description-wrapper,\n &--has-download &__description-wrapper {\n margin-bottom: 0px;\n }\n\n &--has-meta &__description,\n &--has-download &__description {\n &:not(:empty) {\n margin-bottom: space('small');\n }\n }\n\n &--has-download &__meta {\n margin-bottom: space('xsmall');\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Event,\n EventEmitter,\n Watch,\n Fragment\n} from \"@stencil/core\";\n\nimport {\n StzhCardSearchresultClickEvent,\n StzhBreadcrumbItem,\n StzhLocaleAdapter\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\n\nimport { StzhCardSearchresultLocalizedText } from './stzh-card-searchresult.localization';\n\n/**\n * @slot heading - Heading text (alternative for heading property)\n * @slot description - Description text (alternative for description property)\n * @slot image - Image\n */\n@Component({\n tag: \"stzh-card-searchresult\",\n styleUrl: \"stzh-card-searchresult.scss\",\n scoped: true\n})\nexport class StzhCardSearchresult {\n /** Translation strings */\n @Prop() localization: StzhCardSearchresultLocalizedText;\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 /** Download attribute (if href is used) */\n @Prop() download: string;\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 /** Heading (alternative for heading slot) */\n @Prop() heading: string = \"\";\n\n /** Heading level */\n @Prop() headingLevel: \"1\" | \"2\" | \"3\" | \"4\" = \"3\";\n\n /** Description text (alternative for description slot) */\n @Prop() description: string = \"\";\n\n /** Tag left */\n @Prop() tagLeft: string;\n\n /** Tag right */\n @Prop() tagRight: string;\n\n /** Dateline */\n @Prop() dateline: string;\n\n /** Meta */\n @Prop() meta: string[] | string;\n private _meta: string[];\n\n /** Breadcrumb items */\n @Prop() breadcrumbItems: StzhBreadcrumbItem[] | string;\n private _breadcrumbItems: StzhBreadcrumbItem[];\n\n /** Event start date */\n @Prop() eventDateStart: Date | string;\n\n /** Event start date */\n @Prop() eventDateEnd: Date | string;\n\n /** Event location */\n @Prop() eventLocation: string;\n\n /** Image position */\n @Prop({ reflect: true }) imagePosition: \"default\" | \"right\" = \"default\";\n\n /** Download heading */\n @Prop() downloadHeading: string;\n\n /** Download meta */\n @Prop() downloadMeta: string[] | string;\n private _downloadMeta: string[];\n\n /**\n * Date adapter, for custom parsing/formatting.\n * Must be object with a `parse` function which accepts a `string` and returns a `Date`,\n * and a `format` function which accepts a `Date` and returns a `string`.\n */\n @Prop() dateAdapter: StzhLocaleAdapter;\n\n @Element() element: HTMLStzhListElement;\n\n /** Click event (if href is used) */\n @Event() stzhClick: EventEmitter<StzhCardSearchresultClickEvent>;\n\n @Watch(\"meta\")\n metaWatcher(newValue: string | string[]) {\n if (!newValue) {\n this._meta = [];\n } else if (typeof newValue === \"string\") {\n try {\n this._meta = JSON.parse(newValue);\n } catch (e) {\n this._meta = [];\n }\n } else {\n this._meta = newValue;\n }\n }\n\n @Watch(\"breadcrumbItems\")\n breadcrumbItemsWatcher(newValue: string | StzhBreadcrumbItem[]) {\n if (!newValue) {\n this._breadcrumbItems = [];\n } else if (typeof newValue === \"string\") {\n try {\n this._breadcrumbItems = JSON.parse(newValue);\n } catch (e) {\n this._breadcrumbItems = [];\n }\n } else {\n this._breadcrumbItems = newValue;\n }\n }\n\n @Watch(\"downloadMeta\")\n downloadMetaWatcher(newValue: string | string[]) {\n if (!newValue) {\n this._downloadMeta = [];\n } else if (typeof newValue === \"string\") {\n try {\n this._downloadMeta = JSON.parse(newValue);\n } catch (e) {\n this._downloadMeta = [];\n }\n } else {\n this._downloadMeta = newValue;\n }\n }\n\n private headingLinkElement: HTMLAnchorElement | HTMLDivElement;\n private headingTextElement: HTMLDivElement;\n\n private handleCardClick = (originalEvent: MouseEvent) => {\n this.stzhClick.emit({\n component: \"stzh-card-searchresult\",\n originalEvent\n });\n }\n\n componentDidRender() {\n requestAnimationFrame(() => {\n const objectId = this.analyticsId || this.headingTextElement?.innerText;\n\n if (objectId) {\n this.headingLinkElement?.setAttribute(\"s-object-id\", objectId);\n }\n });\n }\n\n async componentWillLoad() {\n this.metaWatcher(this.meta);\n this.breadcrumbItemsWatcher(this.breadcrumbItems);\n this.downloadMetaWatcher(this.downloadMeta);\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"card-searchresult\");\n }\n\n if (!this.dateAdapter) {\n this.dateAdapter = window.stzhComponents.utils.createFormatParseAdapter(\n this.localization.$formats,\n this.localization.$globals\n );\n }\n }\n\n render() {\n const hasHeading = !!this.heading || hasSlot(this.element, 'heading');\n const hasDescription = !!this.description || hasSlot(this.element, 'description');\n const hasImage = hasSlot(this.element, 'image');\n\n const eventDateStart = this.eventDateStart && new Date(this.eventDateStart);\n const eventDateEnd = this.eventDateEnd && new Date(this.eventDateEnd);\n\n const classes = {\n \"stzh-card-searchresult\": true,\n \"stzh-card-searchresult--has-heading\": hasHeading,\n \"stzh-card-searchresult--has-description\": hasDescription,\n \"stzh-card-searchresult--has-description-wrapper\": hasDescription || !!eventDateStart || !!this.eventLocation,\n \"stzh-card-searchresult--has-link\": !!this.href,\n \"stzh-card-searchresult--has-tag-right\": !!this.tagRight,\n \"stzh-card-searchresult--has-image\": hasImage,\n \"stzh-card-searchresult--has-image-default\": hasImage && this.imagePosition === \"default\",\n \"stzh-card-searchresult--has-image-right\": hasImage && this.imagePosition === \"right\",\n \"stzh-card-searchresult--has-meta\": this._meta.length > 0,\n \"stzh-card-searchresult--has-download\": !!this.downloadHeading || this._downloadMeta.length > 0,\n \"stzh-card-searchresult--has-breadcrumb\": this._breadcrumbItems.length > 0,\n };\n\n const Heading = `h${this.headingLevel}`;\n const HeadingLink = this.href ? \"a\" : \"div\";\n\n return (\n <Host has-image={hasImage}>\n <article class={classes} aria-label={this.heading} role=\"listitem\">\n {this.tagLeft &&\n <stzh-tag\n class=\"stzh-card-searchresult__tag-left\"\n label={this.tagLeft}\n nonInteractive={true}\n ></stzh-tag>\n }\n\n <div class=\"stzh-card-searchresult__heading-wrapper\">\n {this._breadcrumbItems.length > 0 &&\n <stzh-breadcrumb\n class=\"stzh-card-searchresult__breadcrumb\"\n items={this._breadcrumbItems}\n variant=\"teaser\"\n ></stzh-breadcrumb>\n }\n\n {this.dateline &&\n <div class=\"stzh-card-searchresult__dateline\">{this.dateline}</div>\n }\n\n <Heading class=\"stzh-card-searchresult__heading\">\n <HeadingLink\n ref={(el) => (this.headingLinkElement = el as HTMLAnchorElement | HTMLDivElement)}\n class=\"stzh-card-searchresult__heading-link\"\n href={this.href}\n target={this.target}\n download={this.download}\n onClick={this.handleCardClick}\n >\n <div\n class=\"stzh-card-searchresult__heading-link-text\"\n ref={(el) => (this.headingTextElement = el as HTMLDivElement)}\n >\n {this.heading ? this.heading : <slot name=\"heading\"></slot>}\n </div>\n </HeadingLink>\n </Heading>\n </div>\n\n <div class=\"stzh-card-searchresult__description-wrapper\">\n {(eventDateStart || this.eventLocation) &&\n <div class=\"stzh-card-searchresult__event-infos\">\n {eventDateStart &&\n <div class=\"stzh-card-searchresult__event-date\">\n <span>{this.dateAdapter.format(eventDateStart, \"dateLong\")}, </span>\n {this.dateAdapter.formatSpan(eventDateStart, eventDateEnd, \"time\")}\n </div>\n }\n {this.eventLocation &&\n <div class=\"stzh-card-searchresult__event-location\">\n {this.eventLocation}\n </div>\n }\n </div>\n }\n\n <div class=\"stzh-card-searchresult__description\">\n {this.description ? this.description : <slot name=\"description\"></slot>}\n </div>\n </div>\n\n <div class=\"stzh-card-searchresult__image\">\n {eventDateStart &&\n <div class=\"stzh-card-searchresult__event-date-teaser\">\n <div class=\"stzh-card-searchresult__event-date-teaser-day-name\">\n {this.localization.$globals.dayNamesShort[eventDateStart.getDay()]}\n </div>\n <div class=\"stzh-card-searchresult__event-date-teaser-day\">\n {eventDateStart.getDate() < 10 && '0'}{eventDateStart.getDate()}\n </div>\n <div class=\"stzh-card-searchresult__event-date-teaser-month\">\n {this.localization.$globals.monthNamesShort[eventDateStart.getMonth()]}\n </div>\n </div>\n }\n {this.tagRight && <div class=\"stzh-card-searchresult__tag-right\">{this.tagRight}</div>}\n <slot name=\"image\"></slot>\n </div>\n\n {this._meta.length > 0 &&\n <div class=\"stzh-card-searchresult__meta\">\n <div class=\"stzh-card-searchresult__meta-list\">\n {this._meta.map((meta) =>\n <Fragment>\n <div class=\"stzh-card-searchresult__meta-list-item\">{meta}</div>\n </Fragment>\n )}\n </div>\n </div>\n }\n\n {(!!this.downloadHeading || this._downloadMeta.length > 0) &&\n <div class=\"stzh-card-searchresult__download\">\n <div class=\"stzh-card-searchresult__download-data\">\n {this.downloadHeading &&\n <div class=\"stzh-card-searchresult__download-heading\">\n {this.downloadHeading}\n </div>\n }\n {this._downloadMeta.length > 0 &&\n <div class=\"stzh-card-searchresult__download-meta-list\">\n {this._downloadMeta.map((meta) =>\n <Fragment>\n <div class=\"stzh-card-searchresult__download-meta-list-item\">{meta}</div>\n </Fragment>\n )}\n </div>\n }\n </div>\n\n <div class=\"stzh-card-searchresult__download-button\">\n <stzh-icon class=\"stzh-card-searchresult__download-icon\" name=\"download\"></stzh-icon>\n </div>\n </div>\n }\n </article>\n </Host>\n );\n }\n}\n"],"mappings":"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"}

package/dist/stzh-components/p-cf96dafb.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as s,h as t,a as e}from"./p-c7bfac7a.js";const h=".sc-stzh-fieldset-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-fieldset-h{display:none}.sc-stzh-fieldset-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-fieldset-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-fieldset-h .sc-stzh-fieldset,.sc-stzh-fieldset-h .sc-stzh-fieldset::before,.sc-stzh-fieldset-h *.sc-stzh-fieldset::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-fieldset-h .has-focus.sc-stzh-fieldset{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-fieldset-h .stzh-fylingfocus-focused.sc-stzh-fieldset{outline-style:none !important}.sc-stzh-fieldset-h .stzh-fylingfocus-focused.sc-stzh-fieldset::-moz-focus-inner{border:0 !important}.sc-stzh-fieldset-h .sc-stzh-fieldset-s>.stzh-fieldset-row>.stzh-fieldset-row,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>.stzh-fieldset-row,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>.stzh-fieldset-row>stzh-input,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>stzh-input,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>.stzh-fieldset-row>stzh-datepicker,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>stzh-datepicker,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>.stzh-fieldset-row>stzh-dropdown,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>stzh-dropdown,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>.stzh-fieldset-row>stzh-fieldset,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>stzh-fieldset,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>.stzh-fieldset-row>stzh-upload,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>stzh-upload,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>.stzh-fieldset-row>stzh-checkbox,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>stzh-checkbox,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>.stzh-fieldset-row>stzh-checkboxgroup,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>stzh-checkboxgroup,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>.stzh-fieldset-row>stzh-radio,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>stzh-radio,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>.stzh-fieldset-row>stzh-radiogroup,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>stzh-radiogroup,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>.stzh-fieldset-row>stzh-row,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>stzh-row,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>.stzh-fieldset-row>stzh-vspace,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>stzh-vspace,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>.stzh-fieldset-row>stzh-hspace,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>stzh-hspace,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>.stzh-fieldset-row>stzh-text,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>stzh-text{margin-bottom:var(--stzh-space-xsmall)}@media screen and (min-width: 900px){.sc-stzh-fieldset-h .sc-stzh-fieldset-s>.stzh-fieldset-row>.stzh-fieldset-row,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>.stzh-fieldset-row,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>.stzh-fieldset-row>stzh-input,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>stzh-input,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>.stzh-fieldset-row>stzh-datepicker,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>stzh-datepicker,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>.stzh-fieldset-row>stzh-dropdown,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>stzh-dropdown,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>.stzh-fieldset-row>stzh-fieldset,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>stzh-fieldset,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>.stzh-fieldset-row>stzh-upload,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>stzh-upload,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>.stzh-fieldset-row>stzh-checkbox,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>stzh-checkbox,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>.stzh-fieldset-row>stzh-checkboxgroup,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>stzh-checkboxgroup,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>.stzh-fieldset-row>stzh-radio,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>stzh-radio,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>.stzh-fieldset-row>stzh-radiogroup,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>stzh-radiogroup,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>.stzh-fieldset-row>stzh-row,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>stzh-row,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>.stzh-fieldset-row>stzh-vspace,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>stzh-vspace,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>.stzh-fieldset-row>stzh-hspace,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>stzh-hspace,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>.stzh-fieldset-row>stzh-text,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>stzh-text{margin-bottom:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.sc-stzh-fieldset-h .sc-stzh-fieldset-s>.stzh-fieldset-row>.stzh-fieldset-row,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>.stzh-fieldset-row,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>.stzh-fieldset-row>stzh-input,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>stzh-input,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>.stzh-fieldset-row>stzh-datepicker,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>stzh-datepicker,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>.stzh-fieldset-row>stzh-dropdown,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>stzh-dropdown,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>.stzh-fieldset-row>stzh-fieldset,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>stzh-fieldset,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>.stzh-fieldset-row>stzh-upload,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>stzh-upload,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>.stzh-fieldset-row>stzh-checkbox,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>stzh-checkbox,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>.stzh-fieldset-row>stzh-checkboxgroup,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>stzh-checkboxgroup,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>.stzh-fieldset-row>stzh-radio,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>stzh-radio,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>.stzh-fieldset-row>stzh-radiogroup,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>stzh-radiogroup,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>.stzh-fieldset-row>stzh-row,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>stzh-row,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>.stzh-fieldset-row>stzh-vspace,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>stzh-vspace,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>.stzh-fieldset-row>stzh-hspace,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>stzh-hspace,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>.stzh-fieldset-row>stzh-text,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>stzh-text{margin-bottom:var(--stzh-space-medium)}}.sc-stzh-fieldset-h .sc-stzh-fieldset-s>.stzh-fieldset-row>stzh-message,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>stzh-message{margin-bottom:var(--stzh-space-xxlarge)}@media screen and (min-width: 900px){.sc-stzh-fieldset-h .sc-stzh-fieldset-s>.stzh-fieldset-row>stzh-message,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>stzh-message{margin-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-fieldset-h .sc-stzh-fieldset-s>.stzh-fieldset-row>stzh-message,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>stzh-message{margin-bottom:var(--stzh-space-xxxxlarge)}}.sc-stzh-fieldset-h .sc-stzh-fieldset-s>.stzh-fieldset-row>stzh-actions,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>stzh-actions{margin-top:var(--stzh-space-xlarge);margin-bottom:var(--stzh-space-xxlarge)}@media screen and (min-width: 900px){.sc-stzh-fieldset-h .sc-stzh-fieldset-s>.stzh-fieldset-row>stzh-actions,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>stzh-actions{margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-fieldset-h .sc-stzh-fieldset-s>.stzh-fieldset-row>stzh-actions,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>stzh-actions{margin-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 600px){.sc-stzh-fieldset-h .sc-stzh-fieldset-s>.stzh-fieldset-row>stzh-actions,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>stzh-actions{margin-bottom:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 900px){.sc-stzh-fieldset-h .sc-stzh-fieldset-s>.stzh-fieldset-row>stzh-actions,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>stzh-actions{margin-bottom:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-fieldset-h .sc-stzh-fieldset-s>.stzh-fieldset-row>stzh-actions,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>stzh-actions{margin-bottom:var(--stzh-space-xbig)}}.sc-stzh-fieldset-h .sc-stzh-fieldset-s stzh-checkbox,.sc-stzh-fieldset-h .sc-stzh-fieldset-s stzh-radio{--stzh-description-min-height:none}.sc-stzh-fieldset-h .sc-stzh-fieldset-s>.stzh-fieldset-row>:last-child,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>:last-child,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>.stzh-fieldset-row:has(cq)>:nth-last-child(2){margin-bottom:0}.stzh-fieldset.sc-stzh-fieldset{--stzh-description-min-height:1.375rem;margin:0;padding:0;border:none;min-inline-size:auto}.stzh-fieldset__wrapper.sc-stzh-fieldset{display:grid}.stzh-fieldset__legend.sc-stzh-fieldset{font-family:var(--stzh-font-family-title);font-weight:var(--stzh-font-weight-title);font-style:var(--stzh-font-style-title);font-size:var(--stzh-font-curve-h4-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-h4-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-h4-default-text-letter-spacing);color:var(--stzh-color-primary70);padding:0;margin-bottom:var(--stzh-space-large)}@media screen and (min-width: 600px){.stzh-fieldset__legend.sc-stzh-fieldset{font-size:var(--stzh-font-curve-h4-small-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h4-small-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-h4-small-text-letter-spacing)}}@media screen and (min-width: 1260px){.stzh-fieldset__legend.sc-stzh-fieldset{font-size:var(--stzh-font-curve-h4-large-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h4-large-text-line-height, var(--stzh-font-deci-text-line-height));letter-spacing:var(--stzh-font-curve-h4-large-text-letter-spacing)}}@media screen and (min-width: 1600px){.stzh-fieldset__legend.sc-stzh-fieldset{font-size:var(--stzh-font-curve-h4-ultra-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h4-ultra-text-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h4-ultra-text-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}.stzh-fieldset--hide-legend.sc-stzh-fieldset .stzh-fieldset__legend.sc-stzh-fieldset{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}";const i=class{constructor(t){s(this,t);this.legend="";this.hideLegend=false;this.legendLevel="";this.legendCurve="auto"}render(){const s={"stzh-fieldset":true,"stzh-fieldset--hide-legend":this.hideLegend};return t(e,null,t("fieldset",{class:s},this.legend&&t("legend",{class:"stzh-fieldset__legend"},this.legendLevel?t("stzh-heading",{level:this.legendLevel,curve:this.legendCurve},this.legend):this.legend),t("div",{class:"stzh-fieldset__wrapper"},t("slot",null))))}};i.style=h;export{i as stzh_fieldset};
2	- //# sourceMappingURL=p-cf96dafb.entry.js.map

package/dist/stzh-components/p-cf96dafb.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["stzhFieldsetCss","StzhFieldset","render","classes","this","hideLegend","h","Host","class","legend","legendLevel","level","curve","legendCurve"],"sources":["src/components/stzh-fieldset/stzh-fieldset.scss?tag=stzh-fieldset&encapsulation=scoped","src/components/stzh-fieldset/stzh-fieldset.tsx"],"sourcesContent":[":host {\n // default spacing for form and layout elements\n ::slotted(.stzh-fieldset-row > .stzh-fieldset-row),\n ::slotted(.stzh-fieldset-row),\n ::slotted(.stzh-fieldset-row > stzh-input),\n ::slotted(stzh-input),\n ::slotted(.stzh-fieldset-row > stzh-datepicker),\n ::slotted(stzh-datepicker),\n ::slotted(.stzh-fieldset-row > stzh-dropdown),\n ::slotted(stzh-dropdown),\n ::slotted(.stzh-fieldset-row > stzh-fieldset),\n ::slotted(stzh-fieldset),\n ::slotted(.stzh-fieldset-row > stzh-upload),\n ::slotted(stzh-upload),\n ::slotted(.stzh-fieldset-row > stzh-checkbox),\n ::slotted(stzh-checkbox),\n ::slotted(.stzh-fieldset-row > stzh-checkboxgroup),\n ::slotted(stzh-checkboxgroup),\n ::slotted(.stzh-fieldset-row > stzh-radio),\n ::slotted(stzh-radio),\n ::slotted(.stzh-fieldset-row > stzh-radiogroup),\n ::slotted(stzh-radiogroup),\n ::slotted(.stzh-fieldset-row > stzh-row),\n ::slotted(stzh-row),\n ::slotted(.stzh-fieldset-row > stzh-vspace),\n ::slotted(stzh-vspace),\n ::slotted(.stzh-fieldset-row > stzh-hspace),\n ::slotted(stzh-hspace),\n ::slotted(.stzh-fieldset-row > stzh-text),\n ::slotted(stzh-text) {\n @include spaceCurve('margin-bottom', 'tiny');\n }\n\n ::slotted(.stzh-fieldset-row > stzh-message),\n ::slotted(stzh-message) {\n @include spaceCurve('margin-bottom', 'large');\n }\n\n ::slotted(.stzh-fieldset-row > stzh-actions),\n ::slotted(stzh-actions) {\n @include spaceCurve('margin-top', 'medium');\n @include spaceCurve('margin-bottom', 'big');\n }\n\n ::slotted(*) {\n stzh-checkbox,\n stzh-radio {\n --stzh-description-min-height: none;\n }\n }\n\n ::slotted(.stzh-fieldset-row > :last-child),\n ::slotted(:last-child),\n ::slotted(.stzh-fieldset-row:has(cq) > :nth-last-child(2)) {\n margin-bottom: 0;\n }\n}\n\n.stzh-fieldset {\n // --stzh-row-row-gap: #{space('xsmall')};\n --stzh-description-min-height: 22px;\n\n margin: 0;\n padding: 0;\n border: none;\n min-inline-size: auto;\n\n &__wrapper {\n display: grid;\n }\n\n &__legend {\n @include font('title');\n @include fontCurve('h4');\n color: $colorPrimary70;\n padding: 0;\n margin-bottom: space('large');\n }\n\n &--hide-legend &__legend {\n @include visuallyhidden;\n }\n}\n","import {\n Component,\n Host,\n Prop,\n h,\n} from \"@stencil/core\";\n\nimport { Font } from \"../../index\";\n\n/**\n * @slot - Slot for any (mostly form) elements\n */\n@Component({\n tag: \"stzh-fieldset\",\n styleUrl: \"stzh-fieldset.scss\",\n scoped: true\n})\nexport class StzhFieldset {\n /** Legend describing the field group inside the fieldset */\n @Prop() legend: string = \"\";\n\n /** Hide legend to show only for screenreaders */\n @Prop() hideLegend: boolean = false;\n\n /** Heading level inside legend */\n @Prop() legendLevel: \"\" | \"1\" | \"2\" | \"3\" | \"4\" = \"\";\n\n /** Type of curve to overwrite the curve inherited from `level` attribute (see [Spacings docs page](/docs/tokens-typography--docs#curves) for more info). */\n @Prop() legendCurve: Font.Curves | \"auto\" = \"auto\";\n\n render() {\n const classes = {\n \"stzh-fieldset\": true,\n \"stzh-fieldset--hide-legend\": this.hideLegend\n };\n\n return (\n <Host>\n <fieldset class={classes}>\n {this.legend &&\n <legend class=\"stzh-fieldset__legend\">\n {this.legendLevel ?\n <stzh-heading\n level={this.legendLevel}\n curve={this.legendCurve}\n >\n {this.legend}\n </stzh-heading>\n :\n this.legend\n }\n </legend>\n }\n <div class=\"stzh-fieldset__wrapper\">\n <slot></slot>\n </div>\n </fieldset>\n </Host>\n );\n }\n}\n"],"mappings":"kDAAA,MAAMA,EAAkB,qmV,MCiBXC,EAAY,M,qCAEE,G,gBAGK,M,iBAGoB,G,iBAGN,M,CAE5C,MAAAC,GACE,MAAMC,EAAU,CACd,gBAAiB,KACjB,6BAA8BC,KAAKC,YAGrC,OACEC,EAACC,EAAI,KACHD,EAAA,YAAUE,MAAOL,GACdC,KAAKK,QACJH,EAAA,UAAQE,MAAM,yBACXJ,KAAKM,YACJJ,EAAA,gBACEK,MAAOP,KAAKM,YACZE,MAAOR,KAAKS,aAEXT,KAAKK,QAGRL,KAAKK,QAIXH,EAAA,OAAKE,MAAM,0BACTF,EAAA,e"}

package/dist/stzh-components/p-d1e6afe2.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as t,c as a,h as s,a as c,g as e}from"./p-c7bfac7a.js";import{h as i}from"./p-7e304ea3.js";import"./p-9b063923.js";const h='.sc-stzh-cta-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-cta-h{display:none}.sc-stzh-cta-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-cta-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-cta-h .sc-stzh-cta,.sc-stzh-cta-h .sc-stzh-cta::before,.sc-stzh-cta-h *.sc-stzh-cta::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-cta-h .has-focus.sc-stzh-cta{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-cta-h .stzh-fylingfocus-focused.sc-stzh-cta{outline-style:none !important}.sc-stzh-cta-h .stzh-fylingfocus-focused.sc-stzh-cta::-moz-focus-inner{border:0 !important}.sc-stzh-cta-h{--stzh-flyingfocus-color:var(--stzh-color-white);--background-color:var(--stzh-cta-background-color);--heading-color:var(--stzh-color-primary70);--lead-color:var(--stzh-color-primary70);--sticky-background-color:var(--background-color);--button-color:var(--stzh-color-white);--button-background-color:var(--stzh-color-primary70);--button-border-radius:var(--stzh-button-border-radius);--hover-button-color:var(--stzh-color-white);--hover-button-background-color:var(--stzh-color-secondary60);--stuck-background-color:var(--stzh-color-grey10);--stuck-heading-color:var(--stzh-color-primary70);--stuck-lead-color:var(--stzh-base-color);--stuck-sticky-background-color:var(--background-color);--grid-template-areas:var(\n --stzh-cta-grid-template-areas,\n "cta cta cta cta"\n );--grid-template-columns:var(\n --stzh-cta-grid-template-columns,\n repeat(4, minmax(0, 1fr))\n )}@media screen and (min-width: 900px){.sc-stzh-cta-h{--grid-template-areas:var(\n --stzh-cta-grid-template-areas,\n "cta cta cta cta cta cta cta cta"\n );--grid-template-columns:var(\n --stzh-cta-grid-template-columns,\n repeat(8, minmax(0, 1fr))\n )}}@media screen and (min-width: 1260px){.sc-stzh-cta-h{--grid-template-areas:var(\n --stzh-cta-grid-template-areas,\n "cta cta cta cta cta cta cta cta"\n );--grid-template-columns:var(\n --stzh-cta-grid-template-columns,\n repeat(8, minmax(0, 1fr))\n )}}[size=small].sc-stzh-cta-h{--button-background-color:transparent;--hover-button-color:var(--button-color);--hover-button-background-color:var(--button-background-color);--stuck-background-color:var(--background-color)}@media screen and (min-width: 600px){[size=small].sc-stzh-cta-h{--grid-template-areas:var(\n --stzh-cta-small-grid-template-areas,\n "cta cta cta cta"\n )}}@media screen and (min-width: 900px){[size=small].sc-stzh-cta-h{--grid-template-areas:var(\n --stzh-cta-small-grid-template-areas,\n "cta cta cta cta cta cta cta cta"\n )}}@keyframes stzh-cta-effect{0%,20%,50%,80%,100%{transform:translateX(0)}40%{transform:translateX(-0.5rem)}60%{transform:translateX(-0.25rem)}}.stzh-cta.sc-stzh-cta{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);-moz-column-gap:var(--stzh-grid-gutter);column-gap:var(--stzh-grid-gutter);display:grid;grid-template-areas:var(--grid-template-areas);grid-template-columns:var(--grid-template-columns)}@media screen and (min-width: 600px){.stzh-cta.sc-stzh-cta{-moz-column-gap:var(--stzh-grid-gutter-small);column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-cta.sc-stzh-cta{-moz-column-gap:var(--stzh-grid-gutter-medium);column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-cta.sc-stzh-cta{-moz-column-gap:var(--stzh-grid-gutter-large);column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-cta.sc-stzh-cta{-moz-column-gap:var(--stzh-grid-gutter-ultra);column-gap:var(--stzh-grid-gutter-ultra)}}.stzh-cta__wrapper.sc-stzh-cta{grid-area:cta;background-color:var(--background-color);transition-property:background-color;transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-cta__wrapper.sc-stzh-cta:has(.stzh-cta__sticky[is-stuck]:not([is-stuck=false])){background-color:var(--stuck-background-color)}.stzh-cta__heading.sc-stzh-cta,.stzh-cta__lead.sc-stzh-cta{transition-property:color;transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-cta__heading.sc-stzh-cta:not(:empty),.stzh-cta__lead.sc-stzh-cta:not(:empty){margin-left:var(--stzh-space-xlarge);margin-right:var(--stzh-space-xlarge);margin-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 900px){.stzh-cta__heading.sc-stzh-cta:not(:empty),.stzh-cta__lead.sc-stzh-cta:not(:empty){margin-left:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-cta__heading.sc-stzh-cta:not(:empty),.stzh-cta__lead.sc-stzh-cta:not(:empty){margin-left:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 900px){.stzh-cta__heading.sc-stzh-cta:not(:empty),.stzh-cta__lead.sc-stzh-cta:not(:empty){margin-right:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-cta__heading.sc-stzh-cta:not(:empty),.stzh-cta__lead.sc-stzh-cta:not(:empty){margin-right:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 900px){.stzh-cta__heading.sc-stzh-cta:not(:empty),.stzh-cta__lead.sc-stzh-cta:not(:empty){margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-cta__heading.sc-stzh-cta:not(:empty),.stzh-cta__lead.sc-stzh-cta:not(:empty){margin-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 600px){.stzh-cta__heading.sc-stzh-cta:not(:empty),.stzh-cta__lead.sc-stzh-cta:not(:empty){margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){.stzh-cta__heading.sc-stzh-cta:not(:empty),.stzh-cta__lead.sc-stzh-cta:not(:empty){margin-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-cta__heading.sc-stzh-cta:not(:empty),.stzh-cta__lead.sc-stzh-cta:not(:empty){margin-bottom:var(--stzh-space-xxxxlarge)}}.stzh-cta__heading.sc-stzh-cta{font-size:var(--stzh-font-curve-h2-default-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h2-default-heading-line-height, var(--stzh-font-deci-heading-line-height));letter-spacing:var(--stzh-font-curve-h2-default-heading-letter-spacing);color:var(--heading-color)}@media screen and (min-width: 600px){.stzh-cta__heading.sc-stzh-cta{font-size:var(--stzh-font-curve-h2-small-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h2-small-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h2-small-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}@media screen and (min-width: 900px){.stzh-cta__heading.sc-stzh-cta{font-size:var(--stzh-font-curve-h2-medium-font-size, var(--stzh-font-hecto-font-size));line-height:var(--stzh-font-curve-h2-medium-heading-line-height, var(--stzh-font-hecto-text-line-height));letter-spacing:var(--stzh-font-curve-h2-medium-heading-letter-spacing, var(--stzh-font-hecto-text-letter-spacing))}}@media screen and (min-width: 1600px){.stzh-cta__heading.sc-stzh-cta{font-size:var(--stzh-font-curve-h2-ultra-font-size, var(--stzh-font-kilo-font-size));line-height:var(--stzh-font-curve-h2-ultra-heading-line-height, var(--stzh-font-kilo-text-line-height));letter-spacing:var(--stzh-font-curve-h2-ultra-heading-letter-spacing, var(--stzh-font-kilo-text-letter-spacing))}}.stzh-cta__wrapper.sc-stzh-cta:has(.stzh-cta__sticky[is-stuck]:not([is-stuck=false])) .stzh-cta__heading.sc-stzh-cta{color:var(--stuck-heading-color)}.stzh-cta__lead.sc-stzh-cta{font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing);color:var(--lead-color)}@media screen and (min-width: 900px){.stzh-cta__lead.sc-stzh-cta{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-cta__lead.sc-stzh-cta:not(:empty){padding-top:var(--stzh-space-small)}@media screen and (min-width: 900px){.stzh-cta__lead.sc-stzh-cta:not(:empty){padding-top:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-cta__lead.sc-stzh-cta:not(:empty){padding-top:var(--stzh-space-large)}}.stzh-cta__wrapper.sc-stzh-cta:has(.stzh-cta__sticky[is-stuck]:not([is-stuck=false])) .stzh-cta__lead.sc-stzh-cta{color:var(--stuck-lead-color)}.stzh-cta__button.sc-stzh-cta{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-centi-font-size);line-height:var(--stzh-font-centi-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);width:100%;display:flex;align-items:center;justify-content:space-between;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;text-decoration:none;border-radius:var(--button-border-radius);color:var(--button-color);background-color:var(--button-background-color);gap:var(--stzh-space-xsmall);transition-property:width, height, min-height, color, background-color, font-size, padding;transition-duration:var(--stzh-base-transition-animation-speed)}@media screen and (min-width: 600px){.stzh-cta__button.sc-stzh-cta{width:auto}}.stzh-cta__button.sc-stzh-cta:hover{color:var(--hover-button-color);background-color:var(--hover-button-background-color)}.stzh-cta__sticky[is-stuck].sc-stzh-cta:not([is-stuck=false]) .stzh-cta__button.sc-stzh-cta{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}@media screen and (min-width: 900px){.stzh-cta__sticky[is-stuck].sc-stzh-cta:not([is-stuck=false]) .stzh-cta__button.sc-stzh-cta{font-size:var(--stzh-font-centi-font-size);line-height:var(--stzh-font-centi-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}.stzh-cta__button-text.sc-stzh-cta{display:block}.stzh-cta__button-icon.sc-stzh-cta{--size:var(--stzh-icon-size-medium)}.stzh-cta__button.sc-stzh-cta:hover .stzh-cta__button-icon.sc-stzh-cta{animation:stzh-cta-effect 1s}.stzh-cta__sticky.sc-stzh-cta{--padding-left:var(--stzh-space-xlarge);--padding-right:var(--stzh-space-xlarge);--padding-top:var(--stzh-space-large);--padding-bottom:var(--stzh-space-large);--background-color:var(--sticky-background-color);--stuck-background-color:var(--stuck-sticky-background-color);--stuck-padding-left:0px;--stuck-padding-right:0px;display:block}@media screen and (min-width: 900px){.stzh-cta__sticky.sc-stzh-cta{--padding-left:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-cta__sticky.sc-stzh-cta{--padding-left:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 900px){.stzh-cta__sticky.sc-stzh-cta{--padding-right:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-cta__sticky.sc-stzh-cta{--padding-right:var(--stzh-space-xxxlarge)}}.stzh-cta__buttons.sc-stzh-cta{display:flex;gap:var(--stzh-space-medium)}.stzh-cta--has-lead.sc-stzh-cta .stzh-cta__heading.sc-stzh-cta{margin-bottom:0}.stzh-cta--size-default.sc-stzh-cta .stzh-cta__wrapper.sc-stzh-cta{padding-top:var(--stzh-space-large);padding-bottom:var(--stzh-space-large)}@media screen and (min-width: 600px){.stzh-cta--size-default.sc-stzh-cta .stzh-cta__wrapper.sc-stzh-cta{padding-top:var(--stzh-space-xxlarge);padding-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px) and (min-width: 900px){.stzh-cta--size-default.sc-stzh-cta .stzh-cta__wrapper.sc-stzh-cta{padding-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 600px) and (min-width: 1260px){.stzh-cta--size-default.sc-stzh-cta .stzh-cta__wrapper.sc-stzh-cta{padding-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 600px) and (min-width: 900px){.stzh-cta--size-default.sc-stzh-cta .stzh-cta__wrapper.sc-stzh-cta{padding-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 600px) and (min-width: 1260px){.stzh-cta--size-default.sc-stzh-cta .stzh-cta__wrapper.sc-stzh-cta{padding-bottom:var(--stzh-space-xxxxlarge)}}.stzh-cta--size-default.sc-stzh-cta .stzh-cta__button.sc-stzh-cta{padding:var(--stzh-space-xsmall) var(--stzh-space-xlarge);min-height:var(--stzh-form-input-height)}@media screen and (max-width: 599px){.stzh-cta--size-default.sc-stzh-cta .stzh-cta__button-icon.sc-stzh-cta{display:none}}.stzh-cta--size-default.sc-stzh-cta .stzh-cta__sticky[is-stuck].sc-stzh-cta:not([is-stuck=false]) .stzh-cta__button.sc-stzh-cta{min-height:var(--stzh-form-input-small-height)}@media screen and (min-width: 900px){.stzh-cta--size-default.sc-stzh-cta .stzh-cta__sticky[is-stuck].sc-stzh-cta:not([is-stuck=false]) .stzh-cta__button.sc-stzh-cta{min-height:var(--stzh-form-input-height)}}.stzh-cta--size-default.sc-stzh-cta .stzh-cta__sticky.sc-stzh-cta{margin-top:calc(var(--padding-top) / -1);margin-bottom:calc(var(--padding-bottom) / -1)}.stzh-cta--size-small.sc-stzh-cta .stzh-cta__button.sc-stzh-cta{width:100%;max-width:100%;gap:var(--stzh-space-medium)}.stzh-cta--size-small.sc-stzh-cta .stzh-cta__button.is-placeholder.sc-stzh-cta{width:auto;max-width:none;visibility:hidden;position:absolute;pointer-events:none}.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky[is-stuck].sc-stzh-cta:not([is-stuck=false]) .stzh-cta__button.sc-stzh-cta:not(.is-placeholder){width:var(--button-width, auto)}.stzh-cta--size-small.sc-stzh-cta .stzh-cta__button-icon.sc-stzh-cta{--size:var(--stzh-icon-size-large)}.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky.sc-stzh-cta{--padding-top:var(--stzh-space-xxlarge);--padding-bottom:var(--stzh-space-xxlarge)}@media screen and (min-width: 900px){.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky.sc-stzh-cta{--padding-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky.sc-stzh-cta{--padding-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 900px){.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky.sc-stzh-cta{--padding-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky.sc-stzh-cta{--padding-bottom:var(--stzh-space-xxxxlarge)}}.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky[is-stuck].sc-stzh-cta:not([is-stuck=false]){--padding-top:var(--stzh-space-xlarge);--padding-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 900px){.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky[is-stuck].sc-stzh-cta:not([is-stuck=false]){--padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky[is-stuck].sc-stzh-cta:not([is-stuck=false]){--padding-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 900px){.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky[is-stuck].sc-stzh-cta:not([is-stuck=false]){--padding-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky[is-stuck].sc-stzh-cta:not([is-stuck=false]){--padding-bottom:var(--stzh-space-xxxlarge)}}.stzh-cta--is-not-loaded.sc-stzh-cta{visibility:hidden}.stzh-cta--is-not-loaded.sc-stzh-cta .stzh-cta__wrapper.sc-stzh-cta,.stzh-cta--is-not-loaded.sc-stzh-cta .stzh-cta__heading.sc-stzh-cta,.stzh-cta--is-not-loaded.sc-stzh-cta .stzh-cta__lead.sc-stzh-cta,.stzh-cta--is-not-loaded.sc-stzh-cta .stzh-cta__button.sc-stzh-cta{transition-duration:0ms}';var n=0;const r=class{constructor(s){t(this,s);this.stzhFocus=a(this,"stzhFocus",7);this.stzhBlur=a(this,"stzhBlur",7);this.focusedByInput=false;this.onRootFocus=()=>{if(!this.focusedByInput){this.button.focus()}this.focusedByInput=false};this.onFocus=t=>{this.focusedByInput=true;const a=new FocusEvent("focus",{view:window,bubbles:false,cancelable:false});this.element.dispatchEvent(a);this.stzhFocus.emit({component:"stzh-cta",originalEvent:t})};this.onBlur=t=>{const a=new FocusEvent("blur",{view:window,bubbles:false,cancelable:false});this.element.dispatchEvent(a);this.stzhBlur.emit({component:"stzh-cta",originalEvent:t})};this.handlePlaceholderButtonResize=()=>{if(this.debounceResize){window.cancelAnimationFrame(this.debounceResize)}this.debounceResize=requestAnimationFrame(this.updateButtonWidthByResize)};this.updateButtonWidthByResize=()=>{if(!this.placeholderButton){return}const{width:t}=this.placeholderButton.getBoundingClientRect();this.element.style.setProperty("--button-width",`${t}px`)};this.heading="";this.lead="";this.label="";this.href="";this.stickyDisabled=true;this.loaded=false}componentDidLoad(){this.stickyDisabled=n>1;this.placeholderButtonResizeObserver=new ResizeObserver(this.handlePlaceholderButtonResize);if(this.placeholderButton){this.placeholderButtonResizeObserver.observe(this.placeholderButton)}requestAnimationFrame((()=>{requestAnimationFrame((()=>{this.updateButtonWidthByResize();window.setTimeout((()=>{this.loaded=true}),250)}))}))}componentDidRender(){if(this.placeholderButton&&this.placeholderButtonResizeObserver){this.placeholderButtonResizeObserver.observe(this.placeholderButton)}}connectedCallback(){n=n+1}disconnectedCallback(){var t;n=n-1;(t=this.placeholderButtonResizeObserver)===null\|\|t===void 0?void 0:t.disconnect()}renderButtons(t){return s("div",{class:"stzh-cta__buttons"},t==="small"&&s("div",{class:"stzh-cta__button is-placeholder",ref:t=>this.placeholderButton=t},s("span",{class:"stzh-cta__button-text"},this.label),s("stzh-icon",{class:"stzh-cta__button-icon",name:"arrow-right"})),this.href?s("a",{class:"stzh-cta__button",href:this.href,ref:t=>this.button=t,onFocus:this.onFocus,onBlur:this.onBlur},s("span",{class:"stzh-cta__button-text"},this.label),s("stzh-icon",{class:"stzh-cta__button-icon",name:"arrow-right"})):s("button",{class:"stzh-cta__button",ref:t=>this.button=t,onFocus:this.onFocus,onBlur:this.onBlur},s("span",{class:"stzh-cta__button-text"},this.label),s("stzh-icon",{class:"stzh-cta__button-icon",name:"arrow-right"})))}render(){const t=i(this.element,"heading");const a=i(this.element,"lead");const e=!!this.heading\|\|t;const h=!!this.lead\|\|a;const n=e\|\|h;const r=!n?"small":"default";const o={"stzh-cta":true,"stzh-cta--is-sticky-disabled":this.stickyDisabled,"stzh-cta--is-not-loaded":!this.loaded,"stzh-cta--has-heading":e,"stzh-cta--has-lead":h,[`stzh-cta--size-${r}`]:!!r};return s(c,{size:r,tabindex:"-1",onFocus:this.onRootFocus},s("article",{class:o,"data-stzh-sticky-width-container":true},s("div",{class:"stzh-cta__wrapper"},s("div",{class:"stzh-cta__heading"},this.heading?this.heading:s("slot",{name:"heading"})),s("div",{class:"stzh-cta__lead"},this.lead?this.lead:s("slot",{name:"lead"})),s("stzh-sticky",{name:"cta",class:"stzh-cta__sticky",position:"fixed",bleeding:true,disableStickyBottom:this.stickyDisabled,disableStickyTop:true},this.renderButtons(r)))))}get element(){return e(this)}};r.style=h;export{r as stzh_cta};
2	- //# sourceMappingURL=p-d1e6afe2.entry.js.map