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

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (663) hide show

package/dist/stzh-components/{p-17de3017.entry.js.map → p-e5cfdb8a.entry.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["stzhPopoverCss","ANIMATION_SHOW_DURATION","ANIMATION_HIDE_DURATION","ANIMATION_SHOW_DURATION_SMALL","ANIMATION_HIDE_DURATION_SMALL","animationContentWrapperShow","isSmall","media","matches","keyframes","opacity","options","duration","easing","animationContentWrapperHide","animationDialogShow","transform","animationDialogHide","keyCode","ESC","CLASS_BODY_OPEN","popoverCounter","StzhPopover","this","initialTouchX","initialTouchY","handleKeydown","event","hide","onClickTrigger","toggle","computePosition","async","middleware","offset","mainAxis","distance","crossAxis","skidding","flip","padding","shift","variant","push","arrow","element","arrowElement","x","y","strategy","placement","middlewareData","triggerFirstElement","dialogElement","computedPlacement","Object","assign","style","position","left","top","handleTouchStart","touch","changedTouches","pageX","pageY","handleTouchEnd","distX","distY","threshold","isYSwipe","Math","abs","init","trigger","_a","triggerElement","firstElementChild","defaultSlot","Array","from","children","find","child","hasAttribute","addEventListener","show","open","toggledByMethod","waitForEvent","update","handleOutsideClick","isClickOutside","target","contains","isClickTrigger","openWatcher","newValue","stzhOpen","emit","component","animationShow","animationShowDialog","Promise","all","stopAnimations","contentWrapperElement","contentElement","willChange","hidden","animateTo","stzhOpened","stzhClose","animationHide","animationHideDialog","stzhClosed","distanceWatcher","componentWillLoad","id","localization","window","stzhComponents","utils","fetchTranslations","popoverShown","document","body","classList","add","isStzh","isStzhElement","setAttribute","trap","activate","popoverHidden","remove","deactivate","componentDidRender","getAttribute","label","componentDidUpdate","updateContainerElements","componentDidLoad","autoUpdateCleanup","autoUpdate","createFocusTrap","fallbackFocus","clickOutsideDeactivates","returnFocusOnDeactivate","connectedCallback","observer","MutationObserver","observe","childList","subtree","disconnectedCallback","disconnect","removeEventListener","render","classes","fullwidth","size","h","Host","class","onTouchStart","onTouchEnd","ref","el","role","tabindex","onKeyDown","innerHTML","Arrow","name","onClick","type","close","stzhTextCss","StzhText","lead","font","curve","sizeSmall","sizeMedium","sizeLarge","sizeUltra"],"sources":["src/components/stzh-popover/stzh-popover.scss?tag=stzh-popover&encapsulation=scoped","src/components/stzh-popover/stzh-popover.tsx","src/components/stzh-text/stzh-text.scss?tag=stzh-text&encapsulation=scoped","src/components/stzh-text/stzh-text.tsx"],"sourcesContent":["/*\n @prop --width: Width of popover above small breakpoint\n * @prop --min-width: Minimum width of popover above small breakpoint\n * @prop --max-width: Maximum width of popover above small breakpoint\n * @prop --padding: Padding of popover\n * @prop --content-padding: Padding of popover content\n * @prop --border-radius: Border radius of popover\n * @prop --backdrop-opacity: Opacity of popover backdrop (used on mikro breakpoint)\n \n @prop --stzh-popover-width: Global: Width of popover above small breakpoint (default `223px`)\n * @prop --stzh-popover-min-width: Global: Minimum width of popover above small breakpoint (default `initial`)\n * @prop --stzh-popover-max-width: Global: Maximum width of popover above small breakpoint (default `initial`)\n * @prop --stzh-popover-padding: Global: Padding of popover (default `0px`)\n * @prop --stzh-popover-content-padding: Global: Padding of popover content (default `8px 0px`)\n * @prop --stzh-popover-border-radius: Global: Border radius of popover above small breakpoint (default `3px`)\n \n @prop --stzh-dialog-backdrop-opacity: Global: Opacity of backdrops\n * @prop --stzh-dialog-backdrop-background-color: Global: Background color of backdrops\n /\n\n:host {\n display: contents;\n\n --color: #{$colorBlack};\n --width: #{$popoverWidth};\n --min-width: #{$popoverMinWidth};\n --max-width: #{$popoverMaxWidth};\n --height: auto;\n --min-height: initial;\n --max-height: initial;\n --padding: #{$popoverPadding};\n --content-padding: #{$popoverContentPadding};\n --border-radius: #{$popoverBorderRadius};\n --background-color: #{$popoverBackgroundColor};\n --backdrop-opacity: #{$dialogBackdropOpacity};\n --backdrop-background-color: #{$dialogBackdropBackgroundColor};\n\n &[size=\"large\"] {\n --content-padding: #{$popoverLargeContentPadding};\n }\n\n &[variant=\"secondary\"] {\n --background-color: #{$colorSecondary20};\n }\n\n &[variant=\"tooltip\"] {\n --width: #{$tooltipWidth};\n --min-width: #{$tooltipMinWidth};\n --max-width: #{$tooltipMaxWidth};\n --content-padding: #{space('small')} #{space('large')};\n --border-radius: #{$tooltipBorderRadius};\n\n @include mq($from: small) {\n --content-padding: #{$tooltipPadding};\n --color: #{$colorWhite};\n --link-color: #{$colorWhite};\n --hover-link-color: #{$colorWhite70op};\n --background-color: #{$colorCoolgrey60};\n }\n }\n}\n\n.stzh-popover {\n @include tooltip-arrow;\n display: contents;\n\n &__trigger {\n display: contents;\n }\n\n &__content-wrapper {\n // position: absolute;\n // width: 100%;\n // height: 100%;\n // pointer-events: none;\n display: contents;\n\n @include mq($to: small) {\n z-index: $zIndexDialog;\n display: flex;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n flex-direction: column;\n align-items: stretch;\n justify-content: stretch;\n }\n }\n\n &__backdrop {\n display: contents;\n\n @include mq($to: small) {\n z-index: 1;\n position: absolute;\n display: block;\n top: 0px;\n left: 0px;\n width: 100%;\n height: 100%;\n overflow-x: hidden;\n overflow-y: auto;\n text-align: center;\n background-color: var(--backdrop-background-color);\n opacity: var(--backdrop-opacity);\n }\n }\n\n &__content {\n // pointer-events: all;\n display: contents;\n\n @include mq($to: small) {\n z-index: 2;\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n flex-grow: 1;\n overflow: auto;\n }\n }\n\n &__dialog {\n margin-top: auto;\n width: 100%;\n overflow: visible;\n border-top-left-radius: 2px;\n border-top-right-radius: 2px;\n background-color: var(--background-color);\n touch-action: none;\n outline: none;\n border-bottom: 2px solid $colorOldGrey13;\n color: var(--color);\n\n --stzh-base-color: var(--color);\n --stzh-link-color: var(--link-color);\n // TODO: check with designer\n --stzh-link-hover-color: var(--hover-link-color);\n\n @include mq($from: small) {\n z-index: $zIndexPopover;\n position: absolute;\n display: flex;\n width: var(--width);\n min-width: var(--min-width);\n max-width: var(--max-width);\n // max-width: calc(100vw - var(--stzh-scrollbar-width) - #{space('small')});\n height: var(--height);\n min-height: var(--min-height);\n max-height: var(--max-height);\n left: auto;\n right: auto;\n bottom: auto;\n border-radius: var(--border-radius);\n box-shadow: $boxShadowPopover;\n border: none;\n }\n }\n\n &__content-inner,\n &__content-slot-wrapper {\n display: flex;\n flex-direction: column;\n width: 100%;\n }\n\n &__content-slot-wrapper {\n padding: var(--padding);\n }\n\n &__content-slot {\n overflow-y: auto;\n overflow-x: hidden;\n overflow-scrolling: touch;\n padding: var(--content-padding);\n }\n\n &__action-slot {\n display: flex;\n flex-direction: column;\n\n // &:not(:empty) {\n // margin: space('xsmall') space('small');\n // margin-bottom: space('medium');\n // }\n }\n\n &__label-wrapper {\n display: flex;\n align-items: center;\n padding: space('small') space('large');\n padding-right: space('medium');\n border-bottom: 1px solid $baseBorderColor;\n color: $colorOldGrey70;\n\n @include mq($from: small) {\n padding: 0;\n border-bottom: 0;\n }\n }\n\n &__label {\n @include font('heavy');\n @include fontCurve('p2');\n margin: 0;\n margin-right: space('small');\n\n @include mq($from: small) {\n @include visuallyhidden;\n }\n }\n\n &__close {\n visibility: $popoverCloseVisibility;\n cursor: pointer;\n display: flex;\n appearance: none;\n font-family: inherit;\n border: none;\n background-color: transparent;\n padding: 0;\n margin-left: auto;\n border-radius: 50%;\n color: $baseLeadColor;\n padding: space('xxsmall');\n }\n\n &__icon {\n --size: #{iconSize('xsmall')};\n }\n\n &__arrow {\n position: absolute;\n display: none;\n\n @include mq($from: small) {\n display: flex;\n }\n }\n\n &__vhidden {\n @include visuallyhidden;\n }\n\n / Only non tooltip variants /\n\n &--default &__close,\n &--secondary &__close {\n &:focus {\n box-shadow: 0 0 0 1px $colorPrimary;\n }\n\n @include mq($from: small) {\n @include visuallyhiddenFocusable;\n position: absolute;\n top: 0;\n right: 0;\n transform: translate(30%, -30%);\n background-color: $colorOldGrey5;\n }\n }\n\n / Tooltip variant /\n\n &--tooltip &__content-inner {\n @include mq($from: small) {\n flex-direction: row-reverse;\n align-items: flex-start;\n }\n }\n\n &--tooltip &__close {\n visibility: visible;\n\n @include mq($from: small) {\n @include tooltip__close;\n }\n }\n\n &--tooltip &__icon {\n @include mq($from: small) {\n @include tooltip__icon;\n }\n }\n\n &--tooltip &__dialog {\n @include mq($from: small) {\n @include tooltip-dropshadow;\n }\n }\n\n &--tooltip &__content-slot {\n @include mq($from: small) {\n @include tooltip-fontsize;\n }\n }\n\n / Has fullwidth popover /\n\n &--popover-fullwidth-horizontal &__dialog {\n @include mq($from: small) {\n left: 0 !important;\n right: 0 !important;\n width: 100%;\n }\n }\n\n &--popover-fullwidth-vertical &__dialog {\n @include mq($from: small) {\n top: 0 !important;\n bottom: 0 !important;\n height: 100%;\n }\n }\n}\n","import {\n Host,\n Element,\n Component,\n Prop,\n Listen,\n Event,\n EventEmitter,\n h,\n Method,\n State,\n Watch,\n} from \"@stencil/core\";\n\nimport {\n StzhPopoverOpenEvent,\n StzhPopoverOpenedEvent,\n StzhPopoverCloseEvent,\n StzhPopoverClosedEvent\n} from \"../../index\";\n\nimport {\n computePosition,\n offset,\n shift,\n flip,\n arrow,\n autoUpdate,\n Placement,\n} from \"@floating-ui/dom\";\n\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\nimport { isStzhElement } from \"../../utils/utils\";\nimport { media } from \"../../utils/media-utils\";\nimport { waitForEvent } from \"../../utils/event-utils\";\nimport { stopAnimations, animateTo } from \"../../utils/animation-utils\";\n\nimport { StzhPopoverLocalizedText } from \"./stzh-popover.localization\";\n\nimport Arrow from \"../stzh-tooltip/assets/arrow.svg\";\n\nconst ANIMATION_SHOW_DURATION = 200;\nconst ANIMATION_HIDE_DURATION = 300;\nconst ANIMATION_SHOW_DURATION_SMALL = 100;\nconst ANIMATION_HIDE_DURATION_SMALL = 200;\n\nfunction animationContentWrapperShow() {\n const isSmall = media(\"small\").matches;\n return {\n keyframes: [\n { opacity: \"0\" },\n { opacity: \"1\" }\n ],\n options: {\n duration: isSmall ? ANIMATION_SHOW_DURATION_SMALL : ANIMATION_SHOW_DURATION,\n easing: \"linear\"\n }\n };\n}\n\nfunction animationContentWrapperHide() {\n const isSmall = media(\"small\").matches;\n return {\n keyframes: [\n { opacity: \"1\" },\n { opacity: \"0\" }\n ],\n options: {\n duration: isSmall ? ANIMATION_HIDE_DURATION_SMALL : ANIMATION_HIDE_DURATION,\n easing: \"linear\"\n }\n };\n}\n\nfunction animationDialogShow() {\n const isSmall = media(\"small\").matches;\n return {\n keyframes: [\n { transform: isSmall ? \"translateY(-8px)\" : \"translateY(100%)\" },\n { transform: \"translateY(0px)\" }\n ],\n options: {\n duration: isSmall ? ANIMATION_SHOW_DURATION_SMALL : ANIMATION_SHOW_DURATION,\n easing: \"linear\"\n }\n };\n}\n\nfunction animationDialogHide() {\n const isSmall = media(\"small\").matches;\n return {\n keyframes: [\n { transform: \"translateY(0px)\" },\n { transform: isSmall ? \"translateY(-8px)\" : \"translateY(100%)\" }\n ],\n options: {\n duration: isSmall ? ANIMATION_HIDE_DURATION_SMALL : ANIMATION_HIDE_DURATION,\n easing: \"linear\"\n }\n };\n}\n\nconst keyCode = {\n ESC: 27\n};\n\nconst CLASS_BODY_OPEN = \"stzh-popover-open\";\n\nlet popoverCounter = 0;\n\n/\n @slot - Trigger element for popover\n * @slot content - Any element used as popover content\n * @slot action - `stzh-button` element\n * @slot label - Label for mobile view (alternative for label property)\n /\n@Component({\n tag: \"stzh-popover\",\n styleUrl: \"stzh-popover.scss\",\n scoped: true\n})\nexport class StzhPopover {\n /* Whether popover should be open /\n @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n /* Default placement of popover relative to trigger element /\n @Prop({ reflect: true }) placement: Placement = \"bottom\";\n\n /* Whether to stretch popover to fullwith of parent /\n @Prop({ reflect: true }) fullwidth: \"horizontal\" \| \"vertical\" \| \"\" = \"\";\n\n /* Variant /\n @Prop({ reflect: true }) variant: \"default\" \| \"secondary\" \| \"tooltip\" = \"default\";\n\n /* Size /\n @Prop({ reflect: true }) size: \"default\" \| \"large\" = \"default\";\n\n /* Shifting of popover content /\n @Prop() skidding: number = 0;\n\n /* Distance from popover content to trigger. \"8\" when default variant, \"16\" when tooltip variant, arrow height (8px) + spacing (4px) = 12. /\n @Prop() distance: number;\n\n /* Label for mobile view (use label slot as alternative) /\n @Prop() label: string = \"\";\n\n /* Position strategy /\n @Prop() strategy: \"absolute\" \| \"fixed\" = \"absolute\";\n\n /* Translation strings. /\n @Prop() localization: StzhPopoverLocalizedText;\n\n @Element() element: HTMLStzhPopoverElement;\n\n /* Popover open event /\n @Event() stzhOpen: EventEmitter<StzhPopoverOpenEvent>;\n\n /* Popover opened event (after animation) /\n @Event() stzhOpened: EventEmitter<StzhPopoverOpenedEvent>;\n\n /* Popover close event /\n @Event() stzhClose: EventEmitter<StzhPopoverCloseEvent>;\n\n /* Popover closed event (after animation) /\n @Event() stzhClosed: EventEmitter<StzhPopoverClosedEvent>;\n\n /* Show popover content /\n @Method()\n async show() {\n if (this.open) {\n return;\n }\n\n this.toggledByMethod = true;\n this.open = true;\n return waitForEvent(this.element, \"stzhOpened\");\n }\n\n /* Hide popover content /\n @Method()\n async hide() {\n if (!this.open) {\n return;\n }\n\n this.toggledByMethod = true;\n this.open = false;\n return waitForEvent(this.element, \"stzhClosed\");\n }\n\n /* Toggle popover content /\n @Method()\n async toggle() {\n if (this.open) {\n return await this.hide();\n } else {\n return await this.show();\n }\n }\n\n @Method()\n async update() {\n return await this.computePosition();\n }\n\n @Listen(\"click\", { target: \"document\", capture: true })\n handleOutsideClick(event: MouseEvent) {\n if (!this.open) {\n return\n }\n\n const isClickOutside = event.target !== this.dialogElement\n && this.dialogElement.contains(event.target as HTMLElement) === false\n\n const isClickTrigger = event.target === this.triggerElement\n \|\| this.triggerElement.contains(event.target as HTMLElement)\n\n if (isClickOutside && !isClickTrigger) {\n this.hide()\n }\n }\n\n @Watch(\"open\")\n async openWatcher(newValue: boolean) {\n if (!this.dialogElement) {\n return;\n }\n\n if (newValue) {\n if (this.toggledByMethod) {\n this.stzhOpen.emit({\n component: \"stzh-popover\",\n });\n }\n\n const animationShow = animationContentWrapperShow();\n const animationShowDialog = animationDialogShow();\n\n await Promise.all([\n stopAnimations(this.contentWrapperElement),\n stopAnimations(this.contentElement),\n stopAnimations(this.dialogElement)\n ]);\n\n // safari seems to need will-change,\n // otherwise it has problems animating the element with the drop shadow\n this.dialogElement.style.willChange = \"transform, opacity, position, top, left, bottom, right\";\n this.contentWrapperElement.hidden = false;\n\n await Promise.all([\n animateTo(\n media(\"small\").matches ? this.dialogElement : this.contentWrapperElement,\n animationShow.keyframes,\n animationShow.options\n ),\n animateTo(\n media(\"small\").matches ? this.dialogElement : this.contentElement,\n animationShowDialog.keyframes,\n animationShowDialog.options\n )\n ]);\n\n if (this.toggledByMethod) {\n this.stzhOpened.emit({\n component: \"stzh-popover\"\n });\n }\n } else {\n if (this.toggledByMethod) {\n this.stzhClose.emit({\n component: \"stzh-popover\",\n });\n }\n\n const animationHide = animationContentWrapperHide();\n const animationHideDialog = animationDialogHide();\n\n await Promise.all([\n stopAnimations(this.contentWrapperElement),\n stopAnimations(this.contentElement),\n stopAnimations(this.dialogElement)\n ]);\n\n await Promise.all([\n animateTo(\n media(\"small\").matches ? this.dialogElement : this.contentWrapperElement,\n animationHide.keyframes,\n animationHide.options\n ),\n animateTo(\n media(\"small\").matches ? this.dialogElement : this.contentElement,\n animationHideDialog.keyframes,\n animationHideDialog.options\n ),\n ]);\n\n this.contentWrapperElement.hidden = true;\n this.dialogElement.style.willChange = \"auto\";\n\n if (this.toggledByMethod) {\n this.stzhClosed.emit({\n component: \"stzh-popover\"\n });\n }\n }\n\n this.toggledByMethod = false;\n }\n\n @Watch(\"distance\")\n distanceWatcher(newValue: number) {\n if (typeof newValue === \"number\") {\n this.distance = newValue;\n } else {\n this.distance = this.variant === \"tooltip\" ? 12 : 8;\n }\n }\n\n @State() computedPlacement: Placement;\n\n private observer: MutationObserver;\n\n private contentWrapperElement: HTMLElement;\n private contentElement: HTMLElement;\n private arrowElement: HTMLElement;\n private triggerElement: HTMLElement;\n private triggerFirstElement: HTMLElement;\n private dialogElement: HTMLElement;\n private autoUpdateCleanup: Function;\n\n private initialTouchX: number = null\n private initialTouchY: number = null\n\n private id: string;\n private trap: FocusTrap;\n private toggledByMethod: boolean;\n\n private handleKeydown = (event: KeyboardEvent) => {\n if (event.keyCode === keyCode.ESC) {\n this.hide()\n }\n }\n\n private onClickTrigger = () => {\n this.toggle();\n }\n\n private computePosition = async () => {\n if (media(\"small\").matches) {\n const middleware = [\n offset({\n mainAxis: this.distance,\n crossAxis: this.skidding\n }),\n flip({\n padding: 5\n }),\n shift({\n padding: 5\n })\n ];\n\n if (this.variant === \"tooltip\") {\n middleware.push(\n arrow({\n element: this.arrowElement,\n padding: 5\n })\n );\n }\n\n const { x = 0, y = 0, strategy = \"absolute\", placement, middlewareData }\n = await computePosition(this.triggerFirstElement, this.dialogElement, {\n strategy: this.strategy,\n placement: this.placement,\n middleware,\n });\n\n this.computedPlacement = placement;\n\n Object.assign(this.dialogElement.style, {\n position: strategy,\n left: `${x}px`,\n top: `${y}px`,\n });\n\n if (this.variant === \"tooltip\") {\n Object.assign(this.arrowElement.style, {\n left: x != null ? `${middlewareData.arrow.x}px` : \"\",\n top: y != null ? `${middlewareData.arrow.y}px` : \"\",\n });\n }\n } else {\n Object.assign(this.dialogElement.style, {\n position: null,\n left: null,\n top: null,\n });\n\n if (this.variant === \"tooltip\") {\n Object.assign(this.arrowElement.style, {\n left: null,\n top: null,\n });\n }\n }\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 isYSwipe = Math.abs(distY) >= threshold\n && Math.abs(distX) <= threshold;\n\n if (isYSwipe) {\n this.hide();\n }\n\n this.initialTouchY = null\n this.initialTouchX = null\n }\n\n private init = () => {\n let trigger = this.triggerElement?.firstElementChild as HTMLElement;\n\n if (!trigger) {\n const defaultSlot = Array.from(this.element.children)\n .find(child => !child.hasAttribute(\"slot\")) as HTMLElement\n\n trigger = defaultSlot;\n }\n\n if (trigger) {\n this.triggerFirstElement = trigger;\n trigger.addEventListener(\"click\", this.onClickTrigger);\n }\n }\n\n async componentWillLoad() {\n this.id = `stzh-popover-${popoverCounter++}`;\n\n this.distanceWatcher(this.distance);\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"popover\");\n }\n }\n\n private popoverShown() {\n document.body.classList.add(CLASS_BODY_OPEN);\n\n const isStzh = isStzhElement(this.triggerFirstElement);\n\n this.triggerFirstElement\n .setAttribute(isStzh ? \"a11y-expanded\" : \"aria-expanded\", \"true\");\n\n if (this.trap) {\n this.trap.activate();\n }\n }\n\n private popoverHidden() {\n document.body.classList.remove(CLASS_BODY_OPEN);\n\n const isStzh = isStzhElement(this.triggerFirstElement);\n\n this.triggerFirstElement\n .setAttribute(isStzh ? \"a11y-expanded\" : \"aria-expanded\", \"false\");\n\n if (this.trap) {\n this.trap.deactivate();\n }\n }\n\n componentDidRender() {\n this.computePosition();\n this.open ? this.popoverShown() : this.popoverHidden();\n\n const isStzh = isStzhElement(this.triggerFirstElement);\n\n if ((isStzh && !this.triggerFirstElement.getAttribute(\"a11y-describedby\"))\n \|\| (!isStzh && !this.triggerFirstElement.getAttribute(\"aria-describedby\"))\n ) {\n this.triggerFirstElement\n .setAttribute(isStzh ? \"a11y-describedby\" : \"aria-describedby\", `${this.id}-trigger-description`);\n }\n\n if ((isStzh && !this.triggerFirstElement.getAttribute(\"a11y-label\"))\n \|\| (!isStzh && !this.triggerFirstElement.getAttribute(\"aria-label\"))\n ) {\n this.triggerFirstElement\n .setAttribute(isStzh ? \"a11y-label\" : \"aria-label\", this.label);\n }\n\n if ((isStzh && !this.triggerFirstElement.getAttribute(\"analytics-id\"))\n \|\| (!isStzh && !this.triggerFirstElement.getAttribute(\"s-object-id\"))\n ) {\n this.triggerFirstElement\n .setAttribute(isStzh ? \"analytics-id\" : \"s-object-id\", this.label);\n }\n }\n\n componentDidUpdate() {\n this.trap.updateContainerElements(this.dialogElement);\n }\n\n componentDidLoad() {\n this.autoUpdateCleanup = autoUpdate(\n this.triggerFirstElement,\n this.dialogElement,\n this.computePosition\n );\n\n this.contentWrapperElement.hidden = !this.open;\n\n this.trap = createFocusTrap(this.dialogElement, {\n fallbackFocus: this.dialogElement,\n clickOutsideDeactivates: true,\n returnFocusOnDeactivate: true\n });\n\n if (this.open) {\n this.popoverShown();\n }\n }\n\n connectedCallback() {\n this.init();\n\n this.observer = new MutationObserver(this.init);\n this.observer.observe(this.element, {\n childList: true,\n subtree: true\n });\n }\n\n disconnectedCallback() {\n if (this.observer) {\n this.observer.disconnect();\n }\n\n if (this.autoUpdateCleanup) {\n this.autoUpdateCleanup();\n }\n\n if (this.triggerFirstElement) {\n this.triggerFirstElement.removeEventListener(\"click\", this.onClickTrigger);\n }\n }\n\n render() {\n const classes = {\n \"stzh-popover\": true,\n [`stzh-popover--open`]: this.open,\n [`stzh-popover--placement-${this.computedPlacement}`]: !!this.computedPlacement,\n [`stzh-popover--fullwidth-${this.fullwidth}`]: !!this.fullwidth,\n [`stzh-popover--${this.size}`]: !!this.size,\n [`stzh-popover--${this.variant}`]: !!this.variant\n };\n\n return (\n <Host>\n <div\n class={classes}\n onTouchStart={this.handleTouchStart}\n onTouchEnd={this.handleTouchEnd}\n >\n <div\n ref={(el) => (this.triggerElement = el as HTMLDivElement)}\n class=\"stzh-popover__trigger\"\n >\n <slot></slot>\n </div>\n <div class=\"stzh-popover__vhidden\" id={`${this.id}-trigger-description`}>\n {this.localization.open}\n </div>\n <div\n ref={(el) => (this.contentWrapperElement = el as HTMLDivElement)}\n class=\"stzh-popover__content-wrapper\"\n >\n <div class=\"stzh-popover__backdrop\"></div>\n <div\n ref={(el) => (this.contentElement = el as HTMLDivElement)}\n class=\"stzh-popover__content\"\n >\n <div\n ref={(el) => (this.dialogElement = el as HTMLDivElement)}\n class=\"stzh-popover__dialog\"\n role=\"dialog\"\n tabindex=\"-1\"\n aria-modal=\"true\"\n aria-labelledby={this.label ? `${this.id}-label` : null}\n aria-hidden={this.open ? \"false\" : \"true\"}\n onKeyDown={this.handleKeydown}\n >\n {this.variant === \"tooltip\" &&\n <div\n class=\"stzh-popover__arrow\"\n ref={(el) => (this.arrowElement = el as HTMLDivElement)}\n innerHTML={Arrow}\n ></div>\n }\n <div class=\"stzh-popover__content-inner\">\n <div class=\"stzh-popover__label-wrapper\">\n <h2 id={`${this.id}-label`} class=\"stzh-popover__label\">\n {this.label ? this.label : <slot name=\"label\"></slot>}\n </h2>\n <button\n class=\"stzh-popover__close\"\n onClick={() => this.hide()}\n type=\"button\"\n >\n <stzh-icon name=\"close\" class=\"stzh-popover__icon\"></stzh-icon>\n <span class=\"stzh-popover__vhidden\">{this.localization.close}</span>\n </button>\n </div>\n <div class=\"stzh-popover__content-slot-wrapper\">\n <div class=\"stzh-popover__content-slot\">\n <slot name=\"content\"></slot>\n </div>\n <div class=\"stzh-popover__action-slot\">\n <slot name=\"action\"></slot>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n","/\n @prop --color: Text color (also `color` can be overwritten)\n * @prop --icon-size: Icon size\n * @prop --icon-vertical-align: Icon vertical alignment\n \n @prop --stzh-base-color: Global: Text color\n * @prop --stzh-base-lead-color: Global: Lead text color\n /\n\n:host {\n --icon-size: 1.25em;\n --icon-vertical-align: text-bottom;\n --color: #{$baseColor};\n --display: var(--stzh-text-display, block);\n\n width: 100%;\n color: var(--color);\n\n --grid-template-areas: var(\n --stzh-text-grid-template-areas,\n \"text text text text\"\n );\n\n --grid-template-columns: var(\n --stzh-text-grid-template-columns,\n #{$gridColumns}\n );\n\n @include mq($from: small) {\n --grid-template-areas: var(\n --stzh-text-grid-template-areas,\n \"text text text text\"\n );\n }\n\n @include mq($from: medium) {\n --grid-template-areas: var(\n --stzh-text-grid-template-areas,\n \"text text text text text text text text\"\n );\n\n --grid-template-columns: var(\n --stzh-text-grid-template-columns,\n #{$gridColumnsMedium}\n );\n }\n\n ::slotted(:first-child) {\n margin-top: 0 !important;\n }\n\n ::slotted(:last-child) {\n margin-bottom: 0 !important;\n }\n\n ::slotted(a),\n ::slotted( a) {\n color: $linkColor;\n transition: color $baseTransitionAnimationSpeed;\n border-radius: $buttonBorderRadius;\n text-underline-offset: $linkTextUnderlineOffset;\n text-decoration-line: $linkTextDecorationLine;\n text-decoration-thickness: $linkTextDecorationThickness;\n text-decoration-skip-ink: $linkTextDecorationSkipInk;\n\n &:hover {\n color: $linkHoverColor;\n text-decoration-line: $linkHoverTextDecorationLine;\n }\n\n &:hover {\n color: $linkHoverColor;\n }\n }\n\n ::slotted(b),\n ::slotted(strong),\n ::slotted(* b),\n ::slotted(* strong) {\n @include font('heavy');\n }\n\n ::slotted(i),\n ::slotted(em),\n ::slotted(* i),\n ::slotted(* em) {\n @include font;\n }\n\n &[lead]:not([lead=\"false\"]) {\n --color: #{$baseLeadColor};\n }\n\n &[color=\"primary\"] {\n --color: #{$colorPrimary70};\n }\n\n &[color=\"secondary\"] {\n --color: #{$colorSecondary60};\n }\n\n &[color=\"info\"] {\n --color: #{$textInfoColor};\n }\n\n &[color=\"inherit\"] {\n --color: inherit;\n }\n}\n\n.stzh-text {\n --stzh-icon-size: var(--icon-size);\n --stzh-icon-vertical-align: var(--icon-vertical-align);\n\n --stzh-list-font-size: \"\";\n --stzh-list-line-height: \"\";\n --stzh-list-letter-spacing: \"\";\n\n // default font styling without attributes\n @include fontCurve($textFontCurveDefault);\n @include gridGutter;\n display: var(--display);\n grid-template-areas: var(--grid-template-areas);\n grid-template-columns: var(--grid-template-columns);\n\n color: var(--color);\n\n &__text {\n grid-area: text;\n display: flex;\n }\n\n &__icon {\n flex-shrink: 0;\n\n &:not(:empty) {\n margin-right: 0.25em;\n }\n }\n\n &__text-inner {\n flex-grow: 1;\n }\n\n /* Lead variant /\n\n &--is-lead {\n @include font('heavy');\n @include fontCurve('lead', 'lead');\n }\n\n / Font variants /\n\n @each $font, $value in $fonts {\n &--font-#{$font} {\n @include font($font);\n }\n }\n\n / Curve variants /\n\n &--curve-none {\n font-size: inherit;\n }\n\n @each $fontCurveName, $config in $fontCurves {\n &--curve-#{$fontCurveName} {\n @include fontCurve($fontCurveName);\n }\n }\n\n / Size variants when consumer wants to overwrite predefined font curves /\n\n @each $size, $value in $fontSizes {\n &--size-#{$size} {\n @include fontSize($size);\n }\n }\n\n @each $breakpoint, $size in $breakpoints {\n @each $size, $value in $fontSizes {\n &--size-#{$breakpoint}-#{$size} {\n @include mq($from: $breakpoint) {\n @include fontSize($size);\n }\n }\n }\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n} from \"@stencil/core\";\n\nimport { Font } from \"../../index\";\n\n/\n @slot - Slot for text and icons\n * @slot icon - Slot for icon that should be on left side of the text (not inline)\n /\n@Component({\n tag: \"stzh-text\",\n styleUrl: \"stzh-text.scss\",\n scoped: true\n})\nexport class StzhText {\n /* Font used /\n @Prop() font: Font.Fonts = \"default\";\n\n /* Type of curve (see [Spacings docs page](/docs/tokens-typography--docs#curves) for more info). /\n @Prop({ reflect: true }) curve: Font.Curves = \"default\";\n\n /* Whether if text is lead text /\n @Prop({ reflect: true }) lead: boolean = false;\n\n /* Color used /\n @Prop({ reflect: true }) color: \"default\" \| \"primary\" \| \"secondary\" \| \"info\" \| \"inherit\" = \"default\";\n\n /* Manually overwrite font size applied by curve attribute (see [Spacings docs page](/docs/tokens-typography--docs#sizes) for more info). /\n @Prop() size: Font.Sizes \| \"inherit\" = \"inherit\";\n /* Manually overwrite font size applied by curve attribute above small breakpoint (see [Spacings docs page](/docs/tokens-typography--docs#sizes) for more info). /\n @Prop() sizeSmall: Font.Sizes \| \"inherit\" = \"inherit\";\n /* Manually overwrite font size applied by curve attribute above medium breakpoint (see [Spacings docs page](/docs/tokens-typography--docs#sizes) for more info). /\n @Prop() sizeMedium: Font.Sizes \| \"inherit\" = \"inherit\";\n /* Manually overwrite font size applied by curve attribute above large breakpoint (see [Spacings docs page](/docs/tokens-typography--docs#sizes) for more info). /\n @Prop() sizeLarge: Font.Sizes \| \"inherit\" = \"inherit\";\n /* Manually overwrite font size applied by curve attribute above ultra breakpoint (see [Spacings docs page](/docs/tokens-typography--docs#sizes) for more info). */\n @Prop() sizeUltra: Font.Sizes \| \"inherit\" = \"inherit\";\n\n render() {\n return (\n <Host>\n <div\n class={{\n \"stzh-text\": true,\n \"stzh-text--is-lead\": this.lead,\n [`stzh-text--font-${this.font}`]: !!this.font,\n [`stzh-text--curve-${this.curve}`]: !!this.curve,\n [`stzh-text--size-${this.size}`]: !!this.size,\n [`stzh-text--size-small-${this.sizeSmall}`]: !!this.sizeSmall,\n [`stzh-text--size-medium-${this.sizeMedium}`]: !!this.sizeMedium,\n [`stzh-text--size-large-${this.sizeLarge}`]: !!this.sizeLarge,\n [`stzh-text--size-ultra-${this.sizeUltra}`]: !!this.sizeUltra,\n }}\n >\n <div class=\"stzh-text__text\">\n <div class=\"stzh-text__icon\">\n <slot name=\"icon\"></slot>\n </div>\n <div class=\"stzh-text__text-inner\">\n <slot></slot>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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"}
1	+ {"version":3,"names":["stzhPopoverCss","ANIMATION_SHOW_DURATION","ANIMATION_HIDE_DURATION","ANIMATION_SHOW_DURATION_SMALL","ANIMATION_HIDE_DURATION_SMALL","animationContentWrapperShow","isSmall","media","matches","keyframes","opacity","options","duration","easing","animationContentWrapperHide","animationDialogShow","transform","animationDialogHide","keyCode","ESC","CLASS_BODY_OPEN","popoverCounter","StzhPopover","this","initialTouchX","initialTouchY","handleKeydown","event","hide","onClickTrigger","toggle","computePosition","async","middleware","offset","mainAxis","distance","crossAxis","skidding","flip","padding","shift","variant","push","arrow","element","arrowElement","x","y","strategy","placement","middlewareData","triggerFirstElement","dialogElement","computedPlacement","Object","assign","style","position","left","top","handleTouchStart","touch","changedTouches","pageX","pageY","handleTouchEnd","distX","distY","threshold","isYSwipe","Math","abs","init","trigger","_a","triggerElement","firstElementChild","defaultSlot","Array","from","children","find","child","hasAttribute","addEventListener","show","open","toggledByMethod","waitForEvent","update","handleOutsideClick","isClickOutside","target","contains","isClickTrigger","openWatcher","newValue","stzhOpen","emit","component","animationShow","animationShowDialog","Promise","all","stopAnimations","contentWrapperElement","contentElement","willChange","hidden","animateTo","stzhOpened","stzhClose","animationHide","animationHideDialog","stzhClosed","distanceWatcher","componentWillLoad","id","localization","window","stzhComponents","utils","fetchTranslations","popoverShown","document","body","classList","add","isStzh","isStzhElement","setAttribute","trap","activate","popoverHidden","remove","deactivate","componentDidRender","getAttribute","label","componentDidUpdate","updateContainerElements","componentDidLoad","autoUpdateCleanup","autoUpdate","createFocusTrap","fallbackFocus","clickOutsideDeactivates","returnFocusOnDeactivate","connectedCallback","observer","MutationObserver","observe","childList","subtree","disconnectedCallback","disconnect","removeEventListener","render","classes","fullwidth","size","h","Host","class","onTouchStart","onTouchEnd","ref","el","role","tabindex","onKeyDown","innerHTML","Arrow","name","onClick","type","close","stzhTextCss","StzhText","lead","font","curve","sizeSmall","sizeMedium","sizeLarge","sizeUltra"],"sources":["src/components/stzh-popover/stzh-popover.scss?tag=stzh-popover&encapsulation=scoped","src/components/stzh-popover/stzh-popover.tsx","src/components/stzh-text/stzh-text.scss?tag=stzh-text&encapsulation=scoped","src/components/stzh-text/stzh-text.tsx"],"sourcesContent":["/*\n @prop --width: Width of popover above small breakpoint\n * @prop --min-width: Minimum width of popover above small breakpoint\n * @prop --max-width: Maximum width of popover above small breakpoint\n * @prop --padding: Padding of popover\n * @prop --content-padding: Padding of popover content\n * @prop --border-radius: Border radius of popover\n * @prop --backdrop-opacity: Opacity of popover backdrop (used on mikro breakpoint)\n \n @prop --stzh-popover-width: Global: Width of popover above small breakpoint (default `223px`)\n * @prop --stzh-popover-min-width: Global: Minimum width of popover above small breakpoint (default `initial`)\n * @prop --stzh-popover-max-width: Global: Maximum width of popover above small breakpoint (default `initial`)\n * @prop --stzh-popover-padding: Global: Padding of popover (default `0px`)\n * @prop --stzh-popover-content-padding: Global: Padding of popover content (default `8px 0px`)\n * @prop --stzh-popover-border-radius: Global: Border radius of popover above small breakpoint (default `3px`)\n \n @prop --stzh-dialog-backdrop-opacity: Global: Opacity of backdrops\n * @prop --stzh-dialog-backdrop-background-color: Global: Background color of backdrops\n /\n\n:host {\n display: contents;\n\n --color: #{$colorBlack};\n --width: #{$popoverWidth};\n --min-width: #{$popoverMinWidth};\n --max-width: #{$popoverMaxWidth};\n --height: auto;\n --min-height: initial;\n --max-height: initial;\n --padding: #{$popoverPadding};\n --content-padding: #{$popoverContentPadding};\n --border-radius: #{$popoverBorderRadius};\n --background-color: #{$popoverBackgroundColor};\n --backdrop-opacity: #{$dialogBackdropOpacity};\n --backdrop-background-color: #{$dialogBackdropBackgroundColor};\n\n &[size=\"large\"] {\n --content-padding: #{$popoverLargeContentPadding};\n }\n\n &[variant=\"secondary\"] {\n --background-color: #{$colorSecondary20};\n }\n\n &[variant=\"tooltip\"] {\n --width: #{$tooltipWidth};\n --min-width: #{$tooltipMinWidth};\n --max-width: #{$tooltipMaxWidth};\n --content-padding: #{space('small')} #{space('large')};\n --border-radius: #{$tooltipBorderRadius};\n\n @include mq($from: small) {\n --content-padding: #{$tooltipPadding};\n --color: #{$colorWhite};\n --link-color: #{$colorWhite};\n --hover-link-color: #{$colorWhite70op};\n --background-color: #{$colorCoolgrey60};\n }\n }\n}\n\n.stzh-popover {\n @include tooltip-arrow;\n display: contents;\n\n &__trigger {\n display: contents;\n }\n\n &__content-wrapper {\n // position: absolute;\n // width: 100%;\n // height: 100%;\n // pointer-events: none;\n display: contents;\n\n @include mq($to: small) {\n z-index: $zIndexDialog;\n display: flex;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n flex-direction: column;\n align-items: stretch;\n justify-content: stretch;\n }\n }\n\n &__backdrop {\n display: contents;\n\n @include mq($to: small) {\n z-index: 1;\n position: absolute;\n display: block;\n top: 0px;\n left: 0px;\n width: 100%;\n height: 100%;\n overflow-x: hidden;\n overflow-y: auto;\n text-align: center;\n background-color: var(--backdrop-background-color);\n opacity: var(--backdrop-opacity);\n }\n }\n\n &__content {\n // pointer-events: all;\n display: contents;\n\n @include mq($to: small) {\n z-index: 2;\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n flex-grow: 1;\n overflow: auto;\n }\n }\n\n &__dialog {\n margin-top: auto;\n width: 100%;\n overflow: visible;\n border-top-left-radius: 2px;\n border-top-right-radius: 2px;\n background-color: var(--background-color);\n touch-action: none;\n outline: none;\n border-bottom: 2px solid $colorOldGrey13;\n color: var(--color);\n\n --stzh-base-color: var(--color);\n --stzh-link-color: var(--link-color);\n // TODO: check with designer\n --stzh-link-hover-color: var(--hover-link-color);\n\n @include mq($from: small) {\n z-index: $zIndexPopover;\n position: absolute;\n display: flex;\n width: var(--width);\n min-width: var(--min-width);\n max-width: var(--max-width);\n // max-width: calc(100vw - var(--stzh-scrollbar-width) - #{space('small')});\n height: var(--height);\n min-height: var(--min-height);\n max-height: var(--max-height);\n left: auto;\n right: auto;\n bottom: auto;\n border-radius: var(--border-radius);\n box-shadow: $boxShadowPopover;\n border: none;\n }\n }\n\n &__content-inner,\n &__content-slot-wrapper {\n display: flex;\n flex-direction: column;\n width: 100%;\n }\n\n &__content-slot-wrapper {\n padding: var(--padding);\n }\n\n &__content-slot {\n overflow-y: auto;\n overflow-x: hidden;\n overflow-scrolling: touch;\n padding: var(--content-padding);\n }\n\n &__action-slot {\n display: flex;\n flex-direction: column;\n\n // &:not(:empty) {\n // margin: space('xsmall') space('small');\n // margin-bottom: space('medium');\n // }\n }\n\n &__label-wrapper {\n display: flex;\n align-items: center;\n padding: space('small') space('large');\n padding-right: space('medium');\n border-bottom: 1px solid $baseBorderColor;\n color: $colorOldGrey70;\n\n @include mq($from: small) {\n padding: 0;\n border-bottom: 0;\n }\n }\n\n &__label {\n @include font('heavy');\n @include fontCurve('p2');\n margin: 0;\n margin-right: space('small');\n\n @include mq($from: small) {\n @include visuallyhidden;\n }\n }\n\n &__close {\n visibility: $popoverCloseVisibility;\n cursor: pointer;\n display: flex;\n appearance: none;\n font-family: inherit;\n border: none;\n background-color: transparent;\n padding: 0;\n margin-left: auto;\n border-radius: 50%;\n color: $baseLeadColor;\n padding: space('xxsmall');\n }\n\n &__icon {\n --size: #{iconSize('xsmall')};\n }\n\n &__arrow {\n position: absolute;\n display: none;\n\n @include mq($from: small) {\n display: flex;\n }\n }\n\n &__vhidden {\n @include visuallyhidden;\n }\n\n / Only non tooltip variants /\n\n &--default &__close,\n &--secondary &__close {\n &:focus {\n box-shadow: 0 0 0 1px $colorPrimary;\n }\n\n @include mq($from: small) {\n @include visuallyhiddenFocusable;\n position: absolute;\n top: 0;\n right: 0;\n transform: translate(30%, -30%);\n background-color: $colorOldGrey5;\n }\n }\n\n / Tooltip variant /\n\n &--tooltip &__content-inner {\n @include mq($from: small) {\n flex-direction: row-reverse;\n align-items: flex-start;\n }\n }\n\n &--tooltip &__close {\n visibility: visible;\n\n @include mq($from: small) {\n @include tooltip__close;\n }\n }\n\n &--tooltip &__icon {\n @include mq($from: small) {\n @include tooltip__icon;\n }\n }\n\n &--tooltip &__dialog {\n @include mq($from: small) {\n @include tooltip-dropshadow;\n }\n }\n\n &--tooltip &__content-slot {\n @include mq($from: small) {\n @include tooltip-fontsize;\n }\n }\n\n / Has fullwidth popover /\n\n &--popover-fullwidth-horizontal &__dialog {\n @include mq($from: small) {\n left: 0 !important;\n right: 0 !important;\n width: 100%;\n }\n }\n\n &--popover-fullwidth-vertical &__dialog {\n @include mq($from: small) {\n top: 0 !important;\n bottom: 0 !important;\n height: 100%;\n }\n }\n}\n","import {\n Host,\n Element,\n Component,\n Prop,\n Listen,\n Event,\n EventEmitter,\n h,\n Method,\n State,\n Watch,\n} from \"@stencil/core\";\n\nimport {\n StzhPopoverOpenEvent,\n StzhPopoverOpenedEvent,\n StzhPopoverCloseEvent,\n StzhPopoverClosedEvent\n} from \"../../index\";\n\nimport {\n computePosition,\n offset,\n shift,\n flip,\n arrow,\n autoUpdate,\n Placement,\n} from \"@floating-ui/dom\";\n\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\nimport { isStzhElement } from \"../../utils/utils\";\nimport { media } from \"../../utils/media-utils\";\nimport { waitForEvent } from \"../../utils/event-utils\";\nimport { stopAnimations, animateTo } from \"../../utils/animation-utils\";\n\nimport { StzhPopoverLocalizedText } from \"./stzh-popover.localization\";\n\nimport Arrow from \"../stzh-tooltip/assets/arrow.svg\";\n\nconst ANIMATION_SHOW_DURATION = 200;\nconst ANIMATION_HIDE_DURATION = 300;\nconst ANIMATION_SHOW_DURATION_SMALL = 100;\nconst ANIMATION_HIDE_DURATION_SMALL = 200;\n\nfunction animationContentWrapperShow() {\n const isSmall = media(\"small\").matches;\n return {\n keyframes: [\n { opacity: \"0\" },\n { opacity: \"1\" }\n ],\n options: {\n duration: isSmall ? ANIMATION_SHOW_DURATION_SMALL : ANIMATION_SHOW_DURATION,\n easing: \"linear\"\n }\n };\n}\n\nfunction animationContentWrapperHide() {\n const isSmall = media(\"small\").matches;\n return {\n keyframes: [\n { opacity: \"1\" },\n { opacity: \"0\" }\n ],\n options: {\n duration: isSmall ? ANIMATION_HIDE_DURATION_SMALL : ANIMATION_HIDE_DURATION,\n easing: \"linear\"\n }\n };\n}\n\nfunction animationDialogShow() {\n const isSmall = media(\"small\").matches;\n return {\n keyframes: [\n { transform: isSmall ? \"translateY(-8px)\" : \"translateY(100%)\" },\n { transform: \"translateY(0px)\" }\n ],\n options: {\n duration: isSmall ? ANIMATION_SHOW_DURATION_SMALL : ANIMATION_SHOW_DURATION,\n easing: \"linear\"\n }\n };\n}\n\nfunction animationDialogHide() {\n const isSmall = media(\"small\").matches;\n return {\n keyframes: [\n { transform: \"translateY(0px)\" },\n { transform: isSmall ? \"translateY(-8px)\" : \"translateY(100%)\" }\n ],\n options: {\n duration: isSmall ? ANIMATION_HIDE_DURATION_SMALL : ANIMATION_HIDE_DURATION,\n easing: \"linear\"\n }\n };\n}\n\nconst keyCode = {\n ESC: 27\n};\n\nconst CLASS_BODY_OPEN = \"stzh-popover-open\";\n\nlet popoverCounter = 0;\n\n/\n @slot - Trigger element for popover\n * @slot content - Any element used as popover content\n * @slot action - `stzh-button` element\n * @slot label - Label for mobile view (alternative for label property)\n /\n@Component({\n tag: \"stzh-popover\",\n styleUrl: \"stzh-popover.scss\",\n scoped: true\n})\nexport class StzhPopover {\n /* Whether popover should be open /\n @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n /* Default placement of popover relative to trigger element /\n @Prop({ reflect: true }) placement: Placement = \"bottom\";\n\n /* Whether to stretch popover to fullwith of parent /\n @Prop({ reflect: true }) fullwidth: \"horizontal\" \| \"vertical\" \| \"\" = \"\";\n\n /* Variant /\n @Prop({ reflect: true }) variant: \"default\" \| \"secondary\" \| \"tooltip\" = \"default\";\n\n /* Size /\n @Prop({ reflect: true }) size: \"default\" \| \"large\" = \"default\";\n\n /* Shifting of popover content /\n @Prop() skidding: number = 0;\n\n /* Distance from popover content to trigger. \"8\" when default variant, \"16\" when tooltip variant, arrow height (8px) + spacing (4px) = 12. /\n @Prop() distance: number;\n\n /* Label for mobile view (use label slot as alternative) /\n @Prop() label: string = \"\";\n\n /* Position strategy /\n @Prop() strategy: \"absolute\" \| \"fixed\" = \"absolute\";\n\n /* Translation strings. /\n @Prop() localization: StzhPopoverLocalizedText;\n\n @Element() element: HTMLStzhPopoverElement;\n\n /* Popover open event /\n @Event() stzhOpen: EventEmitter<StzhPopoverOpenEvent>;\n\n /* Popover opened event (after animation) /\n @Event() stzhOpened: EventEmitter<StzhPopoverOpenedEvent>;\n\n /* Popover close event /\n @Event() stzhClose: EventEmitter<StzhPopoverCloseEvent>;\n\n /* Popover closed event (after animation) /\n @Event() stzhClosed: EventEmitter<StzhPopoverClosedEvent>;\n\n /* Show popover content /\n @Method()\n async show() {\n if (this.open) {\n return;\n }\n\n this.toggledByMethod = true;\n this.open = true;\n return waitForEvent(this.element, \"stzhOpened\");\n }\n\n /* Hide popover content /\n @Method()\n async hide() {\n if (!this.open) {\n return;\n }\n\n this.toggledByMethod = true;\n this.open = false;\n return waitForEvent(this.element, \"stzhClosed\");\n }\n\n /* Toggle popover content /\n @Method()\n async toggle() {\n if (this.open) {\n return await this.hide();\n } else {\n return await this.show();\n }\n }\n\n @Method()\n async update() {\n return await this.computePosition();\n }\n\n @Listen(\"click\", { target: \"document\", capture: true })\n handleOutsideClick(event: MouseEvent) {\n if (!this.open) {\n return\n }\n\n const isClickOutside = event.target !== this.dialogElement\n && this.dialogElement.contains(event.target as HTMLElement) === false\n\n const isClickTrigger = event.target === this.triggerElement\n \|\| this.triggerElement.contains(event.target as HTMLElement)\n\n if (isClickOutside && !isClickTrigger) {\n this.hide()\n }\n }\n\n @Watch(\"open\")\n async openWatcher(newValue: boolean) {\n if (!this.dialogElement) {\n return;\n }\n\n if (newValue) {\n if (this.toggledByMethod) {\n this.stzhOpen.emit({\n component: \"stzh-popover\",\n });\n }\n\n const animationShow = animationContentWrapperShow();\n const animationShowDialog = animationDialogShow();\n\n await Promise.all([\n stopAnimations(this.contentWrapperElement),\n stopAnimations(this.contentElement),\n stopAnimations(this.dialogElement)\n ]);\n\n // safari seems to need will-change,\n // otherwise it has problems animating the element with the drop shadow\n this.dialogElement.style.willChange = \"transform, opacity, position, top, left, bottom, right\";\n this.contentWrapperElement.hidden = false;\n\n await Promise.all([\n animateTo(\n media(\"small\").matches ? this.dialogElement : this.contentWrapperElement,\n animationShow.keyframes,\n animationShow.options\n ),\n animateTo(\n media(\"small\").matches ? this.dialogElement : this.contentElement,\n animationShowDialog.keyframes,\n animationShowDialog.options\n )\n ]);\n\n if (this.toggledByMethod) {\n this.stzhOpened.emit({\n component: \"stzh-popover\"\n });\n }\n } else {\n if (this.toggledByMethod) {\n this.stzhClose.emit({\n component: \"stzh-popover\",\n });\n }\n\n const animationHide = animationContentWrapperHide();\n const animationHideDialog = animationDialogHide();\n\n await Promise.all([\n stopAnimations(this.contentWrapperElement),\n stopAnimations(this.contentElement),\n stopAnimations(this.dialogElement)\n ]);\n\n await Promise.all([\n animateTo(\n media(\"small\").matches ? this.dialogElement : this.contentWrapperElement,\n animationHide.keyframes,\n animationHide.options\n ),\n animateTo(\n media(\"small\").matches ? this.dialogElement : this.contentElement,\n animationHideDialog.keyframes,\n animationHideDialog.options\n ),\n ]);\n\n this.contentWrapperElement.hidden = true;\n this.dialogElement.style.willChange = \"auto\";\n\n if (this.toggledByMethod) {\n this.stzhClosed.emit({\n component: \"stzh-popover\"\n });\n }\n }\n\n this.toggledByMethod = false;\n }\n\n @Watch(\"distance\")\n distanceWatcher(newValue: number) {\n if (typeof newValue === \"number\") {\n this.distance = newValue;\n } else {\n this.distance = this.variant === \"tooltip\" ? 12 : 8;\n }\n }\n\n @State() computedPlacement: Placement;\n\n private observer: MutationObserver;\n\n private contentWrapperElement: HTMLElement;\n private contentElement: HTMLElement;\n private arrowElement: HTMLElement;\n private triggerElement: HTMLElement;\n private triggerFirstElement: HTMLElement;\n private dialogElement: HTMLElement;\n private autoUpdateCleanup: Function;\n\n private initialTouchX: number = null\n private initialTouchY: number = null\n\n private id: string;\n private trap: FocusTrap;\n private toggledByMethod: boolean;\n\n private handleKeydown = (event: KeyboardEvent) => {\n if (event.keyCode === keyCode.ESC) {\n this.hide()\n }\n }\n\n private onClickTrigger = () => {\n this.toggle();\n }\n\n private computePosition = async () => {\n if (media(\"small\").matches) {\n const middleware = [\n offset({\n mainAxis: this.distance,\n crossAxis: this.skidding\n }),\n flip({\n padding: 5\n }),\n shift({\n padding: 5\n })\n ];\n\n if (this.variant === \"tooltip\") {\n middleware.push(\n arrow({\n element: this.arrowElement,\n padding: 5\n })\n );\n }\n\n const { x = 0, y = 0, strategy = \"absolute\", placement, middlewareData }\n = await computePosition(this.triggerFirstElement, this.dialogElement, {\n strategy: this.strategy,\n placement: this.placement,\n middleware,\n });\n\n this.computedPlacement = placement;\n\n Object.assign(this.dialogElement.style, {\n position: strategy,\n left: `${x}px`,\n top: `${y}px`,\n });\n\n if (this.variant === \"tooltip\") {\n Object.assign(this.arrowElement.style, {\n left: x != null ? `${middlewareData.arrow.x}px` : \"\",\n top: y != null ? `${middlewareData.arrow.y}px` : \"\",\n });\n }\n } else {\n Object.assign(this.dialogElement.style, {\n position: null,\n left: null,\n top: null,\n });\n\n if (this.variant === \"tooltip\") {\n Object.assign(this.arrowElement.style, {\n left: null,\n top: null,\n });\n }\n }\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 isYSwipe = Math.abs(distY) >= threshold\n && Math.abs(distX) <= threshold;\n\n if (isYSwipe) {\n this.hide();\n }\n\n this.initialTouchY = null\n this.initialTouchX = null\n }\n\n private init = () => {\n let trigger = this.triggerElement?.firstElementChild as HTMLElement;\n\n if (!trigger) {\n const defaultSlot = Array.from(this.element.children)\n .find(child => !child.hasAttribute(\"slot\")) as HTMLElement\n\n trigger = defaultSlot;\n }\n\n if (trigger) {\n this.triggerFirstElement = trigger;\n trigger.addEventListener(\"click\", this.onClickTrigger);\n }\n }\n\n async componentWillLoad() {\n this.id = `stzh-popover-${popoverCounter++}`;\n\n this.distanceWatcher(this.distance);\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"popover\");\n }\n }\n\n private popoverShown() {\n document.body.classList.add(CLASS_BODY_OPEN);\n\n const isStzh = isStzhElement(this.triggerFirstElement);\n\n this.triggerFirstElement\n .setAttribute(isStzh ? \"a11y-expanded\" : \"aria-expanded\", \"true\");\n\n if (this.trap) {\n this.trap.activate();\n }\n }\n\n private popoverHidden() {\n document.body.classList.remove(CLASS_BODY_OPEN);\n\n const isStzh = isStzhElement(this.triggerFirstElement);\n\n this.triggerFirstElement\n .setAttribute(isStzh ? \"a11y-expanded\" : \"aria-expanded\", \"false\");\n\n if (this.trap) {\n this.trap.deactivate();\n }\n }\n\n componentDidRender() {\n this.computePosition();\n this.open ? this.popoverShown() : this.popoverHidden();\n\n const isStzh = isStzhElement(this.triggerFirstElement);\n\n if ((isStzh && !this.triggerFirstElement.getAttribute(\"a11y-describedby\"))\n \|\| (!isStzh && !this.triggerFirstElement.getAttribute(\"aria-describedby\"))\n ) {\n this.triggerFirstElement\n .setAttribute(isStzh ? \"a11y-describedby\" : \"aria-describedby\", `${this.id}-trigger-description`);\n }\n\n if ((isStzh && !this.triggerFirstElement.getAttribute(\"a11y-label\"))\n \|\| (!isStzh && !this.triggerFirstElement.getAttribute(\"aria-label\"))\n ) {\n this.triggerFirstElement\n .setAttribute(isStzh ? \"a11y-label\" : \"aria-label\", this.label);\n }\n\n if ((isStzh && !this.triggerFirstElement.getAttribute(\"analytics-id\"))\n \|\| (!isStzh && !this.triggerFirstElement.getAttribute(\"s-object-id\"))\n ) {\n this.triggerFirstElement\n .setAttribute(isStzh ? \"analytics-id\" : \"s-object-id\", this.label);\n }\n }\n\n componentDidUpdate() {\n this.trap.updateContainerElements(this.dialogElement);\n }\n\n componentDidLoad() {\n this.autoUpdateCleanup = autoUpdate(\n this.triggerFirstElement,\n this.dialogElement,\n this.computePosition\n );\n\n this.contentWrapperElement.hidden = !this.open;\n\n this.trap = createFocusTrap(this.dialogElement, {\n fallbackFocus: this.dialogElement,\n clickOutsideDeactivates: true,\n returnFocusOnDeactivate: true\n });\n\n if (this.open) {\n this.popoverShown();\n }\n }\n\n connectedCallback() {\n this.init();\n\n this.observer = new MutationObserver(this.init);\n this.observer.observe(this.element, {\n childList: true,\n subtree: true\n });\n }\n\n disconnectedCallback() {\n if (this.observer) {\n this.observer.disconnect();\n }\n\n if (this.autoUpdateCleanup) {\n this.autoUpdateCleanup();\n }\n\n if (this.triggerFirstElement) {\n this.triggerFirstElement.removeEventListener(\"click\", this.onClickTrigger);\n }\n }\n\n render() {\n const classes = {\n \"stzh-popover\": true,\n [`stzh-popover--open`]: this.open,\n [`stzh-popover--placement-${this.computedPlacement}`]: !!this.computedPlacement,\n [`stzh-popover--fullwidth-${this.fullwidth}`]: !!this.fullwidth,\n [`stzh-popover--${this.size}`]: !!this.size,\n [`stzh-popover--${this.variant}`]: !!this.variant\n };\n\n return (\n <Host>\n <div\n class={classes}\n onTouchStart={this.handleTouchStart}\n onTouchEnd={this.handleTouchEnd}\n >\n <div\n ref={(el) => (this.triggerElement = el as HTMLDivElement)}\n class=\"stzh-popover__trigger\"\n >\n <slot></slot>\n </div>\n <div class=\"stzh-popover__vhidden\" id={`${this.id}-trigger-description`}>\n {this.localization.open}\n </div>\n <div\n ref={(el) => (this.contentWrapperElement = el as HTMLDivElement)}\n class=\"stzh-popover__content-wrapper\"\n >\n <div class=\"stzh-popover__backdrop\"></div>\n <div\n ref={(el) => (this.contentElement = el as HTMLDivElement)}\n class=\"stzh-popover__content\"\n >\n <div\n ref={(el) => (this.dialogElement = el as HTMLDivElement)}\n class=\"stzh-popover__dialog\"\n role=\"dialog\"\n tabindex=\"-1\"\n aria-modal=\"true\"\n aria-labelledby={this.label ? `${this.id}-label` : null}\n aria-hidden={this.open ? \"false\" : \"true\"}\n onKeyDown={this.handleKeydown}\n >\n {this.variant === \"tooltip\" &&\n <div\n class=\"stzh-popover__arrow\"\n ref={(el) => (this.arrowElement = el as HTMLDivElement)}\n innerHTML={Arrow}\n ></div>\n }\n <div class=\"stzh-popover__content-inner\">\n <div class=\"stzh-popover__label-wrapper\">\n <h2 id={`${this.id}-label`} class=\"stzh-popover__label\">\n {this.label ? this.label : <slot name=\"label\"></slot>}\n </h2>\n <button\n class=\"stzh-popover__close\"\n onClick={() => this.hide()}\n type=\"button\"\n >\n <stzh-icon name=\"close\" class=\"stzh-popover__icon\"></stzh-icon>\n <span class=\"stzh-popover__vhidden\">{this.localization.close}</span>\n </button>\n </div>\n <div class=\"stzh-popover__content-slot-wrapper\">\n <div class=\"stzh-popover__content-slot\">\n <slot name=\"content\"></slot>\n </div>\n <div class=\"stzh-popover__action-slot\">\n <slot name=\"action\"></slot>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n","/\n @prop --color: Text color (also `color` can be overwritten)\n * @prop --icon-size: Icon size\n * @prop --icon-vertical-align: Icon vertical alignment\n \n @prop --stzh-base-color: Global: Text color\n * @prop --stzh-base-lead-color: Global: Lead text color\n /\n\n:host {\n --icon-size: 1.25em;\n --icon-vertical-align: text-bottom;\n --color: #{$baseColor};\n --display: var(--stzh-text-display, block);\n\n width: 100%;\n color: var(--color);\n\n --grid-template-areas: var(\n --stzh-text-grid-template-areas,\n \"text text text text\"\n );\n\n --grid-template-columns: var(\n --stzh-text-grid-template-columns,\n #{$gridColumns}\n );\n\n @include mq($from: small) {\n --grid-template-areas: var(\n --stzh-text-grid-template-areas,\n \"text text text text\"\n );\n }\n\n @include mq($from: medium) {\n --grid-template-areas: var(\n --stzh-text-grid-template-areas,\n \"text text text text text text text text\"\n );\n\n --grid-template-columns: var(\n --stzh-text-grid-template-columns,\n #{$gridColumnsMedium}\n );\n }\n\n ::slotted(:first-child) {\n margin-top: 0 !important;\n }\n\n ::slotted(:last-child) {\n margin-bottom: 0 !important;\n }\n\n ::slotted(a),\n ::slotted( a) {\n color: $linkColor;\n transition: color $baseTransitionAnimationSpeed;\n border-radius: $buttonBorderRadius;\n text-underline-offset: $linkTextUnderlineOffset;\n text-decoration-line: $linkTextDecorationLine;\n text-decoration-thickness: $linkTextDecorationThickness;\n text-decoration-skip-ink: $linkTextDecorationSkipInk;\n\n &:hover {\n color: $linkHoverColor;\n text-decoration-line: $linkHoverTextDecorationLine;\n }\n\n &:hover {\n color: $linkHoverColor;\n }\n }\n\n ::slotted(b),\n ::slotted(strong),\n ::slotted(* b),\n ::slotted(* strong) {\n @include font('heavy');\n }\n\n ::slotted(i),\n ::slotted(em),\n ::slotted(* i),\n ::slotted(* em) {\n @include font;\n }\n\n &[lead]:not([lead=\"false\"]) {\n --color: #{$baseLeadColor};\n }\n\n &[color=\"primary\"] {\n --color: #{$colorPrimary70};\n }\n\n &[color=\"secondary\"] {\n --color: #{$colorSecondary60};\n }\n\n &[color=\"info\"] {\n --color: #{$textInfoColor};\n }\n\n &[color=\"inherit\"] {\n --color: inherit;\n }\n}\n\n.stzh-text {\n --stzh-icon-size: var(--icon-size);\n --stzh-icon-vertical-align: var(--icon-vertical-align);\n\n --stzh-list-font-size: \"\";\n --stzh-list-line-height: \"\";\n --stzh-list-letter-spacing: \"\";\n\n // default font styling without attributes\n @include fontCurve($textFontCurveDefault);\n @include gridGutter;\n display: var(--display);\n grid-template-areas: var(--grid-template-areas);\n grid-template-columns: var(--grid-template-columns);\n\n color: var(--color);\n\n &__text {\n grid-area: text;\n display: flex;\n }\n\n &__icon {\n flex-shrink: 0;\n\n &:not(:empty) {\n margin-right: 0.25em;\n }\n }\n\n &__text-inner {\n flex-grow: 1;\n }\n\n /* Lead variant /\n\n &--is-lead {\n @include font('heavy');\n @include fontCurve('lead', 'lead');\n }\n\n / Font variants /\n\n @each $font, $value in $fonts {\n &--font-#{$font} {\n @include font($font);\n }\n }\n\n / Curve variants /\n\n &--curve-none {\n font-size: inherit;\n }\n\n @each $fontCurveName, $config in $fontCurves {\n &--curve-#{$fontCurveName} {\n @include fontCurve($fontCurveName);\n }\n }\n\n / Size variants when consumer wants to overwrite predefined font curves /\n\n @each $size, $value in $fontSizes {\n &--size-#{$size} {\n @include fontSize($size);\n }\n }\n\n @each $breakpoint, $size in $breakpoints {\n @each $size, $value in $fontSizes {\n &--size-#{$breakpoint}-#{$size} {\n @include mq($from: $breakpoint) {\n @include fontSize($size);\n }\n }\n }\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n} from \"@stencil/core\";\n\nimport { Font } from \"../../index\";\n\n/\n @slot - Slot for text and icons\n * @slot icon - Slot for icon that should be on left side of the text (not inline)\n /\n@Component({\n tag: \"stzh-text\",\n styleUrl: \"stzh-text.scss\",\n scoped: true\n})\nexport class StzhText {\n /* Font used /\n @Prop() font: Font.Fonts = \"default\";\n\n /* Type of curve (see [Spacings docs page](/docs/tokens-typography--docs#curves) for more info). /\n @Prop({ reflect: true }) curve: Font.Curves = \"default\";\n\n /* Whether if text is lead text /\n @Prop({ reflect: true }) lead: boolean = false;\n\n /* Color used /\n @Prop({ reflect: true }) color: \"default\" \| \"primary\" \| \"secondary\" \| \"info\" \| \"inherit\" = \"default\";\n\n /* Manually overwrite font size applied by curve attribute (see [Spacings docs page](/docs/tokens-typography--docs#sizes) for more info). /\n @Prop() size: Font.Sizes \| \"inherit\" = \"inherit\";\n /* Manually overwrite font size applied by curve attribute above small breakpoint (see [Spacings docs page](/docs/tokens-typography--docs#sizes) for more info). /\n @Prop() sizeSmall: Font.Sizes \| \"inherit\" = \"inherit\";\n /* Manually overwrite font size applied by curve attribute above medium breakpoint (see [Spacings docs page](/docs/tokens-typography--docs#sizes) for more info). /\n @Prop() sizeMedium: Font.Sizes \| \"inherit\" = \"inherit\";\n /* Manually overwrite font size applied by curve attribute above large breakpoint (see [Spacings docs page](/docs/tokens-typography--docs#sizes) for more info). /\n @Prop() sizeLarge: Font.Sizes \| \"inherit\" = \"inherit\";\n /* Manually overwrite font size applied by curve attribute above ultra breakpoint (see [Spacings docs page](/docs/tokens-typography--docs#sizes) for more info). */\n @Prop() sizeUltra: Font.Sizes \| \"inherit\" = \"inherit\";\n\n render() {\n return (\n <Host>\n <div\n class={{\n \"stzh-text\": true,\n \"stzh-text--is-lead\": this.lead,\n [`stzh-text--font-${this.font}`]: !!this.font,\n [`stzh-text--curve-${this.curve}`]: !!this.curve,\n [`stzh-text--size-${this.size}`]: !!this.size,\n [`stzh-text--size-small-${this.sizeSmall}`]: !!this.sizeSmall,\n [`stzh-text--size-medium-${this.sizeMedium}`]: !!this.sizeMedium,\n [`stzh-text--size-large-${this.sizeLarge}`]: !!this.sizeLarge,\n [`stzh-text--size-ultra-${this.sizeUltra}`]: !!this.sizeUltra,\n }}\n >\n <div class=\"stzh-text__text\">\n <div class=\"stzh-text__icon\">\n <slot name=\"icon\"></slot>\n </div>\n <div class=\"stzh-text__text-inner\">\n <slot></slot>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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"}

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

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

@@ -0,0 +1 @@

+ {"version":3,"names":["stzhAppointmentsCss","StzhAppointments","this","showMoreLink","moreItemsLeft","showCalendar","showSort","showSortStart","showSortPlace","showAppointmentsTitle","allAppointsmentOnSameDay","sortOptions","isDateDisabled","date","dateHasAppointment","_appointments","find","appointment","start","getFullYear","getMonth","getDate","onNextActiveDateClick","async","nextDate","currentDate","popover","datepickerElement","getPopover","hide","onMoreClick","showItems","stepItems","radio","inputElement","querySelector","focus","onDropdownChange","event","target","sortBy","getValue","onDatepickerChange","detail","component","valueAsDate","_initialShowItems","onRadioChange","value","stzhChange","emit","dateAdapterWatcher","newValue","dateAdapter","window","stzhComponents","utils","createFormatParseAdapter","localization","$formats","$globals","currentDateWatcher","_currentDate","dateByValue","earliestDate","setValueToFirstAppointmentOfCurrentDate","parseISODate","sortByWatcher","valueWatcher","updateDateByValue","appointmentsWatcher","JSON","parse","map","Object","assign","Date","end","length","sort","a","b","latestDate","firstDate","every","getCurrentDateAppointments","indexOfLastCurrentDayDate","appointmentsCurrentDate","filter","index","dateIsInCurrentDay","appointments","disabled","componentWillLoad","fetchTranslations","element","componentWillRender","appointmentsShown","slice","format","item","pos","self","indexOf","place","push","text","sortByTime","sortByPlace","_sortBy","componentDidRender","setDate","datepickerElementMedium","render","headingUsed","hasSlot","classes","h","Host","class","name","calendarTitle","ref","el","onStzhChange","label","datepickerLabel","calendarIsDateDisabled","calendarMin","printISODate","calendarMax","slot","size","onClick","nextDayWithAppointments","inline","appointmentsTitle","variant","sizeMedium","items","options","legend","inputLegend","preventUpdateProperties","font","formatSpan","caption","tc","moreTextItems"],"sources":["src/components/stzh-appointments/stzh-appointments.scss?tag=stzh-appointments&encapsulation=scoped","src/components/stzh-appointments/stzh-appointments.tsx"],"sourcesContent":[":host {\n --background-color: #{$colorSecondary10};\n}\n\n.stzh-appointments {\n &__heading {\n &:not(:empty) {\n @include spaceCurve('padding-bottom', 'tiny');\n margin-bottom: space('xsmall');\n\n @include mq($from: small) {\n margin-bottom: space('small');\n }\n\n @include mq($from: medium) {\n margin-bottom: space('medium');\n }\n\n @include mq($from: large) {\n margin-bottom: space('xlarge');\n }\n }\n }\n\n // &__actions {\n // &:not(:empty) {\n // @include spaceCurve('margin-top', 'medium');\n // }\n // }\n\n &__wrapper {\n @include spaceCurve('padding-top', 'regular');\n @include spaceCurve('padding-bottom', 'regular');\n display: flex;\n flex-direction: column;\n padding-left: space('large');\n padding-right: space('large');\n background-color: var(--background-color);\n\n @include mq($from: medium) {\n flex-direction: row;\n }\n }\n\n &__calendar-wrapper {\n display: flex;\n flex-direction: column;\n\n @include mq($from: medium) {\n margin-right: space('xxlarge');\n }\n }\n\n &__appointments-wrapper {\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n }\n\n &__calendar-title-wrapper,\n &__appointments-title-wrapper {\n @include spaceCurve('margin-bottom', 'small');\n display: flex;\n align-items: center;\n justify-content: space-between;\n }\n\n &__calendar-title,\n &__appointments-title {\n @include font('heavy');\n @include fontSize('centi');\n color: $colorPrimary70;\n display: flex;\n align-items: center;\n }\n\n &__calendar-icon,\n &__appointments-icon {\n --size: #{iconSize('large')};\n margin-right: space('xsmall');\n }\n\n &__calendar-content,\n &__calendar-content-medium {\n @include fontSize('milli');\n }\n\n &__calendar-content {\n @include mq($from: medium) {\n display: none;\n }\n }\n\n &__calendar-content-medium {\n display: none;\n background-color: $colorWhite;\n padding-bottom: space('medium');\n\n @include mq($from: medium) {\n display: block;\n }\n }\n\n &__appointments-content {\n flex-grow: 1;\n }\n\n &__appointments-radiogroup {\n margin-top: space('xsmall');\n margin-bottom: space('xsmall');\n }\n\n &__more-link {\n @include fontSize('milli');\n margin-top: space('medium');\n }\n\n &--has-calendar &__appointments-wrapper {\n margin-top: space('large');\n\n @include mq($from: medium) {\n margin-top: 0;\n }\n }\n}\n","import {\n Component,\n Host,\n Element,\n Prop,\n h,\n Watch,\n Event,\n EventEmitter\n} from \"@stencil/core\";\n\nimport {\n StzhAppointmentsChangeEvent,\n StzhRadioChangeEvent,\n StzhDatepickerChangeEvent,\n StzhDropdownChangeEvent,\n} from \"../../index\";\n\nimport { tc } from \"../../utils/translation-utils\";\n\nimport { printISODate, parseISODate } from \"../../utils/date-utils\";\nimport { StzhLocaleAdapter } from \"../../utils/date-adapter\";\n\nimport { StzhAppointmentsLocalizedText } from \"./stzh-appointments.localization\"\nimport { hasSlot } from \"../../utils/utils\";\n\n/**\n * @slot - Slot for any content\n */\n@Component({\n tag: \"stzh-appointments\",\n styleUrl: \"stzh-appointments.scss\",\n scoped: true\n})\nexport class StzhAppointments {\n /** Translation strings */\n @Prop() localization: StzhAppointmentsLocalizedText;\n\n /** Sort by */\n @Prop({ mutable: true }) sortBy: \"start\" | \"place\" = \"start\";\n private _sortBy: \"start\" | \"place\";\n\n /** Initial selected values */\n @Prop() appointments: any[] | string = [];\n private _appointments: any[];\n private appointmentsShown: any[];\n\n /** Current selected date (if undefined, earliest appointment date in list is taken or current selected one by value) */\n @Prop({ mutable: true }) currentDate: Date | string;\n private _currentDate: Date;\n\n /* Selected appointment by value */\n @Prop({ mutable: true }) value: string = \"\";\n\n /* Name of radiogroup form element */\n @Prop({ reflect: true }) name: string = \"appointment\";\n\n /** Nr of items shown */\n @Prop({ mutable: true }) showItems: number = 5;\n private _initialShowItems: number;\n\n /** Nr of items shown when more link is clicked */\n @Prop() stepItems: number = 5;\n\n /** Overwrite default calendar title */\n @Prop() calendarTitle = \"\";\n\n /** Overwrite default appointments title */\n @Prop() appointmentsTitle = \"\";\n\n /**\n * Date adapter, for custom parsing/formatting.\n * Must be an object with a `parse` function which accepts a `string` and returns a `Date`,\n * and a `format` function which accepts a `Date` and returns a `string`.\n */\n @Prop() dateAdapter: StzhLocaleAdapter;\n\n @Element() element: HTMLStzhAppointmentsElement;\n\n /** Appointments change event */\n @Event() stzhChange: EventEmitter<StzhAppointmentsChangeEvent>;\n\n @Watch(\"dateAdapter\")\n dateAdapterWatcher(newValue: StzhLocaleAdapter) {\n if (!newValue) {\n this.dateAdapter = window.stzhComponents.utils.createFormatParseAdapter(\n this.localization.$formats,\n this.localization.$globals\n );\n }\n }\n\n @Watch(\"currentDate\")\n currentDateWatcher(newValue: Date | string) {\n if (!newValue) {\n this._currentDate = this.dateByValue || this.earliestDate;\n\n if (!this.dateByValue) {\n this.setValueToFirstAppointmentOfCurrentDate();\n }\n } else if (typeof newValue === \"string\") {\n this._currentDate = parseISODate(newValue);\n this.setValueToFirstAppointmentOfCurrentDate();\n } else {\n this._currentDate = newValue;\n this.setValueToFirstAppointmentOfCurrentDate();\n }\n }\n\n @Watch(\"sortBy\")\n sortByWatcher() {\n this.setValueToFirstAppointmentOfCurrentDate();\n }\n\n @Watch(\"value\")\n valueWatcher() {\n this.updateDateByValue();\n // update current date if user has not choosen one\n this.currentDateWatcher(this.currentDate);\n }\n\n @Watch(\"appointments\")\n appointmentsWatcher(newValue: any[] | string) {\n if (typeof newValue === \"string\") {\n this._appointments = JSON.parse(newValue);\n } else {\n this._appointments = newValue;\n }\n\n // convert start and end field to date\n this._appointments = this._appointments.map(appointment => ({\n ...appointment,\n start: new Date(appointment.start),\n end: new Date(appointment.end),\n }))\n\n if (this._appointments.length > 0) {\n // sort with start field and find earliest and latest date\n this._appointments.sort((a, b) => a['start'] > b['start'] ? 1 : -1);\n this.earliestDate = this._appointments[0].start;\n this.latestDate = this._appointments[this._appointments.length - 1].start;\n this.updateDateByValue();\n }\n\n // determine whether all appointments are from the same day\n if (this._appointments.length > 1) {\n const firstDate = this._appointments[0].start;\n this.allAppointsmentOnSameDay = this._appointments\n .map(appointment => appointment.start)\n .every(date => `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`\n === `${firstDate.getFullYear()}-${firstDate.getMonth()}-${firstDate.getDate()}`);\n }\n\n // update flags\n this.showCalendar = !this.allAppointsmentOnSameDay;\n this.showAppointmentsTitle = this._appointments.length > 1;\n\n // update current date if user has not choosen one\n this.currentDateWatcher(this.currentDate);\n }\n\n private dateByValue: Date;\n private earliestDate: Date;\n private latestDate: Date;\n private nextDate: Date;\n\n private showMoreLink: boolean = false;\n private moreItemsLeft: number = 0;\n private showCalendar: boolean = false;\n private showSort: boolean = false;\n private showSortStart: boolean = false;\n private showSortPlace: boolean = false;\n private showAppointmentsTitle: boolean = false;\n private allAppointsmentOnSameDay: boolean = true;\n private sortOptions = [];\n\n private inputElement: HTMLStzhRadiogroupElement;\n private datepickerElement: HTMLStzhDatepickerElement;\n private datepickerElementMedium: HTMLStzhDatepickerElement;\n\n private updateDateByValue() {\n this.dateByValue = this.value\n && this._appointments\n .find(appointment => appointment.value === this.value)\n .start;\n }\n\n private getCurrentDateAppointments() {\n let indexOfLastCurrentDayDate = 0;\n\n // filter to current date appointments that can be shown\n const appointmentsCurrentDate = this._appointments\n .filter((appointment, index) => {\n const dateIsInCurrentDay = appointment.start.getFullYear() === this._currentDate.getFullYear()\n && appointment.start.getMonth() === this._currentDate.getMonth()\n && appointment.start.getDate() === this._currentDate.getDate();\n\n if (dateIsInCurrentDay) {\n indexOfLastCurrentDayDate = index;\n }\n\n return dateIsInCurrentDay;\n });\n\n // find next day with dates or set to null\n if (this._appointments[indexOfLastCurrentDayDate + 1]) {\n this.nextDate = this._appointments[indexOfLastCurrentDayDate + 1].start;\n } else {\n this.nextDate = null;\n }\n\n // sort\n appointmentsCurrentDate.sort((a, b) => a[this.sortBy] > b[this.sortBy] ? 1 : -1);\n return appointmentsCurrentDate;\n }\n\n private setValueToFirstAppointmentOfCurrentDate() {\n // choose the first available appointment from current date\n const appointments = this.getCurrentDateAppointments()\n .filter(appointment => !appointment.disabled)\n\n if (appointments.length > 0) {\n this.value = appointments[0].value;\n this.stzhChange.emit({\n component: \"stzh-appointments\",\n value: this.value\n });\n }\n }\n\n private isDateDisabled = (date: Date) => {\n const dateHasAppointment: boolean = !!this._appointments.find(appointment => {\n return appointment.start.getFullYear() === date.getFullYear()\n && appointment.start.getMonth() === date.getMonth()\n && appointment.start.getDate() === date.getDate();\n });\n\n return !dateHasAppointment;\n }\n\n private onNextActiveDateClick = async () => {\n if (this.nextDate) {\n this.currentDate = this.nextDate;\n\n const popover = await this.datepickerElement.getPopover();\n\n if (popover) {\n popover.hide();\n }\n }\n }\n\n private onMoreClick = () => {\n this.showItems = this.stepItems + this.showItems;\n\n // return focus to radiogroup\n const radio = this.inputElement.querySelector('stzh-radio');\n radio.focus();\n }\n\n private onDropdownChange = async (event: CustomEvent<StzhDropdownChangeEvent>) => {\n const target: HTMLStzhDropdownElement = event.target as HTMLStzhDropdownElement;\n\n const sortBy = await target.getValue() as \"start\" | \"place\" | \"\";\n\n if (sortBy) {\n this.sortBy = sortBy;\n }\n }\n\n private onDatepickerChange = (event: CustomEvent<StzhDatepickerChangeEvent>) => {\n if (event.detail.component !== 'stzh-datepicker' || !event.detail.valueAsDate) {\n return;\n }\n\n this.currentDate = event.detail.valueAsDate;\n // reset number of items that should be shown\n this.showItems = this._initialShowItems;\n }\n\n private onRadioChange = (event: CustomEvent<StzhRadioChangeEvent>) => {\n this.value = event.detail.value;\n this.stzhChange.emit({\n component: \"stzh-appointments\",\n value: this.value\n });\n }\n\n async componentWillLoad() {\n this._initialShowItems = this.showItems;\n this.appointmentsWatcher(this.appointments);\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"appointments\");\n }\n\n this.dateAdapterWatcher(this.dateAdapter);\n }\n\n componentWillRender() {\n const appointments = this.getCurrentDateAppointments();\n\n // slice to max that should be visible\n this.appointmentsShown = appointments.slice(0, this.showItems);\n\n // set flags\n this.showMoreLink = this.showItems < appointments.length;\n this.moreItemsLeft = appointments.length - this.showItems;\n\n // don't show time sort when only one time in the current day\n this.showSortStart = appointments\n .map(appointment => {\n return this.dateAdapter.format(appointment.start, \"time\");\n }).filter((item, pos, self) => {\n return self.indexOf(item) == pos;\n }).length > 1;\n\n // don't show place sort when only one place in the current day\n this.showSortPlace = appointments\n .map(appointment => {\n return appointment.place;\n }).filter((item, pos, self) => {\n return self.indexOf(item) == pos;\n }).length > 1;\n\n this.sortOptions = [];\n\n if (this.showSortStart) {\n this.sortOptions.push({\n text: this.localization.sortByTime,\n value: \"start\"\n });\n }\n\n if (this.showSortPlace) {\n this.sortOptions.push({\n text: this.localization.sortByPlace,\n value: \"place\"\n });\n }\n\n this.showSort = this.appointmentsShown.length > 1;\n\n // determine sort (force alternative sorting if it makes sense)\n this._sortBy =\n (this.showSortStart && !this.showSortPlace && \"start\")\n || (!this.showSortStart && this.showSortPlace && \"place\")\n || this.sortBy;\n }\n\n componentDidRender() {\n // set datepickers values to current date\n if (this.datepickerElement) {\n this.datepickerElement.setDate(this._currentDate);\n }\n\n if (this.datepickerElementMedium) {\n this.datepickerElementMedium.setDate(this._currentDate);\n }\n }\n\n render() {\n const headingUsed: boolean = hasSlot(this.element, \"heading\");\n\n const classes = {\n \"stzh-appointments\": true,\n \"stzh-appointments--has-calendar\": this.showCalendar,\n \"stzh-appointments--has-appointments-title\": this.showAppointmentsTitle,\n \"stzh-appointments--has-sort\": this.showSort\n };\n\n return (\n <Host has-heading={headingUsed}>\n <div class={classes}>\n <div class=\"stzh-appointments__heading\">\n <slot name=\"heading\"></slot>\n </div>\n\n <div class=\"stzh-appointments__wrapper\">\n {this.showCalendar &&\n <div class=\"stzh-appointments__calendar-wrapper\">\n <div class=\"stzh-appointments__calendar-title-wrapper\">\n <div class=\"stzh-appointments__calendar-title\">\n <stzh-icon class=\"stzh-appointments__calendar-icon\" name=\"calendar\"></stzh-icon>\n <span class=\"stzh-appointments__calendar-title-text\">\n {this.calendarTitle || this.localization.calendarTitle}\n </span>\n </div>\n </div>\n <div class=\"stzh-appointments__calendar-content\">\n <stzh-datepicker\n hide-optional\n ref={(el) => (this.datepickerElement = el as HTMLStzhDatepickerElement)}\n onStzhChange={this.onDatepickerChange}\n label={this.localization.datepickerLabel}\n calendarIsDateDisabled={this.isDateDisabled}\n calendarMin={printISODate(this.earliestDate)}\n calendarMax={printISODate(this.latestDate)}\n >\n <stzh-link\n slot=\"action\"\n size=\"inherit\"\n disabled={!this.nextDate}\n onClick={this.onNextActiveDateClick}\n >\n {this.localization.nextDayWithAppointments}\n </stzh-link>\n </stzh-datepicker>\n </div>\n <div class=\"stzh-appointments__calendar-content-medium\">\n <stzh-datepicker\n hide-optional\n ref={(el) => (this.datepickerElementMedium = el as HTMLStzhDatepickerElement)}\n onStzhChange={this.onDatepickerChange}\n inline\n calendarIsDateDisabled={this.isDateDisabled}\n calendarMin={printISODate(this.earliestDate)}\n calendarMax={printISODate(this.latestDate)}\n >\n {this.nextDate &&\n <stzh-link\n slot=\"action\"\n size=\"inherit\"\n onClick={this.onNextActiveDateClick}\n >\n {this.localization.nextDayWithAppointments}\n </stzh-link>\n }\n </stzh-datepicker>\n </div>\n </div>\n }\n <div class=\"stzh-appointments__appointments-wrapper\">\n {this.showAppointmentsTitle &&\n <div class=\"stzh-appointments__appointments-title-wrapper\">\n <div class=\"stzh-appointments__appointments-title\">\n <stzh-icon class=\"stzh-appointments__appointments-icon\" name=\"clock\"></stzh-icon>\n <span class=\"stzh-appointments__appointments-title-text\">\n {this.appointmentsTitle || this.localization.appointmentsTitle}\n </span>\n </div>\n {this.showSort &&\n <div class=\"stzh-appointments__sort\">\n <stzh-dropdown\n hide-optional\n inline\n no-search\n class=\"stzh-appointments__sort-dropdown\"\n variant=\"plain\"\n size=\"small\"\n sizeMedium={\"tiny\"}\n items={[this._sortBy]}\n options={this.sortOptions}\n onStzhChange={this.onDropdownChange}\n ></stzh-dropdown>\n </div>\n }\n </div>\n }\n\n <div class=\"stzh-appointments__appointments-content\">\n <stzh-radiogroup\n class=\"stzh-appointments__appointments-radiogroup\"\n ref={(el) => this.inputElement = el as HTMLStzhRadiogroupElement}\n legend={this.localization.inputLegend}\n hide-legend\n name={this.name}\n value={this.value}\n preventUpdateProperties={[\"disabled\"]}\n >\n {this.appointmentsShown.map((appointment) =>\n <stzh-radio\n onStzhChange={this.onRadioChange}\n value={appointment.value}\n disabled={typeof appointment.disabled !== \"undefined\" ? appointment.disabled : false}\n >\n <stzh-text font=\"heavy\" size=\"centi\">\n {!this.showCalendar && <span>{this.dateAdapter.format(appointment.start, \"dateLong\")}, </span>}\n {this.dateAdapter.formatSpan(appointment.start, appointment.end, \"time\")}\n </stzh-text>\n <stzh-text size=\"milli\">{appointment.caption}</stzh-text>\n </stzh-radio>\n )}\n </stzh-radiogroup>\n\n {this.showMoreLink &&\n <stzh-link\n class=\"stzh-appointments__more-link\"\n size=\"inherit\"\n onClick={this.onMoreClick}\n >\n {tc(this.localization.moreTextItems,\n this.moreItemsLeft > this.stepItems\n ? this.stepItems\n : this.moreItemsLeft)}\n </stzh-link>\n }\n </div>\n </div>\n </div>\n\n {/* <div class=\"stzh-appointments__actions\">\n <slot name=\"actions\"></slot>\n </div> */}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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"}

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

	@@ -0,0 +1,2 @@
1	+ import{r as t,h as e,a as n}from"./p-c7bfac7a.js";const s='@charset "UTF-8";:host{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;}:host[hidden]{display:none}:host::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host ,:host ::before,:host ::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)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}.sbdocs-content>,.sbdocs-content>div>{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);}.sbdocs-content>.float-left,.sbdocs-content>div>.float-left{float:left}.sbdocs-content>.float-right,.sbdocs-content>div>.float-right{float:right}.sbdocs-content>h1,.sbdocs-content>h2,.sbdocs-content>h3,.sbdocs-content>h4,.sbdocs-content>div>h1,.sbdocs-content>div>h2,.sbdocs-content>div>h3,.sbdocs-content>div>h4{font-family:var(--stzh-font-family-title);font-weight:var(--stzh-font-weight-title);font-style:var(--stzh-font-style-title);color:var(--stzh-heading-color);margin:0}.sbdocs-content>b,.sbdocs-content>strong,.sbdocs-content>div>b,.sbdocs-content>div>strong{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy)}.sbdocs-content>i,.sbdocs-content>em,.sbdocs-content>div>i,.sbdocs-content>div>em{font-family:var(--stzh-font-family-medium-italic);font-weight:var(--stzh-font-weight-medium-italic);font-style:var(--stzh-font-style-medium-italic)}.sbdocs-content>,.sbdocs-content>p,.sbdocs-content>stzh-text,.sbdocs-content>div>,.sbdocs-content>div>p,.sbdocs-content>div>stzh-text{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)}@media screen and (min-width: 900px){.sbdocs-content>,.sbdocs-content>p,.sbdocs-content>stzh-text,.sbdocs-content>div>,.sbdocs-content>div>p,.sbdocs-content>div>stzh-text{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)}}.sbdocs-content>h1,.sbdocs-content>div>h1{font-size:var(--stzh-font-curve-h1-default-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h1-default-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h1-default-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}@media screen and (min-width: 600px){.sbdocs-content>h1,.sbdocs-content>div>h1{font-size:var(--stzh-font-curve-h1-small-font-size, var(--stzh-font-hecto-font-size));line-height:var(--stzh-font-curve-h1-small-heading-line-height, var(--stzh-font-hecto-text-line-height));letter-spacing:var(--stzh-font-curve-h1-small-heading-letter-spacing, var(--stzh-font-hecto-text-letter-spacing))}}@media screen and (min-width: 900px){.sbdocs-content>h1,.sbdocs-content>div>h1{font-size:var(--stzh-font-curve-h1-medium-font-size, var(--stzh-font-kilo-font-size));line-height:var(--stzh-font-curve-h1-medium-heading-line-height, var(--stzh-font-kilo-text-line-height));letter-spacing:var(--stzh-font-curve-h1-medium-heading-letter-spacing, var(--stzh-font-kilo-text-letter-spacing))}}@media screen and (min-width: 1260px){.sbdocs-content>h1,.sbdocs-content>div>h1{font-size:var(--stzh-font-curve-h1-large-font-size, var(--stzh-font-mega-font-size));line-height:var(--stzh-font-curve-h1-large-heading-line-height, var(--stzh-font-mega-text-line-height));letter-spacing:var(--stzh-font-curve-h1-large-heading-letter-spacing, var(--stzh-font-mega-text-letter-spacing))}}@media screen and (min-width: 1600px){.sbdocs-content>h1,.sbdocs-content>div>h1{font-size:var(--stzh-font-curve-h1-ultra-font-size, var(--stzh-font-giga-font-size));line-height:var(--stzh-font-curve-h1-ultra-heading-line-height, var(--stzh-font-giga-text-line-height));letter-spacing:var(--stzh-font-curve-h1-ultra-heading-letter-spacing, var(--stzh-font-giga-text-letter-spacing))}}.sbdocs-content>h2,.sbdocs-content>div>h2{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)}@media screen and (min-width: 600px){.sbdocs-content>h2,.sbdocs-content>div>h2{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){.sbdocs-content>h2,.sbdocs-content>div>h2{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){.sbdocs-content>h2,.sbdocs-content>div>h2{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))}}.sbdocs-content>h3,.sbdocs-content>div>h3{font-size:var(--stzh-font-curve-h3-default-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h3-default-heading-line-height, var(--stzh-font-centi-heading-line-height));letter-spacing:var(--stzh-font-curve-h3-default-heading-letter-spacing)}@media screen and (min-width: 600px){.sbdocs-content>h3,.sbdocs-content>div>h3{font-size:var(--stzh-font-curve-h3-small-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h3-small-heading-line-height, var(--stzh-font-deci-heading-line-height));letter-spacing:var(--stzh-font-curve-h3-small-heading-letter-spacing)}}@media screen and (min-width: 900px){.sbdocs-content>h3,.sbdocs-content>div>h3{font-size:var(--stzh-font-curve-h3-medium-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h3-medium-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h3-medium-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}@media screen and (min-width: 1600px){.sbdocs-content>h3,.sbdocs-content>div>h3{font-size:var(--stzh-font-curve-h3-ultra-font-size, var(--stzh-font-hecto-font-size));line-height:var(--stzh-font-curve-h3-ultra-heading-line-height, var(--stzh-font-hecto-text-line-height));letter-spacing:var(--stzh-font-curve-h3-ultra-heading-letter-spacing, var(--stzh-font-hecto-text-letter-spacing))}}.sbdocs-content>h4,.sbdocs-content>div>h4{font-size:var(--stzh-font-curve-h4-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-h4-default-heading-line-height, var(--stzh-font-milli-heading-line-height));letter-spacing:var(--stzh-font-curve-h4-default-heading-letter-spacing)}@media screen and (min-width: 600px){.sbdocs-content>h4,.sbdocs-content>div>h4{font-size:var(--stzh-font-curve-h4-small-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h4-small-heading-line-height, var(--stzh-font-centi-heading-line-height));letter-spacing:var(--stzh-font-curve-h4-small-heading-letter-spacing)}}@media screen and (min-width: 1260px){.sbdocs-content>h4,.sbdocs-content>div>h4{font-size:var(--stzh-font-curve-h4-large-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h4-large-heading-line-height, var(--stzh-font-deci-heading-line-height));letter-spacing:var(--stzh-font-curve-h4-large-heading-letter-spacing)}}@media screen and (min-width: 1600px){.sbdocs-content>h4,.sbdocs-content>div>h4{font-size:var(--stzh-font-curve-h4-ultra-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h4-ultra-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h4-ultra-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}.sbdocs-content>h1,.sbdocs-content>stzh-heading[level="1"],.sbdocs-content>div>h1,.sbdocs-content>div>stzh-heading[level="1"]{margin-top:var(--stzh-space-xxlarge);margin-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 900px){.sbdocs-content>h1,.sbdocs-content>stzh-heading[level="1"],.sbdocs-content>div>h1,.sbdocs-content>div>stzh-heading[level="1"]{margin-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.sbdocs-content>h1,.sbdocs-content>stzh-heading[level="1"],.sbdocs-content>div>h1,.sbdocs-content>div>stzh-heading[level="1"]{margin-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 900px){.sbdocs-content>h1,.sbdocs-content>stzh-heading[level="1"],.sbdocs-content>div>h1,.sbdocs-content>div>stzh-heading[level="1"]{margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.sbdocs-content>h1,.sbdocs-content>stzh-heading[level="1"],.sbdocs-content>div>h1,.sbdocs-content>div>stzh-heading[level="1"]{margin-bottom:var(--stzh-space-xxxlarge)}}.sbdocs-content>h2,.sbdocs-content>stzh-heading[level="2"],.sbdocs-content>div>h2,.sbdocs-content>div>stzh-heading[level="2"]{margin-top:var(--stzh-space-medium);margin-bottom:var(--stzh-space-xsmall)}@media screen and (min-width: 600px){.sbdocs-content>h2,.sbdocs-content>stzh-heading[level="2"],.sbdocs-content>div>h2,.sbdocs-content>div>stzh-heading[level="2"]{margin-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.sbdocs-content>h2,.sbdocs-content>stzh-heading[level="2"],.sbdocs-content>div>h2,.sbdocs-content>div>stzh-heading[level="2"]{margin-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.sbdocs-content>h2,.sbdocs-content>stzh-heading[level="2"],.sbdocs-content>div>h2,.sbdocs-content>div>stzh-heading[level="2"]{margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){.sbdocs-content>h2,.sbdocs-content>stzh-heading[level="2"],.sbdocs-content>div>h2,.sbdocs-content>div>stzh-heading[level="2"]{margin-bottom:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.sbdocs-content>h2,.sbdocs-content>stzh-heading[level="2"],.sbdocs-content>div>h2,.sbdocs-content>div>stzh-heading[level="2"]{margin-bottom:var(--stzh-space-medium)}}.sbdocs-content>h3,.sbdocs-content>stzh-heading[level="3"],.sbdocs-content>div>h3,.sbdocs-content>div>stzh-heading[level="3"]{margin-top:var(--stzh-space-xsmall);margin-bottom:var(--stzh-space-xsmall)}@media screen and (min-width: 900px){.sbdocs-content>h3,.sbdocs-content>stzh-heading[level="3"],.sbdocs-content>div>h3,.sbdocs-content>div>stzh-heading[level="3"]{margin-top:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.sbdocs-content>h3,.sbdocs-content>stzh-heading[level="3"],.sbdocs-content>div>h3,.sbdocs-content>div>stzh-heading[level="3"]{margin-top:var(--stzh-space-medium)}}@media screen and (min-width: 900px){.sbdocs-content>h3,.sbdocs-content>stzh-heading[level="3"],.sbdocs-content>div>h3,.sbdocs-content>div>stzh-heading[level="3"]{margin-bottom:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.sbdocs-content>h3,.sbdocs-content>stzh-heading[level="3"],.sbdocs-content>div>h3,.sbdocs-content>div>stzh-heading[level="3"]{margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.sbdocs-content>h3,.sbdocs-content>stzh-heading[level="3"],.sbdocs-content>div>h3,.sbdocs-content>div>stzh-heading[level="3"]{margin-top:var(--stzh-space-xsmall)}}.sbdocs-content>h4,.sbdocs-content>stzh-heading[level="4"],.sbdocs-content>div>h4,.sbdocs-content>div>stzh-heading[level="4"]{margin-top:var(--stzh-space-small);margin-bottom:var(--stzh-space-xsmall)}@media screen and (min-width: 900px){.sbdocs-content>h4,.sbdocs-content>stzh-heading[level="4"],.sbdocs-content>div>h4,.sbdocs-content>div>stzh-heading[level="4"]{margin-top:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.sbdocs-content>h4,.sbdocs-content>stzh-heading[level="4"],.sbdocs-content>div>h4,.sbdocs-content>div>stzh-heading[level="4"]{margin-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.sbdocs-content>h4,.sbdocs-content>stzh-heading[level="4"],.sbdocs-content>div>h4,.sbdocs-content>div>stzh-heading[level="4"]{margin-bottom:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.sbdocs-content>h4,.sbdocs-content>stzh-heading[level="4"],.sbdocs-content>div>h4,.sbdocs-content>div>stzh-heading[level="4"]{margin-bottom:var(--stzh-space-medium)}}.sbdocs-content>p,.sbdocs-content>stzh-text,.sbdocs-content>ul,.sbdocs-content>ol,.sbdocs-content>dl,.sbdocs-content>stzh-list,.sbdocs-content>div>p,.sbdocs-content>div>stzh-text,.sbdocs-content>div>ul,.sbdocs-content>div>ol,.sbdocs-content>div>dl,.sbdocs-content>div>stzh-list{margin-bottom:var(--stzh-space-medium);margin-top:0}@media screen and (min-width: 600px){.sbdocs-content>p,.sbdocs-content>stzh-text,.sbdocs-content>ul,.sbdocs-content>ol,.sbdocs-content>dl,.sbdocs-content>stzh-list,.sbdocs-content>div>p,.sbdocs-content>div>stzh-text,.sbdocs-content>div>ul,.sbdocs-content>div>ol,.sbdocs-content>div>dl,.sbdocs-content>div>stzh-list{margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.sbdocs-content>p,.sbdocs-content>stzh-text,.sbdocs-content>ul,.sbdocs-content>ol,.sbdocs-content>dl,.sbdocs-content>stzh-list,.sbdocs-content>div>p,.sbdocs-content>div>stzh-text,.sbdocs-content>div>ul,.sbdocs-content>div>ol,.sbdocs-content>div>dl,.sbdocs-content>div>stzh-list{margin-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.sbdocs-content>p,.sbdocs-content>stzh-text,.sbdocs-content>ul,.sbdocs-content>ol,.sbdocs-content>dl,.sbdocs-content>stzh-list,.sbdocs-content>div>p,.sbdocs-content>div>stzh-text,.sbdocs-content>div>ul,.sbdocs-content>div>ol,.sbdocs-content>div>dl,.sbdocs-content>div>stzh-list{margin-bottom:var(--stzh-space-xxlarge)}}.sbdocs-content>ul ul,.sbdocs-content>ul ol,.sbdocs-content>ul dl,.sbdocs-content>ul stzh-list,.sbdocs-content>ol ul,.sbdocs-content>ol ol,.sbdocs-content>ol dl,.sbdocs-content>ol stzh-list,.sbdocs-content>dl ul,.sbdocs-content>dl ol,.sbdocs-content>dl dl,.sbdocs-content>dl stzh-list,.sbdocs-content>stzh-list ul,.sbdocs-content>stzh-list ol,.sbdocs-content>stzh-list dl,.sbdocs-content>stzh-list stzh-list,.sbdocs-content>div>ul ul,.sbdocs-content>div>ul ol,.sbdocs-content>div>ul dl,.sbdocs-content>div>ul stzh-list,.sbdocs-content>div>ol ul,.sbdocs-content>div>ol ol,.sbdocs-content>div>ol dl,.sbdocs-content>div>ol stzh-list,.sbdocs-content>div>dl ul,.sbdocs-content>div>dl ol,.sbdocs-content>div>dl dl,.sbdocs-content>div>dl stzh-list,.sbdocs-content>div>stzh-list ul,.sbdocs-content>div>stzh-list ol,.sbdocs-content>div>stzh-list dl,.sbdocs-content>div>stzh-list stzh-list{margin-top:0;margin-bottom:0}.sbdocs-content>stzh-text[curve=hero],.sbdocs-content>stzh-heading[curve=hero],.sbdocs-content>div>stzh-text[curve=hero],.sbdocs-content>div>stzh-heading[curve=hero]{margin-bottom:var(--stzh-space-xlarge);margin-top:0}@media screen and (min-width: 900px){.sbdocs-content>stzh-text[curve=hero],.sbdocs-content>stzh-heading[curve=hero],.sbdocs-content>div>stzh-text[curve=hero],.sbdocs-content>div>stzh-heading[curve=hero]{margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.sbdocs-content>stzh-text[curve=hero],.sbdocs-content>stzh-heading[curve=hero],.sbdocs-content>div>stzh-text[curve=hero],.sbdocs-content>div>stzh-heading[curve=hero]{margin-bottom:var(--stzh-space-xxxlarge)}}.sbdocs-content>stzh-text[curve=h1],.sbdocs-content>stzh-heading[curve=h1],.sbdocs-content>div>stzh-text[curve=h1],.sbdocs-content>div>stzh-heading[curve=h1]{margin-top:var(--stzh-space-xxlarge);margin-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 900px){.sbdocs-content>stzh-text[curve=h1],.sbdocs-content>stzh-heading[curve=h1],.sbdocs-content>div>stzh-text[curve=h1],.sbdocs-content>div>stzh-heading[curve=h1]{margin-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.sbdocs-content>stzh-text[curve=h1],.sbdocs-content>stzh-heading[curve=h1],.sbdocs-content>div>stzh-text[curve=h1],.sbdocs-content>div>stzh-heading[curve=h1]{margin-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 900px){.sbdocs-content>stzh-text[curve=h1],.sbdocs-content>stzh-heading[curve=h1],.sbdocs-content>div>stzh-text[curve=h1],.sbdocs-content>div>stzh-heading[curve=h1]{margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.sbdocs-content>stzh-text[curve=h1],.sbdocs-content>stzh-heading[curve=h1],.sbdocs-content>div>stzh-text[curve=h1],.sbdocs-content>div>stzh-heading[curve=h1]{margin-bottom:var(--stzh-space-xxxlarge)}}.sbdocs-content>stzh-text[curve=h2],.sbdocs-content>stzh-heading[curve=h2],.sbdocs-content>div>stzh-text[curve=h2],.sbdocs-content>div>stzh-heading[curve=h2]{margin-top:var(--stzh-space-medium);margin-bottom:var(--stzh-space-xsmall)}@media screen and (min-width: 600px){.sbdocs-content>stzh-text[curve=h2],.sbdocs-content>stzh-heading[curve=h2],.sbdocs-content>div>stzh-text[curve=h2],.sbdocs-content>div>stzh-heading[curve=h2]{margin-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.sbdocs-content>stzh-text[curve=h2],.sbdocs-content>stzh-heading[curve=h2],.sbdocs-content>div>stzh-text[curve=h2],.sbdocs-content>div>stzh-heading[curve=h2]{margin-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.sbdocs-content>stzh-text[curve=h2],.sbdocs-content>stzh-heading[curve=h2],.sbdocs-content>div>stzh-text[curve=h2],.sbdocs-content>div>stzh-heading[curve=h2]{margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){.sbdocs-content>stzh-text[curve=h2],.sbdocs-content>stzh-heading[curve=h2],.sbdocs-content>div>stzh-text[curve=h2],.sbdocs-content>div>stzh-heading[curve=h2]{margin-bottom:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.sbdocs-content>stzh-text[curve=h2],.sbdocs-content>stzh-heading[curve=h2],.sbdocs-content>div>stzh-text[curve=h2],.sbdocs-content>div>stzh-heading[curve=h2]{margin-bottom:var(--stzh-space-medium)}}.sbdocs-content>stzh-text[curve=h3],.sbdocs-content>stzh-heading[curve=h3],.sbdocs-content>div>stzh-text[curve=h3],.sbdocs-content>div>stzh-heading[curve=h3]{margin-top:var(--stzh-space-xsmall);margin-bottom:var(--stzh-space-xsmall)}@media screen and (min-width: 900px){.sbdocs-content>stzh-text[curve=h3],.sbdocs-content>stzh-heading[curve=h3],.sbdocs-content>div>stzh-text[curve=h3],.sbdocs-content>div>stzh-heading[curve=h3]{margin-top:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.sbdocs-content>stzh-text[curve=h3],.sbdocs-content>stzh-heading[curve=h3],.sbdocs-content>div>stzh-text[curve=h3],.sbdocs-content>div>stzh-heading[curve=h3]{margin-top:var(--stzh-space-medium)}}@media screen and (min-width: 900px){.sbdocs-content>stzh-text[curve=h3],.sbdocs-content>stzh-heading[curve=h3],.sbdocs-content>div>stzh-text[curve=h3],.sbdocs-content>div>stzh-heading[curve=h3]{margin-bottom:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.sbdocs-content>stzh-text[curve=h3],.sbdocs-content>stzh-heading[curve=h3],.sbdocs-content>div>stzh-text[curve=h3],.sbdocs-content>div>stzh-heading[curve=h3]{margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.sbdocs-content>stzh-text[curve=h3],.sbdocs-content>stzh-heading[curve=h3],.sbdocs-content>div>stzh-text[curve=h3],.sbdocs-content>div>stzh-heading[curve=h3]{margin-top:var(--stzh-space-xsmall)}}.sbdocs-content>stzh-text[curve=h4],.sbdocs-content>stzh-heading[curve=h4],.sbdocs-content>div>stzh-text[curve=h4],.sbdocs-content>div>stzh-heading[curve=h4]{margin-top:var(--stzh-space-small);margin-bottom:var(--stzh-space-xsmall)}@media screen and (min-width: 900px){.sbdocs-content>stzh-text[curve=h4],.sbdocs-content>stzh-heading[curve=h4],.sbdocs-content>div>stzh-text[curve=h4],.sbdocs-content>div>stzh-heading[curve=h4]{margin-top:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.sbdocs-content>stzh-text[curve=h4],.sbdocs-content>stzh-heading[curve=h4],.sbdocs-content>div>stzh-text[curve=h4],.sbdocs-content>div>stzh-heading[curve=h4]{margin-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.sbdocs-content>stzh-text[curve=h4],.sbdocs-content>stzh-heading[curve=h4],.sbdocs-content>div>stzh-text[curve=h4],.sbdocs-content>div>stzh-heading[curve=h4]{margin-bottom:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.sbdocs-content>stzh-text[curve=h4],.sbdocs-content>stzh-heading[curve=h4],.sbdocs-content>div>stzh-text[curve=h4],.sbdocs-content>div>stzh-heading[curve=h4]{margin-bottom:var(--stzh-space-medium)}}.sbdocs-content>stzh-text[curve=p1],.sbdocs-content>stzh-heading[curve=p1],.sbdocs-content>div>stzh-text[curve=p1],.sbdocs-content>div>stzh-heading[curve=p1]{margin-bottom:var(--stzh-space-medium);margin-top:0}@media screen and (min-width: 600px){.sbdocs-content>stzh-text[curve=p1],.sbdocs-content>stzh-heading[curve=p1],.sbdocs-content>div>stzh-text[curve=p1],.sbdocs-content>div>stzh-heading[curve=p1]{margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.sbdocs-content>stzh-text[curve=p1],.sbdocs-content>stzh-heading[curve=p1],.sbdocs-content>div>stzh-text[curve=p1],.sbdocs-content>div>stzh-heading[curve=p1]{margin-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.sbdocs-content>stzh-text[curve=p1],.sbdocs-content>stzh-heading[curve=p1],.sbdocs-content>div>stzh-text[curve=p1],.sbdocs-content>div>stzh-heading[curve=p1]{margin-bottom:var(--stzh-space-xxlarge)}}.sbdocs-content>stzh-text[curve=p2],.sbdocs-content>stzh-heading[curve=p2],.sbdocs-content>div>stzh-text[curve=p2],.sbdocs-content>div>stzh-heading[curve=p2]{margin-top:var(--stzh-space-small);margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 900px){.sbdocs-content>stzh-text[curve=p2],.sbdocs-content>stzh-heading[curve=p2],.sbdocs-content>div>stzh-text[curve=p2],.sbdocs-content>div>stzh-heading[curve=p2]{margin-top:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.sbdocs-content>stzh-text[curve=p2],.sbdocs-content>stzh-heading[curve=p2],.sbdocs-content>div>stzh-text[curve=p2],.sbdocs-content>div>stzh-heading[curve=p2]{margin-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.sbdocs-content>stzh-text[curve=p2],.sbdocs-content>stzh-heading[curve=p2],.sbdocs-content>div>stzh-text[curve=p2],.sbdocs-content>div>stzh-heading[curve=p2]{margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.sbdocs-content>stzh-text[curve=p2],.sbdocs-content>stzh-heading[curve=p2],.sbdocs-content>div>stzh-text[curve=p2],.sbdocs-content>div>stzh-heading[curve=p2]{margin-bottom:var(--stzh-space-large)}}.sbdocs-content>ul,.sbdocs-content>ol,.sbdocs-content>dl,.sbdocs-content>div>ul,.sbdocs-content>div>ol,.sbdocs-content>div>dl{list-style:none;padding-left:0;overflow:hidden}.sbdocs-content>ol,.sbdocs-content>div>ol{counter-reset:li-counter}.sbdocs-content>ul li,.sbdocs-content>ol li,.sbdocs-content>div>ul li,.sbdocs-content>div>ol li{position:relative}.sbdocs-content>ul li::before,.sbdocs-content>ol li::before,.sbdocs-content>div>ul li::before,.sbdocs-content>div>ol li::before{display:inline-block;position:absolute;left:0;top:0}.sbdocs-content>ul li,.sbdocs-content>div>ul li{padding-left:calc(var(--stzh-space-xsmall) + var(--stzh-space-small))}.sbdocs-content>ul li::before,.sbdocs-content>div>ul li::before{content:"–"}.sbdocs-content>ol li,.sbdocs-content>div>ol li{counter-increment:li-counter;padding-left:calc(var(--stzh-space-large) + var(--stzh-space-small))}.sbdocs-content>ol li::before,.sbdocs-content>div>ol li::before{content:counter(li-counter) ". "}.sbdocs-content>stzh-figure,.sbdocs-content>div>stzh-figure{margin-top:var(--stzh-space-xxlarge);margin-bottom:var(--stzh-space-xxlarge)}.sbdocs-content>blockquote,.sbdocs-content>div>blockquote{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-curve-h3-default-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h3-default-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-h3-default-text-letter-spacing);padding-left:var(--stzh-space-medium);padding-right:var(--stzh-space-medium);margin:var(--stzh-space-xxlarge);color:var(--richtext-blockquote-color);position:relative;overflow:hidden}@media screen and (min-width: 600px){.sbdocs-content>blockquote,.sbdocs-content>div>blockquote{font-size:var(--stzh-font-curve-h3-small-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h3-small-text-line-height, var(--stzh-font-deci-text-line-height));letter-spacing:var(--stzh-font-curve-h3-small-text-letter-spacing)}}@media screen and (min-width: 900px){.sbdocs-content>blockquote,.sbdocs-content>div>blockquote{font-size:var(--stzh-font-curve-h3-medium-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h3-medium-text-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h3-medium-text-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}@media screen and (min-width: 1600px){.sbdocs-content>blockquote,.sbdocs-content>div>blockquote{font-size:var(--stzh-font-curve-h3-ultra-font-size, var(--stzh-font-hecto-font-size));line-height:var(--stzh-font-curve-h3-ultra-text-line-height, var(--stzh-font-hecto-text-line-height));letter-spacing:var(--stzh-font-curve-h3-ultra-text-letter-spacing, var(--stzh-font-hecto-text-letter-spacing))}}@media screen and (min-width: 600px){.sbdocs-content>blockquote,.sbdocs-content>div>blockquote{padding-left:var(--stzh-space-large)}}@media screen and (min-width: 900px){.sbdocs-content>blockquote,.sbdocs-content>div>blockquote{padding-left:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.sbdocs-content>blockquote,.sbdocs-content>div>blockquote{padding-left:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){.sbdocs-content>blockquote,.sbdocs-content>div>blockquote{padding-right:var(--stzh-space-large)}}@media screen and (min-width: 900px){.sbdocs-content>blockquote,.sbdocs-content>div>blockquote{padding-right:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.sbdocs-content>blockquote,.sbdocs-content>div>blockquote{padding-right:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){.sbdocs-content>blockquote,.sbdocs-content>div>blockquote{margin:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.sbdocs-content>blockquote,.sbdocs-content>div>blockquote{margin:var(--stzh-space-xxxxlarge)}}@media print{.sbdocs-content>blockquote,.sbdocs-content>div>blockquote{page-break-inside:avoid;-moz-column-break-inside:avoid;break-inside:avoid;-webkit-print-color-adjust:exact;print-color-adjust:exact}}.sbdocs-content>blockquote:before,.sbdocs-content>div>blockquote:before{background:var(--richtext-blockquote-line-color);height:calc(100% - var(--stzh-space-xsmall) 2);width:0.1875rem;content:" ";display:block;position:absolute;left:0;top:var(--stzh-space-xsmall)}.sbdocs-content>blockquote p,.sbdocs-content>div>blockquote p{margin-top:0;margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 900px){.sbdocs-content>blockquote p,.sbdocs-content>div>blockquote p{margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.sbdocs-content>blockquote p,.sbdocs-content>div>blockquote p{margin-bottom:var(--stzh-space-large)}}.sbdocs-content>blockquote p::before,.sbdocs-content>blockquote p::after,.sbdocs-content>div>blockquote p::before,.sbdocs-content>div>blockquote p::after{display:inline-block}.sbdocs-content>blockquote p::before,.sbdocs-content>div>blockquote p::before{content:"«"}.sbdocs-content>blockquote p::after,.sbdocs-content>div>blockquote p::after{content:"»"}.sbdocs-content>blockquote footer,.sbdocs-content>div>blockquote footer{font-size:var(--stzh-font-curve-p2-default-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-p2-default-text-line-height, var(--stzh-font-micro-text-line-height));color:var(--richtext-blockquote-footer-color)}@media screen and (min-width: 900px){.sbdocs-content>blockquote footer,.sbdocs-content>div>blockquote footer{font-size:var(--stzh-font-curve-p2-medium-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p2-medium-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p2-medium-text-letter-spacing)}}.sbdocs-content>blockquote footer::before,.sbdocs-content>div>blockquote footer::before{content:"–";display:inline-block;margin-right:var(--stzh-space-xxxsmall)}.sbdocs-content>table,.sbdocs-content>div>table{--min-width:none;--cell-padding:var(--stzh-table-cell-padding);width:100%;border-spacing:0;min-width:var(--min-width);}.sbdocs-content>table.has-layout-fixed,.sbdocs-content>div>table.has-layout-fixed{table-layout:fixed}.sbdocs-content>thead,.sbdocs-content>div>thead{position:-webkit-sticky;position:sticky;top:0;z-index:3}.sbdocs-content>tbody tr:nth-child(even) td,.sbdocs-content>tbody tr:nth-child(even) th,.sbdocs-content>div>tbody tr:nth-child(even) td,.sbdocs-content>div>tbody tr:nth-child(even) th{background-color:var(--stzh-color-grey10)}.sbdocs-content>td,.sbdocs-content>th,.sbdocs-content>div>td,.sbdocs-content>div>th{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);text-align:left;border:none;vertical-align:top;border:none;background-color:var(--stzh-color-white);transition:background-color var(--stzh-base-transition-animation-speed);padding:var(--cell-padding);}.sbdocs-content>td a,.sbdocs-content>th a,.sbdocs-content>div>td a,.sbdocs-content>div>th a{color:var(--stzh-link-color);transition:color var(--stzh-base-transition-animation-speed);border-radius:var(--stzh-button-border-radius);text-underline-offset:var(--stzh-link-text-underline-offset);-webkit-text-decoration-line:var(--stzh-link-text-decoration-line);text-decoration-line:var(--stzh-link-text-decoration-line);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sbdocs-content>td a:hover,.sbdocs-content>th a:hover,.sbdocs-content>div>td a:hover,.sbdocs-content>div>th a:hover{color:var(--stzh-link-hover-color);-webkit-text-decoration-line:var(--stzh-link-hover-text-decoration-line);text-decoration-line:var(--stzh-link-hover-text-decoration-line)}.sbdocs-content>td b,.sbdocs-content>td strong,.sbdocs-content>th b,.sbdocs-content>th strong,.sbdocs-content>div>td b,.sbdocs-content>div>td strong,.sbdocs-content>div>th b,.sbdocs-content>div>th strong{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy)}.sbdocs-content>td i,.sbdocs-content>td em,.sbdocs-content>th i,.sbdocs-content>th em,.sbdocs-content>div>td i,.sbdocs-content>div>td em,.sbdocs-content>div>th i,.sbdocs-content>div>th em{font-family:var(--stzh-font-family-medium-italic);font-weight:var(--stzh-font-weight-medium-italic);font-style:var(--stzh-font-style-medium-italic)}.sbdocs-content>td.align-left,.sbdocs-content>th.align-left,.sbdocs-content>div>td.align-left,.sbdocs-content>div>th.align-left{text-align:left}.sbdocs-content>td.align-right,.sbdocs-content>th.align-right,.sbdocs-content>div>td.align-right,.sbdocs-content>div>th.align-right{text-align:right}.sbdocs-content>td.align-center,.sbdocs-content>th.align-center,.sbdocs-content>div>td.align-center,.sbdocs-content>div>th.align-center{text-align:center}.sbdocs-content>td.valign-auto,.sbdocs-content>th.valign-auto,.sbdocs-content>div>td.valign-auto,.sbdocs-content>div>th.valign-auto{vertical-align:auto}.sbdocs-content>td.valign-middle,.sbdocs-content>th.valign-middle,.sbdocs-content>div>td.valign-middle,.sbdocs-content>div>th.valign-middle{vertical-align:middle}.sbdocs-content>td.valign-bottom,.sbdocs-content>th.valign-bottom,.sbdocs-content>div>td.valign-bottom,.sbdocs-content>div>th.valign-bottom{vertical-align:bottom}.sbdocs-content>td.valign-top,.sbdocs-content>th.valign-top,.sbdocs-content>div>td.valign-top,.sbdocs-content>div>th.valign-top{vertical-align:top}.sbdocs-content>td.nowrap,.sbdocs-content>th.nowrap,.sbdocs-content>div>td.nowrap,.sbdocs-content>div>th.nowrap{white-space:nowrap}.sbdocs-content>td.is-head,.sbdocs-content>th.is-head,.sbdocs-content>div>td.is-head,.sbdocs-content>div>th.is-head{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy)}.sbdocs-content>td.is-sticky-left,.sbdocs-content>td.is-sticky-right,.sbdocs-content>th.is-sticky-left,.sbdocs-content>th.is-sticky-right,.sbdocs-content>div>td.is-sticky-left,.sbdocs-content>div>td.is-sticky-right,.sbdocs-content>div>th.is-sticky-left,.sbdocs-content>div>th.is-sticky-right{position:-webkit-sticky;position:sticky;z-index:1}.sbdocs-content>td.has-sticked,.sbdocs-content>th.has-sticked,.sbdocs-content>div>td.has-sticked,.sbdocs-content>div>th.has-sticked{z-index:2}.sbdocs-content>td.is-sticky-left,.sbdocs-content>th.is-sticky-left,.sbdocs-content>div>td.is-sticky-left,.sbdocs-content>div>th.is-sticky-left{left:0}.sbdocs-content>td.is-sticky-right,.sbdocs-content>th.is-sticky-right,.sbdocs-content>div>td.is-sticky-right,.sbdocs-content>div>th.is-sticky-right{right:0}.sbdocs-content>td.is-sticky-left::after,.sbdocs-content>td.is-sticky-right::after,.sbdocs-content>th.is-sticky-left::after,.sbdocs-content>th.is-sticky-right::after,.sbdocs-content>div>td.is-sticky-left::after,.sbdocs-content>div>td.is-sticky-right::after,.sbdocs-content>div>th.is-sticky-left::after,.sbdocs-content>div>th.is-sticky-right::after{background:linear-gradient(90deg, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0) 100%);content:"";pointer-events:none;position:absolute;top:0;height:100%;width:0.375rem;transform:translate(100%);opacity:0;transition:opacity var(--stzh-base-transition-animation-speed)}.sbdocs-content>td.is-sticky-left::after,.sbdocs-content>th.is-sticky-left::after,.sbdocs-content>div>td.is-sticky-left::after,.sbdocs-content>div>th.is-sticky-left::after{right:0}.sbdocs-content>td.is-sticky-right::after,.sbdocs-content>th.is-sticky-right::after,.sbdocs-content>div>td.is-sticky-right::after,.sbdocs-content>div>th.is-sticky-right::after{left:0;transform:rotate(-180deg) translate(100%)}.sbdocs-content>td.has-sticked.is-sticky-left::after,.sbdocs-content>td.has-sticked.is-sticky-right::after,.sbdocs-content>th.has-sticked.is-sticky-left::after,.sbdocs-content>th.has-sticked.is-sticky-right::after,.sbdocs-content>div>td.has-sticked.is-sticky-left::after,.sbdocs-content>div>td.has-sticked.is-sticky-right::after,.sbdocs-content>div>th.has-sticked.is-sticky-left::after,.sbdocs-content>div>th.has-sticked.is-sticky-right::after{opacity:1}.sbdocs-content>th,.sbdocs-content>div>th{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-primary)}.sbdocs-content>th.is-sortable,.sbdocs-content>div>th.is-sortable{padding:0}.sbdocs-content>a,.sbdocs-content>div>a{color:var(--stzh-link-color);transition:color var(--stzh-base-transition-animation-speed);border-radius:var(--stzh-button-border-radius);text-underline-offset:var(--stzh-link-text-underline-offset);-webkit-text-decoration-line:var(--stzh-link-text-decoration-line);text-decoration-line:var(--stzh-link-text-decoration-line);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sbdocs-content>a:hover,.sbdocs-content>div>a:hover{color:var(--stzh-link-hover-color);-webkit-text-decoration-line:var(--stzh-link-hover-text-decoration-line);text-decoration-line:var(--stzh-link-hover-text-decoration-line)}.sbdocs-content>.stzh-richtext__external-link,.sbdocs-content>div>.stzh-richtext__external-link{position:relative}.sbdocs-content>.stzh-richtext__external-vhidden,.sbdocs-content>div>.stzh-richtext__external-vhidden{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}.sbdocs-content>.stzh-richtext__external-icon-wrapper,.sbdocs-content>div>.stzh-richtext__external-icon-wrapper{position:relative;display:inline-block;width:var(--stzh-icon-size);height:var(--stzh-link-icon-wrapper-height);margin-left:var(--stzh-space-xxsmall)}.sbdocs-content>.stzh-richtext__external-icon,.sbdocs-content>div>.stzh-richtext__external-icon{--icon:var(--stzh-icon-size);position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);margin-top:0.0625rem;width:var(--stzh-icon-size);height:var(--stzh-icon-size)}.sbdocs-content>.sbdocs-title,.sbdocs-content>.sbdocs-h2,.sbdocs-content>div>.sbdocs-title,.sbdocs-content>div>.sbdocs-h2{font-family:var(--stzh-font-family-title);font-weight:var(--stzh-font-weight-title);font-style:var(--stzh-font-style-title);color:var(--stzh-heading-color)}.sbdocs-content>.sbdocs-title,.sbdocs-content>h1:first-of-type,.sbdocs-content>div>.sbdocs-title,.sbdocs-content>div>h1:first-of-type{margin-top:0}.sbdocs-content>h2:first-of-type,.sbdocs-content>div>h2:first-of-type{margin-top:var(--stzh-space-xxlarge)}@media screen and (min-width: 900px){.sbdocs-content>h2:first-of-type,.sbdocs-content>div>h2:first-of-type{margin-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.sbdocs-content>h2:first-of-type,.sbdocs-content>div>h2:first-of-type{margin-top:var(--stzh-space-xxxxlarge)}}.sbdocs-content>h2,.sbdocs-content>div>h2{padding-bottom:0;border-bottom:none}.sbdocs-content>pre>.docblock-source,.sbdocs-content>div>pre>.docblock-source{margin-top:var(--stzh-space-small);margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 900px){.sbdocs-content>pre>.docblock-source,.sbdocs-content>div>pre>.docblock-source{margin-top:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.sbdocs-content>pre>.docblock-source,.sbdocs-content>div>pre>.docblock-source{margin-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.sbdocs-content>pre>.docblock-source,.sbdocs-content>div>pre>.docblock-source{margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.sbdocs-content>pre>.docblock-source,.sbdocs-content>div>pre>.docblock-source{margin-bottom:var(--stzh-space-large)}}.sbdocs-content>table,.sbdocs-content>div>table{width:auto;min-width:auto}.sbdocs-content>ul li ul,.sbdocs-content>ul li ol,.sbdocs-content>ul li dl,.sbdocs-content>div>ul li ul,.sbdocs-content>div>ul li ol,.sbdocs-content>div>ul li dl{list-style:none;padding-left:0;overflow:hidden}.sbdocs-content>p,.sbdocs-content>ul li,.sbdocs-content>stzh-text,.sbdocs-content>div>p,.sbdocs-content>div>ul li,.sbdocs-content>div>stzh-text{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-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)}@media screen and (min-width: 900px){.sbdocs-content>p,.sbdocs-content>ul li,.sbdocs-content>stzh-text,.sbdocs-content>div>p,.sbdocs-content>div>ul li,.sbdocs-content>div>stzh-text{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)}}.sbdocs-content>p b,.sbdocs-content>p strong,.sbdocs-content>ul li b,.sbdocs-content>ul li strong,.sbdocs-content>stzh-text b,.sbdocs-content>stzh-text strong,.sbdocs-content>div>p b,.sbdocs-content>div>p strong,.sbdocs-content>div>ul li b,.sbdocs-content>div>ul li strong,.sbdocs-content>div>stzh-text b,.sbdocs-content>div>stzh-text strong{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy)}.sbdocs-content>p i,.sbdocs-content>p em,.sbdocs-content>ul li i,.sbdocs-content>ul li em,.sbdocs-content>stzh-text i,.sbdocs-content>stzh-text em,.sbdocs-content>div>p i,.sbdocs-content>div>p em,.sbdocs-content>div>ul li i,.sbdocs-content>div>ul li em,.sbdocs-content>div>stzh-text i,.sbdocs-content>div>stzh-text em{font-family:var(--stzh-font-family-medium-italic);font-weight:var(--stzh-font-weight-medium-italic);font-style:var(--stzh-font-style-medium-italic)}';const o=class{constructor(e){t(this,e)}componentDidLoad(){console.log(this.constructor.style.replace('@charset "UTF-8";',""))}render(){return e(n,null)}};o.style=s;export{o as stzh_skin_storybook_preview};
2	+ //# sourceMappingURL=p-f3d2dc46.entry.js.map

package/dist/stzh-components/{p-3e1ae32f.entry.js.map → p-f3d2dc46.entry.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["stzhSkinStorybookPreviewCss","StzhSkinStorybookPreview","componentDidLoad","console","log","this","constructor","style","replace","render","h","Host"],"sources":["src/components/stzh-skin-storybook-preview/stzh-skin-storybook-preview.scss?tag=stzh-skin-storybook-preview","src/components/stzh-skin-storybook-preview/stzh-skin-storybook-preview.tsx"],"sourcesContent":["\n.sbdocs-content >,\n.sbdocs-content > div > {\n @include font;\n @include richtext-slotted;\n\n .sbdocs-title, .sbdocs-h2 {\n @include font('title');\n color: $headingColor;\n }\n\n .sbdocs-title,\n h1:first-of-type {\n margin-top: 0;\n }\n\n h2:first-of-type {\n @include spaceCurve('margin-top', 'large');\n }\n\n h2 {\n padding-bottom: 0;\n border-bottom: none;\n }\n\n pre > .docblock-source {\n @include spaceCurve('margin-top', 'small');\n @include spaceCurve('margin-bottom', 'small');\n }\n\n table {\n width: auto;\n min-width: auto;\n }\n\n ul li {\n ul, ol, dl {\n list-style: none;\n padding-left: 0;\n overflow: hidden;\n }\n }\n\n p,\n ul li,\n stzh-text {\n @include font;\n @include fontCurve($textFontCurveDefault);\n\n b, strong {\n @include font('heavy');\n }\n\n i, em {\n @include font;\n }\n }\n}\n","import {\n Component,\n Host,\n h\n} from \"@stencil/core\";\n\n/*\n \n */\n@Component({\n tag: \"stzh-skin-storybook-preview\",\n styleUrl: \"stzh-skin-storybook-preview.scss\"\n})\nexport class StzhSkinStorybookPreview {\n componentDidLoad() {\n // copy this string from console and put it in preview.css\n console.log((this.constructor as any).style.replace('@charset \"UTF-8\";', ''));\n }\n\n render() {\n return (\n <Host>\n </Host>\n );\n }\n}\n"],"mappings":"kDAAA,MAAMA,EAA8B,~~m4xC~~,MCavBC,EAAwB,M,yBACnC,gBAAAC,GAEEC,QAAQC,IAAKC,KAAKC,YAAoBC,MAAMC,QAAQ,oBAAqB,I,CAG3E,MAAAC,GACE,OACEC,EAACC,EAAI,K"}
1	+ {"version":3,"names":["stzhSkinStorybookPreviewCss","StzhSkinStorybookPreview","componentDidLoad","console","log","this","constructor","style","replace","render","h","Host"],"sources":["src/components/stzh-skin-storybook-preview/stzh-skin-storybook-preview.scss?tag=stzh-skin-storybook-preview","src/components/stzh-skin-storybook-preview/stzh-skin-storybook-preview.tsx"],"sourcesContent":["\n.sbdocs-content >,\n.sbdocs-content > div > {\n @include font;\n @include richtext-slotted;\n\n .sbdocs-title, .sbdocs-h2 {\n @include font('title');\n color: $headingColor;\n }\n\n .sbdocs-title,\n h1:first-of-type {\n margin-top: 0;\n }\n\n h2:first-of-type {\n @include spaceCurve('margin-top', 'large');\n }\n\n h2 {\n padding-bottom: 0;\n border-bottom: none;\n }\n\n pre > .docblock-source {\n @include spaceCurve('margin-top', 'small');\n @include spaceCurve('margin-bottom', 'small');\n }\n\n table {\n width: auto;\n min-width: auto;\n }\n\n ul li {\n ul, ol, dl {\n list-style: none;\n padding-left: 0;\n overflow: hidden;\n }\n }\n\n p,\n ul li,\n stzh-text {\n @include font;\n @include fontCurve($textFontCurveDefault);\n\n b, strong {\n @include font('heavy');\n }\n\n i, em {\n @include font('medium-italic');\n }\n }\n}\n","import {\n Component,\n Host,\n h\n} from \"@stencil/core\";\n\n/*\n \n */\n@Component({\n tag: \"stzh-skin-storybook-preview\",\n styleUrl: \"stzh-skin-storybook-preview.scss\"\n})\nexport class StzhSkinStorybookPreview {\n componentDidLoad() {\n // copy this string from console and put it in preview.css\n console.log((this.constructor as any).style.replace('@charset \"UTF-8\";', ''));\n }\n\n render() {\n return (\n <Host>\n </Host>\n );\n }\n}\n"],"mappings":"kDAAA,MAAMA,EAA8B,k8xC,MCavBC,EAAwB,M,yBACnC,gBAAAC,GAEEC,QAAQC,IAAKC,KAAKC,YAAoBC,MAAMC,QAAQ,oBAAqB,I,CAG3E,MAAAC,GACE,OACEC,EAACC,EAAI,K"}

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

	@@ -0,0 +1,2 @@
1	+ import{r as t,h as e,a as n,g as s}from"./p-c7bfac7a.js";const o='.sc-stzh-content-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-content-h{display:none}.sc-stzh-content-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-content-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-content-h .sc-stzh-content,.sc-stzh-content-h .sc-stzh-content::before,.sc-stzh-content-h .sc-stzh-content::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-content-h .has-focus.sc-stzh-content{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-content-h .stzh-fylingfocus-focused.sc-stzh-content{outline-style:none !important}.sc-stzh-content-h .stzh-fylingfocus-focused.sc-stzh-content::-moz-focus-inner{border:0 !important}.sc-stzh-content-h{--grid-template-areas:var(--stzh-content-grid-template-areas, "content content content content")}@media screen and (min-width: 900px){.sc-stzh-content-h{--grid-template-areas:var(--stzh-content-grid-template-areas, "content content content content content content content content")}}@media screen and (min-width: 1260px){.sc-stzh-content-h{--grid-template-areas:var(--stzh-content-grid-template-areas, "aside-left aside-left content content content content content content content content aside-right aside-right")}}@media screen and (min-width: 1260px){[variant=shifted].sc-stzh-content-h{--grid-template-areas:var(--stzh-content-shifted-grid-template-areas, var(--stzh-content-grid-template-areas, "aside-left aside-left content content content content content content content content content aside-right"))}}@media screen and (min-width: 1260px){[variant=full].sc-stzh-content-h{--grid-template-areas:var(--stzh-content-full-grid-template-areas, var(--stzh-content-grid-template-areas, "content content content content content content content content content content content content"))}}.sc-stzh-content-h .sc-stzh-content-s>{grid-area:content}@media screen and (min-width: 600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s>{--stzh-cta-small-grid-template-areas:"cta cta cta ."}}@media screen and (min-width: 900px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s>{--stzh-cta-grid-template-areas:"cta cta cta cta cta . . .";--stzh-cta-small-grid-template-areas:"cta cta cta cta . . . ."}}@media screen and (min-width: 600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s>{--stzh-text-display:grid;--stzh-text-grid-template-areas:"text text text .";--stzh-richtext-display:grid;--stzh-richtext-grid-template-areas:"text text text ."}}@media screen and (min-width: 900px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s>{--stzh-text-grid-template-areas:"text text text text text text . .";--stzh-richtext-grid-template-areas:"text text text text text text . ."}}@media screen and (min-width: 600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s>{--stzh-datalist-grid-template-areas:"list list list .";--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-small) - 2 var(--stzh-grid-gutter-small)) / 3 * 4) + 3 * var(--stzh-grid-gutter-small) + var(--stzh-grid-gutter-small))}}@media screen and (min-width: 900px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s>{--stzh-datalist-grid-template-areas:"list list list list list . . .";--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-medium) - 4 var(--stzh-grid-gutter-medium)) / 5 * 8) + 7 * var(--stzh-grid-gutter-medium) + var(--stzh-grid-gutter-medium))}}@media screen and (min-width: 1260px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s>{--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-large) - 4 var(--stzh-grid-gutter-large)) / 5 * 8) + 7 * var(--stzh-grid-gutter-large) + var(--stzh-grid-gutter-large))}}@media screen and (min-width: 1600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s>{--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-ultra) - 4 var(--stzh-grid-gutter-ultra)) / 5 * 8) + 7 * var(--stzh-grid-gutter-ultra) + var(--stzh-grid-gutter-ultra))}}@media screen and (min-width: 600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-datalist{--stzh-text-display:block;--stzh-richtext-display:block}}@media screen and (min-width: 600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-section[variant=highlight],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-ghettobox,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-message,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-toast,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-tooltip,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-popover,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-accordion,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-timeline,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-twocolumns,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-textandimage,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-datalist stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-dialog,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-overlay{--stzh-cta-small-grid-template-areas:"cta cta cta cta"}}@media screen and (min-width: 900px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-section[variant=highlight],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-ghettobox,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-message,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-toast,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-tooltip,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-popover,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-accordion,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-timeline,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-twocolumns,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-textandimage,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-datalist stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-dialog,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-overlay{--stzh-cta-grid-template-areas:"cta cta cta cta cta cta cta cta";--stzh-cta-small-grid-template-areas:"cta cta cta cta cta cta cta cta"}}@media screen and (min-width: 600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-section[variant=highlight],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-ghettobox,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-message,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-toast,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-tooltip,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-popover,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-accordion,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-timeline,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-twocolumns,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-textandimage,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-datalist stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-dialog,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-overlay{--stzh-text-display:block;--stzh-richtext-display:block}}@media screen and (min-width: 600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-section[variant=highlight],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-ghettobox,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-message,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-toast,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-tooltip,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-popover,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-accordion,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-timeline,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-twocolumns,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-textandimage,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-datalist stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-dialog,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-overlay{--stzh-datalist-grid-template-areas:"list list list list";--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-small) - 2 * var(--stzh-grid-gutter-small)) / 4 * 4) + 3 * var(--stzh-grid-gutter-small) + var(--stzh-grid-gutter-small))}}@media screen and (min-width: 900px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-section[variant=highlight],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-ghettobox,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-message,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-toast,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-tooltip,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-popover,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-accordion,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-timeline,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-twocolumns,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-textandimage,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-datalist stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-dialog,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-overlay{--stzh-datalist-grid-template-areas:"list list list list list list list list";--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-medium) - 4 * var(--stzh-grid-gutter-medium)) / 8 * 8) + 7 * var(--stzh-grid-gutter-medium) + var(--stzh-grid-gutter-medium))}}@media screen and (min-width: 1260px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-section[variant=highlight],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-ghettobox,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-message,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-toast,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-tooltip,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-popover,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-accordion,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-timeline,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-twocolumns,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-textandimage,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-datalist stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-dialog,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-overlay{--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-large) - 4 * var(--stzh-grid-gutter-large)) / 8 * 8) + 7 * var(--stzh-grid-gutter-large) + var(--stzh-grid-gutter-large))}}@media screen and (min-width: 1600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-section[variant=highlight],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-ghettobox,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-message,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-toast,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-tooltip,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-popover,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-accordion,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-timeline,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-twocolumns,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-textandimage,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-datalist stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-dialog,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-overlay{--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-ultra) - 4 * var(--stzh-grid-gutter-ultra)) / 8 * 8) + 7 * var(--stzh-grid-gutter-ultra) + var(--stzh-grid-gutter-ultra))}}.stzh-content.sc-stzh-content{--stzh-content-grid-template-areas:"content content content content content content content content content content content content";--stzh-content-shifted-grid-template-areas:"content content content content content content content content content content content content";--stzh-content-full-grid-template-areas:"content content content content content content content content content content content content";-moz-column-gap:var(--stzh-grid-gutter);column-gap:var(--stzh-grid-gutter);display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));grid-template-areas:var(--grid-template-areas)}@media screen and (min-width: 600px){.stzh-content.sc-stzh-content{-moz-column-gap:var(--stzh-grid-gutter-small);column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-content.sc-stzh-content{-moz-column-gap:var(--stzh-grid-gutter-medium);column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-content.sc-stzh-content{-moz-column-gap:var(--stzh-grid-gutter-large);column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-content.sc-stzh-content{-moz-column-gap:var(--stzh-grid-gutter-ultra);column-gap:var(--stzh-grid-gutter-ultra)}}@media screen and (min-width: 900px){.stzh-content.sc-stzh-content{grid-template-columns:repeat(8, minmax(0, 1fr))}}@media screen and (min-width: 1260px){.stzh-content.sc-stzh-content{grid-template-columns:repeat(12, minmax(0, 1fr))}}';const a=class{constructor(e){t(this,e);this.variant="default";this.preventElementLayout=false}render(){const t={"stzh-content":true,[`stzh-content--${this.variant}`]:!!this.variant};return e(n,null,e("div",{class:t},e("slot",null)))}get element(){return s(this)}};a.style=o;export{a as stzh_content};
2	+ //# sourceMappingURL=p-f50e0102.entry.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"names":["stzhContentCss","StzhContent","render","classes","this","variant","h","Host","class"],"sources":["src/components/stzh-content/stzh-content.scss?tag=stzh-content&encapsulation=scoped","src/components/stzh-content/stzh-content.tsx"],"sourcesContent":[":host {\n --grid-template-areas: var(--stzh-content-grid-template-areas, \"content content content content\");\n\n @include mq($from: medium) {\n --grid-template-areas: var(--stzh-content-grid-template-areas, \"content content content content content content content content\");\n }\n\n @include mq($from: large) {\n --grid-template-areas: var(--stzh-content-grid-template-areas, \"aside-left aside-left content content content content content content content content aside-right aside-right\");\n }\n\n &[variant=\"shifted\"] {\n @include mq($from: large) {\n --grid-template-areas: var(--stzh-content-shifted-grid-template-areas, var(--stzh-content-grid-template-areas, \"aside-left aside-left content content content content content content content content content aside-right\"));\n }\n }\n\n &[variant=\"full\"] {\n @include mq($from: large) {\n --grid-template-areas: var(--stzh-content-full-grid-template-areas, var(--stzh-content-grid-template-areas, \"content content content content content content content content content content content content\"));\n }\n }\n\n ::slotted(*) {\n grid-area: content;\n }\n\n &:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) ::slotted(*) {\n /* CTA Layout */\n\n @include mq($from: small) {\n --stzh-cta-small-grid-template-areas: \"cta cta cta .\";\n }\n\n @include mq($from: medium) {\n --stzh-cta-grid-template-areas: \"cta cta cta cta cta . . .\";\n --stzh-cta-small-grid-template-areas: \"cta cta cta cta . . . .\";\n }\n\n /* Text / Richtext Layout */\n\n @include mq($from: small) {\n --stzh-text-display: grid;\n --stzh-text-grid-template-areas: \"text text text .\";\n\n --stzh-richtext-display: grid;\n --stzh-richtext-grid-template-areas: \"text text text .\";\n }\n\n @include mq($from: medium) {\n --stzh-text-grid-template-areas: \"text text text text text text . .\";\n --stzh-richtext-grid-template-areas: \"text text text text text text . .\";\n }\n\n /* Datalist Layout */\n\n @include mq($from: small) {\n --stzh-datalist-grid-template-areas: \"list list list .\";\n // breakout with details element inside datalist-item\n --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterSmall} - 2 * #{$gridGutterSmall}) / 3 * 4) + 3 * #{$gridGutterSmall} + #{$gridGutterSmall});\n }\n\n @include mq($from: medium) {\n --stzh-datalist-grid-template-areas: \"list list list list list . . .\";\n --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterMedium} - 4 * #{$gridGutterMedium}) / 5 * 8) + 7 * #{$gridGutterMedium} + #{$gridGutterMedium});\n }\n\n @include mq($from: large) {\n --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterLarge} - 4 * #{$gridGutterLarge}) / 5 * 8) + 7 * #{$gridGutterLarge} + #{$gridGutterLarge});\n }\n\n @include mq($from: ultra) {\n --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterUltra} - 4 * #{$gridGutterUltra}) / 5 * 8) + 7 * #{$gridGutterUltra} + #{$gridGutterUltra});\n }\n\n /* Reset layout inside certain components */\n\n stzh-datalist {\n /* Text Layout */\n\n @include mq($from: small) {\n --stzh-text-display: block;\n --stzh-richtext-display: block;\n }\n }\n\n stzh-section[variant=\"highlight\"],\n stzh-ghettobox,\n stzh-message,\n stzh-toast,\n stzh-tooltip,\n stzh-popover,\n stzh-accordion,\n stzh-timeline,\n stzh-twocolumns,\n stzh-textandimage,\n stzh-datalist stzh-datalist,\n stzh-dialog,\n stzh-overlay {\n /* CTA Layout */\n\n @include mq($from: small) {\n --stzh-cta-small-grid-template-areas: \"cta cta cta cta\";\n }\n\n @include mq($from: medium) {\n --stzh-cta-grid-template-areas: \"cta cta cta cta cta cta cta cta\";\n --stzh-cta-small-grid-template-areas: \"cta cta cta cta cta cta cta cta\";\n }\n\n /* Text Layout */\n\n @include mq($from: small) {\n --stzh-text-display: block;\n --stzh-richtext-display: block;\n }\n\n /* Datalist Layout */\n\n @include mq($from: small) {\n --stzh-datalist-grid-template-areas: \"list list list list\";\n // breakout with details element inside datalist-item\n --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterSmall} - 2 * #{$gridGutterSmall}) / 4 * 4) + 3 * #{$gridGutterSmall} + #{$gridGutterSmall});\n }\n\n @include mq($from: medium) {\n --stzh-datalist-grid-template-areas: \"list list list list list list list list\";\n --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterMedium} - 4 * #{$gridGutterMedium}) / 8 * 8) + 7 * #{$gridGutterMedium} + #{$gridGutterMedium});\n }\n\n @include mq($from: large) {\n --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterLarge} - 4 * #{$gridGutterLarge}) / 8 * 8) + 7 * #{$gridGutterLarge} + #{$gridGutterLarge});\n }\n\n @include mq($from: ultra) {\n --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterUltra} - 4 * #{$gridGutterUltra}) / 8 * 8) + 7 * #{$gridGutterUltra} + #{$gridGutterUltra});\n }\n }\n }\n}\n\n.stzh-content {\n // set nested content elements to be fullwidth\n --stzh-content-grid-template-areas: \"content content content content content content content content content content content content\";\n --stzh-content-shifted-grid-template-areas: \"content content content content content content content content content content content content\";\n --stzh-content-full-grid-template-areas: \"content content content content content content content content content content content content\";\n\n @include grid;\n grid-template-areas: var(--grid-template-areas);\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n} from \"@stencil/core\";\n\n/**\n * @slot - Slot for any content\n */\n@Component({\n tag: \"stzh-content\",\n styleUrl: \"stzh-content.scss\",\n scoped: true\n})\nexport class StzhContent {\n /** Variant */\n @Prop({ reflect: true }) variant: \"default\" | \"shifted\" | \"full\" = \"default\";\n\n /** Prevent changing layout of elements within this content element */\n @Prop({ reflect: true }) preventElementLayout = false;\n\n @Element() element: HTMLStzhContentElement;\n\n render() {\n const classes = {\n \"stzh-content\": true,\n [`stzh-content--${this.variant}`]: !!this.variant,\n };\n\n return (\n <Host>\n <div class={classes}>\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"yDAAA,MAAMA,EAAiB,qknB,MCgBVC,EAAW,M,sCAE6C,U,0BAGnB,K,CAIhD,MAAAC,GACE,MAAMC,EAAU,CACd,eAAgB,KAChB,CAAC,iBAAiBC,KAAKC,aAAcD,KAAKC,SAG5C,OACEC,EAACC,EAAI,KACHD,EAAA,OAAKE,MAAOL,GACVG,EAAA,c"}