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

@oiz/stzh-components 4.13.0-beta3 → 4.13.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 (851) hide show

package/dist/components/{p-C-FuUoEq.js.map → p-BL7NQ4Wt.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-C-FuUoEq.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-cardlist/stzh-cardlist.scss?tag=stzh-cardlist&encapsulation=scoped","src/components/stzh-cardlist/stzh-cardlist.tsx"],"sourcesContent":[":host {\n --description-color: var(--stzh-cardlist-description-color, inherit);\n --background-color: var(--stzh-cardlist-background-color, inherit);\n}\n\n.stzh-cardlist {\n &__cards {\n display: grid;\n gap: $gridGutter;\n\n @include mq($from: small) {\n gap: $gridGutterSmall;\n }\n\n @include mq($from: medium) {\n gap: $gridGutterMedium;\n }\n\n @include mq($from: large) {\n gap: $gridGutterLarge;\n }\n\n @include mq($from: ultra) {\n gap: $gridGutterUltra;\n }\n }\n\n &__header {\n display: flex;\n justify-content: space-between;\n flex-direction: column;\n align-items: flex-start;\n\n @include mq($from: medium) {\n // was smallheader before\n flex-direction: row;\n }\n }\n\n &__footer:not(:empty) {\n @include spaceCurve(\"margin-top\", \"regular\");\n }\n\n &__description {\n @include fontCurve(\"p1\");\n --stzh-icon-color: #{$colorPrimary70};\n\n &:not(:empty) {\n margin-bottom: space(\"xsmall\");\n\n @include mq($from: medium) {\n // was smallheader before\n margin-bottom: 0;\n }\n }\n\n ::slotted(stzh-heading) {\n --color: var(--description-color);\n }\n }\n\n &__switch {\n --color: inherit;\n align-self: end;\n }\n\n /* Has content inside header /\n\n &:has(#{&}__description:not(:empty)) &__header,\n &--has-toggle-link &__header {\n @include spaceCurve(\"margin-bottom\", \"regular\");\n }\n\n / Subpages layout variant /\n\n &--layout-subpages &__cards:has(stzh-card-navigation:not([has-lead])),\n &--layout-subpages &__cards:has(stzh-pi-content-navigation:not([has-lead])) {\n @include spaceCurve(\"row-gap\", \"tiny\");\n\n @include mq($from: medium) {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n padding-left: 0;\n }\n }\n\n &--layout-subpages &__cards:has(stzh-pi-content-navigation:not([has-lead])) {\n @include mq($from: large) {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n }\n }\n\n &--layout-subpages &__cards:has(stzh-card-navigation[has-lead]),\n &--layout-subpages &__cards:has(stzh-pi-content-navigation[has-lead]) {\n @include spaceCurve(\"row-gap\", \"regular\");\n\n @include mq($from: small) {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n\n @include mq($from: large) {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n }\n }\n\n / Teasers and Pi Teasers layout variant /\n &--layout-pi-teasers &__cards,\n &--layout-teasers &__cards {\n --slotted: var(--stzh-cardlist-pi-content, 0);\n @include spaceCurve(\"row-gap\", \"medium\");\n\n @include mq($from: small) {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n\n @include mq($from: medium) {\n grid-template-columns: repeat(calc(3 - var(--slotted)), minmax(0, 1fr));\n }\n\n @include mq($from: large) {\n grid-template-columns: repeat(calc(4 - var(--slotted)), minmax(0, 1fr));\n }\n }\n\n &--layout-teasers#{&}--max-3-cols &__cards,\n &--layout-pi-teasers#{&}--max-3-cols &__cards {\n @include mq($from: large) {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n }\n }\n\n / Searchresults layout variant /\n\n &--layout-searchresults &__cards {\n gap: space(\"xlarge\");\n }\n\n / Fullwidth layout variant (e.g. for MeinKonto dashboard) /\n\n &--layout-fullwidth &__cards {\n @include spaceCurve(\"gap\", \"regular\");\n }\n\n / Pi Teasers variant /\n &--layout-pi-teasers {\n background-color: var(--background-color);\n position: relative;\n left: 50%;\n right: 50%;\n margin-left: calc(-50vw + var(--stzh-scrollbar-width) / 2);\n margin-right: calc(-50vw + var(--stzh-scrollbar-width) / 2);\n width: calc(100vw - var(--stzh-scrollbar-width));\n max-width: calc(100vw - var(--stzh-scrollbar-width));\n\n --slotted: var(--stzh-cardlist-pi-content, 0);\n left: calc(50% (1 - var(--slotted)));\n right: calc(50% * (1 - var(--slotted)));\n\n margin-left: calc(\n (-50vw + var(--stzh-scrollbar-width) / 2) * (1 - var(--slotted))\n );\n margin-right: calc(\n (-50vw + var(--stzh-scrollbar-width) / 2) * (1 - var(--slotted))\n );\n\n width: calc(\n (100vw - var(--stzh-scrollbar-width)) * (1 - var(--slotted)) + 100% \n var(--slotted)\n );\n max-width: calc(\n 100vw - var(--stzh-scrollbar-width) (1 - var(--slotted)) + 100% \n var(--slotted)\n );\n\n @include spaceCurve(\"padding-top\", \"big\");\n @include spaceCurve(\"padding-bottom\", \"big\");\n }\n\n &--layout-pi-teasers &__header,\n &--layout-pi-teasers &__cards {\n @include container();\n @include mq($from: ultra) {\n --slotted: var(--stzh-cardlist-pi-content, 0);\n\n --center-margin: max(0px, calc((100% - #{$containerMaxWidth}) / 2));\n\n margin-left: calc(\n (1 - var(--slotted)) var(--center-margin) + var(--slotted) \n #{$containerMarginLarge}\n );\n margin-right: calc(\n (1 - var(--slotted)) var(--center-margin) + var(--slotted) \n #{$containerMarginLarge}\n );\n }\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Prop, State } from \"@stencil/core\";\n\nimport { StzhCardlistCollapseAllEvent } from \"../../index\";\nimport { StzhCardlistLocalizedText } from \"./stzh-cardlist.localization\";\n\n/\n @slot - Slot for `stzh-card` elements\n * @slot description - Slot for description\n * @slot footer - Slot for footer elements\n /\n@Component({\n tag: \"stzh-cardlist\",\n styleUrl: \"stzh-cardlist.scss\",\n scoped: true,\n})\nexport class StzhCardlist {\n /* Translation strings /\n @Prop() localization: StzhCardlistLocalizedText;\n\n @Prop({ reflect: true }) layout: \"fullwidth\" \| \"searchresults\" \| \"subpages\" \| \"teasers\" \| \"pi-teasers\" = \"fullwidth\";\n\n /* Description message (use description slot as alternative) /\n @Prop() description: string;\n\n /* Whether collapse/expand toggle link /\n @Prop({ reflect: true }) showToggleLink: boolean = false;\n\n /* Whether sorting should be enabled /\n @Prop() sortableEnabled: boolean = false;\n\n /* HTML attribute that is used by the `toArray()` of sortable method /\n @Prop() sortableDataIdAttribute: string = \"data-id\";\n\n /* Force maximum 3 columns layout instead of 4 /\n @Prop() max3Columns: boolean = false;\n\n @Element() element: HTMLStzhCardlistElement;\n\n /* Collapse all event */\n @Event() stzhCollapseAll: EventEmitter<StzhCardlistCollapseAllEvent>;\n\n @Listen(\"stzhCollapse\")\n collapseListener() {\n this.updateCollapsedState();\n }\n\n @State() allCollapsed: boolean = false;\n @State() isStzhAnchornavVisible: boolean = false;\n\n private collapseClick = () => {\n const cards = Array.from(this.element.querySelectorAll(\"stzh-card\"));\n cards.forEach(card => {\n if (card.collapsible) {\n card.collapsed = !this.allCollapsed;\n }\n });\n\n this.allCollapsed = !this.allCollapsed;\n\n this.stzhCollapseAll.emit({\n component: \"stzh-cardlist\",\n allCollapsed: this.allCollapsed,\n });\n };\n\n private updateCollapsedState = () => {\n const cards = Array.from(this.element.querySelectorAll(\"stzh-card\"));\n this.allCollapsed = !cards.some(card => !card.collapsed);\n };\n\n private sortableGhostClone: Function = (dragElement: HTMLElement) => {\n // const [clonedElement, clonedStzhElement, originalStzhElement] = cloneWrappedStzhElement(dragElement);\n\n // if (\n // clonedStzhElement\n // && originalStzhElement\n // && clonedStzhElement.tagName.toLowerCase() === \"stzh-card\"\n // ) {\n // const clonedStzhElementCard: HTMLStzhCardElement = clonedStzhElement as HTMLStzhCardElement;\n // const originalStzhElementCard: HTMLStzhCardElement = originalStzhElement as HTMLStzhCardElement;\n\n // // copy every property that is not reflected to its attribute\n // clonedStzhElementCard.heading = originalStzhElementCard.heading;\n // clonedStzhElementCard.subtitle = originalStzhElementCard.subtitle;\n // clonedStzhElementCard.headerActions = originalStzhElementCard.headerActions;\n // clonedStzhElementCard.footerActions = originalStzhElementCard.footerActions;\n // clonedStzhElementCard.hideMovementActions = originalStzhElementCard.hideMovementActions;\n // }\n\n // return clonedElement;\n\n const card =\n dragElement.tagName.toLowerCase() === \"stzh-card\" ? dragElement : dragElement.querySelector(\"stzh-card\");\n\n if (card) {\n const originalElement = dragElement as HTMLStzhCardElement;\n const clonedElement = dragElement.cloneNode(true) as HTMLStzhCardElement;\n\n // copy every property that is not reflected to its attribute\n clonedElement.heading = originalElement.heading;\n clonedElement.subtitle = originalElement.subtitle;\n clonedElement.headerActions = originalElement.headerActions;\n clonedElement.footerActions = originalElement.footerActions;\n clonedElement.hideMovementActions = originalElement.hideMovementActions;\n\n return clonedElement;\n }\n };\n\n async componentWillLoad() {\n this.isStzhAnchornavVisible =\n document.documentElement.style.getPropertyValue(\"--stzh-anchornav-is-visible\") === \"1\";\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"cardlist\");\n }\n }\n\n componentDidLoad() {\n this.isStzhAnchornavVisible =\n document.documentElement.style.getPropertyValue(\"--stzh-anchornav-is-visible\") === \"1\";\n this.updateCollapsedState();\n }\n\n render() {\n const classes = {\n \"stzh-cardlist\": true,\n \"stzh-cardlist--has-toggle-link\": this.showToggleLink,\n \"stzh-cardlist--max-3-cols\": this.isStzhAnchornavVisible \|\| this.max3Columns,\n [`stzh-cardlist--layout-${this.layout}`]: !!this.layout,\n };\n\n return (\n <Host>\n <div class={classes}>\n <div class=\"stzh-cardlist__header\">\n <div class=\"stzh-cardlist__description\">\n {this.description ? this.description : <slot name=\"description\"></slot>}\n </div>\n {this.showToggleLink && (\n <stzh-link\n class=\"stzh-cardlist__switch\"\n icon={this.allCollapsed ? \"list-expanded\" : \"list-shrinked\"}\n label={this.allCollapsed ? this.localization.expandAll : this.localization.collapseAll}\n onClick={this.collapseClick}\n ></stzh-link>\n )}\n </div>\n\n <stzh-sortable\n disabled={!this.sortableEnabled}\n dataIdAttribute={this.sortableDataIdAttribute}\n ghostClone={this.sortableGhostClone}\n >\n <div class=\"stzh-cardlist__cards\" role=\"list\">\n <slot></slot>\n </div>\n </stzh-sortable>\n\n <div class=\"stzh-cardlist__footer\">\n <stzh-container>\n <slot name=\"footer\"></slot>\n </stzh-container>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-BL7NQ4Wt.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-cardlist/stzh-cardlist.scss?tag=stzh-cardlist&encapsulation=scoped","src/components/stzh-cardlist/stzh-cardlist.tsx"],"sourcesContent":[":host {\n --description-color: var(--stzh-cardlist-description-color, inherit);\n --background-color: var(--stzh-cardlist-background-color, inherit);\n}\n\n.stzh-cardlist {\n &__cards {\n display: grid;\n gap: $gridGutter;\n\n @include mq($from: small) {\n gap: $gridGutterSmall;\n }\n\n @include mq($from: medium) {\n gap: $gridGutterMedium;\n }\n\n @include mq($from: large) {\n gap: $gridGutterLarge;\n }\n\n @include mq($from: ultra) {\n gap: $gridGutterUltra;\n }\n }\n\n &__header {\n display: flex;\n justify-content: space-between;\n flex-direction: column;\n align-items: flex-start;\n\n @include mq($from: medium) {\n // was smallheader before\n flex-direction: row;\n }\n }\n\n &__footer:not(:empty) {\n @include spaceCurve(\"margin-top\", \"regular\");\n }\n\n &__description {\n @include fontCurve(\"p1\");\n --stzh-icon-color: #{$colorPrimary70};\n\n &:not(:empty) {\n margin-bottom: space(\"xsmall\");\n\n @include mq($from: medium) {\n // was smallheader before\n margin-bottom: 0;\n }\n }\n\n ::slotted(stzh-heading) {\n --color: var(--description-color);\n }\n }\n\n &__switch {\n --color: inherit;\n align-self: end;\n }\n\n /* Has content inside header /\n\n &:has(#{&}__description:not(:empty)) &__header,\n &--has-toggle-link &__header {\n @include spaceCurve(\"margin-bottom\", \"regular\");\n }\n\n / Subpages layout variant /\n\n &--layout-subpages &__cards:has(stzh-card-navigation:not([has-lead])),\n &--layout-subpages &__cards:has(stzh-pi-content-navigation:not([has-lead])) {\n @include spaceCurve(\"row-gap\", \"tiny\");\n\n @include mq($from: medium) {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n padding-left: 0;\n }\n }\n\n &--layout-subpages &__cards:has(stzh-pi-content-navigation:not([has-lead])) {\n @include mq($from: large) {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n }\n }\n\n &--layout-subpages &__cards:has(stzh-card-navigation[has-lead]),\n &--layout-subpages &__cards:has(stzh-pi-content-navigation[has-lead]) {\n @include spaceCurve(\"row-gap\", \"regular\");\n\n @include mq($from: small) {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n\n @include mq($from: large) {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n }\n }\n\n / Teasers and Pi Teasers layout variant /\n &--layout-pi-teasers &__cards,\n &--layout-teasers &__cards {\n --slotted: var(--stzh-cardlist-pi-content, 0);\n @include spaceCurve(\"row-gap\", \"medium\");\n\n @include mq($from: small) {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n\n @include mq($from: medium) {\n grid-template-columns: repeat(calc(3 - var(--slotted)), minmax(0, 1fr));\n }\n\n @include mq($from: large) {\n grid-template-columns: repeat(calc(4 - var(--slotted)), minmax(0, 1fr));\n }\n }\n\n &--layout-teasers#{&}--max-3-cols &__cards,\n &--layout-pi-teasers#{&}--max-3-cols &__cards {\n @include mq($from: large) {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n }\n }\n\n / Searchresults layout variant /\n\n &--layout-searchresults &__cards {\n gap: space(\"xlarge\");\n }\n\n / Fullwidth layout variant (e.g. for MeinKonto dashboard) /\n\n &--layout-fullwidth &__cards {\n @include spaceCurve(\"gap\", \"regular\");\n }\n\n / Pi Teasers variant /\n &--layout-pi-teasers {\n background-color: var(--background-color);\n position: relative;\n left: 50%;\n right: 50%;\n margin-left: calc(-50vw + var(--stzh-scrollbar-width) / 2);\n margin-right: calc(-50vw + var(--stzh-scrollbar-width) / 2);\n width: calc(100vw - var(--stzh-scrollbar-width));\n max-width: calc(100vw - var(--stzh-scrollbar-width));\n\n --slotted: var(--stzh-cardlist-pi-content, 0);\n left: calc(50% (1 - var(--slotted)));\n right: calc(50% * (1 - var(--slotted)));\n\n margin-left: calc(\n (-50vw + var(--stzh-scrollbar-width) / 2) * (1 - var(--slotted))\n );\n margin-right: calc(\n (-50vw + var(--stzh-scrollbar-width) / 2) * (1 - var(--slotted))\n );\n\n width: calc(\n (100vw - var(--stzh-scrollbar-width)) * (1 - var(--slotted)) + 100% \n var(--slotted)\n );\n max-width: calc(\n 100vw - var(--stzh-scrollbar-width) (1 - var(--slotted)) + 100% \n var(--slotted)\n );\n\n @include spaceCurve(\"padding-top\", \"big\");\n @include spaceCurve(\"padding-bottom\", \"big\");\n }\n\n &--layout-pi-teasers &__header,\n &--layout-pi-teasers &__cards {\n @include container();\n @include mq($from: ultra) {\n --slotted: var(--stzh-cardlist-pi-content, 0);\n\n --center-margin: max(0px, calc((100% - #{$containerMaxWidth}) / 2));\n\n margin-left: calc(\n (1 - var(--slotted)) var(--center-margin) + var(--slotted) \n #{$containerMarginLarge}\n );\n margin-right: calc(\n (1 - var(--slotted)) var(--center-margin) + var(--slotted) \n #{$containerMarginLarge}\n );\n }\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Prop, State } from \"@stencil/core\";\n\nimport { StzhCardlistCollapseAllEvent } from \"../../index\";\nimport { StzhCardlistLocalizedText } from \"./stzh-cardlist.localization\";\n\n/\n @slot - Slot for `stzh-card` elements\n * @slot description - Slot for description\n * @slot footer - Slot for footer elements\n /\n@Component({\n tag: \"stzh-cardlist\",\n styleUrl: \"stzh-cardlist.scss\",\n scoped: true,\n})\nexport class StzhCardlist {\n /* Translation strings /\n @Prop() localization: StzhCardlistLocalizedText;\n\n @Prop({ reflect: true }) layout: \"fullwidth\" \| \"searchresults\" \| \"subpages\" \| \"teasers\" \| \"pi-teasers\" = \"fullwidth\";\n\n /* Description message (use description slot as alternative) /\n @Prop() description: string;\n\n /* Whether collapse/expand toggle link /\n @Prop({ reflect: true }) showToggleLink: boolean = false;\n\n /* Whether sorting should be enabled /\n @Prop() sortableEnabled: boolean = false;\n\n /* HTML attribute that is used by the `toArray()` of sortable method /\n @Prop() sortableDataIdAttribute: string = \"data-id\";\n\n /* Force maximum 3 columns layout instead of 4 /\n @Prop() max3Columns: boolean = false;\n\n @Element() element: HTMLStzhCardlistElement;\n\n /* Collapse all event */\n @Event() stzhCollapseAll: EventEmitter<StzhCardlistCollapseAllEvent>;\n\n @Listen(\"stzhCollapse\")\n collapseListener() {\n this.updateCollapsedState();\n }\n\n @State() allCollapsed: boolean = false;\n @State() isStzhAnchornavVisible: boolean = false;\n\n private collapseClick = () => {\n const cards = Array.from(this.element.querySelectorAll(\"stzh-card\"));\n cards.forEach(card => {\n if (card.collapsible) {\n card.collapsed = !this.allCollapsed;\n }\n });\n\n this.allCollapsed = !this.allCollapsed;\n\n this.stzhCollapseAll.emit({\n component: \"stzh-cardlist\",\n allCollapsed: this.allCollapsed,\n });\n };\n\n private updateCollapsedState = () => {\n const cards = Array.from(this.element.querySelectorAll(\"stzh-card\"));\n this.allCollapsed = !cards.some(card => !card.collapsed);\n };\n\n private sortableGhostClone: Function = (dragElement: HTMLElement) => {\n // const [clonedElement, clonedStzhElement, originalStzhElement] = cloneWrappedStzhElement(dragElement);\n\n // if (\n // clonedStzhElement\n // && originalStzhElement\n // && clonedStzhElement.tagName.toLowerCase() === \"stzh-card\"\n // ) {\n // const clonedStzhElementCard: HTMLStzhCardElement = clonedStzhElement as HTMLStzhCardElement;\n // const originalStzhElementCard: HTMLStzhCardElement = originalStzhElement as HTMLStzhCardElement;\n\n // // copy every property that is not reflected to its attribute\n // clonedStzhElementCard.heading = originalStzhElementCard.heading;\n // clonedStzhElementCard.subtitle = originalStzhElementCard.subtitle;\n // clonedStzhElementCard.headerActions = originalStzhElementCard.headerActions;\n // clonedStzhElementCard.footerActions = originalStzhElementCard.footerActions;\n // clonedStzhElementCard.hideMovementActions = originalStzhElementCard.hideMovementActions;\n // }\n\n // return clonedElement;\n\n const card =\n dragElement.tagName.toLowerCase() === \"stzh-card\" ? dragElement : dragElement.querySelector(\"stzh-card\");\n\n if (card) {\n const originalElement = dragElement as HTMLStzhCardElement;\n const clonedElement = dragElement.cloneNode(true) as HTMLStzhCardElement;\n\n // copy every property that is not reflected to its attribute\n clonedElement.heading = originalElement.heading;\n clonedElement.subtitle = originalElement.subtitle;\n clonedElement.headerActions = originalElement.headerActions;\n clonedElement.footerActions = originalElement.footerActions;\n clonedElement.hideMovementActions = originalElement.hideMovementActions;\n\n return clonedElement;\n }\n };\n\n async componentWillLoad() {\n this.isStzhAnchornavVisible =\n document.documentElement.style.getPropertyValue(\"--stzh-anchornav-is-visible\") === \"1\";\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"cardlist\");\n }\n }\n\n componentDidLoad() {\n this.isStzhAnchornavVisible =\n document.documentElement.style.getPropertyValue(\"--stzh-anchornav-is-visible\") === \"1\";\n this.updateCollapsedState();\n }\n\n render() {\n const classes = {\n \"stzh-cardlist\": true,\n \"stzh-cardlist--has-toggle-link\": this.showToggleLink,\n \"stzh-cardlist--max-3-cols\": this.isStzhAnchornavVisible \|\| this.max3Columns,\n [`stzh-cardlist--layout-${this.layout}`]: !!this.layout,\n };\n\n return (\n <Host>\n <div class={classes}>\n <div class=\"stzh-cardlist__header\">\n <div class=\"stzh-cardlist__description\">\n {this.description ? this.description : <slot name=\"description\"></slot>}\n </div>\n {this.showToggleLink && (\n <stzh-link\n class=\"stzh-cardlist__switch\"\n icon={this.allCollapsed ? \"list-expanded\" : \"list-shrinked\"}\n label={this.allCollapsed ? this.localization.expandAll : this.localization.collapseAll}\n onClick={this.collapseClick}\n ></stzh-link>\n )}\n </div>\n\n <stzh-sortable\n disabled={!this.sortableEnabled}\n dataIdAttribute={this.sortableDataIdAttribute}\n ghostClone={this.sortableGhostClone}\n >\n <div class=\"stzh-cardlist__cards\" role=\"list\">\n <slot></slot>\n </div>\n </stzh-sortable>\n\n <div class=\"stzh-cardlist__footer\">\n <stzh-container>\n <slot name=\"footer\"></slot>\n </stzh-container>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/{p-BQZtw7Z7.js → p-BLo-sQFo.js} RENAMED Viewed

@@ -1,8 +1,8 @@
-import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-Ct0XU0Xj.js';
-import { d as defineCustomElement$4 } from './p-BC5CKnR0.js';
-import { d as defineCustomElement$3 } from './p-kc3jagy9.js';
-import { d as defineCustomElement$2 } from './p-C5BMqKn_.js';
-import { d as defineCustomElement$1 } from './p-CgQ_cBIG.js';
+import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-C1U0z0e7.js';
+import { d as defineCustomElement$4 } from './p-ndh9Y2u_.js';
+import { d as defineCustomElement$3 } from './p-D0sPQTAC.js';
+import { d as defineCustomElement$2 } from './p-CuGNlsAf.js';
+import { d as defineCustomElement$1 } from './p-BaQRAFeH.js';
 const stzhMessageCss = () => `.sc-stzh-message-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-message-h,[stzh-hidden].sc-stzh-message-h{display:none}.sc-stzh-message-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-message-h *.sc-stzh-message,.sc-stzh-message-h *.sc-stzh-message::before,.sc-stzh-message-h *.sc-stzh-message::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-message-h .has-focus.sc-stzh-message{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-message-h .stzh-fylingfocus-focused.sc-stzh-message{outline-style:none !important}.sc-stzh-message-h .stzh-fylingfocus-focused.sc-stzh-message::-moz-focus-inner{border:0 !important}.sc-stzh-message-h{--background-color:var(--stzh-color-grey20);--icon-color:var(--stzh-color-info50);--close-color:var(--stzh-color-grey90);--label-color:var(--stzh-color-info70);--description-color:var(--stzh-color-grey90)}[type=success].sc-stzh-message-h{--label-color:var(--stzh-color-success70);--icon-color:var(--stzh-color-success50);--background-color:var(--stzh-color-success20)}[type=warning].sc-stzh-message-h{--label-color:var(--stzh-color-warning90);--icon-color:var(--stzh-color-warning70);--background-color:var(--stzh-color-warning20)}[type=error].sc-stzh-message-h{--label-color:var(--stzh-color-error70);--icon-color:var(--stzh-color-error50);--background-color:var(--stzh-color-error20)}[type=page-message].sc-stzh-message-h{--label-color:var(--stzh-color-info70);--icon-color:var(--stzh-color-info50);--background-color:var(--stzh-color-info20)}.stzh-message.sc-stzh-message{position:relative;display:flex;box-shadow:var(--stzh-box-shadow-message);background-color:var(--background-color);border-radius:var(--stzh-button-border-radius)}.stzh-message__content.sc-stzh-message{padding-top:var(--stzh-space-xsmall)}@media screen and (min-width: 600px){.stzh-message__content.sc-stzh-message{padding-top:var(--stzh-space-small)}}@media screen and (min-width: 900px){.stzh-message__content.sc-stzh-message{padding-top:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-message__content.sc-stzh-message{padding-top:var(--stzh-space-xlarge)}}.stzh-message__content.sc-stzh-message{padding-bottom:var(--stzh-space-xsmall)}@media screen and (min-width: 600px){.stzh-message__content.sc-stzh-message{padding-bottom:var(--stzh-space-small)}}@media screen and (min-width: 900px){.stzh-message__content.sc-stzh-message{padding-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-message__content.sc-stzh-message{padding-bottom:var(--stzh-space-xlarge)}}.stzh-message__content.sc-stzh-message{padding-right:var(--stzh-space-large)}@media screen and (min-width: 600px){.stzh-message__content.sc-stzh-message{padding-right:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px){.stzh-message__content.sc-stzh-message{padding-right:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-message__content.sc-stzh-message{padding-right:var(--stzh-space-xxxlarge)}}.stzh-message__content.sc-stzh-message{gap:var(--stzh-space-xsmall)}@media screen and (min-width: 600px){.stzh-message__content.sc-stzh-message{gap:var(--stzh-space-small)}}@media screen and (min-width: 900px){.stzh-message__content.sc-stzh-message{gap:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-message__content.sc-stzh-message{gap:var(--stzh-space-xlarge)}}.stzh-message__content.sc-stzh-message{display:flex;flex-direction:column;flex-grow:1;padding-left:var(--stzh-space-medium);outline:0.125rem solid transparent;outline-offset:-0.125rem}@media screen and (min-width: 600px){.stzh-message__content.sc-stzh-message{flex-direction:row;align-items:flex-start}}@media screen and (min-width: 900px){.stzh-message__content.sc-stzh-message{padding-left:var(--stzh-space-large)}}@media (forced-colors: active){.stzh-message__content.sc-stzh-message{outline-color:CanvasText}}.stzh-message__icon-wrapper.sc-stzh-message{display:flex;flex-shrink:0}.stzh-message__icon.sc-stzh-message{--size:var(--stzh-icon-size-large);color:var(--icon-color)}@media screen and (min-width: 600px){.stzh-message__text-wrapper.sc-stzh-message{flex-grow:1}}@media screen and (min-width: 1260px){.stzh-message__text-wrapper.sc-stzh-message{align-items:center}}.stzh-message__label.sc-stzh-message{font-family:var(--stzh-font-family-title);font-weight:var(--stzh-font-weight-title);font-style:var(--stzh-font-style-title);font-size:var(--stzh-font-curve-h4-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-h4-default-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){.stzh-message__label.sc-stzh-message{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){.stzh-message__label.sc-stzh-message{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){.stzh-message__label.sc-stzh-message{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))}}.stzh-message__label.sc-stzh-message{color:var(--label-color)}@media screen and (min-width: 1260px){.stzh-message__label.sc-stzh-message{font-size:var(--stzh-font-deci-font-size) !important}}.stzh-message__label.sc-stzh-message:not(:empty){margin-bottom:var(--stzh-space-xsmall)}.stzh-message__description.sc-stzh-message{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){.stzh-message__description.sc-stzh-message{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-message__description.sc-stzh-message{color:var(--description-color);overflow-wrap:break-word;word-wrap:break-word;word-break:break-word}.stzh-message__description.sc-stzh-message:not(:empty)+.stzh-message__link.sc-stzh-message:not(:empty){margin-top:var(--stzh-space-xxsmall)}@media screen and (min-width: 900px){.stzh-message__description.sc-stzh-message:not(:empty)+.stzh-message__link.sc-stzh-message:not(:empty){margin-top:var(--stzh-space-xsmall)}}@media screen and (min-width: 1260px){.stzh-message__description.sc-stzh-message:not(:empty)+.stzh-message__link.sc-stzh-message:not(:empty){margin-top:var(--stzh-space-small)}}.stzh-message__close[variant=tertiary].sc-stzh-message{--color:var(--close-color);position:absolute;top:0;right:0}.stzh-message.sc-stzh-message:has(.stzh-message__description:empty):has(.stzh-message__link:empty) .stzh-message__label.sc-stzh-message:not(:empty){margin-top:var(--stzh-space-xxsmall);margin-bottom:0}.stzh-message--type-page-message.sc-stzh-message .stzh-message__content.sc-stzh-message{padding-left:1.25rem;padding-right:1.25rem}@media screen and (min-width: 600px){.stzh-message--type-page-message.sc-stzh-message .stzh-message__content.sc-stzh-message{padding-left:2rem;padding-right:2rem}}@media screen and (min-width: 900px){.stzh-message--type-page-message.sc-stzh-message .stzh-message__content.sc-stzh-message{padding-left:2.5rem;padding-right:2.5rem}}@media screen and (min-width: 1260px){.stzh-message--type-page-message.sc-stzh-message .stzh-message__content.sc-stzh-message{padding-left:4rem;padding-right:4rem}}@media screen and (min-width: 1600px){.stzh-message--type-page-message.sc-stzh-message .stzh-message__content.sc-stzh-message{padding-left:calc((100vw - 84.25rem) / 2);padding-right:calc((100vw - 84.25rem) / 2)}}.stzh-message--type-page-message.sc-stzh-message .stzh-message__content.sc-stzh-message{padding-top:var(--stzh-space-xsmall)}@media screen and (min-width: 600px){.stzh-message--type-page-message.sc-stzh-message .stzh-message__content.sc-stzh-message{padding-top:var(--stzh-space-small)}}@media screen and (min-width: 900px){.stzh-message--type-page-message.sc-stzh-message .stzh-message__content.sc-stzh-message{padding-top:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-message--type-page-message.sc-stzh-message .stzh-message__content.sc-stzh-message{padding-top:var(--stzh-space-xlarge)}}.stzh-message--type-page-message.sc-stzh-message .stzh-message__content.sc-stzh-message{padding-bottom:var(--stzh-space-xsmall)}@media screen and (min-width: 600px){.stzh-message--type-page-message.sc-stzh-message .stzh-message__content.sc-stzh-message{padding-bottom:var(--stzh-space-small)}}@media screen and (min-width: 900px){.stzh-message--type-page-message.sc-stzh-message .stzh-message__content.sc-stzh-message{padding-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-message--type-page-message.sc-stzh-message .stzh-message__content.sc-stzh-message{padding-bottom:var(--stzh-space-xlarge)}}.stzh-message--type-page-message.sc-stzh-message .stzh-message__content.sc-stzh-message{align-items:flex-start;flex-direction:row}@media screen and (max-width: 1259px){.stzh-message--type-page-message.sc-stzh-message .stzh-message__content.sc-stzh-message{padding-right:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-message--type-page-message.sc-stzh-message .stzh-message__content.sc-stzh-message{align-items:center}}.stzh-message--type-page-message.sc-stzh-message .stzh-message__text-wrapper.sc-stzh-message{display:flex;flex-direction:column}@media screen and (min-width: 1260px){.stzh-message--type-page-message.sc-stzh-message .stzh-message__text-wrapper.sc-stzh-message{flex-direction:row;gap:var(--stzh-space-xsmall)}}@media screen and (min-width: 1260px) and (min-width: 600px){.stzh-message--type-page-message.sc-stzh-message .stzh-message__text-wrapper.sc-stzh-message{gap:var(--stzh-space-small)}}@media screen and (min-width: 1260px) and (min-width: 900px){.stzh-message--type-page-message.sc-stzh-message .stzh-message__text-wrapper.sc-stzh-message{gap:var(--stzh-space-medium)}}@media screen and (min-width: 1260px) and (min-width: 1260px){.stzh-message--type-page-message.sc-stzh-message .stzh-message__text-wrapper.sc-stzh-message{gap:var(--stzh-space-xlarge)}}.stzh-message--type-page-message.sc-stzh-message .stzh-message__icon.sc-stzh-message{--size:var(--stzh-icon-size-small)}.stzh-message--type-page-message.sc-stzh-message .stzh-message__label.sc-stzh-message{font-family:var(--stzh-font-family-title);font-weight:var(--stzh-font-weight-title);font-style:var(--stzh-font-style-title);font-size:var(--stzh-font-curve-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){.stzh-message--type-page-message.sc-stzh-message .stzh-message__label.sc-stzh-message{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-message--type-page-message.sc-stzh-message .stzh-message__label.sc-stzh-message{margin:0}@media screen and (min-width: 600px){.stzh-message--type-page-message.sc-stzh-message .stzh-message__close.sc-stzh-message{top:0.625rem;right:0.625rem}}@media screen and (min-width: 900px){.stzh-message--type-page-message.sc-stzh-message .stzh-message__text-wrapper.sc-stzh-message .stzh-message__link.sc-stzh-message{margin-top:0}}`;
@@ -104,6 +104,6 @@ function defineCustomElement() {
 }
 export { StzhMessage as S, defineCustomElement as d };
-//# sourceMappingURL=p-BQZtw7Z7.js.map
+//# sourceMappingURL=p-BLo-sQFo.js.map
-//# sourceMappingURL=p-BQZtw7Z7.js.map
+//# sourceMappingURL=p-BLo-sQFo.js.map

package/dist/components/{p-BQZtw7Z7.js.map → p-BLo-sQFo.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-BQZtw7Z7.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-message/stzh-message.scss?tag=stzh-message&encapsulation=scoped","src/components/stzh-message/stzh-message.tsx"],"sourcesContent":[":host {\n --background-color: #{$colorGrey20};\n --icon-color: #{$colorInfo50};\n --close-color: #{$colorGrey90};\n --label-color: #{$colorInfo70};\n --description-color: #{$colorGrey90};\n\n &[type=\"success\"] {\n --label-color: #{$colorSuccess70};\n --icon-color: #{$colorSuccess50};\n --background-color: #{$colorSuccess20};\n }\n\n &[type=\"warning\"] {\n --label-color: #{$colorWarning90};\n --icon-color: #{$colorWarning70};\n --background-color: #{$colorWarning20};\n }\n\n &[type=\"error\"] {\n --label-color: #{$colorError70};\n --icon-color: #{$colorError50};\n --background-color: #{$colorError20};\n }\n\n &[type=\"page-message\"] {\n --label-color: #{$colorInfo70};\n --icon-color: #{$colorInfo50};\n --background-color: #{$colorInfo20};\n }\n}\n\n.stzh-message {\n position: relative;\n display: flex;\n box-shadow: $boxShadowMessage;\n background-color: var(--background-color);\n border-radius: #{$buttonBorderRadius};\n\n &__content {\n @include spaceCurve(\"padding-top\", \"small\");\n @include spaceCurve(\"padding-bottom\", \"small\");\n @include spaceCurve(\"padding-right\", \"medium\");\n @include spaceCurve(\"gap\", \"small\");\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n padding-left: space(\"medium\");\n outline: 2px solid transparent;\n outline-offset: -2px;\n\n @include mq($from: small) {\n flex-direction: row;\n align-items: flex-start;\n }\n\n @include mq($from: medium) {\n padding-left: space(\"large\");\n }\n\n @media (forced-colors: active) {\n outline-color: CanvasText;\n }\n }\n\n &__icon-wrapper {\n display: flex;\n flex-shrink: 0;\n }\n\n &__icon {\n --size: #{iconSize(\"large\")};\n color: var(--icon-color);\n }\n\n &__text-wrapper {\n @include mq($from: small) {\n flex-grow: 1;\n }\n @include mq($from: large) {\n align-items: center;\n }\n }\n\n &__label {\n @include font(\"title\");\n @include fontCurve(\"h4\", \"heading\");\n color: var(--label-color);\n\n @include mq($from: large) {\n font-size: var(--stzh-font-deci-font-size) !important;\n }\n\n &:not(:empty) {\n margin-bottom: var(--stzh-space-xsmall);\n }\n }\n\n &__description {\n @include fontCurve(\"p1\");\n color: var(--description-color);\n overflow-wrap: break-word;\n word-wrap: break-word;\n word-break: break-word;\n }\n\n &__description:not(:empty) + &__link:not(:empty) {\n @include spaceCurve(\"margin-top\", \"tiny\");\n }\n\n &__close[variant=\"tertiary\"] {\n --color: var(--close-color);\n\n position: absolute;\n top: 0;\n right: 0;\n }\n\n /* Only label variant /\n\n &:has(#{&}__description:empty):has(#{&}__link:empty) &__label:not(:empty) {\n margin-top: space(\"xxsmall\");\n margin-bottom: 0;\n }\n\n / Type page-message /\n\n &--type-page-message &__content {\n @include containerPadding;\n @include spaceCurve(\"padding-top\", \"small\");\n @include spaceCurve(\"padding-bottom\", \"small\");\n align-items: flex-start;\n flex-direction: row;\n\n @include mq($to: large) {\n padding-right: space(\"xxxlarge\");\n }\n\n @include mq($from: large) {\n align-items: center;\n }\n }\n\n &--type-page-message &__text-wrapper {\n display: flex;\n flex-direction: column;\n\n @include mq($from: large) {\n flex-direction: row;\n @include spaceCurve(\"gap\", \"small\");\n }\n }\n\n &--type-page-message &__icon {\n --size: #{iconSize(\"small\")};\n }\n\n &--type-page-message &__label {\n @include font(\"title\");\n @include fontCurve(\"p1\");\n margin: 0;\n }\n\n &--type-page-message &__close {\n @include mq($from: small) {\n top: 10px;\n right: 10px;\n }\n }\n\n &--type-page-message &__text-wrapper &__link {\n @include mq($from: medium) {\n margin-top: 0;\n }\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from \"@stencil/core\";\n\nimport { StzhMessageCloseEvent, StzhMessageOpenEvent } from \"../../index\";\n\nimport { StzhMessageLocalizedText } from \"./stzh-message.localization\";\n\n/\n @slot - Slot for trusted rich description content (only used when the description property is empty)\n * @slot label - Slot for label (use as alternative for property)\n * @slot link - Slot for optional stzh-link element\n /\n@Component({\n tag: \"stzh-message\",\n styleUrl: \"stzh-message.scss\",\n scoped: true,\n})\nexport class StzhMessage {\n /* Label (slot can also be used as alternative) /\n @Prop() label: string = \"\";\n\n /* Plain text description. If set, this takes precedence over the default slot. /\n @Prop() description: string = \"\";\n\n /* Type /\n /* Do not use page-message property. It will be deprecated with the next major release. /\n @Prop({ reflect: true }) type: \"info\" \| \"success\" \| \"warning\" \| \"error\" \| \"page-message\" = \"info\";\n\n /* Whether to hide close button /\n @Prop() hideClose: boolean = false;\n\n /* Translation strings. /\n @Prop() localization: StzhMessageLocalizedText;\n\n /* Message open event /\n @Event() stzhOpen: EventEmitter<StzhMessageOpenEvent>;\n\n /* Message close event /\n @Event() stzhClose: EventEmitter<StzhMessageCloseEvent>;\n\n @Element() element: HTMLStzhMessageElement;\n\n /* Open state */\n @State() open: boolean = true;\n\n @Method()\n async show() {\n this.open = true;\n this.stzhOpen.emit({\n component: \"stzh-message\",\n });\n }\n\n @Method()\n async hide() {\n this.open = false;\n this.stzhClose.emit({\n component: \"stzh-message\",\n });\n }\n\n private onCloseButtonClick = () => {\n this.hide();\n };\n\n async componentWillLoad() {\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"message\");\n }\n }\n\n render() {\n const classes = {\n \"stzh-message\": true,\n \"stzh-message--has-close-hidden\": this.hideClose,\n [`stzh-message--type-${this.type}`]: !!this.type,\n };\n\n return (\n <Host hidden={!this.open}>\n <div class={classes}>\n <div class=\"stzh-message__content\">\n <div class=\"stzh-message__icon-wrapper\">\n <stzh-icon\n class=\"stzh-message__icon\"\n name={\n ((this.type === \"info\" \|\| this.type === \"page-message\") && \"info-help-filled\") \|\|\n (this.type === \"success\" && \"checkmark-circle-filled\") \|\|\n (this.type === \"warning\" && \"important-warning-filled\") \|\|\n (this.type === \"error\" && \"warning-filled\")\n }\n ></stzh-icon>\n </div>\n <div class=\"stzh-message__text-wrapper\">\n <div class=\"stzh-message__label\">\n {this.label ? <strong>{this.label}</strong> : <slot name=\"label\"></slot>}\n </div>\n <div class=\"stzh-message__description\">\n {this.description ? (\n <stzh-text color=\"inherit\">\n <p>{this.description}</p>\n </stzh-text>\n ) : (\n <slot></slot>\n )}\n </div>\n <div class=\"stzh-message__link\">\n <slot name=\"link\"></slot>\n </div>\n </div>\n </div>\n\n {!this.hideClose && (\n <stzh-button\n class=\"stzh-message__close\"\n onClick={this.onCloseButtonClick}\n a11yLabel={this.localization.close}\n variant=\"tertiary\"\n size=\"small\"\n iconOnly={true}\n icon=\"close-big\"\n ></stzh-button>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-BLo-sQFo.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-message/stzh-message.scss?tag=stzh-message&encapsulation=scoped","src/components/stzh-message/stzh-message.tsx"],"sourcesContent":[":host {\n --background-color: #{$colorGrey20};\n --icon-color: #{$colorInfo50};\n --close-color: #{$colorGrey90};\n --label-color: #{$colorInfo70};\n --description-color: #{$colorGrey90};\n\n &[type=\"success\"] {\n --label-color: #{$colorSuccess70};\n --icon-color: #{$colorSuccess50};\n --background-color: #{$colorSuccess20};\n }\n\n &[type=\"warning\"] {\n --label-color: #{$colorWarning90};\n --icon-color: #{$colorWarning70};\n --background-color: #{$colorWarning20};\n }\n\n &[type=\"error\"] {\n --label-color: #{$colorError70};\n --icon-color: #{$colorError50};\n --background-color: #{$colorError20};\n }\n\n &[type=\"page-message\"] {\n --label-color: #{$colorInfo70};\n --icon-color: #{$colorInfo50};\n --background-color: #{$colorInfo20};\n }\n}\n\n.stzh-message {\n position: relative;\n display: flex;\n box-shadow: $boxShadowMessage;\n background-color: var(--background-color);\n border-radius: #{$buttonBorderRadius};\n\n &__content {\n @include spaceCurve(\"padding-top\", \"small\");\n @include spaceCurve(\"padding-bottom\", \"small\");\n @include spaceCurve(\"padding-right\", \"medium\");\n @include spaceCurve(\"gap\", \"small\");\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n padding-left: space(\"medium\");\n outline: 2px solid transparent;\n outline-offset: -2px;\n\n @include mq($from: small) {\n flex-direction: row;\n align-items: flex-start;\n }\n\n @include mq($from: medium) {\n padding-left: space(\"large\");\n }\n\n @media (forced-colors: active) {\n outline-color: CanvasText;\n }\n }\n\n &__icon-wrapper {\n display: flex;\n flex-shrink: 0;\n }\n\n &__icon {\n --size: #{iconSize(\"large\")};\n color: var(--icon-color);\n }\n\n &__text-wrapper {\n @include mq($from: small) {\n flex-grow: 1;\n }\n @include mq($from: large) {\n align-items: center;\n }\n }\n\n &__label {\n @include font(\"title\");\n @include fontCurve(\"h4\", \"heading\");\n color: var(--label-color);\n\n @include mq($from: large) {\n font-size: var(--stzh-font-deci-font-size) !important;\n }\n\n &:not(:empty) {\n margin-bottom: var(--stzh-space-xsmall);\n }\n }\n\n &__description {\n @include fontCurve(\"p1\");\n color: var(--description-color);\n overflow-wrap: break-word;\n word-wrap: break-word;\n word-break: break-word;\n }\n\n &__description:not(:empty) + &__link:not(:empty) {\n @include spaceCurve(\"margin-top\", \"tiny\");\n }\n\n &__close[variant=\"tertiary\"] {\n --color: var(--close-color);\n\n position: absolute;\n top: 0;\n right: 0;\n }\n\n /* Only label variant /\n\n &:has(#{&}__description:empty):has(#{&}__link:empty) &__label:not(:empty) {\n margin-top: space(\"xxsmall\");\n margin-bottom: 0;\n }\n\n / Type page-message /\n\n &--type-page-message &__content {\n @include containerPadding;\n @include spaceCurve(\"padding-top\", \"small\");\n @include spaceCurve(\"padding-bottom\", \"small\");\n align-items: flex-start;\n flex-direction: row;\n\n @include mq($to: large) {\n padding-right: space(\"xxxlarge\");\n }\n\n @include mq($from: large) {\n align-items: center;\n }\n }\n\n &--type-page-message &__text-wrapper {\n display: flex;\n flex-direction: column;\n\n @include mq($from: large) {\n flex-direction: row;\n @include spaceCurve(\"gap\", \"small\");\n }\n }\n\n &--type-page-message &__icon {\n --size: #{iconSize(\"small\")};\n }\n\n &--type-page-message &__label {\n @include font(\"title\");\n @include fontCurve(\"p1\");\n margin: 0;\n }\n\n &--type-page-message &__close {\n @include mq($from: small) {\n top: 10px;\n right: 10px;\n }\n }\n\n &--type-page-message &__text-wrapper &__link {\n @include mq($from: medium) {\n margin-top: 0;\n }\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from \"@stencil/core\";\n\nimport { StzhMessageCloseEvent, StzhMessageOpenEvent } from \"../../index\";\n\nimport { StzhMessageLocalizedText } from \"./stzh-message.localization\";\n\n/\n @slot - Slot for trusted rich description content (only used when the description property is empty)\n * @slot label - Slot for label (use as alternative for property)\n * @slot link - Slot for optional stzh-link element\n /\n@Component({\n tag: \"stzh-message\",\n styleUrl: \"stzh-message.scss\",\n scoped: true,\n})\nexport class StzhMessage {\n /* Label (slot can also be used as alternative) /\n @Prop() label: string = \"\";\n\n /* Plain text description. If set, this takes precedence over the default slot. /\n @Prop() description: string = \"\";\n\n /* Type /\n /* Do not use page-message property. It will be deprecated with the next major release. /\n @Prop({ reflect: true }) type: \"info\" \| \"success\" \| \"warning\" \| \"error\" \| \"page-message\" = \"info\";\n\n /* Whether to hide close button /\n @Prop() hideClose: boolean = false;\n\n /* Translation strings. /\n @Prop() localization: StzhMessageLocalizedText;\n\n /* Message open event /\n @Event() stzhOpen: EventEmitter<StzhMessageOpenEvent>;\n\n /* Message close event /\n @Event() stzhClose: EventEmitter<StzhMessageCloseEvent>;\n\n @Element() element: HTMLStzhMessageElement;\n\n /* Open state */\n @State() open: boolean = true;\n\n @Method()\n async show() {\n this.open = true;\n this.stzhOpen.emit({\n component: \"stzh-message\",\n });\n }\n\n @Method()\n async hide() {\n this.open = false;\n this.stzhClose.emit({\n component: \"stzh-message\",\n });\n }\n\n private onCloseButtonClick = () => {\n this.hide();\n };\n\n async componentWillLoad() {\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"message\");\n }\n }\n\n render() {\n const classes = {\n \"stzh-message\": true,\n \"stzh-message--has-close-hidden\": this.hideClose,\n [`stzh-message--type-${this.type}`]: !!this.type,\n };\n\n return (\n <Host hidden={!this.open}>\n <div class={classes}>\n <div class=\"stzh-message__content\">\n <div class=\"stzh-message__icon-wrapper\">\n <stzh-icon\n class=\"stzh-message__icon\"\n name={\n ((this.type === \"info\" \|\| this.type === \"page-message\") && \"info-help-filled\") \|\|\n (this.type === \"success\" && \"checkmark-circle-filled\") \|\|\n (this.type === \"warning\" && \"important-warning-filled\") \|\|\n (this.type === \"error\" && \"warning-filled\")\n }\n ></stzh-icon>\n </div>\n <div class=\"stzh-message__text-wrapper\">\n <div class=\"stzh-message__label\">\n {this.label ? <strong>{this.label}</strong> : <slot name=\"label\"></slot>}\n </div>\n <div class=\"stzh-message__description\">\n {this.description ? (\n <stzh-text color=\"inherit\">\n <p>{this.description}</p>\n </stzh-text>\n ) : (\n <slot></slot>\n )}\n </div>\n <div class=\"stzh-message__link\">\n <slot name=\"link\"></slot>\n </div>\n </div>\n </div>\n\n {!this.hideClose && (\n <stzh-button\n class=\"stzh-message__close\"\n onClick={this.onCloseButtonClick}\n a11yLabel={this.localization.close}\n variant=\"tertiary\"\n size=\"small\"\n iconOnly={true}\n icon=\"close-big\"\n ></stzh-button>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/{p-DBAv0gnk.js → p-BMY0OZYH.js} RENAMED Viewed

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, e as Host, t as transformTag } from './p-Ct0XU0Xj.js';
+import { p as proxyCustomElement, H, h, e as Host, t as transformTag } from './p-C1U0z0e7.js';
 import { a as api } from './p-Cpg2gH_9.js';
 const stzhShowCss = () => `: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],:host[stzh-hidden]{display:none}: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{}: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}:host{--show-display:contents;--hide-display:none;--current-display:var(--hide-display);display:var(--current-display)}:host([mikro]){--current-display:var(--show-display)}:host([mikro=false]){--current-display:var(--hide-display)}@media screen and (min-width: 600px){:host([small]){--current-display:var(--show-display)}}@media screen and (min-width: 600px){:host([small=false]){--current-display:var(--hide-display)}}@media screen and (min-width: 900px){:host([medium]){--current-display:var(--show-display)}}@media screen and (min-width: 900px){:host([medium=false]){--current-display:var(--hide-display)}}@media screen and (min-width: 1260px){:host([large]){--current-display:var(--show-display)}}@media screen and (min-width: 1260px){:host([large=false]){--current-display:var(--hide-display)}}@media screen and (min-width: 1600px){:host([ultra]){--current-display:var(--show-display)}}@media screen and (min-width: 1600px){:host([ultra=false]){--current-display:var(--hide-display)}}`;
@@ -95,6 +95,6 @@ function defineCustomElement() {
 }
 export { StzhShow as S, defineCustomElement as d };
-//# sourceMappingURL=p-DBAv0gnk.js.map
+//# sourceMappingURL=p-BMY0OZYH.js.map
-//# sourceMappingURL=p-DBAv0gnk.js.map
+//# sourceMappingURL=p-BMY0OZYH.js.map

package/dist/components/{p-DBAv0gnk.js.map → p-BMY0OZYH.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-~~DBAv0gnk~~.js","mappings":";;;AAAA,MAAM,WAAW,GAAG,MAAM,CAAC,k3DAAk3D,CAAC;;ACM94D,MAAM,gBAAgB,GAAG,4BAA4B;MAUxC,QAAQ,iBAAAA,kBAAA,CAAA,MAAA,QAAA,SAAAC,CAAA,CAAA;AALrB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AA6BE;;;;;AAKG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAW,EAAE;AA2CrB,QAAA,IAAc,CAAA,cAAA,GAAY,KAAK;AAsBxC;AA9DC,IAAA,YAAY,CAAC,KAA0F,EAAA;AACrG,QAAA,IAAI,CAAC,aAAa,EAAE,cAAc,EAAE,gBAAgB,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE;AACtF,YAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACjB,gBAAAC,GAAM,CAAC,GAAG,CAAC,GAAG,gBAAgB,CAAA,CAAA,EAAI,IAAI,CAAC,QAAQ,EAAE,EAAE,IAAI,CAAC,GAAG,EAAE,CAAC,QAAQ,EAAE,CAAC;;;;AAM/E,IAAA,mBAAmB,CAAC,QAAuB,EAAA;AACzC,QAAA,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;AAChC,YAAA,IAAI,CAAC,aAAa,GAAG,QAAQ,GAAG,IAAI,IAAI,CAAC,QAAQ,CAAC,GAAG,IAAI;;aACpD;AACL,YAAA,IAAI,CAAC,aAAa,GAAG,QAAQ;;QAG/B,IAAI,cAAc,GAAG,KAAK;AAE1B,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACjB,YAAA,MAAM,UAAU,GAAGA,GAAM,CAAC,GAAG,CAAC,CAAA,EAAG,gBAAgB,CAAA,CAAA,EAAI,IAAI,CAAC,QAAQ,CAAA,CAAE,CAAC;YAErE,IAAI,UAAU,KAAK,CAAC,IAAI,CAAC,aAAa,IAAI,MAAM,CAAC,UAAU,CAAC,IAAI,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC,EAAE;gBAC7F,cAAc,GAAG,IAAI;;;AAIzB,QAAA,IAAI,CAAC,cAAc,GAAG,cAAc;;AAItC,IAAA,mBAAmB,CAAC,QAAuB,EAAA;AACzC,QAAA,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;AAChC,YAAA,IAAI,CAAC,aAAa,GAAG,QAAQ,GAAG,IAAI,IAAI,CAAC,QAAQ,CAAC,GAAG,IAAI;;aACpD;AACL,YAAA,IAAI,CAAC,aAAa,GAAG,QAAQ;;;IAQjC,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,YAAY,CAAC;AAC3C,QAAA,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,YAAY,CAAC;;IAG7C,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,EAAE;QAE1B,QACE,CAAC,CAAA,IAAI,qDACH,MAAM,EACJ,CAAC,IAAI,CAAC,aAAa,IAAI,OAAO,IAAI,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE;AAC9D,iBAAC,IAAI,CAAC,aAAa,IAAI,OAAO,IAAI,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC;AAC/D,gBAAA,IAAI,CAAC,cAAc,EAAA,EAGrB,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement","Cookie"],"sources":["src/components/stzh-show/stzh-show.scss?tag=stzh-show&encapsulation=shadow","src/components/stzh-show/stzh-show.tsx"],"sourcesContent":["/*\n @prop --show-display: Display value that is used when content is shown (default `block`)\n * @prop --hide-display: Display value that is used when content is hidden (default `none`)\n * @prop --current-display: Current display value (readonly)\n /\n\n:host {\n --show-display: contents;\n --hide-display: none;\n --current-display: var(--hide-display);\n\n display: var(--current-display);\n}\n\n/ Mikro /\n\n:host([mikro]) {\n --current-display: var(--show-display);\n}\n\n:host([mikro=\"false\"]) {\n --current-display: var(--hide-display);\n}\n\n/ Small /\n\n:host([small]) {\n @include mq($from: small) {\n --current-display: var(--show-display);\n }\n}\n\n:host([small=\"false\"]) {\n @include mq($from: small) {\n --current-display: var(--hide-display);\n }\n}\n\n/ Medium /\n\n:host([medium]) {\n @include mq($from: medium) {\n --current-display: var(--show-display);\n }\n}\n\n:host([medium=\"false\"]) {\n @include mq($from: medium) {\n --current-display: var(--hide-display);\n }\n}\n\n/ Large /\n\n:host([large]) {\n @include mq($from: large) {\n --current-display: var(--show-display);\n }\n}\n\n:host([large=\"false\"]) {\n @include mq($from: large) {\n --current-display: var(--hide-display);\n }\n}\n\n/ Ultra /\n\n:host([ultra]) {\n @include mq($from: ultra) {\n --current-display: var(--show-display);\n }\n}\n\n:host([ultra=\"false\"]) {\n @include mq($from: ultra) {\n --current-display: var(--hide-display);\n }\n}\n","import { Component, Host, h, Element, Prop, Watch, Listen } from \"@stencil/core\";\n\nimport { StzhBannerCloseEvent, StzhGhettoboxCloseEvent, StzhMessageCloseEvent } from \"../../index\";\n\nimport Cookie from \"js-cookie\";\n\nconst KEY_PREFIX_CLOSE = \"stzh-components-show-close\";\n\n/\n @slot - Slot for any content\n /\n@Component({\n tag: \"stzh-show\",\n styleUrl: \"stzh-show.scss\",\n shadow: true,\n})\nexport class StzhShow {\n /* Mikro /\n @Prop({ reflect: true }) mikro: boolean;\n\n /* Small /\n @Prop({ reflect: true }) small: boolean;\n\n /* Medium /\n @Prop({ reflect: true }) medium: boolean;\n\n /* Large /\n @Prop({ reflect: true }) large: boolean;\n\n /* Ultra /\n @Prop({ reflect: true }) ultra: boolean;\n\n /* Show from date /\n @Prop() showFromDate: Date \| string;\n private _showFromDate: Date;\n\n /* Hide from date /\n @Prop() hideFromDate: Date \| string;\n private _hideFromDate: Date;\n\n /\n Close cookie name key.\n * Component will check for the cookie (stzh-components-show-close-{name})\n * and if not empty (component inside already closed before) will hide show.\n * Will also compare with showFromDate if given, to make sure cookie was set after showFromDate (otherwise will show again).\n */\n @Prop() closeKey: string = \"\";\n\n @Listen(\"stzhClose\")\n closeWatcher(event: CustomEvent<StzhBannerCloseEvent \| StzhMessageCloseEvent \| StzhGhettoboxCloseEvent>) {\n if ([\"stzh-banner\", \"stzh-message\", \"stzh-ghettobox\"].includes(event.detail.component)) {\n if (this.closeKey) {\n Cookie.set(`${KEY_PREFIX_CLOSE}-${this.closeKey}`, Date.now().toString());\n }\n }\n }\n\n @Watch(\"showFromDate\")\n showFromDateWatcher(newValue: Date \| string) {\n if (typeof newValue === \"string\") {\n this._showFromDate = newValue ? new Date(newValue) : null;\n } else {\n this._showFromDate = newValue;\n }\n\n let closedByCookie = false;\n\n if (this.closeKey) {\n const timeClosed = Cookie.get(`${KEY_PREFIX_CLOSE}-${this.closeKey}`);\n\n if (timeClosed && (!this._showFromDate \|\| Number(timeClosed) >= this._showFromDate.getTime())) {\n closedByCookie = true;\n }\n }\n\n this.closedByCookie = closedByCookie;\n }\n\n @Watch(\"hideFromDate\")\n hideFromDateWatcher(newValue: Date \| string) {\n if (typeof newValue === \"string\") {\n this._hideFromDate = newValue ? new Date(newValue) : null;\n } else {\n this._hideFromDate = newValue;\n }\n }\n\n @Element() element: HTMLStzhShowElement;\n\n private closedByCookie: boolean = false;\n\n componentWillLoad() {\n this.showFromDateWatcher(this.showFromDate);\n this.hideFromDateWatcher(this.hideFromDate);\n }\n\n render() {\n const timeNow = Date.now();\n\n return (\n <Host\n hidden={\n (this._showFromDate && timeNow <= this._showFromDate.getTime()) \|\|\n (this._hideFromDate && timeNow >= this._hideFromDate.getTime()) \|\|\n this.closedByCookie\n }\n >\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-BMY0OZYH.js","mappings":";;;AAAA,MAAM,WAAW,GAAG,MAAM,CAAC,k3DAAk3D,CAAC;;ACM94D,MAAM,gBAAgB,GAAG,4BAA4B;MAUxC,QAAQ,iBAAAA,kBAAA,CAAA,MAAA,QAAA,SAAAC,CAAA,CAAA;AALrB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AA6BE;;;;;AAKG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAW,EAAE;AA2CrB,QAAA,IAAc,CAAA,cAAA,GAAY,KAAK;AAsBxC;AA9DC,IAAA,YAAY,CAAC,KAA0F,EAAA;AACrG,QAAA,IAAI,CAAC,aAAa,EAAE,cAAc,EAAE,gBAAgB,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE;AACtF,YAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACjB,gBAAAC,GAAM,CAAC,GAAG,CAAC,GAAG,gBAAgB,CAAA,CAAA,EAAI,IAAI,CAAC,QAAQ,EAAE,EAAE,IAAI,CAAC,GAAG,EAAE,CAAC,QAAQ,EAAE,CAAC;;;;AAM/E,IAAA,mBAAmB,CAAC,QAAuB,EAAA;AACzC,QAAA,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;AAChC,YAAA,IAAI,CAAC,aAAa,GAAG,QAAQ,GAAG,IAAI,IAAI,CAAC,QAAQ,CAAC,GAAG,IAAI;;aACpD;AACL,YAAA,IAAI,CAAC,aAAa,GAAG,QAAQ;;QAG/B,IAAI,cAAc,GAAG,KAAK;AAE1B,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACjB,YAAA,MAAM,UAAU,GAAGA,GAAM,CAAC,GAAG,CAAC,CAAA,EAAG,gBAAgB,CAAA,CAAA,EAAI,IAAI,CAAC,QAAQ,CAAA,CAAE,CAAC;YAErE,IAAI,UAAU,KAAK,CAAC,IAAI,CAAC,aAAa,IAAI,MAAM,CAAC,UAAU,CAAC,IAAI,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC,EAAE;gBAC7F,cAAc,GAAG,IAAI;;;AAIzB,QAAA,IAAI,CAAC,cAAc,GAAG,cAAc;;AAItC,IAAA,mBAAmB,CAAC,QAAuB,EAAA;AACzC,QAAA,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;AAChC,YAAA,IAAI,CAAC,aAAa,GAAG,QAAQ,GAAG,IAAI,IAAI,CAAC,QAAQ,CAAC,GAAG,IAAI;;aACpD;AACL,YAAA,IAAI,CAAC,aAAa,GAAG,QAAQ;;;IAQjC,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,YAAY,CAAC;AAC3C,QAAA,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,YAAY,CAAC;;IAG7C,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,EAAE;QAE1B,QACE,CAAC,CAAA,IAAI,qDACH,MAAM,EACJ,CAAC,IAAI,CAAC,aAAa,IAAI,OAAO,IAAI,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE;AAC9D,iBAAC,IAAI,CAAC,aAAa,IAAI,OAAO,IAAI,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC;AAC/D,gBAAA,IAAI,CAAC,cAAc,EAAA,EAGrB,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement","Cookie"],"sources":["src/components/stzh-show/stzh-show.scss?tag=stzh-show&encapsulation=shadow","src/components/stzh-show/stzh-show.tsx"],"sourcesContent":["/*\n @prop --show-display: Display value that is used when content is shown (default `block`)\n * @prop --hide-display: Display value that is used when content is hidden (default `none`)\n * @prop --current-display: Current display value (readonly)\n /\n\n:host {\n --show-display: contents;\n --hide-display: none;\n --current-display: var(--hide-display);\n\n display: var(--current-display);\n}\n\n/ Mikro /\n\n:host([mikro]) {\n --current-display: var(--show-display);\n}\n\n:host([mikro=\"false\"]) {\n --current-display: var(--hide-display);\n}\n\n/ Small /\n\n:host([small]) {\n @include mq($from: small) {\n --current-display: var(--show-display);\n }\n}\n\n:host([small=\"false\"]) {\n @include mq($from: small) {\n --current-display: var(--hide-display);\n }\n}\n\n/ Medium /\n\n:host([medium]) {\n @include mq($from: medium) {\n --current-display: var(--show-display);\n }\n}\n\n:host([medium=\"false\"]) {\n @include mq($from: medium) {\n --current-display: var(--hide-display);\n }\n}\n\n/ Large /\n\n:host([large]) {\n @include mq($from: large) {\n --current-display: var(--show-display);\n }\n}\n\n:host([large=\"false\"]) {\n @include mq($from: large) {\n --current-display: var(--hide-display);\n }\n}\n\n/ Ultra /\n\n:host([ultra]) {\n @include mq($from: ultra) {\n --current-display: var(--show-display);\n }\n}\n\n:host([ultra=\"false\"]) {\n @include mq($from: ultra) {\n --current-display: var(--hide-display);\n }\n}\n","import { Component, Host, h, Element, Prop, Watch, Listen } from \"@stencil/core\";\n\nimport { StzhBannerCloseEvent, StzhGhettoboxCloseEvent, StzhMessageCloseEvent } from \"../../index\";\n\nimport Cookie from \"js-cookie\";\n\nconst KEY_PREFIX_CLOSE = \"stzh-components-show-close\";\n\n/\n @slot - Slot for any content\n /\n@Component({\n tag: \"stzh-show\",\n styleUrl: \"stzh-show.scss\",\n shadow: true,\n})\nexport class StzhShow {\n /* Mikro /\n @Prop({ reflect: true }) mikro: boolean;\n\n /* Small /\n @Prop({ reflect: true }) small: boolean;\n\n /* Medium /\n @Prop({ reflect: true }) medium: boolean;\n\n /* Large /\n @Prop({ reflect: true }) large: boolean;\n\n /* Ultra /\n @Prop({ reflect: true }) ultra: boolean;\n\n /* Show from date /\n @Prop() showFromDate: Date \| string;\n private _showFromDate: Date;\n\n /* Hide from date /\n @Prop() hideFromDate: Date \| string;\n private _hideFromDate: Date;\n\n /\n Close cookie name key.\n * Component will check for the cookie (stzh-components-show-close-{name})\n * and if not empty (component inside already closed before) will hide show.\n * Will also compare with showFromDate if given, to make sure cookie was set after showFromDate (otherwise will show again).\n */\n @Prop() closeKey: string = \"\";\n\n @Listen(\"stzhClose\")\n closeWatcher(event: CustomEvent<StzhBannerCloseEvent \| StzhMessageCloseEvent \| StzhGhettoboxCloseEvent>) {\n if ([\"stzh-banner\", \"stzh-message\", \"stzh-ghettobox\"].includes(event.detail.component)) {\n if (this.closeKey) {\n Cookie.set(`${KEY_PREFIX_CLOSE}-${this.closeKey}`, Date.now().toString());\n }\n }\n }\n\n @Watch(\"showFromDate\")\n showFromDateWatcher(newValue: Date \| string) {\n if (typeof newValue === \"string\") {\n this._showFromDate = newValue ? new Date(newValue) : null;\n } else {\n this._showFromDate = newValue;\n }\n\n let closedByCookie = false;\n\n if (this.closeKey) {\n const timeClosed = Cookie.get(`${KEY_PREFIX_CLOSE}-${this.closeKey}`);\n\n if (timeClosed && (!this._showFromDate \|\| Number(timeClosed) >= this._showFromDate.getTime())) {\n closedByCookie = true;\n }\n }\n\n this.closedByCookie = closedByCookie;\n }\n\n @Watch(\"hideFromDate\")\n hideFromDateWatcher(newValue: Date \| string) {\n if (typeof newValue === \"string\") {\n this._hideFromDate = newValue ? new Date(newValue) : null;\n } else {\n this._hideFromDate = newValue;\n }\n }\n\n @Element() element: HTMLStzhShowElement;\n\n private closedByCookie: boolean = false;\n\n componentWillLoad() {\n this.showFromDateWatcher(this.showFromDate);\n this.hideFromDateWatcher(this.hideFromDate);\n }\n\n render() {\n const timeNow = Date.now();\n\n return (\n <Host\n hidden={\n (this._showFromDate && timeNow <= this._showFromDate.getTime()) \|\|\n (this._hideFromDate && timeNow >= this._hideFromDate.getTime()) \|\|\n this.closedByCookie\n }\n >\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/{p-DpRn3ACG.js → p-BWWR7g-q.js} RENAMED Viewed

@@ -1,10 +1,10 @@
-import { p as proxyCustomElement, H, h, e as Host, t as transformTag } from './p-Ct0XU0Xj.js';
+import { p as proxyCustomElement, H, h, e as Host, t as transformTag } from './p-C1U0z0e7.js';
 import { e as abbreviateText, j as getMeta } from './p-Dk-EHN3E.js';
-import { d as defineCustomElement$5 } from './p-BC5CKnR0.js';
-import { d as defineCustomElement$4 } from './p-kc3jagy9.js';
-import { d as defineCustomElement$3 } from './p-C5BMqKn_.js';
-import { d as defineCustomElement$2 } from './p-CgQ_cBIG.js';
-import { d as defineCustomElement$1 } from './p-C7BHBfNV.js';
+import { d as defineCustomElement$5 } from './p-ndh9Y2u_.js';
+import { d as defineCustomElement$4 } from './p-D0sPQTAC.js';
+import { d as defineCustomElement$3 } from './p-CuGNlsAf.js';
+import { d as defineCustomElement$2 } from './p-BaQRAFeH.js';
+import { d as defineCustomElement$1 } from './p-g99SJmS9.js';
 const stzhShareCss = () => `.sc-stzh-share-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-share-h,[stzh-hidden].sc-stzh-share-h{display:none}.sc-stzh-share-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-share-h *.sc-stzh-share,.sc-stzh-share-h *.sc-stzh-share::before,.sc-stzh-share-h *.sc-stzh-share::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-share-h .has-focus.sc-stzh-share{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-share-h .stzh-fylingfocus-focused.sc-stzh-share{outline-style:none !important}.sc-stzh-share-h .stzh-fylingfocus-focused.sc-stzh-share::-moz-focus-inner{border:0 !important}.stzh-share__list.sc-stzh-share{list-style:none;margin:0;padding:0;display:flex}.stzh-share__item.sc-stzh-share:not(:last-child){margin-right:var(--stzh-space-xxsmall)}`;
@@ -147,6 +147,6 @@ function defineCustomElement() {
 }
 export { StzhShare as S, defineCustomElement as d };
-//# sourceMappingURL=p-DpRn3ACG.js.map
+//# sourceMappingURL=p-BWWR7g-q.js.map
-//# sourceMappingURL=p-DpRn3ACG.js.map
+//# sourceMappingURL=p-BWWR7g-q.js.map

package/dist/components/{p-DpRn3ACG.js.map → p-BWWR7g-q.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-~~DpRn3ACG~~.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-share/stzh-share.scss?tag=stzh-share&encapsulation=scoped","src/components/stzh-share/stzh-share.tsx"],"sourcesContent":[":host {\n}\n\n.stzh-share {\n &__list {\n list-style: none;\n margin: 0;\n padding: 0;\n display: flex;\n }\n\n &__item {\n &:not(:last-child) {\n margin-right: space(\"xxsmall\");\n }\n }\n}\n","import { Component, Host, h, Element, Prop, Watch } from \"@stencil/core\";\n\nimport { ShareService } from \"../../index\";\nimport { StzhShareLocalizedText } from \"./stzh-share.localization\";\nimport { getMeta } from \"../../utils/utils\";\nimport { abbreviateText } from \"../../utils/string-utils\";\n\n// 280 - URL (always 24) = 256\nconst MAX_TWEET_LENGTH = 256;\n\n/*\n /\n@Component({\n tag: \"stzh-share\",\n styleUrl: \"stzh-share.scss\",\n scoped: true,\n})\nexport class StzhShare {\n /** Translation strings /\n @Prop() localization: StzhShareLocalizedText;\n\n /* URL of current site (uses full URL by default) /\n @Prop() url: string = window.location.href;\n\n /* Overwrite mail subject translation /\n @Prop() mailSubject: string;\n\n /* Overwrite mail body translation /\n @Prop() mailBody: string;\n\n /\n Array of enabled share buttons.\n * Possible services: `facebook` / `twitter` / `linkedin` / `xing` / `mail`\n */\n @Prop() services: ShareService[] \| string = [\"mail\", \"facebook\", \"twitter\", \"linkedin\", \"xing\"];\n\n private _services: ShareService[] = [];\n\n @Watch(\"services\")\n servicesWatcher(newValue: ShareService[] \| string) {\n if (typeof newValue === \"string\") {\n this._services = JSON.parse(newValue);\n } else {\n this._services = newValue;\n }\n }\n\n @Element() element: HTMLStzhShareElement;\n\n private openPopup = (url, event) => {\n event.preventDefault();\n window.open(url, \"_blank\", \"width=600,height=460\");\n };\n\n async componentWillLoad() {\n this.servicesWatcher(this.services);\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"share\");\n }\n }\n\n render() {\n const classes = {\n \"stzh-share\": true,\n };\n\n const shareUrl = encodeURIComponent(this.url);\n const mailSubject = encodeURIComponent(this.mailSubject \|\| this.localization.mailSubject);\n const mailBody = encodeURIComponent(\n (this.mailBody \|\| this.localization.mailBody)?.replace(/\\{shareUrl\\}/gi, this.url),\n );\n\n const title = encodeURIComponent(document.title);\n const twitterTitle = encodeURIComponent(abbreviateText(title, MAX_TWEET_LENGTH));\n const description = encodeURIComponent(getMeta(\"description\"));\n\n const serviceData = {\n mail: {\n popup: false,\n blank: false,\n url: `mailto:?subject=${mailSubject}&body=${mailBody}`,\n text: this.localization.shareMail,\n icon: \"mail\",\n },\n facebook: {\n popup: true,\n blank: true,\n url: `https://www.facebook.com/sharer/sharer.php?u=${shareUrl}`,\n text: this.localization.shareFacebook,\n icon: \"facebook\",\n },\n twitter: {\n popup: true,\n blank: true,\n url: `https://twitter.com/intent/tweet?text=${twitterTitle}&url=${shareUrl}`,\n text: this.localization.shareTwitter,\n icon: \"twitter\",\n },\n linkedin: {\n popup: true,\n blank: true,\n url: `https://www.linkedin.com/shareArticle?mini=true&summary=${description}&title=${title}&url=${shareUrl}`,\n text: this.localization.shareLinkedin,\n icon: \"linkedin\",\n },\n xing: {\n popup: true,\n blank: true,\n url: `https://www.xing.com/spi/shares/new?url=${shareUrl}`,\n text: this.localization.shareXing,\n icon: \"xing\",\n },\n };\n\n return (\n <Host>\n <div class={classes}>\n <ul class=\"stzh-share__list\">\n {this._services.map(service => (\n <li class=\"stzh-share__item\">\n <stzh-tooltip content={serviceData[service].text} size=\"small\">\n <stzh-button\n class={`stzh-share__button is-${service}`}\n size=\"small\"\n variant=\"tertiary\"\n iconOnly={true}\n href={serviceData[service].url}\n rel={serviceData[service].blank ? \"nofollow noopener noreferrer\" : \"nofollow\"}\n target={serviceData[service].blank ? \"_blank\" : \"_self\"}\n onClick={serviceData[service].popup ? e => this.openPopup(serviceData[service].url, e) : null}\n analyticsId={serviceData[service].text}\n icon={serviceData[service].icon}\n ></stzh-button>\n </stzh-tooltip>\n </li>\n ))}\n </ul>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-BWWR7g-q.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-share/stzh-share.scss?tag=stzh-share&encapsulation=scoped","src/components/stzh-share/stzh-share.tsx"],"sourcesContent":[":host {\n}\n\n.stzh-share {\n &__list {\n list-style: none;\n margin: 0;\n padding: 0;\n display: flex;\n }\n\n &__item {\n &:not(:last-child) {\n margin-right: space(\"xxsmall\");\n }\n }\n}\n","import { Component, Host, h, Element, Prop, Watch } from \"@stencil/core\";\n\nimport { ShareService } from \"../../index\";\nimport { StzhShareLocalizedText } from \"./stzh-share.localization\";\nimport { getMeta } from \"../../utils/utils\";\nimport { abbreviateText } from \"../../utils/string-utils\";\n\n// 280 - URL (always 24) = 256\nconst MAX_TWEET_LENGTH = 256;\n\n/*\n /\n@Component({\n tag: \"stzh-share\",\n styleUrl: \"stzh-share.scss\",\n scoped: true,\n})\nexport class StzhShare {\n /** Translation strings /\n @Prop() localization: StzhShareLocalizedText;\n\n /* URL of current site (uses full URL by default) /\n @Prop() url: string = window.location.href;\n\n /* Overwrite mail subject translation /\n @Prop() mailSubject: string;\n\n /* Overwrite mail body translation /\n @Prop() mailBody: string;\n\n /\n Array of enabled share buttons.\n * Possible services: `facebook` / `twitter` / `linkedin` / `xing` / `mail`\n */\n @Prop() services: ShareService[] \| string = [\"mail\", \"facebook\", \"twitter\", \"linkedin\", \"xing\"];\n\n private _services: ShareService[] = [];\n\n @Watch(\"services\")\n servicesWatcher(newValue: ShareService[] \| string) {\n if (typeof newValue === \"string\") {\n this._services = JSON.parse(newValue);\n } else {\n this._services = newValue;\n }\n }\n\n @Element() element: HTMLStzhShareElement;\n\n private openPopup = (url, event) => {\n event.preventDefault();\n window.open(url, \"_blank\", \"width=600,height=460\");\n };\n\n async componentWillLoad() {\n this.servicesWatcher(this.services);\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"share\");\n }\n }\n\n render() {\n const classes = {\n \"stzh-share\": true,\n };\n\n const shareUrl = encodeURIComponent(this.url);\n const mailSubject = encodeURIComponent(this.mailSubject \|\| this.localization.mailSubject);\n const mailBody = encodeURIComponent(\n (this.mailBody \|\| this.localization.mailBody)?.replace(/\\{shareUrl\\}/gi, this.url),\n );\n\n const title = encodeURIComponent(document.title);\n const twitterTitle = encodeURIComponent(abbreviateText(title, MAX_TWEET_LENGTH));\n const description = encodeURIComponent(getMeta(\"description\"));\n\n const serviceData = {\n mail: {\n popup: false,\n blank: false,\n url: `mailto:?subject=${mailSubject}&body=${mailBody}`,\n text: this.localization.shareMail,\n icon: \"mail\",\n },\n facebook: {\n popup: true,\n blank: true,\n url: `https://www.facebook.com/sharer/sharer.php?u=${shareUrl}`,\n text: this.localization.shareFacebook,\n icon: \"facebook\",\n },\n twitter: {\n popup: true,\n blank: true,\n url: `https://twitter.com/intent/tweet?text=${twitterTitle}&url=${shareUrl}`,\n text: this.localization.shareTwitter,\n icon: \"twitter\",\n },\n linkedin: {\n popup: true,\n blank: true,\n url: `https://www.linkedin.com/shareArticle?mini=true&summary=${description}&title=${title}&url=${shareUrl}`,\n text: this.localization.shareLinkedin,\n icon: \"linkedin\",\n },\n xing: {\n popup: true,\n blank: true,\n url: `https://www.xing.com/spi/shares/new?url=${shareUrl}`,\n text: this.localization.shareXing,\n icon: \"xing\",\n },\n };\n\n return (\n <Host>\n <div class={classes}>\n <ul class=\"stzh-share__list\">\n {this._services.map(service => (\n <li class=\"stzh-share__item\">\n <stzh-tooltip content={serviceData[service].text} size=\"small\">\n <stzh-button\n class={`stzh-share__button is-${service}`}\n size=\"small\"\n variant=\"tertiary\"\n iconOnly={true}\n href={serviceData[service].url}\n rel={serviceData[service].blank ? \"nofollow noopener noreferrer\" : \"nofollow\"}\n target={serviceData[service].blank ? \"_blank\" : \"_self\"}\n onClick={serviceData[service].popup ? e => this.openPopup(serviceData[service].url, e) : null}\n analyticsId={serviceData[service].text}\n icon={serviceData[service].icon}\n ></stzh-button>\n </stzh-tooltip>\n </li>\n ))}\n </ul>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/{p-CZ8Mjvap.js → p-BYV94voK.js} RENAMED Viewed

@@ -1,12 +1,12 @@
-import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-Ct0XU0Xj.js';
+import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-C1U0z0e7.js';
 import { m as media, a as addMediaChangeListener, r as removeMediaChangeListener } from './p-CUGRmgip.js';
-import { d as defineCustomElement$7 } from './p-BC5CKnR0.js';
-import { d as defineCustomElement$6 } from './p-kc3jagy9.js';
-import { d as defineCustomElement$5 } from './p-CwBTEkzx.js';
-import { d as defineCustomElement$4 } from './p-C5BMqKn_.js';
-import { d as defineCustomElement$3 } from './p-DhS6kKt0.js';
-import { d as defineCustomElement$2 } from './p-CgQ_cBIG.js';
-import { d as defineCustomElement$1 } from './p-C7BHBfNV.js';
+import { d as defineCustomElement$7 } from './p-ndh9Y2u_.js';
+import { d as defineCustomElement$6 } from './p-D0sPQTAC.js';
+import { d as defineCustomElement$5 } from './p-C4ug0GfL.js';
+import { d as defineCustomElement$4 } from './p-CuGNlsAf.js';
+import { d as defineCustomElement$3 } from './p-CCOQ6qgQ.js';
+import { d as defineCustomElement$2 } from './p-BaQRAFeH.js';
+import { d as defineCustomElement$1 } from './p-g99SJmS9.js';
 const stzhDatalistCss = () => `.sc-stzh-datalist-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-datalist-h,[stzh-hidden].sc-stzh-datalist-h{display:none}.sc-stzh-datalist-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-datalist-h *.sc-stzh-datalist,.sc-stzh-datalist-h *.sc-stzh-datalist::before,.sc-stzh-datalist-h *.sc-stzh-datalist::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-datalist-h .has-focus.sc-stzh-datalist{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-datalist-h .stzh-fylingfocus-focused.sc-stzh-datalist{outline-style:none !important}.sc-stzh-datalist-h .stzh-fylingfocus-focused.sc-stzh-datalist::-moz-focus-inner{border:0 !important}.sc-stzh-datalist-h{--columns:1;--columns-gap:var(--stzh-grid-gutter);--list-display:grid;--list-margin-right:calc(var(--columns-gap) / -1);--list-grid-template-columns:repeat(
     var(--columns),
@@ -274,6 +274,6 @@ function defineCustomElement() {
 }
 export { StzhDatalist as S, defineCustomElement as d };
-//# sourceMappingURL=p-CZ8Mjvap.js.map
+//# sourceMappingURL=p-BYV94voK.js.map
-//# sourceMappingURL=p-CZ8Mjvap.js.map
+//# sourceMappingURL=p-BYV94voK.js.map

package/dist/components/{p-CZ8Mjvap.js.map → p-BYV94voK.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-CZ8Mjvap.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-datalist/stzh-datalist.scss?tag=stzh-datalist&encapsulation=scoped","src/components/stzh-datalist/stzh-datalist.tsx"],"sourcesContent":[":host {\n --columns: 1;\n --columns-gap: #{$gridGutter};\n --list-display: grid;\n --list-margin-right: calc(var(--columns-gap) / -1);\n --list-grid-template-columns: repeat(\n var(--columns),\n auto minmax(auto, 1fr) auto var(--columns-gap)\n );\n --full-grid-column: 1 / 5;\n --nested-margin-left: var(--stzh-datalist-nested-margin-left, 0px);\n --details-content-width: var(--stzh-datalist-details-content-width, 100%);\n\n --grid-template-areas: var(\n --stzh-datalist-grid-template-areas,\n \"list list list list\"\n );\n\n --grid-template-columns: var(\n --stzh-datalist-grid-template-columns,\n #{$gridColumns}\n );\n\n margin-left: var(--nested-margin-left);\n\n @include mq($from: small) {\n --columns-gap: #{$gridGutterSmall};\n\n --grid-template-areas: var(\n --stzh-datalist-grid-template-areas,\n \"list list list list\"\n );\n }\n\n @include mq($from: medium) {\n --columns-gap: #{$gridGutterMedium};\n\n --grid-template-areas: var(\n --stzh-datalist-grid-template-areas,\n \"list list list list list list list list\"\n );\n\n --grid-template-columns: var(\n --stzh-datalist-grid-template-columns,\n #{$gridColumnsMedium}\n );\n }\n\n @include mq($from: large) {\n --columns-gap: #{$gridGutterLarge};\n }\n\n @include mq($from: ultra) {\n --columns-gap: #{$gridGutterUltra};\n }\n // datalist-item or wrapper elements should be set to display: contents to make grid layout work.\n // in AEM edit mode: we prevent setting it, so the links can still be edited.\n\n ::slotted(.layout_column) > :not([class=\"cq-\"]),\n ::slotted(:not([class=\"cq-\"])) {\n display: contents;\n }\n\n &[is-direction=\"horizontal\"] {\n --list-grid-template-columns: repeat(\n var(--columns),\n auto minmax(auto, 1fr) auto auto var(--columns-gap)\n );\n --full-grid-column: 1 / 6;\n\n &:where(:has(stzh-datalist-item:not([meta=\"\"]))),\n &:where(:has(stzh-datalist-item:not([status-label=\"\"]))) {\n --list-grid-template-columns: repeat(\n var(--columns),\n auto minmax(auto, 1fr) minmax(auto, 1fr) auto var(--columns-gap)\n );\n }\n }\n\n &[variant=\"table\"] {\n --list-grid-template-columns: repeat(\n var(--columns),\n auto auto minmax(auto, 1fr) auto auto var(--columns-gap)\n );\n --full-grid-column: 1 / 7;\n\n &:where(:has(stzh-datalist-item:not([meta=\"\"]))),\n &:where(:has(stzh-datalist-item:not([status-label=\"\"]))) {\n --list-grid-template-columns: repeat(\n var(--columns),\n auto auto minmax(auto, 1fr) minmax(auto, 1fr) auto var(--columns-gap)\n );\n }\n }\n\n &[vertical-gap=\"small\"] {\n .stzh-datalist__list {\n grid-template-rows: auto;\n @include mq($to: medium) {\n row-gap: space(\"xsmall\");\n }\n @include mq($from: medium) {\n row-gap: space(\"xxsmall\");\n }\n }\n }\n}\n\n/* AEM edit mode: we set list as block element (always as one column), to prevent layout breaks /\n\n:host(:has([class=\"cq-\"])) {\n --stzh-datalist-item-wrapper-display: flex;\n\n --list-display: block;\n --list-margin-right: 0;\n}\n\n.stzh-datalist {\n // offset margin of nested datalist\n --stzh-datalist-nested-margin-left: #{space(\"large\")};\n // details grid columns\n --stzh-details-content-grid-column: var(--full-grid-column);\n --stzh-details-content-padding-right: var(--columns-gap);\n --stzh-details-content-width: var(--details-content-width);\n\n @include gridGutter;\n display: grid;\n grid-template-areas: var(--grid-template-areas);\n grid-template-columns: var(--grid-template-columns);\n\n &__wrapper {\n grid-area: list;\n overflow: visible;\n }\n\n &__list {\n display: var(--list-display);\n border-collapse: collapse;\n grid-template-columns: var(--list-grid-template-columns);\n align-items: stretch;\n margin-right: var(--list-margin-right);\n }\n\n /* Multiple Columns /\n\n &--has-multiple-columns {\n // display of nested datalist\n --stzh-datalist-item-nested-display: none;\n }\n\n / Table variant with big label /\n\n &--table#{&}--big-label &__list {\n @include mq($to: small) {\n --list-display: flex;\n flex-direction: column;\n gap: space(\"xxxsmall\");\n }\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from \"@stencil/core\";\n\nimport {\n StzhDatalistBigLabelChangeEvent,\n StzhDatalistDirection,\n StzhDatalistDirectionChangeEvent,\n StzhDatalistItemEntry,\n StzhDatalistVariant,\n StzhDatalistVariantChangeEvent,\n} from \"../../index\";\n\nimport { addMediaChangeListener, media, removeMediaChangeListener } from \"../../utils/media-utils\";\n\n/\n @slot - Slot for any content\n /\n@Component({\n tag: \"stzh-datalist\",\n styleUrl: \"stzh-datalist.scss\",\n scoped: true,\n})\nexport class StzhDatalist {\n /* Variant /\n @Prop({ reflect: true }) variant: StzhDatalistVariant = \"default\";\n\n /* With big label /\n @Prop({ reflect: true }) bigLabel: boolean = false;\n\n /* Columns /\n @Prop({ reflect: true }) columns: number = 1;\n\n /* Columns above small breakpoint /\n @Prop({ reflect: true }) columnsSmall: number;\n\n /* Columns above medium breakpoint /\n @Prop({ reflect: true }) columnsMedium: number;\n\n /* Columns above large breakpoint /\n @Prop({ reflect: true }) columnsLarge: number;\n\n /* Columns above ultra breakpoint /\n @Prop({ reflect: true }) columnsUltra: number;\n\n /* Direction /\n @Prop({ reflect: true }) direction: StzhDatalistDirection = \"vertical\";\n\n /* Direction above small breakpoint /\n @Prop({ reflect: true }) directionSmall: StzhDatalistDirection;\n\n /* Direction above medium breakpoint /\n @Prop({ reflect: true }) directionMedium: StzhDatalistDirection;\n\n /* Direction above large breakpoint /\n @Prop({ reflect: true }) directionLarge: StzhDatalistDirection;\n\n /* Direction above ultra breakpoint /\n @Prop({ reflect: true }) directionUltra: StzhDatalistDirection;\n /Vertical Gap between items /\n @Prop({ reflect: true }) verticalGap: \"default\" \| \"small\" = \"default\";\n\n /*\n Items in datalist\n * Array of objects that must at least include `value` attribute.\n * Can optionally contain `leadingIcon`, `label`, `a11yLabel`, `meta`, `icon`, `iconLabel`, `iconTooltip`, `href`, `statusLabel`, `statusType` attribute and be nested to display deeper levels:\n * `[{\"value\":\"Value 1\", \"label\": \"Label 1\"}, {\"value\":\"Value 2\", \"label\": \"Label 2\", \"items\": [...]}]`\n /\n @Prop() items: StzhDatalistItemEntry[] \| string = [];\n private _items: StzhDatalistItemEntry[] = [];\n\n /* Variant attribute change event /\n @Event() stzhVariantChange: EventEmitter<StzhDatalistVariantChangeEvent>;\n\n /* Big label attribute change event /\n @Event() stzhBigLabelChange: EventEmitter<StzhDatalistBigLabelChangeEvent>;\n\n /* Direction attribute change event /\n @Event() stzhDirectionChange: EventEmitter<StzhDatalistDirectionChangeEvent>;\n\n @Element() element: HTMLStzhDatalistElement;\n\n @Watch(\"direction\")\n @Watch(\"directionSmall\")\n @Watch(\"directionMedium\")\n @Watch(\"directionLarge\")\n @Watch(\"directionUltra\")\n directionWatcher() {\n this.setCurrentDirection();\n }\n\n @Watch(\"columns\")\n @Watch(\"columnsSmall\")\n @Watch(\"columnsMedium\")\n @Watch(\"columnsLarge\")\n @Watch(\"columnsUltra\")\n columnsWatcher() {\n this.setCurrentColumns();\n }\n\n @Watch(\"currentDirection\")\n currentDirectionWatcher(newValue: StzhDatalistDirection) {\n this.stzhDirectionChange.emit({\n component: \"stzh-datalist\",\n value: newValue,\n });\n }\n\n @Watch(\"variant\")\n variantWatcher(newValue: StzhDatalistVariant) {\n this.stzhVariantChange.emit({\n component: \"stzh-datalist\",\n value: newValue,\n });\n }\n\n @Watch(\"bigLabel\")\n bigLabelWatcher(newValue: boolean) {\n this.stzhBigLabelChange.emit({\n component: \"stzh-datalist\",\n value: newValue,\n });\n }\n\n @Watch(\"items\")\n itemsWatcher(newValue: any[] \| string) {\n if (typeof newValue === \"string\") {\n this._items = JSON.parse(newValue);\n } else {\n this._items = newValue;\n }\n }\n\n /* Get current direction */\n @Method()\n async getCurrentDirection() {\n return this.currentDirection;\n }\n\n @State() currentColumns: number = 1;\n @State() currentDirection: StzhDatalistDirection;\n\n private setCurrentDirection = () => {\n if (media(\"ultra\").matches && this.directionUltra) {\n this.currentDirection = this.directionUltra;\n } else if (media(\"large\").matches && this.directionLarge) {\n this.currentDirection = this.directionLarge;\n } else if (media(\"medium\").matches && this.directionMedium) {\n this.currentDirection = this.directionMedium;\n } else if (media(\"small\").matches && this.directionSmall) {\n this.currentDirection = this.directionSmall;\n } else {\n this.currentDirection = this.direction;\n }\n };\n\n private setCurrentColumns = () => {\n if (media(\"ultra\").matches && this.columnsUltra) {\n this.currentColumns = this.columnsUltra;\n } else if (media(\"large\").matches && this.columnsLarge) {\n this.currentColumns = this.columnsLarge;\n } else if (media(\"medium\").matches && this.columnsMedium) {\n this.currentColumns = this.columnsMedium;\n } else if (media(\"small\").matches && this.columnsSmall) {\n this.currentColumns = this.columnsSmall;\n } else {\n this.currentColumns = this.columns;\n }\n };\n\n resizeHandler = () => {\n this.setCurrentDirection();\n this.setCurrentColumns();\n };\n\n async componentWillLoad() {\n this.itemsWatcher(this.items);\n this.bigLabelWatcher(this.bigLabel);\n this.resizeHandler();\n }\n\n connectedCallback() {\n addMediaChangeListener(this.resizeHandler);\n }\n\n disconnectedCallback() {\n removeMediaChangeListener(this.resizeHandler);\n }\n\n render() {\n const classes = {\n \"stzh-datalist\": true,\n \"stzh-datalist--has-multiple-columns\": this.currentColumns > 1,\n \"stzh-datalist--big-label\": this.bigLabel,\n [`stzh-datalist--direction-${this.currentDirection}`]: !!this.currentDirection,\n [`stzh-datalist--${this.variant}`]: !!this.variant,\n [`stzh-datalist--vertical-gap-${this.verticalGap}`]: !!this.verticalGap,\n };\n\n return (\n <Host\n is-direction={this.currentDirection}\n vertical-gap={this.verticalGap}\n style={{\n \"--columns\": this.currentColumns ? this.currentColumns.toString() : null,\n }}\n >\n <div class={classes}>\n <div class=\"stzh-datalist__wrapper\">\n <div class=\"stzh-datalist__list\" role=\"list\">\n {this._items.map(item => (\n <stzh-datalist-item {...item} hasNested={!!item.items}>\n {item.items && item.items.length > 0 && <stzh-datalist items={item.items}></stzh-datalist>}\n </stzh-datalist-item>\n ))}\n <slot></slot>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-BYV94voK.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-datalist/stzh-datalist.scss?tag=stzh-datalist&encapsulation=scoped","src/components/stzh-datalist/stzh-datalist.tsx"],"sourcesContent":[":host {\n --columns: 1;\n --columns-gap: #{$gridGutter};\n --list-display: grid;\n --list-margin-right: calc(var(--columns-gap) / -1);\n --list-grid-template-columns: repeat(\n var(--columns),\n auto minmax(auto, 1fr) auto var(--columns-gap)\n );\n --full-grid-column: 1 / 5;\n --nested-margin-left: var(--stzh-datalist-nested-margin-left, 0px);\n --details-content-width: var(--stzh-datalist-details-content-width, 100%);\n\n --grid-template-areas: var(\n --stzh-datalist-grid-template-areas,\n \"list list list list\"\n );\n\n --grid-template-columns: var(\n --stzh-datalist-grid-template-columns,\n #{$gridColumns}\n );\n\n margin-left: var(--nested-margin-left);\n\n @include mq($from: small) {\n --columns-gap: #{$gridGutterSmall};\n\n --grid-template-areas: var(\n --stzh-datalist-grid-template-areas,\n \"list list list list\"\n );\n }\n\n @include mq($from: medium) {\n --columns-gap: #{$gridGutterMedium};\n\n --grid-template-areas: var(\n --stzh-datalist-grid-template-areas,\n \"list list list list list list list list\"\n );\n\n --grid-template-columns: var(\n --stzh-datalist-grid-template-columns,\n #{$gridColumnsMedium}\n );\n }\n\n @include mq($from: large) {\n --columns-gap: #{$gridGutterLarge};\n }\n\n @include mq($from: ultra) {\n --columns-gap: #{$gridGutterUltra};\n }\n // datalist-item or wrapper elements should be set to display: contents to make grid layout work.\n // in AEM edit mode: we prevent setting it, so the links can still be edited.\n\n ::slotted(.layout_column) > :not([class=\"cq-\"]),\n ::slotted(:not([class=\"cq-\"])) {\n display: contents;\n }\n\n &[is-direction=\"horizontal\"] {\n --list-grid-template-columns: repeat(\n var(--columns),\n auto minmax(auto, 1fr) auto auto var(--columns-gap)\n );\n --full-grid-column: 1 / 6;\n\n &:where(:has(stzh-datalist-item:not([meta=\"\"]))),\n &:where(:has(stzh-datalist-item:not([status-label=\"\"]))) {\n --list-grid-template-columns: repeat(\n var(--columns),\n auto minmax(auto, 1fr) minmax(auto, 1fr) auto var(--columns-gap)\n );\n }\n }\n\n &[variant=\"table\"] {\n --list-grid-template-columns: repeat(\n var(--columns),\n auto auto minmax(auto, 1fr) auto auto var(--columns-gap)\n );\n --full-grid-column: 1 / 7;\n\n &:where(:has(stzh-datalist-item:not([meta=\"\"]))),\n &:where(:has(stzh-datalist-item:not([status-label=\"\"]))) {\n --list-grid-template-columns: repeat(\n var(--columns),\n auto auto minmax(auto, 1fr) minmax(auto, 1fr) auto var(--columns-gap)\n );\n }\n }\n\n &[vertical-gap=\"small\"] {\n .stzh-datalist__list {\n grid-template-rows: auto;\n @include mq($to: medium) {\n row-gap: space(\"xsmall\");\n }\n @include mq($from: medium) {\n row-gap: space(\"xxsmall\");\n }\n }\n }\n}\n\n/* AEM edit mode: we set list as block element (always as one column), to prevent layout breaks /\n\n:host(:has([class=\"cq-\"])) {\n --stzh-datalist-item-wrapper-display: flex;\n\n --list-display: block;\n --list-margin-right: 0;\n}\n\n.stzh-datalist {\n // offset margin of nested datalist\n --stzh-datalist-nested-margin-left: #{space(\"large\")};\n // details grid columns\n --stzh-details-content-grid-column: var(--full-grid-column);\n --stzh-details-content-padding-right: var(--columns-gap);\n --stzh-details-content-width: var(--details-content-width);\n\n @include gridGutter;\n display: grid;\n grid-template-areas: var(--grid-template-areas);\n grid-template-columns: var(--grid-template-columns);\n\n &__wrapper {\n grid-area: list;\n overflow: visible;\n }\n\n &__list {\n display: var(--list-display);\n border-collapse: collapse;\n grid-template-columns: var(--list-grid-template-columns);\n align-items: stretch;\n margin-right: var(--list-margin-right);\n }\n\n /* Multiple Columns /\n\n &--has-multiple-columns {\n // display of nested datalist\n --stzh-datalist-item-nested-display: none;\n }\n\n / Table variant with big label /\n\n &--table#{&}--big-label &__list {\n @include mq($to: small) {\n --list-display: flex;\n flex-direction: column;\n gap: space(\"xxxsmall\");\n }\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from \"@stencil/core\";\n\nimport {\n StzhDatalistBigLabelChangeEvent,\n StzhDatalistDirection,\n StzhDatalistDirectionChangeEvent,\n StzhDatalistItemEntry,\n StzhDatalistVariant,\n StzhDatalistVariantChangeEvent,\n} from \"../../index\";\n\nimport { addMediaChangeListener, media, removeMediaChangeListener } from \"../../utils/media-utils\";\n\n/\n @slot - Slot for any content\n /\n@Component({\n tag: \"stzh-datalist\",\n styleUrl: \"stzh-datalist.scss\",\n scoped: true,\n})\nexport class StzhDatalist {\n /* Variant /\n @Prop({ reflect: true }) variant: StzhDatalistVariant = \"default\";\n\n /* With big label /\n @Prop({ reflect: true }) bigLabel: boolean = false;\n\n /* Columns /\n @Prop({ reflect: true }) columns: number = 1;\n\n /* Columns above small breakpoint /\n @Prop({ reflect: true }) columnsSmall: number;\n\n /* Columns above medium breakpoint /\n @Prop({ reflect: true }) columnsMedium: number;\n\n /* Columns above large breakpoint /\n @Prop({ reflect: true }) columnsLarge: number;\n\n /* Columns above ultra breakpoint /\n @Prop({ reflect: true }) columnsUltra: number;\n\n /* Direction /\n @Prop({ reflect: true }) direction: StzhDatalistDirection = \"vertical\";\n\n /* Direction above small breakpoint /\n @Prop({ reflect: true }) directionSmall: StzhDatalistDirection;\n\n /* Direction above medium breakpoint /\n @Prop({ reflect: true }) directionMedium: StzhDatalistDirection;\n\n /* Direction above large breakpoint /\n @Prop({ reflect: true }) directionLarge: StzhDatalistDirection;\n\n /* Direction above ultra breakpoint /\n @Prop({ reflect: true }) directionUltra: StzhDatalistDirection;\n /Vertical Gap between items /\n @Prop({ reflect: true }) verticalGap: \"default\" \| \"small\" = \"default\";\n\n /*\n Items in datalist\n * Array of objects that must at least include `value` attribute.\n * Can optionally contain `leadingIcon`, `label`, `a11yLabel`, `meta`, `icon`, `iconLabel`, `iconTooltip`, `href`, `statusLabel`, `statusType` attribute and be nested to display deeper levels:\n * `[{\"value\":\"Value 1\", \"label\": \"Label 1\"}, {\"value\":\"Value 2\", \"label\": \"Label 2\", \"items\": [...]}]`\n /\n @Prop() items: StzhDatalistItemEntry[] \| string = [];\n private _items: StzhDatalistItemEntry[] = [];\n\n /* Variant attribute change event /\n @Event() stzhVariantChange: EventEmitter<StzhDatalistVariantChangeEvent>;\n\n /* Big label attribute change event /\n @Event() stzhBigLabelChange: EventEmitter<StzhDatalistBigLabelChangeEvent>;\n\n /* Direction attribute change event /\n @Event() stzhDirectionChange: EventEmitter<StzhDatalistDirectionChangeEvent>;\n\n @Element() element: HTMLStzhDatalistElement;\n\n @Watch(\"direction\")\n @Watch(\"directionSmall\")\n @Watch(\"directionMedium\")\n @Watch(\"directionLarge\")\n @Watch(\"directionUltra\")\n directionWatcher() {\n this.setCurrentDirection();\n }\n\n @Watch(\"columns\")\n @Watch(\"columnsSmall\")\n @Watch(\"columnsMedium\")\n @Watch(\"columnsLarge\")\n @Watch(\"columnsUltra\")\n columnsWatcher() {\n this.setCurrentColumns();\n }\n\n @Watch(\"currentDirection\")\n currentDirectionWatcher(newValue: StzhDatalistDirection) {\n this.stzhDirectionChange.emit({\n component: \"stzh-datalist\",\n value: newValue,\n });\n }\n\n @Watch(\"variant\")\n variantWatcher(newValue: StzhDatalistVariant) {\n this.stzhVariantChange.emit({\n component: \"stzh-datalist\",\n value: newValue,\n });\n }\n\n @Watch(\"bigLabel\")\n bigLabelWatcher(newValue: boolean) {\n this.stzhBigLabelChange.emit({\n component: \"stzh-datalist\",\n value: newValue,\n });\n }\n\n @Watch(\"items\")\n itemsWatcher(newValue: any[] \| string) {\n if (typeof newValue === \"string\") {\n this._items = JSON.parse(newValue);\n } else {\n this._items = newValue;\n }\n }\n\n /* Get current direction */\n @Method()\n async getCurrentDirection() {\n return this.currentDirection;\n }\n\n @State() currentColumns: number = 1;\n @State() currentDirection: StzhDatalistDirection;\n\n private setCurrentDirection = () => {\n if (media(\"ultra\").matches && this.directionUltra) {\n this.currentDirection = this.directionUltra;\n } else if (media(\"large\").matches && this.directionLarge) {\n this.currentDirection = this.directionLarge;\n } else if (media(\"medium\").matches && this.directionMedium) {\n this.currentDirection = this.directionMedium;\n } else if (media(\"small\").matches && this.directionSmall) {\n this.currentDirection = this.directionSmall;\n } else {\n this.currentDirection = this.direction;\n }\n };\n\n private setCurrentColumns = () => {\n if (media(\"ultra\").matches && this.columnsUltra) {\n this.currentColumns = this.columnsUltra;\n } else if (media(\"large\").matches && this.columnsLarge) {\n this.currentColumns = this.columnsLarge;\n } else if (media(\"medium\").matches && this.columnsMedium) {\n this.currentColumns = this.columnsMedium;\n } else if (media(\"small\").matches && this.columnsSmall) {\n this.currentColumns = this.columnsSmall;\n } else {\n this.currentColumns = this.columns;\n }\n };\n\n resizeHandler = () => {\n this.setCurrentDirection();\n this.setCurrentColumns();\n };\n\n async componentWillLoad() {\n this.itemsWatcher(this.items);\n this.bigLabelWatcher(this.bigLabel);\n this.resizeHandler();\n }\n\n connectedCallback() {\n addMediaChangeListener(this.resizeHandler);\n }\n\n disconnectedCallback() {\n removeMediaChangeListener(this.resizeHandler);\n }\n\n render() {\n const classes = {\n \"stzh-datalist\": true,\n \"stzh-datalist--has-multiple-columns\": this.currentColumns > 1,\n \"stzh-datalist--big-label\": this.bigLabel,\n [`stzh-datalist--direction-${this.currentDirection}`]: !!this.currentDirection,\n [`stzh-datalist--${this.variant}`]: !!this.variant,\n [`stzh-datalist--vertical-gap-${this.verticalGap}`]: !!this.verticalGap,\n };\n\n return (\n <Host\n is-direction={this.currentDirection}\n vertical-gap={this.verticalGap}\n style={{\n \"--columns\": this.currentColumns ? this.currentColumns.toString() : null,\n }}\n >\n <div class={classes}>\n <div class=\"stzh-datalist__wrapper\">\n <div class=\"stzh-datalist__list\" role=\"list\">\n {this._items.map(item => (\n <stzh-datalist-item {...item} hasNested={!!item.items}>\n {item.items && item.items.length > 0 && <stzh-datalist items={item.items}></stzh-datalist>}\n </stzh-datalist-item>\n ))}\n <slot></slot>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/{p-CgQ_cBIG.js → p-BaQRAFeH.js} RENAMED Viewed

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, e as Host, t as transformTag } from './p-Ct0XU0Xj.js';
+import { p as proxyCustomElement, H, h, e as Host, t as transformTag } from './p-C1U0z0e7.js';
 const stzhTextCss = () => `.sc-stzh-text-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-text-h,[stzh-hidden].sc-stzh-text-h{display:none}.sc-stzh-text-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-text-h *.sc-stzh-text,.sc-stzh-text-h *.sc-stzh-text::before,.sc-stzh-text-h *.sc-stzh-text::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-text-h .has-focus.sc-stzh-text{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-text-h .stzh-fylingfocus-focused.sc-stzh-text{outline-style:none !important}.sc-stzh-text-h .stzh-fylingfocus-focused.sc-stzh-text::-moz-focus-inner{border:0 !important}.sc-stzh-text-h{--icon-size:1.25em;--icon-vertical-align:text-bottom;--color:var(--stzh-base-color);--display:var(--stzh-text-display, block);width:100%;color:var(--color);--grid-template-areas:var(
     --stzh-text-grid-template-areas,
@@ -82,6 +82,6 @@ function defineCustomElement() {
 }
 export { StzhText as S, defineCustomElement as d };
-//# sourceMappingURL=p-CgQ_cBIG.js.map
+//# sourceMappingURL=p-BaQRAFeH.js.map
-//# sourceMappingURL=p-CgQ_cBIG.js.map
+//# sourceMappingURL=p-BaQRAFeH.js.map

package/dist/components/{p-CgQ_cBIG.js.map → p-BaQRAFeH.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-~~CgQ_cBIG~~.js","mappings":";;AAAA,MAAM,WAAW,GAAG,MAAM,CAAC;AAC3B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,6/qCAA6/qC,CAAC;;MCFj/qC,QAAQ,iBAAAA,kBAAA,CAAA,MAAA,QAAA,SAAAC,CAAA,CAAA;AALrB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAOU,QAAA,IAAI,CAAA,IAAA,GAAe,SAAS;;AAGX,QAAA,IAAK,CAAA,KAAA,GAAgB,SAAS;;AAG9B,QAAA,IAAI,CAAA,IAAA,GAAY,KAAK;;AAGrB,QAAA,IAAK,CAAA,KAAA,GAA6D,SAAS;;AAG5F,QAAA,IAAI,CAAA,IAAA,GAA2B,SAAS;;AAExC,QAAA,IAAS,CAAA,SAAA,GAA2B,SAAS;;AAE7C,QAAA,IAAU,CAAA,UAAA,GAA2B,SAAS;;AAE9C,QAAA,IAAS,CAAA,SAAA,GAA2B,SAAS;;AAE7C,QAAA,IAAS,CAAA,SAAA,GAA2B,SAAS;AA8BtD;IA5BC,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,WAAW,EAAE,IAAI;gBACjB,oBAAoB,EAAE,IAAI,CAAC,IAAI;gBAC/B,CAAC,CAAA,gBAAA,EAAmB,IAAI,CAAC,IAAI,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI;gBAC7C,CAAC,CAAA,iBAAA,EAAoB,IAAI,CAAC,KAAK,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK;gBAChD,CAAC,CAAA,gBAAA,EAAmB,IAAI,CAAC,IAAI,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI;gBAC7C,CAAC,CAAA,sBAAA,EAAyB,IAAI,CAAC,SAAS,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,SAAS;gBAC7D,CAAC,CAAA,uBAAA,EAA0B,IAAI,CAAC,UAAU,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,UAAU;gBAChE,CAAC,CAAA,sBAAA,EAAyB,IAAI,CAAC,SAAS,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,SAAS;gBAC7D,CAAC,CAAA,sBAAA,EAAyB,IAAI,CAAC,SAAS,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,SAAS;AAC9D,aAAA,EAAA,EAED,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC1B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC1B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,MAAM,EAAA,CAAQ,CACrB,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,uBAAuB,EAAA,EAChC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,CACF,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-text/stzh-text.scss?tag=stzh-text&encapsulation=scoped","src/components/stzh-text/stzh-text.tsx"],"sourcesContent":["/*\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 @media (hover: none) {\n color: inherit;\n }\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\n.stzh-text__text-inner {\n text-overflow: var(--text-overflow, clip);\n white-space: var(--white-space, normal);\n overflow: var(--overflow, visible);\n width: var(--width, initial);\n max-width: var(--max-width, initial);\n}\n","import { Component, Host, h, Prop } 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"],"version":3}
1	+ {"file":"p-BaQRAFeH.js","mappings":";;AAAA,MAAM,WAAW,GAAG,MAAM,CAAC;AAC3B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,6/qCAA6/qC,CAAC;;MCFj/qC,QAAQ,iBAAAA,kBAAA,CAAA,MAAA,QAAA,SAAAC,CAAA,CAAA;AALrB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAOU,QAAA,IAAI,CAAA,IAAA,GAAe,SAAS;;AAGX,QAAA,IAAK,CAAA,KAAA,GAAgB,SAAS;;AAG9B,QAAA,IAAI,CAAA,IAAA,GAAY,KAAK;;AAGrB,QAAA,IAAK,CAAA,KAAA,GAA6D,SAAS;;AAG5F,QAAA,IAAI,CAAA,IAAA,GAA2B,SAAS;;AAExC,QAAA,IAAS,CAAA,SAAA,GAA2B,SAAS;;AAE7C,QAAA,IAAU,CAAA,UAAA,GAA2B,SAAS;;AAE9C,QAAA,IAAS,CAAA,SAAA,GAA2B,SAAS;;AAE7C,QAAA,IAAS,CAAA,SAAA,GAA2B,SAAS;AA8BtD;IA5BC,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,WAAW,EAAE,IAAI;gBACjB,oBAAoB,EAAE,IAAI,CAAC,IAAI;gBAC/B,CAAC,CAAA,gBAAA,EAAmB,IAAI,CAAC,IAAI,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI;gBAC7C,CAAC,CAAA,iBAAA,EAAoB,IAAI,CAAC,KAAK,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK;gBAChD,CAAC,CAAA,gBAAA,EAAmB,IAAI,CAAC,IAAI,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI;gBAC7C,CAAC,CAAA,sBAAA,EAAyB,IAAI,CAAC,SAAS,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,SAAS;gBAC7D,CAAC,CAAA,uBAAA,EAA0B,IAAI,CAAC,UAAU,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,UAAU;gBAChE,CAAC,CAAA,sBAAA,EAAyB,IAAI,CAAC,SAAS,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,SAAS;gBAC7D,CAAC,CAAA,sBAAA,EAAyB,IAAI,CAAC,SAAS,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,SAAS;AAC9D,aAAA,EAAA,EAED,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC1B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC1B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,MAAM,EAAA,CAAQ,CACrB,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,uBAAuB,EAAA,EAChC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,CACF,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-text/stzh-text.scss?tag=stzh-text&encapsulation=scoped","src/components/stzh-text/stzh-text.tsx"],"sourcesContent":["/*\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 @media (hover: none) {\n color: inherit;\n }\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\n.stzh-text__text-inner {\n text-overflow: var(--text-overflow, clip);\n white-space: var(--white-space, normal);\n overflow: var(--overflow, visible);\n width: var(--width, initial);\n max-width: var(--max-width, initial);\n}\n","import { Component, Host, h, Prop } 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"],"version":3}