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

@oiz/stzh-components 3.0.0 → 3.1.0

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

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