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

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

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

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

@@ -0,0 +1 @@

+ {"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":"qLAAA,MAAMA,EAAc,sgnB,MC0CPC,EAAQ,M,wQAgDXC,KAAAC,WAAa,GA6HbD,KAAAE,WAAcC,IACpB,IAAIC,EAAe,MAEnBD,EAAQE,SAASC,IACf,GAAIA,EAAMC,OAAOC,QAAQ,WAAaF,EAAMC,OAAOE,aAAa,QAAS,CACvEL,EAAe,I,KAInB,GAAIA,EAAc,CAChBM,EAAYV,KAAKW,Q,GAkCbX,KAAAY,YAAeC,IACrB,IAAKb,KAAKc,YAAa,CACrB,M,CAGF,MAAMC,EAAa,CAAC,eAAgB,eAAgB,SAAU,IAAK,QAAS,SAAU,WAAY,SAAU,UAAW,QAAS,QAChI,MAAMC,EAAmBH,EAAMI,eAAeC,KAAIP,IAAO,IAAAQ,EAAI,OAAAA,EAACR,EAAwBS,WAAO,MAAAD,SAAA,SAAAA,EAAEE,aAAa,IAC5G,MAAMC,EAAQN,EAAiBO,MAAKC,GAAKT,EAAWU,SAASD,KAE7D,IAAKF,EAAO,CACVtB,KAAK0B,WAAa1B,KAAK0B,UAEvB1B,KAAK2B,aAAaC,KAAK,CACrBC,UAAW,YACXH,UAAW1B,KAAK0B,W,GAKd1B,KAAA8B,cAAiBjB,IACvB,GAAIb,KAAK+B,oBAAqB,CAC5B/B,KAAKgC,kBAAkBJ,KAAK,CAC1BC,UAAW,YACXI,cAAepB,G,GAKbb,KAAAkC,gBAAmBrB,IACzBb,KAAKmC,cAAcP,KAAK,CACtBC,UAAW,YACXO,QAASpC,KAAKoC,QACdH,cAAepB,GACf,EAGIb,KAAAqC,YAAc,CAACxB,EAAmByB,KACxCtC,KAAKuC,sBAAsBX,KAAK,CAC9BC,UAAW,YACXS,SACAL,cAAepB,GACf,EAGIb,KAAAwC,aAAe,KACrB,MAAMC,EAAWzC,KAAKW,QAAQH,QAAQ,iBAEtC,GAAIiC,EAAU,CACZ,MAAM9B,EAAUX,KAAK0C,2BACrBD,EAASE,SAAShC,EAAS,K,GAIvBX,KAAA4C,eAAiB,KACvB,MAAMH,EAAWzC,KAAKW,QAAQH,QAAQ,iBAEtC,GAAIiC,EAAU,CACZ,MAAM9B,EAAUX,KAAK0C,2BACrBD,EAASE,SAAShC,EAAS,O,GAIvBX,KAAA6C,4BAA8B,KACpC,MAAMC,EAAkB9C,KAAKW,QAAQH,QAAQ,iBAG7C,IAAKsC,EAAiB,CACpB9C,KAAKyC,SAASM,oBAAoB,aAAc/C,KAAK6C,6BACrD7C,KAAKyC,SAASM,oBAAoB,cAAe/C,KAAK6C,6BACtD,M,CAGF,GAAI7C,KAAKW,QAAS,CAChBD,EAAYV,KAAKW,Q,GAIbX,KAAAgD,KAAO,KACb,MAAMC,EAAQjD,KAAKW,QAAQuC,iBACzB,mDAGF,MAAMC,EAAQnD,KAAKW,QAAQuC,iBACzB,sDAGFD,EAAM5C,SAAS+C,IACbC,EAAeD,EAAM,CACnBE,KAAM,SACiB,IAG3BH,EAAM9C,SAASkD,IACbF,EAAeE,EAAM,CACnBD,KAAM,WACiB,GACzB,EAWItD,KAAAwD,eAAkBrD,IACxBH,KAAKgD,OACLhD,KAAKE,WAAWC,EAAQ,EAGlBH,KAAAyD,sBAAyB5C,IAC/Bb,KAAK0D,QAAU7C,EAAM8C,OAAOD,OAAO,EAG7B1D,KAAA4D,gBAAmB3B,IACzBjC,KAAK6D,UAAUjC,KAAK,CAClBC,UAAW,YACXI,iBACA,E,yCA5UsD,U,eAGG,M,aAGF,M,eAMb,M,gBAGC,M,aAGH,M,UAGJ,G,qDASC,G,cAGI,M,aAGnB,G,kBAGqC,I,cAGzB,G,mBAoBmB,G,2FAmBH,G,yBAIf,M,sBAMc,M,iBAGL,M,yBAMT,M,2BA2BvC,eAAA6B,CAAgBC,GACd,UAAWA,IAAa,SAAU,CAChC,GAAIA,IAAa,GAAI,CACnB/D,KAAKC,WAAa,E,KACb,CACL,IACED,KAAKC,WAAa+D,KAAKC,MAAMF,E,CAC7B,MAAMG,GACNlE,KAAKC,WAAa,CAAC8D,E,OAGlB,CACL/D,KAAKC,WAAa8D,C,EAKtB,oBAAAI,CAAqBJ,GACnB,UAAWA,IAAa,SAAU,CAChC/D,KAAKoE,eAAiBJ,KAAKC,MAAMF,E,KAC5B,CACL/D,KAAKoE,eAAiBL,C,EAK1B,oBAAAM,CAAqBN,GACnB,UAAWA,IAAa,SAAU,CAChC/D,KAAKsE,eAAiBN,KAAKC,MAAMF,E,KAC5B,CACL/D,KAAKsE,eAAiBP,C,EAkLlB,wBAAArB,GACN,MAAMD,EAAWzC,KAAKW,QAAQH,QAAQ,iBAEtC,GAAIiC,EAAU,CACZ,IAAI9B,EAAuBX,KAAKW,QAChC,IAAI4D,EAAoB,KAExB,UAAW9B,EAAS+B,YAAc,WAAY,CAC5CD,EAAoB9B,EAAS+B,W,KACxB,CACLD,EAAoB9B,EAAS+B,S,CAG/B,MAAO7D,EAAQ8D,eAAiB9D,EAAQ8D,gBAAkBF,EAAmB,CAC3E5D,EAAUA,EAAQ8D,a,CAGpB,OAAO9D,C,EAIX,uBAAM+D,GACJ1E,KAAK8D,gBAAgB9D,KAAK2E,UAC1B3E,KAAKmE,qBAAqBnE,KAAK4E,eAC/B5E,KAAKqE,qBAAqBrE,KAAK6E,eAE/B,IAAK7E,KAAK8E,aAAc,CACtB9E,KAAK8E,mBAAqBC,OAAOC,eAAeC,MAAMC,kBAAkBlF,KAAKW,QAAS,O,EAW1F,gBAAAwE,GACEnF,KAAKyC,SAAWzC,KAAKW,QAAQH,QAAQ,iBAErC,GAAIR,KAAKyC,SAAU,CACjBzC,KAAKyC,SAAS2C,iBAAiB,aAAcpF,KAAK6C,6BAClD7C,KAAKyC,SAAS2C,iBAAiB,cAAepF,KAAK6C,4B,EAIvD,kBAAAwC,GACEC,uBAAsB,K,UACpB,MAAMC,EAAWvF,KAAKwF,eAAerE,EAAAnB,KAAKyF,sBAAkB,MAAAtE,SAAA,SAAAA,EAAEuE,WAE9D,GAAIH,EAAU,EACZI,EAAA3F,KAAK4F,oBAAgB,MAAAD,SAAA,SAAAA,EAAEE,aAAa,cAAeN,IACnDO,EAAA9F,KAAK+F,oBAAgB,MAAAD,SAAA,SAAAA,EAAED,aAAa,cAAeN,E,KAKzD,iBAAAS,GACEhG,KAAKgD,OAELhD,KAAKiG,SAAW,IAAIC,iBAAiBlG,KAAKwD,gBAC1CxD,KAAKiG,SAASE,QAAQnG,KAAKW,QAAS,CAClCyF,UAAW,KACXC,QAAS,M,CAOb,oBAAAC,GACE,GAAItG,KAAKiG,SAAU,CACjBjG,KAAKiG,SAASM,Y,EAQlB,MAAAC,G,YACE,MAAMC,EAAqBC,EAAQ1G,KAAKW,QAAS,SACjD,MAAMgG,EAAuBD,EAAQ1G,KAAKW,QAAS,WACnD,MAAMiG,EAAsBF,EAAQ1G,KAAKW,QAAS,UAClD,MAAMkG,EAAuBH,EAAQ1G,KAAKW,QAAS,WAEnD,MAAMmG,EAAU,IAAI9G,KAAK+G,eACzB,MAAMC,EAAW,GAAGhH,KAAK+B,oBAAsB,SAAW,SAE1D,MAAMkF,EAAuBjH,KAAK0C,2BAElC,MAAMwE,GAAwBD,IAAoB,MAApBA,SAAoB,SAApBA,EAAsBxC,gBAC/C0C,MAAMC,MAAKjG,EAAA8F,IAAoB,MAApBA,SAAoB,SAApBA,EAAsBxC,iBAAa,MAAAtD,SAAA,SAAAA,EAAEkG,UAChDC,QAAQL,KAA0B,EAEvC,MAAMM,GAAuBN,IAAoB,MAApBA,SAAoB,SAApBA,EAAsBxC,gBAC9C0C,MAAMC,MAAKzB,EAAAsB,IAAoB,MAApBA,SAAoB,SAApBA,EAAsBxC,iBAAa,MAAAkB,SAAA,SAAAA,EAAE0B,UAChDC,QAAQL,OAA0BnB,EAAAmB,IAAoB,MAApBA,SAAoB,SAApBA,EAAsBxC,iBAAa,MAAAqB,SAAA,SAAAA,EAAEuB,SAASG,QAAS,EAE9F,MAAMC,GAAmBzH,KAAK0H,kBAAoB1H,KAAKyC,WAAazC,KAAKyC,SAASkF,SAClF,MAAMC,EAAyBH,IAAoBzH,KAAK6H,oBAQxD,MAAMC,IAAe9H,KAAK+H,SAAWpB,EAErC,MAAMqB,EAAYF,GACb9H,KAAKC,WAAWuH,OAAS,GACzBxH,KAAKoE,eAAeoD,OAAS,GAE7BxH,KAAKiI,WACLL,EAEL,MAAMM,EAAYtB,GACb5G,KAAKsE,eAAekD,OAAS,GAC7BxH,KAAKmI,WAIV,MAAMC,EAAyBpI,KAAKoE,eAAeiE,QAAO/F,KAAYA,EAAOgG,OAAShG,EAAOiG,aAE7F,MAAMC,EAAU,CACd,YAAa,KACb,wBAAyBxI,KAAKyI,KAC9B,uBAAwBhC,EACxB,yBAA0BI,EAC1B,4BAA6B7G,KAAK2E,SAClC,wCAAyC3E,KAAK2E,UAAY3E,KAAK+B,oBAC/D,wBAAyBiG,EACzB,wBAAyBE,EAEzB,4BAA6BlI,KAAKc,YAClC,0BAA2Bd,KAAK0B,UAChC,wBAAyB1B,KAAKoC,QAC9B,wBAAyBpC,KAAK0D,QAC9B,yBAA0B+D,EAC1B,CAAC,cAAczH,KAAK0I,aAAc1I,KAAK0I,SAGzC,OACEC,EAACC,EAAI,CAACC,KAAK,WAAU,aAAa7I,KAAK+H,QAAO,cAAeN,GAC3DkB,EAAA,WAEEG,MAAON,GAEPG,EAAA,KACEI,IAAMC,GAAQhJ,KAAK4F,iBAAmBoD,EAAwB,cAClD,OACZC,SAAS,KACTH,MAAM,wBACNL,KAAMzI,KAAKyI,KACXlI,OAAQP,KAAKO,OACb2I,QAASlJ,KAAKyI,KAAOzI,KAAK4D,gBAAkB,MAE5C+E,EAAA,QAAMQ,KAAK,WAEbR,EAAA,OAAKG,MAAM,8BACTH,EAAA,aAAWG,MAAM,iBAAiBK,KAAK,SAGvCR,EAAA,UAEEG,MAAM,oBACNI,QAASlJ,KAAKY,aAEd+H,EAAA,OAAKG,MAAM,yBACTH,EAAA,OAEEG,MAAM,0BAENH,EAAA,OAAKG,MAAM,yBACRhB,GACCa,EAAC7B,EAAO,CAACgC,MAAM,oBACbH,EAAA,KACEI,IAAMC,GAAQhJ,KAAK+F,iBAAmBiD,EACtCF,MAAM,wBACNL,KAAMzI,KAAKyI,KACXlI,OAAQP,KAAKO,OACb2I,QAASlJ,KAAKyI,KAAOzI,KAAK4D,gBAAkB,MAE5C+E,EAAA,OAAKI,IAAMC,GAAQhJ,KAAKyF,mBAAqBuD,GAC1ChJ,KAAK+H,QAAU/H,KAAK+H,QAAUY,EAAA,QAAMQ,KAAK,eAKjDnJ,KAAKC,WAAWuH,OAAS,GACxBmB,EAAC3B,EAAQ,CAAC8B,MAAM,sBAAsBI,QAASlJ,KAAK8B,eACjD9B,KAAKC,WAAWiB,KAAIyD,GACnBgE,EAAA,QAAMG,MAAM,4BAA4BnE,QAMlDgE,EAAA,OAEEG,MAAM,2BAENH,EAAA,OAAKG,MAAM,2BA8BR9I,KAAKiI,WACJU,EAAA,oBACEA,EAAA,eACEG,MAAM,iCACNM,KAAMpJ,KAAKoC,QAAU,cAAgB,OACrCsG,QAAQ,WACRpF,KAAK,OACL+F,SAAU,KACVH,QAASlJ,KAAKkC,kBAEhByG,EAAA,OAAKW,KAAK,WACPtJ,KAAKoC,QAAUpC,KAAK8E,aAAayE,aAAevJ,KAAK8E,aAAa0E,aAOvExJ,KAAKoE,eAAeoD,OAAS,GAAKxH,KAAKiI,WAAaL,IACpDe,EAAA,gBACEc,MAAOzJ,KAAK8E,aAAa4E,oBACzBC,UAAU,aACVb,MAAO,CACL,iCAAkC,OAIpCH,EAAA,eACEG,MAAM,oCACNJ,QAAQ,WACRpF,KAAK,OACL8F,KAAK,gBACLC,SAAU,KACVf,MAAOtI,KAAK4J,mBACZrB,WAAYH,EAAuBZ,OAAS,EAC5CqC,cAAc,OACdC,UAAW9J,KAAK+J,0BAA0BC,EAAA5B,EAAuB,MAAE,MAAA4B,SAAA,SAAAA,EAAEF,YAAa,YAEpFnB,EAAA,aAAWW,KAAK,WAEbtJ,KAAKoE,eAAelD,KAAIoB,GACvBqG,EAAA,kBAEES,KAAM9G,EAAO8G,KACbd,MAAOhG,EAAOgG,MACdC,WAAYjG,EAAOiG,WACnBuB,UAAWxH,EAAOwH,UAClBZ,QAAUe,IAAoBjK,KAAKqC,YAAY4H,EAAG3H,EAAO,GAExDA,EAAOmH,SAIX7B,GACCe,EAACuB,EAAQ,MACLhD,GACAyB,EAAA,kBAAgBS,KAAK,WAAWF,QAASlJ,KAAKwC,cAC3CxC,KAAK8E,aAAaqF,eAGrB5C,GACAoB,EAAA,kBAAgBS,KAAK,aAAaF,QAASlJ,KAAK4C,gBAC7C5C,KAAK8E,aAAasF,iBAM1BpK,KAAKiI,WACJU,EAAA,kBAAgBS,KAAMpJ,KAAKoC,QAAU,cAAgB,OAAQ8G,QAASlJ,KAAKkC,iBACxElC,KAAKoC,QAAUpC,KAAK8E,aAAayE,aAAevJ,KAAK8E,aAAa0E,gBAUnFb,EAAA,OAAKG,MAAM,0BACTH,EAAA,QAAMQ,KAAK,WAIfR,EAAA,OAAKG,MAAM,0CACTH,EAAA,QAAMQ,KAAK,aAGbR,EAAA,OAAKG,MAAM,yCAiBTH,EAAA,QAAMQ,KAAK,UACRnJ,KAAKsE,eAAekD,OAAS,GAC5BmB,EAAA,kBACEG,MAAM,8BACNuB,QAASrK,KAAKsE,iBAIjBtE,KAAKmI,YACJQ,EAAA,eACEG,MAAM,kCACNwB,UAAS,KACTC,KAAK,QACL7B,QAAQ,YACRS,KAAMnJ,KAAKmJ,KACXqB,MAAOxK,KAAKwK,MACZ9G,QAAS1D,KAAK0D,QACdiE,SAAU3H,KAAK2H,SACf8B,MAAOzJ,KAAK8E,aAAa2F,OACzBC,aAAc1K,KAAKyD,4B,mLCruBvC,MAAMkH,EAAkB,knP,MCwBXC,EAAY,M,0EA8Bf5K,KAAA6K,cAAgB,KACtB,MAAMC,EAAQ3D,MAAMC,KAAKpH,KAAKW,QAAQuC,iBAAiB,cACvD4H,EAAMzK,SAAQ0K,IACZ,GAAIA,EAAKjK,YAAa,CACpBiK,EAAKrJ,WAAa1B,KAAKgL,Y,KAI3BhL,KAAKgL,cAAgBhL,KAAKgL,aAE1BhL,KAAKiL,gBAAgBrJ,KAAK,CACxBC,UAAW,gBACXmJ,aAAchL,KAAKgL,cACnB,EAGIhL,KAAAkL,qBAAuB,KAC7B,MAAMJ,EAAQ3D,MAAMC,KAAKpH,KAAKW,QAAQuC,iBAAiB,cACvDlD,KAAKgL,cAAgBF,EAAMvJ,MAAKwJ,IAASA,EAAKrJ,WAAU,EAGlD1B,KAAAmL,mBAAgCC,IAqBtC,MAAML,EAAOK,EAAYhK,QAAQC,gBAAkB,YAC/C+J,EAAcA,EAAYC,cAAc,aAE5C,GAAIN,EAAM,CACR,MAAMO,EAAkBF,EACxB,MAAMG,EAAgBH,EAAYI,UAAU,MAG5CD,EAAcxD,QAAUuD,EAAgBvD,QACxCwD,EAAc5G,SAAW2G,EAAgB3G,SACzC4G,EAAc3G,cAAgB0G,EAAgB1G,cAC9C2G,EAAc1G,cAAgByG,EAAgBzG,cAC9C0G,EAAc1D,oBAAsByD,EAAgBzD,oBAEpD,OAAO0D,C,2CAlF+E,Y,+CAMvC,M,qBAGhB,M,6BAGO,U,kBAYT,K,CAJjC,gBAAAE,GACEzL,KAAKkL,sB,CAiEP,uBAAMxG,GACJ,IAAK1E,KAAK8E,aAAc,CACtB9E,KAAK8E,mBAAqBC,OAAOC,eAAeC,MAAMC,kBAAkBlF,KAAKW,QAAS,W,EAI1F,gBAAAwE,GACEnF,KAAKkL,sB,CAGP,MAAA1E,GACE,MAAMgC,EAAU,CACd,gBAAiB,KACjB,iCAAkCxI,KAAK0L,eACvC,CAAC,yBAAyB1L,KAAK2L,YAAa3L,KAAK2L,QAGnD,OACEhD,EAACC,EAAI,KACHD,EAAA,OAAKG,MAAON,GACVG,EAAA,OAAKG,MAAM,yBACTH,EAAA,OAAKG,MAAM,8BACR9I,KAAK4L,YAAc5L,KAAK4L,YAAcjD,EAAA,QAAMQ,KAAK,iBAEnDnJ,KAAK0L,gBACJ/C,EAAA,aACEG,MAAM,wBACNM,KAAMpJ,KAAKgL,aAAe,gBAAkB,gBAC5CvB,MAAOzJ,KAAKgL,aAAehL,KAAK8E,aAAa+G,UAAY7L,KAAK8E,aAAagH,YAC3E5C,QAASlJ,KAAK6K,iBAKpBlC,EAAA,iBACEhB,UAAW3H,KAAKyH,gBAChBsE,gBAAiB/L,KAAKgM,wBACtBC,WAAYjM,KAAKmL,oBAEjBxC,EAAA,OAAKG,MAAM,uBAAuBD,KAAK,QACrCF,EAAA,gB,0CC1Jd,MAAMuD,EAAoB,u+JCyB1B,IAAIC,EAAoB,E,MAcXC,EAAc,M,gEAMjBpM,KAAAqM,MAA8B,GAC9BrM,KAAAsM,cAAuB,GAsGvBtM,KAAAuM,YAAcC,UACpBxM,KAAKwK,MAAQxK,KAAKyM,YAAY,EAQxBzM,KAAA0M,gBAAkBF,MAAOG,EAA0BC,KACzD5M,KAAKwK,MAAQmC,EAAKnC,MAClBxK,KAAK6M,uBAAyBD,QAExB5M,KAAK8M,oBAEX9M,KAAK+M,WAAWnL,KAAK,CACnBC,UAAW,kBACX2I,MAAOxK,KAAKwK,OACZ,EAGIxK,KAAAgN,qBAAuBR,MAAO3L,IACpCb,KAAKwK,MAAQrD,MAAM8F,QAAQpM,EAAM8C,OAAO6G,OAAS3J,EAAM8C,OAAO6G,MAAM,GAAK3J,EAAM8C,OAAO6G,MAEtFxK,KAAK6M,uBAAyB7M,KAAKqM,MAAMa,WAAUP,GAC1CA,EAAKnC,QAAUxK,KAAKwK,cAGvBxK,KAAK8M,oBAEX9M,KAAK+M,WAAWnL,KAAK,CACnBC,UAAW,kBACX2I,MAAOxK,KAAKwK,OACZ,EAGIxK,KAAAmN,cAAiBtM,IACvB,IAAIuM,EAAyB,KAC7B,MAAMC,EAAoBrN,KAAK6M,uBAE/B,GAAIhM,EAAMyM,MAAQ,WAAazM,EAAMyM,MAAQ,YAAa,CACxDzM,EAAM0M,iBAEN,GAAIF,EAAoB,EAAG,CACzBD,EAAiBC,EAAoB,C,OAElC,GAAIxM,EAAMyM,MAAQ,aAAezM,EAAMyM,MAAQ,aAAc,CAClEzM,EAAM0M,iBAEN,GAAIF,EAAoBrN,KAAKqM,MAAM7E,OAAS,EAAG,CAC7C4F,EAAiBC,EAAoB,C,OAElC,GAAIxM,EAAMyM,MAAQ,KAAOzM,EAAMyM,MAAQ,QAAS,CACrDzM,EAAM0M,iBACNvN,KAAKwK,MAAQxK,KAAKqM,MAAMgB,GAAmB7C,MAE3CxK,KAAK+M,WAAWnL,KAAK,CACnBC,UAAW,kBACX2I,MAAOxK,KAAKwK,O,CAIhB,GAAI4C,IAAmB,KAAM,CAC3BpN,KAAK6M,uBAAyBO,C,yCAvKY,G,+BAQtB,G,WAGiB,G,kBAGO,G,gIAgBJ,M,cAGC,M,cAGA,M,kBAGI,M,qBAGkB,G,4BAEzB,C,CAQ1C,aAAAI,CAAc3M,GACZ,GAAKA,EAAMN,OAAuBkN,SAASzN,KAAKW,SAAU,CACxD2E,uBAAsB,KACpBtF,KAAKuM,aAAa,G,EAMxB,WAAAmB,CAAY3J,GACV,UAAWA,IAAa,SAAU,CAChC/D,KAAKqM,MAAQrI,KAAKC,MAAMF,E,KACnB,CACL/D,KAAKqM,MAAQtI,C,CAGf/D,KAAKsM,cAAgBtM,KAAKqM,MAAMnL,KAAKyL,IAC5B,CACLpJ,KAAMoJ,EAAKgB,QACP,GAAGhB,EAAKlD,UAAUkD,EAAKgB,WACvBhB,EAAKlD,MACTe,MAAOmC,EAAKnC,S,CAMlB,YAAAoD,CAAa7J,GACX,UAAWA,IAAa,SAAU,CAChC,IACE/D,KAAK6N,OAAS7J,KAAKC,MAAMF,E,CACzB,MAAOkG,GACP,GAAIlG,EAAU,CACZ/D,KAAK6N,OAAS,CAAC9J,E,KACV,CACL/D,KAAK6N,OAAS,E,QAGb,GAAI9J,EAAU,CACnB/D,KAAK6N,OAAS9J,C,KACT,CACL/D,KAAK6N,OAAS,E,EAOV,iBAAAf,GACN,OAAO,IAAIgB,SAAQC,GAAW/N,KAAKgO,qBAAuBD,G,CAsE5D,kBAAA1I,GACE,GAAIrF,KAAKgO,qBAAsB,CAC7BhO,KAAKgO,sB,EAIT,uBAAMtJ,GACJ1E,KAAKiO,GAAK,mBAAmB9B,MAE7BnM,KAAK0N,YAAY1N,KAAK2M,MACtB3M,KAAK4N,aAAa5N,KAAKkO,OAEvBlO,KAAKyM,aAAezM,KAAKyM,cAAgBzM,KAAKwK,MAE9C,IAAKxK,KAAK8E,aAAc,CACtB9E,KAAK8E,mBAAqBC,OAAOC,eAAeC,MAAMC,kBAAkBlF,KAAKW,QAAS,a,EAI1F,MAAA6F,GACE,MAAM2H,IAAoBnO,KAAK4L,YAC/B,MAAMwC,IAAwBpO,KAAKqO,gBACnC,MAAMC,IAActO,KAAKkO,MAEzB,MAAM1F,EAAU,CACd,kBAAmB,KACnB,mCAAoC2F,EACpC,wCAAyCC,EACzC,6BAA8BE,EAC9B,8BAA+BtO,KAAKuO,SAAWD,EAC/C,+BAAgCtO,KAAK2H,SACrC,+BAAgC3H,KAAKwO,UAGvC,OACE7F,EAACC,EAAI,cAAa5I,KAAKuO,SAAWD,GAChC3F,EAAA,OAAKG,MAAON,GACVG,EAAA,SACE4B,KAAK,SACLpB,KAAMnJ,KAAKmJ,KACXqB,MAAOxK,KAAKwK,MACZiC,aAAczM,KAAKyM,eAGpBzM,KAAKqM,MAAM7E,OAAS,GACnBmB,EAACuB,EAAQ,KACPvB,EAAA,OACEG,MAAM,yBACND,KAAK,UACLI,SAAS,IAAG,uBACS,QAAO,wBACL,GAAGjJ,KAAKiO,aAAajO,KAAK6M,yBAAwB,mBACvD,GAAG7M,KAAKiO,kBAAkBjO,KAAKyO,kBACjDC,UAAW1O,KAAKmN,eAEfnN,KAAKqM,MAAMnL,KAAI,CAACyL,EAAMC,IACrBjE,EAAA,aACEE,KAAK,SACLC,MAAO,CACL,wBAAyB,KACzB,aAAc9I,KAAK6M,yBAA2BD,GAEhDnD,MAAOkD,EAAKlD,MACZkE,QAAShB,EAAKgB,QACdvE,KAAMuD,EAAKvD,KACXmB,KAAMoC,EAAKpC,KACXoE,SAAUhC,EAAKgC,SACfjG,QAASiE,EAAKjE,QACdpF,KAAMqJ,EAAKrJ,KACXqE,SAAU3H,KAAK2H,UAAYgF,EAAKhF,SAChCiH,OAAQ5O,KAAKwK,QAAUmC,EAAKnC,MAAK,gBAClBxK,KAAKwK,QAAUmC,EAAKnC,MAAQ,OAAS,QACpDyD,GAAI,GAAGjO,KAAKiO,aAAarB,IACzBiC,aAAa,KACb3F,QAAS,IAAMlJ,KAAK0M,gBAAgBC,EAAMC,QAKhDjE,EAACmG,EAAoB,CACnBC,YAAY,kBACZd,GAAI,GAAGjO,KAAKiO,iBACZC,MAAOlO,KAAK6N,OACZjC,YAAa5L,KAAK4L,YAClByC,gBAAiBrO,KAAKqO,gBACtBW,qBAAsBhP,KAAKgP,qBAC3BZ,oBAAqBA,EACrBa,oBAAqBjP,KAAK8E,aAAaoK,SAASD,sBAGlDtG,EAAA,iBACEG,MAAM,4BACNnB,SAAU3H,KAAK2H,SACfuG,MAAOlO,KAAK6N,OACZjC,YAAa5L,KAAK4L,YAClByC,gBAAiBrO,KAAKqO,gBACtBG,SAAUxO,KAAKwO,SACfD,QAASvO,KAAKuO,QACdY,MAAO,CAACnP,KAAKwK,OACbf,MAAOzJ,KAAKyJ,MACZ2F,QAASpP,KAAKsM,cACd+C,aAAcrP,KAAKqP,aACnB3E,aAAc1K,KAAKgN,yB"}

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

	@@ -0,0 +1,2 @@
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 ADDED Viewed

