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

@oiz/stzh-components 4.12.1 → 4.13.0-beta1

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

package/dist/collection/components/stzh-saptcha/stzh-saptcha.js CHANGED Viewed

@@ -66,8 +66,8 @@ export class StzhSaptcha {
         const classes = {
             "stzh-saptcha": true,
         };
-        return (h(Host, { key: '286c8cfe36b60e89bb375c36f04b72667198812d', "is-invalid": this.invalid || this._error.length > 0 }, h("div", { key: '0a17f8b4f12bd323c0a04336783f97f3b9551de5', class: classes }, h("div", { key: 'efbd2b5c9976de641009470822fe872f108d4435', class: "stzh-saptcha__box" }, h("div", { key: 'c3f45d633bf46ec7fe34939b906e5fd3772afb14', class: "stzh-saptcha__info", id: `${this.saptchaId}-info` }, this.localization.info, " ", this.localization.question), h("div", { key: '43d4df83ac83ba09a3476348aee603d0f2088a28', class: "stzh-saptcha__answer", id: `${this.saptchaId}-answer` }, this._numbers.map((number, index) => (h("span", { class: "stzh-saptcha__number" }, number, index < this._numbers.length - 1 &&
-            (index === this._numbers.length - 2 ? this.localization.answerOr : ", "))))), h("stzh-input", { key: 'fbb85cd0ae8efc4cf3bdf56d87002c9eacd2e787', class: "stzh-saptcha__input", label: this.localization.answer, name: this.name, invalid: this.invalid, error: this.error, disabled: this.disabled, value: this.value, onStzhChange: this.onInputChange, required: true, a11yDescribedby: `${this.saptchaId}-info ${this.saptchaId}-answer` })))));
+        return (h(Host, { key: '11774c337774e7a5bee7bb1eafd51113152b44f2', "is-invalid": this.invalid || this._error.length > 0 }, h("div", { key: 'f7f87db518e237784dcc8bc5cf70b9e5cf61329e', class: classes }, h("div", { key: 'e01ce3c961590ac5d01f4de9fc9d937a1bfc6c00', class: "stzh-saptcha__box" }, h("div", { key: '56d9d557f5ba54d9c1d57c3eb280356abd3c1863', class: "stzh-saptcha__info", id: `${this.saptchaId}-info` }, this.localization.info, " ", this.localization.question), h("div", { key: '3964ba8f8467bd09aff674396dfce316ad011d0e', class: "stzh-saptcha__answer", id: `${this.saptchaId}-answer` }, this._numbers.map((number, index) => (h("span", { class: "stzh-saptcha__number" }, number, index < this._numbers.length - 1 &&
+            (index === this._numbers.length - 2 ? this.localization.answerOr : ", "))))), h("stzh-input", { key: 'e3a75cc3b6357809ec885084314b38c879bfa475', class: "stzh-saptcha__input", label: this.localization.answer, name: this.name, invalid: this.invalid, error: this.error, disabled: this.disabled, value: this.value, onStzhChange: this.onInputChange, required: true, a11yDescribedby: `${this.saptchaId}-info ${this.saptchaId}-answer` })))));
     }
     static get is() { return "stzh-saptcha"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/stzh-scrollup/stzh-scrollup.js CHANGED Viewed

@@ -28,7 +28,7 @@ export class StzhScrollup {
         const classes = {
             "stzh-scrollup": true,
         };
-        return (h(Host, { key: '214d0bc7db938b45841295475d66c6edcf7c946b' }, h("div", { key: '98cbdda085c813af0cc12dd0f7cb4753f3f18987', class: classes }, h("slot", { key: '8169cf91eceb54843665e493016a279504b14363', onSlotchange: this.handleSlotchange }))));
+        return (h(Host, { key: '5a6b8a6b4479fcdc2ba1cdcbe3679b94e1125509' }, h("div", { key: '4ddd7687ee8311b2e2b1d1804fc62d18cae6a70f', class: classes }, h("slot", { key: 'b1c1f87f593f83d5926349e904698b90d5679af9', onSlotchange: this.handleSlotchange }))));
     }
     static get is() { return "stzh-scrollup"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/stzh-section/stzh-section.js CHANGED Viewed

@@ -52,12 +52,12 @@ export class StzhSection {
         this.init();
     }
     render() {
-        return (h(Host, { key: '2be498b274f67f0603170eb5367cd186153c2206' }, h("section", { key: 'f4dda27f87d1b58f9826ec75e2a2fcecad9b6434', class: {
+        return (h(Host, { key: '6815f3e9658760fc8af8745ee9e6f3ed6a1ef9cb' }, h("section", { key: '9ffb80d2b3c4505161fc986f1366a0dbe5113c42', class: {
                 "stzh-section": true,
                 "stzh-section--is-breakout": this.breakout,
                 [`stzh-section--${this.variant}`]: !!this.variant,
                 [`stzh-section--margin-bottom-${this.marginBottom}`]: !!this.marginBottom,
-            } }, h("div", { key: 'dc4042c7d4cee716daf4cb3b4c061a8b2ec6f26c', class: "stzh-section__outer" }, h("div", { key: '23fa78aa7b158a5202738d6a41736e079036b231', class: "stzh-section__heading" }, h("slot", { key: 'f113c352f47dd08c01b5c1a2a80dc7e14abacef1', name: "heading" })), h("div", { key: '42c193cb6382a18ac57e45d9eececdf3c3e99b01', class: "stzh-section__wrapper" }, h("slot", { key: '322316c03b365cf3d224958416d935188a1862b4', onSlotchange: this.onSlotChange, ref: el => (this.slotElement = el) }))))));
+            } }, h("div", { key: 'ec81e73b9bd31cbf41771d1036f486f874659f43', class: "stzh-section__outer" }, h("div", { key: '4affebf2ce6e4ba56308a84cf8b29546ff524303', class: "stzh-section__heading" }, h("slot", { key: '7c93a03f5c8cdb1491a5836dc12ca9d4f114fdd8', name: "heading" })), h("div", { key: '6a89cf3caa3aa26e5536ab6b55320bdf3629605a', class: "stzh-section__wrapper" }, h("slot", { key: '8f978231fa604001cf043cdc503d79b53c42aad0', onSlotchange: this.onSlotChange, ref: el => (this.slotElement = el) }))))));
     }
     static get is() { return "stzh-section"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/stzh-share/stzh-share.js CHANGED Viewed

@@ -82,7 +82,7 @@ export class StzhShare {
                 icon: "xing",
             },
         };
-        return (h(Host, { key: 'a02b9c5b40d370777108240ef4e3a8c7ec72c720' }, h("div", { key: 'a29872c0066e8657c34f1e49f81b9fe5455f8432', class: classes }, h("ul", { key: '11d9229924ecaaec422ef5c8f2bc33b4e4362f14', class: "stzh-share__list" }, this._services.map(service => (h("li", { class: "stzh-share__item" }, h("stzh-tooltip", { content: serviceData[service].text, size: "small" }, h("stzh-button", { class: `stzh-share__button is-${service}`, size: "small", variant: "tertiary", iconOnly: true, href: serviceData[service].url, rel: serviceData[service].blank ? "nofollow noopener noreferrer" : "nofollow", target: serviceData[service].blank ? "_blank" : "_self", onClick: serviceData[service].popup ? e => this.openPopup(serviceData[service].url, e) : null, analyticsId: serviceData[service].text, icon: serviceData[service].icon })))))))));
+        return (h(Host, { key: 'c320e91fdd20a78b40540d84e7b4ff993be320a3' }, h("div", { key: '886b50c3db94837dbcd9ea540211fb0d31779fc7', class: classes }, h("ul", { key: 'e7ee47ea410851ff0c83cfd2b41b21c8ca33656d', class: "stzh-share__list" }, this._services.map(service => (h("li", { class: "stzh-share__item" }, h("stzh-tooltip", { content: serviceData[service].text, size: "small" }, h("stzh-button", { class: `stzh-share__button is-${service}`, size: "small", variant: "tertiary", iconOnly: true, href: serviceData[service].url, rel: serviceData[service].blank ? "nofollow noopener noreferrer" : "nofollow", target: serviceData[service].blank ? "_blank" : "_self", onClick: serviceData[service].popup ? e => this.openPopup(serviceData[service].url, e) : null, analyticsId: serviceData[service].text, icon: serviceData[service].icon })))))))));
     }
     static get is() { return "stzh-share"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/stzh-show/stzh-show.js CHANGED Viewed

@@ -52,9 +52,9 @@ export class StzhShow {
     }
     render() {
         const timeNow = Date.now();
-        return (h(Host, { key: '70a4992118264a868bafea6d72a9737e8aecddff', hidden: (this._showFromDate && timeNow <= this._showFromDate.getTime()) ||
+        return (h(Host, { key: '127cc31da361580db8d9ffa32d5f26e9e9ae54d4', hidden: (this._showFromDate && timeNow <= this._showFromDate.getTime()) ||
                 (this._hideFromDate && timeNow >= this._hideFromDate.getTime()) ||
-                this.closedByCookie }, h("slot", { key: '40a2d597936375f8575a7717eba9c42831a3eeb3' })));
+                this.closedByCookie }, h("slot", { key: '7e3976c80768dfbdea6814f3347e4cdf282bdddc' })));
     }
     static get is() { return "stzh-show"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/stzh-skin-portal-mitwirken/stzh-skin-portal-mitwirken.js CHANGED Viewed

@@ -8,7 +8,7 @@ export class StzhSkinPortalMitwirken {
         console.log(this.constructor.style.replace('@charset "UTF-8";', ""));
     }
     render() {
-        return h(Host, { key: '24db8f2a2fc3c4c7cfef8e0ef98eec41035a2a4c' });
+        return h(Host, { key: '2328e8263d11e635f41aaa905d6be7d3c03cd3e3' });
     }
     static get is() { return "stzh-skin-portal-mitwirken"; }
     static get originalStyleUrls() {

package/dist/collection/components/stzh-skin-storybook-preview/stzh-skin-storybook-preview.js CHANGED Viewed

@@ -8,7 +8,7 @@ export class StzhSkinStorybookPreview {
         console.log(this.constructor.style.replace('@charset "UTF-8";', ""));
     }
     render() {
-        return h(Host, { key: 'bc1613db9970995868a3f839555ea38d6d411be0' });
+        return h(Host, { key: '3a9fd9bc2f9a09e35cd68a1b58250a321ea620a6' });
     }
     static get is() { return "stzh-skin-storybook-preview"; }
     static get originalStyleUrls() {

package/dist/collection/components/stzh-skiplink/stzh-skiplink.js CHANGED Viewed

@@ -81,7 +81,7 @@ export class StzhSkiplink {
         }
     }
     render() {
-        return (h(Host, { key: '13da5427e132096f78e0aa854ffb24ce001d2d39', focused: this.focused, tabindex: "-1", onFocus: this.onRootFocus }, h("a", { key: '1a4fb7a416928ab416994f65cfbff85fc1ad4211', ref: el => (this.link = el), class: "stzh-skiplink", href: this.href, accessKey: this.linkAccesskey, title: this.linkTitle, onFocus: this.onFocus, onBlur: this.onBlur }, h("div", { key: '714b58ff8a83c21d7cc0cb4bff9886b33ae66f52', ref: el => (this.text = el) }, this.label ? this.label : h("slot", null)))));
+        return (h(Host, { key: '66742b7ef85ab795a427169f62a2111c84a4aac9', focused: this.focused, tabindex: "-1", onFocus: this.onRootFocus }, h("a", { key: 'd408c8b114973584a75491aa9958191b1d9d757a', ref: el => (this.link = el), class: "stzh-skiplink", href: this.href, accessKey: this.linkAccesskey, title: this.linkTitle, onFocus: this.onFocus, onBlur: this.onBlur }, h("div", { key: 'f0cde902dffa6c9ca86d63bd3a59b66d7e7bc1fc', ref: el => (this.text = el) }, this.label ? this.label : h("slot", null)))));
     }
     static get is() { return "stzh-skiplink"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/stzh-sortable/stzh-sortable.js CHANGED Viewed

@@ -329,7 +329,7 @@ export class StzhSortable {
             "stzh-sortable": true,
             "stzh-sortable--disabled": this.disabled,
         };
-        return (h(Host, { key: 'd9bf31dea18e065cbfeeffb594187b703b0623c3' }, h("div", { key: '661fb06509f7bf76dbfa3bf0b0277325d7251ef6', class: classes }, !this.disabled && (h("div", { key: '384fca46f1296fd492b43023b215639f70dceabd', id: `${this.sortableId}-description`, class: "stzh-sortable__description" }, this.localization.description)), h("div", { key: 'f77ac9f0f215e56ab5547e69b1e9633c531deb07', ref: el => (this.ariaLiveElement = el), "aria-live": "assertive", class: "stzh-sortable__aria-live" }), h("div", { key: '2a7d014d85e87438ab44edcb6492aa996744cb69', ref: el => (this.containerElement = el), class: "stzh-sortable__container" }, h("slot", { key: '89d0ee427529a735775d169ac4c9c0740e68e895' })))));
+        return (h(Host, { key: 'dc868ef505039baa7769b8ae87e19dcec062a615' }, h("div", { key: 'a50787fa0d746d2980a361c1b6624e300bdde0ec', class: classes }, !this.disabled && (h("div", { key: 'd321388292bda92abf27a2eab51bdf01a94fb91b', id: `${this.sortableId}-description`, class: "stzh-sortable__description" }, this.localization.description)), h("div", { key: '30d5cce14b910aa865bbb30cc2a34b9c6e2a2f87', ref: el => (this.ariaLiveElement = el), "aria-live": "assertive", class: "stzh-sortable__aria-live" }), h("div", { key: '76cfc14d0f972290a20ad0ff3d15c8c23a69e510', ref: el => (this.containerElement = el), class: "stzh-sortable__container" }, h("slot", { key: 'f870c56833c2181875f86c862a3829eca47318bf' })))));
     }
     static get is() { return "stzh-sortable"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/stzh-space/stzh-space.js CHANGED Viewed

@@ -16,12 +16,12 @@ export class StzhSpace {
         this.border = "none";
     }
     render() {
-        return (h(Host, { key: 'e1ebd621aa36455250b1d39de2a0bae2680eb3b4' }, h("div", { key: 'ac65b8da660bd2e8f3b8e8b4079fd2186e5989bf', class: {
+        return (h(Host, { key: '712ef2b08e157a7e78ccffb93f8648b0c5c67904' }, h("div", { key: '45f6d05e745b62a03064726e99e6c45fd5a24d4a', class: {
                 "stzh-space": true,
                 "stzh-space--is-around": this.around,
                 [`stzh-space--justify-${this.justify}`]: !!this.justify,
                 [`stzh-space--items-${this.items}`]: !!this.items,
-            } }, h("slot", { key: '54739583e40a552847d3c999fe50b03dd01d0c19' }))));
+            } }, h("slot", { key: '6c8f9ded5a564167e1d20c70dce789b22cdaaf64' }))));
     }
     static get is() { return "stzh-space"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/stzh-status/stzh-status.js CHANGED Viewed

@@ -17,7 +17,7 @@ export class StzhStatus {
             "stzh-status": true,
             [`stzh-status--type-${this.type}`]: !!this.type,
         };
-        return (h(Host, { key: 'f9e69c232eb0714c5d8e9503f0de9c00267a81cb' }, h("div", { key: 'dae9d9a0109461c08a650b71583ab1c5198691b2', class: classes }, h("div", { key: 'e4cba8469865473a6dfd305db3ac05184da3658f', class: "stzh-status__text" }, !this.withLoadingbar && h("div", { key: '51e7665025279382fb372c7f1c9e8d2aa54b56d0', class: "stzh-status__dot" }), this.label && h("div", { key: '549f43abef15944d6f7439ee034dbe8ee2b4818a', class: "stzh-status__label" }, this.label)), this.withLoadingbar && (h("div", { key: '3501d6e8aca4c281b3ec88559a5cd5a7c768261a', class: "stzh-status__bar" }, h("div", { key: '7defbd37167c186f52a36b36130a0217cc585b8c', class: "stzh-status__bar-inner", style: {
+        return (h(Host, { key: '799a39017cfec61a07e36347b0a36cc57a5f6260' }, h("div", { key: '5ebb6c1bbdbe1a05a90b02036062d56ab8e2e2f6', class: classes }, h("div", { key: 'c69bed678675f12c4e12db51d81e2287fc9289ff', class: "stzh-status__text" }, !this.withLoadingbar && h("div", { key: '1ae15cb68b2f4e1f0e44f6e15b255826a8ffe71c', class: "stzh-status__dot" }), this.label && h("div", { key: '0011fd4ccf566f6eaf0416d4e82c1414d13786b3', class: "stzh-status__label" }, this.label)), this.withLoadingbar && (h("div", { key: '3db966f076e94e642193e27591330c05122336c5', class: "stzh-status__bar" }, h("div", { key: '62c736e56b6028fa8e4ecfbf2713e4e9df880a38', class: "stzh-status__bar-inner", style: {
                 width: `${this.percent}%`,
             } }))))));
     }

package/dist/collection/components/stzh-stepper/stzh-stepper.component.js CHANGED Viewed

@@ -179,13 +179,13 @@ export class StzhStepper {
             "stzh-stepper": true,
             [`stzh-stepper--index-${this.index}`]: !!this.index,
         };
-        return (h(Host, { key: '14aace3ba2481f10966df3ba4c2df8c2998cb71f', style: {
+        return (h(Host, { key: '715de95f3d978e3b1672b0bd14f9b254b00e9fb8', style: {
                 "--steps": this.currentSteps ? this.currentSteps.toString() : null,
-            } }, h("div", { key: '13308bcf9d97fedca884252aefd2e5f0aa08591a', class: classes }, h("div", { key: '04733611bfa3d6c0c8c4d0fba3cb49fd51db7637', class: "stzh-stepper__items", role: "list", "aria-label": this.localization.label }, this._data.map((step, index) => (h("stzh-stepper-item", Object.assign({}, this.getItemAttributes(index), { icon: step.icon, disabled: step.disabled, label: step.label, "click-disabled": step.clickDisabled !== undefined ? step.clickDisabled : this.clickDisabled, onStzhClick: (e) => {
+            } }, h("div", { key: 'cc692317681d4091ca2ada44bfe36e026563b493', class: classes }, h("div", { key: '301fb51464dd6bb24df57d249b1678957dbb42c2', class: "stzh-stepper__items", role: "list", "aria-label": this.localization.label }, this._data.map((step, index) => (h("stzh-stepper-item", Object.assign({}, this.getItemAttributes(index), { icon: step.icon, disabled: step.disabled, label: step.label, "click-disabled": step.clickDisabled !== undefined ? step.clickDisabled : this.clickDisabled, onStzhClick: (e) => {
                 this.handleStepClick(e);
             }, onStzhDottedClick: (e) => {
                 this.handleStepClick(e);
-            }, class: "stzh-stepper__item" })))), h("slot", { key: 'c4a8d8d8f8510715ee9c8081991d5a41661a5d58' })))));
+            }, class: "stzh-stepper__item" })))), h("slot", { key: 'da64437113179d3ce79e9ce16ffdc37422e76eb8' })))));
     }
     static get is() { return "stzh-stepper"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/stzh-stepper-item/stzh-stepper-item.js CHANGED Viewed

@@ -60,9 +60,9 @@ export class StzhStepperItem {
             "stzh-stepper-item--passed": this.passed,
             "stzh-stepper-item--passed-incomplete": this.passed && this.incomplete,
         };
-        const dotted = (h("span", { key: '9edca7be9297c15bb8dcd79d237539de201676c7' }, !this.clickDisabled ? (h("button", { class: "stzh-stepper-item__dotted", onClick: this.onDottedClick }, h("stzh-icon", { class: "stzh-stepper-item__dotted-icon", name: "more-horizontal" }))) : (h("div", { class: "stzh-stepper-item__dotted stzh-stepper-item__dotted--disabled" }, h("stzh-icon", { class: "stzh-stepper-item__dotted-icon", name: "more-horizontal" })))));
-        const content = (h("span", { key: '6b0b9a5c5de1d5b00b2d964e5065769e2c16a136' }, h("span", { key: '14862078e6a7c6ac14c3b53875daada325b32762', class: "stzh-stepper-item__number-block" }, this.icon ? (h("stzh-icon", { class: "stzh-stepper-item__user-icon", name: this.icon })) : (h("span", null, h("span", { class: "stzh-stepper-item__number" }, this.step), this.passed && !this.incomplete && (h("stzh-icon", { class: "stzh-stepper-item__icon", name: "checkmark" }))))), h("span", { key: 'e3b194b2c36122d9be4653e1ebcacd4fbf4fb466', ref: el => (this.text = el), class: "stzh-stepper-item__label-block" }, this.label ? this.label : h("slot", null))));
-        return (h(Host, { key: 'cd0072da45b67520a8617ff7fdd8eb180646903a', role: "listitem" }, h("div", { key: 'cae12a150b641dda90687d3c73c7e3a2a7f1206f', class: classes }, this.last && this.dotted && dotted, this.clickDisabled ? (h("div", { class: "stzh-stepper-item__unclickable", "aria-pressed": this.current ? "true" : "false" }, content)) : (h("button", { ref: el => (this.button = el), class: "stzh-stepper-item__button", "aria-pressed": this.current ? "true" : "false", disabled: (this.dotted && this.first) || this.disabled, onClick: this.onClick }, h("span", { class: "stzh-stepper-item__number-block" }, this.icon ? (h("stzh-icon", { class: "stzh-stepper-item__user-icon", name: this.icon })) : (h(Fragment, null, h("span", { class: "stzh-stepper-item__number" }, this.step), this.passed && !this.incomplete && (h("stzh-icon", { class: "stzh-stepper-item__icon", name: "checkmark" }))))), h("span", { ref: el => (this.text = el), class: "stzh-stepper-item__label-block" }, this.label ? this.label : h("slot", null)))), this.first && this.dotted && dotted)));
+        const dotted = (h("span", { key: '6189f4838f18c89c08894c16257485b24bc05de1' }, !this.clickDisabled ? (h("button", { class: "stzh-stepper-item__dotted", onClick: this.onDottedClick }, h("stzh-icon", { class: "stzh-stepper-item__dotted-icon", name: "more-horizontal" }))) : (h("div", { class: "stzh-stepper-item__dotted stzh-stepper-item__dotted--disabled" }, h("stzh-icon", { class: "stzh-stepper-item__dotted-icon", name: "more-horizontal" })))));
+        const content = (h("span", { key: 'b4395b3abd6297ddf7b894c07b1cb170b255f083' }, h("span", { key: '018a92abe41dadb86b36251580d346cd24849881', class: "stzh-stepper-item__number-block" }, this.icon ? (h("stzh-icon", { class: "stzh-stepper-item__user-icon", name: this.icon })) : (h("span", null, h("span", { class: "stzh-stepper-item__number" }, this.step), this.passed && !this.incomplete && (h("stzh-icon", { class: "stzh-stepper-item__icon", name: "checkmark" }))))), h("span", { key: 'b9369255ef299a08df7a9c440ce53ac70f7327d7', ref: el => (this.text = el), class: "stzh-stepper-item__label-block" }, this.label ? this.label : h("slot", null))));
+        return (h(Host, { key: '49ad7c0997a290425d16f6cd9e8819e183c4c3ec', role: "listitem" }, h("div", { key: 'd5a4738c3c7da576a0dea3941226a950494def2d', class: classes }, this.last && this.dotted && dotted, this.clickDisabled ? (h("div", { class: "stzh-stepper-item__unclickable", "aria-pressed": this.current ? "true" : "false" }, content)) : (h("button", { ref: el => (this.button = el), class: "stzh-stepper-item__button", "aria-pressed": this.current ? "true" : "false", disabled: (this.dotted && this.first) || this.disabled, onClick: this.onClick }, h("span", { class: "stzh-stepper-item__number-block" }, this.icon ? (h("stzh-icon", { class: "stzh-stepper-item__user-icon", name: this.icon })) : (h(Fragment, null, h("span", { class: "stzh-stepper-item__number" }, this.step), this.passed && !this.incomplete && (h("stzh-icon", { class: "stzh-stepper-item__icon", name: "checkmark" }))))), h("span", { ref: el => (this.text = el), class: "stzh-stepper-item__label-block" }, this.label ? this.label : h("slot", null)))), this.first && this.dotted && dotted)));
     }
     static get is() { return "stzh-stepper-item"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/stzh-sticky/stzh-sticky.js CHANGED Viewed

@@ -289,7 +289,7 @@ export class StzhSticky {
             [`stzh-sticky--position-${this.position}`]: !!this.position,
             [`stzh-sticky--${this.variant}`]: !!this.variant,
         };
-        return (h(Host, { key: '1706241fae8bcd61076470b735cd8b8dade1204e', "is-stuck": this.isStuckTop || this.isStuckBottom, "is-stuck-top": this.isStuckTop, "is-stuck-bottom": this.isStuckBottom }, h("div", { key: '3b1dc65f2134c6221b7b88be6cc08c0c11a0a618', class: classes }, h("div", { key: '0f0a556b2fe73aad45141b3faf903d7230834e94', ref: el => (this.spacerElement = el), class: "stzh-sticky__spacer" }), h("div", { key: 'b11924b9f78bbd641808c06162d5a115382fe3d5', ref: el => (this.stickyElement = el), class: "stzh-sticky__sticky" }, h("div", { key: '706b1c82ba90f21e209ebd07cd90a9d5dcdf2b99', class: "stzh-sticky__content" }, h("div", { key: '7eef943b440728245c91dfb18c15012206e1a49f', class: "stzh-sticky__content-inner" }, h("slot", { key: '9b2fe9e7c7d0413d6f456e8cb1656aefdb7596fd' })))))));
+        return (h(Host, { key: '9b572867025fe7948b142c6e1c4745b13e3d5642', "is-stuck": this.isStuckTop || this.isStuckBottom, "is-stuck-top": this.isStuckTop, "is-stuck-bottom": this.isStuckBottom }, h("div", { key: '782cba0a8bf9e4a1814d01ce03128637a4eff121', class: classes }, h("div", { key: 'ce0a8578095be4ab7e8b162dd572eaf90bcfc00c', ref: el => (this.spacerElement = el), class: "stzh-sticky__spacer" }), h("div", { key: 'd47acc6ac964498c2e9e3db0dbc7d307f1b09c08', ref: el => (this.stickyElement = el), class: "stzh-sticky__sticky" }, h("div", { key: '3178edfff30f6f072131ad0178aa4ebedc189b3a', class: "stzh-sticky__content" }, h("div", { key: '364359c8ade36314bf4c7d450c8002c0c3fe9f15', class: "stzh-sticky__content-inner" }, h("slot", { key: 'a5e2f2288c0db2e8f87e1ea0af0701c1bc4efbab' })))))));
     }
     static get is() { return "stzh-sticky"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/stzh-sticky-actions/stzh-sticky-actions.js CHANGED Viewed

@@ -57,7 +57,7 @@ export class StzhStickyActions {
             "has-active-scrollup": this.hasActiveScrollup,
             "is-not-slotted": !this.isSlotted,
         };
-        return (h(Host, { key: '2901bb758c042ddfe83fd7dafc83c29c5bc38145' }, h("div", { key: '18ed9ff3d57382a950bf5aea1574ac91ae4e9fb5', class: classes, "data-stzh-sticky-width-container": true }, h("stzh-sticky", { key: 'ef1cf3a143f8b30aa58c7c0d2cb9f83511c9dddc', name: "actions", class: "stzh-sticky-actions__sticky", position: "fixed", variant: "transparent", disableStickyTop: true }, h("div", { key: '0c953a8562a89f509ee61ad6e0e189103df13443', class: "stzh-sticky-actions__container" }, h("div", { key: 'aef3a0ad90a9f2a87f15751cf2e8a0f574d7e10c', class: "stzh-sticky-actions__chat-wrapper" }, h("slot", { key: '61f244e13f1efe4b4b4fde7081ac409eb7ff264d', name: "chat", onSlotchange: () => forceUpdate(this.element) })), h("div", { key: '91b68b1059b0cacf2abfb808c5675c50b1cc4f3c', ref: el => (this.scrollupElement = el), class: "stzh-sticky-actions__scrollup-wrapper" }, h("slot", { key: '9dd2b97f8f1ccb09d2326337616488b4cd09c993', name: "scrollup", onSlotchange: () => forceUpdate(this.element) })))))));
+        return (h(Host, { key: '94b4336a140150011cdfb23fa544bd42ff5acb24' }, h("div", { key: '8c000b622c56a8e1081996676a5422f0f83b067c', class: classes, "data-stzh-sticky-width-container": true }, h("stzh-sticky", { key: 'ea5e6717defda2a9d7bf05c8a4b1c507c4243c33', name: "actions", class: "stzh-sticky-actions__sticky", position: "fixed", variant: "transparent", disableStickyTop: true }, h("div", { key: '1b21cbfbc4e135dd77fd1a8ecc1e14ff9b5930f3', class: "stzh-sticky-actions__container" }, h("div", { key: 'f0fa72882a172c69786c619cbaa0a91416b2d81e', class: "stzh-sticky-actions__chat-wrapper" }, h("slot", { key: '4f21c2f9876f9a5584d61ade0c074560a78ecca0', name: "chat", onSlotchange: () => forceUpdate(this.element) })), h("div", { key: '58f5da063f5703026b56daa44cdf915c6568844e', ref: el => (this.scrollupElement = el), class: "stzh-sticky-actions__scrollup-wrapper" }, h("slot", { key: '1de83b1e4c8026e44239a56fa9495dd896f271dd', name: "scrollup", onSlotchange: () => forceUpdate(this.element) })))))));
     }
     static get is() { return "stzh-sticky-actions"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/stzh-table/stzh-table.js CHANGED Viewed

@@ -167,7 +167,7 @@ export class StzhTable {
             "has-action-or-search": actionButtonSlotUsed || searchSlotUsed,
             "has-header": headingSlotUsed || actionButtonSlotUsed || searchSlotUsed,
         };
-        return (h(Host, { key: '5c0a4a42c0e4c26a65efa93d307cd206e93e4566' }, h("div", { key: '650071076ff2b86f5b4a08e4749d3b5414ae74ea', class: classes }, h("div", { key: 'f1e1577a273576d45aaf3acaf5017e2e31a4d33d', class: "stzh-table__header" }, h("div", { key: '00e07305a4ea313557477b7958f877a7d50274a9', class: "stzh-table__heading" }, h("slot", { key: '2fe822dce64bfa9ea1f4ffed79b990657f344c3c', name: "heading" })), h("div", { key: 'da5d25046df08c697be923258da33ff958506989', class: "stzh-table__sub-header" }, h("div", { key: '0ecd9e657290dbab80b446e625f3195a90bea449', class: "stzh-table__search" }, h("slot", { key: '7cdce7b6f2c70249b3d49e02980572083f95f4a4', name: "search" })), h("div", { key: 'ae2c80e3ae5f5c79fdb6263866ad81db5d28a069', class: "stzh-table__action-button" }, h("slot", { key: 'fb7d9aafe717a86152800ea57f310a6ace88dba9', name: "action-button" })))), h("div", { key: 'c643337aaa4ddf8dc52098322b38df745f7600a2', class: "stzh-table__outer-wrapper" }, h("div", { key: '9a0c7ecdfe9d439bf2ebe818e7c7a0b8110c805a', ref: el => (this.tableWrapper = el), class: "stzh-table__wrapper", onScroll: this.handleScroll }, h("slot", { key: 'b54ccb03f9d55f2b2261a5c23389dfd49b10386f' }))), h("div", { key: 'f4e098292d09ee11ffd9379cfaa297bb4445d8d6', class: "stzh-table__list-wrapper" }, h("div", { key: 'c55b67301ec0567178cd5236039789f054ca38a5', class: "stzh-table__list-sort-wrapper" }, h("slot", { key: 'a1be7be3134c071747ea74485231e93adbdecbd0', name: "list-sort-by-dropdown" }), h("slot", { key: '9763b339db0de449b0ff28c6739a44c0c4372f13', name: "list-sort-direction-dropdown" })), h("slot", { key: 'bed2de17d6d0364d5f2f7fdb1a1931e54a9f17e7', name: "list" })), h("div", { key: '602be8d2c8c144a8a4ba081b5b8d383d701a89c2', class: "stzh-table__pagination-wrapper" }, h("slot", { key: '0e64a2f53b7c2c7a8c2b3a3c1606409ca2f2c651', name: "pagination" })))));
+        return (h(Host, { key: 'b7c305e061774652d5034017b5234cec307ffb87' }, h("div", { key: '5cb960793720bfe1a78373a0ed07a4d171f70d99', class: classes }, h("div", { key: 'e4fc72930e40bffed4a90cb5df1ac2a2d82c5f5c', class: "stzh-table__header" }, h("div", { key: '70129d619b702a1e736cee6fc0a0e9aadfe28fe1', class: "stzh-table__heading" }, h("slot", { key: '0688597ffe09510a03f1c62c659e6b0833818e7e', name: "heading" })), h("div", { key: '3e164c950bda9c450aed09801592c9c0be00bfa2', class: "stzh-table__sub-header" }, h("div", { key: '11bccb69b2da7ba2e6d3fa7811cb6a2f2b84d26b', class: "stzh-table__search" }, h("slot", { key: 'fa90149a4c252dc36883c6911dd45fd51473f32e', name: "search" })), h("div", { key: 'c0e3ff06918b507730a60c42fc97f53a713e13a1', class: "stzh-table__action-button" }, h("slot", { key: 'b0afacc535dbb4afd1bbb863fe60986ac67f78e0', name: "action-button" })))), h("div", { key: '7c07488d7d75123dda312700d04e40a3ad2641d4', class: "stzh-table__outer-wrapper" }, h("div", { key: '68f0f11d39c775fd943ef030b85b03bb1a5345e4', ref: el => (this.tableWrapper = el), class: "stzh-table__wrapper", onScroll: this.handleScroll }, h("slot", { key: 'c1eb0cf3bcbeb4489ccecc4e4828b8f03e16452e' }))), h("div", { key: 'b6e9043d50e8b90e373790b533b060f0aa9ca1b7', class: "stzh-table__list-wrapper" }, h("div", { key: '4230c12ed9f4befb48698bb28a704454dfb3eadd', class: "stzh-table__list-sort-wrapper" }, h("slot", { key: '77ab64c99bd5224798d4e91bba28b7347ceb6c95', name: "list-sort-by-dropdown" }), h("slot", { key: '950284fc1e06e4704251818c2fee984b722dde0e', name: "list-sort-direction-dropdown" })), h("slot", { key: '70d25037a9afa5236593de24431605476689c4c9', name: "list" })), h("div", { key: '0174eb70b8a3d09007a79482fbba91c6c9ad4d98', class: "stzh-table__pagination-wrapper" }, h("slot", { key: 'd1a6aa881d0b132a8186446c1d1b14b8cda6d11b', name: "pagination" })))));
     }
     static get is() { return "stzh-table"; }
     static get originalStyleUrls() {

package/dist/collection/components/stzh-tag/stzh-tag.js CHANGED Viewed

@@ -81,7 +81,7 @@ export class StzhTag {
             [`stzh-tag--${this.nonInteractive ? "not" : "is"}-interactive`]: true,
         };
         const Tag = this.nonInteractive ? "div" : this.href ? "a" : "button";
-        return (h(Host, { key: 'e245949084a121262460c8f6300ee82255cd40ec', tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { key: 'baaac8113b09f16293ccd615cb8b8e5b710255ad', class: classes }, this.href ? (h(Tag, { ref: el => (this.tag = el), class: {
+        return (h(Host, { key: '18b13050db1bb0d7bb10a21a84534c1627137c57', tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { key: '57a7bb1a02694ea343df1402086a3080dd1f2a9c', class: classes }, this.href ? (h(Tag, { ref: el => (this.tag = el), class: {
                 "stzh-tag__button": true,
                 "is-button": !this.nonInteractive && !this.href,
                 "is-link": !this.nonInteractive && !!this.href,

package/dist/collection/components/stzh-text/stzh-text.js CHANGED Viewed

@@ -25,7 +25,7 @@ export class StzhText {
         this.sizeUltra = "inherit";
     }
     render() {
-        return (h(Host, { key: 'd450c2a2df5504dd70142892aad9a1d81bb47729' }, h("div", { key: 'e03fd12f42bd1f632de9775cbd55ed3f3087a52a', class: {
+        return (h(Host, { key: '28e2e7b5a061565551898f4d509ba0b7908f592b' }, h("div", { key: '66cdf412433d270244f654af9d633bcc13a46fb8', class: {
                 "stzh-text": true,
                 "stzh-text--is-lead": this.lead,
                 [`stzh-text--font-${this.font}`]: !!this.font,
@@ -35,7 +35,7 @@ export class StzhText {
                 [`stzh-text--size-medium-${this.sizeMedium}`]: !!this.sizeMedium,
                 [`stzh-text--size-large-${this.sizeLarge}`]: !!this.sizeLarge,
                 [`stzh-text--size-ultra-${this.sizeUltra}`]: !!this.sizeUltra,
-            } }, h("div", { key: '49cbea83d2e708948392c0e571faec5fe7f6f906', class: "stzh-text__text" }, h("div", { key: 'f9d771ee233fdf095a15b242559e261dea4ed8a3', class: "stzh-text__icon" }, h("slot", { key: '264dfc25a49f2efa1bd3c79f19e2f8af4c08f858', name: "icon" })), h("div", { key: '7e459045623795dfb2a455111ab5bb249be4b814', class: "stzh-text__text-inner" }, h("slot", { key: '4e6d1126d32c519b9d59d83d919a036229e4d69e' }))))));
+            } }, h("div", { key: 'b0f364a885dea731283b76d14023490e34531417', class: "stzh-text__text" }, h("div", { key: '2f6ffe17910f84a2092f51a51151ff12f0e70102', class: "stzh-text__icon" }, h("slot", { key: '9ed2b8653b000a1eac82ae1476e30840057f2757', name: "icon" })), h("div", { key: '43b231aebbf9ce3fd072ffd087e4309b7f050299', class: "stzh-text__text-inner" }, h("slot", { key: 'ab35e6f3f752fe416f3784c066eb7f23233a536d' }))))));
     }
     static get is() { return "stzh-text"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/stzh-timeline/stzh-timeline.js CHANGED Viewed

@@ -101,7 +101,7 @@ export class StzhTimeline {
         const classes = {
             "stzh-timeline": true,
         };
-        return (h(Host, { key: '0fe07001d14798e4ab04d8a05b39585407d289fc' }, h("div", { key: 'f9693884d8e10039acac34dc6ee65b6483c53f45', class: classes, role: "list" }, h("slot", { key: 'd6445805d0d20a72ae108083e69a14b0a724a40e', onSlotchange: this.handleSlotchange }))));
+        return (h(Host, { key: '38ded3ad998018d89b78bf2adf63ee72f0f5566a' }, h("div", { key: 'fb5e9f85ea412351647341d084849ad59d553e08', class: classes, role: "list" }, h("slot", { key: '1dc0ba42bb7234ec3c3c2dc3301900ed6efad299', onSlotchange: this.handleSlotchange }))));
     }
     static get is() { return "stzh-timeline"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/stzh-timeline-item/stzh-timeline-item.js CHANGED Viewed

@@ -258,7 +258,7 @@ export class StzhTimelineItem {
             "stzh-timeline-item--is-foldable": this._foldable,
             "stzh-timeline-item--is-completed": this.completed,
         };
-        return (h(Host, { key: 'a388d5b9a0c5ca3e1c12cd60765ba43bafd47285', role: "listitem", "is-foldable": this._foldable, tabindex: this.disabled ? null : this.rootTabindex, onFocus: this.onRootFocus }, h("div", { key: 'e1972a06367cddd096efb6250dbee1a8e92a798a', class: classes }, h(Heading, { key: 'e0a6b4a26028253853defcdde705a6e802277ae3', id: `${this.timelineItemId}-header`, class: "stzh-timeline-item__heading", onClick: this.handleHeaderClick }, h("button", { key: '0763a733982e567cad272ab38977802ae4994b55', ref: el => (this.buttonElement = el), class: "stzh-timeline-item__button", "aria-controls": `${this.timelineItemId}-content`, "aria-expanded": `${this.open ? "true" : "false"}`, "aria-disabled": !this._foldable ? "true" : "false", disabled: this.disabled, onFocus: this.onFocus, onBlur: this.onBlur, onKeyDown: this.onButtonKeydown, type: "button", "s-object-id": this.analyticsId || this.heading }, h("span", { key: 'b6bfadb0ede19ce0b5a58b04104dc9fff5915415', class: "stzh-timeline-item__bullet" }, hasIcon || this.completed ? (h("span", { class: "stzh-timeline-item__bullet-icon-wrapper" }, this.icon || this.completed ? (h("stzh-icon", { class: "stzh-timeline-item__bullet-icon", name: this.icon ? this.icon : "checkmark" })) : (h("slot", { name: "icon" })))) : (h("span", { class: "stzh-timeline-item__bullet-text" }, this.step)), (this.badge || this.badgeEmpty) && (h("stzh-badge", { key: 'efe2f47efe47ec11be7feb0c6b5a5dec481083a5', class: "stzh-timeline-item__badge", label: this.badge, type: this.badgeType }))), h("div", { key: '79e1edb558a1b6a1c4bde5d8958e0712e099584e', class: "stzh-timeline-item__button-inner" }, h("span", { key: '36b64ea865e5bbfc4696d98cce1b313dcacd9608', class: "stzh-timeline-item__button-text" }, h("span", { key: '1799cab0e202d69f9c929487cdbe7872dbea6b8e', class: "stzh-timeline-item__heading-text" }, this.heading), h("span", { key: 'e99a6075e50b65995879517b661883289a567e27', class: "stzh-timeline-item__description" }, this.description)), this._foldable && h("span", { key: '7b10dd471b5c50f4e7fef5bd92ec818e3f84f9fb', class: "stzh-timeline-item__button-icon" })))), h("div", { key: '0926d3141066dc93d38d28f83961c140a45030b1', id: `${this.timelineItemId}-content`, ref: el => (this.bodyElement = el), class: "stzh-timeline-item__content", "aria-labelledby": `${this.timelineItemId}-header`, role: "region", onKeyDown: this.onContentKeydown }, h("div", { key: 'a89966b92e35694772670684675ff7e16c4b6d39', class: "stzh-timeline-item__content-inner" }, h("slot", { key: '9c7957d52e91ccf7f4744decbb2090f7ec2b678d' }))))));
+        return (h(Host, { key: '677f78ed10088e5114c62f84ddc010e54b06a4e7', role: "listitem", "is-foldable": this._foldable, tabindex: this.disabled ? null : this.rootTabindex, onFocus: this.onRootFocus }, h("div", { key: 'fe999f984ccdf2b3ca2b3995906c31a34b926685', class: classes }, h(Heading, { key: 'efe939514af7fe42c278ce45eef458a0aaaea240', id: `${this.timelineItemId}-header`, class: "stzh-timeline-item__heading", onClick: this.handleHeaderClick }, h("button", { key: '9b3593e0c0fcc402c6ae980fad8238ff67c040ae', ref: el => (this.buttonElement = el), class: "stzh-timeline-item__button", "aria-controls": `${this.timelineItemId}-content`, "aria-expanded": `${this.open ? "true" : "false"}`, "aria-disabled": !this._foldable ? "true" : "false", disabled: this.disabled, onFocus: this.onFocus, onBlur: this.onBlur, onKeyDown: this.onButtonKeydown, type: "button", "s-object-id": this.analyticsId || this.heading }, h("span", { key: '0139b83aa2ac6edd3f413c1867dba981d776cd44', class: "stzh-timeline-item__bullet" }, hasIcon || this.completed ? (h("span", { class: "stzh-timeline-item__bullet-icon-wrapper" }, this.icon || this.completed ? (h("stzh-icon", { class: "stzh-timeline-item__bullet-icon", name: this.icon ? this.icon : "checkmark" })) : (h("slot", { name: "icon" })))) : (h("span", { class: "stzh-timeline-item__bullet-text" }, this.step)), (this.badge || this.badgeEmpty) && (h("stzh-badge", { key: '4ac748ce27a9c6db4872dac9c3f29bcb1e6e5ea0', class: "stzh-timeline-item__badge", label: this.badge, type: this.badgeType }))), h("div", { key: 'd8463fac09c64f8bbb161e9b3c4a14c6b013110b', class: "stzh-timeline-item__button-inner" }, h("span", { key: 'a6c81e61e98877bc69a9b3ef48ce7edf93525ce0', class: "stzh-timeline-item__button-text" }, h("span", { key: '9d0777ff0404049865fb23f7997d7de6fe476fba', class: "stzh-timeline-item__heading-text" }, this.heading), h("span", { key: '0c31fa3de25a2455372b148edada1bce1f5442f0', class: "stzh-timeline-item__description" }, this.description)), this._foldable && h("span", { key: 'fd62bbdafa3e6a7cff17e09cb2f9d0b50dfb0b52', class: "stzh-timeline-item__button-icon" })))), h("div", { key: '1224b30c677e9d57d11a7cc60fa30ce64184b940', id: `${this.timelineItemId}-content`, ref: el => (this.bodyElement = el), class: "stzh-timeline-item__content", "aria-labelledby": `${this.timelineItemId}-header`, role: "region", onKeyDown: this.onContentKeydown }, h("div", { key: '119936319f4e83e51c360a62a92abc7b78e4e9d1', class: "stzh-timeline-item__content-inner" }, h("slot", { key: '680707bad6dd9e22cc9a3604bc83f1da371136c6' }))))));
     }
     static get is() { return "stzh-timeline-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/stzh-timepicker/stzh-timepicker.js CHANGED Viewed

@@ -87,7 +87,7 @@ export class StzhTimepicker {
         const classes = {
             "stzh-timepicker": true,
         };
-        return (h(Host, { key: '3dd9f2b27858d51a98ce41051808c1d8be807a4c', tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { key: '1b7b7868dc840c4aa5ac912f7f355119330a6424', class: classes }, h("stzh-dropdown", { key: 'a4330107e2686eef2740b7ef92cf7ba3302af180', open: this.open, class: "stzh-timepicker__dropdown", iconAngle: "clock", label: this.label, ref: el => (this.input = el), onStzhChange: this.onDropdownChange, options: this._dropdownOptions, items: [this.value], required: this.required, disabled: this.disabled, description: this.description, descriptionLong: this.descriptionLong, error: this.error, popoverPlacement: this.popoverPlacement, a11yDescribedby: this.a11yDescribedby, name: this.name, size: this.size, invalid: this.invalid, hideOptional: this.hideOptional }))));
+        return (h(Host, { key: 'f79445073be60af1b13bfe06bb4412642743b256', tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { key: '0252db2b477b6e7e7beb957e0475a712860df939', class: classes }, h("stzh-dropdown", { key: '8464d09c31563e33d6f0a0b65e2019c95c92e426', open: this.open, class: "stzh-timepicker__dropdown", iconAngle: "clock", label: this.label, ref: el => (this.input = el), onStzhChange: this.onDropdownChange, options: this._dropdownOptions, items: [this.value], required: this.required, disabled: this.disabled, description: this.description, descriptionLong: this.descriptionLong, error: this.error, popoverPlacement: this.popoverPlacement, a11yDescribedby: this.a11yDescribedby, name: this.name, size: this.size, invalid: this.invalid, hideOptional: this.hideOptional }))));
     }
     static get is() { return "stzh-timepicker"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/stzh-toast/stzh-toast.js CHANGED Viewed

@@ -169,10 +169,10 @@ export class StzhToast {
             "stzh-toast--has-close-hidden": this.hideClose,
             [`stzh-toast--type-${this.type}`]: !!this.type,
         };
-        return (h(Host, { key: '446b49e231a058653d3736c4a7a24365e7946505' }, h("div", { key: 'b8c82e172f2a3fb99abf66762f91e9febd56c901', ref: el => (this.rootElement = el), class: classes }, h("div", { key: '48357da05b863ddb5546b0c5424a34fde8fe8e1c', class: "stzh-toast__content" }, h("div", { key: '36bd30993042f504aafc5f9b23f5579192c1014d', class: "stzh-toast__icon-wrapper" }, h("stzh-icon", { key: '99d7cbcce440e9873efd79045cbd8e076e51b6ca', class: "stzh-toast__icon", name: (this.type === "info" && "info-help-filled") ||
+        return (h(Host, { key: '4c1c4cdc64fe10891d3a7ded71e82ea8fb97ff3f' }, h("div", { key: '2ebebb2a6ccda97cef30090b87b0b9b9ea3dc728', ref: el => (this.rootElement = el), class: classes }, h("div", { key: 'ad66296b97fc4b8fe79823363108a5a4b2788fc4', class: "stzh-toast__content" }, h("div", { key: '355d0723f6294bc707e7007be0375cfcdfc28832', class: "stzh-toast__icon-wrapper" }, h("stzh-icon", { key: '827bcd937f4323c3937ede281c2259f452bc2a1e', class: "stzh-toast__icon", name: (this.type === "info" && "info-help-filled") ||
                 (this.type === "success" && "checkmark-circle-filled") ||
                 (this.type === "warning" && "important-warning-filled") ||
-                (this.type === "error" && "warning-filled") })), h("div", { key: 'a0a387bda275dfdbdb810bfe9b4a1fa04d1af3a1', class: "stzh-toast__text-wrapper" }, h("div", { key: '4ca9c2d4b985d4252aefc8855397c39f15ee3213', class: "stzh-toast__label" }, this.label), h("div", { key: '39e0201d434143a083dfe9bb63073600ef331b9f', class: "stzh-toast__link" }, h("slot", { key: '7c50d8dd47044590ef5a232d2286a85d8a8da647', name: "link", onSlotchange: this.handleLinkSlotchange })))), !this.hideClose && (h("div", { key: '3506c634657d88e3b57b306c9ae19416e2ea49bb', class: "stzh-toast__close-wrapper" }, h("stzh-button", { key: '7be034a61ffdb0c3c65a7a135537416edced7604', class: "stzh-toast__close", onClick: this.onCloseButtonClick, label: this.localization.close, variant: "tertiary", size: "small", iconOnly: true, icon: "close-big" }))))));
+                (this.type === "error" && "warning-filled") })), h("div", { key: 'c6d067a69990c35e8f62ab512350a7bf92adf771', class: "stzh-toast__text-wrapper" }, h("div", { key: '54ce50bd06b48edf6f5cb5d707c2b0709ab1af19', class: "stzh-toast__label" }, this.label), h("div", { key: '1f5b83d94cd519a0e3a211cdd2b5f59bab9782ee', class: "stzh-toast__link" }, h("slot", { key: '47709f8c4029e598692fc229058fabfab3f31f3c', name: "link", onSlotchange: this.handleLinkSlotchange })))), !this.hideClose && (h("div", { key: '4c925104f8f7c0b64cd435cb5cd649ad2cac8b87', class: "stzh-toast__close-wrapper" }, h("stzh-button", { key: '8603abac79c8874eef356847caebee04b2b4562a', class: "stzh-toast__close", onClick: this.onCloseButtonClick, label: this.localization.close, variant: "tertiary", size: "small", iconOnly: true, icon: "close-big" }))))));
     }
     static get is() { return "stzh-toast"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/stzh-toastbar/stzh-toastbar.js CHANGED Viewed

@@ -145,7 +145,7 @@ export class StzhToastbar {
         const classes = {
             "stzh-toastbar": true,
         };
-        return (h(Host, { key: '7460a6148cb0e08e92a1bb594e0c81f438844b26' }, h("div", { key: '6ae7db9674257007e24f428cf51889f24cc2854d', class: classes }, h("slot", { key: '38ee0dc0da0aebe58ff6925d2aa3c2a93324f3b1', onSlotchange: this.handleSlotchange }))));
+        return (h(Host, { key: '5034ae6c3038f1aea0dc54e7b8b5d2dfc03b4e02' }, h("div", { key: '3ed760bfe5f3861b8f77784816e8028d0dc93b5c', class: classes }, h("slot", { key: 'b088a5aac35d1af50d648d7cf9dea80785707de1', onSlotchange: this.handleSlotchange }))));
     }
     static get is() { return "stzh-toastbar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/stzh-toggle/stzh-toggle.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { Host, h } from "@stencil/core";
-import { hasSlot } from "../../utils/utils";
+import { hasDefaultSlotContent, hasSlot } from "../../utils/utils";
 import { StzhInputDescription } from "../stzh-input/stzh-input-description";
 let toggleCounter = 0;
 /**
@@ -31,6 +31,18 @@ export class StzhToggle {
         this.labelPosition = "right";
         /** Id for element which describes the input (this will be overwritten if description prop or slot is used) */
         this.a11yDescribedby = "";
+        /**
+         * Whether the component has meaningful default-slot content.
+         * Becomes obsolete with the implementation of PDESI-1908.
+         */
+        this.hasDefaultSlot = false;
+        /**
+         * Indicates whether default-slot content detection has run at least once.
+         * Used to avoid rendering state-dependent markup before the slot content
+         * has been evaluated.
+         * Becomes obsolete with the implementation of PDESI-1908.
+         */
+        this.hasResolvedDefaultSlot = false;
         this.focusedByInput = false;
         this.handleReset = async () => {
             this.checked = this.defaultChecked;
@@ -75,6 +87,19 @@ export class StzhToggle {
                 originalEvent: event,
             });
         };
+        /**
+         * Re-evaluates default-slot content and updates the related render state.
+         * Becomes obsolete with implementation of PDESI-1908.
+         */
+        this.updateDefaultSlotState = () => {
+            const hasDefaultSlot = hasDefaultSlotContent(this.element, ["stzh-toggle"]);
+            if (this.hasDefaultSlot !== hasDefaultSlot) {
+                this.hasDefaultSlot = hasDefaultSlot;
+            }
+            if (!this.hasResolvedDefaultSlot) {
+                this.hasResolvedDefaultSlot = true;
+            }
+        };
     }
     resetListener(event) {
         if (event.target.contains(this.element)) {
@@ -104,6 +129,9 @@ export class StzhToggle {
             this._error = [];
         }
     }
+    componentDidLoad() {
+        this.updateDefaultSlotState();
+    }
     async componentWillLoad() {
         this.inputId = `stzh-toggle-${toggleCounter++}`;
         this.defaultChecked = typeof this.defaultChecked === "boolean" ? this.defaultChecked : this.checked;
@@ -117,7 +145,8 @@ export class StzhToggle {
         const descriptionUsed = hasSlot(this.element, "description") || !!this.description;
         const descriptionLongUsed = hasSlot(this.element, "description-long") || !!this.descriptionLong;
         const errorUsed = hasSlot(this.element, "error") || ((_a = this._error) === null || _a === void 0 ? void 0 : _a.length) > 0;
-        const labelUsed = !!this.label || hasSlot(this.element) || descriptionLongUsed;
+        const labelUsed = !!this.label || this.hasDefaultSlot;
+        const labelWrapperUsed = !this.hasResolvedDefaultSlot || labelUsed || descriptionLongUsed;
         const classes = {
             "stzh-toggle": true,
             "stzh-toggle--has-error": errorUsed,
@@ -128,11 +157,11 @@ export class StzhToggle {
             "stzh-toggle--has-description-long": descriptionLongUsed,
             [`stzh-toggle--has-label-${this.labelPosition}`]: !!this.labelPosition,
         };
-        return (h(Host, { key: '71703076957012244d99e5bfe9eaae91dfd3136b', "is-invalid": this.invalid || errorUsed, tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { key: '5c3cdb7ff6195fb6dbf844110f7f2fc15dd0e5b9', class: classes }, h("label", { key: 'e7207ccb9b8ef7f1ee798f8008a777c14f83a294', class: "stzh-toggle__field-wrapper" }, h("input", { key: '66fa0d14e799bf6fdc0ec19f691dfac483884132', class: "stzh-toggle__input", ref: el => (this.input = el), type: "checkbox", id: this.inputId, name: this.name, value: this.value, disabled: this.disabled, "aria-describedby": `${this.inputId}-description ${this.a11yDescribedby}`, "aria-required": this.required ? "true" : "false", "aria-invalid": this.invalid ? "true" : "false", checked: this.checked, defaultChecked: this.defaultChecked, onInput: this.onInput, onFocus: this.onFocus, onBlur: this.onBlur }), h("div", { key: '6260219a827eb1706ad4359a065d17ce28d83881', class: "stzh-toggle__mark" }, h("div", { key: 'c31d157867858c2ae6c449a53143886992250fd6', class: "stzh-toggle__check" })), labelUsed && (h("div", { key: '4176627fde0fdb89e848d9300a1bd22fccf678b2', class: "stzh-toggle__label" }, h("span", { key: 'bb2056d98e40d6c9780d622c639455f7a980f0e1', class: "stzh-toggle__label-text" }, this.label ? this.label : h("slot", null), !this.hideOptional && (h("span", { key: '1bae137c2d20f921064d2bc8f27307e53babd3cc', class: "stzh-toggle__marker" }, h("span", { key: '19a4adea55ed3943bda5115c457e88168b05925c', class: "stzh-toggle__marker-symbol", "aria-hidden": "true" }, this.required
+        return (h(Host, { key: 'd09370bcc5b0fc74b920e7c961ec559c6664a5db', "is-invalid": this.invalid || errorUsed, tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { key: '1c2ade57562614976ca6d5255dc28fddd6fbaa29', class: classes }, labelWrapperUsed && (h("label", { key: '63c1b6246465460174cd43e41e776b22278b501b', class: "stzh-toggle__field-wrapper" }, h("input", { key: 'fbb0a7957f6c51feac4fa89a0860b468a70dfad4', class: "stzh-toggle__input", ref: el => (this.input = el), type: "checkbox", id: this.inputId, name: this.name, value: this.value, disabled: this.disabled, "aria-describedby": `${this.inputId}-description ${this.a11yDescribedby}`, "aria-required": this.required ? "true" : "false", "aria-invalid": this.invalid ? "true" : "false", checked: this.checked, defaultChecked: this.defaultChecked, onInput: this.onInput, onFocus: this.onFocus, onBlur: this.onBlur }), h("div", { key: '8cf2e9c5a05d2e049141b7663d9cd6a0902959a7', class: "stzh-toggle__mark" }, h("div", { key: '8cc1f7ef724c203cd2ad84360c88a98ca105eb6c', class: "stzh-toggle__check" })), h("div", { key: '0f765e3078b407d190c17208a64ef81e1b580562', class: "stzh-toggle__label" }, h("span", { key: '76c967e71cc27b310834af1f017a59f9b551e9ed', class: "stzh-toggle__label-text" }, this.label ? this.label : h("slot", { onSlotchange: this.updateDefaultSlotState }), labelUsed && !this.hideOptional && (h("span", { key: 'f39f2b1986afb9d72053ee6a125129b7264a10fd', class: "stzh-toggle__marker" }, h("span", { key: '8aab2815bc08b3ad5f1c4db3f1c85f3ac9150981', class: "stzh-toggle__marker-symbol", "aria-hidden": "true" }, this.required
             ? this.localization.$globals.requiredFieldMarker
-            : this.localization.$globals.optionalFieldMarker), h("span", { key: '3c54f5386396ffc9e1e52b8730aae92dc3f228e9', class: "stzh-toggle__marker-text" }, this.required
+            : this.localization.$globals.optionalFieldMarker), h("span", { key: '6266f4640bfc578cbcdf5561cfca0eda3b35916f', class: "stzh-toggle__marker-text" }, this.required
             ? this.localization.$globals.requiredFieldText
-            : this.localization.$globals.optionalFieldText)))), descriptionLongUsed && (h(StzhInputDescription, { key: '7cfd564610bd66d61b66ab70bbcaed301252de35', classPrefix: "stzh-toggle", id: `${this.inputId}-description-long`, descriptionLong: this.descriptionLong, descriptionLongTitle: this.descriptionLongTitle, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel, showError: false, showDescriptionText: false }))))), (errorUsed || descriptionUsed) && (h(StzhInputDescription, { key: '02c34d582606de57abafad95ff723d014f4a8bd2', classPrefix: "stzh-toggle", id: `${this.inputId}-description`, error: this._error, description: this.description, descriptionLongUsed: false })))));
+            : this.localization.$globals.optionalFieldText)))), descriptionLongUsed && (h(StzhInputDescription, { key: 'fe36e454c45a382a5cec894b28bccda1465a3cf8', classPrefix: "stzh-toggle", id: `${this.inputId}-description-long`, descriptionLong: this.descriptionLong, descriptionLongTitle: this.descriptionLongTitle, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel, showError: false, showDescriptionText: false }))))), (errorUsed || descriptionUsed) && (h(StzhInputDescription, { key: '96d61ed45195149288f4b44d3251d8a80029eb4c', classPrefix: "stzh-toggle", id: `${this.inputId}-description`, error: this._error, description: this.description, descriptionLongUsed: false })))));
     }
     static get is() { return "stzh-toggle"; }
     static get encapsulation() { return "scoped"; }
@@ -468,6 +497,12 @@ export class StzhToggle {
             }
         };
     }
+    static get states() {
+        return {
+            "hasDefaultSlot": {},
+            "hasResolvedDefaultSlot": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "stzhChange",

package/dist/collection/components/stzh-toggle/stzh-toggle.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"stzh-toggle.js","sourceRoot":"","sources":["../../../../src/components/stzh-toggle/stzh-toggle.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Host, Component, Prop, Event, EventEmitter, Element, h, Watch, Listen } from \"@stencil/core\";\n\nimport { StzhToggleChangeEvent, StzhToggleFocusEvent, StzhToggleBlurEvent } from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../index\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\nlet toggleCounter = 0;\n\n/*\n @slot - Slot for label content\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot description-long-title - Slot for long description title (in popover) / instead of descriptionLongTitle or description property\n * @slot error - Slot for error\n /\n@Component({\n tag: \"stzh-toggle\",\n styleUrl: \"stzh-toggle.scss\",\n scoped: true,\n})\nexport class StzhToggle {\n /* Translation strings /\n @Prop() localization: StzhLocaleComponent;\n\n /* Whether the toggle is disabled /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* Name of the input element /\n @Prop({ reflect: true }) name: string = \"\";\n\n /* Value of the input element /\n @Prop({ mutable: true }) value: string = \"\";\n\n /* Invalid status /\n @Prop({ reflect: true }) invalid: boolean = false;\n\n /* Required status /\n @Prop({ reflect: true }) required: boolean = false;\n\n /* Hide `(optional)` label (or use `required` inside form to hide it) /\n @Prop({ reflect: true }) hideOptional: boolean = false;\n\n /* Checked status /\n @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n /* Default checked (used by reset) /\n @Prop({ mutable: true }) defaultChecked: boolean;\n\n /* Label /\n @Prop() label: string = \"\";\n\n /* Position of label /\n @Prop({ reflect: true }) labelPosition: \"right\" \| \"left\" = \"right\";\n\n /* Description message (use description slot as alternative) /\n @Prop() description: string;\n\n /* Long description message appearing in a popover (use description-long slot as alternative) /\n @Prop() descriptionLong: string;\n\n /\n Do not use this property. It will be deprecated with the next major release.\n * Long description title appearing in a popover (use description-long-title slot as or description property alternative) /\n @Prop() descriptionLongTitle: string;\n\n /* One or multiple error message (use error slot as alternative) /\n @Prop() error: string \| string[];\n private _error: string[];\n\n /* Id for element which describes the input (this will be overwritten if description prop or slot is used) /\n @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n /* Change event /\n @Event() stzhChange: EventEmitter<StzhToggleChangeEvent>;\n\n /* Focus event /\n @Event() stzhFocus: EventEmitter<StzhToggleFocusEvent>;\n\n /* Input blur event */\n @Event() stzhBlur: EventEmitter<StzhToggleBlurEvent>;\n\n @Listen(\"reset\", { target: \"document\" })\n resetListener(event: Event) {\n if ((event.target as HTMLElement).contains(this.element)) {\n requestAnimationFrame(() => {\n this.handleReset();\n });\n }\n }\n\n @Watch(\"error\")\n errorWatcher(newValue: string \| string[]) {\n if (typeof newValue === \"string\") {\n try {\n this._error = JSON.parse(newValue);\n } catch (e) {\n if (newValue) {\n this._error = [newValue];\n } else {\n this._error = [];\n }\n }\n } else if (newValue) {\n this._error = newValue;\n } else {\n this._error = [];\n }\n }\n\n @Element() element: HTMLStzhRadioElement;\n\n private input: HTMLInputElement;\n private inputId: string;\n private focusedByInput: boolean = false;\n\n private handleReset = async () => {\n this.checked = this.defaultChecked;\n };\n\n private onInput = (event: InputEvent) => {\n this.checked = this.input.checked;\n this.stzhChange.emit({\n component: \"stzh-toggle\",\n originalEvent: event,\n value: this.value,\n checked: this.checked,\n });\n };\n\n private onRootFocus = () => {\n if (!this.focusedByInput) {\n this.input.focus();\n }\n\n this.focusedByInput = false;\n };\n\n private onFocus = (event: FocusEvent) => {\n this.focusedByInput = true;\n\n const focusEvent = new FocusEvent(\"focus\", {\n view: window,\n bubbles: false,\n cancelable: false,\n });\n\n this.element.dispatchEvent(focusEvent);\n this.stzhFocus.emit({\n component: \"stzh-toggle\",\n originalEvent: event,\n });\n };\n\n private onBlur = (event: FocusEvent) => {\n const blurEvent = new FocusEvent(\"blur\", {\n view: window,\n bubbles: false,\n cancelable: false,\n });\n\n this.element.dispatchEvent(blurEvent);\n this.stzhBlur.emit({\n component: \"stzh-toggle\",\n originalEvent: event,\n });\n };\n\n async componentWillLoad() {\n this.inputId = `stzh-toggle-${toggleCounter++}`;\n\n this.defaultChecked = typeof this.defaultChecked === \"boolean\" ? this.defaultChecked : this.checked;\n\n this.errorWatcher(this.error);\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"toggle\");\n }\n }\n\n render() {\n const descriptionUsed = hasSlot(this.element, \"description\") \|\| !!this.description;\n const descriptionLongUsed = hasSlot(this.element, \"description-long\") \|\| !!this.descriptionLong;\n const errorUsed = hasSlot(this.element, \"error\") \|\| this._error?.length > 0;\n\n const labelUsed = !!this.label \|\| hasSlot(this.element) \|\| descriptionLongUsed;\n\n const classes = {\n \"stzh-toggle\": true,\n \"stzh-toggle--has-error\": errorUsed,\n \"stzh-toggle--is-required\": this.required,\n \"stzh-toggle--is-invalid\": this.invalid \|\| errorUsed,\n \"stzh-toggle--is-disabled\": this.disabled,\n \"stzh-toggle--has-description\": descriptionUsed,\n \"stzh-toggle--has-description-long\": descriptionLongUsed,\n [`stzh-toggle--has-label-${this.labelPosition}`]: !!this.labelPosition,\n };\n\n return (\n <Host is-invalid={this.invalid \|\| errorUsed} tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n <div class={classes}>\n <label class=\"stzh-toggle__field-wrapper\">\n <input\n class=\"stzh-toggle__input\"\n ref={el => (this.input = el as HTMLInputElement)}\n type=\"checkbox\"\n id={this.inputId}\n name={this.name}\n value={this.value}\n disabled={this.disabled}\n aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n aria-required={this.required ? \"true\" : \"false\"}\n aria-invalid={this.invalid ? \"true\" : \"false\"}\n checked={this.checked}\n defaultChecked={this.defaultChecked}\n onInput={this.onInput}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n />\n <div class=\"stzh-toggle__mark\">\n <div class=\"stzh-toggle__check\"></div>\n </div>\n {labelUsed && (\n <div class=\"stzh-toggle__label\">\n <span class=\"stzh-toggle__label-text\">\n {this.label ? this.label : <slot></slot>}\n\n {!this.hideOptional && (\n <span class=\"stzh-toggle__marker\">\n <span class=\"stzh-toggle__marker-symbol\" aria-hidden=\"true\">\n {this.required\n ? this.localization.$globals.requiredFieldMarker\n : this.localization.$globals.optionalFieldMarker}\n </span>\n <span class=\"stzh-toggle__marker-text\">\n {this.required\n ? this.localization.$globals.requiredFieldText\n : this.localization.$globals.optionalFieldText}\n </span>\n </span>\n )}\n </span>\n\n {descriptionLongUsed && (\n <StzhInputDescription\n classPrefix=\"stzh-toggle\"\n id={`${this.inputId}-description-long`}\n descriptionLong={this.descriptionLong}\n descriptionLongTitle={this.descriptionLongTitle}\n descriptionLongUsed={descriptionLongUsed}\n moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n showError={false}\n showDescriptionText={false}\n />\n )}\n </div>\n )}\n </label>\n {(errorUsed \|\| descriptionUsed) && (\n <StzhInputDescription\n classPrefix=\"stzh-toggle\"\n id={`${this.inputId}-description`}\n error={this._error}\n description={this.description}\n descriptionLongUsed={false}\n />\n )}\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"stzh-toggle.js","sourceRoot":"","sources":["../../../../src/components/stzh-toggle/stzh-toggle.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Host, Component, Prop, Event, EventEmitter, Element, h, Watch, Listen, State } from \"@stencil/core\";\n\nimport { StzhToggleChangeEvent, StzhToggleFocusEvent, StzhToggleBlurEvent } from \"../../index\";\n\nimport { hasDefaultSlotContent, hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../index\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\nlet toggleCounter = 0;\n\n/*\n @slot - Slot for label content\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot description-long-title - Slot for long description title (in popover) / instead of descriptionLongTitle or description property\n * @slot error - Slot for error\n /\n@Component({\n tag: \"stzh-toggle\",\n styleUrl: \"stzh-toggle.scss\",\n scoped: true,\n})\nexport class StzhToggle {\n /* Translation strings /\n @Prop() localization: StzhLocaleComponent;\n\n /* Whether the toggle is disabled /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* Name of the input element /\n @Prop({ reflect: true }) name: string = \"\";\n\n /* Value of the input element /\n @Prop({ mutable: true }) value: string = \"\";\n\n /* Invalid status /\n @Prop({ reflect: true }) invalid: boolean = false;\n\n /* Required status /\n @Prop({ reflect: true }) required: boolean = false;\n\n /* Hide `(optional)` label (or use `required` inside form to hide it) /\n @Prop({ reflect: true }) hideOptional: boolean = false;\n\n /* Checked status /\n @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n /* Default checked (used by reset) /\n @Prop({ mutable: true }) defaultChecked: boolean;\n\n /* Label /\n @Prop() label: string = \"\";\n\n /* Position of label /\n @Prop({ reflect: true }) labelPosition: \"right\" \| \"left\" = \"right\";\n\n /* Description message (use description slot as alternative) /\n @Prop() description: string;\n\n /* Long description message appearing in a popover (use description-long slot as alternative) /\n @Prop() descriptionLong: string;\n\n /\n Do not use this property. It will be deprecated with the next major release.\n * Long description title appearing in a popover (use description-long-title slot as or description property alternative) /\n @Prop() descriptionLongTitle: string;\n\n /* One or multiple error message (use error slot as alternative) /\n @Prop() error: string \| string[];\n private _error: string[];\n\n /* Id for element which describes the input (this will be overwritten if description prop or slot is used) /\n @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n /* Change event /\n @Event() stzhChange: EventEmitter<StzhToggleChangeEvent>;\n\n /* Focus event /\n @Event() stzhFocus: EventEmitter<StzhToggleFocusEvent>;\n\n /* Input blur event /\n @Event() stzhBlur: EventEmitter<StzhToggleBlurEvent>;\n\n @Listen(\"reset\", { target: \"document\" })\n resetListener(event: Event) {\n if ((event.target as HTMLElement).contains(this.element)) {\n requestAnimationFrame(() => {\n this.handleReset();\n });\n }\n }\n\n @Watch(\"error\")\n errorWatcher(newValue: string \| string[]) {\n if (typeof newValue === \"string\") {\n try {\n this._error = JSON.parse(newValue);\n } catch (e) {\n if (newValue) {\n this._error = [newValue];\n } else {\n this._error = [];\n }\n }\n } else if (newValue) {\n this._error = newValue;\n } else {\n this._error = [];\n }\n }\n\n /\n Whether the component has meaningful default-slot content.\n * Becomes obsolete with the implementation of PDESI-1908.\n /\n @State() hasDefaultSlot: boolean = false;\n\n /\n Indicates whether default-slot content detection has run at least once.\n * Used to avoid rendering state-dependent markup before the slot content\n * has been evaluated.\n * Becomes obsolete with the implementation of PDESI-1908.\n /\n @State() hasResolvedDefaultSlot: boolean = false;\n\n @Element() element: HTMLStzhRadioElement;\n\n private input: HTMLInputElement;\n private inputId: string;\n private focusedByInput: boolean = false;\n\n private handleReset = async () => {\n this.checked = this.defaultChecked;\n };\n\n private onInput = (event: InputEvent) => {\n this.checked = this.input.checked;\n this.stzhChange.emit({\n component: \"stzh-toggle\",\n originalEvent: event,\n value: this.value,\n checked: this.checked,\n });\n };\n\n private onRootFocus = () => {\n if (!this.focusedByInput) {\n this.input.focus();\n }\n\n this.focusedByInput = false;\n };\n\n private onFocus = (event: FocusEvent) => {\n this.focusedByInput = true;\n\n const focusEvent = new FocusEvent(\"focus\", {\n view: window,\n bubbles: false,\n cancelable: false,\n });\n\n this.element.dispatchEvent(focusEvent);\n this.stzhFocus.emit({\n component: \"stzh-toggle\",\n originalEvent: event,\n });\n };\n\n private onBlur = (event: FocusEvent) => {\n const blurEvent = new FocusEvent(\"blur\", {\n view: window,\n bubbles: false,\n cancelable: false,\n });\n\n this.element.dispatchEvent(blurEvent);\n this.stzhBlur.emit({\n component: \"stzh-toggle\",\n originalEvent: event,\n });\n };\n\n /\n Re-evaluates default-slot content and updates the related render state.\n * Becomes obsolete with implementation of PDESI-1908.\n */\n private updateDefaultSlotState = () => {\n const hasDefaultSlot = hasDefaultSlotContent(this.element, [\"stzh-toggle\"]);\n if (this.hasDefaultSlot !== hasDefaultSlot) {\n this.hasDefaultSlot = hasDefaultSlot;\n }\n if (!this.hasResolvedDefaultSlot) {\n this.hasResolvedDefaultSlot = true;\n }\n };\n\n componentDidLoad() {\n this.updateDefaultSlotState();\n }\n\n async componentWillLoad() {\n this.inputId = `stzh-toggle-${toggleCounter++}`;\n\n this.defaultChecked = typeof this.defaultChecked === \"boolean\" ? this.defaultChecked : this.checked;\n\n this.errorWatcher(this.error);\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"toggle\");\n }\n }\n\n render() {\n const descriptionUsed = hasSlot(this.element, \"description\") \|\| !!this.description;\n const descriptionLongUsed = hasSlot(this.element, \"description-long\") \|\| !!this.descriptionLong;\n const errorUsed = hasSlot(this.element, \"error\") \|\| this._error?.length > 0;\n\n const labelUsed = !!this.label \|\| this.hasDefaultSlot;\n const labelWrapperUsed = !this.hasResolvedDefaultSlot \|\| labelUsed \|\| descriptionLongUsed;\n\n const classes = {\n \"stzh-toggle\": true,\n \"stzh-toggle--has-error\": errorUsed,\n \"stzh-toggle--is-required\": this.required,\n \"stzh-toggle--is-invalid\": this.invalid \|\| errorUsed,\n \"stzh-toggle--is-disabled\": this.disabled,\n \"stzh-toggle--has-description\": descriptionUsed,\n \"stzh-toggle--has-description-long\": descriptionLongUsed,\n [`stzh-toggle--has-label-${this.labelPosition}`]: !!this.labelPosition,\n };\n\n return (\n <Host is-invalid={this.invalid \|\| errorUsed} tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n <div class={classes}>\n {labelWrapperUsed && (\n <label class=\"stzh-toggle__field-wrapper\">\n <input\n class=\"stzh-toggle__input\"\n ref={el => (this.input = el as HTMLInputElement)}\n type=\"checkbox\"\n id={this.inputId}\n name={this.name}\n value={this.value}\n disabled={this.disabled}\n aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n aria-required={this.required ? \"true\" : \"false\"}\n aria-invalid={this.invalid ? \"true\" : \"false\"}\n checked={this.checked}\n defaultChecked={this.defaultChecked}\n onInput={this.onInput}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n />\n <div class=\"stzh-toggle__mark\">\n <div class=\"stzh-toggle__check\"></div>\n </div>\n\n <div class=\"stzh-toggle__label\">\n <span class=\"stzh-toggle__label-text\">\n {this.label ? this.label : <slot onSlotchange={this.updateDefaultSlotState}></slot>}\n\n {labelUsed && !this.hideOptional && (\n <span class=\"stzh-toggle__marker\">\n <span class=\"stzh-toggle__marker-symbol\" aria-hidden=\"true\">\n {this.required\n ? this.localization.$globals.requiredFieldMarker\n : this.localization.$globals.optionalFieldMarker}\n </span>\n <span class=\"stzh-toggle__marker-text\">\n {this.required\n ? this.localization.$globals.requiredFieldText\n : this.localization.$globals.optionalFieldText}\n </span>\n </span>\n )}\n </span>\n\n {descriptionLongUsed && (\n <StzhInputDescription\n classPrefix=\"stzh-toggle\"\n id={`${this.inputId}-description-long`}\n descriptionLong={this.descriptionLong}\n descriptionLongTitle={this.descriptionLongTitle}\n descriptionLongUsed={descriptionLongUsed}\n moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n showError={false}\n showDescriptionText={false}\n />\n )}\n </div>\n </label>\n )}\n {(errorUsed \|\| descriptionUsed) && (\n <StzhInputDescription\n classPrefix=\"stzh-toggle\"\n id={`${this.inputId}-description`}\n error={this._error}\n description={this.description}\n descriptionLongUsed={false}\n />\n )}\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/stzh-toggle/stzh-toggle.stories.js CHANGED Viewed

@@ -6,6 +6,9 @@ import { getFigmaLink } from '../../../figma';
 const COMPONENT_NAME = 'stzh-toggle';
 const story = createComponentStory(COMPONENT_NAME);
+const TOGGLE_TEST_ID = 'TOGGLE_TEST_ID';
+let stzhToggleEl;
 const TEMPLATE = `
 <stzh-toggle></stzh-toggle>
 `;
@@ -38,3 +41,15 @@ export const Default = {
     value: 'test'
   }
 };
+const TEMPLATE_LABEL_SLOT = `
+<${COMPONENT_NAME} data-testid="${TOGGLE_TEST_ID}">Label in default slot</${COMPONENT_NAME}>
+`;
+export const LabelSlotted = {
+  render: (args) => story(args, TEMPLATE_LABEL_SLOT),
+  args: {
+    name: 'option',
+    value: 'test'
+  }
+};

package/dist/collection/components/stzh-tooltip/stzh-tooltip.js CHANGED Viewed

@@ -344,7 +344,7 @@ export class StzhTooltip {
             [`stzh-tooltip--open`]: this.open,
             [`stzh-tooltip--placement-${this.computedPlacement}`]: !!this.computedPlacement,
         };
-        return (h(Host, { key: '012724e0503ec288ed26ab0349f47a38ef0b3096' }, h("div", { key: 'ab00cbc1925024146dd787aaa458ab9bc61983f7', class: classes }, h("div", { key: 'b6ce70a7bcb38321c0f80eadce119575765e1ae0', class: "stzh-tooltip__trigger", ref: el => (this.triggerElement = el) }, h("slot", { key: '86aa4451718894fb07b2dad52f6ec88fc65a79fa' })), this.hasTrigger("click") && (h("div", { key: '612541e156677d64cfaf6b93e759661e0d8b43bf', class: "stzh-tooltip__vhidden", id: `${this.id}-trigger-description` }, this.localization.open)), h("div", { key: 'a9d13f17857a6df369de8e47db1d444f3f832f5e', class: "stzh-tooltip__content", id: `${this.id}-content`, ref: el => (this.contentElement = el), tabindex: "-1", "aria-labelledby": this.label ? `${this.id}-label` : null, "aria-hidden": this.open ? "false" : "true", onKeyDown: this.onEscKey, onMouseEnter: this.onMouseEnterTrigger, onMouseLeave: this.onMouseLeaveTrigger, onFocusin: this.onFocusTrigger, onFocusout: this.onBlurTrigger }, h("div", { key: '3d923d9a940924c993103736747aef80402a066d', class: "stzh-tooltip__arrow", ref: el => (this.arrowElement = el), innerHTML: Arrow }), this.label && (h("h2", { key: '471200d61c43b6642b27f4b9a57f1d2dff4ff5c5', id: `${this.id}-label`, class: "stzh-tooltip__vhidden" }, this.label)), this.hasTrigger("click") && (h("button", { key: '10dd80e0915a3251702d59079420a910c2a4e40d', class: "stzh-tooltip__close", onClick: () => this.hide(), type: "button" }, h("stzh-icon", { key: '2cc3012f1c6e840b835b11e09ce0eaea05e8e951', name: "close", class: "stzh-tooltip__icon" }), h("span", { key: '33314393adb510ea664a3b71cdc91cea01a4a8fe', class: "stzh-tooltip__vhidden" }, this.localization.close))), h("stzh-text", Object.assign({ key: 'd4162f0c66217ee9ea960a6b456aabbd2a0736f4', curve: this.type === "overlay" ? "none" : "caption" }, (this.type === "button" ? { font: "heavy" } : {}), { class: "stzh-tooltip__content-slot" }), this.content ? this.content : h("slot", { name: "content" }))))));
+        return (h(Host, { key: '87b3ff5681cba66f247a4b9796ba48a60223c8c0' }, h("div", { key: 'b8fcb9989e3755f8353dc30041c7389677ad2225', class: classes }, h("div", { key: '0260e279e17a025c41f79ffc259d2fbe7de1ebe5', class: "stzh-tooltip__trigger", ref: el => (this.triggerElement = el) }, h("slot", { key: '00233d11fa1eed44272ec776346149de8f27c4c3' })), this.hasTrigger("click") && (h("div", { key: '429618291c4e8b8c66febbd2c3db71597ba31b66', class: "stzh-tooltip__vhidden", id: `${this.id}-trigger-description` }, this.localization.open)), h("div", { key: '56d2565d045be1a7e3ad07eb2b1952c219d091e2', class: "stzh-tooltip__content", id: `${this.id}-content`, ref: el => (this.contentElement = el), tabindex: "-1", "aria-labelledby": this.label ? `${this.id}-label` : null, "aria-hidden": this.open ? "false" : "true", onKeyDown: this.onEscKey, onMouseEnter: this.onMouseEnterTrigger, onMouseLeave: this.onMouseLeaveTrigger, onFocusin: this.onFocusTrigger, onFocusout: this.onBlurTrigger }, h("div", { key: '75ac7b7bd0a0f0b6f3f2a2fd0bc0040cb60ec7ff', class: "stzh-tooltip__arrow", ref: el => (this.arrowElement = el), innerHTML: Arrow }), this.label && (h("h2", { key: 'b05fd5efaf3ecbf8e24e1979d98b2300ec2513fb', id: `${this.id}-label`, class: "stzh-tooltip__vhidden" }, this.label)), this.hasTrigger("click") && (h("button", { key: '5f02d98c98214aebd9a31432ba6c0642e629dfe8', class: "stzh-tooltip__close", onClick: () => this.hide(), type: "button" }, h("stzh-icon", { key: 'd14def3d3ab12425b1f79e811ade0aac375a3e75', name: "close", class: "stzh-tooltip__icon" }), h("span", { key: '76dcdb1cc8619130bb27ebbdbf920f28ead54207', class: "stzh-tooltip__vhidden" }, this.localization.close))), h("stzh-text", Object.assign({ key: '461c81d1322994587db85962ba41b280b796fa5d', curve: this.type === "overlay" ? "none" : "caption" }, (this.type === "button" ? { font: "heavy" } : {}), { class: "stzh-tooltip__content-slot" }), this.content ? this.content : h("slot", { name: "content" }))))));
     }
     static get is() { return "stzh-tooltip"; }
     static get encapsulation() { return "scoped"; }