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

@oiz/stzh-components 3.0.0 → 3.1.0

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

Files changed (713) hide show

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

	@@ -1 +1 @@
1	- {"file":"stzh-contact.entry.js","mappings":";;;;AAAA,MAAM,cAAc,GAAG,m2RAAm2R;;ACkB13R,SAAS,SAAS,CAAC,GAAW;EAC5B,OAAO,GAAG,CAAC,OAAO,CAAC,KAAK,EAAC,EAAE,CAAC,CAAC;AAC/B,CAAC;MAcY,WAAW;;;IA4Cd,aAAQ,GAAoB,EAAE,CAAC;IAS/B,YAAO,GAAmB,EAAE,CAAC;IAyB7B,kBAAa,GAAkC,EAAE,CAAC;gBA5EhB,cAAc;;4BAMN,GAAG;;wBAMP,GAAG;;4BAMM,EAAE;;;;;;mBAuBb,EAAE;kBASJ,EAAE;;;;;;;kCAsBY,GAAG;;;;EAQ3D,mBAAmB,CAAC,QAAgD;IAClE,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;MAChC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;KAC3C;SAAM;MACL,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC;KAC/B;;;;;;;GAQF;EAGD,cAAc,CAAC,QAAkC;IAC/C,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;MAChC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;KACtC;SAAM;MACL,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;KAC1B;GACF;EAGD,aAAa,CAAC,QAAiC;IAC7C,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;MAChC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;KACrC;SAAM;MACL,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC;KACzB;GACF;EAID,MAAM,iBAAiB;IACrB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAClC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAChC,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;GAC7C;EAED,MAAM;IACJ,MAAM,QAAQ,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IAChD,MAAM,UAAU,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;IACtE,MAAM,SAAS,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;IAClD,MAAM,QAAQ,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IAEhD,MAAM,OAAO,GAAG;MACd,cAAc,EAAE,IAAI;MACpB,yBAAyB,EAAE,QAAQ;MACnC,2BAA2B,EAAE,UAAU;MACvC,0BAA0B,EAAE,SAAS;MACrC,yBAAyB,EAAE,QAAQ;KACpC,CAAC;IAEF,MAAM,YAAY,GAAG,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;IAC7C,MAAM,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,GAAG,IAAI,IAAI,CAAC,gBAAgB,EAAE,GAAG,KAAK,CAAC;IACrF,MAAM,wBAAwB,GAAG,IAAI,IAAI,CAAC,sBAAsB,EAAE,CAAC;IAEnE,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,OAAO,EAAE,SAAS,QAAC,QAAQ,EAAE,qBAAqB,IAAI,CAAC,IAAI,EAAE,IACvE,WACE,KAAK,EAAC,4BAA4B,EAClC,QAAQ,EAAE,CAAC,IAAI,CAAC,IAAI,KAAK,cAAc,IAAI,CAAC,IAAI,CAAC,OAAO;WACnD,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,MAAM,GAAG,IAAI,IAEzD,IAAI,CAAC,WAAW;QACb,oBAAc,KAAK,EAAE,IAAI,CAAC,gBAAgB,IAAG,IAAI,CAAC,WAAW,CAAgB;QAC7E,YAAM,IAAI,EAAC,cAAc,GAAQ,CAEjC,EAEN,WAAK,KAAK,EAAC,6BAA6B,IACtC,WAAK,KAAK,EAAC,qBAAqB,IAC9B,YAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,CACF,EAEN,WAAK,KAAK,EAAC,oBAAoB,IAC5B,IAAI,CAAC,OAAO;MACX,EAAC,YAAY,IACX,KAAK,EAAC,uBAAuB,EAC7B,QAAQ,EAAE,IAAI,CAAC,IAAI,KAAK,cAAc,IAAI,CAAC,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,IAAI,EACpE,SAAS,EAAE,IAAI,CAAC,OAAO,GACT,EAGjB,IAAI,CAAC,IAAI;MACR,EAAC,gBAAgB,IACf,KAAK,EAAE;UACL,oBAAoB,EAAE,IAAI;UAC1B,YAAY,EAAE,IAAI,CAAC,gBAAgB,KAAK,EAAE;SAC3C,EACD,QAAQ,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ,GAAG,MAAM,GAAG,IAAI,IAE/C,IAAI,CAAC,IAAI,CACO,EAGrB,WACE,KAAK,EAAC,uBAAuB,EAC7B,QAAQ,EAAC,SAAS,EAClB,SAAS,QACT,QAAQ,EAAC,iCAAiC,EAC1C,SAAS,EAAE,IAAI,CAAC,OAAO,IAEtB,CAAC,IAAI,CAAC,OAAO;MACZ,EAAC,QAAQ,QACN,IAAI,CAAC,MAAM;QACV,WAAK,KAAK,EAAC,sBAAsB,EAAC,QAAQ,EAAC,eAAe,IACvD,IAAI,CAAC,MAAM,EACX,IAAI,CAAC,UAAU;UACd,EAAC,QAAQ,QACP,aAAM,OAAE,IAAI,CAAC,UAAU,CACd,CAET,EAGP,IAAI,CAAC,UAAU;QACd,YAAM,KAAK,EAAC,2BAA2B,EAAC,QAAQ,EAAC,YAAY,IAC1D,IAAI,CAAC,UAAU,WACX,EAGR,IAAI,CAAC,QAAQ;QACZ,YAAM,KAAK,EAAC,wBAAwB,EAAC,QAAQ,EAAC,iBAAiB,IAC5D,IAAI,CAAC,QAAQ,CACT,EAGT,YAAM,IAAI,EAAC,SAAS,GAAQ,CACnB,CAET,EAEL,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC;MACvB,WAAK,KAAK,EAAC,uBAAuB,IAC/B,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,MAAM,KACxB,WAAK,KAAK,EAAC,sBAAsB,IAC/B,gBAAO,MAAM,CAAC,KAAK,WAAc,EACjC,iBACE,IAAI,EAAC,SAAS,EACd,MAAM,EAAC,MAAM,EACb,KAAK,EAAC,2BAA2B,EACjC,IAAI,EAAE,GAAG,MAAM,CAAC,IAAI,IAAI,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,EAClD,WAAW,EAAE,MAAM,CAAC,WAAW,KAAK,GAAG,MAAM,CAAC,KAAK,IAAI,MAAM,CAAC,MAAM,EAAE,CAAC,EACvE,QAAQ,EAAE,MAAM,CAAC,IAAI,KAAK,KAAK,GAAG,WAAW,GAAG,WAAW,IAE1D,MAAM,CAAC,MAAM,CACJ,CACR,CACP,CACG,EAGP,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC;MACtB,WAAK,KAAK,EAAC,sBAAsB,IAC9B,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,KAAK,KACtB,WAAK,KAAK,EAAC,qBAAqB,IAC9B,gBAAO,KAAK,CAAC,KAAK,WAAc,EAC/B,KAAK,CAAC,IAAI;;UAET,iBACE,IAAI,EAAC,SAAS,EACd,MAAM,EAAC,MAAM,EACb,KAAK,EAAC,4BAA4B,EAClC,IAAI,EAAE,UAAU,KAAK,CAAC,IAAI,EAAE,EAC5B,WAAW,EAAE,KAAK,CAAC,WAAW,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,IAAI,EAAE,CAAC,EAClE,QAAQ,EAAC,OAAO,IAEf,KAAK,CAAC,IAAI,CACD;;UAEZ,YACE,KAAK,EAAC,4BAA4B,EAClC,QAAQ,EAAC,OAAO,IAEf,KAAK,CAAC,IAAI,CACN,CAEL,CACP,CACG,EAGR,WACE,KAAK,EAAC,qBAAqB,EAC3B,SAAS,EAAE,IAAI,CAAC,KAAK,IAEpB,CAAC,IAAI,CAAC,KAAK;MACV,EAAC,QAAQ,QACN,IAAI,CAAC,YAAY;QAChB,WAAK,KAAK,EAAC,6BAA6B,IAAE,IAAI,CAAC,YAAY,CAAO,EAEnE,IAAI,CAAC,UAAU;QACd,WAAK,KAAK,EAAC,2BAA2B,IAAE,IAAI,CAAC,UAAU,CAAO,EAE/D,IAAI,CAAC,eAAe;QACnB,YAAM,KAAK,EAAC,iCAAiC,IAAE,IAAI,CAAC,eAAe,WAAc,EAElF,IAAI,CAAC,aAAa;QACjB,YAAM,KAAK,EAAC,8BAA8B,IAAE,IAAI,CAAC,aAAa,CAAQ,EAExE,YAAM,IAAI,EAAC,OAAO,GAAQ,CACjB,CAET,CACF,EAEL,IAAI,CAAC,YAAY;MAChB,WAAK,KAAK,EAAC,4BAA4B,IACpC,IAAI,CAAC,iBAAiB;QACrB,EAAC,wBAAwB,IACvB,KAAK,EAAC,kCAAkC,IAEvC,IAAI,CAAC,iBAAiB,CACE,EAG5B,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC;QAC5B,UAAI,KAAK,EAAC,iCAAiC,IACxC,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,IAAI,KAC3B,UAAI,KAAK,EAAC,sCAAsC,IAC9C,WAAK,KAAK,EAAC,oCAAoC,IAAE,IAAI,CAAC,OAAO,CAAO,EACnE,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC;;YAEpB,WAAK,KAAK,EAAC,kCAAkC,IAC1C,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,KAC1B,EAAC,QAAQ,QACP,WAAK,KAAK,EAAC,iCAAiC,IAAE,IAAI,CAAO,EACxD,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC;cAC5B,WAAK,KAAK,EAAC,4CAA4C,GAAO,CAEvD,CACZ,CACG;;YAEN,WAAK,KAAK,EAAC,kCAAkC,QAEvC,CAEL,CACN,CACE,CAEH,EAGR,WAAK,KAAK,EAAC,0BAA0B,IACnC,eAAa,CACT,CACF,CACD,EACP;GACH;;;;;;;;;;;;","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\"\n \"image image image image\"\n \"info info info info\"\n \"availability availability availability availability\"\n \"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\"\n \"image image image image . . . .\"\n \"info info info info availability availability availability availability\"\n \"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.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', 'small');\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","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Fragment,\n Watch\n} from \"@stencil/core\";\n\nimport {\n ContactNumber,\n ContactEmail,\n StzhContactAvailabilityItem\n} 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;\n\n /* Additional street info /\n @Prop() streetInfo: string;\n\n /* Postal code /\n @Prop() postalCode: string;\n\n /* Location / city /\n @Prop() location: string;\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 // 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 @Element() element: HTMLStzhFigureElement;\n\n async componentWillLoad() {\n this.numbersWatcher(this.numbers);\n this.emailsWatcher(this.emails);\n this.availabilityWatcher(this.availability);\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 };\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>\n <div class={classes} itemscope itemtype={`http://schema.org/${this.type}`}>\n <div\n class=\"stzh-contact__main-heading\"\n itemprop={(this.type === \"Organization\" && !this.heading\n \|\| this.type === \"Person\" && !this.name) ? \"name\" : null}\n >\n {this.mainHeading\n ? <stzh-heading level={this.mainHeadingLevel}>{this.mainHeading}</stzh-heading>\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 &&\n <div class=\"stzh-contact__street\" itemprop=\"streetAddress\">\n {this.street}\n {this.streetInfo &&\n <Fragment>\n <br /> {this.streetInfo}\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 ?\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\n class=\"stzh-container__email-link\"\n itemprop=\"email\"\n >\n {email.text}\n </span>\n }\n </div>\n )}\n </div>\n }\n\n <div\n class=\"stzh-contact__pobox\"\n innerHTML={this.pobox}\n >\n {!this.pobox &&\n <Fragment>\n {this.poboxHeading &&\n <div class=\"stzh-contact__pobox-heading\">{this.poboxHeading}</div>\n }\n {this.poboxTitle &&\n <div class=\"stzh-contact__pobox-title\">{this.poboxTitle}</div>\n }\n {this.poboxPostalCode &&\n <span class=\"stzh-contact__pobox-postal-code\">{this.poboxPostalCode} </span>\n }\n {this.poboxLocation &&\n <span class=\"stzh-contact__pobox-locality\">{this.poboxLocation}</span>\n }\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\n class=\"stzh-contact__availability-title\"\n >\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 ?\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 <div class=\"stzh-contact__availability-hours\">\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\"\n \"image image image image\"\n \"info info info info\"\n \"availability availability availability availability\"\n \"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\"\n \"image image image image . . . .\"\n \"info info info info availability availability availability availability\"\n \"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.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', 'small');\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","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 /\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 };\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>\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 <div class=\"stzh-contact__availability-hours\">-</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-container.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, a as Host } from './index-e3050b18.js';
-const stzhContainerCss = ".sc-stzh-container-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-container-h{display:none}.sc-stzh-container-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-container-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-container-h *.sc-stzh-container,.sc-stzh-container-h *.sc-stzh-container::before,.sc-stzh-container-h *.sc-stzh-container::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-container-h .has-focus.sc-stzh-container{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-container-h .stzh-fylingfocus-focused.sc-stzh-container{outline-style:none !important}.sc-stzh-container-h .stzh-fylingfocus-focused.sc-stzh-container::-moz-focus-inner{border:0 !important}.sc-stzh-container-h .sc-stzh-container-s stzh-header{margin-left:-1.25rem;margin-right:-1.25rem}@media screen and (min-width: 600px){.sc-stzh-container-h .sc-stzh-container-s stzh-header{margin-left:-2rem;margin-right:-2rem}}@media screen and (min-width: 900px){.sc-stzh-container-h .sc-stzh-container-s stzh-header{margin-left:-2.5rem;margin-right:-2.5rem}}@media screen and (min-width: 1260px){.sc-stzh-container-h .sc-stzh-container-s stzh-header{margin-left:-4rem;margin-right:-4rem}}@media screen and (min-width: 1600px){.sc-stzh-container-h .sc-stzh-container-s stzh-header{margin-left:calc((100vw - 84.25rem - var(--stzh-scrollbar-width, 0px)) / -2);margin-right:calc((100vw - 84.25rem - var(--stzh-scrollbar-width, 0px)) / -2)}}.sc-stzh-container-h .sc-stzh-container-s stzh-banner,.sc-stzh-container-h .sc-stzh-container-s stzh-ghettobox,.sc-stzh-container-h .sc-stzh-container-s stzh-pagetitle,.sc-stzh-container-h .sc-stzh-container-s stzh-container{position:relative;left:50%;right:50%;margin-left:calc(-50vw + var(--stzh-scrollbar-width) / 2);margin-right:calc(-50vw + var(--stzh-scrollbar-width) / 2);width:calc(100vw - var(--stzh-scrollbar-width));max-width:calc(100vw - var(--stzh-scrollbar-width))}.stzh-container.sc-stzh-container{margin-left:1.25rem;margin-right:1.25rem}@media screen and (min-width: 600px){.stzh-container.sc-stzh-container{margin-left:2rem;margin-right:2rem}}@media screen and (min-width: 900px){.stzh-container.sc-stzh-container{margin-left:2.5rem;margin-right:2.5rem}}@media screen and (min-width: 1260px){.stzh-container.sc-stzh-container{margin-left:4rem;margin-right:4rem}}@media screen and (min-width: 1600px){.stzh-container.sc-stzh-container{margin-left:auto;margin-right:auto;max-width:84.25rem}}.stzh-container--has-no-margin.sc-stzh-container{margin-left:auto;margin-right:auto}";
+const stzhContainerCss = ".sc-stzh-container-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-container-h{display:none}.sc-stzh-container-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-container-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-container-h *.sc-stzh-container,.sc-stzh-container-h *.sc-stzh-container::before,.sc-stzh-container-h *.sc-stzh-container::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-container-h .has-focus.sc-stzh-container{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-container-h .stzh-fylingfocus-focused.sc-stzh-container{outline-style:none !important}.sc-stzh-container-h .stzh-fylingfocus-focused.sc-stzh-container::-moz-focus-inner{border:0 !important}.sc-stzh-container-h .sc-stzh-container-s stzh-header{margin-left:-1.25rem;margin-right:-1.25rem}@media screen and (min-width: 600px){.sc-stzh-container-h .sc-stzh-container-s stzh-header{margin-left:-2rem;margin-right:-2rem}}@media screen and (min-width: 900px){.sc-stzh-container-h .sc-stzh-container-s stzh-header{margin-left:-2.5rem;margin-right:-2.5rem}}@media screen and (min-width: 1260px){.sc-stzh-container-h .sc-stzh-container-s stzh-header{margin-left:-4rem;margin-right:-4rem}}@media screen and (min-width: 1600px){.sc-stzh-container-h .sc-stzh-container-s stzh-header{margin-left:calc((100vw - 84.25rem - var(--stzh-scrollbar-width, 0px)) / -2);margin-right:calc((100vw - 84.25rem - var(--stzh-scrollbar-width, 0px)) / -2)}}.sc-stzh-container-h .sc-stzh-container-s stzh-banner,.sc-stzh-container-h .sc-stzh-container-s stzh-ghettobox,.sc-stzh-container-h .sc-stzh-container-s stzh-pagetitle,.sc-stzh-container-h .sc-stzh-container-s stzh-pagetitle-home,.sc-stzh-container-h .sc-stzh-container-s stzh-container,.sc-stzh-container-h .sc-stzh-container-s stzh-homepage-service-highlights{position:relative;left:50%;right:50%;margin-left:calc(-50vw + var(--stzh-scrollbar-width) / 2);margin-right:calc(-50vw + var(--stzh-scrollbar-width) / 2);width:calc(100vw - var(--stzh-scrollbar-width));max-width:calc(100vw - var(--stzh-scrollbar-width))}.stzh-container.sc-stzh-container{margin-left:1.25rem;margin-right:1.25rem}@media screen and (min-width: 600px){.stzh-container.sc-stzh-container{margin-left:2rem;margin-right:2rem}}@media screen and (min-width: 900px){.stzh-container.sc-stzh-container{margin-left:2.5rem;margin-right:2.5rem}}@media screen and (min-width: 1260px){.stzh-container.sc-stzh-container{margin-left:4rem;margin-right:4rem}}@media screen and (min-width: 1600px){.stzh-container.sc-stzh-container{margin-left:auto;margin-right:auto;max-width:84.25rem}}.stzh-container--has-no-margin.sc-stzh-container{margin-left:auto;margin-right:auto}";
 const StzhContainer = class {
   constructor(hostRef) {

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

	@@ -1 +1 @@
1	- {"file":"stzh-container.entry.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,~~mhGAAmhG~~;;~~MCe/hG~~,aAAa;;;oBAKI,KAAK;;EAEjC,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,gBAAgB,EAAE,IAAI;MACtB,+BAA+B,EAAE,IAAI,CAAC,QAAQ;;KAE/C,CAAC;IAEF,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,OAAO,IACjB,eAAa,CACT,CACD,EACP;GACH;;;;;;","names":[],"sources":["src/components/stzh-container/stzh-container.scss?tag=stzh-container&encapsulation=scoped","src/components/stzh-container/stzh-container.tsx"],"sourcesContent":[":host {\n ::slotted() {\n stzh-header {\n margin-left: -$containerMargin;\n margin-right: -$containerMargin;\n\n @include mq($from: small) {\n margin-left: -$containerMarginSmall;\n margin-right: -$containerMarginSmall;\n }\n\n @include mq($from: medium) {\n margin-left: -$containerMarginMedium;\n margin-right: -$containerMarginMedium;\n }\n\n @include mq($from: large) {\n margin-left: -$containerMarginLarge;\n margin-right: -$containerMarginLarge;\n }\n\n @include mq($from: ultra) {\n margin-left: calc((100vw - #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px)) / -2);\n margin-right: calc((100vw - #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px)) / -2);\n }\n }\n\n stzh-banner,\n stzh-ghettobox,\n stzh-pagetitle,\n stzh-container {\n position: relative;\n left: 50%;\n right: 50%;\n margin-left: calc(-50vw + var(--stzh-scrollbar-width) / 2);\n margin-right: calc(-50vw + var(--stzh-scrollbar-width) / 2);\n width: calc(100vw - var(--stzh-scrollbar-width));\n max-width: calc(100vw - var(--stzh-scrollbar-width));\n }\n\n // stzh-section[variant=\"highlight\"] {\n // --padding-left: #{$containerMargin};\n // --padding-right: #{$containerMargin};\n\n // @include mq($from: small) {\n // --padding-left: #{$containerMarginSmall};\n // --padding-right: #{$containerMarginSmall};\n // }\n\n // @include mq($from: medium) {\n // --padding-left: #{$containerMarginMedium};\n // --padding-right: #{$containerMarginMedium};\n // }\n\n // @include mq($from: large) {\n // --padding-left: #{space('xlarge')};\n // --padding-right: #{space('xlarge')};\n // }\n\n // @include mq($to: large) {\n // position: relative;\n // left: 50%;\n // right: 50%;\n // margin-left: calc(-50vw + var(--stzh-scrollbar-width) / 2);\n // margin-right: calc(-50vw + var(--stzh-scrollbar-width) / 2);\n // width: calc(100vw - var(--stzh-scrollbar-width));\n // max-width: calc(100vw - var(--stzh-scrollbar-width));\n // }\n // }\n\n // stzh-row stzh-section[variant=\"highlight\"] {\n // @include spaceCurve('--padding-left', 'small');\n // @include spaceCurve('--padding-right', 'small');\n\n // @include mq($to: large) {\n // left: initial;\n // right: initial;\n // margin-left: initial;\n // margin-right: initial;\n // width: initial;\n // max-width: initial;\n // }\n // }\n }\n}\n\n.stzh-container {\n @include container;\n\n // &--size-big {\n // @include container($size: \"big\");\n // }\n\n &--has-no-margin {\n margin-left: auto;\n margin-right: auto;\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n} from \"@stencil/core\";\n\n/\n @slot - Slot for any content\n /\n@Component({\n tag: \"stzh-container\",\n styleUrl: \"stzh-container.scss\",\n scoped: true\n})\nexport class StzhContainer {\n /* Size variant /\n // @Prop() size: \"default\" \| \"big\" = \"default\";\n\n /* Whether to prevent side margins */\n @Prop() noMargin: boolean = false;\n\n render() {\n const classes = {\n \"stzh-container\": true,\n \"stzh-container--has-no-margin\": this.noMargin,\n // [`stzh-container--size-${this.size}`]: !!this.size,\n };\n\n return (\n <Host>\n <div class={classes}>\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"stzh-container.entry.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,4pGAA4pG;;MCexqG,aAAa;;;oBAKI,KAAK;;EAEjC,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,gBAAgB,EAAE,IAAI;MACtB,+BAA+B,EAAE,IAAI,CAAC,QAAQ;;KAE/C,CAAC;IAEF,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,OAAO,IACjB,eAAa,CACT,CACD,EACP;GACH;;;;;;","names":[],"sources":["src/components/stzh-container/stzh-container.scss?tag=stzh-container&encapsulation=scoped","src/components/stzh-container/stzh-container.tsx"],"sourcesContent":[":host {\n ::slotted() {\n stzh-header {\n margin-left: -$containerMargin;\n margin-right: -$containerMargin;\n\n @include mq($from: small) {\n margin-left: -$containerMarginSmall;\n margin-right: -$containerMarginSmall;\n }\n\n @include mq($from: medium) {\n margin-left: -$containerMarginMedium;\n margin-right: -$containerMarginMedium;\n }\n\n @include mq($from: large) {\n margin-left: -$containerMarginLarge;\n margin-right: -$containerMarginLarge;\n }\n\n @include mq($from: ultra) {\n margin-left: calc((100vw - #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px)) / -2);\n margin-right: calc((100vw - #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px)) / -2);\n }\n }\n\n stzh-banner,\n stzh-ghettobox,\n stzh-pagetitle,\n stzh-pagetitle-home,\n stzh-container,\n stzh-homepage-service-highlights {\n position: relative;\n left: 50%;\n right: 50%;\n margin-left: calc(-50vw + var(--stzh-scrollbar-width) / 2);\n margin-right: calc(-50vw + var(--stzh-scrollbar-width) / 2);\n width: calc(100vw - var(--stzh-scrollbar-width));\n max-width: calc(100vw - var(--stzh-scrollbar-width));\n }\n\n // stzh-section[variant=\"highlight\"] {\n // --padding-left: #{$containerMargin};\n // --padding-right: #{$containerMargin};\n\n // @include mq($from: small) {\n // --padding-left: #{$containerMarginSmall};\n // --padding-right: #{$containerMarginSmall};\n // }\n\n // @include mq($from: medium) {\n // --padding-left: #{$containerMarginMedium};\n // --padding-right: #{$containerMarginMedium};\n // }\n\n // @include mq($from: large) {\n // --padding-left: #{space('xlarge')};\n // --padding-right: #{space('xlarge')};\n // }\n\n // @include mq($to: large) {\n // position: relative;\n // left: 50%;\n // right: 50%;\n // margin-left: calc(-50vw + var(--stzh-scrollbar-width) / 2);\n // margin-right: calc(-50vw + var(--stzh-scrollbar-width) / 2);\n // width: calc(100vw - var(--stzh-scrollbar-width));\n // max-width: calc(100vw - var(--stzh-scrollbar-width));\n // }\n // }\n\n // stzh-row stzh-section[variant=\"highlight\"] {\n // @include spaceCurve('--padding-left', 'small');\n // @include spaceCurve('--padding-right', 'small');\n\n // @include mq($to: large) {\n // left: initial;\n // right: initial;\n // margin-left: initial;\n // margin-right: initial;\n // width: initial;\n // max-width: initial;\n // }\n // }\n }\n}\n\n.stzh-container {\n @include container;\n\n // &--size-big {\n // @include container($size: \"big\");\n // }\n\n &--has-no-margin {\n margin-left: auto;\n margin-right: auto;\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n} from \"@stencil/core\";\n\n/\n @slot - Slot for any content\n /\n@Component({\n tag: \"stzh-container\",\n styleUrl: \"stzh-container.scss\",\n scoped: true\n})\nexport class StzhContainer {\n /* Size variant /\n // @Prop() size: \"default\" \| \"big\" = \"default\";\n\n /* Whether to prevent side margins */\n @Prop() noMargin: boolean = false;\n\n render() {\n const classes = {\n \"stzh-container\": true,\n \"stzh-container--has-no-margin\": this.noMargin,\n // [`stzh-container--size-${this.size}`]: !!this.size,\n };\n\n return (\n <Host>\n <div class={classes}>\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, a as Host, g as getElement } from './index-e3050b18.js';
-const stzhContentCss = ".sc-stzh-content-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-content-h{display:none}.sc-stzh-content-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-content-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-content-h *.sc-stzh-content,.sc-stzh-content-h *.sc-stzh-content::before,.sc-stzh-content-h *.sc-stzh-content::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-content-h .has-focus.sc-stzh-content{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-content-h .stzh-fylingfocus-focused.sc-stzh-content{outline-style:none !important}.sc-stzh-content-h .stzh-fylingfocus-focused.sc-stzh-content::-moz-focus-inner{border:0 !important}.sc-stzh-content-h{--grid-template-areas:var(--stzh-content-grid-template-areas, \"content content content content\")}@media screen and (min-width: 900px){.sc-stzh-content-h{--grid-template-areas:var(--stzh-content-grid-template-areas, \"content content content content content content content content\")}}@media screen and (min-width: 1260px){.sc-stzh-content-h{--grid-template-areas:var(--stzh-content-grid-template-areas, \"aside-left aside-left content content content content content content content content aside-right aside-right\")}}@media screen and (min-width: 1260px){[variant=shifted].sc-stzh-content-h{--grid-template-areas:var(--stzh-content-shifted-grid-template-areas, var(--stzh-content-grid-template-areas, \"aside-left aside-left content content content content content content content content content aside-right\"))}}@media screen and (min-width: 1260px){[variant=full].sc-stzh-content-h{--grid-template-areas:var(--stzh-content-full-grid-template-areas, var(--stzh-content-grid-template-areas, \"content content content content content content content content content content content content\"))}}.sc-stzh-content-h .sc-stzh-content-s>*{grid-area:content}@media screen and (min-width: 600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s>*{--stzh-cta-small-grid-template-areas:\"cta cta cta .\"}}@media screen and (min-width: 900px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s>*{--stzh-cta-grid-template-areas:\"cta cta cta cta cta . . .\";--stzh-cta-small-grid-template-areas:\"cta cta cta cta . . . .\"}}@media screen and (min-width: 600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s>*{--stzh-text-display:grid;--stzh-text-grid-template-areas:\"text text text .\";--stzh-richtext-display:grid;--stzh-richtext-grid-template-areas:\"text text text .\"}}@media screen and (min-width: 900px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s>*{--stzh-text-grid-template-areas:\"text text text text text text . .\";--stzh-richtext-grid-template-areas:\"text text text text text text . .\"}}@media screen and (min-width: 600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s>*{--stzh-datalist-grid-template-areas:\"list list list .\";--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-small) - 2 * var(--stzh-grid-gutter-small)) / 3 * 4) + 3 * var(--stzh-grid-gutter-small) + var(--stzh-grid-gutter-small))}}@media screen and (min-width: 900px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s>*{--stzh-datalist-grid-template-areas:\"list list list list list . . .\";--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-medium) - 4 * var(--stzh-grid-gutter-medium)) / 5 * 8) + 7 * var(--stzh-grid-gutter-medium) + var(--stzh-grid-gutter-medium))}}@media screen and (min-width: 1260px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s>*{--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-large) - 4 * var(--stzh-grid-gutter-large)) / 5 * 8) + 7 * var(--stzh-grid-gutter-large) + var(--stzh-grid-gutter-large))}}@media screen and (min-width: 1600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s>*{--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-ultra) - 4 * var(--stzh-grid-gutter-ultra)) / 5 * 8) + 7 * var(--stzh-grid-gutter-ultra) + var(--stzh-grid-gutter-ultra))}}@media screen and (min-width: 600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-eventdata{--stzh-text-display:block;--stzh-richtext-display:block}}@media screen and (min-width: 600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-section[variant=highlight],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-ghettobox,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-message,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-toast,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-tooltip,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-popover,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-accordion,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-timeline,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-twocolumns,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-textandimage,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-datalist stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-dialog,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-overlay{--stzh-cta-small-grid-template-areas:\"cta cta cta cta\"}}@media screen and (min-width: 900px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-section[variant=highlight],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-ghettobox,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-message,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-toast,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-tooltip,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-popover,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-accordion,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-timeline,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-twocolumns,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-textandimage,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-datalist stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-dialog,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-overlay{--stzh-cta-grid-template-areas:\"cta cta cta cta cta cta cta cta\";--stzh-cta-small-grid-template-areas:\"cta cta cta cta cta cta cta cta\"}}@media screen and (min-width: 600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-section[variant=highlight],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-ghettobox,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-message,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-toast,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-tooltip,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-popover,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-accordion,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-timeline,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-twocolumns,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-textandimage,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-datalist stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-dialog,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-overlay{--stzh-text-display:block;--stzh-richtext-display:block}}@media screen and (min-width: 600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-section[variant=highlight],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-ghettobox,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-message,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-toast,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-tooltip,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-popover,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-accordion,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-timeline,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-twocolumns,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-textandimage,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-datalist stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-dialog,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-overlay{--stzh-datalist-grid-template-areas:\"list list list list\";--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-small) - 2 * var(--stzh-grid-gutter-small)) / 4 * 4) + 3 * var(--stzh-grid-gutter-small) + var(--stzh-grid-gutter-small))}}@media screen and (min-width: 900px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-section[variant=highlight],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-ghettobox,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-message,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-toast,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-tooltip,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-popover,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-accordion,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-timeline,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-twocolumns,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-textandimage,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-datalist stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-dialog,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-overlay{--stzh-datalist-grid-template-areas:\"list list list list list list list list\";--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-medium) - 4 * var(--stzh-grid-gutter-medium)) / 8 * 8) + 7 * var(--stzh-grid-gutter-medium) + var(--stzh-grid-gutter-medium))}}@media screen and (min-width: 1260px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-section[variant=highlight],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-ghettobox,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-message,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-toast,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-tooltip,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-popover,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-accordion,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-timeline,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-twocolumns,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-textandimage,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-datalist stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-dialog,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-overlay{--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-large) - 4 * var(--stzh-grid-gutter-large)) / 8 * 8) + 7 * var(--stzh-grid-gutter-large) + var(--stzh-grid-gutter-large))}}@media screen and (min-width: 1600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-section[variant=highlight],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-ghettobox,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-message,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-toast,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-tooltip,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-popover,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-accordion,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-timeline,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-twocolumns,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-textandimage,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-datalist stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-dialog,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-overlay{--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-ultra) - 4 * var(--stzh-grid-gutter-ultra)) / 8 * 8) + 7 * var(--stzh-grid-gutter-ultra) + var(--stzh-grid-gutter-ultra))}}.stzh-content.sc-stzh-content{--stzh-content-grid-template-areas:\"content content content content content content content content content content content content\";--stzh-content-shifted-grid-template-areas:\"content content content content content content content content content content content content\";--stzh-content-full-grid-template-areas:\"content content content content content content content content content content content content\";-moz-column-gap:var(--stzh-grid-gutter);column-gap:var(--stzh-grid-gutter);display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));grid-template-areas:var(--grid-template-areas)}@media screen and (min-width: 600px){.stzh-content.sc-stzh-content{-moz-column-gap:var(--stzh-grid-gutter-small);column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-content.sc-stzh-content{-moz-column-gap:var(--stzh-grid-gutter-medium);column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-content.sc-stzh-content{-moz-column-gap:var(--stzh-grid-gutter-large);column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-content.sc-stzh-content{-moz-column-gap:var(--stzh-grid-gutter-ultra);column-gap:var(--stzh-grid-gutter-ultra)}}@media screen and (min-width: 900px){.stzh-content.sc-stzh-content{grid-template-columns:repeat(8, minmax(0, 1fr))}}@media screen and (min-width: 1260px){.stzh-content.sc-stzh-content{grid-template-columns:repeat(12, minmax(0, 1fr))}}";
+const stzhContentCss = ".sc-stzh-content-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-content-h{display:none}.sc-stzh-content-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-content-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-content-h *.sc-stzh-content,.sc-stzh-content-h *.sc-stzh-content::before,.sc-stzh-content-h *.sc-stzh-content::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-content-h .has-focus.sc-stzh-content{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-content-h .stzh-fylingfocus-focused.sc-stzh-content{outline-style:none !important}.sc-stzh-content-h .stzh-fylingfocus-focused.sc-stzh-content::-moz-focus-inner{border:0 !important}.sc-stzh-content-h{--grid-template-areas:var(--stzh-content-grid-template-areas, \"content content content content\")}@media screen and (min-width: 900px){.sc-stzh-content-h{--grid-template-areas:var(--stzh-content-grid-template-areas, \"content content content content content content content content\")}}@media screen and (min-width: 1260px){.sc-stzh-content-h{--grid-template-areas:var(--stzh-content-grid-template-areas, \"aside-left aside-left content content content content content content content content aside-right aside-right\")}}@media screen and (min-width: 1260px){[variant=shifted].sc-stzh-content-h{--grid-template-areas:var(--stzh-content-shifted-grid-template-areas, var(--stzh-content-grid-template-areas, \"aside-left aside-left content content content content content content content content content aside-right\"))}}@media screen and (min-width: 1260px){[variant=full].sc-stzh-content-h{--grid-template-areas:var(--stzh-content-full-grid-template-areas, var(--stzh-content-grid-template-areas, \"content content content content content content content content content content content content\"))}}.sc-stzh-content-h .sc-stzh-content-s>*{grid-area:content}@media screen and (min-width: 600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s>*{--stzh-cta-small-grid-template-areas:\"cta cta cta .\"}}@media screen and (min-width: 900px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s>*{--stzh-cta-grid-template-areas:\"cta cta cta cta cta . . .\";--stzh-cta-small-grid-template-areas:\"cta cta cta cta . . . .\"}}@media screen and (min-width: 600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s>*{--stzh-text-display:grid;--stzh-text-grid-template-areas:\"text text text .\";--stzh-richtext-display:grid;--stzh-richtext-grid-template-areas:\"text text text .\"}}@media screen and (min-width: 900px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s>*{--stzh-text-grid-template-areas:\"text text text text text text . .\";--stzh-richtext-grid-template-areas:\"text text text text text text . .\"}}@media screen and (min-width: 600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s>*{--stzh-datalist-grid-template-areas:\"list list list .\";--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-small) - 2 * var(--stzh-grid-gutter-small)) / 3 * 4) + 3 * var(--stzh-grid-gutter-small) + var(--stzh-grid-gutter-small))}}@media screen and (min-width: 900px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s>*{--stzh-datalist-grid-template-areas:\"list list list list list . . .\";--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-medium) - 4 * var(--stzh-grid-gutter-medium)) / 5 * 8) + 7 * var(--stzh-grid-gutter-medium) + var(--stzh-grid-gutter-medium))}}@media screen and (min-width: 1260px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s>*{--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-large) - 4 * var(--stzh-grid-gutter-large)) / 5 * 8) + 7 * var(--stzh-grid-gutter-large) + var(--stzh-grid-gutter-large))}}@media screen and (min-width: 1600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s>*{--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-ultra) - 4 * var(--stzh-grid-gutter-ultra)) / 5 * 8) + 7 * var(--stzh-grid-gutter-ultra) + var(--stzh-grid-gutter-ultra))}}@media screen and (min-width: 600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-eventdata{--stzh-text-display:block;--stzh-richtext-display:block}}@media screen and (min-width: 600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-section[variant=highlight],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-section[variant=contextbox],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-ghettobox,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-message,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-toast,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-tooltip,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-popover,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-accordion,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-timeline,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-twocolumns,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-textandimage,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-datalist stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-dialog,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-overlay{--stzh-cta-small-grid-template-areas:\"cta cta cta cta\"}}@media screen and (min-width: 900px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-section[variant=highlight],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-section[variant=contextbox],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-ghettobox,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-message,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-toast,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-tooltip,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-popover,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-accordion,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-timeline,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-twocolumns,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-textandimage,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-datalist stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-dialog,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-overlay{--stzh-cta-grid-template-areas:\"cta cta cta cta cta cta cta cta\";--stzh-cta-small-grid-template-areas:\"cta cta cta cta cta cta cta cta\"}}@media screen and (min-width: 600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-section[variant=highlight],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-section[variant=contextbox],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-ghettobox,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-message,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-toast,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-tooltip,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-popover,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-accordion,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-timeline,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-twocolumns,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-textandimage,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-datalist stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-dialog,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-overlay{--stzh-text-display:block;--stzh-richtext-display:block}}@media screen and (min-width: 600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-section[variant=highlight],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-section[variant=contextbox],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-ghettobox,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-message,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-toast,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-tooltip,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-popover,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-accordion,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-timeline,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-twocolumns,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-textandimage,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-datalist stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-dialog,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-overlay{--stzh-datalist-grid-template-areas:\"list list list list\";--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-small) - 2 * var(--stzh-grid-gutter-small)) / 4 * 4) + 3 * var(--stzh-grid-gutter-small) + var(--stzh-grid-gutter-small))}}@media screen and (min-width: 900px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-section[variant=highlight],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-section[variant=contextbox],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-ghettobox,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-message,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-toast,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-tooltip,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-popover,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-accordion,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-timeline,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-twocolumns,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-textandimage,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-datalist stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-dialog,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-overlay{--stzh-datalist-grid-template-areas:\"list list list list list list list list\";--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-medium) - 4 * var(--stzh-grid-gutter-medium)) / 8 * 8) + 7 * var(--stzh-grid-gutter-medium) + var(--stzh-grid-gutter-medium))}}@media screen and (min-width: 1260px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-section[variant=highlight],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-section[variant=contextbox],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-ghettobox,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-message,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-toast,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-tooltip,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-popover,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-accordion,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-timeline,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-twocolumns,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-textandimage,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-datalist stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-dialog,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-overlay{--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-large) - 4 * var(--stzh-grid-gutter-large)) / 8 * 8) + 7 * var(--stzh-grid-gutter-large) + var(--stzh-grid-gutter-large))}}@media screen and (min-width: 1600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-section[variant=highlight],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-section[variant=contextbox],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-ghettobox,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-message,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-toast,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-tooltip,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-popover,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-accordion,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-timeline,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-twocolumns,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-textandimage,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-datalist stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-dialog,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-overlay{--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-ultra) - 4 * var(--stzh-grid-gutter-ultra)) / 8 * 8) + 7 * var(--stzh-grid-gutter-ultra) + var(--stzh-grid-gutter-ultra))}}.stzh-content.sc-stzh-content{--stzh-content-grid-template-areas:\"content content content content content content content content content content content content\";--stzh-content-shifted-grid-template-areas:\"content content content content content content content content content content content content\";--stzh-content-full-grid-template-areas:\"content content content content content content content content content content content content\";-moz-column-gap:var(--stzh-grid-gutter);column-gap:var(--stzh-grid-gutter);display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));grid-template-areas:var(--grid-template-areas)}@media screen and (min-width: 600px){.stzh-content.sc-stzh-content{-moz-column-gap:var(--stzh-grid-gutter-small);column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-content.sc-stzh-content{-moz-column-gap:var(--stzh-grid-gutter-medium);column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-content.sc-stzh-content{-moz-column-gap:var(--stzh-grid-gutter-large);column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-content.sc-stzh-content{-moz-column-gap:var(--stzh-grid-gutter-ultra);column-gap:var(--stzh-grid-gutter-ultra)}}@media screen and (min-width: 900px){.stzh-content.sc-stzh-content{grid-template-columns:repeat(8, minmax(0, 1fr))}}@media screen and (min-width: 1260px){.stzh-content.sc-stzh-content{grid-template-columns:repeat(12, minmax(0, 1fr))}}";
 const StzhContent = class {
   constructor(hostRef) {

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

	@@ -1 +1 @@
1	- {"file":"stzh-content.entry.js","mappings":";;AAAA,MAAM,cAAc,GAAG,~~27nBAA27nB~~;;~~MCgBr8nB~~,WAAW;;;mBAE6C,SAAS;gCAG5B,KAAK;;EAIrD,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,cAAc,EAAE,IAAI;MACpB,CAAC,iBAAiB,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;KAClD,CAAC;IAEF,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,OAAO,IACjB,eAAa,CACT,CACD,EACP;GACH;;;;;;;","names":[],"sources":["src/components/stzh-content/stzh-content.scss?tag=stzh-content&encapsulation=scoped","src/components/stzh-content/stzh-content.tsx"],"sourcesContent":[":host {\n --grid-template-areas: var(--stzh-content-grid-template-areas, \"content content content content\");\n\n @include mq($from: medium) {\n --grid-template-areas: var(--stzh-content-grid-template-areas, \"content content content content content content content content\");\n }\n\n @include mq($from: large) {\n --grid-template-areas: var(--stzh-content-grid-template-areas, \"aside-left aside-left content content content content content content content content aside-right aside-right\");\n }\n\n &[variant=\"shifted\"] {\n @include mq($from: large) {\n --grid-template-areas: var(--stzh-content-shifted-grid-template-areas, var(--stzh-content-grid-template-areas, \"aside-left aside-left content content content content content content content content content aside-right\"));\n }\n }\n\n &[variant=\"full\"] {\n @include mq($from: large) {\n --grid-template-areas: var(--stzh-content-full-grid-template-areas, var(--stzh-content-grid-template-areas, \"content content content content content content content content content content content content\"));\n }\n }\n\n ::slotted() {\n grid-area: content;\n }\n\n &:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) ::slotted() {\n /* CTA Layout /\n\n @include mq($from: small) {\n --stzh-cta-small-grid-template-areas: \"cta cta cta .\";\n }\n\n @include mq($from: medium) {\n --stzh-cta-grid-template-areas: \"cta cta cta cta cta . . .\";\n --stzh-cta-small-grid-template-areas: \"cta cta cta cta . . . .\";\n }\n\n / Text / Richtext Layout /\n\n @include mq($from: small) {\n --stzh-text-display: grid;\n --stzh-text-grid-template-areas: \"text text text .\";\n\n --stzh-richtext-display: grid;\n --stzh-richtext-grid-template-areas: \"text text text .\";\n }\n\n @include mq($from: medium) {\n --stzh-text-grid-template-areas: \"text text text text text text . .\";\n --stzh-richtext-grid-template-areas: \"text text text text text text . .\";\n }\n\n / Datalist Layout /\n\n @include mq($from: small) {\n --stzh-datalist-grid-template-areas: \"list list list .\";\n // breakout with details element inside datalist-item\n --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterSmall} - 2 #{$gridGutterSmall}) / 3 * 4) + 3 * #{$gridGutterSmall} + #{$gridGutterSmall});\n }\n\n @include mq($from: medium) {\n --stzh-datalist-grid-template-areas: \"list list list list list . . .\";\n --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterMedium} - 4 * #{$gridGutterMedium}) / 5 * 8) + 7 * #{$gridGutterMedium} + #{$gridGutterMedium});\n }\n\n @include mq($from: large) {\n --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterLarge} - 4 * #{$gridGutterLarge}) / 5 * 8) + 7 * #{$gridGutterLarge} + #{$gridGutterLarge});\n }\n\n @include mq($from: ultra) {\n --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterUltra} - 4 * #{$gridGutterUltra}) / 5 * 8) + 7 * #{$gridGutterUltra} + #{$gridGutterUltra});\n }\n\n /* Reset layout inside certain components /\n\n stzh-datalist,\n stzh-eventdata {\n / Text Layout /\n\n @include mq($from: small) {\n --stzh-text-display: block;\n --stzh-richtext-display: block;\n }\n }\n\n stzh-section[variant=\"highlight\"],\n stzh-ghettobox,\n stzh-message,\n stzh-toast,\n stzh-tooltip,\n stzh-popover,\n stzh-accordion,\n stzh-timeline,\n stzh-twocolumns,\n stzh-textandimage,\n stzh-datalist stzh-datalist,\n stzh-dialog,\n stzh-overlay {\n / CTA Layout /\n\n @include mq($from: small) {\n --stzh-cta-small-grid-template-areas: \"cta cta cta cta\";\n }\n\n @include mq($from: medium) {\n --stzh-cta-grid-template-areas: \"cta cta cta cta cta cta cta cta\";\n --stzh-cta-small-grid-template-areas: \"cta cta cta cta cta cta cta cta\";\n }\n\n / Text Layout /\n\n @include mq($from: small) {\n --stzh-text-display: block;\n --stzh-richtext-display: block;\n }\n\n / Datalist Layout /\n\n @include mq($from: small) {\n --stzh-datalist-grid-template-areas: \"list list list list\";\n // breakout with details element inside datalist-item\n --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterSmall} - 2 #{$gridGutterSmall}) / 4 * 4) + 3 * #{$gridGutterSmall} + #{$gridGutterSmall});\n }\n\n @include mq($from: medium) {\n --stzh-datalist-grid-template-areas: \"list list list list list list list list\";\n --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterMedium} - 4 * #{$gridGutterMedium}) / 8 * 8) + 7 * #{$gridGutterMedium} + #{$gridGutterMedium});\n }\n\n @include mq($from: large) {\n --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterLarge} - 4 * #{$gridGutterLarge}) / 8 * 8) + 7 * #{$gridGutterLarge} + #{$gridGutterLarge});\n }\n\n @include mq($from: ultra) {\n --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterUltra} - 4 * #{$gridGutterUltra}) / 8 * 8) + 7 * #{$gridGutterUltra} + #{$gridGutterUltra});\n }\n }\n }\n}\n\n.stzh-content {\n // set nested content elements to be fullwidth\n --stzh-content-grid-template-areas: \"content content content content content content content content content content content content\";\n --stzh-content-shifted-grid-template-areas: \"content content content content content content content content content content content content\";\n --stzh-content-full-grid-template-areas: \"content content content content content content content content content content content content\";\n\n @include grid;\n grid-template-areas: var(--grid-template-areas);\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n} from \"@stencil/core\";\n\n/*\n @slot - Slot for any content\n /\n@Component({\n tag: \"stzh-content\",\n styleUrl: \"stzh-content.scss\",\n scoped: true\n})\nexport class StzhContent {\n /* Variant /\n @Prop({ reflect: true }) variant: \"default\" \| \"shifted\" \| \"full\" = \"default\";\n\n /* Prevent changing layout of elements within this content element */\n @Prop({ reflect: true }) preventElementLayout = false;\n\n @Element() element: HTMLStzhContentElement;\n\n render() {\n const classes = {\n \"stzh-content\": true,\n [`stzh-content--${this.variant}`]: !!this.variant,\n };\n\n return (\n <Host>\n <div class={classes}>\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"stzh-content.entry.js","mappings":";;AAAA,MAAM,cAAc,GAAG,88pBAA88pB;;MCgBx9pB,WAAW;;;mBAE6C,SAAS;gCAG5B,KAAK;;EAIrD,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,cAAc,EAAE,IAAI;MACpB,CAAC,iBAAiB,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;KAClD,CAAC;IAEF,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,OAAO,IACjB,eAAa,CACT,CACD,EACP;GACH;;;;;;;","names":[],"sources":["src/components/stzh-content/stzh-content.scss?tag=stzh-content&encapsulation=scoped","src/components/stzh-content/stzh-content.tsx"],"sourcesContent":[":host {\n --grid-template-areas: var(--stzh-content-grid-template-areas, \"content content content content\");\n\n @include mq($from: medium) {\n --grid-template-areas: var(--stzh-content-grid-template-areas, \"content content content content content content content content\");\n }\n\n @include mq($from: large) {\n --grid-template-areas: var(--stzh-content-grid-template-areas, \"aside-left aside-left content content content content content content content content aside-right aside-right\");\n }\n\n &[variant=\"shifted\"] {\n @include mq($from: large) {\n --grid-template-areas: var(--stzh-content-shifted-grid-template-areas, var(--stzh-content-grid-template-areas, \"aside-left aside-left content content content content content content content content content aside-right\"));\n }\n }\n\n &[variant=\"full\"] {\n @include mq($from: large) {\n --grid-template-areas: var(--stzh-content-full-grid-template-areas, var(--stzh-content-grid-template-areas, \"content content content content content content content content content content content content\"));\n }\n }\n\n ::slotted() {\n grid-area: content;\n }\n\n &:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) ::slotted() {\n /* CTA Layout /\n\n @include mq($from: small) {\n --stzh-cta-small-grid-template-areas: \"cta cta cta .\";\n }\n\n @include mq($from: medium) {\n --stzh-cta-grid-template-areas: \"cta cta cta cta cta . . .\";\n --stzh-cta-small-grid-template-areas: \"cta cta cta cta . . . .\";\n }\n\n / Text / Richtext Layout /\n\n @include mq($from: small) {\n --stzh-text-display: grid;\n --stzh-text-grid-template-areas: \"text text text .\";\n\n --stzh-richtext-display: grid;\n --stzh-richtext-grid-template-areas: \"text text text .\";\n }\n\n @include mq($from: medium) {\n --stzh-text-grid-template-areas: \"text text text text text text . .\";\n --stzh-richtext-grid-template-areas: \"text text text text text text . .\";\n }\n\n / Datalist Layout /\n\n @include mq($from: small) {\n --stzh-datalist-grid-template-areas: \"list list list .\";\n // breakout with details element inside datalist-item\n --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterSmall} - 2 #{$gridGutterSmall}) / 3 * 4) + 3 * #{$gridGutterSmall} + #{$gridGutterSmall});\n }\n\n @include mq($from: medium) {\n --stzh-datalist-grid-template-areas: \"list list list list list . . .\";\n --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterMedium} - 4 * #{$gridGutterMedium}) / 5 * 8) + 7 * #{$gridGutterMedium} + #{$gridGutterMedium});\n }\n\n @include mq($from: large) {\n --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterLarge} - 4 * #{$gridGutterLarge}) / 5 * 8) + 7 * #{$gridGutterLarge} + #{$gridGutterLarge});\n }\n\n @include mq($from: ultra) {\n --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterUltra} - 4 * #{$gridGutterUltra}) / 5 * 8) + 7 * #{$gridGutterUltra} + #{$gridGutterUltra});\n }\n\n /* Reset layout inside certain components /\n\n stzh-datalist,\n stzh-eventdata {\n / Text Layout /\n\n @include mq($from: small) {\n --stzh-text-display: block;\n --stzh-richtext-display: block;\n }\n }\n\n stzh-section[variant=\"highlight\"],\n stzh-section[variant=\"contextbox\"],\n stzh-ghettobox,\n stzh-message,\n stzh-toast,\n stzh-tooltip,\n stzh-popover,\n stzh-accordion,\n stzh-timeline,\n stzh-twocolumns,\n stzh-textandimage,\n stzh-datalist stzh-datalist,\n stzh-dialog,\n stzh-overlay {\n / CTA Layout /\n\n @include mq($from: small) {\n --stzh-cta-small-grid-template-areas: \"cta cta cta cta\";\n }\n\n @include mq($from: medium) {\n --stzh-cta-grid-template-areas: \"cta cta cta cta cta cta cta cta\";\n --stzh-cta-small-grid-template-areas: \"cta cta cta cta cta cta cta cta\";\n }\n\n / Text Layout /\n\n @include mq($from: small) {\n --stzh-text-display: block;\n --stzh-richtext-display: block;\n }\n\n / Datalist Layout /\n\n @include mq($from: small) {\n --stzh-datalist-grid-template-areas: \"list list list list\";\n // breakout with details element inside datalist-item\n --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterSmall} - 2 #{$gridGutterSmall}) / 4 * 4) + 3 * #{$gridGutterSmall} + #{$gridGutterSmall});\n }\n\n @include mq($from: medium) {\n --stzh-datalist-grid-template-areas: \"list list list list list list list list\";\n --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterMedium} - 4 * #{$gridGutterMedium}) / 8 * 8) + 7 * #{$gridGutterMedium} + #{$gridGutterMedium});\n }\n\n @include mq($from: large) {\n --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterLarge} - 4 * #{$gridGutterLarge}) / 8 * 8) + 7 * #{$gridGutterLarge} + #{$gridGutterLarge});\n }\n\n @include mq($from: ultra) {\n --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterUltra} - 4 * #{$gridGutterUltra}) / 8 * 8) + 7 * #{$gridGutterUltra} + #{$gridGutterUltra});\n }\n }\n }\n}\n\n.stzh-content {\n // set nested content elements to be fullwidth\n --stzh-content-grid-template-areas: \"content content content content content content content content content content content content\";\n --stzh-content-shifted-grid-template-areas: \"content content content content content content content content content content content content\";\n --stzh-content-full-grid-template-areas: \"content content content content content content content content content content content content\";\n\n @include grid;\n grid-template-areas: var(--grid-template-areas);\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n} from \"@stencil/core\";\n\n/*\n @slot - Slot for any content\n /\n@Component({\n tag: \"stzh-content\",\n styleUrl: \"stzh-content.scss\",\n scoped: true\n})\nexport class StzhContent {\n /* Variant /\n @Prop({ reflect: true }) variant: \"default\" \| \"shifted\" \| \"full\" = \"default\";\n\n /* Prevent changing layout of elements within this content element */\n @Prop({ reflect: true }) preventElementLayout = false;\n\n @Element() element: HTMLStzhContentElement;\n\n render() {\n const classes = {\n \"stzh-content\": true,\n [`stzh-content--${this.variant}`]: !!this.variant,\n };\n\n return (\n <Host>\n <div class={classes}>\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}