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

@oiz/stzh-components 4.6.0-beta3 → 4.6.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 (977) hide show

package/dist/components/{p-356399a0.js.map → p-70651df8.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-~~356399a0~~.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,8tCAA8tC,CAAC;AACxvC,4BAAe,gBAAgB;;MCSlB,aAAa;;;;;IAGxB,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,gBAAgB,EAAE,IAAI;SACvB,CAAC;QAEF,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAE,OAAO,IACjB,8DAAa,CACT,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/stzh-chipgroup/stzh-chipgroup.scss?tag=stzh-chipgroup&encapsulation=scoped","src/components/stzh-chipgroup/stzh-chipgroup.tsx"],"sourcesContent":[":host {\n}\n\n.stzh-chipgroup {\n display: flex;\n gap: space(\"medium\");\n}\n","import { Component, Host, h, Element } from \"@stencil/core\";\n\n/*\n @slot - Slot for chips\n */\n@Component({\n tag: \"stzh-chipgroup\",\n styleUrl: \"stzh-chipgroup.scss\",\n scoped: true,\n})\nexport class StzhChipgroup {\n @Element() element: HTMLStzhChipgroupElement;\n\n render() {\n const classes = {\n \"stzh-chipgroup\": true,\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":"p-70651df8.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,8tCAA8tC,CAAC;AACxvC,4BAAe,gBAAgB;;MCSlB,aAAa;;;;;IAGxB,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,gBAAgB,EAAE,IAAI;SACvB,CAAC;QAEF,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAE,OAAO,IACjB,8DAAa,CACT,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/stzh-chipgroup/stzh-chipgroup.scss?tag=stzh-chipgroup&encapsulation=scoped","src/components/stzh-chipgroup/stzh-chipgroup.tsx"],"sourcesContent":[":host {\n}\n\n.stzh-chipgroup {\n display: flex;\n gap: space(\"medium\");\n}\n","import { Component, Host, h, Element } from \"@stencil/core\";\n\n/*\n @slot - Slot for chips\n */\n@Component({\n tag: \"stzh-chipgroup\",\n styleUrl: \"stzh-chipgroup.scss\",\n scoped: true,\n})\nexport class StzhChipgroup {\n @Element() element: HTMLStzhChipgroupElement;\n\n render() {\n const classes = {\n \"stzh-chipgroup\": true,\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/components/{p-692cd6d0.js → p-78ad1fb5.js} RENAMED Viewed

@@ -54,7 +54,7 @@ const StzhPiTeaserLayoutItem = /*@__PURE__*/ proxyCustomElement(class StzhPiTeas
             "stzh-pi-teaser-layout-item--has-lead": hasLead,
             "stzh-pi-teaser-layout-item--has-image": hasImage,
         };
-        return (h(Host, { key: '22c18d7fd9de7d75ce2a33f1bf1c2b9ba155b07f', "has-lead": hasLead, "has-image": hasImage, "image-position": this.imagePosition, "content-size": this.contentSize }, h("article", { key: 'c77072a09b6eb79691f42ec00d8e822345791aff', class: classes, "aria-label": this.heading, role: "listitem" }, hasImage && (h("div", { key: '5a52e0b497bcbb76b4a11a998e895a096b631161', class: "stzh-pi-teaser-layout-item__image" }, h("img", { key: '621d1fd651d3420c80c56989962198bec015605c', src: this.imageSrc, alt: "Example image" }))), h("div", { key: '05c14742afec614a534d48a771539cdbd7d128d4', class: "stzh-pi-teaser-layout-item__wrapper" }, h("div", { key: 'a6ee0da58d7a855970b5b5619b432b075b893934', class: "stzh-pi-teaser-layout-item__text" }, this.dateline && h("p", { key: '181a0e14237977cd6902ec956260e0ea336f9108', class: "stzh-pi-teaser-layout-item__dateline" }, this.dateline), this.renderHeading(), h("div", { key: '406a47bc1425f5052bc7bb99309c9279bd05a262', class: "stzh-pi-teaser-layout-item__lead-wrapper" }, h("div", { key: '9d2397fd768f3b36985345b699c92fac2a80d87c', class: "stzh-pi-teaser-layout-item__lead" }, displayLead)), this.date && h("div", { key: '38ab554072180402070a63884889f965abbe446c', class: "stzh-pi-teaser-layout-item__date" }, this.date))))));
+        return (h(Host, { key: '2dc83251630395b8d2ed958a2ffcd4c350100e2e', "has-lead": hasLead, "has-image": hasImage, "image-position": this.imagePosition, "content-size": this.contentSize }, h("article", { key: '9b514ae760fecc304c7aa3f6eaa340ce145f0ac2', class: classes, "aria-label": this.heading, role: "listitem" }, hasImage && (h("div", { key: '2bdbfa7b37bebb337a2cf8e6f55e2d696c544d8a', class: "stzh-pi-teaser-layout-item__image" }, h("img", { key: '83a066126e8d78814dc2f15ef9eae26d046ed63d', src: this.imageSrc, alt: "Example image" }))), h("div", { key: '07355ddda4d392a35ddd920ee6d8e1fb94b73821', class: "stzh-pi-teaser-layout-item__wrapper" }, h("div", { key: '67367c71ce30352cd7a7f9b246919e22bdfe3348', class: "stzh-pi-teaser-layout-item__text" }, this.dateline && h("p", { key: 'd874802fc8fa80ebe4b7366c3098ebcb41df02ba', class: "stzh-pi-teaser-layout-item__dateline" }, this.dateline), this.renderHeading(), h("div", { key: 'fc550aea71eade845907b449b0dd1e41f51b6cde', class: "stzh-pi-teaser-layout-item__lead-wrapper" }, h("div", { key: '0f98ac67bb939836d2f9538b2c1daf6e972b326b', class: "stzh-pi-teaser-layout-item__lead" }, displayLead)), this.date && h("div", { key: 'cfc2dfabe393a2ce8e317829340a9b1f55cd9775', class: "stzh-pi-teaser-layout-item__date" }, this.date))))));
     }
     get element() { return this; }
     static get style() { return StzhPiTeaserLayoutItemStyle0; }
@@ -87,4 +87,4 @@ function defineCustomElement() {
 export { StzhPiTeaserLayoutItem as S, defineCustomElement as d };
-//# sourceMappingURL=p-692cd6d0.js.map
+//# sourceMappingURL=p-78ad1fb5.js.map

package/dist/components/{p-692cd6d0.js.map → p-78ad1fb5.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-692cd6d0.js","mappings":"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","names":[],"sources":["src/components/CMS/stzh-pi-teaser-layout-item/stzh-pi-teaser-layout-item.scss?tag=stzh-pi-teaser-layout-item&encapsulation=scoped","src/components/CMS/stzh-pi-teaser-layout-item/stzh-pi-teaser-layout-item.tsx"],"sourcesContent":["/*\n @prop --stzh-pi-teaser-layout-item-image-background-color: Background color if no image is present\n /\n\n:host {\n --image-background-color: var(\n --stzh-pi-teaser-layout-item-image-background-color,\n #{$colorCoolgrey10}\n );\n display: flex;\n inline-size: 100%;\n block-size: 100%;\n container-type: size;\n\n //Grid depending on image Position\n &[image-position=\"top\"] {\n --grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);\n\n @include mq($to: medium) {\n --grid-template-areas: var(\n --stzh-pi-teaser-layout-item-grid-template-areas,\n \"image image image image \" \"text text text text \"\n );\n }\n\n @include mq($from: medium) {\n --grid-template-areas: var(\n --stzh-pi-teaser-layout-item-grid-template-areas,\n \"image image image image image image image image\"\n \"text text text text text text text text\"\n );\n }\n\n @include mq($from: large) {\n --grid-template-areas: var(\n --stzh-pi-teaser-layout-item-grid-template-areas,\n \"image image image image image image image image image image image image\"\n \"text text text text text text text text text text text text\"\n );\n }\n }\n\n &[image-position=\"right\"] {\n --grid-template-no-rows: 1fr;\n\n @include mq($to: medium) {\n --grid-template-areas: var(\n --stzh-pi-teaser-layout-item-grid-template-areas,\n \"text text image image\"\n );\n }\n\n @include mq($from: medium) {\n --grid-template-areas: var(\n --stzh-pi-teaser-layout-item-grid-template-areas,\n \"text text text text text image image image\"\n );\n }\n\n @include mq($from: large) {\n --grid-template-areas: var(\n --stzh-pi-teaser-layout-item-grid-template-areas,\n \"text text text text text text image image image image image image\"\n );\n }\n }\n\n //Grid when no image\n &:not([has-image]) {\n --grid-template-no-rows: 1fr;\n\n @include mq($to: medium) {\n --grid-template-areas-no-image: \"text text text text\";\n }\n\n @include mq($from: medium) {\n --grid-template-areas-no-image: \"text text text text text text text text\";\n }\n\n @include mq($from: large) {\n --grid-template-areas-no-image: \"text text text text text text text text text text text text\";\n }\n }\n\n //grid when no lead\n &:not([has-lead]) {\n .stzh-pi-teaser-layout-item__lead {\n display: none;\n }\n }\n\n //Font sizes for all the teaser sizes\n &[content-size=\"XL\"] .stzh-pi-teaser-layout-item__title {\n @include fontSize(\"mega\");\n }\n\n &[content-size=\"L\"] .stzh-pi-teaser-layout-item__title {\n @include fontSize(\"hecto\");\n }\n\n &[content-size=\"M\"] .stzh-pi-teaser-layout-item__title {\n @include fontSize(\"deca\");\n }\n\n &[content-size=\"S\"] .stzh-pi-teaser-layout-item__title {\n @include fontSize(\"deci\");\n }\n\n &[content-size=\"XS\"] .stzh-pi-teaser-layout-item__title {\n @include fontSize(\"centi\");\n }\n\n &[content-size=\"S\"]:not([has-image]) .stzh-pi-teaser-layout-item__title {\n -webkit-line-clamp: 2;\n }\n\n @container (max-height: 235px) {\n &[image-position=\"top\"] .stzh-pi-teaser-layout-item {\n --grid-template-rows: 40cqh 60cqh;\n\n &__lead {\n --lead-lines: 1;\n }\n }\n\n &:not([has-image]) .stzh-pi-teaser-layout-item {\n &__lead {\n --lead-lines: 1;\n }\n }\n }\n\n @container (min-height: 236px) and (max-height:349px) {\n &[image-position=\"top\"] .stzh-pi-teaser-layout-item {\n --grid-template-rows: 47cqh 53cqh;\n\n &__lead {\n --lead-lines: 2;\n }\n }\n\n &:not([has-image]) .stzh-pi-teaser-layout-item {\n &__lead {\n --lead-lines: 2;\n }\n }\n }\n\n @container (min-height: 350px) and (max-height:549px) {\n &[image-position=\"top\"] .stzh-pi-teaser-layout-item {\n --grid-template-rows: 55cqh 45cqh;\n\n &__lead {\n --lead-lines: 3;\n }\n }\n\n &:not([has-image]) .stzh-pi-teaser-layout-item {\n &__lead {\n // --lead-lines: 4;\n }\n }\n }\n\n @container (min-height: 550px) and (max-height: 639px) {\n &[image-position=\"top\"] .stzh-pi-teaser-layout-item {\n --grid-template-rows: 50cqh 50cqh;\n\n &__lead {\n // --lead-lines: 4;\n }\n }\n\n &:not([has-image]) .stzh-pi-teaser-layout-item {\n &__lead {\n // --lead-lines: 4;\n }\n }\n }\n\n @container (min-height: 640px) and (max-height: 799px) {\n &[image-position=\"top\"] .stzh-pi-teaser-layout-item {\n --grid-template-rows: 55cqh 45cqh;\n\n &__lead {\n // --lead-lines: 4;\n }\n }\n\n &:not([has-image]) .stzh-pi-teaser-layout-item {\n &__lead {\n // --lead-lines: 4;\n }\n }\n }\n\n @container (min-height: 800px) {\n &[image-position=\"top\"] .stzh-pi-teaser-layout-item {\n --grid-template-rows: 40cqh 60cqh;\n\n &__lead {\n // --lead-lines: 6;\n }\n }\n\n &:not([has-image]) .stzh-pi-teaser-layout-item {\n &__lead {\n // --lead-lines: 6;\n }\n }\n }\n}\n\n.stzh-pi-teaser-layout-item {\n @include grid;\n display: grid;\n height: 100%;\n width: 100%;\n\n grid-template-rows: var(--grid-template-no-rows, var(--grid-template-rows));\n grid-template-areas: var(\n --grid-template-areas-no-image,\n var(--grid-template-areas)\n );\n background-color: var(--stzh-color-grey10);\n\n &__text {\n display: grid;\n grid-template-rows: auto auto minmax(0, 1fr) auto; // dateline, title, lead & date\n height: 100%;\n min-height: 0;\n align-content: start;\n }\n\n &__wrapper {\n grid-area: text;\n overflow: hidden;\n padding: space(\"medium\");\n height: 100%;\n min-height: 0;\n }\n\n &__image {\n overflow: hidden;\n grid-area: image;\n\n & > img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n }\n\n &__dateline {\n @include font(\"title\");\n @include fontSize(\"milli\");\n color: var(--stzh-color-coolgrey70);\n margin: 0;\n align-self: start;\n }\n\n &__title-wrapper {\n @include spaceCurve(\"padding-top\", \"small\");\n @include spaceCurve(\"padding-bottom\", \"tiny\");\n }\n\n &__title {\n @include font(\"title\");\n @include wordWrap;\n color: var(--stzh-color-black);\n margin: 0;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n / Limit the text to 3 lines /\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n / Adds \"...\" at the end if truncated /\n //line-height: 1.0 !important;\n align-self: start;\n }\n\n &__title-link {\n display: block;\n font-family: inherit;\n appearance: none;\n background-color: transparent;\n border: none;\n color: var(--stzh-color-black);\n text-decoration-line: none;\n transition: color $baseTransitionAnimationSpeed;\n border-radius: $buttonBorderRadius;\n cursor: pointer;\n\n // &::after {\n // content: \"\";\n // display: block;\n // position: absolute;\n // top: 0;\n // left: 0;\n // width: 100%;\n // height: 100%;\n // }\n\n // &::after {\n // z-index: 1;\n // }\n }\n\n &__lead-wrapper {\n @include spaceCurve(\"padding-bottom\", \"small\");\n }\n\n &__lead {\n @include mq($to: medium) {\n @include fontSize(\"milli\");\n }\n\n @include mq($from: medium) {\n @include fontSize(\"centi\");\n }\n\n margin-top: 0;\n\n color: var(--stzh-color-coolgrey70);\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: var(--lead-lines, 3);\n line-clamp: var(--lead-lines, 3);\n overflow: hidden;\n / don’t use text-overflow with multi-line clamp /\n align-self: start;\n }\n\n &__date {\n @include fontSize(\"micro\");\n color: var(--stzh-color-coolgrey70);\n margin: 0;\n align-self: end;\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Prop } from \"@stencil/core\";\n\nimport { StzhPiTeaserLayoutItemClickEvent } from \"../../../index\";\n\n/\n @slot heading - Heading text (alternative for heading property)\n * @slot lead - Lead text (alternative for lead property)\n * @slot image - Image (rendered within ratio 2:1, hence the different slot name to prevent naming collision)\n /\n@Component({\n tag: \"stzh-pi-teaser-layout-item\",\n styleUrl: \"stzh-pi-teaser-layout-item.scss\",\n scoped: true,\n})\nexport class StzhPiTeaserLayoutItem {\n /* Href of card /\n @Prop({ reflect: true }) href: string;\n\n /* target if the button is used as link (if href used) /\n @Prop() target: string;\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the link elements.\n * Default value will be taken from `heading` prop/slot.\n /\n @Prop() analyticsId: string;\n\n /* Dateline /\n @Prop() dateline: string = \"\";\n\n /* Heading (alternative for heading slot) /\n @Prop() heading: string = \"\";\n\n /* Image source link /\n @Prop() imageSrc: string \| null;\n\n /* Heading level /\n @Prop() headingLevel: \"1\" \| \"2\" \| \"3\" \| \"4\" = \"3\";\n\n /* Lead text (alternative for lead slot) /\n @Prop() lead: string = \"\";\n\n /* Date /\n @Prop() date: string = \"\";\n\n /Which size of teaser it is /\n @Prop() contentSize: \"XS\" \| \"S\" \| \"M\" \| \"L\" \| \"XL\" = \"M\";\n\n /*Whether image is on top or on the right/\n @Prop() imagePosition: \"top\" \| \"right\" \| null;\n\n @Element() element: HTMLStzhListElement;\n\n /** Click event (if href is used) */\n @Event() stzhClick: EventEmitter<StzhPiTeaserLayoutItemClickEvent>;\n\n private titleLinkElement: HTMLAnchorElement \| HTMLButtonElement;\n private headingTextElement: HTMLDivElement;\n\n private handleCardClick = (originalEvent: MouseEvent) => {\n this.stzhClick.emit({\n component: \"stzh-pi-teaser-layout-item\",\n originalEvent,\n href: this.href,\n });\n };\n\n componentDidRender() {\n requestAnimationFrame(() => {\n const objectId = this.analyticsId \|\| this.headingTextElement?.innerText;\n\n if (objectId) {\n this.titleLinkElement?.setAttribute(\"s-object-id\", objectId);\n }\n });\n }\n\n renderHeading(): DocumentFragment {\n const Heading = `h${this.headingLevel}`;\n const TitleLink = this.href ? \"a\" : \"button\";\n return (\n <div class=\"stzh-pi-teaser-layout-item__title-wrapper\">\n <Heading class=\"stzh-pi-teaser-layout-item__title\">\n <TitleLink\n ref={el => (this.titleLinkElement = el as HTMLAnchorElement \| HTMLButtonElement)}\n class=\"stzh-pi-teaser-layout-item__title-link\"\n href={this.href}\n target={this.target}\n onClick={this.handleCardClick}\n >\n <div ref={el => (this.headingTextElement = el as HTMLDivElement)}>{this.heading}</div>\n </TitleLink>\n </Heading>\n </div>\n );\n }\n\n render() {\n const hasLead = !!this.lead;\n console.log(\"imageSrc: \", this.imageSrc, \" & imagePosition: \", this.imagePosition);\n const hasImage = !!this.imageSrc && !!this.imagePosition;\n console.log(\"hasImage: \", hasImage);\n const displayLead = this.lead;\n // ? this.truncateLead(this.lead, this.contentSize == \"XL\" \|\| this.contentSize == \"L\" ? 260 : 160)\n // : \"\";\n\n const classes = {\n \"stzh-pi-teaser-layout-item\": true,\n \"stzh-pi-teaser-layout-item--has-lead\": hasLead,\n \"stzh-pi-teaser-layout-item--has-image\": hasImage,\n };\n\n return (\n <Host has-lead={hasLead} has-image={hasImage} image-position={this.imagePosition} content-size={this.contentSize}>\n <article class={classes} aria-label={this.heading} role=\"listitem\">\n {hasImage && (\n <div class=\"stzh-pi-teaser-layout-item__image\">\n <img src={this.imageSrc} alt=\"Example image\" />\n </div>\n )}\n\n <div class=\"stzh-pi-teaser-layout-item__wrapper\">\n <div class={\"stzh-pi-teaser-layout-item__text\"}>\n {this.dateline && <p class=\"stzh-pi-teaser-layout-item__dateline\">{this.dateline}</p>}\n {this.renderHeading()}\n <div class=\"stzh-pi-teaser-layout-item__lead-wrapper\">\n <div class=\"stzh-pi-teaser-layout-item__lead\">{displayLead}</div>\n </div>\n {this.date && <div class=\"stzh-pi-teaser-layout-item__date\">{this.date}</div>}\n </div>\n </div>\n </article>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-78ad1fb5.js","mappings":"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","names":[],"sources":["src/components/CMS/stzh-pi-teaser-layout-item/stzh-pi-teaser-layout-item.scss?tag=stzh-pi-teaser-layout-item&encapsulation=scoped","src/components/CMS/stzh-pi-teaser-layout-item/stzh-pi-teaser-layout-item.tsx"],"sourcesContent":["/*\n @prop --stzh-pi-teaser-layout-item-image-background-color: Background color if no image is present\n /\n\n:host {\n --image-background-color: var(\n --stzh-pi-teaser-layout-item-image-background-color,\n #{$colorCoolgrey10}\n );\n display: flex;\n inline-size: 100%;\n block-size: 100%;\n container-type: size;\n\n //Grid depending on image Position\n &[image-position=\"top\"] {\n --grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);\n\n @include mq($to: medium) {\n --grid-template-areas: var(\n --stzh-pi-teaser-layout-item-grid-template-areas,\n \"image image image image \" \"text text text text \"\n );\n }\n\n @include mq($from: medium) {\n --grid-template-areas: var(\n --stzh-pi-teaser-layout-item-grid-template-areas,\n \"image image image image image image image image\"\n \"text text text text text text text text\"\n );\n }\n\n @include mq($from: large) {\n --grid-template-areas: var(\n --stzh-pi-teaser-layout-item-grid-template-areas,\n \"image image image image image image image image image image image image\"\n \"text text text text text text text text text text text text\"\n );\n }\n }\n\n &[image-position=\"right\"] {\n --grid-template-no-rows: 1fr;\n\n @include mq($to: medium) {\n --grid-template-areas: var(\n --stzh-pi-teaser-layout-item-grid-template-areas,\n \"text text image image\"\n );\n }\n\n @include mq($from: medium) {\n --grid-template-areas: var(\n --stzh-pi-teaser-layout-item-grid-template-areas,\n \"text text text text text image image image\"\n );\n }\n\n @include mq($from: large) {\n --grid-template-areas: var(\n --stzh-pi-teaser-layout-item-grid-template-areas,\n \"text text text text text text image image image image image image\"\n );\n }\n }\n\n //Grid when no image\n &:not([has-image]) {\n --grid-template-no-rows: 1fr;\n\n @include mq($to: medium) {\n --grid-template-areas-no-image: \"text text text text\";\n }\n\n @include mq($from: medium) {\n --grid-template-areas-no-image: \"text text text text text text text text\";\n }\n\n @include mq($from: large) {\n --grid-template-areas-no-image: \"text text text text text text text text text text text text\";\n }\n }\n\n //grid when no lead\n &:not([has-lead]) {\n .stzh-pi-teaser-layout-item__lead {\n display: none;\n }\n }\n\n //Font sizes for all the teaser sizes\n &[content-size=\"XL\"] .stzh-pi-teaser-layout-item__title {\n @include fontSize(\"mega\");\n }\n\n &[content-size=\"L\"] .stzh-pi-teaser-layout-item__title {\n @include fontSize(\"hecto\");\n }\n\n &[content-size=\"M\"] .stzh-pi-teaser-layout-item__title {\n @include fontSize(\"deca\");\n }\n\n &[content-size=\"S\"] .stzh-pi-teaser-layout-item__title {\n @include fontSize(\"deci\");\n }\n\n &[content-size=\"XS\"] .stzh-pi-teaser-layout-item__title {\n @include fontSize(\"centi\");\n }\n\n &[content-size=\"S\"]:not([has-image]) .stzh-pi-teaser-layout-item__title {\n -webkit-line-clamp: 2;\n }\n\n @container (max-height: 235px) {\n &[image-position=\"top\"] .stzh-pi-teaser-layout-item {\n --grid-template-rows: 40cqh 60cqh;\n\n &__lead {\n --lead-lines: 1;\n }\n }\n\n &:not([has-image]) .stzh-pi-teaser-layout-item {\n &__lead {\n --lead-lines: 1;\n }\n }\n }\n\n @container (min-height: 236px) and (max-height:349px) {\n &[image-position=\"top\"] .stzh-pi-teaser-layout-item {\n --grid-template-rows: 47cqh 53cqh;\n\n &__lead {\n --lead-lines: 2;\n }\n }\n\n &:not([has-image]) .stzh-pi-teaser-layout-item {\n &__lead {\n --lead-lines: 2;\n }\n }\n }\n\n @container (min-height: 350px) and (max-height:549px) {\n &[image-position=\"top\"] .stzh-pi-teaser-layout-item {\n --grid-template-rows: 55cqh 45cqh;\n\n &__lead {\n --lead-lines: 3;\n }\n }\n\n &:not([has-image]) .stzh-pi-teaser-layout-item {\n &__lead {\n // --lead-lines: 4;\n }\n }\n }\n\n @container (min-height: 550px) and (max-height: 639px) {\n &[image-position=\"top\"] .stzh-pi-teaser-layout-item {\n --grid-template-rows: 50cqh 50cqh;\n\n &__lead {\n // --lead-lines: 4;\n }\n }\n\n &:not([has-image]) .stzh-pi-teaser-layout-item {\n &__lead {\n // --lead-lines: 4;\n }\n }\n }\n\n @container (min-height: 640px) and (max-height: 799px) {\n &[image-position=\"top\"] .stzh-pi-teaser-layout-item {\n --grid-template-rows: 55cqh 45cqh;\n\n &__lead {\n // --lead-lines: 4;\n }\n }\n\n &:not([has-image]) .stzh-pi-teaser-layout-item {\n &__lead {\n // --lead-lines: 4;\n }\n }\n }\n\n @container (min-height: 800px) {\n &[image-position=\"top\"] .stzh-pi-teaser-layout-item {\n --grid-template-rows: 40cqh 60cqh;\n\n &__lead {\n // --lead-lines: 6;\n }\n }\n\n &:not([has-image]) .stzh-pi-teaser-layout-item {\n &__lead {\n // --lead-lines: 6;\n }\n }\n }\n}\n\n.stzh-pi-teaser-layout-item {\n @include grid;\n display: grid;\n height: 100%;\n width: 100%;\n\n grid-template-rows: var(--grid-template-no-rows, var(--grid-template-rows));\n grid-template-areas: var(\n --grid-template-areas-no-image,\n var(--grid-template-areas)\n );\n background-color: var(--stzh-color-grey10);\n\n &__text {\n display: grid;\n grid-template-rows: auto auto minmax(0, 1fr) auto; // dateline, title, lead & date\n height: 100%;\n min-height: 0;\n align-content: start;\n }\n\n &__wrapper {\n grid-area: text;\n overflow: hidden;\n padding: space(\"medium\");\n height: 100%;\n min-height: 0;\n }\n\n &__image {\n overflow: hidden;\n grid-area: image;\n\n & > img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n }\n\n &__dateline {\n @include font(\"title\");\n @include fontSize(\"milli\");\n color: var(--stzh-color-coolgrey70);\n margin: 0;\n align-self: start;\n }\n\n &__title-wrapper {\n @include spaceCurve(\"padding-top\", \"small\");\n @include spaceCurve(\"padding-bottom\", \"tiny\");\n }\n\n &__title {\n @include font(\"title\");\n @include wordWrap;\n color: var(--stzh-color-black);\n margin: 0;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n / Limit the text to 3 lines /\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n / Adds \"...\" at the end if truncated /\n //line-height: 1.0 !important;\n align-self: start;\n }\n\n &__title-link {\n display: block;\n font-family: inherit;\n appearance: none;\n background-color: transparent;\n border: none;\n color: var(--stzh-color-black);\n text-decoration-line: none;\n transition: color $baseTransitionAnimationSpeed;\n border-radius: $buttonBorderRadius;\n cursor: pointer;\n\n // &::after {\n // content: \"\";\n // display: block;\n // position: absolute;\n // top: 0;\n // left: 0;\n // width: 100%;\n // height: 100%;\n // }\n\n // &::after {\n // z-index: 1;\n // }\n }\n\n &__lead-wrapper {\n @include spaceCurve(\"padding-bottom\", \"small\");\n }\n\n &__lead {\n @include mq($to: medium) {\n @include fontSize(\"milli\");\n }\n\n @include mq($from: medium) {\n @include fontSize(\"centi\");\n }\n\n margin-top: 0;\n\n color: var(--stzh-color-coolgrey70);\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: var(--lead-lines, 3);\n line-clamp: var(--lead-lines, 3);\n overflow: hidden;\n / don’t use text-overflow with multi-line clamp /\n align-self: start;\n }\n\n &__date {\n @include fontSize(\"micro\");\n color: var(--stzh-color-coolgrey70);\n margin: 0;\n align-self: end;\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Prop } from \"@stencil/core\";\n\nimport { StzhPiTeaserLayoutItemClickEvent } from \"../../../index\";\n\n/\n @slot heading - Heading text (alternative for heading property)\n * @slot lead - Lead text (alternative for lead property)\n * @slot image - Image (rendered within ratio 2:1, hence the different slot name to prevent naming collision)\n /\n@Component({\n tag: \"stzh-pi-teaser-layout-item\",\n styleUrl: \"stzh-pi-teaser-layout-item.scss\",\n scoped: true,\n})\nexport class StzhPiTeaserLayoutItem {\n /* Href of card /\n @Prop({ reflect: true }) href: string;\n\n /* target if the button is used as link (if href used) /\n @Prop() target: string;\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the link elements.\n * Default value will be taken from `heading` prop/slot.\n /\n @Prop() analyticsId: string;\n\n /* Dateline /\n @Prop() dateline: string = \"\";\n\n /* Heading (alternative for heading slot) /\n @Prop() heading: string = \"\";\n\n /* Image source link /\n @Prop() imageSrc: string \| null;\n\n /* Heading level /\n @Prop() headingLevel: \"1\" \| \"2\" \| \"3\" \| \"4\" = \"3\";\n\n /* Lead text (alternative for lead slot) /\n @Prop() lead: string = \"\";\n\n /* Date /\n @Prop() date: string = \"\";\n\n /Which size of teaser it is /\n @Prop() contentSize: \"XS\" \| \"S\" \| \"M\" \| \"L\" \| \"XL\" = \"M\";\n\n /*Whether image is on top or on the right/\n @Prop() imagePosition: \"top\" \| \"right\" \| null;\n\n @Element() element: HTMLStzhListElement;\n\n /** Click event (if href is used) */\n @Event() stzhClick: EventEmitter<StzhPiTeaserLayoutItemClickEvent>;\n\n private titleLinkElement: HTMLAnchorElement \| HTMLButtonElement;\n private headingTextElement: HTMLDivElement;\n\n private handleCardClick = (originalEvent: MouseEvent) => {\n this.stzhClick.emit({\n component: \"stzh-pi-teaser-layout-item\",\n originalEvent,\n href: this.href,\n });\n };\n\n componentDidRender() {\n requestAnimationFrame(() => {\n const objectId = this.analyticsId \|\| this.headingTextElement?.innerText;\n\n if (objectId) {\n this.titleLinkElement?.setAttribute(\"s-object-id\", objectId);\n }\n });\n }\n\n renderHeading(): DocumentFragment {\n const Heading = `h${this.headingLevel}`;\n const TitleLink = this.href ? \"a\" : \"button\";\n return (\n <div class=\"stzh-pi-teaser-layout-item__title-wrapper\">\n <Heading class=\"stzh-pi-teaser-layout-item__title\">\n <TitleLink\n ref={el => (this.titleLinkElement = el as HTMLAnchorElement \| HTMLButtonElement)}\n class=\"stzh-pi-teaser-layout-item__title-link\"\n href={this.href}\n target={this.target}\n onClick={this.handleCardClick}\n >\n <div ref={el => (this.headingTextElement = el as HTMLDivElement)}>{this.heading}</div>\n </TitleLink>\n </Heading>\n </div>\n );\n }\n\n render() {\n const hasLead = !!this.lead;\n console.log(\"imageSrc: \", this.imageSrc, \" & imagePosition: \", this.imagePosition);\n const hasImage = !!this.imageSrc && !!this.imagePosition;\n console.log(\"hasImage: \", hasImage);\n const displayLead = this.lead;\n // ? this.truncateLead(this.lead, this.contentSize == \"XL\" \|\| this.contentSize == \"L\" ? 260 : 160)\n // : \"\";\n\n const classes = {\n \"stzh-pi-teaser-layout-item\": true,\n \"stzh-pi-teaser-layout-item--has-lead\": hasLead,\n \"stzh-pi-teaser-layout-item--has-image\": hasImage,\n };\n\n return (\n <Host has-lead={hasLead} has-image={hasImage} image-position={this.imagePosition} content-size={this.contentSize}>\n <article class={classes} aria-label={this.heading} role=\"listitem\">\n {hasImage && (\n <div class=\"stzh-pi-teaser-layout-item__image\">\n <img src={this.imageSrc} alt=\"Example image\" />\n </div>\n )}\n\n <div class=\"stzh-pi-teaser-layout-item__wrapper\">\n <div class={\"stzh-pi-teaser-layout-item__text\"}>\n {this.dateline && <p class=\"stzh-pi-teaser-layout-item__dateline\">{this.dateline}</p>}\n {this.renderHeading()}\n <div class=\"stzh-pi-teaser-layout-item__lead-wrapper\">\n <div class=\"stzh-pi-teaser-layout-item__lead\">{displayLead}</div>\n </div>\n {this.date && <div class=\"stzh-pi-teaser-layout-item__date\">{this.date}</div>}\n </div>\n </div>\n </article>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/{p-06fdd62d.js → p-79436c88.js} RENAMED Viewed

@@ -1,8 +1,8 @@
 import { p as proxyCustomElement, H, h, d as Host } from './p-8f01554b.js';
-import { S as StzhSocialmediastreamItemActionVariant } from './p-f5779736.js';
-import { d as defineCustomElement$3 } from './p-a2659715.js';
-import { d as defineCustomElement$2 } from './p-ae5316c9.js';
-import { d as defineCustomElement$1 } from './p-8faab692.js';
+import { S as StzhSocialmediastreamItemActionVariant } from './p-37c9ec06.js';
+import { d as defineCustomElement$3 } from './p-60d4ef07.js';
+import { d as defineCustomElement$2 } from './p-955f381a.js';
+import { d as defineCustomElement$1 } from './p-519479b8.js';
 const stzhSocialmediastreamItemCss = ":host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block;}:host[hidden],:host[stzh-hidden]{display:none}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}.stzh-socialmediastream-item{display:block;background-color:var(--stzh-color-grey10);text-decoration:none;color:var(--stzh-color-grey80);}.stzh-socialmediastream-item:visited{color:var(--stzh-color-grey80)}.stzh-socialmediastream-item:hover{background-color:var(--stzh-color-secondary10);color:var(--stzh-color-black)}.stzh-socialmediastream-item__image{position:relative}.stzh-socialmediastream-item__ratio{--background-color:var(--image-background-color)}.stzh-socialmediastream-item__image-inner-wrapper{background-color:var(--image-background-color);position:absolute;inset:0;height:100%}.stzh-socialmediastream-item__image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.stzh-socialmediastream-item__content{padding:var(--stzh-space-xsmall) var(--stzh-space-medium) var(--stzh-space-small);display:flex;flex-direction:column;gap:var(--stzh-space-small)}.stzh-socialmediastream-item__content-head{display:flex;align-items:center}.stzh-socialmediastream-item__content-head stzh-icon{--color:var(--stzh-color-primary)}.stzh-socialmediastream-item__content-title{width:100%;--color:var(--stzh-color-grey80)}.stzh-socialmediastream-item:hover .stzh-socialmediastream-item__content-title{--color:var(--stzh-color-black)}.stzh-socialmediastream-item__content-body{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);--color:var(--stzh-color-grey80)}.stzh-socialmediastream-item__content-body a{word-wrap:break-word;color:var(--stzh-link-color)}.stzh-socialmediastream-item__content-body a:hover{color:var(--stzh-link-hover-color)}.stzh-socialmediastream-item__content-body a+a{margin-left:var(--stzh-space-xxsmall)}.stzh-socialmediastream-item__content-footer{display:flex;align-items:center;gap:var(--stzh-space-small)}.stzh-socialmediastream-item__action{text-decoration:none;font-size:var(--stzh-font-pico-font-size);line-height:var(--stzh-font-pico-text-line-height);color:var(--stzh-link-color);display:flex;align-items:center;gap:var(--stzh-space-xxsmall);line-height:1}.stzh-socialmediastream-item__action:hover{color:var(--stzh-link-hover-color)}.stzh-socialmediastream-item__action stzh-icon{--size:1rem}";
 const StzhSocialmediastreamItemStyle0 = stzhSocialmediastreamItemCss;
@@ -81,7 +81,7 @@ const StzhSocialmediastreamItem = /*@__PURE__*/ proxyCustomElement(class StzhSoc
         const classes = {
             "stzh-socialmediastream-item": true,
         };
-        return (h(Host, { key: '451ffb4531182b23e3fdc6c0c784431b913907b5' }, h("a", { key: 'd44e214ac6a78e5f692ce6ad08638c8b5acd7c9d', class: classes, href: this._item.link, target: "_blank" }, this._item.image && (h("div", { key: '6155711535ac95e0191089033e4049ff13019bf0', class: "stzh-socialmediastream-item__image" }, h("stzh-ratio", { key: '500fc5fb9824e7f304e0f54eda0b82a81fbf4ed9', ratio: "1:1" }), h("div", { key: '0aa89a95f31dad77eee8fb87a6a6b64749f0a1cd', class: "stzh-socialmediastream-item__image-inner-wrapper" }, h("img", { key: 'c358e286c315bb7eb083acfc67a983b4fdbf1f9e', src: this._item.image, alt: this._item.account.title })))), h("div", { key: 'a71b06f04bf6e6df8f41a15438a16195473b3228', class: "stzh-socialmediastream-item__content" }, h("div", { key: 'bc4e20c47f08d1fe010d43882d268dff1adb3643', class: "stzh-socialmediastream-item__content-head" }, h("stzh-text", { key: 'fc2f2d52cb3dc36ae35b028c624c418564a09aae', size: "nano", class: "stzh-socialmediastream-item__content-title" }, h("strong", { key: '30066db3b5ca863902140a7829e0b6bb1d4b1b14' }, this._item.account.title), h("br", { key: 'cd515f69421007de450ed88dffe7c4ba92ca5889' }), this.dateAdapter.format(this.getParsedDate(this._item.date), "dateInput")), h("stzh-icon", { key: '50e23b1d0d1073e37e7b1c71fe073a5951516820', name: this.getIconName(this._item) })), h("div", { key: '0ff6ecf0e3fe75cc0f0b6d549b51480029d84784', class: "stzh-socialmediastream-item__content-body", innerHTML: this._item.text }), h("div", { key: 'c862b9ebf610d71241ca80439df051bcd917da54', class: "stzh-socialmediastream-item__content-footer 1q23" }, this._item.actions &&
+        return (h(Host, { key: '4191b7b6f80d898467cd6009efc0ab2e7431e4bf' }, h("a", { key: 'd0091542217bea89e608c1cd8833a82159835bd1', class: classes, href: this._item.link, target: "_blank" }, this._item.image && (h("div", { key: '65a86276d0dceb9c16d4d2f04836324d5cf9a64d', class: "stzh-socialmediastream-item__image" }, h("stzh-ratio", { key: '21bf793e2facc74065ac0056d59b2b9679b81ebe', ratio: "1:1" }), h("div", { key: '0f4d48d32746379f65797f2758f7abdc3208b2c0', class: "stzh-socialmediastream-item__image-inner-wrapper" }, h("img", { key: '733575e43e1aecd544a6bc6a46c4a82248198e14', src: this._item.image, alt: this._item.account.title })))), h("div", { key: '04a2debb823334b50ae839f486a9369c892f13fc', class: "stzh-socialmediastream-item__content" }, h("div", { key: '46a14325a016da16428b7846ebcf770981b8442d', class: "stzh-socialmediastream-item__content-head" }, h("stzh-text", { key: '155ede50397ed81ba7befdc4849cc42adc6c5575', size: "nano", class: "stzh-socialmediastream-item__content-title" }, h("strong", { key: '99813c5959ba960ecd02a6c2f28e884e9dca045b' }, this._item.account.title), h("br", { key: '8d63a3211fa010b01933b737faeb3d3c9d004c4e' }), this.dateAdapter.format(this.getParsedDate(this._item.date), "dateInput")), h("stzh-icon", { key: 'c154798673d9903c938ec72a443cbc9802089bf3', name: this.getIconName(this._item) })), h("div", { key: '6e55256271478cbb521132b946917a4884dc84bb', class: "stzh-socialmediastream-item__content-body", innerHTML: this._item.text }), h("div", { key: 'c2cf16d653f7b399af5254e301d4506566737a47', class: "stzh-socialmediastream-item__content-footer 1q23" }, this._item.actions &&
             this._item.actions.map(action => (h("a", { href: action.url, title: action.title, class: "stzh-socialmediastream-item__action", target: "_blank" }, h("stzh-icon", { name: this.getActionIconName(action.variant) }), action.count))))))));
     }
     get element() { return this; }
@@ -127,4 +127,4 @@ function defineCustomElement() {
 export { StzhSocialmediastreamItem as S, defineCustomElement as d };
-//# sourceMappingURL=p-06fdd62d.js.map
+//# sourceMappingURL=p-79436c88.js.map

package/dist/components/{p-06fdd62d.js.map → p-79436c88.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-~~06fdd62d~~.js","mappings":"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","names":[],"sources":["src/components/CMS/stzh-socialmediastream-item/stzh-socialmediastream-item.scss?tag=stzh-socialmediastream-item","src/components/CMS/stzh-socialmediastream-item/stzh-socialmediastream-item.tsx"],"sourcesContent":[":host {\n}\n\n.stzh-socialmediastream-item {\n display: block;\n background-color: var(--stzh-color-grey10);\n text-decoration: none;\n color: var(--stzh-color-grey80);\n\n &:visited {\n color: var(--stzh-color-grey80);\n }\n\n &:hover {\n background-color: var(--stzh-color-secondary10);\n color: var(--stzh-color-black);\n }\n\n &__image {\n position: relative;\n }\n\n &__ratio {\n --background-color: var(--image-background-color);\n }\n\n &__image-inner-wrapper {\n background-color: var(--image-background-color);\n position: absolute;\n inset: 0;\n height: 100%;\n }\n\n &__image img {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n\n /* Content /\n\n &__content {\n padding: var(--stzh-space-xsmall) var(--stzh-space-medium)\n var(--stzh-space-small);\n display: flex;\n flex-direction: column;\n gap: var(--stzh-space-small);\n }\n\n / Content head /\n\n &__content-head {\n display: flex;\n align-items: center;\n }\n\n &__content-head stzh-icon {\n --color: var(--stzh-color-primary);\n }\n\n &__content-title {\n width: 100%;\n --color: var(--stzh-color-grey80);\n }\n\n &:hover &__content-title {\n --color: var(--stzh-color-black);\n }\n\n / Content Body /\n\n &__content-body {\n @include font(medium);\n @include fontSize(micro);\n --color: var(--stzh-color-grey80);\n }\n\n &__content-body a {\n word-wrap: break-word;\n color: var(--stzh-link-color);\n\n &:hover {\n color: var(--stzh-link-hover-color);\n }\n }\n\n &__content-body a + a {\n margin-left: space(xxsmall);\n }\n\n / Content Footer and Actions /\n\n &__content-footer {\n display: flex;\n align-items: center;\n gap: var(--stzh-space-small);\n }\n\n &__action {\n text-decoration: none;\n @include fontSize(pico);\n color: var(--stzh-link-color);\n display: flex;\n align-items: center;\n gap: var(--stzh-space-xxsmall);\n line-height: 1;\n\n &:hover {\n color: var(--stzh-link-hover-color);\n }\n }\n\n &__action stzh-icon {\n --size: 16px;\n }\n}\n","import { Component, Element, h, Host, Prop, Watch } from \"@stencil/core\";\nimport {\n StzhLocaleAdapter,\n StzhLocaleComponent,\n StzhSocialmediastreamItemActionVariant,\n StzhSocialmediastreamItemData,\n} from \"../../../index\";\n\n@Component({\n tag: \"stzh-socialmediastream-item\",\n styleUrl: \"stzh-socialmediastream-item.scss\",\n})\nexport class StzhSocialmediastreamItem {\n @Element() element: HTMLStzhSocialmediastreamItemElement;\n\n /* Socialmediastream item /\n @Prop() item: StzhSocialmediastreamItemData \| string = \"\";\n private _item: StzhSocialmediastreamItemData \| undefined;\n\n /* Translation strings /\n @Prop() localization: StzhLocaleComponent;\n\n /\n Date adapter, for custom parsing/formatting.\n * Must be object with a `parse` function which accepts a `string` and returns a `Date`,\n * and a `format` function which accepts a `Date` and returns a `string`.\n */\n @Prop() dateAdapter: StzhLocaleAdapter;\n\n @Watch(\"item\")\n itemWatcher(newValue: StzhSocialmediastreamItemData \| string) {\n if (!newValue) {\n this._item = undefined;\n } else if (typeof newValue === \"string\") {\n try {\n this._item = JSON.parse(newValue);\n } catch (e) {\n this._item = undefined;\n }\n } else {\n this._item = newValue;\n }\n }\n\n private init = () => {\n this.itemWatcher(this.item);\n };\n\n private getIconName(item: StzhSocialmediastreamItemData) {\n switch (item.channel) {\n case \"facebook\":\n return \"facebook\";\n case \"twitter\":\n case \"x\":\n return \"twitter\";\n case \"instagram\":\n return \"instagram\";\n case \"youtube\":\n return \"youtube\";\n default:\n return \"warning\";\n }\n }\n\n private getActionIconName(variant: StzhSocialmediastreamItemActionVariant) {\n switch (variant) {\n case StzhSocialmediastreamItemActionVariant.comments:\n return \"facebook-comment\";\n case StzhSocialmediastreamItemActionVariant.likes:\n return \"like-hand\";\n case StzhSocialmediastreamItemActionVariant.shares:\n return \"share\";\n }\n }\n\n private getParsedDate(dateStr: string): Date \| null {\n const parsedDate = new Date(dateStr);\n if (isNaN(parsedDate.getTime())) {\n return null;\n }\n return parsedDate;\n }\n\n connectedCallback() {\n this.init();\n }\n\n async componentWillLoad() {\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"socialmediastream-item\");\n }\n if (!this.dateAdapter) {\n this.dateAdapter = window.stzhComponents.utils.createFormatParseAdapter(\n this.localization.$formats,\n this.localization.$globals,\n );\n }\n }\n\n render() {\n const classes = {\n \"stzh-socialmediastream-item\": true,\n };\n\n return (\n <Host>\n <a class={classes} href={this._item.link} target=\"_blank\">\n {this._item.image && (\n <div class=\"stzh-socialmediastream-item__image\">\n <stzh-ratio ratio=\"1:1\"></stzh-ratio>\n <div class=\"stzh-socialmediastream-item__image-inner-wrapper\">\n <img src={this._item.image} alt={this._item.account.title} />\n </div>\n </div>\n )}\n <div class=\"stzh-socialmediastream-item__content\">\n <div class=\"stzh-socialmediastream-item__content-head\">\n <stzh-text size=\"nano\" class=\"stzh-socialmediastream-item__content-title\">\n <strong>{this._item.account.title}</strong>\n <br />\n {this.dateAdapter.format(this.getParsedDate(this._item.date), \"dateInput\")}\n </stzh-text>\n <stzh-icon name={this.getIconName(this._item)}></stzh-icon>\n </div>\n <div class=\"stzh-socialmediastream-item__content-body\" innerHTML={this._item.text}></div>\n <div class=\"stzh-socialmediastream-item__content-footer 1q23\">\n {this._item.actions &&\n this._item.actions.map(action => (\n <a href={action.url} title={action.title} class=\"stzh-socialmediastream-item__action\" target=\"_blank\">\n <stzh-icon name={this.getActionIconName(action.variant)}></stzh-icon>\n {action.count}\n </a>\n ))}\n </div>\n </div>\n </a>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-79436c88.js","mappings":"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","names":[],"sources":["src/components/CMS/stzh-socialmediastream-item/stzh-socialmediastream-item.scss?tag=stzh-socialmediastream-item","src/components/CMS/stzh-socialmediastream-item/stzh-socialmediastream-item.tsx"],"sourcesContent":[":host {\n}\n\n.stzh-socialmediastream-item {\n display: block;\n background-color: var(--stzh-color-grey10);\n text-decoration: none;\n color: var(--stzh-color-grey80);\n\n &:visited {\n color: var(--stzh-color-grey80);\n }\n\n &:hover {\n background-color: var(--stzh-color-secondary10);\n color: var(--stzh-color-black);\n }\n\n &__image {\n position: relative;\n }\n\n &__ratio {\n --background-color: var(--image-background-color);\n }\n\n &__image-inner-wrapper {\n background-color: var(--image-background-color);\n position: absolute;\n inset: 0;\n height: 100%;\n }\n\n &__image img {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n\n /* Content /\n\n &__content {\n padding: var(--stzh-space-xsmall) var(--stzh-space-medium)\n var(--stzh-space-small);\n display: flex;\n flex-direction: column;\n gap: var(--stzh-space-small);\n }\n\n / Content head /\n\n &__content-head {\n display: flex;\n align-items: center;\n }\n\n &__content-head stzh-icon {\n --color: var(--stzh-color-primary);\n }\n\n &__content-title {\n width: 100%;\n --color: var(--stzh-color-grey80);\n }\n\n &:hover &__content-title {\n --color: var(--stzh-color-black);\n }\n\n / Content Body /\n\n &__content-body {\n @include font(medium);\n @include fontSize(micro);\n --color: var(--stzh-color-grey80);\n }\n\n &__content-body a {\n word-wrap: break-word;\n color: var(--stzh-link-color);\n\n &:hover {\n color: var(--stzh-link-hover-color);\n }\n }\n\n &__content-body a + a {\n margin-left: space(xxsmall);\n }\n\n / Content Footer and Actions /\n\n &__content-footer {\n display: flex;\n align-items: center;\n gap: var(--stzh-space-small);\n }\n\n &__action {\n text-decoration: none;\n @include fontSize(pico);\n color: var(--stzh-link-color);\n display: flex;\n align-items: center;\n gap: var(--stzh-space-xxsmall);\n line-height: 1;\n\n &:hover {\n color: var(--stzh-link-hover-color);\n }\n }\n\n &__action stzh-icon {\n --size: 16px;\n }\n}\n","import { Component, Element, h, Host, Prop, Watch } from \"@stencil/core\";\nimport {\n StzhLocaleAdapter,\n StzhLocaleComponent,\n StzhSocialmediastreamItemActionVariant,\n StzhSocialmediastreamItemData,\n} from \"../../../index\";\n\n@Component({\n tag: \"stzh-socialmediastream-item\",\n styleUrl: \"stzh-socialmediastream-item.scss\",\n})\nexport class StzhSocialmediastreamItem {\n @Element() element: HTMLStzhSocialmediastreamItemElement;\n\n /* Socialmediastream item /\n @Prop() item: StzhSocialmediastreamItemData \| string = \"\";\n private _item: StzhSocialmediastreamItemData \| undefined;\n\n /* Translation strings /\n @Prop() localization: StzhLocaleComponent;\n\n /\n Date adapter, for custom parsing/formatting.\n * Must be object with a `parse` function which accepts a `string` and returns a `Date`,\n * and a `format` function which accepts a `Date` and returns a `string`.\n */\n @Prop() dateAdapter: StzhLocaleAdapter;\n\n @Watch(\"item\")\n itemWatcher(newValue: StzhSocialmediastreamItemData \| string) {\n if (!newValue) {\n this._item = undefined;\n } else if (typeof newValue === \"string\") {\n try {\n this._item = JSON.parse(newValue);\n } catch (e) {\n this._item = undefined;\n }\n } else {\n this._item = newValue;\n }\n }\n\n private init = () => {\n this.itemWatcher(this.item);\n };\n\n private getIconName(item: StzhSocialmediastreamItemData) {\n switch (item.channel) {\n case \"facebook\":\n return \"facebook\";\n case \"twitter\":\n case \"x\":\n return \"twitter\";\n case \"instagram\":\n return \"instagram\";\n case \"youtube\":\n return \"youtube\";\n default:\n return \"warning\";\n }\n }\n\n private getActionIconName(variant: StzhSocialmediastreamItemActionVariant) {\n switch (variant) {\n case StzhSocialmediastreamItemActionVariant.comments:\n return \"facebook-comment\";\n case StzhSocialmediastreamItemActionVariant.likes:\n return \"like-hand\";\n case StzhSocialmediastreamItemActionVariant.shares:\n return \"share\";\n }\n }\n\n private getParsedDate(dateStr: string): Date \| null {\n const parsedDate = new Date(dateStr);\n if (isNaN(parsedDate.getTime())) {\n return null;\n }\n return parsedDate;\n }\n\n connectedCallback() {\n this.init();\n }\n\n async componentWillLoad() {\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"socialmediastream-item\");\n }\n if (!this.dateAdapter) {\n this.dateAdapter = window.stzhComponents.utils.createFormatParseAdapter(\n this.localization.$formats,\n this.localization.$globals,\n );\n }\n }\n\n render() {\n const classes = {\n \"stzh-socialmediastream-item\": true,\n };\n\n return (\n <Host>\n <a class={classes} href={this._item.link} target=\"_blank\">\n {this._item.image && (\n <div class=\"stzh-socialmediastream-item__image\">\n <stzh-ratio ratio=\"1:1\"></stzh-ratio>\n <div class=\"stzh-socialmediastream-item__image-inner-wrapper\">\n <img src={this._item.image} alt={this._item.account.title} />\n </div>\n </div>\n )}\n <div class=\"stzh-socialmediastream-item__content\">\n <div class=\"stzh-socialmediastream-item__content-head\">\n <stzh-text size=\"nano\" class=\"stzh-socialmediastream-item__content-title\">\n <strong>{this._item.account.title}</strong>\n <br />\n {this.dateAdapter.format(this.getParsedDate(this._item.date), \"dateInput\")}\n </stzh-text>\n <stzh-icon name={this.getIconName(this._item)}></stzh-icon>\n </div>\n <div class=\"stzh-socialmediastream-item__content-body\" innerHTML={this._item.text}></div>\n <div class=\"stzh-socialmediastream-item__content-footer 1q23\">\n {this._item.actions &&\n this._item.actions.map(action => (\n <a href={action.url} title={action.title} class=\"stzh-socialmediastream-item__action\" target=\"_blank\">\n <stzh-icon name={this.getActionIconName(action.variant)}></stzh-icon>\n {action.count}\n </a>\n ))}\n </div>\n </div>\n </a>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/{p-556af4a4.js → p-7969eeb6.js} RENAMED Viewed

@@ -45,7 +45,7 @@ const StzhActions = /*@__PURE__*/ proxyCustomElement(class StzhActions extends H
             "stzh-actions--space-between": this.spaceBetween,
             [`stzh-actions--${this.variant}`]: !!this.variant,
         };
-        return (h(Host, { key: '6f2fa3a12747f51f18e613908f76d6ed72cce777', "space-between": this.spaceBetween }, h("div", { key: '289677944be98dfe8abd41f03b09c6fa12318e8d', class: classes }, h("div", { key: 'c348ca9ea3fbf7846eb3ebe23cdf36e93a12088a', class: "stzh-actions__actions", role: "group" }, h("div", { key: 'fe87f7a0629b8df8a26a313e21946df2246d6153', class: "stzh-actions__tertiary-actions" }, h("slot", { key: '178170babd992f3450e452a2b3dd1622ce0a2b47', name: "tertiary" })), h("div", { key: '45bd80ba3cbd48e86604f02f3e80e02354ffac5f', class: "stzh-actions__wrapper" }, h("div", { key: 'dd00ba8284996ded53c568b2ead2c1cde9b554c2', class: "stzh-actions__secondary-actions" }, h("slot", { key: '834b135efe725ed2ed155bdb174a926edf4b9487', name: "secondary" })), h("div", { key: '923fc8334c1e5c0d9c0f67bd1c162826b20c6262', class: "stzh-actions__primary-actions" }, h("slot", { key: '75ec7c89fe2df103e9e44a18c5b2ce673fea9ca0', name: "primary" })))))));
+        return (h(Host, { key: 'b270b08bc2790ee7ac05c789bed68d18d7cb904a', "space-between": this.spaceBetween }, h("div", { key: '4f012e4c4c8ecae9295c9bb64e4325f00434542e', class: classes }, h("div", { key: 'ad01bc4868f83f6aa2890d8adb21b6fee75df083', class: "stzh-actions__actions", role: "group" }, h("div", { key: '0b7d362c5435c0e0edb3c8389939a7d21ce2e6f8', class: "stzh-actions__tertiary-actions" }, h("slot", { key: '81022164afa18eda9408f6700394551b9c506f40', name: "tertiary" })), h("div", { key: 'fe9b0e3e2395811d495e81662e9c448261245cc4', class: "stzh-actions__wrapper" }, h("div", { key: '2373bd04030c225470fc156863b64aea0015ade2', class: "stzh-actions__secondary-actions" }, h("slot", { key: '565ae6dd44abf99a66a866be3f38ba5468290c51', name: "secondary" })), h("div", { key: '34bfe41b42785e3c5120580c163e6a548a0a8551', class: "stzh-actions__primary-actions" }, h("slot", { key: '455c6471132fb3dae53ece5230588ab922925e33', name: "primary" })))))));
     }
     get element() { return this; }
     static get style() { return StzhActionsStyle0; }
@@ -69,4 +69,4 @@ function defineCustomElement() {
 export { StzhActions as S, defineCustomElement as d };
-//# sourceMappingURL=p-556af4a4.js.map
+//# sourceMappingURL=p-7969eeb6.js.map

package/dist/components/{p-556af4a4.js.map → p-7969eeb6.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-~~556af4a4~~.js","mappings":";;;AAAA,MAAM,cAAc,GAAG,m7EAAm7E,CAAC;AAC38E,0BAAe,cAAc;;MCahB,WAAW;;;;;QAWd,SAAI,GAAG;YACb,MAAM,gBAAgB,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CACpD,+DAA+D,CAChE,CAAC;YAEF,MAAM,eAAe,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CACnD,6DAA6D,CAC9D,CAAC;YAEF,gBAAgB,CAAC,OAAO,CAAC,MAAM;gBAC7B,cAAc,CAAC,MAAM,EAAE;oBACrB,OAAO,EAAE,WAAW;iBACI,CAAC,CAAC;aAC7B,CAAC,CAAC;YAEH,eAAe,CAAC,OAAO,CAAC,MAAM;gBAC5B,cAAc,CAAC,MAAM,EAAE;oBACrB,OAAO,EAAE,UAAU;iBACK,CAAC,CAAC;aAC7B,CAAC,CAAC;SACJ,CAAC;uBA7B2E,MAAM;4BAGlC,KAAK;;IA4BtD,iBAAiB;QACf,IAAI,CAAC,IAAI,EAAE,CAAC;QAEZ,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAChD,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE;YAClC,SAAS,EAAE,IAAI;YACf,OAAO,EAAE,IAAI;SACd,CAAC,CAAC;KACJ;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;SAC5B;KACF;IAED,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,cAAc,EAAE,IAAI;YACpB,6BAA6B,EAAE,IAAI,CAAC,YAAY;YAChD,CAAC,iBAAiB,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;SAClD,CAAC;QAEF,QACE,EAAC,IAAI,sEAAgB,IAAI,CAAC,YAAY,IACpC,4DAAK,KAAK,EAAE,OAAO,IACjB,4DAAK,KAAK,EAAC,uBAAuB,EAAC,IAAI,EAAC,OAAO,IAC7C,4DAAK,KAAK,EAAC,gCAAgC,IACzC,6DAAM,IAAI,EAAC,UAAU,GAAQ,CACzB,EACN,4DAAK,KAAK,EAAC,uBAAuB,IAChC,4DAAK,KAAK,EAAC,iCAAiC,IAC1C,6DAAM,IAAI,EAAC,WAAW,GAAQ,CAC1B,EACN,4DAAK,KAAK,EAAC,+BAA+B,IACxC,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACF,CACF,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/stzh-actions/stzh-actions.scss?tag=stzh-actions&encapsulation=shadow","src/components/stzh-actions/stzh-actions.tsx"],"sourcesContent":[":host {\n ::slotted([slot=\"primary\"]),\n ::slotted([slot=\"secondary\"]),\n ::slotted([slot=\"tertiary\"]) {\n flex-grow: 1;\n margin: calc(#{space(\"medium\")} / 2);\n }\n\n &[space-between=\"true\"] ::slotted([slot=\"tertiary\"]) {\n @include mq($from: small) {\n flex-grow: inherit;\n }\n }\n}\n\n.stzh-actions {\n &__actions {\n display: flex;\n flex-direction: column-reverse;\n margin: calc(#{space(\"medium\")} / -2);\n\n @include mq($from: small) {\n flex-direction: row;\n }\n }\n\n &__primary-actions,\n &__secondary-actions,\n &__tertiary-actions {\n display: flex;\n }\n\n &__wrapper {\n display: contents;\n }\n\n // &--dialog &__actions {\n // justify-content: flex-end;\n // }\n\n &--process &__wrapper {\n @include mq($to: small) {\n display: flex;\n flex-wrap: wrap;\n }\n }\n\n &--process &__actions {\n justify-content: flex-end;\n }\n\n &--process &__primary-actions,\n &--process &__secondary-actions {\n @include mq($to: small) {\n flex-grow: 1;\n }\n }\n\n &--process &__tertiary-actions {\n @include mq($from: small) {\n margin-right: auto;\n }\n }\n\n &--search &__actions {\n justify-content: flex-end;\n }\n\n /* space between /\n &--space-between &__actions {\n justify-content: space-between;\n\n @include mq($from: small) {\n flex-direction: column;\n }\n\n @include mq($from: medium) {\n flex-direction: row;\n }\n }\n\n &--space-between &__wrapper {\n @include mq($from: small) {\n display: flex;\n justify-content: flex-end;\n }\n }\n}\n","import { Component, Element, h, Host, Prop } from \"@stencil/core\";\n\nimport { setPropsIfNull } from \"../../utils/utils\";\n\n/\n @slot primary - Slot for primary button\n * @slot secondary - Slot for secondary button\n * @slot tertiary - Slot for tertiary button\n /\n@Component({\n tag: \"stzh-actions\",\n styleUrl: \"stzh-actions.scss\",\n shadow: true,\n})\nexport class StzhActions {\n /* Variant determining what position the action buttons are /\n @Prop({ reflect: true }) variant: \"form\" \| \"dialog\" \| \"process\" \| \"search\" = \"form\";\n\n /* Whether to split tertiary and primary/secondary from each other (left and right). */\n @Prop({ reflect: true }) spaceBetween: boolean = false;\n\n @Element() element: HTMLStzhActionsElement;\n\n private observer: MutationObserver;\n\n private init = () => {\n const secondaryButtons = this.element.querySelectorAll(\n 'stzh-button[slot=\"secondary\"], [slot=\"secondary\"] stzh-button',\n );\n\n const tertiaryButtons = this.element.querySelectorAll(\n 'stzh-button[slot=\"tertiary\"], [slot=\"tertiary\"] stzh-button',\n );\n\n secondaryButtons.forEach(button => {\n setPropsIfNull(button, {\n variant: \"secondary\",\n } as HTMLStzhButtonElement);\n });\n\n tertiaryButtons.forEach(button => {\n setPropsIfNull(button, {\n variant: \"tertiary\",\n } as HTMLStzhButtonElement);\n });\n };\n\n connectedCallback() {\n this.init();\n\n this.observer = new MutationObserver(this.init);\n this.observer.observe(this.element, {\n childList: true,\n subtree: true,\n });\n }\n\n disconnectedCallback() {\n if (this.observer) {\n this.observer.disconnect();\n }\n }\n\n render() {\n const classes = {\n \"stzh-actions\": true,\n \"stzh-actions--space-between\": this.spaceBetween,\n [`stzh-actions--${this.variant}`]: !!this.variant,\n };\n\n return (\n <Host space-between={this.spaceBetween}>\n <div class={classes}>\n <div class=\"stzh-actions__actions\" role=\"group\">\n <div class=\"stzh-actions__tertiary-actions\">\n <slot name=\"tertiary\"></slot>\n </div>\n <div class=\"stzh-actions__wrapper\">\n <div class=\"stzh-actions__secondary-actions\">\n <slot name=\"secondary\"></slot>\n </div>\n <div class=\"stzh-actions__primary-actions\">\n <slot name=\"primary\"></slot>\n </div>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-7969eeb6.js","mappings":";;;AAAA,MAAM,cAAc,GAAG,m7EAAm7E,CAAC;AAC38E,0BAAe,cAAc;;MCahB,WAAW;;;;;QAWd,SAAI,GAAG;YACb,MAAM,gBAAgB,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CACpD,+DAA+D,CAChE,CAAC;YAEF,MAAM,eAAe,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CACnD,6DAA6D,CAC9D,CAAC;YAEF,gBAAgB,CAAC,OAAO,CAAC,MAAM;gBAC7B,cAAc,CAAC,MAAM,EAAE;oBACrB,OAAO,EAAE,WAAW;iBACI,CAAC,CAAC;aAC7B,CAAC,CAAC;YAEH,eAAe,CAAC,OAAO,CAAC,MAAM;gBAC5B,cAAc,CAAC,MAAM,EAAE;oBACrB,OAAO,EAAE,UAAU;iBACK,CAAC,CAAC;aAC7B,CAAC,CAAC;SACJ,CAAC;uBA7B2E,MAAM;4BAGlC,KAAK;;IA4BtD,iBAAiB;QACf,IAAI,CAAC,IAAI,EAAE,CAAC;QAEZ,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAChD,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE;YAClC,SAAS,EAAE,IAAI;YACf,OAAO,EAAE,IAAI;SACd,CAAC,CAAC;KACJ;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;SAC5B;KACF;IAED,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,cAAc,EAAE,IAAI;YACpB,6BAA6B,EAAE,IAAI,CAAC,YAAY;YAChD,CAAC,iBAAiB,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;SAClD,CAAC;QAEF,QACE,EAAC,IAAI,sEAAgB,IAAI,CAAC,YAAY,IACpC,4DAAK,KAAK,EAAE,OAAO,IACjB,4DAAK,KAAK,EAAC,uBAAuB,EAAC,IAAI,EAAC,OAAO,IAC7C,4DAAK,KAAK,EAAC,gCAAgC,IACzC,6DAAM,IAAI,EAAC,UAAU,GAAQ,CACzB,EACN,4DAAK,KAAK,EAAC,uBAAuB,IAChC,4DAAK,KAAK,EAAC,iCAAiC,IAC1C,6DAAM,IAAI,EAAC,WAAW,GAAQ,CAC1B,EACN,4DAAK,KAAK,EAAC,+BAA+B,IACxC,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACF,CACF,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/stzh-actions/stzh-actions.scss?tag=stzh-actions&encapsulation=shadow","src/components/stzh-actions/stzh-actions.tsx"],"sourcesContent":[":host {\n ::slotted([slot=\"primary\"]),\n ::slotted([slot=\"secondary\"]),\n ::slotted([slot=\"tertiary\"]) {\n flex-grow: 1;\n margin: calc(#{space(\"medium\")} / 2);\n }\n\n &[space-between=\"true\"] ::slotted([slot=\"tertiary\"]) {\n @include mq($from: small) {\n flex-grow: inherit;\n }\n }\n}\n\n.stzh-actions {\n &__actions {\n display: flex;\n flex-direction: column-reverse;\n margin: calc(#{space(\"medium\")} / -2);\n\n @include mq($from: small) {\n flex-direction: row;\n }\n }\n\n &__primary-actions,\n &__secondary-actions,\n &__tertiary-actions {\n display: flex;\n }\n\n &__wrapper {\n display: contents;\n }\n\n // &--dialog &__actions {\n // justify-content: flex-end;\n // }\n\n &--process &__wrapper {\n @include mq($to: small) {\n display: flex;\n flex-wrap: wrap;\n }\n }\n\n &--process &__actions {\n justify-content: flex-end;\n }\n\n &--process &__primary-actions,\n &--process &__secondary-actions {\n @include mq($to: small) {\n flex-grow: 1;\n }\n }\n\n &--process &__tertiary-actions {\n @include mq($from: small) {\n margin-right: auto;\n }\n }\n\n &--search &__actions {\n justify-content: flex-end;\n }\n\n /* space between /\n &--space-between &__actions {\n justify-content: space-between;\n\n @include mq($from: small) {\n flex-direction: column;\n }\n\n @include mq($from: medium) {\n flex-direction: row;\n }\n }\n\n &--space-between &__wrapper {\n @include mq($from: small) {\n display: flex;\n justify-content: flex-end;\n }\n }\n}\n","import { Component, Element, h, Host, Prop } from \"@stencil/core\";\n\nimport { setPropsIfNull } from \"../../utils/utils\";\n\n/\n @slot primary - Slot for primary button\n * @slot secondary - Slot for secondary button\n * @slot tertiary - Slot for tertiary button\n /\n@Component({\n tag: \"stzh-actions\",\n styleUrl: \"stzh-actions.scss\",\n shadow: true,\n})\nexport class StzhActions {\n /* Variant determining what position the action buttons are /\n @Prop({ reflect: true }) variant: \"form\" \| \"dialog\" \| \"process\" \| \"search\" = \"form\";\n\n /* Whether to split tertiary and primary/secondary from each other (left and right). */\n @Prop({ reflect: true }) spaceBetween: boolean = false;\n\n @Element() element: HTMLStzhActionsElement;\n\n private observer: MutationObserver;\n\n private init = () => {\n const secondaryButtons = this.element.querySelectorAll(\n 'stzh-button[slot=\"secondary\"], [slot=\"secondary\"] stzh-button',\n );\n\n const tertiaryButtons = this.element.querySelectorAll(\n 'stzh-button[slot=\"tertiary\"], [slot=\"tertiary\"] stzh-button',\n );\n\n secondaryButtons.forEach(button => {\n setPropsIfNull(button, {\n variant: \"secondary\",\n } as HTMLStzhButtonElement);\n });\n\n tertiaryButtons.forEach(button => {\n setPropsIfNull(button, {\n variant: \"tertiary\",\n } as HTMLStzhButtonElement);\n });\n };\n\n connectedCallback() {\n this.init();\n\n this.observer = new MutationObserver(this.init);\n this.observer.observe(this.element, {\n childList: true,\n subtree: true,\n });\n }\n\n disconnectedCallback() {\n if (this.observer) {\n this.observer.disconnect();\n }\n }\n\n render() {\n const classes = {\n \"stzh-actions\": true,\n \"stzh-actions--space-between\": this.spaceBetween,\n [`stzh-actions--${this.variant}`]: !!this.variant,\n };\n\n return (\n <Host space-between={this.spaceBetween}>\n <div class={classes}>\n <div class=\"stzh-actions__actions\" role=\"group\">\n <div class=\"stzh-actions__tertiary-actions\">\n <slot name=\"tertiary\"></slot>\n </div>\n <div class=\"stzh-actions__wrapper\">\n <div class=\"stzh-actions__secondary-actions\">\n <slot name=\"secondary\"></slot>\n </div>\n <div class=\"stzh-actions__primary-actions\">\n <slot name=\"primary\"></slot>\n </div>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/{p-f3c5a9d6.js → p-851bafc2.js} RENAMED Viewed

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-8f01554b.js';
 import { c as commonjsGlobal } from './p-1ab64d01.js';
-import { d as defineCustomElement$1 } from './p-a2659715.js';
+import { d as defineCustomElement$1 } from './p-60d4ef07.js';
 function globals(defs) {
   defs('EPSG:4326', "+title=WGS 84 (long/lat) +proj=longlat +ellps=WGS84 +datum=WGS84 +units=degrees");
@@ -53584,7 +53584,7 @@ const StzhOlmap = /*@__PURE__*/ proxyCustomElement(class StzhOlmap extends H {
             "stzh-olmap--has-no-print-control": !this.printControl,
             "stzh-olmap--has-location-control": this.locationControl,
         };
-        return (h(Host, { key: '9517c971b6ec79d7de68bd6016a5fc1c6160d77e' }, h("div", { key: 'd43fa25c26069487f74cb7c44f714a1da4438d92', class: classes }, h("div", { key: 'f3d124346d2fabb508b92192071fd72047f7d36c', ref: el => (this.mapElement = el), class: "stzh-olmap__map" }), h("div", { key: '921b59e2f68ca6dd25973f7db7fea94d9b86c4c6', ref: el => (this.popoverElement = el), class: "stzh-olmap__popover" }))));
+        return (h(Host, { key: 'c9b7fbab4f2ff6a4d6d5649b577cf81dac859dbd' }, h("div", { key: 'd0f5c05bbabc558c53b87e82404857e95f8ef917', class: classes }, h("div", { key: '75c924f63e70f010585953b904e7d1f4a9d43fb1', ref: el => (this.mapElement = el), class: "stzh-olmap__map" }), h("div", { key: '76813ad15b4f4d94a37b1f1e9daa39fb1f1d2bc9', ref: el => (this.popoverElement = el), class: "stzh-olmap__popover" }))));
     }
     get element() { return this; }
     static get watchers() { return {
@@ -53665,4 +53665,4 @@ function defineCustomElement() {
 export { StzhOlmap as S, defineCustomElement as d };
-//# sourceMappingURL=p-f3c5a9d6.js.map
+//# sourceMappingURL=p-851bafc2.js.map