npm - @oiz/stzh-components - Versions diffs - 3.8.0-beta1 → 3.8.0 - Mend

@oiz/stzh-components 3.8.0-beta1 → 3.8.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 (298) hide show

package/dist/esm/stzh-contact.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"stzh-contact.entry.js","mappings":"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","names":[],"sources":["src/components/stzh-contact/stzh-contact.scss?tag=stzh-contact&encapsulation=scoped","src/components/stzh-contact/stzh-contact.tsx"],"sourcesContent":[":host {\n --grid-template-areas: var(\n --stzh-contact-grid-template-areas,\n \"heading heading heading heading\" \"image image image image\" \"info info info info\" \"availability availability availability availability\" \"additional additional additional additional\"\n );\n\n --grid-template-columns: var(\n --stzh-contact-grid-template-columns,\n #{$gridColumns}\n );\n\n @include mq($from: medium) {\n --grid-template-areas: var(\n --stzh-contact-grid-template-areas,\n \"heading heading heading heading heading heading heading heading\" \"image image image image . . . .\" \"info info info info availability availability availability availability\" \"additional additional additional additional additional additional additional additional\"\n );\n\n --grid-template-columns: var(\n --stzh-contact-grid-template-columns,\n #{$gridColumnsMedium}\n );\n }\n\n @media print {\n page-break-inside: avoid;\n break-inside: avoid;\n }\n\n ::slotted([slot=\"image\"]) {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n}\n\n:host[image-position=left] {\n --grid-template-areas: var(\n --stzh-contact-grid-template-areas,\n \"heading heading heading heading\" \"image image image image\" \"info info info info\" \"availability availability availability availability\" \"additional additional additional additional\"\n );\n\n --grid-template-columns: var(\n --stzh-contact-grid-template-columns,\n #{$gridColumns}\n );\n\n @include mq($from: medium) {\n --grid-template-areas: var(\n --stzh-contact-grid-template-areas,\n \"heading heading heading heading heading heading heading heading\" \"image info info info availability availability availability availability\" \"additional additional additional additional additional additional additional additional\"\n );\n\n --grid-template-columns: var(\n --stzh-contact-grid-template-columns,\n auto repeat(7, minmax(0, 1fr))\n );\n }\n\n @include mq($from: large) {\n --grid-template-areas: var(\n --stzh-contact-grid-template-areas,\n \"heading heading heading heading heading heading heading heading heading heading heading heading\" \"image info info info info info availability availability availability availability availability availability\" \"additional additional additional additional additional additional additional additional additional additional additional additional\"\n );\n\n --grid-template-columns: var(\n --stzh-contact-grid-template-columns,\n auto repeat(11, minmax(0, 1fr))\n );\n }\n}\n\n.stzh-contact {\n @include fontCurve('p1');\n @include gridGutter;\n display: grid;\n grid-template-areas: var(--grid-template-areas);\n grid-template-columns: var(--grid-template-columns);\n\n &__main-heading {\n grid-area: heading;\n\n &:not(:empty) {\n @include spaceCurve('margin-bottom', 'tiny');\n }\n }\n\n &__image-wrapper {\n grid-area: image;\n background-color: $colorSecondary20;\n }\n\n &__image {\n position: relative;\n }\n\n &__info {\n grid-area: info;\n }\n\n &__heading,\n &__name,\n &__address,\n &__numbers,\n &__emails,\n &__pobox,\n &__availability-title {\n &:not(:empty):not(:last-child) {\n margin-bottom: space('xsmall');\n }\n }\n\n &__number,\n &__email {\n display: flex;\n align-items: center;\n }\n\n &__heading,\n &__name,\n &__availability-title {\n @include fontCurve('p1');\n margin: 0px;\n }\n\n &__heading,\n &__name.is-heading,\n &__availability-title {\n @include font('heavy');\n }\n\n &__availability {\n grid-area: availability;\n margin-top: space('xlarge');\n\n @include mq($from: medium) {\n margin-top: 0px;\n }\n }\n\n &__availability-list,\n &__availability-hour-list {\n list-style: none;\n margin: 0;\n padding: 0;\n }\n\n &__availability-list {\n @include spaceCurve('gap', 'tiny');\n display: grid;\n }\n\n &__availability-weekday {\n @include fontCurve('p2');\n }\n\n &__availability-hours {\n display: flex;\n flex-wrap: wrap;\n column-gap: space('xsmall');\n }\n\n &__availability-hours-separator {\n width: 1px;\n background-color: currentColor;\n flex-shrink: 0;\n }\n\n &__additional {\n @include spaceCurve('gap', 'regular');\n grid-area: additional;\n display: grid;\n\n &:not(:empty) {\n margin-top: space('medium');\n }\n }\n\n /* Has image /\n\n &--has-image &__image-wrapper {\n margin-bottom: space('medium');\n }\n\n &--has-image &__image {\n width: 64px;\n height: 64px;\n\n @include mq($from: small) {\n width: 80px;\n height: 80px;\n }\n\n @include mq($from: medium) {\n width: 100px;\n height: 100px;\n }\n\n @include mq($from: large) {\n width: 120px;\n height: 120px;\n }\n\n @include mq($from: ultra) {\n width: 140px;\n height: 140px;\n }\n }\n\n / image position left /\n &--image-position-left &__image-wrapper {\n background-color: transparent;\n }\n}\n","import { Component, Element, Fragment, h, Host, Prop, Watch } from \"@stencil/core\";\n\nimport { ContactEmail, ContactNumber, StzhContactAvailabilityItem } from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\n\nfunction formatTel(tel: string) {\n return tel.replace(/\\s/g, \"\");\n}\n\n/\n @slot main-heading - slot for main heading\n * @slot image - slot for image\n * @slot address - slot for address (alternative for `address` property or separate properties `street`, `streetInfo`, `postalCode` & `location`)\n * @slot pobox - slot for pobox (alternative for `pobox` property or separate properties `poboxHeading`, `poboxTitle`, `poboxPostalCode` & `poboxLocation`)\n * @slot slot for additional (e.g. accordion with contact form, map or datalist)\n /\n@Component({\n tag: \"stzh-contact\",\n styleUrl: \"stzh-contact.scss\",\n scoped: true,\n})\nexport class StzhContact {\n /* Type /\n @Prop() type: \"Organization\" \| \"Person\" = \"Organization\";\n\n /* Main heading /\n @Prop() mainHeading: string;\n\n /* Main heading level /\n @Prop() mainHeadingLevel: \"1\" \| \"2\" \| \"3\" \| \"4\" = \"2\";\n\n /* Heading /\n @Prop() heading: string;\n\n /* Heading level /\n @Prop() headingLevel: \"1\" \| \"2\" \| \"3\" \| \"4\" = \"3\";\n\n /* Name /\n @Prop() name: string;\n\n /* Name heading level /\n @Prop() nameHeadingLevel: \"\" \| \"1\" \| \"2\" \| \"3\" \| \"4\" = \"\";\n\n /* Address (alternative for address slot or separate properties `street`, `streetInfo`, `postalCode` & `location`) /\n @Prop() address: string;\n\n /* Street /\n @Prop() street: string \| string[];\n private _street: string[] = [];\n\n /* Additional street info /\n @Prop() streetInfo: string \| string[];\n private _streetInfo: string[] = [];\n\n /* Postal code /\n @Prop() postalCode: string;\n\n /* Location / city /\n @Prop() location: string;\n\n /* Location / city /\n @Prop() imagePosition: \"left\" \| \"top\" = \"top\";\n\n /\n Numbers\n * Array of objects that can include the attributes `type` = `tel`\|`fax`, `label`, `number`\n * and optionally `analyticsId` for setting `s-object-id` to the link element\n * (for Adobe Analytics, default value is `label` and `number`).\n /\n @Prop() numbers: ContactNumber[] \| string = [];\n private _numbers: ContactNumber[] = [];\n\n /\n Numbers\n * Array of objects that can include the attributes `label`, `number`, `text`, `href`\n * and optionally `analyticsId` for setting `s-object-id` to the link element\n * (for Adobe Analytics, default value is `label` and `text`).\n /\n @Prop() emails: ContactEmail[] \| string = [];\n private _emails: ContactEmail[] = [];\n\n /* Pobox (alternative for pobox slot or separate properties `poboxHeading`, `poboxTitle`, `poboxPostalCode` & `poboxLocation`) /\n @Prop() pobox: string;\n\n /* Post office box heading /\n @Prop() poboxHeading: string;\n\n /* Post office box title /\n @Prop() poboxTitle: string;\n\n /* Post office box postal code /\n @Prop() poboxPostalCode: string;\n\n /* Post office box location / city /\n @Prop() poboxLocation: string;\n\n /* Availability title /\n @Prop() availabilityTitle: string;\n\n /* Availability title level /\n @Prop() availabilityTitleLevel: \"1\" \| \"2\" \| \"3\" \| \"4\" = \"3\";\n\n /* Availability times */\n @Prop() availability: string \| StzhContactAvailabilityItem[];\n private _availability: StzhContactAvailabilityItem[] = [];\n\n // private _availabilityDataItems: StzhDatalistItemEntry[] = [];\n\n @Watch(\"availability\")\n availabilityWatcher(newValue: string \| StzhContactAvailabilityItem[]) {\n if (typeof newValue === \"string\") {\n this._availability = JSON.parse(newValue);\n } else {\n this._availability = newValue;\n }\n\n // if (this._availability) {\n // this._availabilityDataItems = this._availability.map((item) => ({\n // value: item.hours.join(' \| '),\n // label: item.weekday\n // }));\n // }\n }\n\n @Watch(\"numbers\")\n numbersWatcher(newValue: ContactNumber[] \| string) {\n if (typeof newValue === \"string\") {\n this._numbers = JSON.parse(newValue);\n } else {\n this._numbers = newValue;\n }\n }\n\n @Watch(\"emails\")\n emailsWatcher(newValue: ContactEmail[] \| string) {\n if (typeof newValue === \"string\") {\n this._emails = JSON.parse(newValue);\n } else {\n this._emails = newValue;\n }\n }\n\n @Watch(\"street\")\n streetWatcher(newValue: string[] \| string) {\n if (typeof newValue === \"string\") {\n try {\n this._street = JSON.parse(newValue);\n } catch (noArrayException) {\n this._street = [newValue];\n }\n } else if (newValue) {\n this._street = newValue;\n }\n }\n\n @Watch(\"streetInfo\")\n streetInfoWatcher(newValue: string[] \| string) {\n if (typeof newValue === \"string\") {\n try {\n this._streetInfo = JSON.parse(newValue);\n } catch (noArrayException) {\n this._streetInfo = [newValue];\n }\n } else if (newValue) {\n this._streetInfo = newValue;\n }\n }\n\n @Element() element: HTMLStzhFigureElement;\n\n async componentWillLoad() {\n this.numbersWatcher(this.numbers);\n this.emailsWatcher(this.emails);\n this.availabilityWatcher(this.availability);\n this.streetWatcher(this.street);\n this.streetInfoWatcher(this.streetInfo);\n }\n\n render() {\n const hasImage = hasSlot(this.element, \"image\");\n const hasAddress = !!this.address \|\| hasSlot(this.element, \"address\");\n const hasAddons = hasSlot(this.element, \"addons\");\n const hasLinks = hasSlot(this.element, \"links\");\n\n const classes = {\n \"stzh-contact\": true,\n \"stzh-contact--has-image\": hasImage,\n \"stzh-contact--has-address\": hasAddress,\n \"stzh-contact--has-addons\": hasAddons,\n \"stzh-contact--has-links\": hasLinks,\n [`stzh-contact--image-position-${this.imagePosition}`]: true,\n };\n\n const HeadingLevel = `h${this.headingLevel}`;\n const NameHeadingLevel = this.nameHeadingLevel ? `h${this.nameHeadingLevel}` : \"div\";\n const AvailabilityTitleElement = `h${this.availabilityTitleLevel}`;\n\n return (\n <Host image-position={this.imagePosition}>\n <div class={classes} itemscope itemtype={`http://schema.org/${this.type}`}>\n <div\n class=\"stzh-contact__main-heading\"\n itemprop={\n (this.type === \"Organization\" && !this.heading) \|\| (this.type === \"Person\" && !this.name) ? \"name\" : null\n }\n >\n {this.mainHeading ? (\n <stzh-heading level={this.mainHeadingLevel}>{this.mainHeading}</stzh-heading>\n ) : (\n <slot name=\"main-heading\"></slot>\n )}\n </div>\n\n <div class=\"stzh-contact__image-wrapper\">\n <div class=\"stzh-contact__image\">\n <slot name=\"image\"></slot>\n </div>\n </div>\n\n <div class=\"stzh-contact__info\">\n {this.heading && (\n <HeadingLevel\n class=\"stzh-contact__heading\"\n itemprop={this.type === \"Organization\" \|\| !this.name ? \"name\" : null}\n innerHTML={this.heading}\n ></HeadingLevel>\n )}\n\n {this.name && (\n <NameHeadingLevel\n class={{\n \"stzh-contact__name\": true,\n \"is-heading\": this.nameHeadingLevel !== \"\",\n }}\n itemprop={this.type === \"Person\" ? \"name\" : null}\n >\n {this.name}\n </NameHeadingLevel>\n )}\n\n <div\n class=\"stzh-contact__address\"\n itemprop=\"address\"\n itemscope\n itemtype=\"http://schema.org/PostalAddress\"\n innerHTML={this.address}\n >\n {!this.address && (\n <Fragment>\n {this._street.length > 0 && (\n <div class=\"stzh-contact__street\" itemprop=\"streetAddress\">\n {this._street.map((street: string) => (\n <Fragment>\n {street}\n <br />\n </Fragment>\n ))}\n {this._streetInfo.length > 0 && (\n <Fragment>\n <br />{\" \"}\n {this._streetInfo.map((streetInfo: string) => (\n <Fragment>\n {streetInfo}\n <br />\n </Fragment>\n ))}\n </Fragment>\n )}\n </div>\n )}\n\n {this.postalCode && (\n <span class=\"stzh-contact__postal-code\" itemprop=\"postalCode\">\n {this.postalCode} \n </span>\n )}\n\n {this.location && (\n <span class=\"stzh-contact__locality\" itemprop=\"addressLocality\">\n {this.location}\n </span>\n )}\n\n <slot name=\"address\"></slot>\n </Fragment>\n )}\n </div>\n\n {this._numbers.length > 0 && (\n <div class=\"stzh-contact__numbers\">\n {this._numbers.map(number => (\n <div class=\"stzh-contact__number\">\n <span>{number.label} </span>\n <stzh-link\n size=\"inherit\"\n height=\"auto\"\n class=\"stzh-contact__number-link\"\n href={`${number.type}:${formatTel(number.number)}`}\n analyticsId={number.analyticsId \|\| `${number.label} ${number.number}`}\n itemprop={number.type === \"fax\" ? \"faxNumber\" : \"telephone\"}\n >\n {number.number}\n </stzh-link>\n </div>\n ))}\n </div>\n )}\n\n {this._emails.length > 0 && (\n <div class=\"stzh-contact__emails\">\n {this._emails.map(email => (\n <div class=\"stzh-contact__email\">\n <span>{email.label} </span>\n {email.href ? (\n <stzh-link\n size=\"inherit\"\n height=\"auto\"\n class=\"stzh-container__email-link\"\n href={`mailto:${email.href}`}\n analyticsId={email.analyticsId \|\| `${email.label} ${email.text}`}\n itemprop=\"email\"\n >\n {email.text}\n </stzh-link>\n ) : (\n <span class=\"stzh-container__email-link\" itemprop=\"email\">\n {email.text}\n </span>\n )}\n </div>\n ))}\n </div>\n )}\n\n <div class=\"stzh-contact__pobox\" innerHTML={this.pobox}>\n {!this.pobox && (\n <Fragment>\n {this.poboxHeading && <div class=\"stzh-contact__pobox-heading\">{this.poboxHeading}</div>}\n {this.poboxTitle && <div class=\"stzh-contact__pobox-title\">{this.poboxTitle}</div>}\n {this.poboxPostalCode && (\n <span class=\"stzh-contact__pobox-postal-code\">{this.poboxPostalCode} </span>\n )}\n {this.poboxLocation && <span class=\"stzh-contact__pobox-locality\">{this.poboxLocation}</span>}\n <slot name=\"pobox\"></slot>\n </Fragment>\n )}\n </div>\n </div>\n\n {this.availability && (\n <div class=\"stzh-contact__availability\">\n {this.availabilityTitle && (\n <AvailabilityTitleElement class=\"stzh-contact__availability-title\">\n {this.availabilityTitle}\n </AvailabilityTitleElement>\n )}\n\n {this._availability.length > 0 && (\n <ul class=\"stzh-contact__availability-list\">\n {this._availability.map(item => (\n <li class=\"stzh-contact__availability-list-item\">\n <div class=\"stzh-contact__availability-weekday\">{item.weekday}</div>\n {item.hours.length > 0 && (\n <div class=\"stzh-contact__availability-hours\">\n {item.hours.map((hour, index) => (\n <Fragment>\n <div class=\"stzh-contact__availability-hour\">{hour}</div>\n {index < item.hours.length - 1 && (\n <div class=\"stzh-contact__availability-hours-separator\"></div>\n )}\n </Fragment>\n ))}\n </div>\n )}\n </li>\n ))}\n </ul>\n )}\n </div>\n )}\n\n <div class=\"stzh-contact__additional\">\n <slot></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"stzh-contact.entry.js","mappings":"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","names":[],"sources":["src/components/stzh-contact/stzh-contact.scss?tag=stzh-contact&encapsulation=scoped","src/components/stzh-contact/stzh-contact.tsx"],"sourcesContent":[":host {\n --grid-template-areas: var(\n --stzh-contact-grid-template-areas,\n \"heading heading heading heading\" \"image image image image\" \"info info info info\" \"availability availability availability availability\" \"additional additional additional additional\"\n );\n\n --grid-template-columns: var(\n --stzh-contact-grid-template-columns,\n #{$gridColumns}\n );\n\n @include mq($from: medium) {\n --grid-template-areas: var(\n --stzh-contact-grid-template-areas,\n \"heading heading heading heading heading heading heading heading\" \"image image image image . . . .\" \"info info info info availability availability availability availability\" \"additional additional additional additional additional additional additional additional\"\n );\n\n --grid-template-columns: var(\n --stzh-contact-grid-template-columns,\n #{$gridColumnsMedium}\n );\n }\n\n @media print {\n page-break-inside: avoid;\n break-inside: avoid;\n }\n\n ::slotted([slot=\"image\"]) {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n\n &[has-availability=\"false\"] {\n @include mq($from: medium) {\n --grid-template-areas: var(\n --stzh-contact-grid-template-areas,\n \"heading heading heading heading heading heading heading heading\" \"image image image image . . . .\" \"info info info info info info info info\" \"additional additional additional additional additional additional additional additional\"\n );\n }\n }\n}\n\n:host[image-position=left] {\n --grid-template-areas: var(\n --stzh-contact-grid-template-areas,\n \"heading heading heading heading\" \"image image image image\" \"info info info info\" \"availability availability availability availability\" \"additional additional additional additional\"\n );\n\n --grid-template-columns: var(\n --stzh-contact-grid-template-columns,\n #{$gridColumns}\n );\n\n @include mq($from: medium) {\n --grid-template-areas: var(\n --stzh-contact-grid-template-areas,\n \"heading heading heading heading heading heading heading heading\" \"image info info info availability availability availability availability\" \"additional additional additional additional additional additional additional additional\"\n );\n\n --grid-template-columns: var(\n --stzh-contact-grid-template-columns,\n auto repeat(7, minmax(0, 1fr))\n );\n }\n\n @include mq($from: large) {\n --grid-template-areas: var(\n --stzh-contact-grid-template-areas,\n \"heading heading heading heading heading heading heading heading heading heading heading heading\" \"image info info info info info availability availability availability availability availability availability\" \"additional additional additional additional additional additional additional additional additional additional additional additional\"\n );\n\n --grid-template-columns: var(\n --stzh-contact-grid-template-columns,\n auto repeat(11, minmax(0, 1fr))\n );\n }\n}\n\n.stzh-contact {\n @include fontCurve('p1');\n @include gridGutter;\n display: grid;\n grid-template-areas: var(--grid-template-areas);\n grid-template-columns: var(--grid-template-columns);\n\n &__main-heading {\n grid-area: heading;\n\n &:not(:empty) {\n @include spaceCurve('margin-bottom', 'tiny');\n }\n }\n\n &__image-wrapper {\n grid-area: image;\n background-color: $colorSecondary20;\n }\n\n &__image {\n position: relative;\n }\n\n &__info {\n grid-area: info;\n }\n\n &__heading,\n &__name,\n &__address,\n &__numbers,\n &__emails,\n &__pobox,\n &__availability-title {\n &:not(:empty):not(:last-child) {\n margin-bottom: space('xsmall');\n }\n }\n\n &__numbers {\n white-space: nowrap;\n }\n\n &__number,\n &__email {\n display: flex;\n align-items: center;\n }\n\n &__heading,\n &__name,\n &__availability-title {\n @include fontCurve('p1');\n margin: 0px;\n }\n\n &__heading,\n &__name.is-heading,\n &__availability-title {\n @include font('heavy');\n }\n\n &__availability {\n grid-area: availability;\n margin-top: space('xlarge');\n\n @include mq($from: medium) {\n margin-top: 0px;\n }\n }\n\n &__availability-list,\n &__availability-hour-list {\n list-style: none;\n margin: 0;\n padding: 0;\n }\n\n &__availability-list {\n @include spaceCurve('gap', 'tiny');\n display: grid;\n }\n\n &__availability-weekday {\n @include fontCurve('p2');\n }\n\n &__availability-hours {\n display: flex;\n flex-wrap: wrap;\n column-gap: space('xsmall');\n }\n\n &__availability-hours-separator {\n width: 1px;\n background-color: currentColor;\n flex-shrink: 0;\n }\n\n &__additional {\n @include spaceCurve('gap', 'regular');\n grid-area: additional;\n display: grid;\n\n &:not(:empty) {\n margin-top: space('medium');\n }\n }\n\n /* Has image /\n\n &--has-image &__image-wrapper {\n margin-bottom: space('medium');\n }\n\n &--has-image &__image {\n width: 64px;\n height: 64px;\n\n @include mq($from: small) {\n width: 80px;\n height: 80px;\n }\n\n @include mq($from: medium) {\n width: 100px;\n height: 100px;\n }\n\n @include mq($from: large) {\n width: 120px;\n height: 120px;\n }\n\n @include mq($from: ultra) {\n width: 140px;\n height: 140px;\n }\n }\n\n / image position left /\n &--image-position-left &__image-wrapper {\n background-color: transparent;\n }\n}\n","import { Component, Element, Fragment, h, Host, Prop, Watch } from \"@stencil/core\";\n\nimport { ContactEmail, ContactNumber, StzhContactAvailabilityItem } from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\n\nfunction formatTel(tel: string) {\n return tel.replace(/\\s/g, \"\");\n}\n\n/\n @slot main-heading - slot for main heading\n * @slot image - slot for image\n * @slot address - slot for address (alternative for `address` property or separate properties `street`, `streetInfo`, `postalCode` & `location`)\n * @slot pobox - slot for pobox (alternative for `pobox` property or separate properties `poboxHeading`, `poboxTitle`, `poboxPostalCode` & `poboxLocation`)\n * @slot slot for additional (e.g. accordion with contact form, map or datalist)\n /\n@Component({\n tag: \"stzh-contact\",\n styleUrl: \"stzh-contact.scss\",\n scoped: true,\n})\nexport class StzhContact {\n /* Type /\n @Prop() type: \"Organization\" \| \"Person\" = \"Organization\";\n\n /* Main heading /\n @Prop() mainHeading: string;\n\n /* Main heading level /\n @Prop() mainHeadingLevel: \"1\" \| \"2\" \| \"3\" \| \"4\" = \"2\";\n\n /* Heading /\n @Prop() heading: string;\n\n /* Heading level /\n @Prop() headingLevel: \"1\" \| \"2\" \| \"3\" \| \"4\" = \"3\";\n\n /* Name /\n @Prop() name: string;\n\n /* Name heading level /\n @Prop() nameHeadingLevel: \"\" \| \"1\" \| \"2\" \| \"3\" \| \"4\" = \"\";\n\n /* Address (alternative for address slot or separate properties `street`, `streetInfo`, `postalCode` & `location`) /\n @Prop() address: string;\n\n /* Street /\n @Prop() street: string \| string[];\n private _street: string[] = [];\n\n /* Additional street info /\n @Prop() streetInfo: string \| string[];\n private _streetInfo: string[] = [];\n\n /* Postal code /\n @Prop() postalCode: string;\n\n /* Location / city /\n @Prop() location: string;\n\n /* Location / city /\n @Prop() imagePosition: \"left\" \| \"top\" = \"top\";\n\n /\n Numbers\n * Array of objects that can include the attributes `type` = `tel`\|`fax`, `label`, `number`\n * and optionally `analyticsId` for setting `s-object-id` to the link element\n * (for Adobe Analytics, default value is `label` and `number`).\n /\n @Prop() numbers: ContactNumber[] \| string = [];\n private _numbers: ContactNumber[] = [];\n\n /\n Numbers\n * Array of objects that can include the attributes `label`, `number`, `text`, `href`\n * and optionally `analyticsId` for setting `s-object-id` to the link element\n * (for Adobe Analytics, default value is `label` and `text`).\n /\n @Prop() emails: ContactEmail[] \| string = [];\n private _emails: ContactEmail[] = [];\n\n /* Pobox (alternative for pobox slot or separate properties `poboxHeading`, `poboxTitle`, `poboxPostalCode` & `poboxLocation`) /\n @Prop() pobox: string;\n\n /* Post office box heading /\n @Prop() poboxHeading: string;\n\n /* Post office box title /\n @Prop() poboxTitle: string;\n\n /* Post office box postal code /\n @Prop() poboxPostalCode: string;\n\n /* Post office box location / city /\n @Prop() poboxLocation: string;\n\n /* Availability title /\n @Prop() availabilityTitle: string;\n\n /* Availability title level /\n @Prop() availabilityTitleLevel: \"1\" \| \"2\" \| \"3\" \| \"4\" = \"3\";\n\n /* Availability times */\n @Prop() availability: string \| StzhContactAvailabilityItem[];\n private _availability: StzhContactAvailabilityItem[] = [];\n\n // private _availabilityDataItems: StzhDatalistItemEntry[] = [];\n\n @Watch(\"availability\")\n availabilityWatcher(newValue: string \| StzhContactAvailabilityItem[]) {\n if (typeof newValue === \"string\") {\n this._availability = JSON.parse(newValue);\n } else {\n this._availability = newValue;\n }\n }\n\n @Watch(\"numbers\")\n numbersWatcher(newValue: ContactNumber[] \| string) {\n if (typeof newValue === \"string\") {\n this._numbers = JSON.parse(newValue);\n } else {\n this._numbers = newValue;\n }\n }\n\n @Watch(\"emails\")\n emailsWatcher(newValue: ContactEmail[] \| string) {\n if (typeof newValue === \"string\") {\n this._emails = JSON.parse(newValue);\n } else {\n this._emails = newValue;\n }\n }\n\n @Watch(\"street\")\n streetWatcher(newValue: string[] \| string) {\n if (typeof newValue === \"string\") {\n try {\n this._street = JSON.parse(newValue);\n } catch (noArrayException) {\n this._street = [newValue];\n }\n } else if (newValue) {\n this._street = newValue;\n }\n }\n\n @Watch(\"streetInfo\")\n streetInfoWatcher(newValue: string[] \| string) {\n if (typeof newValue === \"string\") {\n try {\n this._streetInfo = JSON.parse(newValue);\n } catch (noArrayException) {\n this._streetInfo = [newValue];\n }\n } else if (newValue) {\n this._streetInfo = newValue;\n }\n }\n\n @Element() element: HTMLStzhFigureElement;\n\n async componentWillLoad() {\n this.numbersWatcher(this.numbers);\n this.emailsWatcher(this.emails);\n this.availabilityWatcher(this.availability);\n this.streetWatcher(this.street);\n this.streetInfoWatcher(this.streetInfo);\n }\n\n render() {\n const hasImage = hasSlot(this.element, \"image\");\n const hasAddress = !!this.address \|\| hasSlot(this.element, \"address\");\n const hasAddons = hasSlot(this.element, \"addons\");\n const hasLinks = hasSlot(this.element, \"links\");\n\n const classes = {\n \"stzh-contact\": true,\n \"stzh-contact--has-image\": hasImage,\n \"stzh-contact--has-address\": hasAddress,\n \"stzh-contact--has-addons\": hasAddons,\n \"stzh-contact--has-links\": hasLinks,\n [`stzh-contact--image-position-${this.imagePosition}`]: true,\n };\n\n const HeadingLevel = `h${this.headingLevel}`;\n const NameHeadingLevel = this.nameHeadingLevel ? `h${this.nameHeadingLevel}` : \"div\";\n const AvailabilityTitleElement = `h${this.availabilityTitleLevel}`;\n\n return (\n <Host image-position={this.imagePosition} has-availability={!!this.availability ? 'true' : 'false'}>\n <div class={classes} itemscope itemtype={`http://schema.org/${this.type}`}>\n <div\n class=\"stzh-contact__main-heading\"\n itemprop={\n (this.type === \"Organization\" && !this.heading) \|\| (this.type === \"Person\" && !this.name) ? \"name\" : null\n }\n >\n {this.mainHeading ? (\n <stzh-heading level={this.mainHeadingLevel}>{this.mainHeading}</stzh-heading>\n ) : (\n <slot name=\"main-heading\"></slot>\n )}\n </div>\n\n <div class=\"stzh-contact__image-wrapper\">\n <div class=\"stzh-contact__image\">\n <slot name=\"image\"></slot>\n </div>\n </div>\n\n <div class=\"stzh-contact__info\">\n {this.heading && (\n <HeadingLevel\n class=\"stzh-contact__heading\"\n itemprop={this.type === \"Organization\" \|\| !this.name ? \"name\" : null}\n innerHTML={this.heading}\n ></HeadingLevel>\n )}\n\n {this.name && (\n <NameHeadingLevel\n class={{\n \"stzh-contact__name\": true,\n \"is-heading\": this.nameHeadingLevel !== \"\",\n }}\n itemprop={this.type === \"Person\" ? \"name\" : null}\n >\n {this.name}\n </NameHeadingLevel>\n )}\n\n <div\n class=\"stzh-contact__address\"\n itemprop=\"address\"\n itemscope\n itemtype=\"http://schema.org/PostalAddress\"\n innerHTML={this.address}\n >\n {!this.address && (\n <Fragment>\n {this._street.length > 0 && (\n <div class=\"stzh-contact__street\" itemprop=\"streetAddress\">\n {this._street.map((street: string) => (\n <Fragment>\n {street}\n <br />\n </Fragment>\n ))}\n {this._streetInfo.length > 0 && (\n <Fragment>\n <br />{\" \"}\n {this._streetInfo.map((streetInfo: string) => (\n <Fragment>\n {streetInfo}\n <br />\n </Fragment>\n ))}\n </Fragment>\n )}\n </div>\n )}\n\n {this.postalCode && (\n <span class=\"stzh-contact__postal-code\" itemprop=\"postalCode\">\n {this.postalCode} \n </span>\n )}\n\n {this.location && (\n <span class=\"stzh-contact__locality\" itemprop=\"addressLocality\">\n {this.location}\n </span>\n )}\n\n <slot name=\"address\"></slot>\n </Fragment>\n )}\n </div>\n\n {this._numbers.length > 0 && (\n <div class=\"stzh-contact__numbers\">\n {this._numbers.map(number => (\n <div class=\"stzh-contact__number\">\n <span>{number.label} </span>\n <stzh-link\n size=\"inherit\"\n height=\"auto\"\n class=\"stzh-contact__number-link\"\n href={`${number.type}:${formatTel(number.number)}`}\n analyticsId={number.analyticsId \|\| `${number.label} ${number.number}`}\n itemprop={number.type === \"fax\" ? \"faxNumber\" : \"telephone\"}\n >\n {number.number}\n </stzh-link>\n </div>\n ))}\n </div>\n )}\n\n {this._emails.length > 0 && (\n <div class=\"stzh-contact__emails\">\n {this._emails.map(email => (\n <div class=\"stzh-contact__email\">\n <span>{email.label} </span>\n {email.href ? (\n <stzh-link\n size=\"inherit\"\n height=\"auto\"\n class=\"stzh-container__email-link\"\n href={`mailto:${email.href}`}\n analyticsId={email.analyticsId \|\| `${email.label} ${email.text}`}\n itemprop=\"email\"\n >\n {email.text}\n </stzh-link>\n ) : (\n <span class=\"stzh-container__email-link\" itemprop=\"email\">\n {email.text}\n </span>\n )}\n </div>\n ))}\n </div>\n )}\n\n <div class=\"stzh-contact__pobox\" innerHTML={this.pobox}>\n {!this.pobox && (\n <Fragment>\n {this.poboxHeading && <div class=\"stzh-contact__pobox-heading\">{this.poboxHeading}</div>}\n {this.poboxTitle && <div class=\"stzh-contact__pobox-title\">{this.poboxTitle}</div>}\n {this.poboxPostalCode && (\n <span class=\"stzh-contact__pobox-postal-code\">{this.poboxPostalCode} </span>\n )}\n {this.poboxLocation && <span class=\"stzh-contact__pobox-locality\">{this.poboxLocation}</span>}\n <slot name=\"pobox\"></slot>\n </Fragment>\n )}\n </div>\n </div>\n\n {this.availability && (\n <div class=\"stzh-contact__availability\">\n {this.availabilityTitle && (\n <AvailabilityTitleElement class=\"stzh-contact__availability-title\">\n {this.availabilityTitle}\n </AvailabilityTitleElement>\n )}\n\n {this._availability.length > 0 && (\n <ul class=\"stzh-contact__availability-list\">\n {this._availability.map(item => (\n <li class=\"stzh-contact__availability-list-item\">\n <div class=\"stzh-contact__availability-weekday\">{item.weekday}</div>\n {item.hours.length > 0 && (\n <div class=\"stzh-contact__availability-hours\">\n {item.hours.map((hour, index) => (\n <Fragment>\n <div class=\"stzh-contact__availability-hour\">{hour}</div>\n {index < item.hours.length - 1 && (\n <div class=\"stzh-contact__availability-hours-separator\"></div>\n )}\n </Fragment>\n ))}\n </div>\n )}\n </li>\n ))}\n </ul>\n )}\n </div>\n )}\n\n <div class=\"stzh-contact__additional\">\n <slot></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/stzh-datalist_2.entry.js CHANGED Viewed

@@ -145,7 +145,7 @@ const StzhDatalist = class {
 };
 StzhDatalist.style = stzhDatalistCss;
-const stzhDatalistItemCss = ".sc-stzh-datalist-item-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-item-h,[stzh-hidden].sc-stzh-datalist-item-h{display:none}.sc-stzh-datalist-item-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-datalist-item-h *.sc-stzh-datalist-item,.sc-stzh-datalist-item-h *.sc-stzh-datalist-item::before,.sc-stzh-datalist-item-h *.sc-stzh-datalist-item::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-item-h .has-focus.sc-stzh-datalist-item{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-datalist-item-h .stzh-fylingfocus-focused.sc-stzh-datalist-item{outline-style:none !important}.sc-stzh-datalist-item-h .stzh-fylingfocus-focused.sc-stzh-datalist-item::-moz-focus-inner{border:0 !important}.sc-stzh-datalist-item-h{--value-font-family:var(--stzh-font-family-medium);--value-font-weight:var(--stzh-font-weight-medium);--value-color:inherit;--action-display:flex;--leading-icon-color:var(--stzh-color-grey90);--nested-display:var(--stzh-datalist-item-nested-display, block);--wrapper-display:var(--stzh-datalist-item-wrapper-display, contents);--text-overflow:ellipsis;--white-space:nowrap;--overflow:hidden;--max-width:100%;display:contents}[href].sc-stzh-datalist-item-h:not([href=\"\"]),[a11y-expanded].sc-stzh-datalist-item-h,[a11y-controls].sc-stzh-datalist-item-h{--value-color:var(--stzh-link-color);--value-hover-color:var(--stzh-link-hover-color)}.no-text-truncate.sc-stzh-datalist-item-h{--text-overflow:clip;--white-space:normal;--overflow:visible;--width:initial;--max-width:initial}.stzh-datalist-item.sc-stzh-datalist-item{position:relative;-webkit-text-decoration-line:none;text-decoration-line:none;display:flex;align-items:center}.stzh-datalist-item__nested.sc-stzh-datalist-item{display:contents}.stzh-datalist-item__nested-inner.sc-stzh-datalist-item{display:var(--nested-display);grid-column:var(--full-grid-column)}.stzh-datalist-item__vhidden.sc-stzh-datalist-item{border:0;clip:rect(0 0 0 0);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-datalist-item__wrapper.sc-stzh-datalist-item{flex-grow:1;display:grid}.stzh-datalist-item__leading.sc-stzh-datalist-item,.stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item__meta.sc-stzh-datalist-item,.stzh-datalist-item__action-list.sc-stzh-datalist-item{color:inherit;display:flex;text-align:left;appearance:none;font-family:inherit;background:transparent;border:none;padding:0;-webkit-text-decoration-line:none;text-decoration-line:none}.stzh-datalist-item__leading.is-button.sc-stzh-datalist-item,.stzh-datalist-item__leading.is-link.sc-stzh-datalist-item,.stzh-datalist-item__value.is-button.sc-stzh-datalist-item,.stzh-datalist-item__value.is-link.sc-stzh-datalist-item,.stzh-datalist-item__label.is-button.sc-stzh-datalist-item,.stzh-datalist-item__label.is-link.sc-stzh-datalist-item,.stzh-datalist-item__meta.is-button.sc-stzh-datalist-item,.stzh-datalist-item__meta.is-link.sc-stzh-datalist-item,.stzh-datalist-item__action-list.is-button.sc-stzh-datalist-item,.stzh-datalist-item__action-list.is-link.sc-stzh-datalist-item{cursor:pointer}.stzh-datalist-item__leading.sc-stzh-datalist-item{flex-shrink:0}.stzh-datalist-item__leading.sc-stzh-datalist-item:not(:empty){padding-right:var(--stzh-space-xsmall)}.stzh-datalist-item__leading-icon-container.sc-stzh-datalist-item{color:var(--leading-icon-color);transition-property:color, background-color;transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-datalist-item__value-wrapper.sc-stzh-datalist-item{display:flex;align-items:center;gap:var(--stzh-space-xsmall);color:var(--value-color);transition:color var(--stzh-base-transition-animation-speed)}.stzh-datalist-item__value.sc-stzh-datalist-item{flex-grow:1;flex-direction:column}.stzh-datalist-item__value-text.sc-stzh-datalist-item{--color:initial;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);font-family:var(--value-font-family);font-weight:var(--value-font-weight);width:auto}@media screen and (min-width: 900px){.stzh-datalist-item__value-text.sc-stzh-datalist-item{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-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item__meta.sc-stzh-datalist-item{font-size:var(--stzh-font-curve-caption-default-font-size, var(--stzh-font-nano-font-size));line-height:var(--stzh-font-curve-caption-default-text-line-height, var(--stzh-font-nano-text-line-height))}@media screen and (min-width: 900px){.stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item__meta.sc-stzh-datalist-item{font-size:var(--stzh-font-curve-caption-medium-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-caption-medium-text-line-height, var(--stzh-font-micro-text-line-height))}}.stzh-datalist-item__meta.sc-stzh-datalist-item{justify-content:flex-end}.stzh-datalist-item__meta-text.sc-stzh-datalist-item{display:flex;gap:var(--stzh-space-xsmall);color:var(--stzh-color-grey70)}.stzh-datalist-item__label.sc-stzh-datalist-item{color:var(--stzh-color-grey90)}.stzh-datalist-item__action-list.sc-stzh-datalist-item{display:var(--action-display);justify-content:center;text-align:center}.stzh-datalist-item__action-list.sc-stzh-datalist-item:not(:empty){padding-left:var(--stzh-space-medium)}.stzh-datalist-item__action.is-non-interactive.sc-stzh-datalist-item{display:flex;justify-content:center;align-items:center;width:var(--stzh-form-input-small-height);height:var(--stzh-form-input-small-height)}.stzh-datalist-item__interactive.sc-stzh-datalist-item{position:absolute;top:0;left:0}.stzh-datalist-item__readspeaker.sc-stzh-datalist-item{width:-moz-fit-content;width:fit-content}.stzh-datalist-item--is-button.sc-stzh-datalist-item .stzh-datalist-item__icon.is-open.sc-stzh-datalist-item{display:none}.stzh-datalist-item--is-button.stzh-datalist-item--is-expanded.sc-stzh-datalist-item .stzh-datalist-item__icon.is-closed.sc-stzh-datalist-item{display:none}.stzh-datalist-item--is-button.stzh-datalist-item--is-expanded.sc-stzh-datalist-item .stzh-datalist-item__icon.is-open.sc-stzh-datalist-item{display:inline-flex}.stzh-datalist-item--is-interactive.sc-stzh-datalist-item .stzh-datalist-item__value-text.sc-stzh-datalist-item{-webkit-text-decoration-line:underline;text-decoration-line:underline}.stzh-datalist-item--is-interactive.sc-stzh-datalist-item:hover .stzh-datalist-item__value-wrapper.sc-stzh-datalist-item{color:var(--value-hover-color)}.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__wrapper.sc-stzh-datalist-item{flex-grow:inherit}.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__leading.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__wrapper.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__action-list.sc-stzh-datalist-item:not(:empty){padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-xsmall)}.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item{flex-direction:column;align-items:flex-start}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__leading.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__value.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__action-list.sc-stzh-datalist-item:not(:empty){padding-top:var(--stzh-space-xxsmall);padding-bottom:var(--stzh-space-xxsmall)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item{padding-bottom:var(--stzh-space-xxsmall);padding-top:calc(var(--stzh-space-xxsmall) + 0.75rem)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__readspeaker.sc-stzh-datalist-item{padding-bottom:var(--stzh-space-xxsmall);padding-top:var(--stzh-space-xxsmall);padding-left:var(--stzh-space-medium)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item:not(:empty){padding-left:var(--stzh-space-xsmall)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__meta-status.sc-stzh-datalist-item+.stzh-datalist-item__meta-text.sc-stzh-datalist-item{margin-left:var(--stzh-space-xsmall)}.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item{color:var(--stzh-color-grey70)}.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__value-text.sc-stzh-datalist-item{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__leading.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__value.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__action-list.sc-stzh-datalist-item:not(:empty){padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-small)}.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item:not(:empty)+.stzh-datalist-item__value.sc-stzh-datalist-item{padding-left:var(--stzh-space-medium)}.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item:not(:empty){padding-left:var(--stzh-space-medium)}.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);color:var(--stzh-color-grey80)}.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__leading.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__value.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__action-list.sc-stzh-datalist-item:not(:empty){padding-top:0;padding-bottom:0}@media screen and (min-width: 600px){.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__leading.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__value.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__action-list.sc-stzh-datalist-item:not(:empty){padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-small)}}.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item:not(:empty)+.stzh-datalist-item__value.sc-stzh-datalist-item{padding-left:var(--stzh-space-medium)}@media screen and (max-width: 599px){.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item:not(:empty)+.stzh-datalist-item__value.sc-stzh-datalist-item{padding-left:0}}";
+const stzhDatalistItemCss = ".sc-stzh-datalist-item-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-item-h,[stzh-hidden].sc-stzh-datalist-item-h{display:none}.sc-stzh-datalist-item-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-datalist-item-h *.sc-stzh-datalist-item,.sc-stzh-datalist-item-h *.sc-stzh-datalist-item::before,.sc-stzh-datalist-item-h *.sc-stzh-datalist-item::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-item-h .has-focus.sc-stzh-datalist-item{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-datalist-item-h .stzh-fylingfocus-focused.sc-stzh-datalist-item{outline-style:none !important}.sc-stzh-datalist-item-h .stzh-fylingfocus-focused.sc-stzh-datalist-item::-moz-focus-inner{border:0 !important}.sc-stzh-datalist-item-h{--value-font-family:var(--stzh-font-family-medium);--value-font-weight:var(--stzh-font-weight-medium);--value-color:inherit;--action-display:flex;--leading-icon-color:var(--stzh-color-grey90);--nested-display:var(--stzh-datalist-item-nested-display, block);--wrapper-display:var(--stzh-datalist-item-wrapper-display, contents);--text-overflow:ellipsis;--white-space:nowrap;--overflow:hidden;--max-width:100%;display:contents}[href].sc-stzh-datalist-item-h:not([href=\"\"]),[a11y-expanded].sc-stzh-datalist-item-h,[a11y-controls].sc-stzh-datalist-item-h{--value-color:var(--stzh-link-color);--value-hover-color:var(--stzh-link-hover-color)}.no-text-truncate.sc-stzh-datalist-item-h{--text-overflow:clip;--white-space:normal;--overflow:visible;--width:initial;--max-width:initial}.stzh-datalist-item.sc-stzh-datalist-item{position:relative;-webkit-text-decoration-line:none;text-decoration-line:none;display:var(--wrapper-display);align-items:center}.stzh-datalist-item__nested.sc-stzh-datalist-item{display:contents}.stzh-datalist-item__nested-inner.sc-stzh-datalist-item{display:var(--nested-display);grid-column:var(--full-grid-column)}.stzh-datalist-item__vhidden.sc-stzh-datalist-item{border:0;clip:rect(0 0 0 0);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-datalist-item__wrapper.sc-stzh-datalist-item{flex-grow:1;display:grid}.stzh-datalist-item__leading.sc-stzh-datalist-item,.stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item__meta.sc-stzh-datalist-item,.stzh-datalist-item__action-list.sc-stzh-datalist-item{color:inherit;display:flex;text-align:left;appearance:none;font-family:inherit;background:transparent;border:none;padding:0;-webkit-text-decoration-line:none;text-decoration-line:none}.stzh-datalist-item__leading.is-button.sc-stzh-datalist-item,.stzh-datalist-item__leading.is-link.sc-stzh-datalist-item,.stzh-datalist-item__value.is-button.sc-stzh-datalist-item,.stzh-datalist-item__value.is-link.sc-stzh-datalist-item,.stzh-datalist-item__label.is-button.sc-stzh-datalist-item,.stzh-datalist-item__label.is-link.sc-stzh-datalist-item,.stzh-datalist-item__meta.is-button.sc-stzh-datalist-item,.stzh-datalist-item__meta.is-link.sc-stzh-datalist-item,.stzh-datalist-item__action-list.is-button.sc-stzh-datalist-item,.stzh-datalist-item__action-list.is-link.sc-stzh-datalist-item{cursor:pointer}.stzh-datalist-item__leading.sc-stzh-datalist-item{flex-shrink:0}.stzh-datalist-item__leading.sc-stzh-datalist-item:not(:empty){padding-right:var(--stzh-space-xsmall)}.stzh-datalist-item__leading-icon-container.sc-stzh-datalist-item{color:var(--leading-icon-color);transition-property:color, background-color;transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-datalist-item__value-wrapper.sc-stzh-datalist-item{display:flex;align-items:center;gap:var(--stzh-space-xsmall);color:var(--value-color);transition:color var(--stzh-base-transition-animation-speed)}.stzh-datalist-item__value.sc-stzh-datalist-item{flex-grow:1;flex-direction:column}.stzh-datalist-item__value-text.sc-stzh-datalist-item{--color:initial;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);font-family:var(--value-font-family);font-weight:var(--value-font-weight);width:auto}@media screen and (min-width: 900px){.stzh-datalist-item__value-text.sc-stzh-datalist-item{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-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item__meta.sc-stzh-datalist-item{font-size:var(--stzh-font-curve-caption-default-font-size, var(--stzh-font-nano-font-size));line-height:var(--stzh-font-curve-caption-default-text-line-height, var(--stzh-font-nano-text-line-height))}@media screen and (min-width: 900px){.stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item__meta.sc-stzh-datalist-item{font-size:var(--stzh-font-curve-caption-medium-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-caption-medium-text-line-height, var(--stzh-font-micro-text-line-height))}}.stzh-datalist-item__meta.sc-stzh-datalist-item{justify-content:flex-end}.stzh-datalist-item__meta-text.sc-stzh-datalist-item{display:flex;gap:var(--stzh-space-xsmall);color:var(--stzh-color-grey70)}.stzh-datalist-item__label.sc-stzh-datalist-item{color:var(--stzh-color-grey90)}.stzh-datalist-item__action-list.sc-stzh-datalist-item{display:var(--action-display);justify-content:center;text-align:center}.stzh-datalist-item__action-list.sc-stzh-datalist-item:not(:empty){padding-left:var(--stzh-space-medium)}.stzh-datalist-item__action.is-non-interactive.sc-stzh-datalist-item{display:flex;justify-content:center;align-items:center;width:var(--stzh-form-input-small-height);height:var(--stzh-form-input-small-height)}.stzh-datalist-item__interactive.sc-stzh-datalist-item{position:absolute;top:0;left:0}.stzh-datalist-item__readspeaker.sc-stzh-datalist-item{width:-moz-fit-content;width:fit-content}.stzh-datalist-item--is-button.sc-stzh-datalist-item .stzh-datalist-item__icon.is-open.sc-stzh-datalist-item{display:none}.stzh-datalist-item--is-button.stzh-datalist-item--is-expanded.sc-stzh-datalist-item .stzh-datalist-item__icon.is-closed.sc-stzh-datalist-item{display:none}.stzh-datalist-item--is-button.stzh-datalist-item--is-expanded.sc-stzh-datalist-item .stzh-datalist-item__icon.is-open.sc-stzh-datalist-item{display:inline-flex}.stzh-datalist-item--is-interactive.sc-stzh-datalist-item .stzh-datalist-item__value-text.sc-stzh-datalist-item{-webkit-text-decoration-line:underline;text-decoration-line:underline}.stzh-datalist-item--is-interactive.sc-stzh-datalist-item:hover .stzh-datalist-item__value-wrapper.sc-stzh-datalist-item{color:var(--value-hover-color)}.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__wrapper.sc-stzh-datalist-item{flex-grow:inherit}.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__leading.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__wrapper.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__action-list.sc-stzh-datalist-item:not(:empty){padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-xsmall)}.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item{flex-direction:column;align-items:flex-start}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__leading.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__value.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__action-list.sc-stzh-datalist-item:not(:empty){padding-top:var(--stzh-space-xxsmall);padding-bottom:var(--stzh-space-xxsmall)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item{padding-bottom:var(--stzh-space-xxsmall);padding-top:calc(var(--stzh-space-xxsmall) + 0.75rem)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__readspeaker.sc-stzh-datalist-item{padding-bottom:var(--stzh-space-xxsmall);padding-top:var(--stzh-space-xxsmall);padding-left:var(--stzh-space-medium)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item:not(:empty){padding-left:var(--stzh-space-xsmall)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__meta-status.sc-stzh-datalist-item+.stzh-datalist-item__meta-text.sc-stzh-datalist-item{margin-left:var(--stzh-space-xsmall)}.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item{color:var(--stzh-color-grey70)}.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__value-text.sc-stzh-datalist-item{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__leading.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__value.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__action-list.sc-stzh-datalist-item:not(:empty){padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-small)}.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item:not(:empty)+.stzh-datalist-item__value.sc-stzh-datalist-item{padding-left:var(--stzh-space-medium)}.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item:not(:empty){padding-left:var(--stzh-space-medium)}.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);color:var(--stzh-color-grey80)}.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__leading.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__value.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__action-list.sc-stzh-datalist-item:not(:empty){padding-top:0;padding-bottom:0}@media screen and (min-width: 600px){.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__leading.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__value.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__action-list.sc-stzh-datalist-item:not(:empty){padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-small)}}.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item:not(:empty)+.stzh-datalist-item__value.sc-stzh-datalist-item{padding-left:var(--stzh-space-medium)}@media screen and (max-width: 599px){.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item:not(:empty)+.stzh-datalist-item__value.sc-stzh-datalist-item{padding-left:0}}";
 let datalistItemCounter = 0;
 const StzhDatalistItem = class {

package/dist/esm/stzh-datalist_2.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"stzh-datalist.stzh-datalist-item.entry.js","mappings":"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","names":[],"sources":["src/components/stzh-datalist/stzh-datalist.scss?tag=stzh-datalist&encapsulation=scoped","src/components/stzh-datalist/stzh-datalist.tsx","src/components/stzh-datalist-item/stzh-datalist-item.scss?tag=stzh-datalist-item&encapsulation=scoped","src/components/stzh-datalist-item/stzh-datalist-item.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(var(--columns), auto minmax(auto, 1fr) auto var(--columns-gap));\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(var(--columns), auto minmax(auto, 1fr) auto auto var(--columns-gap));\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(var(--columns), auto minmax(auto, 1fr) minmax(auto, 1fr) auto var(--columns-gap));\n }\n }\n\n &[variant=\"table\"] {\n --list-grid-template-columns: repeat(var(--columns), auto auto minmax(auto, 1fr) auto auto var(--columns-gap));\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(var(--columns), auto auto minmax(auto, 1fr) minmax(auto, 1fr) auto var(--columns-gap));\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\n /\n Whether to disable min-width of datalist item label for the `horizontal` variant.\n \n If `false`, the default `min-width` is `144px` (for >= 800px) and `120px` (for < 800px).\n * If `true`, the `min-width` is `none`, so the label column, will have the width of cell with the widest content.\n \n You can also overwrite the label min-width via CSS with the custom property `--item-label-min-width`.\n /\n // @Prop({ reflect: true }) disableLabelMinWidth: boolean = false;\n\n /\n Items in datalist\n * Array of objects that must at least include `value` attribute.\n * Can optionally contain `leadingIcon`, `label`, `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 };\n\n return (\n <Host\n is-direction={this.currentDirection}\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}>\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",":host {\n --value-font-family: var(--stzh-font-family-medium);\n --value-font-weight: var(--stzh-font-weight-medium);\n --value-color: inherit;\n --action-display: flex;\n --leading-icon-color: #{$colorGrey90};\n --nested-display: var(--stzh-datalist-item-nested-display, block);\n --wrapper-display: var(--stzh-datalist-item-wrapper-display, contents);\n\n --text-overflow: ellipsis;\n --white-space: nowrap;\n --overflow: hidden;\n --max-width: 100%;\n\n display: contents;\n\n &[href]:not([href=\"\"]),\n &[a11y-expanded],\n &[a11y-controls] {\n --value-color: #{$linkColor};\n --value-hover-color: #{$linkHoverColor};\n }\n}\n\n:host(.no-text-truncate) {\n --text-overflow: clip;\n --white-space: normal;\n --overflow: visible;\n --width: initial;\n --max-width: initial;\n}\n\n.stzh-datalist-item {\n position: relative;\n text-decoration-line: none;\n display: flex;\n align-items: center;\n\n &__nested {\n display: contents;\n }\n\n &__nested-inner {\n display: var(--nested-display);\n grid-column: var(--full-grid-column);\n }\n\n &__vhidden {\n @include visuallyhidden;\n }\n\n &__wrapper {\n flex-grow: 1;\n display: grid;\n }\n\n &__leading,\n &__value,\n &__label,\n &__meta,\n &__action-list {\n color: inherit;\n display: flex;\n text-align: left;\n appearance: none;\n font-family: inherit;\n background: transparent;\n border: none;\n padding: 0;\n text-decoration-line: none;\n\n &.is-button,\n &.is-link {\n cursor: pointer;\n }\n }\n\n &__leading {\n flex-shrink: 0;\n\n &:not(:empty) {\n padding-right: space('xsmall');\n }\n }\n\n &__leading-icon-container {\n color: var(--leading-icon-color);\n transition-property: color, background-color;\n transition-duration: $baseTransitionAnimationSpeed;\n }\n\n &__value-wrapper {\n display: flex;\n align-items: center;\n gap: space('xsmall');\n color: var(--value-color);\n transition: color $baseTransitionAnimationSpeed;\n }\n\n &__value {\n flex-grow: 1;\n flex-direction: column;\n }\n\n &__value-text {\n --color: initial;\n\n @include fontCurve('p1');\n font-family: var(--value-font-family);\n font-weight: var(--value-font-weight);\n width: auto;\n }\n\n &__label,\n &__meta {\n @include fontCurve('caption');\n }\n\n &__meta {\n justify-content: flex-end;\n }\n\n &__meta-text {\n display: flex;\n gap: space('xsmall');\n color: $colorGrey70;\n }\n\n &__label {\n color: $colorGrey90;\n }\n\n &__action-list {\n display: var(--action-display);\n justify-content: center;\n text-align: center;\n\n &:not(:empty) {\n padding-left: space('medium');\n }\n }\n\n &__action {\n &.is-non-interactive {\n display: flex;\n justify-content: center;\n align-items: center;\n width: $formInputHeightSmall;\n height: $formInputHeightSmall;\n }\n }\n\n &__interactive {\n position: absolute;\n top: 0;\n left: 0;\n }\n\n &__readspeaker {\n width: fit-content;\n }\n\n / Button variant /\n\n &--is-button &__icon.is-open {\n display: none;\n }\n\n &--is-button#{&}--is-expanded &__icon {\n &.is-closed {\n display: none;\n }\n\n &.is-open {\n display: inline-flex;\n }\n }\n\n / Interactive variant /\n\n &--is-interactive &__value-text {\n text-decoration-line: underline;\n }\n\n &--is-interactive:hover &__value-wrapper {\n color: var(--value-hover-color);\n }\n\n &--direction-vertical &__wrapper {\n flex-grow: inherit;\n }\n\n &--direction-vertical &__leading,\n &--direction-vertical &__wrapper,\n &--direction-vertical &__action-list {\n &:not(:empty) {\n padding-top: space('xsmall');\n padding-bottom: space('xsmall');\n }\n }\n\n &--direction-vertical &__meta {\n flex-direction: column;\n align-items: flex-start;\n }\n\n / Horizontal / Table Variant /\n\n &--direction-horizontal &__leading,\n &--direction-horizontal &__value,\n &--direction-horizontal &__action-list {\n &:not(:empty) {\n padding-top: space('xxsmall');\n padding-bottom: space('xxsmall');\n }\n }\n\n &--direction-horizontal &__meta {\n padding-bottom: space('xxsmall');\n padding-top: calc(#{space('xxsmall')} + 12px);\n }\n\n &--direction-horizontal &__readspeaker {\n padding-bottom: space('xxsmall');\n padding-top: space('xxsmall');\n padding-left: space('medium');\n }\n\n &--direction-horizontal &__meta {\n &:not(:empty) {\n padding-left: space('xsmall');\n }\n }\n\n &--direction-horizontal &__meta-status + &__meta-text {\n margin-left: space('xsmall');\n }\n\n /* Table Variant /\n\n &--table &__label,\n &--table &__meta {\n @include fontSize('nano');\n }\n\n &--table &__label {\n color: $colorGrey70;\n }\n\n &--table &__value-text {\n @include fontSize('milli');\n }\n\n &--table &__leading,\n &--table &__value,\n &--table &__label,\n &--table &__meta,\n &--table &__action-list {\n &:not(:empty) {\n padding-top: space('xsmall');\n padding-bottom: space('small');\n }\n }\n\n &--table &__label:not(:empty) + &__value {\n padding-left: space('medium');\n }\n\n &--table &__meta {\n &:not(:empty) {\n padding-left: space('medium');\n }\n }\n\n /* Big label /\n\n &--table#{&}--big-label &__label {\n @include font('heavy');\n @include fontSize('milli');\n color: $colorGrey80;\n }\n\n &--table#{&}--big-label &__leading,\n &--table#{&}--big-label &__value,\n &--table#{&}--big-label &__label,\n &--table#{&}--big-label &__meta,\n &--table#{&}--big-label &__action-list {\n &:not(:empty) {\n padding-top: 0;\n padding-bottom: 0;\n\n @include mq($from: small) {\n padding-top: space('xsmall');\n padding-bottom: space('small');\n }\n }\n }\n\n &--table#{&}--big-label &__label:not(:empty) + &__value {\n padding-left: space('medium');\n\n @include mq($to: small) {\n padding-left: 0;\n }\n }\n}\n","import { Component, Element, Event, EventEmitter, Fragment, h, Host, Prop, State, Watch } from \"@stencil/core\";\n\nimport {\n StzhDatalistBigLabelChangeEvent,\n StzhDatalistDirection,\n StzhDatalistDirectionChangeEvent,\n StzhDatalistItemActionClickEvent,\n StzhDatalistItemClickEvent,\n StzhDatalistVariant,\n StzhDatalistVariantChangeEvent,\n StzhStatusType,\n} from \"../../index\";\n\nimport { addWordBreakToLinks } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../index\";\n\nlet datalistItemCounter = 0;\n\n/\n @slot - Slot for nested datalist\n * @slot value - Slot for value (or use value slot instead)\n * @slot readspeaker - Slot for readspeaker\n /\n@Component({\n tag: \"stzh-datalist-item\",\n styleUrl: \"stzh-datalist-item.scss\",\n scoped: true,\n})\nexport class StzhDatalistItem {\n /* Translation strings /\n @Prop() localization: StzhLocaleComponent;\n\n /* Link /\n @Prop({ reflect: true }) href: string;\n\n /* Rel (if href is used) /\n @Prop() rel: string;\n\n /* Target (if href is used) /\n @Prop() target: string;\n\n /* Download attribute of link (if `href` used) /\n @Prop() download: string;\n\n /* Leading icon /\n @Prop() leadingIcon: string;\n\n /* Icon of action button (if href is used, will only be for presentation) /\n @Prop() icon: string;\n\n /* Icon position /\n @Prop() iconPosition: \"left\" \| \"right\" = \"right\";\n\n /* Overwrite aria-label of action button (default aria label is `label` and `value`). /\n @Prop() iconLabel: string;\n\n /* Tooltip content of action button. Overwrites aria-label (set by default or `iconLabel`) of action button. /\n @Prop() iconTooltip: string;\n\n /* Href of action button /\n @Prop() iconHref: string;\n\n /* Label /\n @Prop() label: string = \"\";\n\n /* Value (or use value slot instead) /\n @Prop() value: string = \"\";\n\n /* Whether text should be truncate or not /\n @Prop() noTextTruncate: boolean = false; \n\n /* Readspeaker label /\n @Prop() readspeakerLabel: string = \"\";\n\n /* Readspeaker link /\n @Prop() readspeakerHref: string = \"\";\n\n /* Meta /\n @Prop({ reflect: true }) meta: string \| string[] = \"\";\n private _meta: string[] = [];\n\n /* Status Label /\n @Prop({ reflect: true }) statusLabel: string = \"\";\n\n /* Status Type /\n @Prop() statusType: StzhStatusType = \"default\";\n\n /* Aria expanded of link/button /\n @Prop({ reflect: true, attribute: \"a11y-expanded\" }) a11yExpanded: boolean;\n\n /* Aria controls of link/button /\n @Prop({ attribute: \"a11y-controls\" }) a11yControls: string;\n\n /* Item action click event /\n @Event() stzhItemActionClick: EventEmitter<StzhDatalistItemActionClickEvent>;\n\n /* Item click event */\n @Event() stzhClick: EventEmitter<StzhDatalistItemClickEvent>;\n\n @Element() element: HTMLStzhDatalistItemElement;\n\n @Watch(\"meta\")\n metaWatcher(newValue: string[] \| string) {\n if (typeof newValue === \"string\") {\n try {\n this._meta = JSON.parse(newValue);\n } catch (ex) {\n this._meta = newValue === \"\" ? [] : [newValue];\n }\n } else {\n this._meta = newValue;\n }\n }\n\n @Watch(\"rel\")\n externalWatcher() {\n this.external = this.rel && this.rel.includes(\"external\");\n }\n\n @Watch(\"href\")\n hrefWatcher() {\n this.isPhone = this.href && (this.href.startsWith(\"tel:\") \|\| this.href.startsWith(\"fax:\"));\n }\n\n @State() direction: StzhDatalistDirection = \"vertical\";\n @State() variant: StzhDatalistVariant = \"default\";\n @State() bigLabel: boolean = false;\n\n private external: boolean = false;\n private isPhone: boolean = false;\n private datalist: HTMLStzhDatalistElement;\n private datalistItemId: string;\n\n private onActionClick = (originalEvent: MouseEvent) => {\n this.stzhItemActionClick.emit({\n component: \"stzh-datalist-item\",\n originalEvent,\n });\n };\n\n private onClick = (event: MouseEvent) => {\n this.stzhClick.emit({\n component: \"stzh-datalist-item\",\n originalEvent: event,\n href: this.href,\n });\n };\n\n private handleDirectionChange = (event: CustomEvent<StzhDatalistDirectionChangeEvent>) => {\n this.direction = event.detail.value;\n };\n\n private handleVariantChange = (event: CustomEvent<StzhDatalistVariantChangeEvent>) => {\n this.variant = event.detail.value;\n };\n\n private handleBigLabelChange = (event: CustomEvent<StzhDatalistBigLabelChangeEvent>) => {\n this.bigLabel = event.detail.value;\n };\n\n private addWordBreakToLinks() {\n const links = Array.from(\n this.element?.getElementsByClassName(\"stzh-datalist-item__value-text\") \|\| []\n );\n addWordBreakToLinks(links as HTMLElement[]);\n }\n\n private renderInner(isButton: boolean, hasActionButton: boolean): DocumentFragment {\n const Item = isButton ? \"button\" : this.href ? \"a\" : \"div\";\n\n const Icon = () => (\n <Fragment>\n {(this.href \|\| this.icon) && !hasActionButton && !isButton && (\n <div class=\"stzh-datalist-item__label-icon\">\n <stzh-icon\n class=\"stzh-datalist-item__icon\"\n name={this.icon ? this.icon : this.isPhone ? \"phone\" : this.external && \"external-link\"}\n ></stzh-icon>\n </div>\n )}\n\n {isButton && (\n <div class=\"stzh-datalist-item__label-icon\">\n <stzh-icon class=\"stzh-datalist-item__icon is-closed\" name={this.icon ? this.icon : \"plus\"}></stzh-icon>\n <stzh-icon class=\"stzh-datalist-item__icon is-open\" name={this.icon ? this.icon : \"minus\"}></stzh-icon>\n </div>\n )}\n </Fragment>\n );\n\n return (\n <Fragment>\n {this.variant === \"table\" && (\n <Item\n aria-hidden={this.label ? null : \"true\"}\n tabindex=\"-1\"\n id={`${this.datalistItemId}-label`}\n class={{\n \"stzh-datalist-item__label\": true,\n \"is-button\": isButton,\n \"is-link\": !!this.href,\n }}\n href={this.href}\n rel={this.rel}\n target={this.target}\n download={this.download}\n onClick={this.onClick}\n >\n {this.label}\n </Item>\n )}\n\n <Item\n id={`${this.datalistItemId}-value`}\n class={{\n \"stzh-datalist-item__value\": true,\n \"is-button\": isButton,\n \"is-link\": !!this.href,\n }}\n href={this.href}\n rel={this.rel}\n target={this.target}\n download={this.download}\n // aria-labelledby={Item !== 'div' ? `${this.datalistItemId}-label ${this.datalistItemId}-value ${this.datalistItemId}-meta` : null}\n aria-labelledby={\n Item !== \"div\"\n ? `${this.variant === \"table\" ? `${this.datalistItemId}-label` : \"\"} ${this.datalistItemId}-value ${\n this.datalistItemId\n }-meta`\n : null\n }\n aria-controls={this.a11yControls \|\| null}\n aria-expanded={typeof this.a11yExpanded !== \"undefined\" ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n onClick={this.onClick}\n >\n {this.variant === \"default\" && <div class=\"stzh-datalist-item__label\">{this.label}</div>}\n\n {this.external && (\n <div class=\"stzh-datalist-item__vhidden\">{this.localization.$globals.externalLinkLabel}</div>\n )}\n {this.download && (\n <div class=\"stzh-datalist-item__vhidden\">{this.localization.$globals.downloadLinkLabel}</div>\n )}\n\n <div class=\"stzh-datalist-item__value-wrapper\">\n {this.iconPosition === \"left\" && <Icon></Icon>}\n {this.value ? (\n <stzh-text curve=\"none\" class=\"stzh-datalist-item__value-text\" innerHTML={this.value}></stzh-text>\n ) : (\n <stzh-text curve=\"none\" class=\"stzh-datalist-item__value-text\">\n <slot name=\"value\"></slot>\n </stzh-text>\n )}\n {this.iconPosition === \"right\" && <Icon></Icon>}\n </div>\n </Item>\n\n <Item\n aria-hidden={this.statusLabel \|\| this._meta.length > 0 ? null : \"true\"}\n tabindex=\"-1\"\n id={`${this.datalistItemId}-meta`}\n class={{\n \"stzh-datalist-item__meta\": true,\n \"is-button\": isButton,\n \"is-link\": !!this.href,\n }}\n href={this.href}\n rel={this.rel}\n target={this.target}\n download={this.download}\n onClick={this.onClick}\n >\n {this.statusLabel && (\n <stzh-status\n class=\"stzh-datalist-item__meta-status\"\n label={this.statusLabel}\n type={this.statusType}\n ></stzh-status>\n )}\n {this._meta.length > 0 && (\n <span class=\"stzh-datalist-item__meta-text\">\n {this._meta.map((meta, index) => (\n <Fragment>\n <span class=\"stzh-datalist-item__meta-text-inner\">{meta}</span>\n {index + 1 !== this._meta.length && <span class=\"stzh-datalist-item__meta-separator\">\|</span>}\n </Fragment>\n ))}\n </span>\n )}\n </Item>\n\n {this.readspeakerHref && this.readspeakerLabel && (\n <stzh-button\n class=\"stzh-datalist-item__readspeaker\"\n variant=\"tertiary-plain\"\n no-padding-left=\"true\"\n no-padding-right=\"true\"\n icon-position=\"right\"\n icon=\"volume-medium\"\n size=\"small\"\n href={this.readspeakerHref}\n target=\"_blank\"\n >\n {this.readspeakerLabel}\n </stzh-button>\n )}\n </Fragment>\n );\n }\n\n private renderLeadingIcon(isButton: boolean): HTMLElement {\n const Item = isButton ? \"button\" : this.href ? \"a\" : \"div\";\n\n return (\n <Item\n role=\"presentation\"\n aria-hidden=\"true\"\n tabindex=\"-1\"\n class={{\n \"stzh-datalist-item__leading\": true,\n \"is-button\": isButton,\n \"is-link\": !!this.href,\n }}\n href={this.href}\n rel={this.rel}\n target={this.target}\n download={this.download}\n onClick={this.onClick}\n >\n {this.leadingIcon && (\n <div class=\"stzh-datalist-item__leading-icon-container\">\n <stzh-icon class=\"stzh-datalist-item__leading-icon\" name={this.leadingIcon}></stzh-icon>\n </div>\n )}\n </Item>\n );\n }\n\n async componentDidLoad() {\n // execute connectedCallbck again, because sometimes has problem rendering\n this.connectedCallback();\n this.addWordBreakToLinks();\n }\n\n async componentWillLoad() {\n this.datalistItemId = `stzh-datalist-item-${datalistItemCounter++}`;\n this.metaWatcher(this.meta);\n this.externalWatcher();\n this.hrefWatcher();\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"datalist-item\");\n }\n }\n\n async connectedCallback() {\n this.datalist = this.element.closest(\"stzh-datalist\");\n\n if (this.datalist) {\n this.variant = this.datalist.variant;\n this.bigLabel = this.datalist.bigLabel;\n this.direction = await this.datalist.getCurrentDirection();\n\n this.datalist?.addEventListener(\"stzhDirectionChange\", this.handleDirectionChange);\n this.datalist?.addEventListener(\"stzhVariantChange\", this.handleVariantChange);\n this.datalist?.addEventListener(\"stzhBigLabelChange\", this.handleBigLabelChange);\n }\n }\n\n disconnectedCallback() {\n if (this.datalist) {\n this.datalist?.removeEventListener(\"stzhDirectionChange\", this.handleDirectionChange);\n this.datalist?.removeEventListener(\"stzhVariantChange\", this.handleVariantChange);\n this.datalist?.removeEventListener(\"stzhBigLabelChange\", this.handleBigLabelChange);\n this.datalist = null;\n }\n }\n\n render() {\n const isButton = typeof this.a11yExpanded !== \"undefined\" \|\| typeof this.a11yControls !== \"undefined\";\n\n const hasActionButton = !!((!this.href \|\| this.iconHref \|\| this.iconTooltip) && this.icon);\n\n const classes = {\n \"stzh-datalist-item\": true,\n \"stzh-datalist-item--is-interactive\": !!this.href \|\| isButton,\n \"stzh-datalist-item--is-link\": !!this.href,\n \"stzh-datalist-item--is-button\": isButton,\n \"stzh-datalist-item--is-expanded\": this.a11yExpanded,\n \"stzh-datalist-item--big-label\": this.bigLabel,\n [`stzh-datalist-item--direction-${this.direction}`]: !!this.direction && this.variant === \"default\",\n [`stzh-datalist-item--${this.variant}`]: !!this.variant,\n };\n\n let ActionItem = isButton ? \"button\" : hasActionButton ? \"div\" : \"a\";\n\n const ActionButton = () => {\n return (\n <stzh-button\n class={{\n \"stzh-datalist-item__action\": true,\n \"is-button\": true,\n }}\n variant=\"tertiary\"\n size=\"small\"\n aria-label={this.iconLabel}\n iconOnly={true}\n href={this.iconHref}\n icon={this.icon}\n onClick={this.onActionClick}\n ></stzh-button>\n );\n };\n\n return (\n <Host role=\"listitem\" class={{\"no-text-truncate\": !!this.href \|\| this.noTextTruncate}}>\n <div class={classes}>\n {this.direction === \"horizontal\" \|\| this.variant === \"table\" ? (\n <Fragment>\n {this.renderLeadingIcon(isButton)}\n {this.renderInner(isButton, hasActionButton)}\n </Fragment>\n ) : (\n <Fragment>\n {this.renderLeadingIcon(isButton)}\n <div class=\"stzh-datalist-item__wrapper\">{this.renderInner(isButton, hasActionButton)}</div>\n </Fragment>\n )}\n <ActionItem\n role={hasActionButton ? null : \"presentation\"}\n aria-hidden={hasActionButton ? null : \"true\"}\n tabindex=\"-1\"\n class={{\n \"stzh-datalist-item__action-list\": true,\n \"is-button\": isButton,\n \"is-link\": !!this.href && !this.iconHref,\n }}\n href={!this.iconHref ? this.href : null}\n rel={!this.iconHref ? this.rel : null}\n target={!this.iconHref ? this.target : null}\n download={!this.iconHref ? this.download : null}\n >\n {hasActionButton &&\n (this.iconTooltip ? (\n <stzh-tooltip content={this.iconTooltip}>{ActionButton()}</stzh-tooltip>\n ) : (\n ActionButton()\n ))}\n </ActionItem>\n\n <div class=\"stzh-datalist-item__spacer\"></div>\n </div>\n\n <div class=\"stzh-datalist-item__nested\">\n <div class=\"stzh-datalist-item__nested-inner\">\n <slot></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"stzh-datalist.stzh-datalist-item.entry.js","mappings":"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","names":[],"sources":["src/components/stzh-datalist/stzh-datalist.scss?tag=stzh-datalist&encapsulation=scoped","src/components/stzh-datalist/stzh-datalist.tsx","src/components/stzh-datalist-item/stzh-datalist-item.scss?tag=stzh-datalist-item&encapsulation=scoped","src/components/stzh-datalist-item/stzh-datalist-item.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(var(--columns), auto minmax(auto, 1fr) auto var(--columns-gap));\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(var(--columns), auto minmax(auto, 1fr) auto auto var(--columns-gap));\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(var(--columns), auto minmax(auto, 1fr) minmax(auto, 1fr) auto var(--columns-gap));\n }\n }\n\n &[variant=\"table\"] {\n --list-grid-template-columns: repeat(var(--columns), auto auto minmax(auto, 1fr) auto auto var(--columns-gap));\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(var(--columns), auto auto minmax(auto, 1fr) minmax(auto, 1fr) auto var(--columns-gap));\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\n /\n Whether to disable min-width of datalist item label for the `horizontal` variant.\n \n If `false`, the default `min-width` is `144px` (for >= 800px) and `120px` (for < 800px).\n * If `true`, the `min-width` is `none`, so the label column, will have the width of cell with the widest content.\n \n You can also overwrite the label min-width via CSS with the custom property `--item-label-min-width`.\n /\n // @Prop({ reflect: true }) disableLabelMinWidth: boolean = false;\n\n /\n Items in datalist\n * Array of objects that must at least include `value` attribute.\n * Can optionally contain `leadingIcon`, `label`, `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 };\n\n return (\n <Host\n is-direction={this.currentDirection}\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}>\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",":host {\n --value-font-family: var(--stzh-font-family-medium);\n --value-font-weight: var(--stzh-font-weight-medium);\n --value-color: inherit;\n --action-display: flex;\n --leading-icon-color: #{$colorGrey90};\n --nested-display: var(--stzh-datalist-item-nested-display, block);\n --wrapper-display: var(--stzh-datalist-item-wrapper-display, contents);\n\n --text-overflow: ellipsis;\n --white-space: nowrap;\n --overflow: hidden;\n --max-width: 100%;\n\n display: contents;\n\n &[href]:not([href=\"\"]),\n &[a11y-expanded],\n &[a11y-controls] {\n --value-color: #{$linkColor};\n --value-hover-color: #{$linkHoverColor};\n }\n}\n\n:host(.no-text-truncate) {\n --text-overflow: clip;\n --white-space: normal;\n --overflow: visible;\n --width: initial;\n --max-width: initial;\n}\n\n.stzh-datalist-item {\n position: relative;\n text-decoration-line: none;\n display: var(--wrapper-display);\n align-items: center;\n\n &__nested {\n display: contents;\n }\n\n &__nested-inner {\n display: var(--nested-display);\n grid-column: var(--full-grid-column);\n }\n\n &__vhidden {\n @include visuallyhidden;\n }\n\n &__wrapper {\n flex-grow: 1;\n display: grid;\n }\n\n &__leading,\n &__value,\n &__label,\n &__meta,\n &__action-list {\n color: inherit;\n display: flex;\n text-align: left;\n appearance: none;\n font-family: inherit;\n background: transparent;\n border: none;\n padding: 0;\n text-decoration-line: none;\n\n &.is-button,\n &.is-link {\n cursor: pointer;\n }\n }\n\n &__leading {\n flex-shrink: 0;\n\n &:not(:empty) {\n padding-right: space('xsmall');\n }\n }\n\n &__leading-icon-container {\n color: var(--leading-icon-color);\n transition-property: color, background-color;\n transition-duration: $baseTransitionAnimationSpeed;\n }\n\n &__value-wrapper {\n display: flex;\n align-items: center;\n gap: space('xsmall');\n color: var(--value-color);\n transition: color $baseTransitionAnimationSpeed;\n }\n\n &__value {\n flex-grow: 1;\n flex-direction: column;\n }\n\n &__value-text {\n --color: initial;\n\n @include fontCurve('p1');\n font-family: var(--value-font-family);\n font-weight: var(--value-font-weight);\n width: auto;\n }\n\n &__label,\n &__meta {\n @include fontCurve('caption');\n }\n\n &__meta {\n justify-content: flex-end;\n }\n\n &__meta-text {\n display: flex;\n gap: space('xsmall');\n color: $colorGrey70;\n }\n\n &__label {\n color: $colorGrey90;\n }\n\n &__action-list {\n display: var(--action-display);\n justify-content: center;\n text-align: center;\n\n &:not(:empty) {\n padding-left: space('medium');\n }\n }\n\n &__action {\n &.is-non-interactive {\n display: flex;\n justify-content: center;\n align-items: center;\n width: $formInputHeightSmall;\n height: $formInputHeightSmall;\n }\n }\n\n &__interactive {\n position: absolute;\n top: 0;\n left: 0;\n }\n\n &__readspeaker {\n width: fit-content;\n }\n\n / Button variant /\n\n &--is-button &__icon.is-open {\n display: none;\n }\n\n &--is-button#{&}--is-expanded &__icon {\n &.is-closed {\n display: none;\n }\n\n &.is-open {\n display: inline-flex;\n }\n }\n\n / Interactive variant /\n\n &--is-interactive &__value-text {\n text-decoration-line: underline;\n }\n\n &--is-interactive:hover &__value-wrapper {\n color: var(--value-hover-color);\n }\n\n / Vertical Variant /\n\n &--direction-vertical &__wrapper {\n flex-grow: inherit;\n }\n\n &--direction-vertical &__leading,\n &--direction-vertical &__wrapper,\n &--direction-vertical &__action-list {\n &:not(:empty) {\n padding-top: space('xsmall');\n padding-bottom: space('xsmall');\n }\n }\n\n &--direction-vertical &__meta {\n flex-direction: column;\n align-items: flex-start;\n }\n\n / Horizontal / Table Variant /\n\n &--direction-horizontal &__leading,\n &--direction-horizontal &__value,\n &--direction-horizontal &__action-list {\n &:not(:empty) {\n padding-top: space('xxsmall');\n padding-bottom: space('xxsmall');\n }\n }\n\n &--direction-horizontal &__meta {\n padding-bottom: space('xxsmall');\n padding-top: calc(#{space('xxsmall')} + 12px);\n }\n\n &--direction-horizontal &__readspeaker {\n padding-bottom: space('xxsmall');\n padding-top: space('xxsmall');\n padding-left: space('medium');\n }\n\n &--direction-horizontal &__meta {\n &:not(:empty) {\n padding-left: space('xsmall');\n }\n }\n\n &--direction-horizontal &__meta-status + &__meta-text {\n margin-left: space('xsmall');\n }\n\n /* Table Variant /\n\n &--table &__label,\n &--table &__meta {\n @include fontSize('nano');\n }\n\n &--table &__label {\n color: $colorGrey70;\n }\n\n &--table &__value-text {\n @include fontSize('milli');\n }\n\n &--table &__leading,\n &--table &__value,\n &--table &__label,\n &--table &__meta,\n &--table &__action-list {\n &:not(:empty) {\n padding-top: space('xsmall');\n padding-bottom: space('small');\n }\n }\n\n &--table &__label:not(:empty) + &__value {\n padding-left: space('medium');\n }\n\n &--table &__meta {\n &:not(:empty) {\n padding-left: space('medium');\n }\n }\n\n /* Big label /\n\n &--table#{&}--big-label &__label {\n @include font('heavy');\n @include fontSize('milli');\n color: $colorGrey80;\n }\n\n &--table#{&}--big-label &__leading,\n &--table#{&}--big-label &__value,\n &--table#{&}--big-label &__label,\n &--table#{&}--big-label &__meta,\n &--table#{&}--big-label &__action-list {\n &:not(:empty) {\n padding-top: 0;\n padding-bottom: 0;\n\n @include mq($from: small) {\n padding-top: space('xsmall');\n padding-bottom: space('small');\n }\n }\n }\n\n &--table#{&}--big-label &__label:not(:empty) + &__value {\n padding-left: space('medium');\n\n @include mq($to: small) {\n padding-left: 0;\n }\n }\n}\n","import { Component, Element, Event, EventEmitter, Fragment, h, Host, Prop, State, Watch } from \"@stencil/core\";\n\nimport {\n StzhDatalistBigLabelChangeEvent,\n StzhDatalistDirection,\n StzhDatalistDirectionChangeEvent,\n StzhDatalistItemActionClickEvent,\n StzhDatalistItemClickEvent,\n StzhDatalistVariant,\n StzhDatalistVariantChangeEvent,\n StzhStatusType,\n} from \"../../index\";\n\nimport { addWordBreakToLinks } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../index\";\n\nlet datalistItemCounter = 0;\n\n/\n @slot - Slot for nested datalist\n * @slot value - Slot for value (or use value slot instead)\n * @slot readspeaker - Slot for readspeaker\n /\n@Component({\n tag: \"stzh-datalist-item\",\n styleUrl: \"stzh-datalist-item.scss\",\n scoped: true,\n})\nexport class StzhDatalistItem {\n /* Translation strings /\n @Prop() localization: StzhLocaleComponent;\n\n /* Link /\n @Prop({ reflect: true }) href: string;\n\n /* Rel (if href is used) /\n @Prop() rel: string;\n\n /* Target (if href is used) /\n @Prop() target: string;\n\n /* Download attribute of link (if `href` used) /\n @Prop() download: string;\n\n /* Leading icon /\n @Prop() leadingIcon: string;\n\n /* Icon of action button (if href is used, will only be for presentation) /\n @Prop() icon: string;\n\n /* Icon position /\n @Prop() iconPosition: \"left\" \| \"right\" = \"right\";\n\n /* Overwrite aria-label of action button (default aria label is `label` and `value`). /\n @Prop() iconLabel: string;\n\n /* Tooltip content of action button. Overwrites aria-label (set by default or `iconLabel`) of action button. /\n @Prop() iconTooltip: string;\n\n /* Href of action button /\n @Prop() iconHref: string;\n\n /* Label /\n @Prop() label: string = \"\";\n\n /* Value (or use value slot instead) /\n @Prop() value: string = \"\";\n\n /* Whether text should be truncate or not /\n @Prop() noTextTruncate: boolean = false; \n\n /* Readspeaker label /\n @Prop() readspeakerLabel: string = \"\";\n\n /* Readspeaker link /\n @Prop() readspeakerHref: string = \"\";\n\n /* Meta /\n @Prop({ reflect: true }) meta: string \| string[] = \"\";\n private _meta: string[] = [];\n\n /* Status Label /\n @Prop({ reflect: true }) statusLabel: string = \"\";\n\n /* Status Type /\n @Prop() statusType: StzhStatusType = \"default\";\n\n /* Aria expanded of link/button /\n @Prop({ reflect: true, attribute: \"a11y-expanded\" }) a11yExpanded: boolean;\n\n /* Aria controls of link/button /\n @Prop({ attribute: \"a11y-controls\" }) a11yControls: string;\n\n /* Item action click event /\n @Event() stzhItemActionClick: EventEmitter<StzhDatalistItemActionClickEvent>;\n\n /* Item click event */\n @Event() stzhClick: EventEmitter<StzhDatalistItemClickEvent>;\n\n @Element() element: HTMLStzhDatalistItemElement;\n\n @Watch(\"meta\")\n metaWatcher(newValue: string[] \| string) {\n if (typeof newValue === \"string\") {\n try {\n this._meta = JSON.parse(newValue);\n } catch (ex) {\n this._meta = newValue === \"\" ? [] : [newValue];\n }\n } else {\n this._meta = newValue;\n }\n }\n\n @Watch(\"rel\")\n externalWatcher() {\n this.external = this.rel && this.rel.includes(\"external\");\n }\n\n @Watch(\"href\")\n hrefWatcher() {\n this.isPhone = this.href && (this.href.startsWith(\"tel:\") \|\| this.href.startsWith(\"fax:\"));\n }\n\n @State() direction: StzhDatalistDirection = \"vertical\";\n @State() variant: StzhDatalistVariant = \"default\";\n @State() bigLabel: boolean = false;\n\n private external: boolean = false;\n private isPhone: boolean = false;\n private datalist: HTMLStzhDatalistElement;\n private datalistItemId: string;\n\n private onActionClick = (originalEvent: MouseEvent) => {\n this.stzhItemActionClick.emit({\n component: \"stzh-datalist-item\",\n originalEvent,\n });\n };\n\n private onClick = (event: MouseEvent) => {\n this.stzhClick.emit({\n component: \"stzh-datalist-item\",\n originalEvent: event,\n href: this.href,\n });\n };\n\n private handleDirectionChange = (event: CustomEvent<StzhDatalistDirectionChangeEvent>) => {\n this.direction = event.detail.value;\n };\n\n private handleVariantChange = (event: CustomEvent<StzhDatalistVariantChangeEvent>) => {\n this.variant = event.detail.value;\n };\n\n private handleBigLabelChange = (event: CustomEvent<StzhDatalistBigLabelChangeEvent>) => {\n this.bigLabel = event.detail.value;\n };\n\n private addWordBreakToLinks() {\n const links = Array.from(\n this.element?.getElementsByClassName(\"stzh-datalist-item__value-text\") \|\| []\n );\n addWordBreakToLinks(links as HTMLElement[]);\n }\n\n private renderInner(isButton: boolean, hasActionButton: boolean): DocumentFragment {\n const Item = isButton ? \"button\" : this.href ? \"a\" : \"div\";\n\n const Icon = () => (\n <Fragment>\n {(this.href \|\| this.icon) && !hasActionButton && !isButton && (\n <div class=\"stzh-datalist-item__label-icon\">\n <stzh-icon\n class=\"stzh-datalist-item__icon\"\n name={this.icon ? this.icon : this.isPhone ? \"phone\" : this.external && \"external-link\"}\n ></stzh-icon>\n </div>\n )}\n\n {isButton && (\n <div class=\"stzh-datalist-item__label-icon\">\n <stzh-icon class=\"stzh-datalist-item__icon is-closed\" name={this.icon ? this.icon : \"plus\"}></stzh-icon>\n <stzh-icon class=\"stzh-datalist-item__icon is-open\" name={this.icon ? this.icon : \"minus\"}></stzh-icon>\n </div>\n )}\n </Fragment>\n );\n\n return (\n <Fragment>\n {this.variant === \"table\" && (\n <Item\n aria-hidden={this.label ? null : \"true\"}\n tabindex=\"-1\"\n id={`${this.datalistItemId}-label`}\n class={{\n \"stzh-datalist-item__label\": true,\n \"is-button\": isButton,\n \"is-link\": !!this.href,\n }}\n href={this.href}\n rel={this.rel}\n target={this.target}\n download={this.download}\n onClick={this.onClick}\n >\n {this.label}\n </Item>\n )}\n\n <Item\n id={`${this.datalistItemId}-value`}\n class={{\n \"stzh-datalist-item__value\": true,\n \"is-button\": isButton,\n \"is-link\": !!this.href,\n }}\n href={this.href}\n rel={this.rel}\n target={this.target}\n download={this.download}\n // aria-labelledby={Item !== 'div' ? `${this.datalistItemId}-label ${this.datalistItemId}-value ${this.datalistItemId}-meta` : null}\n aria-labelledby={\n Item !== \"div\"\n ? `${this.variant === \"table\" ? `${this.datalistItemId}-label` : \"\"} ${this.datalistItemId}-value ${\n this.datalistItemId\n }-meta`\n : null\n }\n aria-controls={this.a11yControls \|\| null}\n aria-expanded={typeof this.a11yExpanded !== \"undefined\" ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n onClick={this.onClick}\n >\n {this.variant === \"default\" && <div class=\"stzh-datalist-item__label\">{this.label}</div>}\n\n {this.external && (\n <div class=\"stzh-datalist-item__vhidden\">{this.localization.$globals.externalLinkLabel}</div>\n )}\n {this.download && (\n <div class=\"stzh-datalist-item__vhidden\">{this.localization.$globals.downloadLinkLabel}</div>\n )}\n\n <div class=\"stzh-datalist-item__value-wrapper\">\n {this.iconPosition === \"left\" && <Icon></Icon>}\n {this.value ? (\n <stzh-text curve=\"none\" class=\"stzh-datalist-item__value-text\" innerHTML={this.value}></stzh-text>\n ) : (\n <stzh-text curve=\"none\" class=\"stzh-datalist-item__value-text\">\n <slot name=\"value\"></slot>\n </stzh-text>\n )}\n {this.iconPosition === \"right\" && <Icon></Icon>}\n </div>\n </Item>\n\n <Item\n aria-hidden={this.statusLabel \|\| this._meta.length > 0 ? null : \"true\"}\n tabindex=\"-1\"\n id={`${this.datalistItemId}-meta`}\n class={{\n \"stzh-datalist-item__meta\": true,\n \"is-button\": isButton,\n \"is-link\": !!this.href,\n }}\n href={this.href}\n rel={this.rel}\n target={this.target}\n download={this.download}\n onClick={this.onClick}\n >\n {this.statusLabel && (\n <stzh-status\n class=\"stzh-datalist-item__meta-status\"\n label={this.statusLabel}\n type={this.statusType}\n ></stzh-status>\n )}\n {this._meta.length > 0 && (\n <span class=\"stzh-datalist-item__meta-text\">\n {this._meta.map((meta, index) => (\n <Fragment>\n <span class=\"stzh-datalist-item__meta-text-inner\">{meta}</span>\n {index + 1 !== this._meta.length && <span class=\"stzh-datalist-item__meta-separator\">\|</span>}\n </Fragment>\n ))}\n </span>\n )}\n </Item>\n\n {this.readspeakerHref && this.readspeakerLabel && (\n <stzh-button\n class=\"stzh-datalist-item__readspeaker\"\n variant=\"tertiary-plain\"\n no-padding-left=\"true\"\n no-padding-right=\"true\"\n icon-position=\"right\"\n icon=\"volume-medium\"\n size=\"small\"\n href={this.readspeakerHref}\n target=\"_blank\"\n >\n {this.readspeakerLabel}\n </stzh-button>\n )}\n </Fragment>\n );\n }\n\n private renderLeadingIcon(isButton: boolean): HTMLElement {\n const Item = isButton ? \"button\" : this.href ? \"a\" : \"div\";\n\n return (\n <Item\n role=\"presentation\"\n aria-hidden=\"true\"\n tabindex=\"-1\"\n class={{\n \"stzh-datalist-item__leading\": true,\n \"is-button\": isButton,\n \"is-link\": !!this.href,\n }}\n href={this.href}\n rel={this.rel}\n target={this.target}\n download={this.download}\n onClick={this.onClick}\n >\n {this.leadingIcon && (\n <div class=\"stzh-datalist-item__leading-icon-container\">\n <stzh-icon class=\"stzh-datalist-item__leading-icon\" name={this.leadingIcon}></stzh-icon>\n </div>\n )}\n </Item>\n );\n }\n\n async componentDidLoad() {\n // execute connectedCallbck again, because sometimes has problem rendering\n this.connectedCallback();\n this.addWordBreakToLinks();\n }\n\n async componentWillLoad() {\n this.datalistItemId = `stzh-datalist-item-${datalistItemCounter++}`;\n this.metaWatcher(this.meta);\n this.externalWatcher();\n this.hrefWatcher();\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"datalist-item\");\n }\n }\n\n async connectedCallback() {\n this.datalist = this.element.closest(\"stzh-datalist\");\n\n if (this.datalist) {\n this.variant = this.datalist.variant;\n this.bigLabel = this.datalist.bigLabel;\n this.direction = await this.datalist.getCurrentDirection();\n\n this.datalist?.addEventListener(\"stzhDirectionChange\", this.handleDirectionChange);\n this.datalist?.addEventListener(\"stzhVariantChange\", this.handleVariantChange);\n this.datalist?.addEventListener(\"stzhBigLabelChange\", this.handleBigLabelChange);\n }\n }\n\n disconnectedCallback() {\n if (this.datalist) {\n this.datalist?.removeEventListener(\"stzhDirectionChange\", this.handleDirectionChange);\n this.datalist?.removeEventListener(\"stzhVariantChange\", this.handleVariantChange);\n this.datalist?.removeEventListener(\"stzhBigLabelChange\", this.handleBigLabelChange);\n this.datalist = null;\n }\n }\n\n render() {\n const isButton = typeof this.a11yExpanded !== \"undefined\" \|\| typeof this.a11yControls !== \"undefined\";\n\n const hasActionButton = !!((!this.href \|\| this.iconHref \|\| this.iconTooltip) && this.icon);\n\n const classes = {\n \"stzh-datalist-item\": true,\n \"stzh-datalist-item--is-interactive\": !!this.href \|\| isButton,\n \"stzh-datalist-item--is-link\": !!this.href,\n \"stzh-datalist-item--is-button\": isButton,\n \"stzh-datalist-item--is-expanded\": this.a11yExpanded,\n \"stzh-datalist-item--big-label\": this.bigLabel,\n [`stzh-datalist-item--direction-${this.direction}`]: !!this.direction && this.variant === \"default\",\n [`stzh-datalist-item--${this.variant}`]: !!this.variant,\n };\n\n let ActionItem = isButton ? \"button\" : hasActionButton ? \"div\" : \"a\";\n\n const ActionButton = () => {\n return (\n <stzh-button\n class={{\n \"stzh-datalist-item__action\": true,\n \"is-button\": true,\n }}\n variant=\"tertiary\"\n size=\"small\"\n aria-label={this.iconLabel}\n iconOnly={true}\n href={this.iconHref}\n icon={this.icon}\n onClick={this.onActionClick}\n ></stzh-button>\n );\n };\n\n return (\n <Host role=\"listitem\" class={{\"no-text-truncate\": !!this.href \|\| this.noTextTruncate}}>\n <div class={classes}>\n {this.direction === \"horizontal\" \|\| this.variant === \"table\" ? (\n <Fragment>\n {this.renderLeadingIcon(isButton)}\n {this.renderInner(isButton, hasActionButton)}\n </Fragment>\n ) : (\n <Fragment>\n {this.renderLeadingIcon(isButton)}\n <div class=\"stzh-datalist-item__wrapper\">{this.renderInner(isButton, hasActionButton)}</div>\n </Fragment>\n )}\n <ActionItem\n role={hasActionButton ? null : \"presentation\"}\n aria-hidden={hasActionButton ? null : \"true\"}\n tabindex=\"-1\"\n class={{\n \"stzh-datalist-item__action-list\": true,\n \"is-button\": isButton,\n \"is-link\": !!this.href && !this.iconHref,\n }}\n href={!this.iconHref ? this.href : null}\n rel={!this.iconHref ? this.rel : null}\n target={!this.iconHref ? this.target : null}\n download={!this.iconHref ? this.download : null}\n >\n {hasActionButton &&\n (this.iconTooltip ? (\n <stzh-tooltip content={this.iconTooltip}>{ActionButton()}</stzh-tooltip>\n ) : (\n ActionButton()\n ))}\n </ActionItem>\n\n <div class=\"stzh-datalist-item__spacer\"></div>\n </div>\n\n <div class=\"stzh-datalist-item__nested\">\n <div class=\"stzh-datalist-item__nested-inner\">\n <slot></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/stzh-dialog.entry.js CHANGED Viewed

@@ -4,7 +4,7 @@ import { c as createBaseFocusTrapOptions } from './overlay-utils-4da78ee6.js';
 import { c as createFocusTrap } from './focus-trap.esm-995e1042.js';
 import './string-utils-e252977e.js';
-const stzhDialogCss = ".sc-stzh-dialog-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-dialog-h,[stzh-hidden].sc-stzh-dialog-h{display:none}.sc-stzh-dialog-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-dialog-h *.sc-stzh-dialog,.sc-stzh-dialog-h *.sc-stzh-dialog::before,.sc-stzh-dialog-h *.sc-stzh-dialog::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-dialog-h .has-focus.sc-stzh-dialog{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-dialog-h .stzh-fylingfocus-focused.sc-stzh-dialog{outline-style:none !important}.sc-stzh-dialog-h .stzh-fylingfocus-focused.sc-stzh-dialog::-moz-focus-inner{border:0 !important}.sc-stzh-dialog-h{--padding-top:var(--stzh-space-xxlarge);--padding-bottom:var(--stzh-space-xxlarge);--padding-left:var(--stzh-space-large);--padding-right:var(--stzh-space-large);--width:100%;--backdrop-opacity:var(--stzh-dialog-backdrop-opacity);--backdrop-background-color:var(--stzh-dialog-backdrop-background-color)}@media screen and (min-width: 900px){.sc-stzh-dialog-h{--padding-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-dialog-h{--padding-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 900px){.sc-stzh-dialog-h{--padding-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-dialog-h{--padding-bottom:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 600px){.sc-stzh-dialog-h{--padding-left:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px){.sc-stzh-dialog-h{--padding-left:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-dialog-h{--padding-left:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 600px){.sc-stzh-dialog-h{--padding-right:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px){.sc-stzh-dialog-h{--padding-right:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-dialog-h{--padding-right:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 600px){.sc-stzh-dialog-h{--width:33.5rem}}@media screen and (min-width: 900px){.sc-stzh-dialog-h{--width:38.125rem}}@media screen and (min-width: 1260px){.sc-stzh-dialog-h{--width:54.125rem}}@media screen and (min-width: 1600px){.sc-stzh-dialog-h{--width:55.5rem}}@media screen and (min-width: 600px){[size=small].sc-stzh-dialog-h{--width:24.6875rem}}@media screen and (min-width: 900px){[size=small].sc-stzh-dialog-h{--width:28.75rem}}@media screen and (min-width: 1260px){[size=small].sc-stzh-dialog-h{--width:32rem}}.stzh-dialog.sc-stzh-dialog{z-index:var(--stzh-z-index-dialog);display:none;position:fixed;top:0;left:0;width:100%;height:100%;flex-direction:column;align-items:stretch;justify-content:stretch}.stzh-dialog__content.sc-stzh-dialog{z-index:2;position:relative;display:flex;flex-direction:column;align-items:center;flex-grow:1;overflow:auto}.stzh-dialog__dialog.sc-stzh-dialog{position:relative;display:flex;flex-direction:column;margin:auto;border:none;background-color:var(--stzh-color-white);width:var(--width);max-width:100%;box-shadow:var(--stzh-box-shadow-overlay);height:100vh;max-height:100vh;overflow:hidden;outline:none}.stzh-dialog__dialog--fit-content.sc-stzh-dialog{width:-moz-fit-content;width:fit-content}@media screen and (min-width: 600px){.stzh-dialog__dialog.sc-stzh-dialog{height:auto}}.stzh-dialog__backdrop.sc-stzh-dialog{z-index:1;position:absolute;top:0;left:0;width:100%;height:100%;overflow-x:hidden;overflow-y:auto;text-align:center;background-color:var(--backdrop-background-color);opacity:var(--backdrop-opacity)}.stzh-dialog__heading.sc-stzh-dialog{padding-bottom:var(--stzh-space-medium);padding-top:var(--padding-top);padding-left:var(--padding-left);padding-right:var(--padding-right)}@media screen and (min-width: 600px){.stzh-dialog__heading.sc-stzh-dialog{padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-dialog__heading.sc-stzh-dialog{padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-dialog__heading.sc-stzh-dialog{padding-bottom:var(--stzh-space-xxlarge)}}.stzh-dialog__dialog-content.sc-stzh-dialog{padding-left:var(--padding-left);padding-right:var(--padding-right);padding-top:var(--stzh-space-large);padding-bottom:var(--stzh-space-large);overflow:auto;flex-grow:1}@media screen and (min-width: 600px){.stzh-dialog__dialog-content.sc-stzh-dialog{padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px){.stzh-dialog__dialog-content.sc-stzh-dialog{padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-dialog__dialog-content.sc-stzh-dialog{padding-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 600px){.stzh-dialog__dialog-content.sc-stzh-dialog{padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px){.stzh-dialog__dialog-content.sc-stzh-dialog{padding-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-dialog__dialog-content.sc-stzh-dialog{padding-bottom:var(--stzh-space-xxxlarge)}}.stzh-dialog__actions.sc-stzh-dialog:not(:empty){padding:var(--stzh-space-medium) var(--padding-right) var(--padding-bottom) var(--padding-left)}.stzh-dialog__close-button.sc-stzh-dialog{position:absolute;top:var(--stzh-space-xsmall);right:var(--stzh-space-xsmall)}@media screen and (min-width: 900px){.stzh-dialog__close-button.sc-stzh-dialog{top:var(--stzh-space-large);right:var(--stzh-space-large)}}.stzh-dialog--is-open.sc-stzh-dialog{display:flex}";
+const stzhDialogCss = ".sc-stzh-dialog-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-dialog-h,[stzh-hidden].sc-stzh-dialog-h{display:none}.sc-stzh-dialog-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-dialog-h *.sc-stzh-dialog,.sc-stzh-dialog-h *.sc-stzh-dialog::before,.sc-stzh-dialog-h *.sc-stzh-dialog::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-dialog-h .has-focus.sc-stzh-dialog{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-dialog-h .stzh-fylingfocus-focused.sc-stzh-dialog{outline-style:none !important}.sc-stzh-dialog-h .stzh-fylingfocus-focused.sc-stzh-dialog::-moz-focus-inner{border:0 !important}.sc-stzh-dialog-h{--padding-top:var(--stzh-space-xxlarge);--padding-bottom:var(--stzh-space-xxlarge);--padding-left:var(--stzh-space-large);--padding-right:var(--stzh-space-large);--width:100%;--backdrop-opacity:var(--stzh-dialog-backdrop-opacity);--backdrop-background-color:var(--stzh-dialog-backdrop-background-color)}@media screen and (min-width: 900px){.sc-stzh-dialog-h{--padding-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-dialog-h{--padding-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 900px){.sc-stzh-dialog-h{--padding-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-dialog-h{--padding-bottom:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 600px){.sc-stzh-dialog-h{--padding-left:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px){.sc-stzh-dialog-h{--padding-left:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-dialog-h{--padding-left:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 600px){.sc-stzh-dialog-h{--padding-right:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px){.sc-stzh-dialog-h{--padding-right:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-dialog-h{--padding-right:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 600px){.sc-stzh-dialog-h{--width:33.5rem}}@media screen and (min-width: 900px){.sc-stzh-dialog-h{--width:38.125rem}}@media screen and (min-width: 1260px){.sc-stzh-dialog-h{--width:54.125rem}}@media screen and (min-width: 1600px){.sc-stzh-dialog-h{--width:55.5rem}}@media screen and (min-width: 600px){[size=small].sc-stzh-dialog-h{--width:24.6875rem}}@media screen and (min-width: 900px){[size=small].sc-stzh-dialog-h{--width:28.75rem}}@media screen and (min-width: 1260px){[size=small].sc-stzh-dialog-h{--width:32rem}}.stzh-dialog.sc-stzh-dialog{z-index:var(--stzh-z-index-dialog);display:none;position:fixed;top:0;left:0;width:100%;height:100%;flex-direction:column;align-items:stretch;justify-content:stretch}.stzh-dialog__content.sc-stzh-dialog{z-index:2;position:relative;display:flex;flex-direction:column;align-items:center;flex-grow:1;overflow:auto}.stzh-dialog__dialog.sc-stzh-dialog{position:relative;display:flex;flex-direction:column;margin:auto;border:none;background-color:var(--stzh-color-white);width:auto;min-width:var(--width);max-width:100%;box-shadow:var(--stzh-box-shadow-overlay);height:100vh;max-height:100vh;overflow:hidden;outline:none}.stzh-dialog__dialog--fit-content.sc-stzh-dialog{width:-moz-fit-content;width:fit-content}@media screen and (min-width: 600px){.stzh-dialog__dialog.sc-stzh-dialog{height:auto}}.stzh-dialog__backdrop.sc-stzh-dialog{z-index:1;position:absolute;top:0;left:0;width:100%;height:100%;overflow-x:hidden;overflow-y:auto;text-align:center;background-color:var(--backdrop-background-color);opacity:var(--backdrop-opacity)}.stzh-dialog__heading.sc-stzh-dialog{padding-bottom:var(--stzh-space-medium);padding-top:var(--padding-top);padding-left:var(--padding-left);padding-right:var(--padding-right)}@media screen and (min-width: 600px){.stzh-dialog__heading.sc-stzh-dialog{padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-dialog__heading.sc-stzh-dialog{padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-dialog__heading.sc-stzh-dialog{padding-bottom:var(--stzh-space-xxlarge)}}.stzh-dialog__dialog-content.sc-stzh-dialog{padding-left:var(--padding-left);padding-right:var(--padding-right);padding-top:var(--stzh-space-large);padding-bottom:var(--stzh-space-large);overflow:auto;flex-grow:1}@media screen and (min-width: 600px){.stzh-dialog__dialog-content.sc-stzh-dialog{padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px){.stzh-dialog__dialog-content.sc-stzh-dialog{padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-dialog__dialog-content.sc-stzh-dialog{padding-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 600px){.stzh-dialog__dialog-content.sc-stzh-dialog{padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px){.stzh-dialog__dialog-content.sc-stzh-dialog{padding-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-dialog__dialog-content.sc-stzh-dialog{padding-bottom:var(--stzh-space-xxxlarge)}}.stzh-dialog__actions.sc-stzh-dialog:not(:empty){padding:var(--stzh-space-medium) var(--padding-right) var(--padding-bottom) var(--padding-left)}.stzh-dialog__close-button.sc-stzh-dialog{position:absolute;top:var(--stzh-space-xsmall);right:var(--stzh-space-xsmall)}@media screen and (min-width: 900px){.stzh-dialog__close-button.sc-stzh-dialog{top:var(--stzh-space-large);right:var(--stzh-space-large)}}.stzh-dialog--is-open.sc-stzh-dialog{display:flex}";
 const CLASS_BODY_OPEN = "stzh-dialog-open";
 let activeDialog = null;

package/dist/esm/stzh-dialog.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"stzh-dialog.entry.js","mappings":"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","names":[],"sources":["src/components/stzh-dialog/stzh-dialog.scss?tag=stzh-dialog&encapsulation=scoped","src/components/stzh-dialog/stzh-dialog.tsx"],"sourcesContent":["/*\n @prop --width: Width of dialog\n * @prop --padding-top: Padding top of dialog\n * @prop --padding-bottom: Padding bottom of dialog\n * @prop --padding-left: Padding left of dialog\n * @prop --padding-right: Padding right of dialog\n * @prop --backdrop-opacity: Opacity of dialog backdrop\n * @prop --backdrop-background-color: Opacity of dialog background color\n \n @prop --stzh-dialog-backdrop-opacity: Global: Opacity of backdrops\n * @prop --stzh-dialog-backdrop-background-color: Global: Background color of backdrops\n /\n\n:host {\n @include spaceCurve('--padding-top', 'large');\n @include spaceCurve('--padding-bottom', 'large');\n @include spaceCurve('--padding-left', 'medium');\n @include spaceCurve('--padding-right', 'medium');\n --width: 100%;\n --backdrop-opacity: #{$dialogBackdropOpacity};\n --backdrop-background-color: #{$dialogBackdropBackgroundColor};\n\n @include mq($from: small) {\n --width: 536px;\n }\n\n @include mq($from: medium) {\n --width: 610px; // 786 before\n }\n\n @include mq($from: large) {\n --width: 866px; // 832 before\n }\n\n @include mq($from: ultra) {\n --width: 888px;\n }\n\n &[size=\"small\"] {\n @include mq($from: small) {\n --width: 395px;\n }\n\n @include mq($from: medium) {\n --width: 460px;\n }\n\n @include mq($from: large) {\n --width: 512px;\n }\n }\n}\n\n.stzh-dialog {\n z-index: $zIndexDialog;\n display: none;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n flex-direction: column;\n align-items: stretch;\n justify-content: stretch;\n\n &__content {\n z-index: 2;\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n flex-grow: 1;\n overflow: auto;\n }\n\n &__dialog {\n position: relative;\n display: flex;\n flex-direction: column;\n margin: auto;\n border: none;\n background-color: $colorWhite;\n width: var(--width);\n max-width: 100%;\n box-shadow: $boxShadowOverlay;\n height: 100vh;\n max-height: 100vh;\n overflow: hidden;\n outline: none;\n\n &--fit-content {\n width: fit-content;\n }\n\n @include mq($from: small) {\n height: auto;\n }\n }\n\n &__backdrop {\n z-index: 1;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n overflow-x: hidden;\n overflow-y: auto;\n text-align: center;\n background-color: var(--backdrop-background-color);\n opacity: var(--backdrop-opacity);\n }\n\n &__heading {\n @include spaceCurve('padding-bottom', 'regular');\n padding-top: var(--padding-top);\n padding-left: var(--padding-left);\n padding-right: var(--padding-right);\n }\n\n &__dialog-content {\n padding-left: var(--padding-left);\n padding-right: var(--padding-right);\n @include spaceCurve('padding-top', 'medium');\n @include spaceCurve('padding-bottom', 'medium');\n overflow: auto;\n flex-grow: 1;\n }\n\n &__actions {\n &:not(:empty) {\n padding: space('medium') var(--padding-right) var(--padding-bottom) var(--padding-left);\n }\n }\n\n &__close-button {\n position: absolute;\n top: space('xsmall');\n right: space('xsmall');\n\n @include mq($from: medium) {\n top: space('large');\n right: space('large');\n }\n }\n\n &--is-open {\n display: flex;\n }\n}\n","import {\n Host,\n Component,\n Element,\n Method,\n Listen,\n Prop,\n Event,\n EventEmitter,\n h,\n} from \"@stencil/core\";\n\nimport {\n StzhDialogOpenEvent,\n StzhDialogCloseEvent\n} from \"../../index\";\n\nimport { setPropsIfNull } from \"../../utils/utils\";\nimport { createBaseFocusTrapOptions } from \"../../utils/overlay-utils\";\n\nimport { StzhDialogLocalizedText } from \"./stzh-dialog.localization\"\n\nimport { createFocusTrap, FocusTrap } from 'focus-trap';\n\nconst CLASS_BODY_OPEN = \"stzh-dialog-open\";\n\nlet activeDialog: StzhDialog = null;\nlet dialogCounter = 0;\n\n/\n @slot actions - Slot for actions element\n * @slot - Slot for any content inside the dialog\n /\n@Component({\n tag: \"stzh-dialog\",\n styleUrl: \"stzh-dialog.scss\",\n scoped: true\n})\nexport class StzhDialog {\n /* Translation strings /\n @Prop() localization: StzhDialogLocalizedText;\n\n /* Close dialog when pressing ESC /\n @Prop() closeOnEscapeKey: boolean = false;\n\n /* Close dialog when clicking outside of it /\n @Prop() closeOnBackdropClick: boolean = false;\n\n /* Open status /\n @Prop({ mutable: true }) open: boolean = false;\n\n /* Stay in original position (true) or move to body (false) /\n @Prop() stay: boolean = true;\n\n /* Size /\n @Prop({ reflect: true }) size: \"default\" \| \"small\" = \"default\";\n\n /* Whether to hide close button /\n @Prop() hideClose: boolean = false;\n\n /* Heading text /\n @Prop() heading: string = \"\";\n\n /* Accessibility role /\n @Prop({ attribute: \"a11y-role\" }) a11yRole: \"dialog\" \| \"alertdialog\" = \"alertdialog\";\n\n /* Accessible label for dialog (use if no heading is used) /\n @Prop({ attribute: \"a11y-label\" }) a11yLabel: string = \"\";\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the close button element.\n * Default value will be taken from translations.\n /\n @Prop() closeAnalyticsId: string;\n\n /* Dialog open event /\n @Event() stzhOpen: EventEmitter<StzhDialogOpenEvent>;\n\n /* Dialog close event */\n @Event() stzhClose: EventEmitter<StzhDialogCloseEvent>;\n\n @Element() element: HTMLStzhDialogElement;\n\n @Listen(\"click\", { target: \"document\", capture: true })\n handleOutsideClick(event: MouseEvent) {\n if (!this.open \|\| !this.closeOnBackdropClick) {\n return\n }\n\n const isClickOutside = event.target !== this.dialogElement\n && this.dialogElement.contains(event.target as HTMLElement) === false\n\n if (isClickOutside) {\n this.hide()\n }\n }\n\n @Listen(\"keydown\", { target: \"document\" })\n handleKeydown(event: KeyboardEvent) {\n if (\n event.key === \"Escape\"\n && activeDialog === this\n && this.closeOnEscapeKey\n ) {\n this.hide();\n }\n }\n\n @Listen(\"click\", { target: \"document\" })\n handleOpenTriggerClick(event: MouseEvent) {\n const target = event.target as HTMLElement;\n\n if (target.dataset.stzhDialogTrigger === this.element.id) {\n this.show();\n } else {\n const closest = target.closest(\"[data-stzh-dialog-trigger]\") as HTMLElement;\n\n if (closest && closest.dataset.stzhDialogTrigger === this.element.id) {\n this.show();\n }\n }\n }\n\n @Method()\n async show() {\n this.open = true;\n this.stzhOpen.emit({\n component: \"stzh-dialog\"\n });\n }\n\n @Method()\n async hide() {\n this.open = false;\n this.stzhClose.emit({\n component: \"stzh-dialog\"\n });\n }\n\n private observer: MutationObserver;\n private id: string;\n private trap: FocusTrap;\n private parentElement: HTMLElement;\n private dialogElement: HTMLDivElement;\n\n private handleDialogClick = (event: MouseEvent) => {\n const target = event.target as HTMLElement;\n if (target.dataset.stzhDialogClose) {\n this.hide();\n } else {\n const closest = target.closest(\"[data-stzh-dialog-close]\");\n\n if (closest) {\n this.hide();\n }\n }\n }\n\n private handleCloseButtonClick = () => {\n this.hide();\n }\n\n private init = () => {\n const actions = this.element.querySelector('stzh-actions[slot=\"actions\"]');\n\n if (actions) {\n setPropsIfNull(actions, {\n variant: \"dialog\"\n } as HTMLStzhActionsElement)\n }\n }\n\n private getSiblings() {\n if (!this.parentElement) {\n return [];\n }\n\n return Array.from(this.parentElement.children).filter(\n (child) => child !== this.element\n );\n }\n\n private disableSiblings() {\n this.getSiblings().forEach((sibling) => {\n sibling.setAttribute(\"aria-hidden\", \"true\");\n });\n }\n\n private enableSiblings() {\n this.getSiblings().forEach((sibling) => {\n sibling.removeAttribute(\"aria-hidden\");\n });\n }\n\n private dialogShown() {\n activeDialog = this;\n document.body.classList.add(CLASS_BODY_OPEN);\n this.disableSiblings();\n\n if (this.trap) {\n this.trap.activate();\n }\n }\n\n private dialogHidden() {\n document.body.classList.remove(CLASS_BODY_OPEN);\n this.enableSiblings();\n\n if (this.trap) {\n this.trap.deactivate();\n }\n\n activeDialog = null;\n }\n\n async componentWillLoad() {\n this.id = `stzh-dialog-${dialogCounter}`;\n dialogCounter++;\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"dialog\");\n }\n }\n\n componentDidRender() {\n this.open ? this.dialogShown() : this.dialogHidden();\n }\n\n componentDidUpdate() {\n this.trap.updateContainerElements(this.element);\n }\n\n componentDidLoad() {\n this.trap = createFocusTrap(this.element, {\n fallbackFocus: this.dialogElement,\n ...createBaseFocusTrapOptions()\n });\n\n if (this.open) {\n this.dialogShown();\n }\n }\n\n connectedCallback() {\n if (!this.stay && this.element.parentElement !== document.body) {\n document.body.appendChild(this.element);\n }\n\n this.parentElement = this.element.parentElement;\n\n this.init();\n\n this.observer = new MutationObserver(this.init);\n this.observer.observe(this.element, {\n childList: true,\n subtree: true\n });\n }\n\n disconnectedCallback() {\n this.dialogHidden();\n\n if (this.observer) {\n this.observer.disconnect();\n }\n }\n\n render() {\n return (\n <Host>\n <div\n class={{\n \"stzh-dialog\": true,\n \"stzh-dialog--is-open\": this.open,\n \"stzh-dialog--has-heading\": !!this.heading,\n \"stzh-dialog--has-close-hidden\": this.hideClose,\n [`stzh-dialog--size-${this.size}`]: !!this.size,\n }}\n >\n <div class=\"stzh-dialog__backdrop\"></div>\n <div class=\"stzh-dialog__content\">\n <div\n class=\"stzh-dialog__dialog\"\n ref={(el) => (this.dialogElement = el as HTMLDivElement)}\n tabindex=\"-1\"\n role={this.a11yRole}\n aria-label={this.a11yLabel \|\| null}\n aria-labelledby={this.heading ? `${this.id}-heading` : null}\n aria-hidden={this.open ? \"false\" : \"true\"}\n onClick={this.handleDialogClick}\n >\n {this.heading &&\n <stzh-heading\n id={`${this.id}-heading`}\n class=\"stzh-dialog__heading\"\n level=\"2\"\n >\n {this.heading}\n </stzh-heading>\n }\n\n <div class=\"stzh-dialog__dialog-content\">\n <slot></slot>\n </div>\n\n <div class=\"stzh-dialog__actions\">\n <slot name=\"actions\"></slot>\n </div>\n\n {!this.hideClose &&\n <stzh-button\n class=\"stzh-dialog__close-button\"\n variant=\"tertiary\"\n size=\"small\"\n icon=\"close\"\n iconOnly={true}\n onClick={this.handleCloseButtonClick}\n a11yLabel={this.localization.close}\n analyticsId={this.closeAnalyticsId \|\| this.localization.close}\n ></stzh-button>\n }\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n\n"],"version":3}
1	+ {"file":"stzh-dialog.entry.js","mappings":"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","names":[],"sources":["src/components/stzh-dialog/stzh-dialog.scss?tag=stzh-dialog&encapsulation=scoped","src/components/stzh-dialog/stzh-dialog.tsx"],"sourcesContent":["/*\n @prop --width: Width of dialog\n * @prop --padding-top: Padding top of dialog\n * @prop --padding-bottom: Padding bottom of dialog\n * @prop --padding-left: Padding left of dialog\n * @prop --padding-right: Padding right of dialog\n * @prop --backdrop-opacity: Opacity of dialog backdrop\n * @prop --backdrop-background-color: Opacity of dialog background color\n \n @prop --stzh-dialog-backdrop-opacity: Global: Opacity of backdrops\n * @prop --stzh-dialog-backdrop-background-color: Global: Background color of backdrops\n /\n\n:host {\n @include spaceCurve('--padding-top', 'large');\n @include spaceCurve('--padding-bottom', 'large');\n @include spaceCurve('--padding-left', 'medium');\n @include spaceCurve('--padding-right', 'medium');\n --width: 100%;\n --backdrop-opacity: #{$dialogBackdropOpacity};\n --backdrop-background-color: #{$dialogBackdropBackgroundColor};\n\n @include mq($from: small) {\n --width: 536px;\n }\n\n @include mq($from: medium) {\n --width: 610px; // 786 before\n }\n\n @include mq($from: large) {\n --width: 866px; // 832 before\n }\n\n @include mq($from: ultra) {\n --width: 888px;\n }\n\n &[size=\"small\"] {\n @include mq($from: small) {\n --width: 395px;\n }\n\n @include mq($from: medium) {\n --width: 460px;\n }\n\n @include mq($from: large) {\n --width: 512px;\n }\n }\n}\n\n.stzh-dialog {\n z-index: $zIndexDialog;\n display: none;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n flex-direction: column;\n align-items: stretch;\n justify-content: stretch;\n\n &__content {\n z-index: 2;\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n flex-grow: 1;\n overflow: auto;\n }\n\n &__dialog {\n position: relative;\n display: flex;\n flex-direction: column;\n margin: auto;\n border: none;\n background-color: $colorWhite;\n width: auto;\n min-width: var(--width);\n max-width: 100%;\n box-shadow: $boxShadowOverlay;\n height: 100vh;\n max-height: 100vh;\n overflow: hidden;\n outline: none;\n\n &--fit-content {\n width: fit-content;\n }\n\n @include mq($from: small) {\n height: auto;\n }\n }\n\n &__backdrop {\n z-index: 1;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n overflow-x: hidden;\n overflow-y: auto;\n text-align: center;\n background-color: var(--backdrop-background-color);\n opacity: var(--backdrop-opacity);\n }\n\n &__heading {\n @include spaceCurve('padding-bottom', 'regular');\n padding-top: var(--padding-top);\n padding-left: var(--padding-left);\n padding-right: var(--padding-right);\n }\n\n &__dialog-content {\n padding-left: var(--padding-left);\n padding-right: var(--padding-right);\n @include spaceCurve('padding-top', 'medium');\n @include spaceCurve('padding-bottom', 'medium');\n overflow: auto;\n flex-grow: 1;\n }\n\n &__actions {\n &:not(:empty) {\n padding: space('medium') var(--padding-right) var(--padding-bottom) var(--padding-left);\n }\n }\n\n &__close-button {\n position: absolute;\n top: space('xsmall');\n right: space('xsmall');\n\n @include mq($from: medium) {\n top: space('large');\n right: space('large');\n }\n }\n\n &--is-open {\n display: flex;\n }\n}\n","import {\n Host,\n Component,\n Element,\n Method,\n Listen,\n Prop,\n Event,\n EventEmitter,\n h,\n} from \"@stencil/core\";\n\nimport {\n StzhDialogOpenEvent,\n StzhDialogCloseEvent\n} from \"../../index\";\n\nimport { setPropsIfNull } from \"../../utils/utils\";\nimport { createBaseFocusTrapOptions } from \"../../utils/overlay-utils\";\n\nimport { StzhDialogLocalizedText } from \"./stzh-dialog.localization\"\n\nimport { createFocusTrap, FocusTrap } from 'focus-trap';\n\nconst CLASS_BODY_OPEN = \"stzh-dialog-open\";\n\nlet activeDialog: StzhDialog = null;\nlet dialogCounter = 0;\n\n/\n @slot actions - Slot for actions element\n * @slot - Slot for any content inside the dialog\n /\n@Component({\n tag: \"stzh-dialog\",\n styleUrl: \"stzh-dialog.scss\",\n scoped: true\n})\nexport class StzhDialog {\n /* Translation strings /\n @Prop() localization: StzhDialogLocalizedText;\n\n /* Close dialog when pressing ESC /\n @Prop() closeOnEscapeKey: boolean = false;\n\n /* Close dialog when clicking outside of it /\n @Prop() closeOnBackdropClick: boolean = false;\n\n /* Open status /\n @Prop({ mutable: true }) open: boolean = false;\n\n /* Stay in original position (true) or move to body (false) /\n @Prop() stay: boolean = true;\n\n /* Size /\n @Prop({ reflect: true }) size: \"default\" \| \"small\" = \"default\";\n\n /* Whether to hide close button /\n @Prop() hideClose: boolean = false;\n\n /* Heading text /\n @Prop() heading: string = \"\";\n\n /* Accessibility role /\n @Prop({ attribute: \"a11y-role\" }) a11yRole: \"dialog\" \| \"alertdialog\" = \"alertdialog\";\n\n /* Accessible label for dialog (use if no heading is used) /\n @Prop({ attribute: \"a11y-label\" }) a11yLabel: string = \"\";\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the close button element.\n * Default value will be taken from translations.\n /\n @Prop() closeAnalyticsId: string;\n\n /* Dialog open event /\n @Event() stzhOpen: EventEmitter<StzhDialogOpenEvent>;\n\n /* Dialog close event */\n @Event() stzhClose: EventEmitter<StzhDialogCloseEvent>;\n\n @Element() element: HTMLStzhDialogElement;\n\n @Listen(\"click\", { target: \"document\", capture: true })\n handleOutsideClick(event: MouseEvent) {\n if (!this.open \|\| !this.closeOnBackdropClick) {\n return\n }\n\n const isClickOutside = event.target !== this.dialogElement\n && this.dialogElement.contains(event.target as HTMLElement) === false\n\n if (isClickOutside) {\n this.hide()\n }\n }\n\n @Listen(\"keydown\", { target: \"document\" })\n handleKeydown(event: KeyboardEvent) {\n if (\n event.key === \"Escape\"\n && activeDialog === this\n && this.closeOnEscapeKey\n ) {\n this.hide();\n }\n }\n\n @Listen(\"click\", { target: \"document\" })\n handleOpenTriggerClick(event: MouseEvent) {\n const target = event.target as HTMLElement;\n\n if (target.dataset.stzhDialogTrigger === this.element.id) {\n this.show();\n } else {\n const closest = target.closest(\"[data-stzh-dialog-trigger]\") as HTMLElement;\n\n if (closest && closest.dataset.stzhDialogTrigger === this.element.id) {\n this.show();\n }\n }\n }\n\n @Method()\n async show() {\n this.open = true;\n this.stzhOpen.emit({\n component: \"stzh-dialog\"\n });\n }\n\n @Method()\n async hide() {\n this.open = false;\n this.stzhClose.emit({\n component: \"stzh-dialog\"\n });\n }\n\n private observer: MutationObserver;\n private id: string;\n private trap: FocusTrap;\n private parentElement: HTMLElement;\n private dialogElement: HTMLDivElement;\n\n private handleDialogClick = (event: MouseEvent) => {\n const target = event.target as HTMLElement;\n if (target.dataset.stzhDialogClose) {\n this.hide();\n } else {\n const closest = target.closest(\"[data-stzh-dialog-close]\");\n\n if (closest) {\n this.hide();\n }\n }\n }\n\n private handleCloseButtonClick = () => {\n this.hide();\n }\n\n private init = () => {\n const actions = this.element.querySelector('stzh-actions[slot=\"actions\"]');\n\n if (actions) {\n setPropsIfNull(actions, {\n variant: \"dialog\"\n } as HTMLStzhActionsElement)\n }\n }\n\n private getSiblings() {\n if (!this.parentElement) {\n return [];\n }\n\n return Array.from(this.parentElement.children).filter(\n (child) => child !== this.element\n );\n }\n\n private disableSiblings() {\n this.getSiblings().forEach((sibling) => {\n sibling.setAttribute(\"aria-hidden\", \"true\");\n });\n }\n\n private enableSiblings() {\n this.getSiblings().forEach((sibling) => {\n sibling.removeAttribute(\"aria-hidden\");\n });\n }\n\n private dialogShown() {\n activeDialog = this;\n document.body.classList.add(CLASS_BODY_OPEN);\n this.disableSiblings();\n\n if (this.trap) {\n this.trap.activate();\n }\n }\n\n private dialogHidden() {\n document.body.classList.remove(CLASS_BODY_OPEN);\n this.enableSiblings();\n\n if (this.trap) {\n this.trap.deactivate();\n }\n\n activeDialog = null;\n }\n\n async componentWillLoad() {\n this.id = `stzh-dialog-${dialogCounter}`;\n dialogCounter++;\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"dialog\");\n }\n }\n\n componentDidRender() {\n this.open ? this.dialogShown() : this.dialogHidden();\n }\n\n componentDidUpdate() {\n this.trap.updateContainerElements(this.element);\n }\n\n componentDidLoad() {\n this.trap = createFocusTrap(this.element, {\n fallbackFocus: this.dialogElement,\n ...createBaseFocusTrapOptions()\n });\n\n if (this.open) {\n this.dialogShown();\n }\n }\n\n connectedCallback() {\n if (!this.stay && this.element.parentElement !== document.body) {\n document.body.appendChild(this.element);\n }\n\n this.parentElement = this.element.parentElement;\n\n this.init();\n\n this.observer = new MutationObserver(this.init);\n this.observer.observe(this.element, {\n childList: true,\n subtree: true\n });\n }\n\n disconnectedCallback() {\n this.dialogHidden();\n\n if (this.observer) {\n this.observer.disconnect();\n }\n }\n\n render() {\n return (\n <Host>\n <div\n class={{\n \"stzh-dialog\": true,\n \"stzh-dialog--is-open\": this.open,\n \"stzh-dialog--has-heading\": !!this.heading,\n \"stzh-dialog--has-close-hidden\": this.hideClose,\n [`stzh-dialog--size-${this.size}`]: !!this.size,\n }}\n >\n <div class=\"stzh-dialog__backdrop\"></div>\n <div class=\"stzh-dialog__content\">\n <div\n class=\"stzh-dialog__dialog\"\n ref={(el) => (this.dialogElement = el as HTMLDivElement)}\n tabindex=\"-1\"\n role={this.a11yRole}\n aria-label={this.a11yLabel \|\| null}\n aria-labelledby={this.heading ? `${this.id}-heading` : null}\n aria-hidden={this.open ? \"false\" : \"true\"}\n onClick={this.handleDialogClick}\n >\n {this.heading &&\n <stzh-heading\n id={`${this.id}-heading`}\n class=\"stzh-dialog__heading\"\n level=\"2\"\n >\n {this.heading}\n </stzh-heading>\n }\n\n <div class=\"stzh-dialog__dialog-content\">\n <slot></slot>\n </div>\n\n <div class=\"stzh-dialog__actions\">\n <slot name=\"actions\"></slot>\n </div>\n\n {!this.hideClose &&\n <stzh-button\n class=\"stzh-dialog__close-button\"\n variant=\"tertiary\"\n size=\"small\"\n icon=\"close\"\n iconOnly={true}\n onClick={this.handleCloseButtonClick}\n a11yLabel={this.localization.close}\n analyticsId={this.closeAnalyticsId \|\| this.localization.close}\n ></stzh-button>\n }\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n\n"],"version":3}