@@ -0,0 +1 @@

+ {"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-d1e6afe2.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
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

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

@@ -0,0 +1 @@

+ {"version":3,"names":["stzhCtaCss","counter","StzhCta","this","focusedByInput","onRootFocus","button","focus","onFocus","event","focusEvent","FocusEvent","view","window","bubbles","cancelable","element","dispatchEvent","stzhFocus","emit","component","originalEvent","onBlur","blurEvent","stzhBlur","handlePlaceholderButtonResize","debounceResize","cancelAnimationFrame","requestAnimationFrame","updateButtonWidthByResize","placeholderButton","width","getBoundingClientRect","style","setProperty","componentDidLoad","stickyDisabled","placeholderButtonResizeObserver","ResizeObserver","observe","setTimeout","loaded","componentDidRender","connectedCallback","disconnectedCallback","_a","disconnect","renderButtons","size","h","class","ref","el","label","name","href","render","headingSlotUsed","hasSlot","leadSlotUsed","hasHeading","heading","hasLead","lead","hasHeadingOrLead","classes","Host","tabindex","position","bleeding","disableStickyBottom","disableStickyTop"],"sources":["src/components/stzh-cta/stzh-cta.scss?tag=stzh-cta&encapsulation=scoped","src/components/stzh-cta/stzh-cta.tsx"],"sourcesContent":[":host {\n --stzh-flyingfocus-color: #{$colorWhite};\n\n --background-color: #{$ctaBackgroundColor};\n --heading-color: #{$colorPrimary70};\n --lead-color: #{$colorPrimary70};\n --sticky-background-color: var(--background-color);\n --button-color: #{$colorWhite};\n --button-background-color: #{$colorPrimary70};\n --button-border-radius: #{$buttonBorderRadius};\n\n --hover-button-color: #{$colorWhite};\n --hover-button-background-color: #{$colorSecondary60};\n\n --stuck-background-color: #{$colorGrey10};\n --stuck-heading-color: #{$colorPrimary70};\n --stuck-lead-color: #{$baseColor};\n --stuck-sticky-background-color: var(--background-color);\n\n --grid-template-areas: var(\n --stzh-cta-grid-template-areas,\n \"cta cta cta cta\"\n );\n\n --grid-template-columns: var(\n --stzh-cta-grid-template-columns,\n #{$gridColumns}\n );\n\n @include mq($from: medium) {\n --grid-template-areas: var(\n --stzh-cta-grid-template-areas,\n \"cta cta cta cta cta cta cta cta\"\n );\n\n --grid-template-columns: var(\n --stzh-cta-grid-template-columns,\n #{$gridColumnsMedium}\n );\n }\n\n @include mq($from: large) {\n --grid-template-areas: var(\n --stzh-cta-grid-template-areas,\n \"cta cta cta cta cta cta cta cta\"\n );\n\n --grid-template-columns: var(\n --stzh-cta-grid-template-columns,\n repeat(8, minmax(0, 1fr))\n );\n }\n\n &[size=\"small\"] {\n --button-background-color: transparent;\n\n --hover-button-color: var(--button-color);\n --hover-button-background-color: var(--button-background-color);\n\n --stuck-background-color: var(--background-color);\n\n @include mq($from: small) {\n --grid-template-areas: var(\n --stzh-cta-small-grid-template-areas,\n \"cta cta cta cta\"\n );\n }\n\n @include mq($from: medium) {\n --grid-template-areas: var(\n --stzh-cta-small-grid-template-areas,\n \"cta cta cta cta cta cta cta cta\"\n );\n }\n }\n}\n\n@keyframes stzh-cta-effect {\n\t0%,\n\t20%,\n\t50%,\n\t80%,\n\t100% {\n\t\ttransform: translateX(0);\n\t}\n\n\t40% {\n\t\ttransform: translateX(-8px);\n\t}\n\n\t60% {\n\t\ttransform: translateX(-4px);\n\t}\n}\n\n.stzh-cta {\n @include font('heavy');\n @include gridGutter;\n display: grid;\n grid-template-areas: var(--grid-template-areas);\n grid-template-columns: var(--grid-template-columns);\n\n &__wrapper {\n grid-area: cta;\n background-color: var(--background-color);\n transition-property: background-color;\n transition-duration: $baseTransitionAnimationSpeed;\n }\n\n &__wrapper:has(#{&}__sticky[is-stuck]:not([is-stuck=\"false\"])) {\n background-color: var(--stuck-background-color);\n }\n\n &__heading,\n &__lead {\n transition-property: color;\n transition-duration: $baseTransitionAnimationSpeed;\n\n &:not(:empty) {\n @include spaceCurve('margin-left', 'medium');\n @include spaceCurve('margin-right', 'medium');\n @include spaceCurve('margin-bottom', 'medium');\n\n @include mq($from: small) {\n margin-bottom: space('xxlarge');\n }\n\n @include mq($from: medium) {\n margin-bottom: space('xxxlarge');\n }\n\n @include mq($from: large) {\n margin-bottom: space('xxxxlarge');\n }\n }\n }\n\n &__heading {\n @include fontCurve('h2', 'heading');\n color: var(--heading-color);\n }\n\n &__wrapper:has(#{&}__sticky[is-stuck]:not([is-stuck=\"false\"])) &__heading {\n color: var(--stuck-heading-color);\n }\n\n &__lead {\n @include fontCurve('p1');\n color: var(--lead-color);\n\n &:not(:empty) {\n @include spaceCurve('padding-top', 'small');\n }\n }\n\n &__wrapper:has(#{&}__sticky[is-stuck]:not([is-stuck=\"false\"])) &__lead {\n color: var(--stuck-lead-color);\n }\n\n &__button {\n @include font('heavy');\n @include fontSize('centi');\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n appearance: none;\n border: none;\n text-decoration: none;\n border-radius: var(--button-border-radius);\n color: var(--button-color);\n background-color: var(--button-background-color);\n gap: space('xsmall');\n transition-property: width, height, min-height, color, background-color, font-size, padding;\n transition-duration: $baseTransitionAnimationSpeed;\n\n @include mq($from: small) {\n width: auto;\n }\n\n &:hover {\n color: var(--hover-button-color);\n background-color: var(--hover-button-background-color);\n }\n }\n\n &__sticky[is-stuck]:not([is-stuck=\"false\"]) &__button {\n @include fontSize('milli');\n\n @include mq($from: medium) {\n @include fontSize('centi');\n }\n }\n\n &__button-text {\n display: block;\n }\n\n &__button-icon {\n --size: #{iconSize('medium')};\n }\n\n &__button:hover &__button-icon {\n\t\tanimation: stzh-cta-effect 1s;\n }\n\n &__sticky {\n @include spaceCurve('--padding-left', 'medium');\n @include spaceCurve('--padding-right', 'medium');\n --padding-top: #{space('large')};\n --padding-bottom: #{space('large')};\n --background-color: var(--sticky-background-color);\n --stuck-background-color: var(--stuck-sticky-background-color);\n --stuck-padding-left: 0px;\n --stuck-padding-right: 0px;\n\n display: block;\n }\n\n &__buttons {\n display: flex;\n gap: space('medium');\n }\n\n /* Has lead variant */\n\n &--has-lead &__heading {\n margin-bottom: 0;\n }\n\n /* Default variant; has heading, lead or multiple buttons */\n\n &--size-default &__wrapper {\n padding-top: space('large');\n padding-bottom: space('large');\n\n @include mq($from: small) {\n @include spaceCurve('padding-top', 'large');\n @include spaceCurve('padding-bottom', 'large');\n }\n }\n\n &--size-default &__button {\n padding: space('xsmall') space('xlarge');\n min-height: $formInputHeight;\n }\n\n &--size-default &__button-icon {\n @include mq($to: small) {\n display: none;\n }\n }\n\n &--size-default &__sticky[is-stuck]:not([is-stuck=\"false\"]) &__button {\n min-height: $formInputHeightSmall;\n\n @include mq($from: medium) {\n min-height: $formInputHeight;\n }\n }\n\n &--size-default &__sticky {\n margin-top: calc(var(--padding-top) / -1);\n margin-bottom: calc(var(--padding-bottom) / -1);\n }\n\n /* Small variant; has no heading, lead or multiple buttons */\n\n &--size-small &__button {\n width: 100%;\n max-width: 100%;\n gap: space('medium');\n\n &.is-placeholder {\n width: auto;\n max-width: none;\n visibility: hidden;\n position: absolute;\n pointer-events: none;\n }\n }\n\n &--size-small &__sticky[is-stuck]:not([is-stuck=\"false\"]) &__button:not(.is-placeholder) {\n width: var(--button-width, auto);\n }\n\n &--size-small &__button-icon {\n --size: #{iconSize('large')};\n }\n\n &--size-small &__sticky {\n @include spaceCurve('--padding-top', 'large');\n @include spaceCurve('--padding-bottom', 'large');\n\n &[is-stuck]:not([is-stuck=\"false\"]) {\n @include spaceCurve('--padding-top', 'medium');\n @include spaceCurve('--padding-bottom', 'medium');\n }\n }\n\n /* Not loaded */\n\n &--is-not-loaded {\n visibility: hidden;\n }\n\n &--is-not-loaded &__wrapper,\n &--is-not-loaded &__heading,\n &--is-not-loaded &__lead,\n &--is-not-loaded &__button {\n transition-duration: 0ms;\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n State,\n Event,\n EventEmitter,\n} from \"@stencil/core\";\n\nimport {\n StzhCtaFocusEvent,\n StzhCtaBlurEvent\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\n\nvar counter = 0;\n\n/**\n * @slot heading - Slot for heading as alternative for attribute\n * @slot lead - Slot for lead as alternative for attribute\n * @slot label - Slot for button label as alternative for attribute\n */\n@Component({\n tag: \"stzh-cta\",\n styleUrl: \"stzh-cta.scss\",\n scoped: true\n})\nexport class StzhCta {\n /** Heading */\n @Prop() heading: string = \"\";\n\n /** Lead */\n @Prop() lead: string = \"\";\n\n /** Button Label */\n @Prop() label: string = \"\";\n\n /** Button link */\n @Prop() href: string = \"\";\n\n /**\n * Whether sticky button is disabled.\n * Will be set to true automatically on,\n * when more than one cta is on the page.\n */\n @Prop() stickyDisabled: boolean = true;\n\n @State() loaded: boolean = false;\n\n @Element() element: HTMLStzhCtaElement;\n\n /** Input focus event */\n @Event() stzhFocus: EventEmitter<StzhCtaFocusEvent>;\n\n /** Input blur event */\n @Event() stzhBlur: EventEmitter<StzhCtaBlurEvent>;\n\n private button: HTMLButtonElement | HTMLAnchorElement;\n private placeholderButton: HTMLElement;\n private debounceResize: number;\n private focusedByInput: boolean = false;\n private placeholderButtonResizeObserver: ResizeObserver;\n\n private onRootFocus = () => {\n if (!this.focusedByInput) {\n this.button.focus();\n }\n\n this.focusedByInput = false;\n }\n\n private onFocus = (event: FocusEvent) => {\n this.focusedByInput = true;\n\n const focusEvent = new FocusEvent(\"focus\", {\n view: window,\n bubbles: false,\n cancelable: false\n });\n\n this.element.dispatchEvent(focusEvent);\n this.stzhFocus.emit({\n component: \"stzh-cta\",\n originalEvent: event\n });\n }\n\n private onBlur = (event: FocusEvent) => {\n const blurEvent = new FocusEvent(\"blur\", {\n view: window,\n bubbles: false,\n cancelable: false\n });\n\n this.element.dispatchEvent(blurEvent);\n this.stzhBlur.emit({\n component: \"stzh-cta\",\n originalEvent: event\n });\n }\n\n private handlePlaceholderButtonResize = () => {\n if (this.debounceResize) {\n window.cancelAnimationFrame(this.debounceResize);\n }\n\n this.debounceResize = requestAnimationFrame(this.updateButtonWidthByResize);\n }\n\n private updateButtonWidthByResize = () => {\n if (!this.placeholderButton) {\n return;\n }\n\n const { width } = this.placeholderButton.getBoundingClientRect();\n this.element.style.setProperty(\"--button-width\", `${width}px`);\n }\n\n componentDidLoad() {\n this.stickyDisabled = counter > 1;\n\n this.placeholderButtonResizeObserver = new ResizeObserver(this.handlePlaceholderButtonResize);\n if (this.placeholderButton) {\n this.placeholderButtonResizeObserver.observe(this.placeholderButton);\n }\n\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n this.updateButtonWidthByResize();\n\n window.setTimeout(() => {\n this.loaded = true;\n }, 250);\n });\n });\n }\n\n componentDidRender() {\n if (this.placeholderButton && this.placeholderButtonResizeObserver) {\n this.placeholderButtonResizeObserver.observe(this.placeholderButton);\n }\n }\n\n connectedCallback() {\n counter = counter + 1;\n }\n\n disconnectedCallback() {\n // current no way of sending events in disconnected callback, so we just decrease the counter now,\n // but the user has to set stickyDisabled=false by himself\n counter = counter - 1;\n\n this.placeholderButtonResizeObserver?.disconnect();\n }\n\n private renderButtons(size: \"default\" | \"small\") {\n return (\n <div class=\"stzh-cta__buttons\">\n {size === \"small\" &&\n <div\n class=\"stzh-cta__button is-placeholder\"\n ref={(el) => (this.placeholderButton = el as HTMLElement)}\n >\n <span class=\"stzh-cta__button-text\">{this.label}</span>\n <stzh-icon class=\"stzh-cta__button-icon\" name=\"arrow-right\"></stzh-icon>\n </div>\n }\n\n {this.href\n ?\n <a\n class=\"stzh-cta__button\"\n href={this.href}\n ref={(el) => (this.button = el as HTMLAnchorElement)}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n >\n <span class=\"stzh-cta__button-text\">{this.label}</span>\n <stzh-icon class=\"stzh-cta__button-icon\" name=\"arrow-right\"></stzh-icon>\n </a>\n :\n <button\n class=\"stzh-cta__button\"\n ref={(el) => (this.button = el as HTMLButtonElement)}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n >\n <span class=\"stzh-cta__button-text\">{this.label}</span>\n <stzh-icon class=\"stzh-cta__button-icon\" name=\"arrow-right\"></stzh-icon>\n </button>\n }\n </div>\n );\n }\n\n render() {\n const headingSlotUsed = hasSlot(this.element, 'heading');\n const leadSlotUsed = hasSlot(this.element, 'lead');\n\n const hasHeading = !!this.heading || headingSlotUsed;\n const hasLead = !!this.lead || leadSlotUsed;\n const hasHeadingOrLead = hasHeading || hasLead;\n\n const size = !hasHeadingOrLead\n ? \"small\"\n : \"default\";\n\n const classes = {\n \"stzh-cta\": true,\n \"stzh-cta--is-sticky-disabled\": this.stickyDisabled,\n \"stzh-cta--is-not-loaded\": !this.loaded,\n \"stzh-cta--has-heading\": hasHeading,\n \"stzh-cta--has-lead\": hasLead,\n [`stzh-cta--size-${size}`]: !!size,\n };\n\n return (\n <Host size={size} tabindex=\"-1\" onFocus={this.onRootFocus}>\n <article class={classes} data-stzh-sticky-width-container>\n <div class=\"stzh-cta__wrapper\">\n <div class=\"stzh-cta__heading\">\n {this.heading ? this.heading : <slot name=\"heading\"></slot>}\n </div>\n <div class=\"stzh-cta__lead\">\n {this.lead ? this.lead : <slot name=\"lead\"></slot>}\n </div>\n <stzh-sticky\n name=\"cta\"\n class=\"stzh-cta__sticky\"\n position=\"fixed\"\n bleeding\n disableStickyBottom={this.stickyDisabled}\n disableStickyTop={true}\n >\n {this.renderButtons(size)}\n </stzh-sticky>\n </div>\n </article>\n </Host>\n );\n }\n}\n"],"mappings":"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"}

package/dist/stzh-components/p-ddfb8df0.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as s,c as i,h as o,a as t,g as e}from"./p-c7bfac7a.js";const a=".sc-stzh-imagecomparison-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-imagecomparison-h{display:none}.sc-stzh-imagecomparison-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-imagecomparison-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-imagecomparison-h .sc-stzh-imagecomparison,.sc-stzh-imagecomparison-h .sc-stzh-imagecomparison::before,.sc-stzh-imagecomparison-h .sc-stzh-imagecomparison::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-imagecomparison-h .has-focus.sc-stzh-imagecomparison{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-imagecomparison-h .stzh-fylingfocus-focused.sc-stzh-imagecomparison{outline-style:none !important}.sc-stzh-imagecomparison-h .stzh-fylingfocus-focused.sc-stzh-imagecomparison::-moz-focus-inner{border:0 !important}.sc-stzh-imagecomparison-h{--exposure:50%;--divider-width:0.125rem}.sc-stzh-imagecomparison-h .sc-stzh-imagecomparison-s>{position:absolute;inset:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.sc-stzh-imagecomparison-h .sc-stzh-imagecomparison-s>[slot=image-after]{-webkit-clip-path:polygon(calc(var(--exposure) + (var(--divider-width) / 2)) 0, 100% 0, 100% 100%, calc(var(--exposure) + (var(--divider-width) / 2)) 100%);clip-path:polygon(calc(var(--exposure) + (var(--divider-width) / 2)) 0, 100% 0, 100% 100%, calc(var(--exposure) + (var(--divider-width) / 2)) 100%)}.stzh-imagecomparison.sc-stzh-imagecomparison{display:flex;flex-direction:column;-webkit-user-select:none;-moz-user-select:none;user-select:none}.stzh-imagecomparison__control.sc-stzh-imagecomparison{position:absolute;inset:0;opacity:0;cursor:pointer}.stzh-imagecomparison__slider-line.sc-stzh-imagecomparison{position:absolute;left:var(--exposure);height:100%;width:var(--divider-width);background-color:var(--stzh-color-white);transform:translateX(-50%);transition:background-color var(--stzh-base-transition-animation-speed)}.stzh-imagecomparison__slider-icon-wrapper.sc-stzh-imagecomparison{display:flex;align-items:center;justify-content:space-between;position:absolute;top:50%;left:var(--exposure);overflow:hidden;width:calc(2 * var(--stzh-icon-size) + var(--divider-width));height:var(--stzh-icon-size);transform:translate(-50%, -50%);color:var(--stzh-color-primary70);background-color:var(--stzh-color-white);transition-property:color, background-color;transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-imagecomparison__hint-wrapper.sc-stzh-imagecomparison{pointer-events:none;opacity:0;transition:opacity var(--stzh-base-transition-animation-speed)}.stzh-imagecomparison__hint-left.sc-stzh-imagecomparison,.stzh-imagecomparison__hint-right.sc-stzh-imagecomparison{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;display:flex;align-items:center;height:1.5rem;padding:0 var(--stzh-space-xsmall);background:var(--stzh-color-black50op);color:var(--stzh-color-white)}.stzh-imagecomparison__hint-left.sc-stzh-imagecomparison{left:0}.stzh-imagecomparison__hint-right.sc-stzh-imagecomparison{right:0}.stzh-imagecomparison__label.sc-stzh-imagecomparison:hover .stzh-imagecomparison__slider-line.sc-stzh-imagecomparison{background-color:var(--stzh-color-primary70)}.stzh-imagecomparison__label.sc-stzh-imagecomparison:hover .stzh-imagecomparison__slider-icon-wrapper.sc-stzh-imagecomparison{background-color:var(--stzh-color-secondary30)}.stzh-imagecomparison__label.sc-stzh-imagecomparison:hover+.stzh-imagecomparison__hint-wrapper.sc-stzh-imagecomparison{opacity:1}";const r=class{constructor(o){s(this,o);this.stzhChange=i(this,"stzhChange",7);this.handleInput=s=>{let i=this.inputElement.value;this.value=Number(i);this.stzhChange.emit({component:"stzh-imagecomparison",originalEvent:s,value:this.value})};this.localization=undefined;this.hintLeft="";this.hintRight="";this.value=50;this.label=undefined;this.a11yDescribedby=""}async componentWillLoad(){if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"imagecomparison")}}render(){const s={"stzh-imagecomparison":true};return o(t,{"aria-roledescription":this.localization.label,style:{"--exposure":`${this.value.toString()}%`}},o("div",{class:s},o("div",{class:"stzh-imagecomparison__element"},o("slot",{name:"image-before"}),o("slot",{name:"image-after"}),o("label",{class:"stzh-imagecomparison__label","aria-label":this.label\|\|this.localization.label,"aria-describedby":this.a11yDescribedby\|\|null},o("div",{class:"stzh-imagecomparison__slider-icon-wrapper"},o("stzh-icon",{class:"stzh-imagecomparison__slider-icon-left",name:"angle-left"}),o("stzh-icon",{class:"stzh-imagecomparison__slider-icon-right",name:"angle-right"})),o("div",{class:"stzh-imagecomparison__slider-line"}),o("input",{type:"range",class:"stzh-imagecomparison__control",min:"0",max:"100",ref:s=>this.inputElement=s,onInput:this.handleInput})),o("div",{class:"stzh-imagecomparison__hint-wrapper"},o("span",{class:"stzh-imagecomparison__hint-left"},this.hintLeft?this.hintLeft:o("slot",{name:"hint-left"})),o("span",{class:"stzh-imagecomparison__hint-right"},this.hintRight?this.hintRight:o("slot",{name:"hint-right"}))))))}get element(){return e(this)}};r.style=a;export{r as stzh_imagecomparison};
2	+ //# sourceMappingURL=p-ddfb8df0.entry.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"names":["stzhImagecomparisonCss","StzhImageComparison","this","handleInput","event","value","inputElement","Number","stzhChange","emit","component","originalEvent","componentWillLoad","localization","window","stzhComponents","utils","fetchTranslations","element","render","classes","h","Host","label","style","toString","class","name","a11yDescribedby","type","min","max","ref","el","onInput","hintLeft","hintRight"],"sources":["src/components/stzh-imagecomparison/stzh-imagecomparison.scss?tag=stzh-imagecomparison&encapsulation=scoped","src/components/stzh-imagecomparison/stzh-imagecomparison.tsx"],"sourcesContent":[":host {\n --exposure: 50%;\n --divider-width: 2px;\n\n ::slotted(*) {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n\n ::slotted([slot=\"image-after\"]) {\n clip-path: polygon(\n calc(var(--exposure) + (var(--divider-width) / 2)) 0,\n 100% 0,\n 100% 100%,\n calc(var(--exposure) + (var(--divider-width) / 2)) 100%\n );\n }\n}\n\n.stzh-imagecomparison {\n display: flex;\n flex-direction: column;\n user-select: none;\n\n &__control {\n position: absolute;\n inset: 0;\n opacity: 0;\n cursor: pointer;\n }\n\n &__slider-line {\n position: absolute;\n left: var(--exposure);\n height: 100%;\n width: var(--divider-width);\n background-color: $colorWhite;\n transform: translateX(-50%);\n transition: background-color $baseTransitionAnimationSpeed;\n }\n\n &__slider-icon-wrapper {\n display: flex;\n align-items: center;\n justify-content: space-between;\n position: absolute;\n top: 50%;\n left: var(--exposure);\n overflow: hidden;\n width: calc(2 * #{iconSize()} + var(--divider-width));\n height: #{iconSize()};\n transform: translate(-50%, -50%);\n color: $colorPrimary70;\n background-color: $colorWhite;\n transition-property: color, background-color;\n transition-duration: $baseTransitionAnimationSpeed;\n }\n\n &__hint-wrapper {\n pointer-events: none;\n opacity: 0;\n transition: opacity $baseTransitionAnimationSpeed;\n }\n\n &__hint-left,\n &__hint-right {\n @include font('heavy');\n @include fontSize('micro');\n position: absolute;\n top: 0;\n display: flex;\n align-items: center;\n height: 24px;\n padding: 0 space('xsmall');\n background: $colorBlack50op;\n color: $colorWhite;\n }\n\n &__hint-left {\n left: 0;\n }\n\n &__hint-right {\n right: 0;\n }\n\n &__label:hover &__slider-line {\n background-color: $colorPrimary70;\n }\n\n &__label:hover &__slider-icon-wrapper {\n background-color: $colorSecondary30;\n }\n\n &__label:hover + &__hint-wrapper {\n opacity: 1;\n }\n}\n","import {\n Component,\n Host,\n Element,\n Prop,\n h,\n Event,\n EventEmitter\n} from '@stencil/core';\n\nimport {\n StzhImagecomparisonChangeEvent,\n} from \"../../index\";\n\nimport { StzhImagecomparisonLocalizedText } from \"./stzh-imagecomparison.localization\"\n\n/**\n * @slot image-before - Slot for a before image\n * @slot image-after - Slot for a after image\n * @slot hint-left - Slot for a left image hint as alternative for attribute\n * @slot hint-right - Slot for a right image hint as alternative for attribute\n */\n\n@Component({\n tag: 'stzh-imagecomparison',\n styleUrl: 'stzh-imagecomparison.scss',\n scoped: true,\n})\n\nexport class StzhImageComparison {\n /** Translation strings. */\n @Prop() localization: StzhImagecomparisonLocalizedText;\n\n /** Hint left */\n @Prop() hintLeft: string = \"\";\n\n /** Hint right */\n @Prop() hintRight: string = \"\";\n\n /** Width of image before */\n @Prop({ mutable: true }) value: number = 50;\n\n /** Overwrite default label */\n @Prop() label: string;\n\n /** Id for element which describes the label */\n @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n @Element() element: HTMLStzhImagecomparisonElement;\n\n /* Image comparison slider on change event */\n @Event() stzhChange: EventEmitter<StzhImagecomparisonChangeEvent>;\n\n private inputElement: HTMLInputElement;\n\n private handleInput = (event: InputEvent) => {\n let value = this.inputElement.value;\n this.value = Number(value);\n\n this.stzhChange.emit({\n component: \"stzh-imagecomparison\",\n originalEvent: event,\n value: this.value\n });\n }\n\n async componentWillLoad() {\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"imagecomparison\");\n }\n }\n\n render() {\n const classes = {\n \"stzh-imagecomparison\": true,\n };\n\n return (\n <Host\n aria-roledescription={this.localization.label}\n style={{\n '--exposure': `${this.value.toString()}%`\n }}\n >\n <div class={classes}>\n <div class=\"stzh-imagecomparison__element\">\n <slot name=\"image-before\"></slot>\n <slot name=\"image-after\"></slot>\n\n <label\n class=\"stzh-imagecomparison__label\"\n aria-label={this.label || this.localization.label}\n aria-describedby={this.a11yDescribedby || null}\n >\n <div class=\"stzh-imagecomparison__slider-icon-wrapper\">\n <stzh-icon\n class=\"stzh-imagecomparison__slider-icon-left\"\n name=\"angle-left\">\n </stzh-icon>\n <stzh-icon\n class=\"stzh-imagecomparison__slider-icon-right\"\n name=\"angle-right\">\n </stzh-icon>\n </div>\n <div class=\"stzh-imagecomparison__slider-line\"></div>\n\n <input\n type=\"range\"\n class=\"stzh-imagecomparison__control\"\n min=\"0\"\n max=\"100\"\n ref={(el) => (this.inputElement = el as HTMLInputElement)}\n onInput={this.handleInput}\n />\n </label>\n\n <div class=\"stzh-imagecomparison__hint-wrapper\">\n <span class=\"stzh-imagecomparison__hint-left\">\n {this.hintLeft ? this.hintLeft : <slot name=\"hint-left\"></slot>}\n </span>\n <span class=\"stzh-imagecomparison__hint-right\">\n {this.hintRight ? this.hintRight : <slot name=\"hint-right\"></slot>}\n </span>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n\n"],"mappings":"gEAAA,MAAMA,EAAyB,moI,MC6BlBC,EAAmB,M,gEA0BtBC,KAAAC,YAAeC,IACrB,IAAIC,EAAQH,KAAKI,aAAaD,MAC9BH,KAAKG,MAAQE,OAAOF,GAEpBH,KAAKM,WAAWC,KAAK,CACnBC,UAAW,uBACXC,cAAeP,EACfC,MAAOH,KAAKG,OACZ,E,0CA7BuB,G,eAGC,G,WAGa,G,0CAM0B,E,CAoBnE,uBAAMO,GACJ,IAAKV,KAAKW,aAAc,CACtBX,KAAKW,mBAAqBC,OAAOC,eAAeC,MAAMC,kBAAkBf,KAAKgB,QAAS,kB,EAI1F,MAAAC,GACE,MAAMC,EAAU,CACd,uBAAwB,MAG1B,OACEC,EAACC,EAAI,wBACmBpB,KAAKW,aAAaU,MACxCC,MAAO,CACL,aAAc,GAAGtB,KAAKG,MAAMoB,gBAG9BJ,EAAA,OAAKK,MAAON,GACVC,EAAA,OAAKK,MAAM,iCACTL,EAAA,QAAMM,KAAK,iBACXN,EAAA,QAAMM,KAAK,gBAEXN,EAAA,SACEK,MAAM,8BAA6B,aACvBxB,KAAKqB,OAASrB,KAAKW,aAAaU,MAAK,mBAC/BrB,KAAK0B,iBAAmB,MAE1CP,EAAA,OAAKK,MAAM,6CACTL,EAAA,aACEK,MAAM,yCACNC,KAAK,eAEPN,EAAA,aACEK,MAAM,0CACNC,KAAK,iBAGTN,EAAA,OAAKK,MAAM,sCAEXL,EAAA,SACEQ,KAAK,QACLH,MAAM,gCACNI,IAAI,IACJC,IAAI,MACJC,IAAMC,GAAQ/B,KAAKI,aAAe2B,EAClCC,QAAShC,KAAKC,eAIlBkB,EAAA,OAAKK,MAAM,sCACTL,EAAA,QAAMK,MAAM,mCACTxB,KAAKiC,SAAWjC,KAAKiC,SAAWd,EAAA,QAAMM,KAAK,eAE9CN,EAAA,QAAMK,MAAM,oCACTxB,KAAKkC,UAAYlC,KAAKkC,UAAYf,EAAA,QAAMM,KAAK,mB"}

