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

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

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

Files changed (590) hide show

package/dist/stzh-components/{p-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":"iWAAA,MAAMA,EAAiB,khVCyCvB,MAAMC,EAA0B,IAChC,MAAMC,EAA0B,IAChC,MAAMC,EAAgC,IACtC,MAAMC,EAAgC,IAEtC,SAASC,IACP,MAAMC,EAAUC,EAAM,SAASC,QAC/B,MAAO,CACLC,UAAW,CACT,CAAEC,QAAS,KACX,CAAEA,QAAS,MAEbC,QAAS,CACPC,SAAUN,EAAUH,EAAgCF,EACpDY,OAAQ,UAGd,CAEA,SAASC,IACP,MAAMR,EAAUC,EAAM,SAASC,QAC/B,MAAO,CACLC,UAAW,CACT,CAAEC,QAAS,KACX,CAAEA,QAAS,MAEbC,QAAS,CACPC,SAAUN,EAAUF,EAAgCF,EACpDW,OAAQ,UAGd,CAEA,SAASE,IACP,MAAMT,EAAUC,EAAM,SAASC,QAC/B,MAAO,CACLC,UAAW,CACT,CAAEO,UAAWV,EAAU,mBAAqB,oBAC5C,CAAEU,UAAW,oBAEfL,QAAS,CACPC,SAAUN,EAAUH,EAAgCF,EACpDY,OAAQ,UAGd,CAEA,SAASI,IACP,MAAMX,EAAUC,EAAM,SAASC,QAC/B,MAAO,CACLC,UAAW,CACT,CAAEO,UAAW,mBACb,CAAEA,UAAWV,EAAU,mBAAqB,qBAE9CK,QAAS,CACPC,SAAUN,EAAUF,EAAgCF,EACpDW,OAAQ,UAGd,CAEA,MAAMK,EAAU,CACdC,IAAK,IAGP,MAAMC,EAAkB,oBAExB,IAAIC,EAAiB,E,MAaRC,EAAW,M,+KAiNdC,KAAAC,cAAwB,KACxBD,KAAAE,cAAwB,KAMxBF,KAAAG,cAAiBC,IACvB,GAAIA,EAAMT,UAAYA,EAAQC,IAAK,CACjCI,KAAKK,M,GAIDL,KAAAM,eAAiB,KACvBN,KAAKO,QAAQ,EAGPP,KAAAQ,gBAAkBC,UACxB,GAAIzB,EAAM,SAASC,QAAS,CAC1B,MAAMyB,EAAa,CACjBC,EAAO,CACLC,SAAUZ,KAAKa,SACfC,UAAWd,KAAKe,WAElBC,EAAK,CACHC,QAAS,IAEXC,EAAM,CACJD,QAAS,KAIb,GAAIjB,KAAKmB,UAAY,UAAW,CAC9BT,EAAWU,KACTC,EAAM,CACJC,QAAStB,KAAKuB,aACdN,QAAS,I,CAKf,MAAMO,EAAEA,EAAI,EAACC,EAAEA,EAAI,EAACC,SAAEA,EAAW,WAAUC,UAAEA,EAASC,eAAEA,SAC9CpB,EAAgBR,KAAK6B,oBAAqB7B,KAAK8B,cAAe,CACpEJ,SAAU1B,KAAK0B,SACfC,UAAW3B,KAAK2B,UAChBjB,eAGJV,KAAK+B,kBAAoBJ,EAEzBK,OAAOC,OAAOjC,KAAK8B,cAAcI,MAAO,CACtCC,SAAUT,EACVU,KAAM,GAAGZ,MACTa,IAAK,GAAGZ,QAGV,GAAIzB,KAAKmB,UAAY,UAAW,CAC9Ba,OAAOC,OAAOjC,KAAKuB,aAAaW,MAAO,CACrCE,KAAMZ,GAAK,KAAO,GAAGI,EAAeP,MAAMG,MAAQ,GAClDa,IAAKZ,GAAK,KAAO,GAAGG,EAAeP,MAAMI,MAAQ,I,MAGhD,CACLO,OAAOC,OAAOjC,KAAK8B,cAAcI,MAAO,CACtCC,SAAU,KACVC,KAAM,KACNC,IAAK,OAGP,GAAIrC,KAAKmB,UAAY,UAAW,CAC9Ba,OAAOC,OAAOjC,KAAKuB,aAAaW,MAAO,CACrCE,KAAM,KACNC,IAAK,M,IAMLrC,KAAAsC,iBAAoBlC,IAC1B,MAAMmC,EAAQnC,EAAMoC,eAAe,GACnCxC,KAAKC,cAAgBsC,EAAME,MAC3BzC,KAAKE,cAAgBqC,EAAMG,KAAK,EAO1B1C,KAAA2C,eAAkBvC,IACxB,MAAMmC,EAAQnC,EAAMoC,eAAe,GACnC,MAAMI,EAAQL,EAAME,MAAQzC,KAAKC,cACjC,MAAM4C,EAAQN,EAAMG,MAAQ1C,KAAKE,cACjC,MAAM4C,EAAY,GAElB,MAAMC,EAAWC,KAAKC,IAAIJ,IAAUC,GAC/BE,KAAKC,IAAIL,IAAUE,EAExB,GAAIC,EAAU,CACZ/C,KAAKK,M,CAGPL,KAAKE,cAAgB,KACrBF,KAAKC,cAAgB,IAAI,EAGnBD,KAAAkD,KAAO,K,MACb,IAAIC,GAAUC,EAAApD,KAAKqD,kBAAc,MAAAD,SAAA,SAAAA,EAAEE,kBAEnC,IAAKH,EAAS,CACZ,MAAMI,EAAcC,MAAMC,KAAKzD,KAAKsB,QAAQoC,UACzCC,MAAKC,IAAUA,EAAMC,aAAa,UAErCV,EAAUI,C,CAGZ,GAAIJ,EAAS,CACXnD,KAAK6B,oBAAsBsB,EAC3BA,EAAQW,iBAAiB,QAAS9D,KAAKM,e,aApUa,M,eAGR,S,eAGqB,G,aAGG,U,UAGnB,U,cAG1B,E,mCAMH,G,cAGiB,W,6DAqBzC,UAAMyD,GACJ,GAAI/D,KAAKgE,KAAM,CACb,M,CAGFhE,KAAKiE,gBAAkB,KACvBjE,KAAKgE,KAAO,KACZ,OAAOE,EAAalE,KAAKsB,QAAS,a,CAKpC,UAAMjB,GACJ,IAAKL,KAAKgE,KAAM,CACd,M,CAGFhE,KAAKiE,gBAAkB,KACvBjE,KAAKgE,KAAO,MACZ,OAAOE,EAAalE,KAAKsB,QAAS,a,CAKpC,YAAMf,GACJ,GAAIP,KAAKgE,KAAM,CACb,aAAahE,KAAKK,M,KACb,CACL,aAAaL,KAAK+D,M,EAKtB,YAAMI,GACJ,aAAanE,KAAKQ,iB,CAIpB,kBAAA4D,CAAmBhE,GACjB,IAAKJ,KAAKgE,KAAM,CACd,M,CAGF,MAAMK,EAAiBjE,EAAMkE,SAAWtE,KAAK8B,eACxC9B,KAAK8B,cAAcyC,SAASnE,EAAMkE,UAA2B,MAElE,MAAME,EAAiBpE,EAAMkE,SAAWtE,KAAKqD,gBACxCrD,KAAKqD,eAAekB,SAASnE,EAAMkE,QAExC,GAAID,IAAmBG,EAAgB,CACrCxE,KAAKK,M,EAKT,iBAAMoE,CAAYC,GAChB,IAAK1E,KAAK8B,cAAe,CACvB,M,CAGF,GAAI4C,EAAU,CACZ,GAAI1E,KAAKiE,gBAAiB,CACxBjE,KAAK2E,SAASC,KAAK,CACjBC,UAAW,gB,CAIf,MAAMC,EAAgBhG,IACtB,MAAMiG,EAAsBvF,UAEtBwF,QAAQC,IAAI,CAChBC,EAAelF,KAAKmF,uBACpBD,EAAelF,KAAKoF,gBACpBF,EAAelF,KAAK8B,iBAKtB9B,KAAK8B,cAAcI,MAAMmD,WAAa,yDACtCrF,KAAKmF,sBAAsBG,OAAS,YAE9BN,QAAQC,IAAI,CAChBM,EACEvG,EAAM,SAASC,QAAUe,KAAK8B,cAAgB9B,KAAKmF,sBACnDL,EAAc5F,UACd4F,EAAc1F,SAEhBmG,EACEvG,EAAM,SAASC,QAAUe,KAAK8B,cAAgB9B,KAAKoF,eACnDL,EAAoB7F,UACpB6F,EAAoB3F,WAIxB,GAAIY,KAAKiE,gBAAiB,CACxBjE,KAAKwF,WAAWZ,KAAK,CACnBC,UAAW,gB,MAGV,CACL,GAAI7E,KAAKiE,gBAAiB,CACxBjE,KAAKyF,UAAUb,KAAK,CAClBC,UAAW,gB,CAIf,MAAMa,EAAgBnG,IACtB,MAAMoG,EAAsBjG,UAEtBsF,QAAQC,IAAI,CAChBC,EAAelF,KAAKmF,uBACpBD,EAAelF,KAAKoF,gBACpBF,EAAelF,KAAK8B,uBAGhBkD,QAAQC,IAAI,CAChBM,EACEvG,EAAM,SAASC,QAAUe,KAAK8B,cAAgB9B,KAAKmF,sBACnDO,EAAcxG,UACdwG,EAActG,SAEhBmG,EACEvG,EAAM,SAASC,QAAUe,KAAK8B,cAAgB9B,KAAKoF,eACnDO,EAAoBzG,UACpByG,EAAoBvG,WAIxBY,KAAKmF,sBAAsBG,OAAS,KACpCtF,KAAK8B,cAAcI,MAAMmD,WAAa,OAEtC,GAAIrF,KAAKiE,gBAAiB,CACxBjE,KAAK4F,WAAWhB,KAAK,CACnBC,UAAW,gB,EAKjB7E,KAAKiE,gBAAkB,K,CAIzB,eAAA4B,CAAgBnB,GACd,UAAWA,IAAa,SAAU,CAChC1E,KAAKa,SAAW6D,C,KACX,CACL1E,KAAKa,SAAWb,KAAKmB,UAAY,UAAY,GAAK,C,EAyItD,uBAAM2E,GACJ9F,KAAK+F,GAAK,gBAAgBjG,MAE1BE,KAAK6F,gBAAgB7F,KAAKa,UAE1B,IAAKb,KAAKgG,aAAc,CACtBhG,KAAKgG,mBAAqBC,OAAOC,eAAeC,MAAMC,kBAAkBpG,KAAKsB,QAAS,U,EAIlF,YAAA+E,GACNC,SAASC,KAAKC,UAAUC,IAAI5G,GAE5B,MAAM6G,EAASC,EAAc3G,KAAK6B,qBAElC7B,KAAK6B,oBACF+E,aAAaF,EAAS,gBAAkB,gBAAiB,QAE5D,GAAI1G,KAAK6G,KAAM,CACb7G,KAAK6G,KAAKC,U,EAIN,aAAAC,GACNT,SAASC,KAAKC,UAAUQ,OAAOnH,GAE/B,MAAM6G,EAASC,EAAc3G,KAAK6B,qBAElC7B,KAAK6B,oBACF+E,aAAaF,EAAS,gBAAkB,gBAAiB,SAE5D,GAAI1G,KAAK6G,KAAM,CACb7G,KAAK6G,KAAKI,Y,EAId,kBAAAC,GACElH,KAAKQ,kBACLR,KAAKgE,KAAOhE,KAAKqG,eAAiBrG,KAAK+G,gBAEvC,MAAML,EAASC,EAAc3G,KAAK6B,qBAElC,GAAK6E,IAAW1G,KAAK6B,oBAAoBsF,aAAa,sBAC/CT,IAAW1G,KAAK6B,oBAAoBsF,aAAa,oBACtD,CACAnH,KAAK6B,oBACF+E,aAAaF,EAAS,mBAAqB,mBAAoB,GAAG1G,KAAK+F,yB,CAG5E,GAAKW,IAAW1G,KAAK6B,oBAAoBsF,aAAa,gBAC/CT,IAAW1G,KAAK6B,oBAAoBsF,aAAa,cACtD,CACAnH,KAAK6B,oBACF+E,aAAaF,EAAS,aAAe,aAAc1G,KAAKoH,M,CAG7D,GAAKV,IAAW1G,KAAK6B,oBAAoBsF,aAAa,kBAC/CT,IAAW1G,KAAK6B,oBAAoBsF,aAAa,eACtD,CACAnH,KAAK6B,oBACF+E,aAAaF,EAAS,eAAiB,cAAe1G,KAAKoH,M,EAIlE,kBAAAC,GACErH,KAAK6G,KAAKS,wBAAwBtH,KAAK8B,c,CAGzC,gBAAAyF,GACEvH,KAAKwH,kBAAoBC,EACvBzH,KAAK6B,oBACL7B,KAAK8B,cACL9B,KAAKQ,iBAGPR,KAAKmF,sBAAsBG,QAAUtF,KAAKgE,KAE1ChE,KAAK6G,KAAOa,EAAgB1H,KAAK8B,cAAe,CAC9C6F,cAAe3H,KAAK8B,cACpB8F,wBAAyB,KACzBC,wBAAyB,OAG3B,GAAI7H,KAAKgE,KAAM,CACbhE,KAAKqG,c,EAIT,iBAAAyB,GACE9H,KAAKkD,OAELlD,KAAK+H,SAAW,IAAIC,iBAAiBhI,KAAKkD,MAC1ClD,KAAK+H,SAASE,QAAQjI,KAAKsB,QAAS,CAClC4G,UAAW,KACXC,QAAS,M,CAIb,oBAAAC,GACE,GAAIpI,KAAK+H,SAAU,CACjB/H,KAAK+H,SAASM,Y,CAGhB,GAAIrI,KAAKwH,kBAAmB,CAC1BxH,KAAKwH,mB,CAGP,GAAIxH,KAAK6B,oBAAqB,CAC5B7B,KAAK6B,oBAAoByG,oBAAoB,QAAStI,KAAKM,e,EAI/D,MAAAiI,GACE,MAAMC,EAAU,CACd,eAAgB,KAChB,CAAC,sBAAuBxI,KAAKgE,KAC7B,CAAC,2BAA2BhE,KAAK+B,uBAAwB/B,KAAK+B,kBAC9D,CAAC,2BAA2B/B,KAAKyI,eAAgBzI,KAAKyI,UACtD,CAAC,iBAAiBzI,KAAK0I,UAAW1I,KAAK0I,KACvC,CAAC,iBAAiB1I,KAAKmB,aAAcnB,KAAKmB,SAG5C,OACEwH,EAACC,EAAI,KACHD,EAAA,OACEE,MAAOL,EACPM,aAAc9I,KAAKsC,iBACnByG,WAAY/I,KAAK2C,gBAEjBgG,EAAA,OACEK,IAAMC,GAAQjJ,KAAKqD,eAAiB4F,EACpCJ,MAAM,yBAENF,EAAA,cAEFA,EAAA,OAAKE,MAAM,wBAAwB9C,GAAI,GAAG/F,KAAK+F,0BAC5C/F,KAAKgG,aAAahC,MAErB2E,EAAA,OACEK,IAAMC,GAAQjJ,KAAKmF,sBAAwB8D,EAC3CJ,MAAM,iCAENF,EAAA,OAAKE,MAAM,2BACXF,EAAA,OACEK,IAAMC,GAAQjJ,KAAKoF,eAAiB6D,EACpCJ,MAAM,yBAENF,EAAA,OACEK,IAAMC,GAAQjJ,KAAK8B,cAAgBmH,EACnCJ,MAAM,uBACNK,KAAK,SACLC,SAAS,KAAI,aACF,OAAM,kBACAnJ,KAAKoH,MAAQ,GAAGpH,KAAK+F,WAAa,KAAI,cAC1C/F,KAAKgE,KAAO,QAAU,OACnCoF,UAAWpJ,KAAKG,eAEfH,KAAKmB,UAAY,WAChBwH,EAAA,OACEE,MAAM,sBACNG,IAAMC,GAAQjJ,KAAKuB,aAAe0H,EAClCI,UAAWC,IAGfX,EAAA,OAAKE,MAAM,+BACTF,EAAA,OAAKE,MAAM,+BACTF,EAAA,MAAI5C,GAAI,GAAG/F,KAAK+F,WAAY8C,MAAM,uBAC/B7I,KAAKoH,MAAQpH,KAAKoH,MAAQuB,EAAA,QAAMY,KAAK,WAExCZ,EAAA,UACEE,MAAM,sBACNW,QAAS,IAAMxJ,KAAKK,OACpBoJ,KAAK,UAELd,EAAA,aAAWY,KAAK,QAAQV,MAAM,uBAC9BF,EAAA,QAAME,MAAM,yBAAyB7I,KAAKgG,aAAa0D,SAG3Df,EAAA,OAAKE,MAAM,sCACTF,EAAA,OAAKE,MAAM,8BACTF,EAAA,QAAMY,KAAK,aAEbZ,EAAA,OAAKE,MAAM,6BACTF,EAAA,QAAMY,KAAK,kB,0HC1nBjC,MAAMI,EAAc,oq+B,MCkBPC,EAAQ,M,mCAEQ,U,WAGmB,U,UAGL,M,WAGkD,U,UAGpD,U,eAEK,U,gBAEC,U,eAED,U,eAEA,S,CAE5C,MAAArB,GACE,OACEI,EAACC,EAAI,KACHD,EAAA,OACEE,MAAO,CACL,YAAa,KACb,qBAAsB7I,KAAK6J,KAC3B,CAAC,mBAAmB7J,KAAK8J,UAAW9J,KAAK8J,KACzC,CAAC,oBAAoB9J,KAAK+J,WAAY/J,KAAK+J,MAC3C,CAAC,mBAAmB/J,KAAK0I,UAAW1I,KAAK0I,KACzC,CAAC,yBAAyB1I,KAAKgK,eAAgBhK,KAAKgK,UACpD,CAAC,0BAA0BhK,KAAKiK,gBAAiBjK,KAAKiK,WACtD,CAAC,yBAAyBjK,KAAKkK,eAAgBlK,KAAKkK,UACpD,CAAC,yBAAyBlK,KAAKmK,eAAgBnK,KAAKmK,YAGtDxB,EAAA,OAAKE,MAAM,mBACTF,EAAA,OAAKE,MAAM,mBACTF,EAAA,QAAMY,KAAK,UAEbZ,EAAA,OAAKE,MAAM,yBACTF,EAAA,gB"}
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-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-f5809e5f.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["stzhInputCss","inputCounter","StzhInput","this","focusedByInput","onClearClick","async","event","value","input","focus","waitForNextRender","stzhChange","emit","component","originalEvent","stzhChanged","handleReset","defaultValue","onInput","onChange","onRootFocus","onFocus","focusEvent","FocusEvent","view","window","bubbles","cancelable","element","dispatchEvent","stzhFocus","onBlur","blurEvent","stzhBlur","resetListener","target","contains","requestAnimationFrame","valueWatcher","newValue","filled","errorWatcher","_error","JSON","parse","e","typeWatcher","types","multiline","includes","Error","Promise","resolve","renderPromiseResolve","renderTextarea","h","class","ref","el","id","inputId","name","rows","disabled","readonly","minlength","maxlength","a11yDescribedby","required","invalid","renderInput","type","min","max","step","inputmode","autocomplete","noAutocomplete","undefined","componentDidRender","componentWillLoad","error","localization","stzhComponents","utils","fetchTranslations","render","buttonRightSlotUsed","hasSlot","descriptionUsed","description","descriptionLongUsed","descriptionLong","errorUsed","_a","length","classes","clearable","showSpin","labelHidden","size","Host","tabindex","htmlFor","label","hideOptional","$globals","requiredFieldMarker","optionalFieldMarker","requiredFieldText","optionalFieldText","icon","iconOnly","onClick","a11yLabel","clearButtonLabel","StzhInputDescription","classPrefix","descriptionLongTitle","moreInfoButtonLabel"],"sources":["src/components/stzh-input/stzh-input.scss?tag=stzh-input&encapsulation=scoped","src/components/stzh-input/stzh-input.tsx"],"sourcesContent":["/*\n @prop --text-align: Text align of field\n * @prop --input-width: Width of of field\n * @prop --padding-top: Padding top of field\n * @prop --padding-bottom: Padding bottom of field\n * @prop --padding-left: Padding left of field\n * @prop --padding-right: Padding right of field\n \n @prop --stzh-form-input-height: Global: Height of fields & buttons\n * @prop --stzh-form-input-small-height: Global: Height of fields & buttons when small variant is used\n * @prop --stzh-form-input-tiny-height: Global: Height of fields & buttons when tiny variant is used\n /\n\n:host {\n --text-align: left;\n --color: #{$formColor};\n --border-color: #{$formBorderColor};\n --border-radius: #{$formInputBorderRadius};\n --background-color: #{$formBackgroundColor};\n --padding-top: #{space('xsmall')};\n --padding-bottom: #{space('xsmall')};\n --padding-left: #{space('medium')};\n --padding-right: #{space('medium')};\n --height: #{$formInputHeight};\n --input-width: 100%;\n --label-color: #{$formLabelColor};\n --placeholder-color: #{$formInputPlaceholderColor};\n --button-right-color: #{$colorGrey80};\n\n --hover-color: #{$formHoverColor};\n --hover-border-color: #{$formHoverBorderColor};\n --hover-background-color: #{$formHoverBackgroundColor};\n --hover-button-right-color: #{$colorPrimary70};\n\n --focus-color: #{$formFocusColor};\n --focus-border-color: #{$formFocusBorderColor};\n --focus-background-color: #{$formFocusBackgroundColor};\n --focus-button-right-color: #{$colorPrimary70};\n\n &[type=\"hidden\"] {\n position: absolute;\n top: -9999px;\n left: -9999px;\n visibility: hidden;\n }\n\n width: 100%;\n\n &[size=\"small\"] {\n --height: #{$formInputHeightSmall};\n }\n\n / Filled /\n\n &[is-filled]:not([is-filled=\"false\"]) {\n --button-right-color: #{$colorPrimary70};\n --hover-button-right-color: #{$colorPrimary70};\n --focus-button-right-color: #{$formFocusColor};\n }\n\n / Invalid /\n\n &[is-invalid] {\n --color: #{$colorError60};\n --border-color: #{$colorError60};\n --background-color: #{$colorWhite};\n --label-color: #{$colorError60};\n --placeholder-color: #{$colorError60};\n --button-right-color: #{$colorError60};\n\n --hover-color: #{$colorError60};\n --hover-border-color: #{$colorError60};\n --hover-background-color: #{$colorWhite};\n --hover-button-right-color: #{$colorError60};\n\n --focus-color: #{$colorError60};\n --focus-border-color: #{$colorError60};\n --focus-background-color: #{$colorWhite};\n --focus-button-right-color: #{$colorError60};\n }\n\n &[readonly]:not([readonly=\"false\"]),\n &[disabled]:not([disabled=\"false\"]) {\n --color: #{$formDisabledColor};\n --border-color: #{$formDisabledBorderColor};\n --background-color: #{$formDisabledBackgroundColor};\n --label-color: #{$formDisabledColor};\n --placeholder-color: #{$formDisabledColor};\n --description-color: #{$formDisabledColor};\n --button-right-color: #{$colorGrey70};\n\n --hover-color: #{$formDisabledColor};\n --hover-border-color: #{$formDisabledBorderColor};\n --hover-background-color: #{$formDisabledBackgroundColor};\n --hover-button-right-color: #{$colorGrey70};\n\n --focus-color: #{$formDisabledColor};\n --focus-border-color: #{$formDisabledBorderColor};\n --focus-background-color: #{$formDisabledBackgroundColor};\n --focus-button-right-color: #{$colorGrey70};\n }\n\n / Internal (Hover / Focus) /\n\n &:is(:has(.stzh-input__input:hover)) {\n --button-right-color: var(--hover-button-right-color);\n }\n\n &:is(:has(.stzh-input__input:focus)) {\n --button-right-color: var(--focus-button-right-color);\n }\n}\n\n:host ::slotted([slot=\"button-right\"]),\n.stzh-input__button-right {\n position: absolute;\n top: 0px;\n right: 0px;\n}\n\n:host ::slotted(stzh-popover[slot=\"button-right\"]),\n:host ::slotted([slot=\"button-right\"]) stzh-popover {\n display: block;\n}\n\n:host ::slotted(stzh-button[slot=\"button-right\"]),\n:host ::slotted(stzh-button[slot=\"button-right\"][disabled]:not([disabled=\"false\"])),\n:host ::slotted(stzh-popover[slot=\"button-right\"]) .stzh-popover__trigger stzh-button,\n:host ::slotted(stzh-popover[slot=\"button-right\"]) .stzh-popover__trigger stzh-button[disabled]:not([disabled=\"false\"]),\n:host ::slotted(stzh-tooltip[slot=\"button-right\"]) .stzh-tooltip__trigger stzh-button,\n:host ::slotted(stzh-tooltip[slot=\"button-right\"]) .stzh-tooltip__trigger stzh-button[disabled]:not([disabled=\"false\"]),\n.stzh-input__button-right,\n.stzh-input__button-right[disabled]:not([disabled=\"false\"]) {\n --color: var(--button-right-color);\n --background-color: transparent;\n --border-color: transparent;\n\n --hover-color: var(--button-right-color);\n --hover-background-color: transparent;\n --hover-border-color: transparent;\n}\n\n// :host ::slotted(stzh-button[slot=\"button-right\"][disabled]:not([disabled=\"false\"])),\n// :host ::slotted([slot=\"button-right\"]) stzh-button[disabled]:not([disabled=\"false\"]),\n// .stzh-input__button-right[disabled]:not([disabled=\"false\"]) {\n// --hover-color: #{$colorGrey80};\n// }\n\n:host ::slotted(stzh-button[slot=\"button-right\"][size=\"default\"][icon-only]:not([icon-only=\"false\"])),\n:host ::slotted(stzh-popover[slot=\"button-right\"]) .stzh-popover__trigger stzh-button[icon-only][size=\"default\"]:not([icon-only=\"false\"]),\n:host ::slotted(stzh-tooltip[slot=\"button-right\"]) .stzh-tooltip__trigger stzh-button[icon-only][size=\"default\"]:not([icon-only=\"false\"]),\n.stzh-input__button-right[size=\"default\"][icon-only]:not([icon-only=\"false\"]) {\n --icon-size: #{iconSize('medium')};\n}\n\n.stzh-input {\n\t@include input-description;\n\n &__field-wrapper {\n position: relative;\n display: flex;\n width: var(--input-width);\n }\n\n &__input {\n @include font;\n @include fontSize('milli');\n border: 2px solid var(--border-color);\n transition-property: color, border-color, background-color;\n transition-duration: $baseTransitionAnimationSpeed;\n border-radius: var(--border-radius);\n padding-top: var(--padding-top);\n padding-bottom: var(--padding-bottom);\n padding-left: var(--padding-left);\n padding-right: var(--padding-right);\n margin: 0;\n width: 100%;\n color: var(--color);\n background-color: var(--background-color);\n appearance: none;\n text-align: var(--text-align);\n\n @include placeholder {\n color: var(--placeholder-color);\n }\n\n &:hover {\n color: var(--hover-color);\n border-color: var(--hover-border-color);\n background-color: var(--hover-background-color);\n }\n\n &:focus {\n color: var(--focus-color);\n border-color: var(--focus-border-color);\n background-color: var(--focus-background-color);\n }\n\n // prevent ugly autofill background color in chrome\n &:-webkit-autofill {\n background-clip: text;\n }\n\n // show ellipsis for placeholders that are too long\n &:placeholder-shown {\n text-overflow: ellipsis;\n }\n\n // hide search clear icon on chrome\n &[type=\"search\"]::-webkit-search-decoration,\n &[type=\"search\"]::-webkit-search-cancel-button,\n &[type=\"search\"]::-webkit-search-results-button,\n &[type=\"search\"]::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n\n / Normal inputs /\n\n &--input {\n height: var(--height);\n }\n\n / Textarea /\n\n &--textarea {\n min-height: var(--height);\n resize: vertical;\n }\n }\n\n &__label {\n @include font('heavy');\n @include fontSize('micro');\n @include truncate;\n display: block;\n color: var(--label-color);\n width: auto;\n max-width: 100%;\n margin-bottom: space('xxxsmall');\n // position: absolute;\n // top: calc(#{$formInputHeight} / 2);\n // // padding-left (medium) + border-left\n // left: calc(#{space('medium')} + 1px);\n // max-width: calc(100% - #{space('medium')} 2);\n // transform: translateY(-50%);\n // transition: all $baseTransitionAnimationSpeed;\n // pointer-events: none;\n\n &:empty {\n display: none;\n }\n\n // &::before {\n // content: '';\n // display: none;\n // background: $colorWhite;\n // position: absolute;\n // width: 100%;\n // z-index: -1;\n // left: 0;\n // top: 50%;\n // // prevent white line not fully overlaping border of input\n // margin-top: -0.5px;\n // height: 2px;\n // }\n }\n\n &__marker {\n @include fontSize('nano');\n margin-left: calc(-0.25em + #{space('xsmall')});\n }\n\n /* Clearable / Search input / Password /\n\n &--type-password#{&}--is-not-clearable &__button-right,\n &--type-password#{&}--is-not-filled &__button-right,\n &--type-password#{&}--is-readonly &__button-right,\n &--type-password#{&}--is-disabled &__button-right,\n &--type-search#{&}--is-not-clearable &__button-right,\n &--type-search#{&}--is-not-filled &__button-right,\n &--type-search#{&}--is-readonly &__button-right,\n &--type-search#{&}--is-disabled &__button-right {\n pointer-events: none;\n }\n\n / Styles for floating label /\n\n // &:not(#{&}--is-readonly):not(#{&}--is-disabled) &__input:focus + &__label,\n // &--has-fixed-label &__label,\n // &--is-filled &__label,\n // &--is-readonly &__label,\n // &--is-disabled &__label,\n // &--is-invalid &__label {\n // display: block;\n // top: 0;\n // // padding-left (input field medium) - padding-left\n // left: calc(#{space('medium')} - #{space('xxsmall')});\n // height: 20px; // dividable by two (so before element is always positioned correctly)\n // line-height: 20px;\n // padding: 0 space('xxsmall');\n // max-width: calc(100% - #{space('small')} 2);\n // pointer-events: all;\n\n // &:not(:empty)::before {\n // display: block;\n // }\n // }\n\n /* Button Right Variant /\n\n &--has-button-right &__input {\n // distance to icon + icon button width\n padding-right: var(--height);\n }\n\n // &--has-button-right &__label {\n // // 100% - ((padding left of normal variant + border 1px) 2) - icon button width\n // max-width: calc(100% - (#{space('medium')} + 1px) * 2 - #{$formInputHeight});\n // }\n\n // &--has-button-right#{&}:not(#{&}--is-readonly):not(#{&}--is-disabled) &__input:focus + &__label,\n // &--has-button-right#{&}--has-fixed-label &__label,\n // &--has-button-right#{&}--is-filled &__label,\n // &--has-button-right#{&}--is-readonly &__label,\n // &--has-button-right#{&}--is-disabled &__label,\n // &--has-button-right#{&}--is-invalid &__label {\n // // 100% - left distance to text + 1px border + padding label right side - icon button width\n // max-width: calc(100% - #{space('medium')} - #{space('xxsmall')} - 1px + #{space('xxsmall')} - #{$formInputHeight});\n // }\n\n /* Size variants /\n\n &--size-small &__input {\n @include fontSize('micro');\n }\n\n // &--size-small &__label {\n // top: calc(#{$formInputHeightSmall} / 2);\n // }\n\n // &--size-small#{&}:not(#{&}--is-readonly):not(#{&}--is-disabled) &__input:focus + &__label,\n // &--size-small#{&}--has-fixed-label &__label,\n // &--size-small#{&}--is-filled &__label,\n // &--size-small#{&}--is-readonly &__label,\n // &--size-small#{&}--is-disabled &__label,\n // &--size-small#{&}--is-invalid &__label {\n // top: 0;\n // }\n\n // &--size-small#{&}--has-button-right &__label {\n // max-width: calc(100% - (#{space('medium')} + 1px) 2 - #{$formInputHeightSmall});\n // }\n\n // &--size-small#{&}--has-button-right#{&}:not(#{&}--is-readonly):not(#{&}--is-disabled) &__input:focus + &__label,\n // &--size-small#{&}--has-button-right#{&}--has-fixed-label &__label,\n // &--size-small#{&}--has-button-right#{&}--is-filled &__label,\n // &--size-small#{&}--has-button-right#{&}--is-readonly &__label,\n // &--size-small#{&}--has-button-right#{&}--is-disabled &__label,\n // &--size-small#{&}--has-button-right#{&}--is-invalid &__label {\n // max-width: calc(100% - #{space('medium')} - #{space('xxsmall')} - 1px + #{space('xsmall')} - #{$formInputHeightSmall});\n // }\n\n /* Spin button /\n\n &:not(#{&}--has-spin) &__input {\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n appearance: none;\n margin: 0;\n }\n\n &[type=\"number\"] {\n appearance: textfield;\n }\n }\n\n / Hidden label /\n &--has-label-hidden &__label {\n @include visuallyhidden;\n }\n\n / Readonly / Disabled /\n\n &--is-readonly &__input,\n &--is-disabled &__input,\n &--is-readonly &__label,\n &--is-disabled &__label {\n cursor: not-allowed;\n }\n\n // &--is-readonly &__label,\n // &--is-disabled &__label {\n // &::before {\n // background: transparent;\n // }\n // }\n}\n","import {\n Component,\n Prop,\n Host,\n Event,\n EventEmitter,\n State,\n Element,\n h,\n Watch,\n Listen,\n} from \"@stencil/core\";\n\nimport {\n StzhInputChangeEvent,\n StzhInputChangedEvent,\n StzhInputFocusEvent,\n StzhInputBlurEvent\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nimport { StzhInputDescription } from \"./stzh-input-description\";\n\nlet inputCounter = 0;\n\n/\n @slot - Slot for label content\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot description-long-title - Slot for long description title (in popover) / instead of descriptionLongTitle or description property\n * @slot error - Slot for error\n * @slot button-right - Slot for right button\n /\n@Component({\n tag: \"stzh-input\",\n styleUrl: \"stzh-input.scss\",\n scoped: true\n})\nexport class StzhInput {\n /* Translation strings /\n @Prop() localization: StzhLocaleComponent;\n\n /* Whether the input is a textarea or an input field /\n @Prop() multiline: boolean = false;\n\n /* Rows attribute if input element is textarea /\n @Prop() rows: number;\n\n /* If input field, this defines the type (if `search`, a search icon will be displayed) /\n @Prop({ reflect: true }) type: \"text\" \| \"search\" \| \"password\" \| \"email\" \| \"url\" \| \"tel\" \| \"number\" \| \"hidden\" = \"text\";\n\n /* If input type is number, this will be the step size /\n @Prop() step: number = 1;\n\n /* If input type is number, this will be the minimum step number /\n @Prop() min: number;\n\n /* If input type is number, this will be the maximum step number /\n @Prop() max: number;\n\n /* If input type is number and this property is true, this will show the spin buttons on hover/focus /\n @Prop({ reflect: true }) showSpin: boolean = false;\n\n /* Whether the element is readonly or not /\n @Prop({ reflect: true }) readonly: boolean = false;\n\n /* Whether the element is disabled or not /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* Whether clearable button is showing when input field has value and is enabled (button-right slot not usable anymore when true) /\n @Prop({ reflect: true }) clearable: boolean = false;\n\n /* Hide `(optional)` label (or use `required` inside form to hide it) /\n @Prop({ reflect: true }) hideOptional: boolean = false;\n\n /* Minimum of characters /\n @Prop() minlength: number;\n\n /* Maxlength of characters /\n @Prop() maxlength: number;\n\n /* The name of the input element /\n @Prop({ reflect: true }) name: string;\n\n /* The value of the input element /\n @Prop({ mutable: true }) value: string = \"\";\n\n /* Default value (used by reset) /\n @Prop({ mutable: true }) defaultValue: string = \"\";\n\n /* Description message (use description slot as alternative) /\n @Prop() description: string;\n\n /* Long description message appearing in a popover (use description-long slot as alternative) /\n @Prop() descriptionLong: string;\n\n /* Long description title appearing in a popover (use description-long-title slot as or description property alternative) /\n @Prop() descriptionLongTitle: string;\n\n /* One or multiple error message (use error slot as alternative) /\n @Prop() error: string \| string[];\n private _error: string[];\n\n /* Invalid status /\n @Prop({ reflect: true }) invalid: boolean = false;\n\n /* Required status /\n @Prop({ reflect: true }) required: boolean = false;\n\n /\n Specify inputmode.\n * See [MDN](https://developer.mozilla.org/de/docs/Web/HTML/Global_attributes/inputmode) for possible values\n /\n @Prop() inputmode: string;\n\n /\n Specify what the user agent has to provide as automated assistance.\n * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for possible values\n /\n @Prop() autocomplete: string = \"on\";\n\n /* Whether autocomplete should be turned off /\n @Prop() noAutocomplete: boolean = false;\n\n /* Label /\n @Prop() label: string = \"\";\n\n /* Whether label should be visually hidden. /\n @Prop() labelHidden: boolean = false;\n\n /* Size variant /\n @Prop({ reflect: true }) size: \"default\" \| \"small\" = \"default\";\n\n /* Id for element which describes the input (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) /\n @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n /* Whether the input is filled or not /\n @State() filled: boolean;\n\n @Element() element: HTMLStzhInputElement;\n\n /* Input change event /\n @Event() stzhChange: EventEmitter<StzhInputChangeEvent>;\n\n /* Input changed event /\n @Event() stzhChanged: EventEmitter<StzhInputChangedEvent>;\n\n /* Input focus event /\n @Event() stzhFocus: EventEmitter<StzhInputFocusEvent>;\n\n /* Input blur event */\n @Event() stzhBlur: EventEmitter<StzhInputBlurEvent>;\n\n @Listen(\"reset\", { target: \"document\" })\n resetListener(event: Event) {\n if ((event.target as HTMLElement).contains(this.element)) {\n requestAnimationFrame(() => {\n this.handleReset();\n });\n }\n }\n\n @Watch(\"value\")\n valueWatcher(newValue: string) {\n this.filled = newValue !== \"\";\n }\n\n @Watch(\"error\")\n errorWatcher(newValue: string \| string[]) {\n if (typeof newValue === \"string\") {\n try {\n this._error = JSON.parse(newValue);\n } catch (e) {\n if (newValue) {\n this._error = [newValue];\n } else {\n this._error = [];\n }\n }\n } else if (newValue) {\n this._error = newValue;\n } else {\n this._error = [];\n }\n }\n\n @Watch(\"type\")\n typeWatcher(newValue: string) {\n const types = [\n \"text\", \"search\", \"password\", \"email\", \"url\", \"tel\", \"number\", \"hidden\"\n ];\n\n if (!this.multiline && !types.includes(newValue)) {\n throw new Error(`Type ${newValue} not supported`);\n }\n }\n\n private input: HTMLInputElement \| HTMLTextAreaElement;\n private inputId: string;\n private focusedByInput: boolean = false;\n private renderPromiseResolve: (value?: unknown) => void;\n\n private waitForNextRender() {\n return new Promise(resolve => this.renderPromiseResolve = resolve);\n }\n\n private onClearClick = async (event: MouseEvent) => {\n this.value = \"\";\n this.input.focus();\n\n await this.waitForNextRender();\n\n this.stzhChange.emit({\n component: \"stzh-input\",\n originalEvent: event,\n value: this.value\n });\n\n this.stzhChanged.emit({\n component: \"stzh-input\",\n originalEvent: event,\n value: this.value\n });\n }\n\n private handleReset = async () => {\n this.value = this.defaultValue;\n // we also update value, since render doesn't get executed sometimes\n this.input.value = this.defaultValue;\n\n // TODO: check if we need own reset event or trigger the change event\n // (custom browser behaviour doesn't send change event, when reset is executed)\n // this.stzhChange.emit({\n // component: \"stzh-input\",\n // originalEvent: event,\n // value: this.value\n // });\n }\n\n private onInput = (event: InputEvent) => {\n this.value = this.input.value;\n\n this.stzhChange.emit({\n component: \"stzh-input\",\n originalEvent: event,\n value: this.value\n });\n }\n\n private onChange = (event: InputEvent) => {\n this.value = this.input.value;\n\n this.stzhChanged.emit({\n component: \"stzh-input\",\n originalEvent: event,\n value: this.value\n });\n }\n\n private onRootFocus = () => {\n if (!this.focusedByInput) {\n this.input.focus();\n }\n\n this.focusedByInput = false;\n }\n\n private onFocus = (event: FocusEvent) => {\n this.focusedByInput = true;\n\n const focusEvent = new FocusEvent('focus', {\n view: window,\n bubbles: false,\n cancelable: false\n });\n\n this.element.dispatchEvent(focusEvent);\n this.stzhFocus.emit({\n component: \"stzh-input\",\n originalEvent: event\n });\n }\n\n private onBlur = (event: FocusEvent) => {\n // fixes weird bug where autofill selection doesn't get removed\n this.input.value = this.input.value;\n\n const blurEvent = new FocusEvent('blur', {\n view: window,\n bubbles: false,\n cancelable: false\n });\n\n this.element.dispatchEvent(blurEvent);\n this.stzhBlur.emit({\n component: \"stzh-input\",\n originalEvent: event\n });\n }\n\n private renderTextarea(): HTMLTextAreaElement {\n return (\n <textarea\n class=\"stzh-input__input stzh-input__input--textarea\"\n ref={(el) => (this.input = el as HTMLTextAreaElement)}\n id={this.inputId}\n name={this.name}\n value={this.value}\n rows={this.rows}\n disabled={this.disabled}\n readonly={this.readonly}\n minlength={this.minlength}\n maxlength={this.maxlength}\n aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n aria-required={this.required ? \"true\" : \"false\"}\n aria-invalid={this.invalid ? \"true\" : \"false\"}\n onChange={this.onChange}\n onInput={this.onInput}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n ></textarea>\n );\n }\n\n private renderInput(): HTMLInputElement {\n return (\n <input\n class=\"stzh-input__input stzh-input__input--input\"\n ref={(el) => (this.input = el as HTMLInputElement)}\n id={this.inputId}\n type={this.type}\n name={this.name}\n value={this.value}\n defaultValue={this.defaultValue}\n min={this.min}\n max={this.max}\n step={this.step}\n inputmode={this.inputmode}\n disabled={this.disabled}\n readonly={this.readonly}\n minlength={this.minlength}\n maxlength={this.maxlength}\n autocomplete={this.noAutocomplete ? \"off\" : this.autocomplete}\n aria-autocomplete={this.noAutocomplete ? \"none\" : undefined}\n aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n aria-required={this.required ? \"true\" : \"false\"}\n aria-invalid={this.invalid ? \"true\" : \"false\"}\n onChange={this.onChange}\n onInput={this.onInput}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n />\n );\n }\n\n componentDidRender() {\n if (this.renderPromiseResolve) {\n this.renderPromiseResolve();\n }\n }\n\n async componentWillLoad() {\n this.inputId = `stzh-input-${inputCounter++}`;\n this.typeWatcher(this.type);\n this.valueWatcher(this.value);\n this.errorWatcher(this.error);\n\n this.defaultValue = this.defaultValue \|\| this.value;\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"input\");\n }\n }\n\n render() {\n const buttonRightSlotUsed = hasSlot(this.element, 'button-right');\n const descriptionUsed = hasSlot(this.element, 'description') \|\| !!this.description;\n const descriptionLongUsed = hasSlot(this.element, 'description-long') \|\| !!this.descriptionLong;\n const errorUsed = hasSlot(this.element, 'error') \|\| this._error?.length > 0;\n\n const classes = {\n \"stzh-input\": true,\n \"stzh-input--has-button-right\": buttonRightSlotUsed\n \|\| this.type === \"search\"\n \|\| (this.clearable && this.filled && !this.readonly && !this.disabled),\n \"stzh-input--has-description\": descriptionUsed,\n \"stzh-input--has-description-long\": descriptionLongUsed,\n \"stzh-input--has-error\": errorUsed,\n \"stzh-input--has-spin\": this.showSpin,\n \"stzh-input--is-invalid\": this.invalid \|\| errorUsed,\n \"stzh-input--is-disabled\": this.disabled,\n \"stzh-input--is-readonly\": this.readonly,\n \"stzh-input--is-required\": this.required,\n \"stzh-input--is-filled\": this.filled,\n \"stzh-input--is-not-filled\": !this.filled,\n \"stzh-input--is-clearable\": this.clearable,\n \"stzh-input--is-not-clearable\": !this.clearable,\n \"stzh-input--has-label-hidden\": this.labelHidden,\n [`stzh-input--size-${this.size}`]: !!this.size,\n [`stzh-input--type-${this.type}`]: !!this.type,\n };\n\n return (\n <Host\n is-invalid={this.invalid \|\| errorUsed}\n tabindex={this.disabled ? null : \"-1\"}\n onFocus={this.onRootFocus}\n is-filled={this.filled}\n >\n <div class={classes}>\n <label class=\"stzh-input__label\" htmlFor={this.inputId}>\n {this.label ? this.label : <slot></slot>}\n {!this.hideOptional &&\n <span class=\"stzh-input__marker\">\n <span class=\"stzh-input__marker-symbol\" aria-hidden=\"true\">\n {this.required\n ? this.localization.$globals.requiredFieldMarker\n : this.localization.$globals.optionalFieldMarker\n }\n </span>\n <span class=\"stzh-input__marker-text\">\n {this.required\n ? this.localization.$globals.requiredFieldText\n : this.localization.$globals.optionalFieldText\n }\n </span>\n </span>\n }\n </label>\n <div class=\"stzh-input__field-wrapper\">\n {this.multiline ? this.renderTextarea() : this.renderInput()}\n {(this.clearable \|\| this.type === \"search\" \|\| this.type === \"password\")\n ?\n ((!this.clearable \|\| this.disabled \|\| this.readonly \|\| !this.filled)\n && (this.type === \"search\" \|\| this.type === \"password\")\n ?\n <stzh-button\n class=\"stzh-input__button-right\"\n icon={this.type === \"search\" ? \"search\" : \"view\"}\n size={this.size}\n iconOnly={true}\n disabled={true}\n ></stzh-button>\n :\n this.filled\n ?\n <stzh-button\n class=\"stzh-input__button-right\"\n icon=\"close\"\n size={this.size}\n iconOnly={true}\n onClick={this.onClearClick}\n a11yLabel={this.localization.$globals.clearButtonLabel}\n aria-controls={this.inputId}\n ></stzh-button>\n :\n <slot name=\"button-right\"></slot>\n )\n :\n <slot name=\"button-right\"></slot>\n }\n </div>\n <StzhInputDescription\n classPrefix=\"stzh-input\"\n id={`${this.inputId}-description`}\n error={this._error}\n description={this.description}\n descriptionLong={this.descriptionLong}\n descriptionLongTitle={this.descriptionLongTitle}\n descriptionLongUsed={descriptionLongUsed}\n moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n />\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"gKAAA,MAAMA,EAAe,orZCyBrB,IAAIC,EAAe,E,MAeNC,EAAS,M,iLAiKZC,KAAAC,eAA0B,MAO1BD,KAAAE,aAAeC,MAAOC,IAC5BJ,KAAKK,MAAQ,GACbL,KAAKM,MAAMC,cAELP,KAAKQ,oBAEXR,KAAKS,WAAWC,KAAK,CACnBC,UAAW,aACXC,cAAeR,EACfC,MAAOL,KAAKK,QAGdL,KAAKa,YAAYH,KAAK,CACpBC,UAAW,aACXC,cAAeR,EACfC,MAAOL,KAAKK,OACZ,EAGIL,KAAAc,YAAcX,UACpBH,KAAKK,MAAQL,KAAKe,aAElBf,KAAKM,MAAMD,MAAQL,KAAKe,YAAY,EAW9Bf,KAAAgB,QAAWZ,IACjBJ,KAAKK,MAAQL,KAAKM,MAAMD,MAExBL,KAAKS,WAAWC,KAAK,CACnBC,UAAW,aACXC,cAAeR,EACfC,MAAOL,KAAKK,OACZ,EAGIL,KAAAiB,SAAYb,IAClBJ,KAAKK,MAAQL,KAAKM,MAAMD,MAExBL,KAAKa,YAAYH,KAAK,CACpBC,UAAW,aACXC,cAAeR,EACfC,MAAOL,KAAKK,OACZ,EAGIL,KAAAkB,YAAc,KACpB,IAAKlB,KAAKC,eAAgB,CACxBD,KAAKM,MAAMC,O,CAGbP,KAAKC,eAAiB,KAAK,EAGrBD,KAAAmB,QAAWf,IACjBJ,KAAKC,eAAiB,KAEtB,MAAMmB,EAAa,IAAIC,WAAW,QAAS,CACzCC,KAAMC,OACNC,QAAS,MACTC,WAAY,QAGdzB,KAAK0B,QAAQC,cAAcP,GAC3BpB,KAAK4B,UAAUlB,KAAK,CAClBC,UAAW,aACXC,cAAeR,GACf,EAGIJ,KAAA6B,OAAUzB,IAEhBJ,KAAKM,MAAMD,MAAQL,KAAKM,MAAMD,MAE9B,MAAMyB,EAAY,IAAIT,WAAW,OAAQ,CACvCC,KAAMC,OACNC,QAAS,MACTC,WAAY,QAGdzB,KAAK0B,QAAQC,cAAcG,GAC3B9B,KAAK+B,SAASrB,KAAK,CACjBC,UAAW,aACXC,cAAeR,GACf,E,2CA9PyB,M,8BAMmF,O,UAGzF,E,oDASsB,M,cAGA,M,cAGA,M,eAGC,M,kBAGG,M,iFAYR,G,kBAGO,G,gIAgBJ,M,cAGC,M,2CAYd,K,oBAGG,M,WAGV,G,iBAGO,M,UAGsB,U,qBAGc,G,sBAoBnE,aAAA4B,CAAc5B,GACZ,GAAKA,EAAM6B,OAAuBC,SAASlC,KAAK0B,SAAU,CACxDS,uBAAsB,KACpBnC,KAAKc,aAAa,G,EAMxB,YAAAsB,CAAaC,GACXrC,KAAKsC,OAASD,IAAa,E,CAI7B,YAAAE,CAAaF,GACX,UAAWA,IAAa,SAAU,CAChC,IACErC,KAAKwC,OAASC,KAAKC,MAAML,E,CACzB,MAAOM,GACP,GAAIN,EAAU,CACZrC,KAAKwC,OAAS,CAACH,E,KACV,CACLrC,KAAKwC,OAAS,E,QAGb,GAAIH,EAAU,CACnBrC,KAAKwC,OAASH,C,KACT,CACLrC,KAAKwC,OAAS,E,EAKlB,WAAAI,CAAYP,GACV,MAAMQ,EAAQ,CACZ,OAAQ,SAAU,WAAY,QAAS,MAAO,MAAO,SAAU,UAGjE,IAAK7C,KAAK8C,YAAcD,EAAME,SAASV,GAAW,CAChD,MAAM,IAAIW,MAAM,QAAQX,kB,EASpB,iBAAA7B,GACN,OAAO,IAAIyC,SAAQC,GAAWlD,KAAKmD,qBAAuBD,G,CAiGpD,cAAAE,GACN,OACEC,EAAA,YACEC,MAAM,gDACNC,IAAMC,GAAQxD,KAAKM,MAAQkD,EAC3BC,GAAIzD,KAAK0D,QACTC,KAAM3D,KAAK2D,KACXtD,MAAOL,KAAKK,MACZuD,KAAM5D,KAAK4D,KACXC,SAAU7D,KAAK6D,SACfC,SAAU9D,KAAK8D,SACfC,UAAW/D,KAAK+D,UAChBC,UAAWhE,KAAKgE,UAAS,mBACP,GAAGhE,KAAK0D,uBAAuB1D,KAAKiE,kBAAiB,gBACxDjE,KAAKkE,SAAW,OAAS,QAAO,eACjClE,KAAKmE,QAAU,OAAS,QACtClD,SAAUjB,KAAKiB,SACfD,QAAShB,KAAKgB,QACdG,QAASnB,KAAKmB,QACdU,OAAQ7B,KAAK6B,Q,CAKX,WAAAuC,GACN,OACEf,EAAA,SACEC,MAAM,6CACNC,IAAMC,GAAQxD,KAAKM,MAAQkD,EAC3BC,GAAIzD,KAAK0D,QACTW,KAAMrE,KAAKqE,KACXV,KAAM3D,KAAK2D,KACXtD,MAAOL,KAAKK,MACZU,aAAcf,KAAKe,aACnBuD,IAAKtE,KAAKsE,IACVC,IAAKvE,KAAKuE,IACVC,KAAMxE,KAAKwE,KACXC,UAAWzE,KAAKyE,UAChBZ,SAAU7D,KAAK6D,SACfC,SAAU9D,KAAK8D,SACfC,UAAW/D,KAAK+D,UAChBC,UAAWhE,KAAKgE,UAChBU,aAAc1E,KAAK2E,eAAiB,MAAQ3E,KAAK0E,aAAY,oBAC1C1E,KAAK2E,eAAiB,OAASC,UAAS,mBACzC,GAAG5E,KAAK0D,uBAAuB1D,KAAKiE,kBAAiB,gBACxDjE,KAAKkE,SAAW,OAAS,QAAO,eACjClE,KAAKmE,QAAU,OAAS,QACtClD,SAAUjB,KAAKiB,SACfD,QAAShB,KAAKgB,QACdG,QAASnB,KAAKmB,QACdU,OAAQ7B,KAAK6B,Q,CAKnB,kBAAAgD,GACE,GAAI7E,KAAKmD,qBAAsB,CAC7BnD,KAAKmD,sB,EAIT,uBAAM2B,GACJ9E,KAAK0D,QAAU,cAAc5D,MAC7BE,KAAK4C,YAAY5C,KAAKqE,MACtBrE,KAAKoC,aAAapC,KAAKK,OACvBL,KAAKuC,aAAavC,KAAK+E,OAEvB/E,KAAKe,aAAef,KAAKe,cAAgBf,KAAKK,MAE9C,IAAKL,KAAKgF,aAAc,CACtBhF,KAAKgF,mBAAqBzD,OAAO0D,eAAeC,MAAMC,kBAAkBnF,KAAK0B,QAAS,Q,EAI1F,MAAA0D,G,MACE,MAAMC,EAAsBC,EAAQtF,KAAK0B,QAAS,gBAClD,MAAM6D,EAAkBD,EAAQtF,KAAK0B,QAAS,kBAAoB1B,KAAKwF,YACvE,MAAMC,EAAsBH,EAAQtF,KAAK0B,QAAS,uBAAyB1B,KAAK0F,gBAChF,MAAMC,EAAYL,EAAQtF,KAAK0B,QAAS,YAAYkE,EAAA5F,KAAKwC,UAAM,MAAAoD,SAAA,SAAAA,EAAEC,QAAS,EAE1E,MAAMC,EAAU,CACd,aAAc,KACd,+BAAgCT,GAC3BrF,KAAKqE,OAAS,UACbrE,KAAK+F,WAAa/F,KAAKsC,SAAWtC,KAAK8D,WAAa9D,KAAK6D,SAC/D,8BAA+B0B,EAC/B,mCAAoCE,EACpC,wBAAyBE,EACzB,uBAAwB3F,KAAKgG,SAC7B,yBAA0BhG,KAAKmE,SAAWwB,EAC1C,0BAA2B3F,KAAK6D,SAChC,0BAA2B7D,KAAK8D,SAChC,0BAA2B9D,KAAKkE,SAChC,wBAAyBlE,KAAKsC,OAC9B,6BAA8BtC,KAAKsC,OACnC,2BAA4BtC,KAAK+F,UACjC,gCAAiC/F,KAAK+F,UACtC,+BAAgC/F,KAAKiG,YACrC,CAAC,oBAAoBjG,KAAKkG,UAAWlG,KAAKkG,KAC1C,CAAC,oBAAoBlG,KAAKqE,UAAWrE,KAAKqE,MAG5C,OACEhB,EAAC8C,EAAI,cACSnG,KAAKmE,SAAWwB,EAC5BS,SAAUpG,KAAK6D,SAAW,KAAO,KACjC1C,QAASnB,KAAKkB,YAAW,YACdlB,KAAKsC,QAEhBe,EAAA,OAAKC,MAAOwC,GACVzC,EAAA,SAAOC,MAAM,oBAAoB+C,QAASrG,KAAK0D,SAC5C1D,KAAKsG,MAAQtG,KAAKsG,MAAQjD,EAAA,cACzBrD,KAAKuG,cACLlD,EAAA,QAAMC,MAAM,sBACVD,EAAA,QAAMC,MAAM,4BAA2B,cAAa,QACjDtD,KAAKkE,SACFlE,KAAKgF,aAAawB,SAASC,oBAC3BzG,KAAKgF,aAAawB,SAASE,qBAGjCrD,EAAA,QAAMC,MAAM,2BACTtD,KAAKkE,SACFlE,KAAKgF,aAAawB,SAASG,kBAC3B3G,KAAKgF,aAAawB,SAASI,qBAMvCvD,EAAA,OAAKC,MAAM,6BACRtD,KAAK8C,UAAY9C,KAAKoD,iBAAmBpD,KAAKoE,cAC7CpE,KAAK+F,WAAa/F,KAAKqE,OAAS,UAAYrE,KAAKqE,OAAS,aAEvDrE,KAAK+F,WAAa/F,KAAK6D,UAAY7D,KAAK8D,WAAa9D,KAAKsC,UACvDtC,KAAKqE,OAAS,UAAYrE,KAAKqE,OAAS,YAE5ChB,EAAA,eACEC,MAAM,2BACNuD,KAAM7G,KAAKqE,OAAS,SAAW,SAAW,OAC1C6B,KAAMlG,KAAKkG,KACXY,SAAU,KACVjD,SAAU,OAGZ7D,KAAKsC,OAEHe,EAAA,eACEC,MAAM,2BACNuD,KAAK,QACLX,KAAMlG,KAAKkG,KACXY,SAAU,KACVC,QAAS/G,KAAKE,aACd8G,UAAWhH,KAAKgF,aAAawB,SAASS,iBAAgB,gBACvCjH,KAAK0D,UAGtBL,EAAA,QAAMM,KAAK,iBAGfN,EAAA,QAAMM,KAAK,kBAGfN,EAAC6D,EAAoB,CACnBC,YAAY,aACZ1D,GAAI,GAAGzD,KAAK0D,sBACZqB,MAAO/E,KAAKwC,OACZgD,YAAaxF,KAAKwF,YAClBE,gBAAiB1F,KAAK0F,gBACtB0B,qBAAsBpH,KAAKoH,qBAC3B3B,oBAAqBA,EACrB4B,oBAAqBrH,KAAKgF,aAAawB,SAASa,uB"}
1	+ {"version":3,"names":["stzhInputCss","inputCounter","StzhInput","this","focusedByInput","onClearClick","async","event","value","input","focus","waitForNextRender","stzhChange","emit","component","originalEvent","stzhChanged","handleReset","defaultValue","onInput","onChange","onRootFocus","onFocus","focusEvent","FocusEvent","view","window","bubbles","cancelable","element","dispatchEvent","stzhFocus","onBlur","blurEvent","stzhBlur","resetListener","target","contains","requestAnimationFrame","valueWatcher","newValue","filled","errorWatcher","_error","JSON","parse","e","typeWatcher","types","multiline","includes","Error","Promise","resolve","renderPromiseResolve","renderTextarea","h","class","ref","el","id","inputId","name","rows","disabled","readonly","minlength","maxlength","a11yDescribedby","required","invalid","renderInput","type","min","max","step","inputmode","autocomplete","noAutocomplete","undefined","componentDidRender","componentWillLoad","error","localization","stzhComponents","utils","fetchTranslations","render","buttonRightSlotUsed","hasSlot","descriptionUsed","description","descriptionLongUsed","descriptionLong","errorUsed","_a","length","classes","clearable","showSpin","labelHidden","size","Host","tabindex","htmlFor","label","hideOptional","$globals","requiredFieldMarker","optionalFieldMarker","requiredFieldText","optionalFieldText","icon","iconOnly","onClick","a11yLabel","clearButtonLabel","StzhInputDescription","classPrefix","descriptionLongTitle","moreInfoButtonLabel"],"sources":["src/components/stzh-input/stzh-input.scss?tag=stzh-input&encapsulation=scoped","src/components/stzh-input/stzh-input.tsx"],"sourcesContent":["/*\n @prop --text-align: Text align of field\n * @prop --input-width: Width of of field\n * @prop --padding-top: Padding top of field\n * @prop --padding-bottom: Padding bottom of field\n * @prop --padding-left: Padding left of field\n * @prop --padding-right: Padding right of field\n \n @prop --stzh-form-input-height: Global: Height of fields & buttons\n * @prop --stzh-form-input-small-height: Global: Height of fields & buttons when small variant is used\n * @prop --stzh-form-input-tiny-height: Global: Height of fields & buttons when tiny variant is used\n /\n\n:host {\n --text-align: left;\n --color: #{$formColor};\n --border-color: #{$formBorderColor};\n --border-radius: #{$formInputBorderRadius};\n --background-color: #{$formBackgroundColor};\n --padding-top: #{space('xsmall')};\n --padding-bottom: #{space('xsmall')};\n --padding-left: #{space('medium')};\n --padding-right: #{space('medium')};\n --height: #{$formInputHeight};\n --input-width: 100%;\n --label-color: #{$formLabelColor};\n --placeholder-color: #{$formInputPlaceholderColor};\n --button-right-color: #{$colorGrey80};\n\n --hover-color: #{$formHoverColor};\n --hover-border-color: #{$formHoverBorderColor};\n --hover-background-color: #{$formHoverBackgroundColor};\n --hover-button-right-color: #{$colorPrimary70};\n\n --focus-color: #{$formFocusColor};\n --focus-border-color: #{$formFocusBorderColor};\n --focus-background-color: #{$formFocusBackgroundColor};\n --focus-button-right-color: #{$colorPrimary70};\n\n &[type=\"hidden\"] {\n position: absolute;\n top: -9999px;\n left: -9999px;\n visibility: hidden;\n }\n\n width: 100%;\n\n &[size=\"small\"] {\n --height: #{$formInputHeightSmall};\n }\n\n / Filled /\n\n &[is-filled]:not([is-filled=\"false\"]) {\n --button-right-color: #{$colorPrimary70};\n --hover-button-right-color: #{$colorPrimary70};\n --focus-button-right-color: #{$formFocusColor};\n }\n\n / Invalid /\n\n &[is-invalid] {\n --color: #{$colorError60};\n --border-color: #{$colorError60};\n --background-color: #{$colorWhite};\n --label-color: #{$colorError60};\n --placeholder-color: #{$colorError60};\n --button-right-color: #{$colorError60};\n\n --hover-color: #{$colorError60};\n --hover-border-color: #{$colorError60};\n --hover-background-color: #{$colorWhite};\n --hover-button-right-color: #{$colorError60};\n\n --focus-color: #{$colorError60};\n --focus-border-color: #{$colorError60};\n --focus-background-color: #{$colorWhite};\n --focus-button-right-color: #{$colorError60};\n }\n\n &[readonly]:not([readonly=\"false\"]),\n &[disabled]:not([disabled=\"false\"]) {\n --color: #{$formDisabledColor};\n --border-color: #{$formDisabledBorderColor};\n --background-color: #{$formDisabledBackgroundColor};\n --label-color: #{$formDisabledColor};\n --placeholder-color: #{$formDisabledColor};\n --description-color: #{$formDisabledColor};\n --button-right-color: #{$colorGrey70};\n\n --hover-color: #{$formDisabledColor};\n --hover-border-color: #{$formDisabledBorderColor};\n --hover-background-color: #{$formDisabledBackgroundColor};\n --hover-button-right-color: #{$colorGrey70};\n\n --focus-color: #{$formDisabledColor};\n --focus-border-color: #{$formDisabledBorderColor};\n --focus-background-color: #{$formDisabledBackgroundColor};\n --focus-button-right-color: #{$colorGrey70};\n }\n\n / Internal (Hover / Focus) /\n\n &:is(:has(.stzh-input__input:hover)) {\n --button-right-color: var(--hover-button-right-color);\n }\n\n &:is(:has(.stzh-input__input:focus)) {\n --button-right-color: var(--focus-button-right-color);\n }\n}\n\n:host ::slotted([slot=\"button-right\"]),\n.stzh-input__button-right {\n position: absolute;\n top: 0px;\n right: 0px;\n}\n\n:host ::slotted(stzh-popover[slot=\"button-right\"]),\n:host ::slotted([slot=\"button-right\"]) stzh-popover {\n display: block;\n}\n\n:host ::slotted(stzh-button[slot=\"button-right\"]),\n:host ::slotted(stzh-button[slot=\"button-right\"][disabled]:not([disabled=\"false\"])),\n:host ::slotted(stzh-popover[slot=\"button-right\"]) .stzh-popover__trigger stzh-button,\n:host ::slotted(stzh-popover[slot=\"button-right\"]) .stzh-popover__trigger stzh-button[disabled]:not([disabled=\"false\"]),\n:host ::slotted(stzh-tooltip[slot=\"button-right\"]) .stzh-tooltip__trigger stzh-button,\n:host ::slotted(stzh-tooltip[slot=\"button-right\"]) .stzh-tooltip__trigger stzh-button[disabled]:not([disabled=\"false\"]),\n.stzh-input__button-right,\n.stzh-input__button-right[disabled]:not([disabled=\"false\"]) {\n --color: var(--button-right-color);\n --background-color: transparent;\n --border-color: transparent;\n\n --hover-color: var(--button-right-color);\n --hover-background-color: transparent;\n --hover-border-color: transparent;\n}\n\n// :host ::slotted(stzh-button[slot=\"button-right\"][disabled]:not([disabled=\"false\"])),\n// :host ::slotted([slot=\"button-right\"]) stzh-button[disabled]:not([disabled=\"false\"]),\n// .stzh-input__button-right[disabled]:not([disabled=\"false\"]) {\n// --hover-color: #{$colorGrey80};\n// }\n\n:host ::slotted(stzh-button[slot=\"button-right\"][size=\"default\"][icon-only]:not([icon-only=\"false\"])),\n:host ::slotted(stzh-popover[slot=\"button-right\"]) .stzh-popover__trigger stzh-button[icon-only][size=\"default\"]:not([icon-only=\"false\"]),\n:host ::slotted(stzh-tooltip[slot=\"button-right\"]) .stzh-tooltip__trigger stzh-button[icon-only][size=\"default\"]:not([icon-only=\"false\"]),\n.stzh-input__button-right[size=\"default\"][icon-only]:not([icon-only=\"false\"]) {\n --icon-size: #{iconSize('medium')};\n}\n\n.stzh-input {\n\t@include input-description;\n\n &__field-wrapper {\n position: relative;\n display: flex;\n width: var(--input-width);\n }\n\n &__input {\n @include font;\n @include fontSize('milli');\n border: 2px solid var(--border-color);\n transition-property: color, border-color, background-color;\n transition-duration: $baseTransitionAnimationSpeed;\n border-radius: var(--border-radius);\n padding-top: var(--padding-top);\n padding-bottom: var(--padding-bottom);\n padding-left: var(--padding-left);\n padding-right: var(--padding-right);\n margin: 0;\n width: 100%;\n color: var(--color);\n background-color: var(--background-color);\n appearance: none;\n text-align: var(--text-align);\n\n @include placeholder {\n color: var(--placeholder-color);\n }\n\n &:hover {\n color: var(--hover-color);\n border-color: var(--hover-border-color);\n background-color: var(--hover-background-color);\n }\n\n &:focus {\n color: var(--focus-color);\n border-color: var(--focus-border-color);\n background-color: var(--focus-background-color);\n }\n\n // prevent ugly autofill background color in chrome\n &:-webkit-autofill {\n background-clip: text;\n }\n\n // show ellipsis for placeholders that are too long\n &:placeholder-shown {\n text-overflow: ellipsis;\n }\n\n // hide search clear icon on chrome\n &[type=\"search\"]::-webkit-search-decoration,\n &[type=\"search\"]::-webkit-search-cancel-button,\n &[type=\"search\"]::-webkit-search-results-button,\n &[type=\"search\"]::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n\n / Normal inputs /\n\n &--input {\n height: var(--height);\n }\n\n / Textarea /\n\n &--textarea {\n min-height: var(--height);\n resize: vertical;\n }\n }\n\n &__label {\n @include font('heavy');\n @include fontSize('micro');\n @include truncate;\n display: block;\n color: var(--label-color);\n width: auto;\n max-width: 100%;\n margin-bottom: space('xxxsmall');\n // position: absolute;\n // top: calc(#{$formInputHeight} / 2);\n // // padding-left (medium) + border-left\n // left: calc(#{space('medium')} + 1px);\n // max-width: calc(100% - #{space('medium')} 2);\n // transform: translateY(-50%);\n // transition: all $baseTransitionAnimationSpeed;\n // pointer-events: none;\n\n &:empty {\n display: none;\n }\n\n // &::before {\n // content: '';\n // display: none;\n // background: $colorWhite;\n // position: absolute;\n // width: 100%;\n // z-index: -1;\n // left: 0;\n // top: 50%;\n // // prevent white line not fully overlaping border of input\n // margin-top: -0.5px;\n // height: 2px;\n // }\n }\n\n &__marker {\n @include fontSize('nano');\n margin-left: calc(-0.25em + #{space('xsmall')});\n }\n\n /* Clearable / Search input / Password /\n\n &--type-password#{&}--is-not-clearable &__button-right,\n &--type-password#{&}--is-not-filled &__button-right,\n &--type-password#{&}--is-readonly &__button-right,\n &--type-password#{&}--is-disabled &__button-right,\n &--type-search#{&}--is-not-clearable &__button-right,\n &--type-search#{&}--is-not-filled &__button-right,\n &--type-search#{&}--is-readonly &__button-right,\n &--type-search#{&}--is-disabled &__button-right {\n pointer-events: none;\n }\n\n / Styles for floating label /\n\n // &:not(#{&}--is-readonly):not(#{&}--is-disabled) &__input:focus + &__label,\n // &--has-fixed-label &__label,\n // &--is-filled &__label,\n // &--is-readonly &__label,\n // &--is-disabled &__label,\n // &--is-invalid &__label {\n // display: block;\n // top: 0;\n // // padding-left (input field medium) - padding-left\n // left: calc(#{space('medium')} - #{space('xxsmall')});\n // height: 20px; // dividable by two (so before element is always positioned correctly)\n // line-height: 20px;\n // padding: 0 space('xxsmall');\n // max-width: calc(100% - #{space('small')} 2);\n // pointer-events: all;\n\n // &:not(:empty)::before {\n // display: block;\n // }\n // }\n\n /* Button Right Variant /\n\n &--has-button-right &__input {\n // distance to icon + icon button width\n padding-right: var(--height);\n }\n\n // &--has-button-right &__label {\n // // 100% - ((padding left of normal variant + border 1px) 2) - icon button width\n // max-width: calc(100% - (#{space('medium')} + 1px) * 2 - #{$formInputHeight});\n // }\n\n // &--has-button-right#{&}:not(#{&}--is-readonly):not(#{&}--is-disabled) &__input:focus + &__label,\n // &--has-button-right#{&}--has-fixed-label &__label,\n // &--has-button-right#{&}--is-filled &__label,\n // &--has-button-right#{&}--is-readonly &__label,\n // &--has-button-right#{&}--is-disabled &__label,\n // &--has-button-right#{&}--is-invalid &__label {\n // // 100% - left distance to text + 1px border + padding label right side - icon button width\n // max-width: calc(100% - #{space('medium')} - #{space('xxsmall')} - 1px + #{space('xxsmall')} - #{$formInputHeight});\n // }\n\n /* Size variants /\n\n &--size-small &__input {\n @include fontSize('micro');\n }\n\n // &--size-small &__label {\n // top: calc(#{$formInputHeightSmall} / 2);\n // }\n\n // &--size-small#{&}:not(#{&}--is-readonly):not(#{&}--is-disabled) &__input:focus + &__label,\n // &--size-small#{&}--has-fixed-label &__label,\n // &--size-small#{&}--is-filled &__label,\n // &--size-small#{&}--is-readonly &__label,\n // &--size-small#{&}--is-disabled &__label,\n // &--size-small#{&}--is-invalid &__label {\n // top: 0;\n // }\n\n // &--size-small#{&}--has-button-right &__label {\n // max-width: calc(100% - (#{space('medium')} + 1px) 2 - #{$formInputHeightSmall});\n // }\n\n // &--size-small#{&}--has-button-right#{&}:not(#{&}--is-readonly):not(#{&}--is-disabled) &__input:focus + &__label,\n // &--size-small#{&}--has-button-right#{&}--has-fixed-label &__label,\n // &--size-small#{&}--has-button-right#{&}--is-filled &__label,\n // &--size-small#{&}--has-button-right#{&}--is-readonly &__label,\n // &--size-small#{&}--has-button-right#{&}--is-disabled &__label,\n // &--size-small#{&}--has-button-right#{&}--is-invalid &__label {\n // max-width: calc(100% - #{space('medium')} - #{space('xxsmall')} - 1px + #{space('xsmall')} - #{$formInputHeightSmall});\n // }\n\n /* Spin button /\n\n &:not(#{&}--has-spin) &__input {\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n appearance: none;\n margin: 0;\n }\n\n &[type=\"number\"] {\n appearance: textfield;\n }\n }\n\n / Hidden label /\n\n &--has-label-hidden &__label {\n @include visuallyhidden;\n }\n\n / Readonly / Disabled /\n\n &--is-readonly &__input,\n &--is-disabled &__input,\n &--is-readonly &__label,\n &--is-disabled &__label {\n cursor: not-allowed;\n }\n\n // &--is-readonly &__label,\n // &--is-disabled &__label {\n // &::before {\n // background: transparent;\n // }\n // }\n}\n","import {\n Component,\n Prop,\n Host,\n Event,\n EventEmitter,\n State,\n Element,\n h,\n Watch,\n Listen,\n} from \"@stencil/core\";\n\nimport {\n StzhInputChangeEvent,\n StzhInputChangedEvent,\n StzhInputFocusEvent,\n StzhInputBlurEvent\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nimport { StzhInputDescription } from \"./stzh-input-description\";\n\nlet inputCounter = 0;\n\n/\n @slot - Slot for label content\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot description-long-title - Slot for long description title (in popover) / instead of descriptionLongTitle or description property\n * @slot error - Slot for error\n * @slot button-right - Slot for right button\n /\n@Component({\n tag: \"stzh-input\",\n styleUrl: \"stzh-input.scss\",\n scoped: true\n})\nexport class StzhInput {\n /* Translation strings /\n @Prop() localization: StzhLocaleComponent;\n\n /* Whether the input is a textarea or an input field /\n @Prop() multiline: boolean = false;\n\n /* Rows attribute if input element is textarea /\n @Prop() rows: number;\n\n /* If input field, this defines the type (if `search`, a search icon will be displayed) /\n @Prop({ reflect: true }) type: \"text\" \| \"search\" \| \"password\" \| \"email\" \| \"url\" \| \"tel\" \| \"number\" \| \"hidden\" = \"text\";\n\n /* If input type is number, this will be the step size /\n @Prop() step: number = 1;\n\n /* If input type is number, this will be the minimum step number /\n @Prop() min: number;\n\n /* If input type is number, this will be the maximum step number /\n @Prop() max: number;\n\n /* If input type is number and this property is true, this will show the spin buttons on hover/focus /\n @Prop({ reflect: true }) showSpin: boolean = false;\n\n /* Whether the element is readonly or not /\n @Prop({ reflect: true }) readonly: boolean = false;\n\n /* Whether the element is disabled or not /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* Whether clearable button is showing when input field has value and is enabled (button-right slot not usable anymore when true) /\n @Prop({ reflect: true }) clearable: boolean = false;\n\n /* Hide `(optional)` label (or use `required` inside form to hide it) /\n @Prop({ reflect: true }) hideOptional: boolean = false;\n\n /* Minimum of characters /\n @Prop() minlength: number;\n\n /* Maxlength of characters /\n @Prop() maxlength: number;\n\n /* The name of the input element /\n @Prop({ reflect: true }) name: string;\n\n /* The value of the input element /\n @Prop({ mutable: true }) value: string = \"\";\n\n /* Default value (used by reset) /\n @Prop({ mutable: true }) defaultValue: string = \"\";\n\n /* Description message (use description slot as alternative) /\n @Prop() description: string;\n\n /* Long description message appearing in a popover (use description-long slot as alternative) /\n @Prop() descriptionLong: string;\n\n /* Long description title appearing in a popover (use description-long-title slot as or description property alternative) /\n @Prop() descriptionLongTitle: string;\n\n /* One or multiple error message (use error slot as alternative) /\n @Prop() error: string \| string[];\n private _error: string[];\n\n /* Invalid status /\n @Prop({ reflect: true }) invalid: boolean = false;\n\n /* Required status /\n @Prop({ reflect: true }) required: boolean = false;\n\n /\n Specify inputmode.\n * See [MDN](https://developer.mozilla.org/de/docs/Web/HTML/Global_attributes/inputmode) for possible values\n /\n @Prop() inputmode: string;\n\n /\n Specify what the user agent has to provide as automated assistance.\n * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for possible values\n /\n @Prop() autocomplete: string = \"on\";\n\n /* Whether autocomplete should be turned off /\n @Prop() noAutocomplete: boolean = false;\n\n /* Label /\n @Prop() label: string = \"\";\n\n /* Whether label should be visually hidden. /\n @Prop() labelHidden: boolean = false;\n\n /* Size variant /\n @Prop({ reflect: true }) size: \"default\" \| \"small\" = \"default\";\n\n /* Id for element which describes the input (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) /\n @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n /* Whether the input is filled or not /\n @State() filled: boolean;\n\n @Element() element: HTMLStzhInputElement;\n\n /* Input change event /\n @Event() stzhChange: EventEmitter<StzhInputChangeEvent>;\n\n /* Input changed event /\n @Event() stzhChanged: EventEmitter<StzhInputChangedEvent>;\n\n /* Input focus event /\n @Event() stzhFocus: EventEmitter<StzhInputFocusEvent>;\n\n /* Input blur event */\n @Event() stzhBlur: EventEmitter<StzhInputBlurEvent>;\n\n @Listen(\"reset\", { target: \"document\" })\n resetListener(event: Event) {\n if ((event.target as HTMLElement).contains(this.element)) {\n requestAnimationFrame(() => {\n this.handleReset();\n });\n }\n }\n\n @Watch(\"value\")\n valueWatcher(newValue: string) {\n this.filled = newValue !== \"\";\n }\n\n @Watch(\"error\")\n errorWatcher(newValue: string \| string[]) {\n if (typeof newValue === \"string\") {\n try {\n this._error = JSON.parse(newValue);\n } catch (e) {\n if (newValue) {\n this._error = [newValue];\n } else {\n this._error = [];\n }\n }\n } else if (newValue) {\n this._error = newValue;\n } else {\n this._error = [];\n }\n }\n\n @Watch(\"type\")\n typeWatcher(newValue: string) {\n const types = [\n \"text\", \"search\", \"password\", \"email\", \"url\", \"tel\", \"number\", \"hidden\"\n ];\n\n if (!this.multiline && !types.includes(newValue)) {\n throw new Error(`Type ${newValue} not supported`);\n }\n }\n\n private input: HTMLInputElement \| HTMLTextAreaElement;\n private inputId: string;\n private focusedByInput: boolean = false;\n private renderPromiseResolve: (value?: unknown) => void;\n\n private waitForNextRender() {\n return new Promise(resolve => this.renderPromiseResolve = resolve);\n }\n\n private onClearClick = async (event: MouseEvent) => {\n this.value = \"\";\n this.input.focus();\n\n await this.waitForNextRender();\n\n this.stzhChange.emit({\n component: \"stzh-input\",\n originalEvent: event,\n value: this.value\n });\n\n this.stzhChanged.emit({\n component: \"stzh-input\",\n originalEvent: event,\n value: this.value\n });\n }\n\n private handleReset = async () => {\n this.value = this.defaultValue;\n // we also update value, since render doesn't get executed sometimes\n this.input.value = this.defaultValue;\n\n // TODO: check if we need own reset event or trigger the change event\n // (custom browser behaviour doesn't send change event, when reset is executed)\n // this.stzhChange.emit({\n // component: \"stzh-input\",\n // originalEvent: event,\n // value: this.value\n // });\n }\n\n private onInput = (event: InputEvent) => {\n this.value = this.input.value;\n\n this.stzhChange.emit({\n component: \"stzh-input\",\n originalEvent: event,\n value: this.value\n });\n }\n\n private onChange = (event: InputEvent) => {\n this.value = this.input.value;\n\n this.stzhChanged.emit({\n component: \"stzh-input\",\n originalEvent: event,\n value: this.value\n });\n }\n\n private onRootFocus = () => {\n if (!this.focusedByInput) {\n this.input.focus();\n }\n\n this.focusedByInput = false;\n }\n\n private onFocus = (event: FocusEvent) => {\n this.focusedByInput = true;\n\n const focusEvent = new FocusEvent('focus', {\n view: window,\n bubbles: false,\n cancelable: false\n });\n\n this.element.dispatchEvent(focusEvent);\n this.stzhFocus.emit({\n component: \"stzh-input\",\n originalEvent: event\n });\n }\n\n private onBlur = (event: FocusEvent) => {\n // fixes weird bug where autofill selection doesn't get removed\n this.input.value = this.input.value;\n\n const blurEvent = new FocusEvent('blur', {\n view: window,\n bubbles: false,\n cancelable: false\n });\n\n this.element.dispatchEvent(blurEvent);\n this.stzhBlur.emit({\n component: \"stzh-input\",\n originalEvent: event\n });\n }\n\n private renderTextarea(): HTMLTextAreaElement {\n return (\n <textarea\n class=\"stzh-input__input stzh-input__input--textarea\"\n ref={(el) => (this.input = el as HTMLTextAreaElement)}\n id={this.inputId}\n name={this.name}\n value={this.value}\n rows={this.rows}\n disabled={this.disabled}\n readonly={this.readonly}\n minlength={this.minlength}\n maxlength={this.maxlength}\n aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n aria-required={this.required ? \"true\" : \"false\"}\n aria-invalid={this.invalid ? \"true\" : \"false\"}\n onChange={this.onChange}\n onInput={this.onInput}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n ></textarea>\n );\n }\n\n private renderInput(): HTMLInputElement {\n return (\n <input\n class=\"stzh-input__input stzh-input__input--input\"\n ref={(el) => (this.input = el as HTMLInputElement)}\n id={this.inputId}\n type={this.type}\n name={this.name}\n value={this.value}\n defaultValue={this.defaultValue}\n min={this.min}\n max={this.max}\n step={this.step}\n inputmode={this.inputmode}\n disabled={this.disabled}\n readonly={this.readonly}\n minlength={this.minlength}\n maxlength={this.maxlength}\n autocomplete={this.noAutocomplete ? \"off\" : this.autocomplete}\n aria-autocomplete={this.noAutocomplete ? \"none\" : undefined}\n aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n aria-required={this.required ? \"true\" : \"false\"}\n aria-invalid={this.invalid ? \"true\" : \"false\"}\n onChange={this.onChange}\n onInput={this.onInput}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n />\n );\n }\n\n componentDidRender() {\n if (this.renderPromiseResolve) {\n this.renderPromiseResolve();\n }\n }\n\n async componentWillLoad() {\n this.inputId = `stzh-input-${inputCounter++}`;\n this.typeWatcher(this.type);\n this.valueWatcher(this.value);\n this.errorWatcher(this.error);\n\n this.defaultValue = this.defaultValue \|\| this.value;\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"input\");\n }\n }\n\n render() {\n const buttonRightSlotUsed = hasSlot(this.element, 'button-right');\n const descriptionUsed = hasSlot(this.element, 'description') \|\| !!this.description;\n const descriptionLongUsed = hasSlot(this.element, 'description-long') \|\| !!this.descriptionLong;\n const errorUsed = hasSlot(this.element, 'error') \|\| this._error?.length > 0;\n\n const classes = {\n \"stzh-input\": true,\n \"stzh-input--has-button-right\": buttonRightSlotUsed\n \|\| this.type === \"search\"\n \|\| (this.clearable && this.filled && !this.readonly && !this.disabled),\n \"stzh-input--has-description\": descriptionUsed,\n \"stzh-input--has-description-long\": descriptionLongUsed,\n \"stzh-input--has-error\": errorUsed,\n \"stzh-input--has-spin\": this.showSpin,\n \"stzh-input--is-invalid\": this.invalid \|\| errorUsed,\n \"stzh-input--is-disabled\": this.disabled,\n \"stzh-input--is-readonly\": this.readonly,\n \"stzh-input--is-required\": this.required,\n \"stzh-input--is-filled\": this.filled,\n \"stzh-input--is-not-filled\": !this.filled,\n \"stzh-input--is-clearable\": this.clearable,\n \"stzh-input--is-not-clearable\": !this.clearable,\n \"stzh-input--has-label-hidden\": this.labelHidden,\n [`stzh-input--size-${this.size}`]: !!this.size,\n [`stzh-input--type-${this.type}`]: !!this.type,\n };\n\n return (\n <Host\n is-invalid={this.invalid \|\| errorUsed}\n tabindex={this.disabled ? null : \"-1\"}\n onFocus={this.onRootFocus}\n is-filled={this.filled}\n >\n <div class={classes}>\n <label class=\"stzh-input__label\" htmlFor={this.inputId}>\n {this.label ? this.label : <slot></slot>}\n {!this.hideOptional &&\n <span class=\"stzh-input__marker\">\n <span class=\"stzh-input__marker-symbol\" aria-hidden=\"true\">\n {this.required\n ? this.localization.$globals.requiredFieldMarker\n : this.localization.$globals.optionalFieldMarker\n }\n </span>\n <span class=\"stzh-input__marker-text\">\n {this.required\n ? this.localization.$globals.requiredFieldText\n : this.localization.$globals.optionalFieldText\n }\n </span>\n </span>\n }\n </label>\n <div class=\"stzh-input__field-wrapper\">\n {this.multiline ? this.renderTextarea() : this.renderInput()}\n {(this.clearable \|\| this.type === \"search\" \|\| this.type === \"password\")\n ?\n ((!this.clearable \|\| this.disabled \|\| this.readonly \|\| !this.filled)\n && (this.type === \"search\" \|\| this.type === \"password\")\n ?\n <stzh-button\n class=\"stzh-input__button-right\"\n icon={this.type === \"search\" ? \"search\" : \"view\"}\n size={this.size}\n iconOnly={true}\n disabled={true}\n ></stzh-button>\n :\n this.filled\n ?\n <stzh-button\n class=\"stzh-input__button-right\"\n icon=\"close\"\n size={this.size}\n iconOnly={true}\n onClick={this.onClearClick}\n a11yLabel={this.localization.$globals.clearButtonLabel}\n aria-controls={this.inputId}\n ></stzh-button>\n :\n <slot name=\"button-right\"></slot>\n )\n :\n <slot name=\"button-right\"></slot>\n }\n </div>\n <StzhInputDescription\n classPrefix=\"stzh-input\"\n id={`${this.inputId}-description`}\n error={this._error}\n description={this.description}\n descriptionLong={this.descriptionLong}\n descriptionLongTitle={this.descriptionLongTitle}\n descriptionLongUsed={descriptionLongUsed}\n moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n />\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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"}

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

	@@ -0,0 +1,2 @@
1	+ import{r as t,h as e,a,g as s}from"./p-c7bfac7a.js";import{s as r}from"./p-7e304ea3.js";import"./p-9b063923.js";const n='.sc-stzh-daterange-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-daterange-h{display:none}.sc-stzh-daterange-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-daterange-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-daterange-h .sc-stzh-daterange,.sc-stzh-daterange-h .sc-stzh-daterange::before,.sc-stzh-daterange-h *.sc-stzh-daterange::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-daterange-h .has-focus.sc-stzh-daterange{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-daterange-h .stzh-fylingfocus-focused.sc-stzh-daterange{outline-style:none !important}.sc-stzh-daterange-h .stzh-fylingfocus-focused.sc-stzh-daterange::-moz-focus-inner{border:0 !important}.sc-stzh-daterange-h{--grid-template-areas:var(\n --stzh-daterange-grid-template-areas,\n "datefrom datefrom datefrom datefrom"\n "dateto dateto dateto dateto"\n "links links links links"\n );--grid-template-columns:var(\n --stzh-daterange-grid-template-columns,\n repeat(4, minmax(0, 1fr))\n )}@media screen and (min-width: 600px){.sc-stzh-daterange-h{--grid-template-areas:var(\n --stzh-daterange-grid-template-areas,\n "datefrom datefrom dateto dateto"\n "links links links links"\n )}}@media screen and (min-width: 900px){.sc-stzh-daterange-h{--grid-template-areas:var(\n --stzh-daterange-grid-template-areas,\n "datefrom datefrom dateto dateto links links links links"\n );--grid-template-columns:var(\n --stzh-daterange-grid-template-columns,\n repeat(8, minmax(0, 1fr))\n )}}.stzh-daterange.sc-stzh-daterange{--stzh-description-min-height:var(--stzh-fieldset-description-min-height);-moz-column-gap:var(--stzh-grid-gutter);column-gap:var(--stzh-grid-gutter);display:grid;align-items:center;grid-template-areas:var(--grid-template-areas);grid-template-columns:var(--grid-template-columns);align-items:start;border:none;padding:0}@media screen and (min-width: 600px){.stzh-daterange.sc-stzh-daterange{-moz-column-gap:var(--stzh-grid-gutter-small);column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-daterange.sc-stzh-daterange{-moz-column-gap:var(--stzh-grid-gutter-medium);column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-daterange.sc-stzh-daterange{-moz-column-gap:var(--stzh-grid-gutter-large);column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-daterange.sc-stzh-daterange{-moz-column-gap:var(--stzh-grid-gutter-ultra);column-gap:var(--stzh-grid-gutter-ultra)}}.stzh-daterange__legend.sc-stzh-daterange{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}.stzh-daterange__datefrom.sc-stzh-daterange{grid-area:datefrom}.stzh-daterange__dateto.sc-stzh-daterange{grid-area:dateto}.stzh-daterange__links.sc-stzh-daterange{grid-area:links;align-self:center}.stzh-daterange__links.sc-stzh-daterange{display:flex;gap:var(--stzh-space-large)}';const i=class{constructor(e){t(this,e);this._rangeLinks=[];this.handleRangeClick=t=>{let e=new Date;let a=new Date;if(t==="tomorrow"){e.setDate(e.getDate()+1);a.setDate(a.getDate()+1)}else if(t==="next7days"){e.setDate(e.getDate());a.setDate(a.getDate()+7)}const s=this.datefromElement.querySelector("stzh-datepicker");const r=this.datetoElement.querySelector("stzh-datepicker");s===null\|\|s===void 0?void 0:s.setDate(e);r===null\|\|r===void 0?void 0:r.setDate(a)};this.init=()=>{const t=this.element.querySelector('stzh-datepicker[slot="from"], [slot="from"] stzh-datepicker');const e=this.element.querySelector('stzh-datepicker[slot="to"], [slot="to"] stzh-datepicker');if(t&&this.localization){r(t,{label:this.localization.labelFrom,hideOptional:true})}if(e&&this.localization){r(e,{label:this.localization.labelTo,hideOptional:true})}};this.localization=undefined;this.legend=undefined;this.rangeLinks=undefined}rangeLinksWatcher(t){if(!t){this._rangeLinks=[]}else if(typeof t==="string"){try{this._rangeLinks=JSON.parse(t)}catch(t){this._rangeLinks=[]}}else{this._rangeLinks=t}}async componentWillLoad(){this.rangeLinksWatcher(this.rangeLinks);if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"daterange")}}connectedCallback(){this.init();this.observer=new MutationObserver(this.init);this.observer.observe(this.element,{childList:true,subtree:true})}disconnectedCallback(){if(this.observer){this.observer.disconnect()}}render(){const t={"stzh-daterange":true,"stzh-daterange--has-links":this._rangeLinks.length>0};const s={today:this.localization.rangeToday,tomorrow:this.localization.rangeTomorrow,next7days:this.localization.rangeNextSevenDays};return e(a,null,e("fieldset",{class:t},e("legend",{class:"stzh-daterange__legend"},this.legend\|\|this.localization.legend),e("div",{class:"stzh-daterange__datefrom",ref:t=>this.datefromElement=t},e("slot",{name:"from"})),e("div",{class:"stzh-daterange__dateto",ref:t=>this.datetoElement=t},e("slot",{name:"to"})),e("div",{class:"stzh-daterange__links"},this._rangeLinks.map((t=>e("stzh-link",{label:s[t],onClick:()=>this.handleRangeClick(t)}))))))}get element(){return s(this)}static get watchers(){return{rangeLinks:["rangeLinksWatcher"]}}};i.style=n;export{i as stzh_daterange};
2	+ //# sourceMappingURL=p-f5821678.entry.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"names":["stzhDaterangeCss","StzhDaterange","this","_rangeLinks","handleRangeClick","type","start","Date","end","setDate","getDate","fromDatepicker","datefromElement","querySelector","toDatepicker","datetoElement","init","element","localization","setPropsIfNull","label","labelFrom","hideOptional","labelTo","rangeLinksWatcher","newValue","JSON","parse","e","componentWillLoad","rangeLinks","window","stzhComponents","utils","fetchTranslations","connectedCallback","observer","MutationObserver","observe","childList","subtree","disconnectedCallback","disconnect","render","classes","length","translations","today","rangeToday","tomorrow","rangeTomorrow","next7days","rangeNextSevenDays","h","Host","class","legend","ref","el","name","map","onClick"],"sources":["src/components/stzh-daterange/stzh-daterange.scss?tag=stzh-daterange&encapsulation=scoped","src/components/stzh-daterange/stzh-daterange.tsx"],"sourcesContent":[":host {\n --grid-template-areas: var(\n --stzh-daterange-grid-template-areas,\n \"datefrom datefrom datefrom datefrom\"\n \"dateto dateto dateto dateto\"\n \"links links links links\"\n );\n\n --grid-template-columns: var(\n --stzh-daterange-grid-template-columns,\n #{$gridColumns}\n );\n\n @include mq($from: small) {\n --grid-template-areas: var(\n --stzh-daterange-grid-template-areas,\n \"datefrom datefrom dateto dateto\"\n \"links links links links\"\n );\n }\n\n @include mq($from: medium) {\n --grid-template-areas: var(\n --stzh-daterange-grid-template-areas,\n \"datefrom datefrom dateto dateto links links links links\"\n );\n\n --grid-template-columns: var(\n --stzh-daterange-grid-template-columns,\n #{$gridColumnsMedium}\n );\n }\n}\n\n.stzh-daterange {\n --stzh-description-min-height: #{$fieldsetDescriptionMinHeight};\n\n @include gridGutter;\n display: grid;\n align-items: center;\n grid-template-areas: var(--grid-template-areas);\n grid-template-columns: var(--grid-template-columns);\n align-items: start;\n border: none;\n padding: 0;\n\n &__legend {\n @include visuallyhidden;\n }\n\n &__datefrom {\n grid-area: datefrom;\n }\n\n &__dateto {\n grid-area: dateto;\n }\n\n &__links {\n grid-area: links;\n align-self: center;\n }\n\n &__links {\n display: flex;\n gap: space('large');\n }\n}\n","import {\n Component,\n Host,\n Prop,\n h,\n Element,\n Watch,\n} from \"@stencil/core\";\n\nimport { StzhDaterangeRanges } from \"../../index\";\n\nimport { StzhDaterangeLocalizedText } from \"./stzh-daterange.localization\";\nimport { setPropsIfNull } from \"../../utils/utils\";\n\n/**\n * @slot from - Slot for datepicker\n * @slot to - Slot for datepicker\n */\n@Component({\n tag: \"stzh-daterange\",\n styleUrl: \"stzh-daterange.scss\",\n scoped: true\n})\nexport class StzhDaterange {\n /** Translation strings */\n @Prop() localization: StzhDaterangeLocalizedText;\n\n /** Legend */\n @Prop() legend: string;\n\n /** Range links (current predefined available ranges: \"today\", \"tomorrow\", \"next7days\") */\n @Prop() rangeLinks: string | StzhDaterangeRanges[];\n private _rangeLinks: StzhDaterangeRanges[] = [];\n\n @Element() element: HTMLStzhDaterangeElement;\n\n @Watch(\"rangeLinks\")\n rangeLinksWatcher(newValue: StzhDaterangeRanges[] | string) {\n if (!newValue) {\n this._rangeLinks = [];\n } else if (typeof newValue === \"string\") {\n try {\n this._rangeLinks = JSON.parse(newValue);\n } catch (e) {\n this._rangeLinks = [];\n }\n } else {\n this._rangeLinks = newValue;\n }\n }\n\n private observer: MutationObserver;\n private datefromElement: HTMLElement;\n private datetoElement: HTMLElement;\n\n private handleRangeClick = (type: StzhDaterangeRanges) => {\n let start = new Date();\n let end = new Date();\n\n if (type === \"tomorrow\") {\n start.setDate(start.getDate() + 1);\n end.setDate(end.getDate() + 1);\n } else if (type === \"next7days\") {\n start.setDate(start.getDate());\n end.setDate(end.getDate() + 7);\n }\n\n const fromDatepicker = this.datefromElement.querySelector('stzh-datepicker');\n const toDatepicker = this.datetoElement.querySelector('stzh-datepicker');\n\n fromDatepicker?.setDate(start);\n toDatepicker?.setDate(end);\n }\n\n async componentWillLoad() {\n this.rangeLinksWatcher(this.rangeLinks);\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"daterange\");\n }\n }\n\n private init = () => {\n const fromDatepicker = this.element.querySelector(\n 'stzh-datepicker[slot=\"from\"], [slot=\"from\"] stzh-datepicker'\n );\n\n const toDatepicker = this.element.querySelector(\n 'stzh-datepicker[slot=\"to\"], [slot=\"to\"] stzh-datepicker'\n );\n\n if (fromDatepicker && this.localization) {\n setPropsIfNull(fromDatepicker, {\n label: this.localization.labelFrom,\n hideOptional: true\n } as HTMLStzhDatepickerElement)\n }\n\n if (toDatepicker&& this.localization) {\n setPropsIfNull(toDatepicker, {\n label: this.localization.labelTo,\n hideOptional: true\n } as HTMLStzhDatepickerElement)\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\n render() {\n const classes = {\n \"stzh-daterange\": true,\n \"stzh-daterange--has-links\": this._rangeLinks.length > 0\n };\n\n const translations = {\n \"today\": this.localization.rangeToday,\n \"tomorrow\": this.localization.rangeTomorrow,\n \"next7days\": this.localization.rangeNextSevenDays\n }\n\n return (\n <Host>\n <fieldset class={classes}>\n <legend class=\"stzh-daterange__legend\">\n {this.legend || this.localization.legend}\n </legend>\n\n <div\n class=\"stzh-daterange__datefrom\"\n ref={(el) => (this.datefromElement = el as HTMLDivElement)}\n >\n <slot name=\"from\"></slot>\n </div>\n <div\n class=\"stzh-daterange__dateto\"\n ref={(el) => (this.datetoElement = el as HTMLDivElement)}\n >\n <slot name=\"to\"></slot>\n </div>\n <div class=\"stzh-daterange__links\">\n {this._rangeLinks.map((type) =>\n <stzh-link\n label={translations[type]}\n onClick={() => this.handleRangeClick(type)}\n ></stzh-link>\n )}\n </div>\n </fieldset>\n </Host>\n );\n }\n}\n"],"mappings":"gHAAA,MAAMA,EAAmB,6/G,MCuBZC,EAAa,M,yBAShBC,KAAAC,YAAqC,GAuBrCD,KAAAE,iBAAoBC,IAC1B,IAAIC,EAAQ,IAAIC,KAChB,IAAIC,EAAM,IAAID,KAEd,GAAIF,IAAS,WAAY,CACvBC,EAAMG,QAAQH,EAAMI,UAAY,GAChCF,EAAIC,QAAQD,EAAIE,UAAY,E,MACvB,GAAIL,IAAS,YAAa,CAC/BC,EAAMG,QAAQH,EAAMI,WACpBF,EAAIC,QAAQD,EAAIE,UAAY,E,CAG9B,MAAMC,EAAiBT,KAAKU,gBAAgBC,cAAc,mBAC1D,MAAMC,EAAeZ,KAAKa,cAAcF,cAAc,mBAEtDF,IAAc,MAAdA,SAAc,SAAdA,EAAgBF,QAAQH,GACxBQ,IAAY,MAAZA,SAAY,SAAZA,EAAcL,QAAQD,EAAI,EAWpBN,KAAAc,KAAO,KACb,MAAML,EAAiBT,KAAKe,QAAQJ,cAClC,+DAGF,MAAMC,EAAeZ,KAAKe,QAAQJ,cAChC,2DAGF,GAAIF,GAAkBT,KAAKgB,aAAc,CACvCC,EAAeR,EAAgB,CAC7BS,MAAOlB,KAAKgB,aAAaG,UACzBC,aAAc,M,CAIlB,GAAIR,GAAeZ,KAAKgB,aAAc,CACpCC,EAAeL,EAAc,CAC3BM,MAAOlB,KAAKgB,aAAaK,QACzBD,aAAc,M,+EAhEpB,iBAAAE,CAAkBC,GAChB,IAAKA,EAAU,CACbvB,KAAKC,YAAc,E,MACd,UAAWsB,IAAa,SAAU,CACvC,IACEvB,KAAKC,YAAcuB,KAAKC,MAAMF,E,CAC9B,MAAOG,GACP1B,KAAKC,YAAc,E,MAEhB,CACLD,KAAKC,YAAcsB,C,EA2BvB,uBAAMI,GACJ3B,KAAKsB,kBAAkBtB,KAAK4B,YAE5B,IAAK5B,KAAKgB,aAAc,CACtBhB,KAAKgB,mBAAqBa,OAAOC,eAAeC,MAAMC,kBAAkBhC,KAAKe,QAAS,Y,EA4B1F,iBAAAkB,GACEjC,KAAKc,OAELd,KAAKkC,SAAW,IAAIC,iBAAiBnC,KAAKc,MAC1Cd,KAAKkC,SAASE,QAAQpC,KAAKe,QAAS,CAClCsB,UAAW,KACXC,QAAS,M,CAIb,oBAAAC,GACE,GAAIvC,KAAKkC,SAAU,CACjBlC,KAAKkC,SAASM,Y,EAIlB,MAAAC,GACE,MAAMC,EAAU,CACd,iBAAkB,KAClB,4BAA6B1C,KAAKC,YAAY0C,OAAS,GAGzD,MAAMC,EAAe,CACnBC,MAAS7C,KAAKgB,aAAa8B,WAC3BC,SAAY/C,KAAKgB,aAAagC,cAC9BC,UAAajD,KAAKgB,aAAakC,oBAGjC,OACEC,EAACC,EAAI,KACHD,EAAA,YAAUE,MAAOX,GACfS,EAAA,UAAQE,MAAM,0BACXrD,KAAKsD,QAAUtD,KAAKgB,aAAasC,QAGpCH,EAAA,OACEE,MAAM,2BACNE,IAAMC,GAAQxD,KAAKU,gBAAkB8C,GAErCL,EAAA,QAAMM,KAAK,UAEbN,EAAA,OACEE,MAAM,yBACNE,IAAMC,GAAQxD,KAAKa,cAAgB2C,GAEnCL,EAAA,QAAMM,KAAK,QAEbN,EAAA,OAAKE,MAAM,yBACRrD,KAAKC,YAAYyD,KAAKvD,GACrBgD,EAAA,aACEjC,MAAO0B,EAAazC,GACpBwD,QAAS,IAAM3D,KAAKE,iBAAiBC,S"}