package/dist/stzh-components/p-eb79f3ed.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as t,c as s,h as i,a as e,g as n}from"./p-c7bfac7a.js";import{t as a}from"./p-41529de9.js";import{p as h,a as p}from"./p-23d404e1.js";import{h as o}from"./p-7e304ea3.js";import"./p-9b063923.js";const r=".sc-stzh-appointments-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-appointments-h{display:none}.sc-stzh-appointments-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-appointments-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-appointments-h .sc-stzh-appointments,.sc-stzh-appointments-h .sc-stzh-appointments::before,.sc-stzh-appointments-h *.sc-stzh-appointments::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-appointments-h .has-focus.sc-stzh-appointments{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-appointments-h .stzh-fylingfocus-focused.sc-stzh-appointments{outline-style:none !important}.sc-stzh-appointments-h .stzh-fylingfocus-focused.sc-stzh-appointments::-moz-focus-inner{border:0 !important}.sc-stzh-appointments-h{--background-color:var(--stzh-color-secondary10)}.stzh-appointments__heading.sc-stzh-appointments:not(:empty){padding-bottom:var(--stzh-space-xsmall);margin-bottom:var(--stzh-space-xsmall)}@media screen and (min-width: 900px){.stzh-appointments__heading.sc-stzh-appointments:not(:empty){padding-bottom:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.stzh-appointments__heading.sc-stzh-appointments:not(:empty){padding-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 600px){.stzh-appointments__heading.sc-stzh-appointments:not(:empty){margin-bottom:var(--stzh-space-small)}}@media screen and (min-width: 900px){.stzh-appointments__heading.sc-stzh-appointments:not(:empty){margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-appointments__heading.sc-stzh-appointments:not(:empty){margin-bottom:var(--stzh-space-xlarge)}}.stzh-appointments__wrapper.sc-stzh-appointments{padding-top:var(--stzh-space-medium);padding-bottom:var(--stzh-space-medium);display:flex;flex-direction:column;padding-left:var(--stzh-space-large);padding-right:var(--stzh-space-large);background-color:var(--background-color)}@media screen and (min-width: 600px){.stzh-appointments__wrapper.sc-stzh-appointments{padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-appointments__wrapper.sc-stzh-appointments{padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-appointments__wrapper.sc-stzh-appointments{padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){.stzh-appointments__wrapper.sc-stzh-appointments{padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-appointments__wrapper.sc-stzh-appointments{padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-appointments__wrapper.sc-stzh-appointments{padding-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){.stzh-appointments__wrapper.sc-stzh-appointments{flex-direction:row}}.stzh-appointments__calendar-wrapper.sc-stzh-appointments{display:flex;flex-direction:column}@media screen and (min-width: 900px){.stzh-appointments__calendar-wrapper.sc-stzh-appointments{margin-right:var(--stzh-space-xxlarge)}}.stzh-appointments__appointments-wrapper.sc-stzh-appointments{flex-grow:1;display:flex;flex-direction:column}.stzh-appointments__calendar-title-wrapper.sc-stzh-appointments,.stzh-appointments__appointments-title-wrapper.sc-stzh-appointments{margin-bottom:var(--stzh-space-small);display:flex;align-items:center;justify-content:space-between}@media screen and (min-width: 900px){.stzh-appointments__calendar-title-wrapper.sc-stzh-appointments,.stzh-appointments__appointments-title-wrapper.sc-stzh-appointments{margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-appointments__calendar-title-wrapper.sc-stzh-appointments,.stzh-appointments__appointments-title-wrapper.sc-stzh-appointments{margin-bottom:var(--stzh-space-large)}}.stzh-appointments__calendar-title.sc-stzh-appointments,.stzh-appointments__appointments-title.sc-stzh-appointments{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);color:var(--stzh-color-primary70);display:flex;align-items:center}.stzh-appointments__calendar-icon.sc-stzh-appointments,.stzh-appointments__appointments-icon.sc-stzh-appointments{--size:var(--stzh-icon-size-large);margin-right:var(--stzh-space-xsmall)}.stzh-appointments__calendar-content.sc-stzh-appointments,.stzh-appointments__calendar-content-medium.sc-stzh-appointments{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-appointments__calendar-content.sc-stzh-appointments{display:none}}.stzh-appointments__calendar-content-medium.sc-stzh-appointments{display:none;background-color:var(--stzh-color-white);padding-bottom:var(--stzh-space-medium)}@media screen and (min-width: 900px){.stzh-appointments__calendar-content-medium.sc-stzh-appointments{display:block}}.stzh-appointments__appointments-content.sc-stzh-appointments{flex-grow:1}.stzh-appointments__appointments-radiogroup.sc-stzh-appointments{margin-top:var(--stzh-space-xsmall);margin-bottom:var(--stzh-space-xsmall)}.stzh-appointments__more-link.sc-stzh-appointments{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);margin-top:var(--stzh-space-medium)}.stzh-appointments--has-calendar.sc-stzh-appointments .stzh-appointments__appointments-wrapper.sc-stzh-appointments{margin-top:var(--stzh-space-large)}@media screen and (min-width: 900px){.stzh-appointments--has-calendar.sc-stzh-appointments .stzh-appointments__appointments-wrapper.sc-stzh-appointments{margin-top:0}}";const m=class{constructor(i){t(this,i);this.stzhChange=s(this,"stzhChange",7);this.showMoreLink=false;this.moreItemsLeft=0;this.showCalendar=false;this.showSort=false;this.showSortStart=false;this.showSortPlace=false;this.showAppointmentsTitle=false;this.allAppointsmentOnSameDay=true;this.sortOptions=[];this.isDateDisabled=t=>{const s=!!this._appointments.find((s=>s.start.getFullYear()===t.getFullYear()&&s.start.getMonth()===t.getMonth()&&s.start.getDate()===t.getDate()));return!s};this.onNextActiveDateClick=async()=>{if(this.nextDate){this.currentDate=this.nextDate;const t=await this.datepickerElement.getPopover();if(t){t.hide()}}};this.onMoreClick=()=>{this.showItems=this.stepItems+this.showItems;const t=this.inputElement.querySelector("stzh-radio");t.focus()};this.onDropdownChange=async t=>{const s=t.target;const i=await s.getValue();if(i){this.sortBy=i}};this.onDatepickerChange=t=>{if(t.detail.component!=="stzh-datepicker"\|\|!t.detail.valueAsDate){return}this.currentDate=t.detail.valueAsDate;this.showItems=this._initialShowItems};this.onRadioChange=t=>{this.value=t.detail.value;this.stzhChange.emit({component:"stzh-appointments",value:this.value})};this.localization=undefined;this.sortBy="start";this.appointments=[];this.currentDate=undefined;this.value="";this.name="appointment";this.showItems=5;this.stepItems=5;this.calendarTitle="";this.appointmentsTitle="";this.dateAdapter=undefined}dateAdapterWatcher(t){if(!t){this.dateAdapter=window.stzhComponents.utils.createFormatParseAdapter(this.localization.$formats,this.localization.$globals)}}currentDateWatcher(t){if(!t){this._currentDate=this.dateByValue\|\|this.earliestDate;if(!this.dateByValue){this.setValueToFirstAppointmentOfCurrentDate()}}else if(typeof t==="string"){this._currentDate=h(t);this.setValueToFirstAppointmentOfCurrentDate()}else{this._currentDate=t;this.setValueToFirstAppointmentOfCurrentDate()}}sortByWatcher(){this.setValueToFirstAppointmentOfCurrentDate()}valueWatcher(){this.updateDateByValue();this.currentDateWatcher(this.currentDate)}appointmentsWatcher(t){if(typeof t==="string"){this._appointments=JSON.parse(t)}else{this._appointments=t}this._appointments=this._appointments.map((t=>Object.assign(Object.assign({},t),{start:new Date(t.start),end:new Date(t.end)})));if(this._appointments.length>0){this._appointments.sort(((t,s)=>t["start"]>s["start"]?1:-1));this.earliestDate=this._appointments[0].start;this.latestDate=this._appointments[this._appointments.length-1].start;this.updateDateByValue()}if(this._appointments.length>1){const t=this._appointments[0].start;this.allAppointsmentOnSameDay=this._appointments.map((t=>t.start)).every((s=>`${s.getFullYear()}-${s.getMonth()}-${s.getDate()}`===`${t.getFullYear()}-${t.getMonth()}-${t.getDate()}`))}this.showCalendar=!this.allAppointsmentOnSameDay;this.showAppointmentsTitle=this._appointments.length>1;this.currentDateWatcher(this.currentDate)}updateDateByValue(){this.dateByValue=this.value&&this._appointments.find((t=>t.value===this.value)).start}getCurrentDateAppointments(){let t=0;const s=this._appointments.filter(((s,i)=>{const e=s.start.getFullYear()===this._currentDate.getFullYear()&&s.start.getMonth()===this._currentDate.getMonth()&&s.start.getDate()===this._currentDate.getDate();if(e){t=i}return e}));if(this._appointments[t+1]){this.nextDate=this._appointments[t+1].start}else{this.nextDate=null}s.sort(((t,s)=>t[this.sortBy]>s[this.sortBy]?1:-1));return s}setValueToFirstAppointmentOfCurrentDate(){const t=this.getCurrentDateAppointments().filter((t=>!t.disabled));if(t.length>0){this.value=t[0].value;this.stzhChange.emit({component:"stzh-appointments",value:this.value})}}async componentWillLoad(){this._initialShowItems=this.showItems;this.appointmentsWatcher(this.appointments);if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"appointments")}this.dateAdapterWatcher(this.dateAdapter)}componentWillRender(){const t=this.getCurrentDateAppointments();this.appointmentsShown=t.slice(0,this.showItems);this.showMoreLink=this.showItems<t.length;this.moreItemsLeft=t.length-this.showItems;this.showSortStart=t.map((t=>this.dateAdapter.format(t.start,"time"))).filter(((t,s,i)=>i.indexOf(t)==s)).length>1;this.showSortPlace=t.map((t=>t.place)).filter(((t,s,i)=>i.indexOf(t)==s)).length>1;this.sortOptions=[];if(this.showSortStart){this.sortOptions.push({text:this.localization.sortByTime,value:"start"})}if(this.showSortPlace){this.sortOptions.push({text:this.localization.sortByPlace,value:"place"})}this.showSort=this.appointmentsShown.length>1;this._sortBy=this.showSortStart&&!this.showSortPlace&&"start"\|\|!this.showSortStart&&this.showSortPlace&&"place"\|\|this.sortBy}componentDidRender(){if(this.datepickerElement){this.datepickerElement.setDate(this._currentDate)}if(this.datepickerElementMedium){this.datepickerElementMedium.setDate(this._currentDate)}}render(){const t=o(this.element,"heading");const s={"stzh-appointments":true,"stzh-appointments--has-calendar":this.showCalendar,"stzh-appointments--has-appointments-title":this.showAppointmentsTitle,"stzh-appointments--has-sort":this.showSort};return i(e,{"has-heading":t},i("div",{class:s},i("div",{class:"stzh-appointments__heading"},i("slot",{name:"heading"})),i("div",{class:"stzh-appointments__wrapper"},this.showCalendar&&i("div",{class:"stzh-appointments__calendar-wrapper"},i("div",{class:"stzh-appointments__calendar-title-wrapper"},i("div",{class:"stzh-appointments__calendar-title"},i("stzh-icon",{class:"stzh-appointments__calendar-icon",name:"calendar"}),i("span",{class:"stzh-appointments__calendar-title-text"},this.calendarTitle\|\|this.localization.calendarTitle))),i("div",{class:"stzh-appointments__calendar-content"},i("stzh-datepicker",{"hide-optional":true,ref:t=>this.datepickerElement=t,onStzhChange:this.onDatepickerChange,label:this.localization.datepickerLabel,calendarIsDateDisabled:this.isDateDisabled,calendarMin:p(this.earliestDate),calendarMax:p(this.latestDate)},i("stzh-link",{slot:"action",size:"inherit",disabled:!this.nextDate,onClick:this.onNextActiveDateClick},this.localization.nextDayWithAppointments))),i("div",{class:"stzh-appointments__calendar-content-medium"},i("stzh-datepicker",{"hide-optional":true,ref:t=>this.datepickerElementMedium=t,onStzhChange:this.onDatepickerChange,inline:true,calendarIsDateDisabled:this.isDateDisabled,calendarMin:p(this.earliestDate),calendarMax:p(this.latestDate)},this.nextDate&&i("stzh-link",{slot:"action",size:"inherit",onClick:this.onNextActiveDateClick},this.localization.nextDayWithAppointments)))),i("div",{class:"stzh-appointments__appointments-wrapper"},this.showAppointmentsTitle&&i("div",{class:"stzh-appointments__appointments-title-wrapper"},i("div",{class:"stzh-appointments__appointments-title"},i("stzh-icon",{class:"stzh-appointments__appointments-icon",name:"clock"}),i("span",{class:"stzh-appointments__appointments-title-text"},this.appointmentsTitle\|\|this.localization.appointmentsTitle)),this.showSort&&i("div",{class:"stzh-appointments__sort"},i("stzh-dropdown",{"hide-optional":true,inline:true,"no-search":true,class:"stzh-appointments__sort-dropdown",variant:"plain",size:"small",sizeMedium:"tiny",items:[this._sortBy],options:this.sortOptions,onStzhChange:this.onDropdownChange}))),i("div",{class:"stzh-appointments__appointments-content"},i("stzh-radiogroup",{class:"stzh-appointments__appointments-radiogroup",ref:t=>this.inputElement=t,legend:this.localization.inputLegend,"hide-legend":true,name:this.name,value:this.value,preventUpdateProperties:["disabled"]},this.appointmentsShown.map((t=>i("stzh-radio",{onStzhChange:this.onRadioChange,value:t.value,disabled:typeof t.disabled!=="undefined"?t.disabled:false},i("stzh-text",{font:"heavy",size:"centi"},!this.showCalendar&&i("span",null,this.dateAdapter.format(t.start,"dateLong"),", "),this.dateAdapter.formatSpan(t.start,t.end,"time")),i("stzh-text",{size:"milli"},t.caption))))),this.showMoreLink&&i("stzh-link",{class:"stzh-appointments__more-link",size:"inherit",onClick:this.onMoreClick},a(this.localization.moreTextItems,this.moreItemsLeft>this.stepItems?this.stepItems:this.moreItemsLeft)))))))}get element(){return n(this)}static get watchers(){return{dateAdapter:["dateAdapterWatcher"],currentDate:["currentDateWatcher"],sortBy:["sortByWatcher"],value:["valueWatcher"],appointments:["appointmentsWatcher"]}}};m.style=r;export{m as stzh_appointments};
2	+ //# sourceMappingURL=p-eb79f3ed.entry.js.map