npm - @oiz/stzh-components - Versions diffs - 4.0.0-beta3 → 4.0.1-beta - Mend

@oiz/stzh-components 4.0.0-beta3 → 4.0.1-beta

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

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

@@ -331,7 +331,7 @@ export class StzhTooltip {
             [`stzh-tooltip--open`]: this.open,
             [`stzh-tooltip--placement-${this.computedPlacement}`]: !!this.computedPlacement,
         };
-        return (h(Host, { key: 'f7bc0ee1a2580e4877136ce134dce5c06ee5fb18' }, h("div", { key: '6df27549c14b066188b92d0cb8f2c59d64ece003', class: classes }, h("div", { key: 'aefc38a04a7217225a2e4b5b855145e75676aa3d', class: "stzh-tooltip__trigger", ref: el => (this.triggerElement = el) }, h("slot", { key: '5f971fa802f80093944565149fc84b9e64224a5a' })), this.hasTrigger("click") && (h("div", { key: 'f944502cce410496d9a86bd648ecf638daeea9d8', class: "stzh-tooltip__vhidden", id: `${this.id}-trigger-description` }, this.localization.open)), h("div", { key: 'f1a11064ce994f02883e749b9bd44687f95c3aad', 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: 'fe78b9b2d67f9ed46a24902bd6506c4fd2a24ac5', class: "stzh-tooltip__arrow", ref: el => (this.arrowElement = el), innerHTML: Arrow }), this.label && (h("h2", { key: '6e3405de3df1680e032f2dd9be80b6ee865532f3', id: `${this.id}-label`, class: "stzh-tooltip__vhidden" }, this.label)), this.hasTrigger("click") && (h("button", { key: 'b77ab38bbbe03b31ca6578a4ab9229e4f582afbc', class: "stzh-tooltip__close", onClick: () => this.hide(), type: "button" }, h("stzh-icon", { key: '791371d0e3ab8399ff43702a560233edf20122ca', name: "close", class: "stzh-tooltip__icon" }), h("span", { key: '556a211146fc54b03feddf7ad27a3b568d8f07f1', class: "stzh-tooltip__vhidden" }, this.localization.close))), h("stzh-text", Object.assign({ key: '279965952347bb5be2a0d5d67e59efa8b533ae4d', 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: '643020f926b7a270c1b28b2ff04f84a6385247bc' }, h("div", { key: '47ae92f9211f5f9de8d9f1c5391dfde00324c7ef', class: classes }, h("div", { key: '5797e2432348e1245501217fc510d33dfb244ffa', class: "stzh-tooltip__trigger", ref: el => (this.triggerElement = el) }, h("slot", { key: '6e7da97f24731b73d392ae8daa3bff9dbfca59cc' })), this.hasTrigger("click") && (h("div", { key: '4f5e722b5388aac4d117fed7eaab2b0268c2b6a4', class: "stzh-tooltip__vhidden", id: `${this.id}-trigger-description` }, this.localization.open)), h("div", { key: 'bbd9b3cb967de023e83191a5a344ab2693d24b3e', 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: 'd1a15390f33e08c879df1bf16ee847bc9a0ee6fd', class: "stzh-tooltip__arrow", ref: el => (this.arrowElement = el), innerHTML: Arrow }), this.label && (h("h2", { key: '95aa3b5722cdf73e415fc9b88d87204c0fd54144', id: `${this.id}-label`, class: "stzh-tooltip__vhidden" }, this.label)), this.hasTrigger("click") && (h("button", { key: '8778173fef3ebda630ffcc6d6363c38262391837', class: "stzh-tooltip__close", onClick: () => this.hide(), type: "button" }, h("stzh-icon", { key: '4a14fb731ad939fbbe551893e71433f52a476d2c', name: "close", class: "stzh-tooltip__icon" }), h("span", { key: '997d8699ea4a24e9e7e117c64554d97359b151d0', class: "stzh-tooltip__vhidden" }, this.localization.close))), h("stzh-text", Object.assign({ key: 'bcc3c0a104d3aac9e697533c21b35e7a4a199e81', 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"; }

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

@@ -36,7 +36,7 @@ export class StzhTwocolumns {
             "stzh-twocolumns--has-left": leftSlotUsed,
             "stzh-twocolumns--has-right": rightSlotUsed
         };
-        return (h(Host, { key: 'd91bbcae0bb7ea1ccd2adeead8ecf817b9663860' }, h("div", { key: '2b51be3165feb3e0f00e2f23ef400483a271921f', class: classes }, h("div", { key: 'c0f6ec191efb15d5b6ba26bef748fd7cfefa8638', class: "stzh-twocolumns__left" }, h("slot", { key: 'a69ccc6d090bb8f2d9958320e16fe55f8552eab9', name: "left", onSlotchange: () => forceUpdate(this.element) })), h("div", { key: '6a08f3cf5b6ba65517a7b34ff6365ab054f206ad', class: "stzh-twocolumns__right" }, h("slot", { key: 'f77d65f55c26dba1045af5bccb6ca1a3cd235663', name: "right", onSlotchange: () => forceUpdate(this.element) })))));
+        return (h(Host, { key: '1978073b2accd14267050d7212a366c1760954f7' }, h("div", { key: 'f959e0ced8a0f59760b66b7f4e4d5d0be0ddb3bb', class: classes }, h("div", { key: 'b0c2e715f9ff66bbaa821aefb726d0dce30876c0', class: "stzh-twocolumns__left" }, h("slot", { key: 'd719b326af29c54088033fadf25e2b98a697e240', name: "left", onSlotchange: () => forceUpdate(this.element) })), h("div", { key: '2f7d6c797d5d1b3035645c75439f04f06bc686ca', class: "stzh-twocolumns__right" }, h("slot", { key: '34c63b96cfe5bb2640f950e5bc6ba8c9f0a70926', name: "right", onSlotchange: () => forceUpdate(this.element) })))));
     }
     static get is() { return "stzh-twocolumns"; }
     static get encapsulation() { return "shadow"; }

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

@@ -929,9 +929,9 @@ export class StzhUpload {
             "stzh-upload--has-instructions": !!this.description || !!this.localization.description
         };
         const descriptionTotalFileSizeLimit = this.localization.descriptionTotalFileSizeLimit;
-        return (h(Host, { key: 'bed7302b2f2b1a7539b90de36103392d6b885c62', "is-invalid": this.invalid || errorUsed }, h("stzh-toastbar", { key: '69032f8842faa92ab413160d7f6c4228363cfb5a' }), h("div", { key: '89e5c372c1078d2a1bf51b62b26d44da81956c61', class: classes, ref: el => (this.dropzoneElement = el) }, h("div", { key: 'f120b75192083d8a398c9e76c714aaeb16d4956c', ref: el => (this.hiddenInputContainerElement = el) }), h("div", { key: 'f88474114183aab4551b2e7d19ac5cab43dcc7c6', id: `${this.uploadId}-label` }, this.label && h("div", { key: 'f10ad46e56436c7baa97177171616731ccc2027a', class: "stzh-upload__label" }, this.label)), h("div", { key: '8d2d26fed21c5eceb607f27fe8655eb815a21b41', class: "stzh-upload__clickarea", ref: el => (this.clickareaElement = el) }, h("div", { key: 'c0d0674327f4732ceff0286724fd8dbaf2aabe55', class: "stzh-upload__heading-wrapper" }, h("div", { key: '24d779e3e4080c12c693e5859dd9d72eab8b7144', class: "stzh-upload__heading-inner-wrapper" }, h("div", { key: '49aa05ce3bb2493ce71def036052fb31d5724535', class: "stzh-upload__heading" }, this.heading ? this.heading : this.localization.heading), h("div", { key: '81453bcc6107bf0b27ea8eb7f888c02215a3e766', class: "stzh-upload__buttons-wrapper" }, h("stzh-button", { key: 'd42a5ec1cb1b2ba7d02de1982d6482e6098e27d9', class: "stzh-upload__button", variant: "secondary", size: "small", ref: el => (this.linkElement = el), label: this.button ? this.button : this.localization.button, a11yDescribedby: `${this.uploadId}-label ${this.uploadId}-instruction ${this.uploadId}-description`, disabled: this.disabled, a11yControls: `${this.uploadId}-previews` }, h("stzh-icon", { key: '3af9c6802641a9a8ab99c34b1a1b80411591a6a8', slot: "icon", name: "upload" })), this.isPhotographingAvailable && (h("stzh-button", { key: '9ebfb2e23e9693c4ae56910c788d0eaa280710b9', class: "stzh-upload__button-scan", variant: "secondary", size: "small", label: this.buttonScan ? this.buttonScan : this.localization.buttonScan, onClick: this.onButtonScanClick }, h("stzh-icon", { key: '2dc30dc00b4e38b5599a3a2c9a388ef62eb8ebab', slot: "icon", name: "camera" })))), h("div", { key: 'a6cb608aa2925f722c54217e9535d004ed16b938', class: "stzh-upload__hint-wrapper" }, h("span", { key: '5302187ac7cf725c911154c9ab3db7ba0292f506' }, this.localization.buttonIntro)))), h("div", { key: '81776d093331f9451d9739e8af00feb0e84bb8a5', class: "stzh-upload__instructions", id: `${this.uploadId}-instruction` }, h("p", { key: '76815accc0e3bf40fea039ebafb6379192b8a6a9' }, description
+        return (h(Host, { key: '372f19b86e3c2b232b5a8dd67d03691e7179ab89', "is-invalid": this.invalid || errorUsed }, h("stzh-toastbar", { key: 'd28bdfd74ee090cb42f85e0077996479cf371061' }), h("div", { key: 'e70df11c8b8b82483b471bb196f396acb031725e', class: classes, ref: el => (this.dropzoneElement = el) }, h("div", { key: 'b3c5f0761c8293ad73a806166a0802e079c9ec87', ref: el => (this.hiddenInputContainerElement = el) }), h("div", { key: '4a8d1d0e37582a8584b16b4238a165a9e42a8a99', id: `${this.uploadId}-label` }, this.label && h("div", { key: 'abbae5571a404be201338851cf84db8b068ca568', class: "stzh-upload__label" }, this.label)), h("div", { key: '3a4807ae9045f464563a5909be3dada37c6cf4c8', class: "stzh-upload__clickarea", ref: el => (this.clickareaElement = el) }, h("div", { key: '3692f24185f7f8315181779df3e57cbcaa6733f1', class: "stzh-upload__heading-wrapper" }, h("div", { key: '2faca657db5be326a0f22072717769af99bf003b', class: "stzh-upload__heading-inner-wrapper" }, h("div", { key: 'da32f47f4d27a76a0fc3ee9157f03db46cfba892', class: "stzh-upload__heading" }, this.heading ? this.heading : this.localization.heading), h("div", { key: '789a34f0c16c770614ce8f88750f2f499df25d6a', class: "stzh-upload__buttons-wrapper" }, h("stzh-button", { key: 'dcc9b91952fb9ec82e09e0ccbc308a948756ff9d', class: "stzh-upload__button", variant: "secondary", size: "small", ref: el => (this.linkElement = el), label: this.button ? this.button : this.localization.button, a11yDescribedby: `${this.uploadId}-label ${this.uploadId}-instruction ${this.uploadId}-description`, disabled: this.disabled, a11yControls: `${this.uploadId}-previews` }, h("stzh-icon", { key: '17fd56dd48477a07a6b3dbe9f022a09d879fd1c5', slot: "icon", name: "upload" })), this.isPhotographingAvailable && (h("stzh-button", { key: '2f24759083f8ba517ca12fdad389b71125f5ac0f', class: "stzh-upload__button-scan", variant: "secondary", size: "small", label: this.buttonScan ? this.buttonScan : this.localization.buttonScan, onClick: this.onButtonScanClick }, h("stzh-icon", { key: '39f036202ee912b769a0b482bccacaf9e95761c2', slot: "icon", name: "camera" })))), h("div", { key: 'e5bc486cc5b92ab840502713f96575bfc1de7d8f', class: "stzh-upload__hint-wrapper" }, h("span", { key: '6b7e85e8eac57a7e03f7bf2840dead3da9f6faad' }, this.localization.buttonIntro)))), h("div", { key: 'c0e3429f6e44ff424901ba3c65dda5f3e1b557f6', class: "stzh-upload__instructions", id: `${this.uploadId}-instruction` }, h("p", { key: '3181c95dce9ddefaa667015ac8be6d259d3dbef8' }, description
             .replace("{{fileformats}}", this.acceptedFiles)
-            .replace("{{filesize}}", `${this.maxFilesize}`), h("br", { key: '2d9bcd2a658197f0c22a75ae5214e4d3bc9e6a5a' }), descriptionTotalFileSizeLimit.replace("{{maxFilesizeTotal}}", `${this.maxFilesizeTotal}`)))), h("div", { key: '530072ca92aa5b81c934caaa48170f1ec6837436', class: "stzh-upload__description-wrapper" }, ((_b = this._error) === null || _b === void 0 ? void 0 : _b.length) > 0 && (h(StzhInputDescription, { key: 'd74ddcd157313ad1f273c8c7cee419a6a5c85213', classPrefix: "stzh-upload", id: `${this.uploadId}-description`, error: this._error }))), h("div", { key: 'dd10064b92055e33e40bfe577b85b01f290c767d', id: `${this.uploadId}-previews`, class: "stzh-upload__previews-wrapper" }, h("div", { key: '4780543edbf0d410eafd99bc402bef54b609c166', class: "stzh-upload__previews-inner-wrapper" }, h("div", { key: '6a37dda753d64a06b4a77af8f92e641309987800', class: "stzh-upload__errors", ref: el => (this.errorsElement = el) }), h("div", { key: 'aa433f1d396dc2b6c8a01d90341e7d28f86c0d68', class: "stzh-upload__previews dropzone-previews", ref: el => (this.previewsElement = el) })))), this.duplicateDetected && (h("div", { key: '4da07cf274e56e1056e37e825f51b8bff46479f3', class: "stzh-upload__previews-message-wrapper" }, h("stzh-message", { key: '578fcd0be5ed6c1cede6c0d39f114a82dafbcfac', type: "error", label: this.localization.duplicateFileUploadHeading, onStzhClose: () => this.duplicateDetected = false }, h("stzh-text", { key: 'b113b6bca79566257ad3abb09f6cd41c692cfaba' }, h("p", { key: '02e7661398c08172965ece8165885ce5e3fbc9f7' }, "\u00AB", this.duplicateFileName, "\u00BB (", this.duplicateFileSize, ")"), h("p", { key: 'b3c55678585b02183cda347dfd00638941a2249b' }, this.localization.duplicateFileUploadParagraph))))), this.totalTooBig && (h("div", { key: 'ad22ba887aa131d755520a5422e8620acdabe867', class: "stzh-upload__previews-message-wrapper" }, h("stzh-message", { key: 'd4e975fa486857362b2a38a8e7cd7f94e4c1f889', type: "warning", label: this.totalTooBigMessageHeading, onStzhClose: () => this.totalTooBig = false }, h("stzh-text", { key: '66da9468e077d0f0af902d6ddcf682c5f37b130f' }, h("p", { key: '8ef451c8d225428a5367144298d22428d5cc4b5f' }, this.totalTooBigMessageBody, " ", this.totalTooBigMessageBody2))))), h("stzh-dialog", { key: 'eab2675cbdd5ecfff52fc05d4313edd2c5f08940', ref: el => (this.photographingOverlayElement = el), onStzhClose: this.closePhotographingWebsocketConnection, class: this.isPhotographingAvailable && "stzh-dialog--fit-content", heading: this.localization.photographingTitle1 }, h("stzh-button", { key: '1b4fe27d0a6f6f1800d329a018f28a1b0184bfbc', class: "stzh-upload-photographing__back-button", icon: "arrow-left", size: "small", variant: "tertiary-plain", "no-padding-left": "true", "no-padding-right": "true", onClick: this.closePhotographingOverlay }, this.localization.back), this.isPhotographingAvailable && (h(Fragment, { key: 'bb9a3626bae2f6d7ab680a5f7dfc2e32ba747e68' }, h("div", { key: '031e4390ce65d7bded376ebf3f180e3aac244729', class: "stzh-upload-photographing__info" }, h("div", { key: 'b7482c3f9c4eb4f4730d2c0ae332dfdd64d659f6', class: "stzh-upload-photographing__text-qrcode" }, h("div", { key: '0f35b8e266720c7c5ce8ebdd0ee4ea870d618785', class: "stzh-upload-photographing-qrlink-container" }, h("stzh-text", { key: 'e81a8cd9e19d391d0d6232dcf765eeb3f624ecdb' }, this.localization.photographingText1)), h("div", { key: 'e050e4c14a9d4c3c15817f130bd02d5aeecf2616', class: "stzh-upload-photographing-qrcode-container" }, h("canvas", { key: '11f400120e37f4de382a52765867436fc0bae3f8', class: "stzh-upload-photographing-qrcode", ref: el => (this.photographingQrcodeElement = el) })))), h("div", { key: '72885a7d944e762c86733466c746759fd4975f99', class: "stzh-upload-photographing__info" }, h("stzh-heading", { key: '79bdba11a56e94fd963679c498d49d87c0b771e5', level: "3" }, this.localization.photographingTitle2), h("stzh-text", { key: '386dec9806261321b16e5a499458ab0697ae92ab' }, this.localization.photographingText2)), h("div", { key: '9bb5647c283f79455c62539d7efbbfcd7a7c2801', class: "stzh-upload-photographing__continue" }, !!this.photographingUrlDetails && (h("stzh-link", { key: '06daf8263a5bfba8b2c66606abca7f9a310d5c5b', class: "stzh-upload-photographing-link", href: this.photographingUrlDetails.url + "&label=" + this.cleanLabel(this.label), target: "_blank" }, this.localization.photographingContinue))))))));
+            .replace("{{filesize}}", `${this.maxFilesize}`), h("br", { key: '35b8210698b59d4fab1d6765d4be18027e8b0a97' }), descriptionTotalFileSizeLimit.replace("{{maxFilesizeTotal}}", `${this.maxFilesizeTotal}`)))), h("div", { key: '76e5158c816686743b79ac4808a82824a144777a', class: "stzh-upload__description-wrapper" }, ((_b = this._error) === null || _b === void 0 ? void 0 : _b.length) > 0 && (h(StzhInputDescription, { key: '9ca3869dabd0e8470413a68c48cc761f55a40232', classPrefix: "stzh-upload", id: `${this.uploadId}-description`, error: this._error }))), h("div", { key: '84ee8bf827f17377eaa3cee25b8b5e304be54066', id: `${this.uploadId}-previews`, class: "stzh-upload__previews-wrapper" }, h("div", { key: '6ca4d8519003e500f7b0dc899dee86ba322c9ee1', class: "stzh-upload__previews-inner-wrapper" }, h("div", { key: '023ef8c875f22959f2874f59743355d6cacd5d94', class: "stzh-upload__errors", ref: el => (this.errorsElement = el) }), h("div", { key: 'be5f5617093131632bc8cb1135f9bafa9bc8fdb9', class: "stzh-upload__previews dropzone-previews", ref: el => (this.previewsElement = el) })))), this.duplicateDetected && (h("div", { key: 'fdf9716b576a13c8980fe8ee34f5639816b9a810', class: "stzh-upload__previews-message-wrapper" }, h("stzh-message", { key: '7dc6cb2e0edabf507fbbc8a128d0af75b8c0471e', type: "error", label: this.localization.duplicateFileUploadHeading, onStzhClose: () => this.duplicateDetected = false }, h("stzh-text", { key: 'da88c0c61984917d13cb4669535d696cdae1d3cb' }, h("p", { key: 'e1d1ab545625c69e4d35cfb1c8ce0e8e783c09bd' }, "\u00AB", this.duplicateFileName, "\u00BB (", this.duplicateFileSize, ")"), h("p", { key: 'fd6656236cb1af21dcb720291a874cc1f1bb2897' }, this.localization.duplicateFileUploadParagraph))))), this.totalTooBig && (h("div", { key: 'bc4ce9c00ef6fa742079a9ea683566136733440f', class: "stzh-upload__previews-message-wrapper" }, h("stzh-message", { key: 'e11c00be234cd22acaea7d4bc90cd498280dfc75', type: "warning", label: this.totalTooBigMessageHeading, onStzhClose: () => this.totalTooBig = false }, h("stzh-text", { key: '6d5cd54002b55a074fa8f39ab17fc86d082886db' }, h("p", { key: '5b07fcc42eff78448904f40b627a5793c11606b4' }, this.totalTooBigMessageBody, " ", this.totalTooBigMessageBody2))))), h("stzh-dialog", { key: '8627ef64a8abd0a9925fc9c514c8f82911e59ca0', ref: el => (this.photographingOverlayElement = el), onStzhClose: this.closePhotographingWebsocketConnection, class: this.isPhotographingAvailable && "stzh-dialog--fit-content", heading: this.localization.photographingTitle1 }, h("stzh-button", { key: '452bae2dcf5faec1f667ad0c2373fcc09c73518a', class: "stzh-upload-photographing__back-button", icon: "arrow-left", size: "small", variant: "tertiary-plain", "no-padding-left": "true", "no-padding-right": "true", onClick: this.closePhotographingOverlay }, this.localization.back), this.isPhotographingAvailable && (h(Fragment, { key: 'fdf04e7b01f0f38ad4bf9c518f553da41890d028' }, h("div", { key: '2dd287a20e518f4bd96d7d8a9bc1136e010ce659', class: "stzh-upload-photographing__info" }, h("div", { key: 'dd0bb789f9da5aa94f2d3980af7565fb95921fe7', class: "stzh-upload-photographing__text-qrcode" }, h("div", { key: 'b23a36f2eceed41adde586bdc1c2668d0af46dbb', class: "stzh-upload-photographing-qrlink-container" }, h("stzh-text", { key: 'f61314d08f7a85e1ccf3c85ea598ada228fd7a5e' }, this.localization.photographingText1)), h("div", { key: 'f4e81d16f62e2e46c457ebb624ed29694d264c56', class: "stzh-upload-photographing-qrcode-container" }, h("canvas", { key: '463e3eb3b3d7cc4f94aa8d8d1a1da44d9a4856b4', class: "stzh-upload-photographing-qrcode", ref: el => (this.photographingQrcodeElement = el) })))), h("div", { key: 'e78d593b00115bcf558c2e0c6d7b436d95f8f627', class: "stzh-upload-photographing__info" }, h("stzh-heading", { key: '54a3fb491bb4c879f6bcf9bb825fda1892385e4e', level: "3" }, this.localization.photographingTitle2), h("stzh-text", { key: '5c6f900420aeff2e4533a34037f745e4e01af4dc' }, this.localization.photographingText2)), h("div", { key: 'd91ab6df2e6c7f4f800fef5e8fc870688f3724eb', class: "stzh-upload-photographing__continue" }, !!this.photographingUrlDetails && (h("stzh-link", { key: 'd9a923da8af084d075979229ae0ede71b76fde23', class: "stzh-upload-photographing-link", href: this.photographingUrlDetails.url + "&label=" + this.cleanLabel(this.label), target: "_blank" }, this.localization.photographingContinue))))))));
     }
     static get is() { return "stzh-upload"; }
     static get originalStyleUrls() {

package/dist/collection/components/stzh-vbz-carousel/stzh-vbz-carousel.js CHANGED Viewed

@@ -35,7 +35,7 @@ export class StzhVbzCarousel {
         const classes = {
             "stzh-vbz-carousel": true,
         };
-        return (h(Host, { key: '88d4b496301535ee20ce057c923608c3dfc0aa32' }, h("div", { key: 'e05bf5e1623099e515facfc5a00368f22b03b2b7', class: classes }, h("stzh-carousel", { key: 'b2ac7cb86c194e0e19a636abd7417534061fc676', noPeek: true, nonInteractive: true, preventMouseDrag: true, preventAutoplayPause: true, preventAutoplayStop: true, autoplay: true, autoplayTimeout: this.autoplayTimeout }, h("slot", { key: 'bb5533cb775cc361a8249465822f09deb0c79730' })))));
+        return (h(Host, { key: '207d97cdcf776cbfab2adcf2a5f41f71f1a9e750' }, h("div", { key: '1bc083fe0a7b126aa58d31a36ea8b6358de7e121', class: classes }, h("stzh-carousel", { key: '1387046faa7e62f3677ed778e462ea2505ab8ef6', noPeek: true, nonInteractive: true, preventMouseDrag: true, preventAutoplayPause: true, preventAutoplayStop: true, autoplay: true, autoplayTimeout: this.autoplayTimeout }, h("slot", { key: '77b028320eb8bdd13add5a74f6ed584c60f97df1' })))));
     }
     static get is() { return "stzh-vbz-carousel"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/stzh-vbz-connection-finder/stzh-vbz-connection-finder.js CHANGED Viewed

@@ -13,7 +13,7 @@ export class StzhVbzConnectionFinder {
         const classes = {
             "stzh-vbz-connection-finder": true,
         };
-        return (h(Host, { key: '534bbda251955e76d3d246aef588bbf62f474e5b' }, h("div", { key: '95f6c5b37172b815a941ab6b585497a1769d4030', class: classes }, h("script", { key: '68ba4122d88e427490e42f2218557bcbeeb4d286', src: this.zvvScript }), h("div", { key: 'ad86207536078e4d20f894da7fc32cb05bdbe792', id: "zvv-searchmask", "data-draw-input-placeholder-outside": "true", "data-toggle-style-variant": "inside", "data-hide-refresh-button": "true", "data-background-color": "#ffffff", "data-accent-color": "#ffffff", "data-input-border-color": "#7C7C7C", "data-input-border-radius": "0px", "data-input-border-width": "2px", "data-input-placeholder-color": "#034C67", "data-input-text-color": "#000000", "data-button-color": "#FFFFFF", "data-button-background-color": "#057FAC", "data-button-hover-color": "#ffffff", "data-button-hover-background-color": "#034C67", "data-button-border-radius": "0px", "data-font-family": "'HelveticaNeueLTW01_55Roman','Helvetica Neue','Helvetica,Arial',sans-serif;", "data-calendar-icon": this.getIconPath("calendar"), "data-info-icon": this.getIconPath("info-help") }))));
+        return (h(Host, { key: '2c832988e9a46dfc43762dbef6e6b2582c388148' }, h("div", { key: '6c551597059cf4a0cb2e1c37d40614b6967795aa', class: classes }, h("script", { key: 'dec8617b920447e25a9d9352acd2ec5248751cff', src: this.zvvScript }), h("div", { key: 'c771f32e143779928102b23d82f6efa1782fdb5e', id: "zvv-searchmask", "data-draw-input-placeholder-outside": "true", "data-toggle-style-variant": "inside", "data-hide-refresh-button": "true", "data-background-color": "#ffffff", "data-accent-color": "#ffffff", "data-input-border-color": "#7C7C7C", "data-input-border-radius": "0px", "data-input-border-width": "2px", "data-input-placeholder-color": "#034C67", "data-input-text-color": "#000000", "data-button-color": "#FFFFFF", "data-button-background-color": "#057FAC", "data-button-hover-color": "#ffffff", "data-button-hover-background-color": "#034C67", "data-button-border-radius": "0px", "data-font-family": "'HelveticaNeueLTW01_55Roman','Helvetica Neue','Helvetica,Arial',sans-serif;", "data-calendar-icon": this.getIconPath("calendar"), "data-info-icon": this.getIconPath("info-help") }))));
     }
     static get is() { return "stzh-vbz-connection-finder"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/stzh-vbz-intro/stzh-vbz-intro.js CHANGED Viewed

@@ -39,7 +39,7 @@ export class StzhVbzIntro {
         const classes = {
             "stzh-vbz-intro": true,
         };
-        return (h(Host, { key: 'c843a4a76020284946f526c42aeb5fa94fa741bb' }, h("div", { key: '40257d481a8b8653d9fca5a04877220a4bb059b4', class: classes }, h("div", { key: 'b6886d2c3a0f991d9eacd7f0123eefc2d1bbd02c', class: "stzh-vbz-intro__ticker" }, h("slot", { key: 'f73d417a5c6b260e60babec5f6bcce00f587717d', name: "ticker" })), this._quicklinks.length > 0 && (h("div", { key: '96a180ddf7fbb4f7bce1ccec095e6a5b1a289acb', class: "stzh-vbz-intro__quicklinks" }, h("stzh-heading", { key: '6cf4cce446b973ad671e7f94ab4c0ecca1ee25bf', class: "stzh-vbz-intro-quicklinks__heading" }, this.localization.quicklinksHeading), this._quicklinks.map(item => (h("div", { class: "stzh-vbz-intro-quicklink" }, h("stzh-link", { class: "stzh-vbz-intro-quicklink__link", href: item.href, icon: "arrow-right" }, item.label)))))))));
+        return (h(Host, { key: '35d15b69cb08d3887cdb8b44649f23146911ecd1' }, h("div", { key: 'd44fa8d5921aae632170689deab0b60719ca28d6', class: classes }, h("div", { key: '18bbb188c5361752980e9f26c9c5f58b87484ca5', class: "stzh-vbz-intro__ticker" }, h("slot", { key: '29d6ca595cb567c6431224bbfe4b8093b97738d6', name: "ticker" })), this._quicklinks.length > 0 && (h("div", { key: '83cad93d87c7a28e129adc5b926d0effecb5a08f', class: "stzh-vbz-intro__quicklinks" }, h("stzh-heading", { key: 'b466cca08f8e279c60beb6f6458b1d2488fd8ce8', class: "stzh-vbz-intro-quicklinks__heading" }, this.localization.quicklinksHeading), this._quicklinks.map(item => (h("div", { class: "stzh-vbz-intro-quicklink" }, h("stzh-link", { class: "stzh-vbz-intro-quicklink__link", href: item.href, icon: "arrow-right" }, item.label)))))))));
     }
     static get is() { return "stzh-vbz-intro"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/stzh-vbz-linechip/stzh-vbz-linechip.js CHANGED Viewed

@@ -69,11 +69,11 @@ export class StzhVbzLinechip {
             [`stzh-vbz-linechip--line-${this.line}`]: !!this.line
         };
         const title = lineData.comment || "";
-        return (h(Host, { key: '43971c0543efd4f1e84faacebcd741b89c7c0f7c', tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("button", { key: '37c70e819f6b6d8fd0cc2255b23433bc0bcef681', ref: (el) => (this.chip = el), class: classes, style: styles, title: title, disabled: this.disabled, onFocus: this.onFocus, onBlur: this.onBlur, "s-object-id": this.analyticsId || (this.global ? "Global" : this.line) }, this.global ?
+        return (h(Host, { key: 'bff2f13acc12a2bed52330b89f70ccf73055898e', tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("button", { key: '3f4500eaa2cdffd68d621f1caaa5c433cf848259', ref: (el) => (this.chip = el), class: classes, style: styles, title: title, disabled: this.disabled, onFocus: this.onFocus, onBlur: this.onBlur, "s-object-id": this.analyticsId || (this.global ? "Global" : this.line) }, this.global ?
             h("stzh-icon", { name: "important-warning", class: "stzh-vbz-linechip__global-icon" })
             :
                 h("div", { class: "stzh-vbz-linechip__text" }, this.line), this.alert &&
-            h("div", { key: 'c52632e877ef84a81286ec2c41756558c38b0c0a', class: "stzh-vbz-linechip__alert" }, h("stzh-icon", { key: '575439dc4df650e76e660c0f95f189b3e3dff43e', name: "warning-big", class: "stzh-vbz-linechip__alert-icon" })))));
+            h("div", { key: 'dfe71362971e9926eafbdc9ff3f9d55f17fda3a8', class: "stzh-vbz-linechip__alert" }, h("stzh-icon", { key: 'fccb09f2f47d8e8d3420aaa2516b5b01edb52332', name: "warning-big", class: "stzh-vbz-linechip__alert-icon" })))));
     }
     static get is() { return "stzh-vbz-linechip"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/stzh-vbz-majorticker/stzh-vbz-majorticker.js CHANGED Viewed

@@ -92,8 +92,8 @@ export class StzhVbzMajorticker {
         const classes = {
             "stzh-vbz-majorticker": true
         };
-        return (h(Host, { key: 'b61b37d4c0a70c5bf7a5bc7f4e25de4efe2838a2', hidden: !this.disturbance || !this.ghettoboxShown }, h("div", { key: 'fc8b6983cd9c8bc0978ebf4d059da50b302bd8f4', class: classes }, this.disturbance &&
-            h("stzh-show", { key: '1606014fcd7e481173c8e9d65667d99d681d4dbc', mikro: true, closeKey: this.showCloseKey, showFromDate: this.disturbance.startDate }, h("stzh-ghettobox", { key: '78c28f478907a74013026b341fc9c2ec1813c7a3', onStzhOpen: this.onGhettoboxOpen, onStzhClose: this.onGhettoboxClose, class: "stzh-vbz-majorticker__ghettobox", hideClose: true, mainTitle: this.disturbance.head }, h("stzh-richtext", { key: '0fc63197f40c27c5558ba7b74ed6092587685059', innerHTML: this.disturbance.text }), this.disturbance.infoUrl ?
+        return (h(Host, { key: '3c1e7f102ef9ab33f569d571af422bef3373bade', hidden: !this.disturbance || !this.ghettoboxShown }, h("div", { key: '07aef2b96582a2d2fc8f63c526774dc68bfa1825', class: classes }, this.disturbance &&
+            h("stzh-show", { key: '48b3aaf5c5e2d8ebeec393780f2809571ee6b151', mikro: true, closeKey: this.showCloseKey, showFromDate: this.disturbance.startDate }, h("stzh-ghettobox", { key: '05c91ea48a84e4137b1626ab293710d0ed09eb57', onStzhOpen: this.onGhettoboxOpen, onStzhClose: this.onGhettoboxClose, class: "stzh-vbz-majorticker__ghettobox", hideClose: true, mainTitle: this.disturbance.head }, h("stzh-richtext", { key: 'f6270e68b2d603c6c3cf74b4734ec6273c0fa09b', innerHTML: this.disturbance.text }), this.disturbance.infoUrl ?
                 h("stzh-button", { slot: "button", href: this.disturbance.infoUrl.url }, this.disturbance.infoUrl.name)
                 :
                     h("stzh-button", { slot: "button", target: "_blank", href: this.moreInfoLink

package/dist/collection/components/stzh-vbz-ticker/stzh-vbz-ticker.js CHANGED Viewed

@@ -145,9 +145,9 @@ export class StzhVbzTicker {
         const classes = {
             "stzh-vbz-ticker": true,
         };
-        return (h(Host, { key: 'ca3a0bffec68ef90c1037edcf22bed93e4bcb00b' }, h("div", { key: 'bdb1f407517a490ee3e10a28c55504cc2b81ab6c', class: classes }, h("div", { key: '8392fc9f6b8de19ebd157eec6903b09e63c0afff', class: "stzh-vbz-ticker__content" }, this.counter[VBZ.DISTURBANCE_NORMAL] > 0 && (h(Fragment, { key: 'd531653acb39b610f7798f7c6e63eef3709b6e7e' }, h("div", { key: '32a0531a8b5704eb482fc3e9391baa18e870a37b', class: "stzh-vbz-ticker__title" }, h("div", { key: 'ab54b7fdd5652c883fcc407cdc19804ea2cda58a', class: "stzh-vbz-ticker__title-part stzh-vbz-ticker__title-part--disturbances" }, h("stzh-icon", { key: '591401c773cf6ed94e143ffefe2af775f28d3d33', class: "stzh-vbz-ticker__icon", name: "warning" }), this.localization.disturbancesTitle)), h("div", { key: '4f2e716ca1768145dac7c20a801f1ee1b94fc572', class: "stzh-vbz-ticket__lines" }, h("div", { key: '0ba6a3872143f78da8e4687fb847c487c6f75156', class: "stzh-vbz-ticker__chips", role: "list" }, this.linesWithDisturbances.map(line => (h("div", { class: "stzh-vbz-ticker__chip", role: "listitem" }, h("stzh-tooltip", { class: "stzh-vbz-ticker__tooltip" }, h("stzh-vbz-linechip", { line: line.line, alert: line.alert }), h("div", { class: "stzh-vbz-ticker__tooltip-content", slot: "content" }, line.disturbances.map(disturbance => this.renderDisturbance(disturbance))))))))))), (this.counter[VBZ.DISTURBANCE_CONSTRUCTION] > 0 ||
+        return (h(Host, { key: 'f5df253926eaee29b02c692a5eee4ffa9c4da6b6' }, h("div", { key: 'f90c4922178f70ec075561bc36fa2f351b914d7a', class: classes }, h("div", { key: 'ceb4c4e6ff92e891940eca0b201d1f725a78bdaa', class: "stzh-vbz-ticker__content" }, this.counter[VBZ.DISTURBANCE_NORMAL] > 0 && (h(Fragment, { key: '32c1a922fd87880f84d948c88971526d2dea5dba' }, h("div", { key: '2a7a555773bdc6213b7d264d2f0890f85bc60337', class: "stzh-vbz-ticker__title" }, h("div", { key: 'ad8d0753bd9deec4a668c353497e8484c5b35feb', class: "stzh-vbz-ticker__title-part stzh-vbz-ticker__title-part--disturbances" }, h("stzh-icon", { key: 'c0ff9dd93ac82e9883f052a4fb33425d8348a8f3', class: "stzh-vbz-ticker__icon", name: "warning" }), this.localization.disturbancesTitle)), h("div", { key: '1dc9e791be6f2cc89be5b308d3aec6330fb86e98', class: "stzh-vbz-ticket__lines" }, h("div", { key: '97961b8fab7e7931a4b1457956b668cd97448a7e', class: "stzh-vbz-ticker__chips", role: "list" }, this.linesWithDisturbances.map(line => (h("div", { class: "stzh-vbz-ticker__chip", role: "listitem" }, h("stzh-tooltip", { class: "stzh-vbz-ticker__tooltip" }, h("stzh-vbz-linechip", { line: line.line, alert: line.alert }), h("div", { class: "stzh-vbz-ticker__tooltip-content", slot: "content" }, line.disturbances.map(disturbance => this.renderDisturbance(disturbance))))))))))), (this.counter[VBZ.DISTURBANCE_CONSTRUCTION] > 0 ||
             this.counter[VBZ.DISTURBANCE_EVENT] > 0 ||
-            this.counter[VBZ.DISTURBANCE_BUS] > 0) && (h(Fragment, { key: 'ee94be74186eb8783a520b246c295e4e2d40b391' }, h("div", { key: 'ed2b24aa5fc77372ad9e08663def78a2ce35e774', class: "stzh-vbz-ticker__title" }, h("div", { key: '15a49e12b6cd85dbac1e8bfc9500d0bb37102bc1', class: "stzh-vbz-ticker__title-parts" }, h("div", { key: 'bd97c058d6bdd27b9056404eeb32dcbc4363f466', class: "stzh-vbz-ticker__title-part stzh-vbz-ticker__title-part--others" }, h("stzh-icon", { key: '36922e9be01daea3ca8e45d73717b078b81b2d3c', class: "stzh-vbz-ticker__icon", name: "construction" }), this.localization.constructionsTitle))), h("div", { key: '3e05bb242b2fb6a3c14d7de304ee6410ea277505', class: "stzh-vbz-ticket__lines" }, h("div", { key: 'cd3bf6e0e061bc80deb0b01173c7674e2bb291c2', class: "stzh-vbz-ticker__chips", role: "list" }, this.linesWithConstructions.map(line => (h("div", { class: "stzh-vbz-ticker__chip", role: "listitem" }, h("stzh-tooltip", { class: "stzh-vbz-ticker__tooltip" }, h("stzh-vbz-linechip", { line: line.line, alert: line.alert }), h("div", { class: "stzh-vbz-ticker__tooltip-content", slot: "content" }, line.disturbances.map(disturbance => this.renderDisturbance(disturbance))))))))))), h("div", { key: '0355f3bd96e947f897636f0eec898b73c3bcec2d', class: "stzh-vbz-ticker__link" }, h("slot", { key: '4ccec91afb118781528f43a42d00ac99b3497fc1', name: "link" }))))));
+            this.counter[VBZ.DISTURBANCE_BUS] > 0) && (h(Fragment, { key: '10adf6fb3c5ff5d65f02ecc5b08dc660bb7154bf' }, h("div", { key: '657c621c73867cddbc8c104fb1a93ac06c6438fc', class: "stzh-vbz-ticker__title" }, h("div", { key: '8ee1894994bb6cc032193597376c4dc90c559bed', class: "stzh-vbz-ticker__title-parts" }, h("div", { key: '498444822783ba5e48f6a0a10f7b9c1be3bddc4b', class: "stzh-vbz-ticker__title-part stzh-vbz-ticker__title-part--others" }, h("stzh-icon", { key: '71cd29bcd32e6ea74bac58a3fbd5111b6a3ad4f7', class: "stzh-vbz-ticker__icon", name: "construction" }), this.localization.constructionsTitle))), h("div", { key: '7ef88a47edeefe3d8f77b8d1e9d96cee74137be3', class: "stzh-vbz-ticket__lines" }, h("div", { key: '1e489f437ace859a1317b5f936927790b150d71e', class: "stzh-vbz-ticker__chips", role: "list" }, this.linesWithConstructions.map(line => (h("div", { class: "stzh-vbz-ticker__chip", role: "listitem" }, h("stzh-tooltip", { class: "stzh-vbz-ticker__tooltip" }, h("stzh-vbz-linechip", { line: line.line, alert: line.alert }), h("div", { class: "stzh-vbz-ticker__tooltip-content", slot: "content" }, line.disturbances.map(disturbance => this.renderDisturbance(disturbance))))))))))), h("div", { key: '51e59486683ef7bcf46eb936f30e02768e4f4abf', class: "stzh-vbz-ticker__link" }, h("slot", { key: '53dc33c68b8fd9b757ba00b9f7c27b03fcb80209', name: "link" }))))));
     }
     static get is() { return "stzh-vbz-ticker"; }
     static get encapsulation() { return "scoped"; }

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

@@ -4,9 +4,9 @@ import { Host, h } from "@stencil/core";
  */
 export class StzhVisuallyhidden {
     render() {
-        return (h(Host, { key: 'ac778c07f9b4f62c3fcb1d2e5d112ec03e64ef3c' }, h("div", { key: '418e22473dad174e8092c787052cbe51437cfdae', class: {
+        return (h(Host, { key: '8a00d2422f8c0bf2b916bc0b3c421125858552a9' }, h("div", { key: '9924cc8068d62ea8146ef0b5be0ce0bda978d7b2', class: {
                 "stzh-visuallyhidden": true
-            } }, h("slot", { key: '70b0366ef9551a84589e2b5b270fe014dd395a65' }))));
+            } }, h("slot", { key: 'd47965cb1280ede2d6a1ab28a63b5e18d97a2864' }))));
     }
     static get is() { return "stzh-visuallyhidden"; }
     static get encapsulation() { return "scoped"; }

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

@@ -18,11 +18,11 @@ export class StzhVspace {
         this.border = "none";
     }
     render() {
-        return (h(Host, { key: '82374c945773f3af31dde7d45600622f562d4260' }, h("div", { key: '64c083c8c54deaa1997a7ad83adf14ad8656c803', class: {
+        return (h(Host, { key: '500067f6eab1878c9a32746149bcadbf4366ac3e' }, h("div", { key: 'ddb27d13a69c3b4620205527d062d84ef096c64f', class: {
                 "stzh-vspace": true,
                 [`stzh-vspace--justify-${this.justify}`]: !!this.justify,
                 [`stzh-vspace--items-${this.items}`]: !!this.items
-            } }, h("slot", { key: '6c14f40251bc488bbf644c242533753035a73f8b' }))));
+            } }, h("slot", { key: 'c18426e14996d93b011478a1dc9411b845065cf3' }))));
     }
     static get is() { return "stzh-vspace"; }
     static get encapsulation() { return "shadow"; }

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

@@ -37,7 +37,7 @@ export class StzhYoutube {
             + "&enablejsapi=1"
             + "&widgetid=1"
             + (this.previewSkipped ? "" : "&autoplay=1");
-        return (h(Host, { key: 'ab9a4f02b0ac2d1c4558df4b7adc00d50c019294' }, h("div", { key: '397e3f5a41ab4d26d7104f164d5d6090029e661f', class: classes }, h("stzh-ratio", { key: 'b56ca664e2f45a51c1b5dc5c2b3801d1cf6d5989' }, h("stzh-iframe", { key: '4587abe56f07ef2c87f86543445ee1dcb23d9702', src: url, previewLabel: this.localization.previewLabel, previewIcon: "play", cookie: this.cookie, cookieConfirmLabel: this.localization.confirmLabel, cookieConfirmIcon: "play", cookieExpires: this.cookieExpires, skipPreview: this.skipPreview, skipPreviewIfCookieAccepted: this.skipPreviewIfCookieAccepted, onStzhPreviewSkip: this.handlePreviewSkipped }, h("slot", { key: '2c4e57a28101ce41a3d4e83d212ecea64d3f4ffa', name: "preview-logo", slot: "preview-logo" }), h("slot", { key: 'd973c7497cdcd5358736deba66abefe70e6a91d6', name: "preview-image", slot: "preview-image" }), h("div", { key: 'd9a10bb0cc8a366c140d0148792224915ce9529f', slot: "cookiewall-text", innerHTML: this.localization.confirmText }))))));
+        return (h(Host, { key: '86a84f718a767e382325d9d33a4912492ad16df5' }, h("div", { key: '080f8026fca6bd6ff1668bcd48652b7bf12b16af', class: classes }, h("stzh-ratio", { key: 'a3c69677952eb8759660e6b8d32580270139ba00' }, h("stzh-iframe", { key: '4d5dad57f879fb76c722766b4efd551fadc180f3', src: url, previewLabel: this.localization.previewLabel, previewIcon: "play", cookie: this.cookie, cookieConfirmLabel: this.localization.confirmLabel, cookieConfirmIcon: "play", cookieExpires: this.cookieExpires, skipPreview: this.skipPreview, skipPreviewIfCookieAccepted: this.skipPreviewIfCookieAccepted, onStzhPreviewSkip: this.handlePreviewSkipped }, h("slot", { key: '090c0c87aa0fe4fa301c77fbf22b94186cf027c3', name: "preview-logo", slot: "preview-logo" }), h("slot", { key: '89e617ea9db5b267f3686638d50c68fe8a63f62d', name: "preview-image", slot: "preview-image" }), h("div", { key: '18990ace524ce4494405c80d7359a3c16b4083a0', slot: "cookiewall-text", innerHTML: this.localization.confirmText }))))));
     }
     static get is() { return "stzh-youtube"; }
     static get encapsulation() { return "scoped"; }

package/dist/components/index.js CHANGED Viewed

@@ -2,7 +2,7 @@ export { g as getAssetPath, s as setAssetPath, a as setNonce, b as setPlatformOp
 export { S as StzhSocialmediastreamItemActionVariant, V as VBZ, t as tc } from './p-f5779736.js';
 const name = "@oiz/stzh-components";
-const version = "4.0.0-beta3";
+const version = "4.0.1-beta";
 const packageName = name.substring(name.indexOf('/')+1);
 // let focused = false;

package/dist/components/{p-84f171a0.js → p-02bdd12e.js} RENAMED Viewed

@@ -86,7 +86,7 @@ const StzhTag = /*@__PURE__*/ proxyCustomElement(class StzhTag extends H {
         };
         const Tag = this.nonInteractive ? "div" :
             this.href ? "a" : "button";
-        return (h(Host, { key: '41da409f6ae68be3e8b5a44309d482daa6c60ffb', tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { key: 'af47d8c918967e470688af50a45dbf958cad38b1', class: classes }, this.href ?
+        return (h(Host, { key: 'b6e23aab89a74ab5606a5c1a8eec451565fd4528', tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { key: '52a3498a069f6f882178498b0d59d707fa9a436c', class: classes }, this.href ?
             h(Tag, { ref: (el) => (this.tag = el), class: {
                     "stzh-tag__button": true,
                     "is-button": !this.nonInteractive && !this.href,
@@ -151,4 +151,4 @@ function defineCustomElement() {
 export { StzhTag as S, defineCustomElement as d };
-//# sourceMappingURL=p-84f171a0.js.map
+//# sourceMappingURL=p-02bdd12e.js.map

package/dist/components/{p-84f171a0.js.map → p-02bdd12e.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-84f171a0.js","mappings":"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","names":[],"sources":["src/components/stzh-tag/stzh-tag.scss?tag=stzh-tag&encapsulation=scoped","src/components/stzh-tag/stzh-tag.tsx"],"sourcesContent":[":host {\n --color: var(--stzh-tag-color, #{$colorSecondary60});\n --height: 24px;\n --padding-top: 0;\n --padding-bottom: 0;\n --padding-left: #{space('small')};\n --padding-right: #{space('small')};\n --background-color: var(--stzh-tag-background-color, #{$colorGrey20});\n\n --hover-color: var(--stzh-tag-hover-color, #{$colorSecondary60});\n --hover-background-color: var(--stzh-tag-hover-background-color, var(--background-color));\n\n display: inline-flex;\n\n &[size=\"large\"] {\n --height: 32px;\n }\n\n &[size=\"default\"][type=\"secondary\"] {\n --background-color: var(--stzh-tag-secondary-background-color, #{$colorSecondary60});\n }\n\n &[type=\"secondary\"] {\n --color: var(--stzh-tag-secondary-color, #{$colorWhite});\n --background-color: var(--stzh-tag-secondary-background-color, #{$colorSecondary60});\n --hover-color: var(--stzh-tag-secondary-hover-color, #{$colorWhite});\n --hover-background-color: var(--stzh-tag-secondary-hover-background-color, var(--background-color));\n }\n\n &[non-interactive]:not([non-interactive=\"false\"]) {\n --hover-color: var(--color);\n --hover-background-color: var(--background-color);\n }\n\n &[disabled]:not([disabled=\"false\"]) {\n --color: var(--stzh-tag-disabled-color, #{$colorGrey70});\n --background-color: var(--stzh-tag-disabled-background-color, #{$colorGrey20});\n\n --hover-color: var(--color);\n --hover-background-color: var(--background-color);\n }\n}\n\n.stzh-tag {\n position: relative;\n\n &__button {\n @include fontSize('nano');\n font-family: inherit;\n height: var(--height);\n display: flex;\n flex-direction: row;\n align-items: center;\n padding-top: var(--padding-top);\n padding-bottom: var(--padding-bottom);\n padding-left: var(--padding-left);\n padding-right: var(--padding-right);\n color: var(--color);\n appearance: none;\n border: none;\n background-color: var(--background-color);\n transition-duration: $baseTransitionAnimationSpeed;\n transition-property: color, background-color;\n text-decoration-line: none;\n\n &.is-button,\n &.is-link {\n cursor: pointer;\n }\n }\n\n &__label {\n text-align: left;\n }\n\n &__button:hover {\n color: var(--hover-color);\n background-color: var(--hover-background-color);\n }\n\n /* Size /\n\n &--size-large &__button {\n @include font('heavy');\n @include fontSize('milli');\n }\n\n / Disabled /\n\n &--is-disabled &__button {\n cursor: not-allowed;\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Event,\n EventEmitter,\n Element,\n Fragment\n} from \"@stencil/core\";\n\nimport {\n StzhTagType,\n StzhTagSize,\n StzhTagClickEvent,\n StzhTagFocusEvent,\n StzhTagBlurEvent\n} from \"../../index\";\n\n/\n @slot - Slot for label\n /\n@Component({\n tag: \"stzh-tag\",\n styleUrl: \"stzh-tag.scss\",\n scoped: true\n})\nexport class StzhTag {\n /* Label /\n @Prop() label: string = \"\";\n\n /* `href` if the tag should be used as link /\n @Prop() href: string = \"\";\n\n /* Target if the button is used as link (if `href` used) /\n @Prop() target: string = \"\";\n\n /* Whether tag is not interactive /\n @Prop({ reflect: true }) nonInteractive: boolean = false;\n\n /* Type /\n @Prop({ reflect: true }) type: StzhTagType = \"default\";\n\n /* Size /\n @Prop({ reflect: true }) size: StzhTagSize = \"default\";\n\n /* Disabled /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* Tabindex of link/button /\n @Prop({ attribute: \"a11y-tabindex\" }) a11yTabindex: string;\n\n /* Accessible label for screen readers to replace visible text /\n @Prop({ attribute: \"a11y-label\" }) a11yLabel: string;\n\n /* Id for element which describes the link/button /\n @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the link/button element.\n * Default value will be taken from `label` prop or default slot.\n /\n @Prop() analyticsId: string;\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the remove button element.\n * Default value will be taken from `removeLabel` prop.\n /\n @Prop() removeAnalyticsId: string;\n\n @Element() element: HTMLStzhTagElement;\n\n /* Click event /\n @Event() stzhClick: EventEmitter<StzhTagClickEvent>;\n\n /* Focus event /\n @Event() stzhFocus: EventEmitter<StzhTagFocusEvent>;\n\n /* Input blur event */\n @Event() stzhBlur: EventEmitter<StzhTagBlurEvent>;\n\n private tag: HTMLButtonElement \| HTMLAnchorElement \| HTMLDivElement;\n private text: HTMLElement;\n private focusedByInput: boolean = false;\n\n componentDidRender() {\n requestAnimationFrame(() => {\n if (!this.nonInteractive) {\n this.tag?.setAttribute(\"s-object-id\", this.analyticsId \|\| this.text.innerText);\n }\n });\n }\n\n private renderInner(): DocumentFragment {\n return (\n <Fragment>\n <stzh-clamp\n lines={1}\n class=\"stzh-tag__label\"\n ref={(el) => (this.text = el as HTMLElement)}\n >\n {this.label ? this.label : <slot></slot>}\n </stzh-clamp>\n </Fragment>\n );\n }\n\n private onRootFocus = () => {\n if (!this.focusedByInput) {\n this.tag.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-tag\",\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-tag\",\n originalEvent: event\n });\n }\n\n private onClick = (event: MouseEvent) => {\n this.stzhClick.emit({\n component: \"stzh-tag\",\n originalEvent: event,\n href: this.href\n });\n }\n\n render() {\n const classes = {\n \"stzh-tag\": true,\n \"stzh-tag--is-disabled\": this.disabled,\n [`stzh-tag--size-${this.size}`]: !!this.size,\n [`stzh-tag--${this.type}`]: !!this.type\n };\n\n const Tag = this.nonInteractive ? \"div\" :\n this.href ? \"a\" : \"button\";\n\n return (\n <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n <div class={classes}>\n {this.href ?\n <Tag\n ref={(el) => (this.tag = el as HTMLAnchorElement)}\n class={{\n \"stzh-tag__button\": true,\n \"is-button\": !this.nonInteractive && !this.href,\n \"is-link\": !this.nonInteractive && !!this.href\n }}\n href={this.disabled ? null : this.href}\n target={this.target}\n tabindex={this.a11yTabindex}\n aria-label={this.a11yLabel \|\| null}\n aria-describedby={this.a11yDescribedby \|\| null}\n onClick={this.onClick}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n >\n {this.renderInner()}\n </Tag>\n :\n <Tag\n ref={(el) => (this.tag = el as HTMLButtonElement \| HTMLDivElement)}\n class={{\n \"stzh-tag__button\": true,\n \"is-button\": !this.nonInteractive && !this.href,\n \"is-link\": !this.nonInteractive && !!this.href\n }}\n disabled={this.disabled}\n type=\"button\"\n tabindex={this.a11yTabindex}\n aria-label={this.a11yLabel \|\| null}\n aria-describedby={this.a11yDescribedby \|\| null}\n onClick={this.onClick}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n >\n {this.renderInner()}\n </Tag>\n }\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-02bdd12e.js","mappings":"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","names":[],"sources":["src/components/stzh-tag/stzh-tag.scss?tag=stzh-tag&encapsulation=scoped","src/components/stzh-tag/stzh-tag.tsx"],"sourcesContent":[":host {\n --color: var(--stzh-tag-color, #{$colorSecondary60});\n --height: 24px;\n --padding-top: 0;\n --padding-bottom: 0;\n --padding-left: #{space('small')};\n --padding-right: #{space('small')};\n --background-color: var(--stzh-tag-background-color, #{$colorGrey20});\n\n --hover-color: var(--stzh-tag-hover-color, #{$colorSecondary60});\n --hover-background-color: var(--stzh-tag-hover-background-color, var(--background-color));\n\n display: inline-flex;\n\n &[size=\"large\"] {\n --height: 32px;\n }\n\n &[size=\"default\"][type=\"secondary\"] {\n --background-color: var(--stzh-tag-secondary-background-color, #{$colorSecondary60});\n }\n\n &[type=\"secondary\"] {\n --color: var(--stzh-tag-secondary-color, #{$colorWhite});\n --background-color: var(--stzh-tag-secondary-background-color, #{$colorSecondary60});\n --hover-color: var(--stzh-tag-secondary-hover-color, #{$colorWhite});\n --hover-background-color: var(--stzh-tag-secondary-hover-background-color, var(--background-color));\n }\n\n &[non-interactive]:not([non-interactive=\"false\"]) {\n --hover-color: var(--color);\n --hover-background-color: var(--background-color);\n }\n\n &[disabled]:not([disabled=\"false\"]) {\n --color: var(--stzh-tag-disabled-color, #{$colorGrey70});\n --background-color: var(--stzh-tag-disabled-background-color, #{$colorGrey20});\n\n --hover-color: var(--color);\n --hover-background-color: var(--background-color);\n }\n}\n\n.stzh-tag {\n position: relative;\n\n &__button {\n @include fontSize('nano');\n font-family: inherit;\n height: var(--height);\n display: flex;\n flex-direction: row;\n align-items: center;\n padding-top: var(--padding-top);\n padding-bottom: var(--padding-bottom);\n padding-left: var(--padding-left);\n padding-right: var(--padding-right);\n color: var(--color);\n appearance: none;\n border: none;\n background-color: var(--background-color);\n transition-duration: $baseTransitionAnimationSpeed;\n transition-property: color, background-color;\n text-decoration-line: none;\n\n &.is-button,\n &.is-link {\n cursor: pointer;\n }\n }\n\n &__label {\n text-align: left;\n }\n\n &__button:hover {\n color: var(--hover-color);\n background-color: var(--hover-background-color);\n }\n\n /* Size /\n\n &--size-large &__button {\n @include font('heavy');\n @include fontSize('milli');\n }\n\n / Disabled /\n\n &--is-disabled &__button {\n cursor: not-allowed;\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Event,\n EventEmitter,\n Element,\n Fragment\n} from \"@stencil/core\";\n\nimport {\n StzhTagType,\n StzhTagSize,\n StzhTagClickEvent,\n StzhTagFocusEvent,\n StzhTagBlurEvent\n} from \"../../index\";\n\n/\n @slot - Slot for label\n /\n@Component({\n tag: \"stzh-tag\",\n styleUrl: \"stzh-tag.scss\",\n scoped: true\n})\nexport class StzhTag {\n /* Label /\n @Prop() label: string = \"\";\n\n /* `href` if the tag should be used as link /\n @Prop() href: string = \"\";\n\n /* Target if the button is used as link (if `href` used) /\n @Prop() target: string = \"\";\n\n /* Whether tag is not interactive /\n @Prop({ reflect: true }) nonInteractive: boolean = false;\n\n /* Type /\n @Prop({ reflect: true }) type: StzhTagType = \"default\";\n\n /* Size /\n @Prop({ reflect: true }) size: StzhTagSize = \"default\";\n\n /* Disabled /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* Tabindex of link/button /\n @Prop({ attribute: \"a11y-tabindex\" }) a11yTabindex: string;\n\n /* Accessible label for screen readers to replace visible text /\n @Prop({ attribute: \"a11y-label\" }) a11yLabel: string;\n\n /* Id for element which describes the link/button /\n @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the link/button element.\n * Default value will be taken from `label` prop or default slot.\n /\n @Prop() analyticsId: string;\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the remove button element.\n * Default value will be taken from `removeLabel` prop.\n /\n @Prop() removeAnalyticsId: string;\n\n @Element() element: HTMLStzhTagElement;\n\n /* Click event /\n @Event() stzhClick: EventEmitter<StzhTagClickEvent>;\n\n /* Focus event /\n @Event() stzhFocus: EventEmitter<StzhTagFocusEvent>;\n\n /* Input blur event */\n @Event() stzhBlur: EventEmitter<StzhTagBlurEvent>;\n\n private tag: HTMLButtonElement \| HTMLAnchorElement \| HTMLDivElement;\n private text: HTMLElement;\n private focusedByInput: boolean = false;\n\n componentDidRender() {\n requestAnimationFrame(() => {\n if (!this.nonInteractive) {\n this.tag?.setAttribute(\"s-object-id\", this.analyticsId \|\| this.text.innerText);\n }\n });\n }\n\n private renderInner(): DocumentFragment {\n return (\n <Fragment>\n <stzh-clamp\n lines={1}\n class=\"stzh-tag__label\"\n ref={(el) => (this.text = el as HTMLElement)}\n >\n {this.label ? this.label : <slot></slot>}\n </stzh-clamp>\n </Fragment>\n );\n }\n\n private onRootFocus = () => {\n if (!this.focusedByInput) {\n this.tag.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-tag\",\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-tag\",\n originalEvent: event\n });\n }\n\n private onClick = (event: MouseEvent) => {\n this.stzhClick.emit({\n component: \"stzh-tag\",\n originalEvent: event,\n href: this.href\n });\n }\n\n render() {\n const classes = {\n \"stzh-tag\": true,\n \"stzh-tag--is-disabled\": this.disabled,\n [`stzh-tag--size-${this.size}`]: !!this.size,\n [`stzh-tag--${this.type}`]: !!this.type\n };\n\n const Tag = this.nonInteractive ? \"div\" :\n this.href ? \"a\" : \"button\";\n\n return (\n <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n <div class={classes}>\n {this.href ?\n <Tag\n ref={(el) => (this.tag = el as HTMLAnchorElement)}\n class={{\n \"stzh-tag__button\": true,\n \"is-button\": !this.nonInteractive && !this.href,\n \"is-link\": !this.nonInteractive && !!this.href\n }}\n href={this.disabled ? null : this.href}\n target={this.target}\n tabindex={this.a11yTabindex}\n aria-label={this.a11yLabel \|\| null}\n aria-describedby={this.a11yDescribedby \|\| null}\n onClick={this.onClick}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n >\n {this.renderInner()}\n </Tag>\n :\n <Tag\n ref={(el) => (this.tag = el as HTMLButtonElement \| HTMLDivElement)}\n class={{\n \"stzh-tag__button\": true,\n \"is-button\": !this.nonInteractive && !this.href,\n \"is-link\": !this.nonInteractive && !!this.href\n }}\n disabled={this.disabled}\n type=\"button\"\n tabindex={this.a11yTabindex}\n aria-label={this.a11yLabel \|\| null}\n aria-describedby={this.a11yDescribedby \|\| null}\n onClick={this.onClick}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n >\n {this.renderInner()}\n </Tag>\n }\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/{p-324831e2.js → p-0dae7190.js} RENAMED Viewed

@@ -2,8 +2,8 @@ import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-
 import { h as hasSlot } from './p-d1f98854.js';
 import { S as StzhInputDescription } from './p-6393ca35.js';
 import { d as defineCustomElement$3 } from './p-8d12a95f.js';
-import { d as defineCustomElement$2 } from './p-3d24141a.js';
-import { d as defineCustomElement$1 } from './p-adc06dc4.js';
+import { d as defineCustomElement$2 } from './p-7eced0db.js';
+import { d as defineCustomElement$1 } from './p-ae7adee7.js';
 const stzhRadioCss = ".sc-stzh-radio-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-radio-h,[stzh-hidden].sc-stzh-radio-h{display:none}.sc-stzh-radio-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-radio-h *.sc-stzh-radio,.sc-stzh-radio-h *.sc-stzh-radio::before,.sc-stzh-radio-h *.sc-stzh-radio::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-radio-h .has-focus.sc-stzh-radio{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-radio-h .stzh-fylingfocus-focused.sc-stzh-radio{outline-style:none !important}.sc-stzh-radio-h .stzh-fylingfocus-focused.sc-stzh-radio::-moz-focus-inner{border:0 !important}.sc-stzh-radio-h{--label-color:var(--stzh-radio-label-color, var(--stzh-base-color));--label-hover-color:var(--stzh-radio-label-hover-color, var(--stzh-color-primary70));--label-hover-checked-color:var(--stzh-radio-label-hover-checked-color, var(--stzh-color-primary90));display:inline-block}[disabled].sc-stzh-radio-h:not([disabled=false]){--description-color:var(--stzh-color-grey70)}.stzh-radio.sc-stzh-radio{display:grid}.stzh-radio__marker-symbol.sc-stzh-radio{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium)}.stzh-radio__marker-text.sc-stzh-radio{border:0;clip:rect(0 0 0 0);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-radio__description-wrapper.sc-stzh-radio{display:flex;flex-direction:column-reverse;min-height:var(--description-min-height, var(--stzh-description-min-height, none))}.stzh-radio__error.sc-stzh-radio,.stzh-radio__description.sc-stzh-radio{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}.stzh-radio__error.sc-stzh-radio{color:var(--stzh-color-error60)}.stzh-radio__error-list.sc-stzh-radio{list-style:none;margin:0;padding:0}.stzh-radio__description.sc-stzh-radio{display:flex;align-items:flex-start;color:var(--stzh-input-description-color, var(--description-color, var(--stzh-color-coolgrey70)));transition:color var(--stzh-base-transition-animation-speed)}.stzh-radio__description-long.sc-stzh-radio{margin-right:var(--stzh-space-xxsmall);margin-top:0.125rem}@supports (font: -apple-system-body) and (-webkit-appearance: none){.stzh-radio__description-long.sc-stzh-radio{margin-top:0}}.stzh-radio__description-long-popover.sc-stzh-radio{--width:auto;--max-width:27.3125rem}.stzh-radio__description-long-button.sc-stzh-radio{display:flex;justify-content:center;align-items:center;appearance:none;font-family:inherit;padding:0;border:none;background-color:transparent;border-radius:0.5rem;cursor:pointer}.stzh-radio.sc-stzh-radio stzh-icon.stzh-radio__description-long-icon.sc-stzh-radio{--size:var(--stzh-icon-size-xsmall)}.stzh-radio--has-error.sc-stzh-radio .stzh-radio__error.sc-stzh-radio,.stzh-radio--has-description.sc-stzh-radio .stzh-radio__description.sc-stzh-radio{margin-top:var(--stzh-space-xxxsmall)}.stzh-radio__field-wrapper.sc-stzh-radio{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);position:relative;display:flex;-webkit-user-select:none;user-select:none;cursor:pointer}.stzh-radio__input.sc-stzh-radio{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;z-index:-1;opacity:0;pointer-events:none;appearance:none;border-radius:var(--stzh-form-input-border-radius)}.stzh-radio__mark.sc-stzh-radio{border:0.125rem solid var(--stzh-color-black);background-color:var(--stzh-color-white);width:1.5rem;height:1.5rem;flex-shrink:0;border-radius:50%;display:inline-flex;justify-content:center;align-items:center;transition:border-color var(--stzh-base-transition-animation-speed)}.stzh-radio__mark.sc-stzh-radio::before{content:\"\"}.stzh-radio__check.sc-stzh-radio{background-color:currentColor;color:var(--stzh-color-primary70);width:1rem;height:1rem;border-radius:50%;opacity:0;transition-property:color;transition-duration:var(--stzh-base-transition-animation-speed)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-radio__check.sc-stzh-radio{background-color:ButtonText}}.stzh-radio__label.sc-stzh-radio{--stzh-base-color:initial;display:inline-block;color:var(--label-color);transition:color var(--stzh-base-transition-animation-speed);margin-left:var(--stzh-space-small);line-height:1.5rem}.stzh-radio__label.sc-stzh-radio:empty{display:none}.stzh-radio__marker.sc-stzh-radio{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);margin-left:calc(-0.25em + var(--stzh-space-xsmall))}.stzh-radio.sc-stzh-radio:hover .stzh-radio__label.sc-stzh-radio,.stzh-radio__input.sc-stzh-radio:checked~.stzh-radio__label.sc-stzh-radio{color:var(--label-hover-color)}.stzh-radio__input.sc-stzh-radio:checked:hover~.stzh-radio__label.sc-stzh-radio,.stzh-radio__input.sc-stzh-radio:checked:hover~.stzh-radio__mark.sc-stzh-radio .stzh-radio__check.sc-stzh-radio{color:var(--label-hover-checked-color)}.stzh-radio.sc-stzh-radio:hover .stzh-radio__mark.sc-stzh-radio,.stzh-radio__input.sc-stzh-radio:checked~.stzh-radio__mark.sc-stzh-radio{border-color:var(--label-hover-color)}.stzh-radio__input.sc-stzh-radio:checked:hover~.stzh-radio__mark.sc-stzh-radio{border-color:var(--label-hover-checked-color)}.stzh-radio__input.sc-stzh-radio:checked~.stzh-radio__mark.sc-stzh-radio .stzh-radio__check.sc-stzh-radio{opacity:1}.stzh-radio--is-invalid.sc-stzh-radio .stzh-radio__input.sc-stzh-radio~.stzh-radio__label.sc-stzh-radio,.stzh-radio--is-invalid.sc-stzh-radio .stzh-radio__input.sc-stzh-radio~.stzh-radio__mark.sc-stzh-radio .stzh-radio__check.sc-stzh-radio{color:var(--stzh-color-error60)}.stzh-radio--is-invalid.sc-stzh-radio .stzh-radio__input.sc-stzh-radio~.stzh-radio__mark.sc-stzh-radio{border-color:var(--stzh-color-error60)}.stzh-radio--is-disabled.sc-stzh-radio .stzh-radio__field-wrapper.sc-stzh-radio{cursor:not-allowed}.stzh-radio--is-disabled.sc-stzh-radio .stzh-radio__input.sc-stzh-radio~.stzh-radio__label.sc-stzh-radio{color:var(--stzh-color-grey60)}.stzh-radio--is-disabled.sc-stzh-radio .stzh-radio__input.sc-stzh-radio~.stzh-radio__mark.sc-stzh-radio .stzh-radio__check.sc-stzh-radio{color:var(--stzh-color-grey50)}.stzh-radio--is-disabled.sc-stzh-radio .stzh-radio__input.sc-stzh-radio~.stzh-radio__mark.sc-stzh-radio{border-color:var(--stzh-color-grey50)}.stzh-radio--is-disabled.sc-stzh-radio .stzh-radio__mark.sc-stzh-radio{background-color:var(--stzh-color-grey20)}";
 const StzhRadioStyle0 = stzhRadioCss;
@@ -187,4 +187,4 @@ function defineCustomElement() {
 export { StzhRadio as S, defineCustomElement as d };
-//# sourceMappingURL=p-324831e2.js.map
+//# sourceMappingURL=p-0dae7190.js.map

package/dist/components/{p-324831e2.js.map → p-0dae7190.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-324831e2.js","mappings":"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","names":[],"sources":["src/components/stzh-radio/stzh-radio.scss?tag=stzh-radio&encapsulation=scoped","src/components/stzh-radio/stzh-radio.tsx"],"sourcesContent":[":host {\n --label-color: var(--stzh-radio-label-color, #{$baseColor});\n --label-hover-color: var(--stzh-radio-label-hover-color, #{$colorPrimary70});\n --label-hover-checked-color: var(--stzh-radio-label-hover-checked-color, #{$colorPrimary90});\n\n display: inline-block;\n\n &[disabled]:not([disabled=\"false\"]) {\n --description-color: #{$formDisabledColor};\n }\n}\n\n.stzh-radio {\n @include input-description;\n display: grid;\n\n &__field-wrapper {\n @include fontSize('milli');\n position: relative;\n display: flex;\n user-select: none;\n cursor: pointer;\n }\n\n &__input {\n @include visuallyhiddenInput;\n border-radius: $formInputBorderRadius;\n }\n\n &__mark {\n @include radio__mark();\n }\n\n &__check {\n @include radio__check();\n }\n\n &__label {\n --stzh-base-color: initial;\n\n display: inline-block;\n color: var(--label-color);\n transition: color $baseTransitionAnimationSpeed;\n margin-left: space('small');\n line-height: 24px;\n\n &:empty {\n display: none;\n }\n }\n\n &__marker {\n @include fontSize('micro');\n margin-left: calc(-0.25em + #{space('xsmall')});\n }\n\n /* Hover / Focus / Checked /\n\n &:hover &__label,\n &__input:checked ~ &__label {\n color: var(--label-hover-color);\n }\n\n &__input:checked:hover ~ &__label,\n &__input:checked:hover ~ &__mark &__check {\n color: var(--label-hover-checked-color);\n }\n\n &:hover &__mark,\n &__input:checked ~ &__mark {\n border-color: var(--label-hover-color);\n }\n\n &__input:checked:hover ~ &__mark {\n border-color: var(--label-hover-checked-color);\n }\n\n &__input:checked ~ &__mark &__check {\n opacity: 1;\n }\n\n / Invalid /\n\n &--is-invalid &__input ~ &__label,\n &--is-invalid &__input ~ &__mark &__check {\n color: $colorError60;\n }\n\n &--is-invalid &__input ~ &__mark {\n border-color: $colorError60;\n }\n\n / Disabled /\n\n\t&--is-disabled &__field-wrapper {\n cursor: not-allowed;\n }\n\n &--is-disabled &__input ~ &__label {\n color: $colorGrey60;\n }\n\n &--is-disabled &__input ~ &__mark &__check {\n color: $colorGrey50;\n }\n\n &--is-disabled &__input ~ &__mark {\n border-color: $colorGrey50;\n }\n\n &--is-disabled &__mark {\n background-color: $colorGrey20;\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Prop, Watch } from \"@stencil/core\";\n\nimport { StzhRadioBlurEvent, StzhRadioChangeEvent, StzhRadioFocusEvent } from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../index\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\nlet radioCounter = 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-radio\",\n styleUrl: \"stzh-radio.scss\",\n scoped: true,\n})\nexport class StzhRadio {\n /* Translation strings /\n @Prop() localization: StzhLocaleComponent;\n\n /* Whether the element is disabled or not /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* The name of the input element /\n @Prop({ reflect: true }) name: string = \"\";\n\n /* The 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 /* 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 /* 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 radio button (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) /\n @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n /* Input change event /\n @Event() stzhChange: EventEmitter<StzhRadioChangeEvent>;\n\n /* Input focus event /\n @Event() stzhFocus: EventEmitter<StzhRadioFocusEvent>;\n\n /* Input blur event */\n @Event() stzhBlur: EventEmitter<StzhRadioBlurEvent>;\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-radio\",\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-radio\",\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-radio\",\n originalEvent: event,\n });\n };\n\n async componentWillLoad() {\n this.inputId = `stzh-radio-${radioCounter++}`;\n this.errorWatcher(this.error);\n\n this.defaultChecked = typeof this.defaultChecked === \"boolean\" ? this.defaultChecked : this.checked;\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"radio\");\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 classes = {\n \"stzh-radio\": true,\n \"stzh-radio--has-description\": descriptionUsed,\n \"stzh-radio--has-description-long\": descriptionLongUsed,\n \"stzh-radio--has-error\": errorUsed,\n \"stzh-radio--is-required\": this.required,\n \"stzh-radio--is-invalid\": this.invalid \|\| errorUsed,\n \"stzh-radio--is-disabled\": this.disabled,\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-radio__field-wrapper\">\n <input\n class=\"stzh-radio__input\"\n ref={el => (this.input = el as HTMLInputElement)}\n type=\"radio\"\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-radio__mark\">\n <div class=\"stzh-radio__check\"></div>\n </div>\n <div class=\"stzh-radio__label\">\n {this.label ? this.label : <slot></slot>}\n {!this.hideOptional && (\n <span class=\"stzh-radio__marker\">\n <span class=\"stzh-radio__marker-symbol\" aria-hidden=\"true\">\n {this.required\n ? this.localization.$globals.requiredFieldMarker\n : this.localization.$globals.optionalFieldMarker}\n </span>\n <span class=\"stzh-radio__marker-text\">\n {this.required\n ? this.localization.$globals.requiredFieldText\n : this.localization.$globals.optionalFieldText}\n </span>\n </span>\n )}\n </div>\n </label>\n {(this._error?.length > 0 \|\| this.description) && (\n <StzhInputDescription\n classPrefix=\"stzh-radio\"\n id={`${this.inputId}-description`}\n error={this._error}\n description={this.description}\n descriptionLong={this.descriptionLong}\n descriptionLongTitle={this.descriptionLongTitle}\n descriptionLongUsed={descriptionLongUsed}\n moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n />\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-0dae7190.js","mappings":"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","names":[],"sources":["src/components/stzh-radio/stzh-radio.scss?tag=stzh-radio&encapsulation=scoped","src/components/stzh-radio/stzh-radio.tsx"],"sourcesContent":[":host {\n --label-color: var(--stzh-radio-label-color, #{$baseColor});\n --label-hover-color: var(--stzh-radio-label-hover-color, #{$colorPrimary70});\n --label-hover-checked-color: var(--stzh-radio-label-hover-checked-color, #{$colorPrimary90});\n\n display: inline-block;\n\n &[disabled]:not([disabled=\"false\"]) {\n --description-color: #{$formDisabledColor};\n }\n}\n\n.stzh-radio {\n @include input-description;\n display: grid;\n\n &__field-wrapper {\n @include fontSize('milli');\n position: relative;\n display: flex;\n user-select: none;\n cursor: pointer;\n }\n\n &__input {\n @include visuallyhiddenInput;\n border-radius: $formInputBorderRadius;\n }\n\n &__mark {\n @include radio__mark();\n }\n\n &__check {\n @include radio__check();\n }\n\n &__label {\n --stzh-base-color: initial;\n\n display: inline-block;\n color: var(--label-color);\n transition: color $baseTransitionAnimationSpeed;\n margin-left: space('small');\n line-height: 24px;\n\n &:empty {\n display: none;\n }\n }\n\n &__marker {\n @include fontSize('micro');\n margin-left: calc(-0.25em + #{space('xsmall')});\n }\n\n /* Hover / Focus / Checked /\n\n &:hover &__label,\n &__input:checked ~ &__label {\n color: var(--label-hover-color);\n }\n\n &__input:checked:hover ~ &__label,\n &__input:checked:hover ~ &__mark &__check {\n color: var(--label-hover-checked-color);\n }\n\n &:hover &__mark,\n &__input:checked ~ &__mark {\n border-color: var(--label-hover-color);\n }\n\n &__input:checked:hover ~ &__mark {\n border-color: var(--label-hover-checked-color);\n }\n\n &__input:checked ~ &__mark &__check {\n opacity: 1;\n }\n\n / Invalid /\n\n &--is-invalid &__input ~ &__label,\n &--is-invalid &__input ~ &__mark &__check {\n color: $colorError60;\n }\n\n &--is-invalid &__input ~ &__mark {\n border-color: $colorError60;\n }\n\n / Disabled /\n\n\t&--is-disabled &__field-wrapper {\n cursor: not-allowed;\n }\n\n &--is-disabled &__input ~ &__label {\n color: $colorGrey60;\n }\n\n &--is-disabled &__input ~ &__mark &__check {\n color: $colorGrey50;\n }\n\n &--is-disabled &__input ~ &__mark {\n border-color: $colorGrey50;\n }\n\n &--is-disabled &__mark {\n background-color: $colorGrey20;\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Prop, Watch } from \"@stencil/core\";\n\nimport { StzhRadioBlurEvent, StzhRadioChangeEvent, StzhRadioFocusEvent } from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../index\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\nlet radioCounter = 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-radio\",\n styleUrl: \"stzh-radio.scss\",\n scoped: true,\n})\nexport class StzhRadio {\n /* Translation strings /\n @Prop() localization: StzhLocaleComponent;\n\n /* Whether the element is disabled or not /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* The name of the input element /\n @Prop({ reflect: true }) name: string = \"\";\n\n /* The 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 /* 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 /* 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 radio button (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) /\n @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n /* Input change event /\n @Event() stzhChange: EventEmitter<StzhRadioChangeEvent>;\n\n /* Input focus event /\n @Event() stzhFocus: EventEmitter<StzhRadioFocusEvent>;\n\n /* Input blur event */\n @Event() stzhBlur: EventEmitter<StzhRadioBlurEvent>;\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-radio\",\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-radio\",\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-radio\",\n originalEvent: event,\n });\n };\n\n async componentWillLoad() {\n this.inputId = `stzh-radio-${radioCounter++}`;\n this.errorWatcher(this.error);\n\n this.defaultChecked = typeof this.defaultChecked === \"boolean\" ? this.defaultChecked : this.checked;\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"radio\");\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 classes = {\n \"stzh-radio\": true,\n \"stzh-radio--has-description\": descriptionUsed,\n \"stzh-radio--has-description-long\": descriptionLongUsed,\n \"stzh-radio--has-error\": errorUsed,\n \"stzh-radio--is-required\": this.required,\n \"stzh-radio--is-invalid\": this.invalid \|\| errorUsed,\n \"stzh-radio--is-disabled\": this.disabled,\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-radio__field-wrapper\">\n <input\n class=\"stzh-radio__input\"\n ref={el => (this.input = el as HTMLInputElement)}\n type=\"radio\"\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-radio__mark\">\n <div class=\"stzh-radio__check\"></div>\n </div>\n <div class=\"stzh-radio__label\">\n {this.label ? this.label : <slot></slot>}\n {!this.hideOptional && (\n <span class=\"stzh-radio__marker\">\n <span class=\"stzh-radio__marker-symbol\" aria-hidden=\"true\">\n {this.required\n ? this.localization.$globals.requiredFieldMarker\n : this.localization.$globals.optionalFieldMarker}\n </span>\n <span class=\"stzh-radio__marker-text\">\n {this.required\n ? this.localization.$globals.requiredFieldText\n : this.localization.$globals.optionalFieldText}\n </span>\n </span>\n )}\n </div>\n </label>\n {(this._error?.length > 0 \|\| this.description) && (\n <StzhInputDescription\n classPrefix=\"stzh-radio\"\n id={`${this.inputId}-description`}\n error={this._error}\n description={this.description}\n descriptionLong={this.descriptionLong}\n descriptionLongTitle={this.descriptionLongTitle}\n descriptionLongUsed={descriptionLongUsed}\n moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n />\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/{p-631b7bfa.js → p-123ddd01.js} RENAMED Viewed

@@ -57,11 +57,11 @@ const StzhStepperItem = /*@__PURE__*/ proxyCustomElement(class StzhStepperItem e
             "stzh-stepper-item--passed": this.passed,
             "stzh-stepper-item--passed-incomplete": this.passed && this.incomplete
         };
-        const dotted = (h("span", { key: '68f87db5d84c53adc85e250d6849e05a35637963' }, !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: '35b17422b511e52f4eb31157651b6a7fd77ddd70' }, h("span", { key: 'b2cdd6251bd67609fc42b1bbf55b9b90b1d5c01e', class: "stzh-stepper-item__number-block" }, this.icon
+        const dotted = (h("span", { key: 'bec4fc0fc7a2e4ff36077b0ea4fcbab4547124b6' }, !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: 'c55480eb153827d56915b21097b2bc175c3bedb5' }, h("span", { key: 'fb1e48fa298ae59bc5cf88a1bf2c156e165514a5', 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: '87b4c82329d5a679ed6f16598313a0d4a9485c7a', ref: (el) => (this.text = el), class: "stzh-stepper-item__label-block" }, this.label ? this.label : h("slot", null))));
-        return (h(Host, { key: 'c2fef2f363d22e55ee6885c9a2d91f5864c4452b', role: "listitem" }, h("div", { key: '6c56cb2b34ffc7a2c396b430c16e39bb8aeb4e7e', 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("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: 'b698342975678c9ec862d532c52697b4ef8b24c4', ref: (el) => (this.text = el), class: "stzh-stepper-item__label-block" }, this.label ? this.label : h("slot", null))));
+        return (h(Host, { key: '9b03bf33bfe90ca4a9be7454d60b2e1ab7c376cb', role: "listitem" }, h("div", { key: '2dd2ed128f32b65e41a9de6799a337c91cf03b6b', 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 })
             :
@@ -106,4 +106,4 @@ function defineCustomElement() {
 export { StzhStepperItem as S, defineCustomElement as d };
-//# sourceMappingURL=p-631b7bfa.js.map
+//# sourceMappingURL=p-123ddd01.js.map

package/dist/components/{p-631b7bfa.js.map → p-123ddd01.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-631b7bfa.js","mappings":"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","names":[],"sources":["src/components/stzh-stepper-item/stzh-stepper-item.scss?tag=stzh-stepper-item&encapsulation=scoped","src/components/stzh-stepper-item/stzh-stepper-item.tsx"],"sourcesContent":[":host {\n}\n\n:host([hide]) {\n\tdisplay: none;\n}\n\n.stzh-stepper-item {\n text-align: center;\n\n &__button,\n &__unclickable {\n appearance: none;\n font-family: inherit;\n background-color: transparent;\n border: none;\n border-radius: $formInputBorderRadius;\n }\n\n &__button {\n cursor: pointer;\n }\n\n &__unclickable {\n cursor: default;\n pointer-events: none;\n }\n\n &__button:hover &__number-block,\n &__button:focus &__number-block {\n color: $colorPrimaryHover;\n border-color: $colorPrimaryHover;\n\n @include highContrast() {\n color: Highlight;\n border-color: Highlight;\n }\n\n &::after {\n background-color: $colorOldPrimary8;\n }\n }\n\n &__button:hover &__label-block,\n &__button:focus &__label-block {\n color: $colorPrimaryHover;\n\n @include highContrast() {\n color: Highlight;\n }\n }\n\n /* what we do here is:\n add a gray line on the last element, which strikes through all previous ones,\n add a blue line on the current step which covers all previous elements relative to itself\n and add a white line on the first element, which gives you the illusion that it stopped. /\n\n &__number-block {\n @include font('heavy');\n @include fontCurve('p1');\n position: relative;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n width: $stepperItemSize;\n height: $stepperItemSize;\n background-color: $colorWhite;\n border: solid 1px $baseBorderColor;\n border-radius: $stepperItemSmallUp 0.5;\n text-align: center;\n box-sizing: border-box;\n color: $colorOldGrey55;\n transition-property: color, border-color;\n transition-duration: $baseTransitionAnimationSpeed;\n\n @include mq($from: small) {\n width: $stepperItemSmallUp;\n height: $stepperItemSmallUp;\n margin-bottom: space('large');\n }\n\n\t\t// set a line on every element, but hide it by default\n &::before {\n display: none;\n content: '';\n position: absolute;\n top: 16px;\n right: $stepperItemSize - 1px;\n width: 100vw;\n height: 1px;\n background-color: $baseBorderColor;\n z-index: -2;\n overflow: hidden;\n\n @include mq($from: small) {\n top: 20px;\n right: $stepperItemSmallUp - 1px;\n }\n }\n }\n\n &__number-block,\n &__dotted {\n &::after {\n content: '';\n z-index: 0;\n position: absolute;\n display: block;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n border-radius: $stepperItemSmallUp * 0.5;\n transition: background-color $baseTransitionAnimationSpeed;\n }\n }\n\n &__label-block {\n display: block;\n font-size: 14px;\n line-height: 1.28;\n color: $colorOldGrey55;\n padding: space('xxsmall') space('small');\n letter-spacing: 0.01em;\n transition: color $baseTransitionAnimationSpeed;\n\n @include mq($to: small) {\n @include visuallyhidden;\n }\n }\n\n &__number,\n &__icon,\n &__user-icon,\n &__dotted-icon {\n z-index: 1;\n }\n\n &__icon,\n &__user-icon,\n &__dotted-icon {\n --size: #{iconSize('xsmall')};\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n color: $colorPrimary;\n\n @include highContrast() {\n color: CanvasText;\n }\n }\n\n &__user-icon {\n --size: #{iconSize('small')};\n color: currentColor;\n }\n\n &__dotted {\n z-index: 1;\n appearance: none;\n font-family: inherit;\n position: absolute;\n top: 3px;\n width: $stepperItemDottedSize;\n height: $stepperItemDottedSize;\n background-color: $colorWhite;\n border: solid 1px $baseBorderColor;\n border-radius: 50%;\n cursor: pointer;\n transition-property: color, border-color;\n transition-duration: $baseTransitionAnimationSpeed;\n\n &:hover,\n &:focus {\n border-color: $colorPrimaryHover;\n\n @include highContrast() {\n border-color: Highlight;\n }\n }\n\n &:hover::after,\n &:focus::after {\n background-color: $colorOldPrimary8;\n\n @include highContrast() {\n background-color: Canvas;\n }\n }\n\n &__disabled {\n cursor: default;\n\n &:hover,\n &:focus {\n border-color: var(--stzh-base-border-color);\n cursor: default;\n }\n\n &:hover::after,\n &:focus::after {\n background-color: inherit;\n }\n }\n\n @include mq($from: small) {\n top: 5px;\n width: $stepperItemDottedSizeSmallUp;\n height: $stepperItemDottedSizeSmallUp;\n }\n }\n\n &__dotted:hover &__dotted-icon,\n &__dotted:focus &__dotted-icon {\n color: $colorPrimaryHover;\n\n @include highContrast() {\n color: Highlight;\n }\n }\n\n /* First and Last /\n\n &--first &__number-block,\n &--last &__number-block {\n &::before {\n display: block\n }\n }\n\n / First /\n\n &--first {\n position: relative;\n }\n\n &--first &__dotted {\n left: 50%;\n transform: translateX(-50%);\n }\n\n / Last /\n\n &--last &__dotted {\n // position the dots based on the width divided by the elements minus half of itself\n right: calc((100% / var(--steps)) - (#{$stepperItemDottedSize 0.5}));\n\n @include mq($from: small) {\n right: calc((100% / var(--steps)) - (#{$stepperItemDottedSizeSmallUp * 0.5}));\n }\n }\n\n /* Passed /\n\n &--passed &__label-block {\n @include font('heavy');\n color: $colorPrimary;\n }\n\n &--passed &__number-block {\n background-color: $colorWhite;\n border: solid 1px $colorPrimary;\n\n @include highContrast() {\n background-color: Canvas;\n border-color: CanvasText;\n }\n }\n\n &--passed &__user-icon {\n color: $colorPrimary;\n }\n\n &--passed &__button:hover &__user-icon,\n &--passed &__button:focus &__user-icon {\n color: $colorPrimaryHover;\n\n @include highContrast() {\n color: Highlight;\n }\n }\n\n / Styles specific to passed items that are not incomplete /\n &--passed:not(&--passed-incomplete) &__number-block,\n &--passed:not(&--passed-incomplete) &__button:hover &__number-block,\n &--passed:not(&--passed-incomplete) &__button:focus &__number-block {\n color: transparent;\n\n @include highContrast() {\n color: Canvas;\n }\n }\n\n &--passed:not(&--passed-incomplete) &__button:hover &__number-block,\n &--passed:not(&--passed-incomplete) &__button:focus &__number-block {\n border-color: $colorPrimary;\n\n @include highContrast() {\n border-color: Highlight;\n }\n }\n\n / Styles specific to passed items that are incomplete /\n &--passed-incomplete &__number-block {\n color: $colorPrimary;\n\n @include highContrast() {\n color: $colorPrimary;\n }\n }\n\n &--passed-incomplete &__button:hover &__number-block,\n &--passed-incomplete &__button:focus &__number-block {\n color: $colorPrimaryHover;\n border-color: $colorPrimary;\n\n @include highContrast() {\n color: Highlight;\n border-color: Highlight;\n }\n }\n\n / Current /\n\n &--current &__label-block {\n @include font('heavy');\n color: $colorPrimary;\n\n @include highContrast() {\n color: SelectedItem;\n }\n\n &:hover {\n text-decoration-line: none;\n }\n }\n\n &--current &__number-block {\n background-color: $colorPrimary;\n border: solid 1px $colorPrimary;\n color: $colorWhite;\n\n @include highContrast() {\n color: SelectedItem;\n border-color: SelectedItem;\n background-color: Canvas;\n }\n\n // make line blue (see desc)\n &::before {\n display: block;\n background-color: $colorPrimary;\n z-index: -1;\n\n @include highContrast() {\n background-color: CanvasText;\n }\n }\n }\n\n &--current &__button:hover &__number-block,\n &--current &__button:focus &__number-block {\n color: $colorWhite;\n\n @include highContrast() {\n color: Highlight;\n }\n\n &::after {\n background-color: $colorPrimaryHover;\n\n @include highContrast() {\n background-color: Canvas;\n }\n }\n }\n\n &--current &__user-icon {\n @include highContrast() {\n color: SelectedItem;\n }\n }\n\n &--current &__button:hover &__icon,\n &--current &__button:focus &__icon,\n &--current &__button:hover &__user-icon,\n &--current &__button:focus &__user-icon {\n @include highContrast() {\n color: Highlight;\n }\n }\n\n / Dotted /\n\n &--dotted#{&}--first &__number-block {\n margin-bottom: 0;\n\n &::after {\n display: none;\n }\n }\n\n &--dotted#{&}--first &__button {\n padding-left: 0;\n padding-right: 0;\n }\n\n // hide number block behind dotted element\n &--dotted#{&}--first &__number-block {\n position: relative;\n z-index: 0;\n top: 5px;\n width: $stepperItemDottedSize;\n height: $stepperItemDottedSize;\n border: none;\n background-color: transparent;\n\n // change dimensions to be still hidden\n @include mq($from: small) {\n top: 8px;\n width: $stepperItemDottedSizeSmallUp;\n height: $stepperItemDottedSizeSmallUp;\n }\n\n // realign white line\n &::before {\n top: 12px;\n right: 26px;\n\n @include mq($from: small) {\n top: 13px;\n right: 30px;\n }\n }\n }\n\n &--dotted#{&}--first &__label-block {\n\t\tdisplay: none;\n }\n\n // first child overwrite white line (see desc) /\n &--first &__number-block {\n &::before {\n background-color: $colorWhite;\n z-index: 1;\n\n @include highContrast() {\n background-color: Canvas;\n }\n }\n }\n\n /* Disabled /\n\n &--is-disabled &__button {\n cursor: not-allowed;\n }\n\n &--is-disabled &__button:hover &__number-block,\n &--is-disabled &__button:focus &__number-block {\n color: $colorOldGrey55;\n border-color: $baseBorderColor;\n\n @include highContrast() {\n color: GrayText;\n border-color: GrayText;\n }\n\n &::after {\n display: none;\n }\n }\n\n &--is-disabled &__button:hover &__label-block,\n &--is-disabled &__button:focus &__label-block {\n color: $colorOldGrey55;\n\n @include highContrast() {\n color: GrayText;\n }\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Element,\n Fragment,\n Event,\n EventEmitter\n} from \"@stencil/core\";\n\nimport {\n StzhStepperItemClickEvent,\n StzhStepperItemDottedClickEvent\n} from '../../index';\n\n/\n @slot - Slot for label (or use label prop)\n /\n@Component({\n tag: \"stzh-stepper-item\",\n styleUrl: \"stzh-stepper-item.scss\",\n scoped: true\n})\nexport class StzhStepperItem {\n /* The label of the item. /\n @Prop({ reflect: true }) label: string;\n\n /* When true, it displays a not-allowed cursor on hover. Use this for steps that are not applicable. /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* Whether it's the first item (used internally by stzh-stepper). /\n @Prop({ reflect: true }) first: boolean = false;\n\n /* Whether it's the last item (used internally by stzh-stepper). /\n @Prop({ reflect: true }) last: boolean = false;\n\n /* True when the item index is lower than the current index (used internally by stzh-stepper). /\n @Prop({ reflect: true }) passed: boolean = false;\n\n /* For passed items, this prevents displaying a checked icon when true (shows step number instead). /\n @Prop({ reflect: true }) incomplete: boolean = false;\n\n /* Whether it's the last item (used internally by stzh-stepper). /\n @Prop({ reflect: true }) current: boolean = false;\n\n /* Whether it's a hidden item (used internally by stzh-stepper). /\n @Prop({ reflect: true }) hide: boolean = false;\n\n /* Whether it's a dotted item (used internally by stzh-stepper). /\n @Prop({ reflect: true }) dotted: boolean = false;\n\n /* The number of the step (used internally by stzh-stepper). /\n @Prop({ reflect: true }) step: number = 1;\n\n /* Displays a custom icon instead of the step number. /\n @Prop({ reflect: true }) icon: string = \"\";\n\n /* When true, it displays a default cursor on hover and no click event is emitted. /\n @Prop() clickDisabled: boolean = false;\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the button element.\n * Default value will be taken from `label` prop or default slot.\n /\n @Prop() analyticsId: string;\n\n /* Click event /\n @Event() stzhClick: EventEmitter<StzhStepperItemClickEvent>;\n\n /* Dotted click event */\n @Event() stzhDottedClick: EventEmitter<StzhStepperItemDottedClickEvent>;\n\n @Element() element: HTMLStzhStepperItemElement;\n\n private button: HTMLButtonElement;\n private text: HTMLElement;\n\n private onClick = (event: MouseEvent) => {\n this.stzhClick.emit({\n component: \"stzh-stepper-item\",\n originalEvent: event,\n index: Array.prototype.indexOf.call(this.element.parentNode.children, this.element),\n });\n }\n\n private onDottedClick = (event: MouseEvent) => {\n this.stzhDottedClick.emit({\n component: \"stzh-stepper-item\",\n originalEvent: event,\n index: Array.prototype.indexOf.call(this.element.parentNode.children, this.element),\n });\n }\n\n componentDidRender() {\n requestAnimationFrame(() => {\n this.button?.setAttribute(\"s-object-id\", this.analyticsId \|\| this.text.innerText);\n });\n }\n\n render() {\n const classes = {\n \"stzh-stepper-item\": true,\n \"stzh-stepper-item--first\": this.first,\n \"stzh-stepper-item--last\": this.last,\n \"stzh-stepper-item--current\": this.current,\n \"stzh-stepper-item--hide\": this.hide,\n \"stzh-stepper-item--dotted\": this.dotted,\n \"stzh-stepper-item--has-icon\": !!this.icon,\n \"stzh-stepper-item--is-disabled\": this.disabled,\n \"stzh-stepper-item--passed\": this.passed,\n \"stzh-stepper-item--passed-incomplete\": this.passed && this.incomplete\n };\n\n const dotted = (\n <span>\n {!this.clickDisabled ? (\n <button\n class=\"stzh-stepper-item__dotted\"\n onClick={this.onDottedClick}\n >\n <stzh-icon class=\"stzh-stepper-item__dotted-icon\" name=\"more-horizontal\"></stzh-icon>\n </button>\n ) : (\n <div class=\"stzh-stepper-item__dotted stzh-stepper-item__dotted__disabled\">\n <stzh-icon class=\"stzh-stepper-item__dotted-icon\" name=\"more-horizontal\"></stzh-icon>\n </div>\n )}\n </span>\n );\n\n const content = (\n <span>\n <span class=\"stzh-stepper-item__number-block\">\n {this.icon\n ? <stzh-icon class=\"stzh-stepper-item__user-icon\" name={this.icon}></stzh-icon>\n : (\n <span>\n <span class=\"stzh-stepper-item__number\">{this.step}</span>\n {this.passed && !this.incomplete && (<stzh-icon class=\"stzh-stepper-item__icon\" name=\"checkmark\"></stzh-icon>)}\n </span>\n )\n }\n </span>\n <span\n ref={(el) => (this.text = el as HTMLElement)}\n class=\"stzh-stepper-item__label-block\"\n >\n {this.label ? this.label : <slot></slot>}\n </span>\n </span>\n );\n\n return (\n <Host role=\"listitem\">\n <div class={classes}>\n {this.last && this.dotted && dotted}\n {this.clickDisabled ? (\n <div class=\"stzh-stepper-item__unclickable\" aria-pressed={this.current ? \"true\" : \"false\"}>\n {content}\n </div>\n ) : (\n <button\n ref={(el) => (this.button = el as HTMLButtonElement)}\n class=\"stzh-stepper-item__button\"\n aria-pressed={this.current ? \"true\" : \"false\"}\n disabled={(this.dotted && this.first) \|\| this.disabled}\n onClick={this.onClick}\n >\n <span class=\"stzh-stepper-item__number-block\">\n {this.icon\n ?\n <stzh-icon class=\"stzh-stepper-item__user-icon\" name={this.icon}></stzh-icon>\n :\n <Fragment>\n <span class=\"stzh-stepper-item__number\">{this.step}</span>\n {\n this.passed && !this.incomplete &&\n (<stzh-icon class=\"stzh-stepper-item__icon\" name=\"checkmark\"></stzh-icon>)\n }\n </Fragment>\n }\n </span>\n <span\n ref={(el) => (this.text = el as HTMLElement)}\n class=\"stzh-stepper-item__label-block\"\n >\n {this.label ? this.label : <slot></slot>}\n </span>\n </button>\n )}\n {this.first && this.dotted && dotted}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-123ddd01.js","mappings":"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","names":[],"sources":["src/components/stzh-stepper-item/stzh-stepper-item.scss?tag=stzh-stepper-item&encapsulation=scoped","src/components/stzh-stepper-item/stzh-stepper-item.tsx"],"sourcesContent":[":host {\n}\n\n:host([hide]) {\n\tdisplay: none;\n}\n\n.stzh-stepper-item {\n text-align: center;\n\n &__button,\n &__unclickable {\n appearance: none;\n font-family: inherit;\n background-color: transparent;\n border: none;\n border-radius: $formInputBorderRadius;\n }\n\n &__button {\n cursor: pointer;\n }\n\n &__unclickable {\n cursor: default;\n pointer-events: none;\n }\n\n &__button:hover &__number-block,\n &__button:focus &__number-block {\n color: $colorPrimaryHover;\n border-color: $colorPrimaryHover;\n\n @include highContrast() {\n color: Highlight;\n border-color: Highlight;\n }\n\n &::after {\n background-color: $colorOldPrimary8;\n }\n }\n\n &__button:hover &__label-block,\n &__button:focus &__label-block {\n color: $colorPrimaryHover;\n\n @include highContrast() {\n color: Highlight;\n }\n }\n\n /* what we do here is:\n add a gray line on the last element, which strikes through all previous ones,\n add a blue line on the current step which covers all previous elements relative to itself\n and add a white line on the first element, which gives you the illusion that it stopped. /\n\n &__number-block {\n @include font('heavy');\n @include fontCurve('p1');\n position: relative;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n width: $stepperItemSize;\n height: $stepperItemSize;\n background-color: $colorWhite;\n border: solid 1px $baseBorderColor;\n border-radius: $stepperItemSmallUp 0.5;\n text-align: center;\n box-sizing: border-box;\n color: $colorOldGrey55;\n transition-property: color, border-color;\n transition-duration: $baseTransitionAnimationSpeed;\n\n @include mq($from: small) {\n width: $stepperItemSmallUp;\n height: $stepperItemSmallUp;\n margin-bottom: space('large');\n }\n\n\t\t// set a line on every element, but hide it by default\n &::before {\n display: none;\n content: '';\n position: absolute;\n top: 16px;\n right: $stepperItemSize - 1px;\n width: 100vw;\n height: 1px;\n background-color: $baseBorderColor;\n z-index: -2;\n overflow: hidden;\n\n @include mq($from: small) {\n top: 20px;\n right: $stepperItemSmallUp - 1px;\n }\n }\n }\n\n &__number-block,\n &__dotted {\n &::after {\n content: '';\n z-index: 0;\n position: absolute;\n display: block;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n border-radius: $stepperItemSmallUp * 0.5;\n transition: background-color $baseTransitionAnimationSpeed;\n }\n }\n\n &__label-block {\n display: block;\n font-size: 14px;\n line-height: 1.28;\n color: $colorOldGrey55;\n padding: space('xxsmall') space('small');\n letter-spacing: 0.01em;\n transition: color $baseTransitionAnimationSpeed;\n\n @include mq($to: small) {\n @include visuallyhidden;\n }\n }\n\n &__number,\n &__icon,\n &__user-icon,\n &__dotted-icon {\n z-index: 1;\n }\n\n &__icon,\n &__user-icon,\n &__dotted-icon {\n --size: #{iconSize('xsmall')};\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n color: $colorPrimary;\n\n @include highContrast() {\n color: CanvasText;\n }\n }\n\n &__user-icon {\n --size: #{iconSize('small')};\n color: currentColor;\n }\n\n &__dotted {\n z-index: 1;\n appearance: none;\n font-family: inherit;\n position: absolute;\n top: 3px;\n width: $stepperItemDottedSize;\n height: $stepperItemDottedSize;\n background-color: $colorWhite;\n border: solid 1px $baseBorderColor;\n border-radius: 50%;\n cursor: pointer;\n transition-property: color, border-color;\n transition-duration: $baseTransitionAnimationSpeed;\n\n &:hover,\n &:focus {\n border-color: $colorPrimaryHover;\n\n @include highContrast() {\n border-color: Highlight;\n }\n }\n\n &:hover::after,\n &:focus::after {\n background-color: $colorOldPrimary8;\n\n @include highContrast() {\n background-color: Canvas;\n }\n }\n\n &__disabled {\n cursor: default;\n\n &:hover,\n &:focus {\n border-color: var(--stzh-base-border-color);\n cursor: default;\n }\n\n &:hover::after,\n &:focus::after {\n background-color: inherit;\n }\n }\n\n @include mq($from: small) {\n top: 5px;\n width: $stepperItemDottedSizeSmallUp;\n height: $stepperItemDottedSizeSmallUp;\n }\n }\n\n &__dotted:hover &__dotted-icon,\n &__dotted:focus &__dotted-icon {\n color: $colorPrimaryHover;\n\n @include highContrast() {\n color: Highlight;\n }\n }\n\n /* First and Last /\n\n &--first &__number-block,\n &--last &__number-block {\n &::before {\n display: block\n }\n }\n\n / First /\n\n &--first {\n position: relative;\n }\n\n &--first &__dotted {\n left: 50%;\n transform: translateX(-50%);\n }\n\n / Last /\n\n &--last &__dotted {\n // position the dots based on the width divided by the elements minus half of itself\n right: calc((100% / var(--steps)) - (#{$stepperItemDottedSize 0.5}));\n\n @include mq($from: small) {\n right: calc((100% / var(--steps)) - (#{$stepperItemDottedSizeSmallUp * 0.5}));\n }\n }\n\n /* Passed /\n\n &--passed &__label-block {\n @include font('heavy');\n color: $colorPrimary;\n }\n\n &--passed &__number-block {\n background-color: $colorWhite;\n border: solid 1px $colorPrimary;\n\n @include highContrast() {\n background-color: Canvas;\n border-color: CanvasText;\n }\n }\n\n &--passed &__user-icon {\n color: $colorPrimary;\n }\n\n &--passed &__button:hover &__user-icon,\n &--passed &__button:focus &__user-icon {\n color: $colorPrimaryHover;\n\n @include highContrast() {\n color: Highlight;\n }\n }\n\n / Styles specific to passed items that are not incomplete /\n &--passed:not(&--passed-incomplete) &__number-block,\n &--passed:not(&--passed-incomplete) &__button:hover &__number-block,\n &--passed:not(&--passed-incomplete) &__button:focus &__number-block {\n color: transparent;\n\n @include highContrast() {\n color: Canvas;\n }\n }\n\n &--passed:not(&--passed-incomplete) &__button:hover &__number-block,\n &--passed:not(&--passed-incomplete) &__button:focus &__number-block {\n border-color: $colorPrimary;\n\n @include highContrast() {\n border-color: Highlight;\n }\n }\n\n / Styles specific to passed items that are incomplete /\n &--passed-incomplete &__number-block {\n color: $colorPrimary;\n\n @include highContrast() {\n color: $colorPrimary;\n }\n }\n\n &--passed-incomplete &__button:hover &__number-block,\n &--passed-incomplete &__button:focus &__number-block {\n color: $colorPrimaryHover;\n border-color: $colorPrimary;\n\n @include highContrast() {\n color: Highlight;\n border-color: Highlight;\n }\n }\n\n / Current /\n\n &--current &__label-block {\n @include font('heavy');\n color: $colorPrimary;\n\n @include highContrast() {\n color: SelectedItem;\n }\n\n &:hover {\n text-decoration-line: none;\n }\n }\n\n &--current &__number-block {\n background-color: $colorPrimary;\n border: solid 1px $colorPrimary;\n color: $colorWhite;\n\n @include highContrast() {\n color: SelectedItem;\n border-color: SelectedItem;\n background-color: Canvas;\n }\n\n // make line blue (see desc)\n &::before {\n display: block;\n background-color: $colorPrimary;\n z-index: -1;\n\n @include highContrast() {\n background-color: CanvasText;\n }\n }\n }\n\n &--current &__button:hover &__number-block,\n &--current &__button:focus &__number-block {\n color: $colorWhite;\n\n @include highContrast() {\n color: Highlight;\n }\n\n &::after {\n background-color: $colorPrimaryHover;\n\n @include highContrast() {\n background-color: Canvas;\n }\n }\n }\n\n &--current &__user-icon {\n @include highContrast() {\n color: SelectedItem;\n }\n }\n\n &--current &__button:hover &__icon,\n &--current &__button:focus &__icon,\n &--current &__button:hover &__user-icon,\n &--current &__button:focus &__user-icon {\n @include highContrast() {\n color: Highlight;\n }\n }\n\n / Dotted /\n\n &--dotted#{&}--first &__number-block {\n margin-bottom: 0;\n\n &::after {\n display: none;\n }\n }\n\n &--dotted#{&}--first &__button {\n padding-left: 0;\n padding-right: 0;\n }\n\n // hide number block behind dotted element\n &--dotted#{&}--first &__number-block {\n position: relative;\n z-index: 0;\n top: 5px;\n width: $stepperItemDottedSize;\n height: $stepperItemDottedSize;\n border: none;\n background-color: transparent;\n\n // change dimensions to be still hidden\n @include mq($from: small) {\n top: 8px;\n width: $stepperItemDottedSizeSmallUp;\n height: $stepperItemDottedSizeSmallUp;\n }\n\n // realign white line\n &::before {\n top: 12px;\n right: 26px;\n\n @include mq($from: small) {\n top: 13px;\n right: 30px;\n }\n }\n }\n\n &--dotted#{&}--first &__label-block {\n\t\tdisplay: none;\n }\n\n // first child overwrite white line (see desc) /\n &--first &__number-block {\n &::before {\n background-color: $colorWhite;\n z-index: 1;\n\n @include highContrast() {\n background-color: Canvas;\n }\n }\n }\n\n /* Disabled /\n\n &--is-disabled &__button {\n cursor: not-allowed;\n }\n\n &--is-disabled &__button:hover &__number-block,\n &--is-disabled &__button:focus &__number-block {\n color: $colorOldGrey55;\n border-color: $baseBorderColor;\n\n @include highContrast() {\n color: GrayText;\n border-color: GrayText;\n }\n\n &::after {\n display: none;\n }\n }\n\n &--is-disabled &__button:hover &__label-block,\n &--is-disabled &__button:focus &__label-block {\n color: $colorOldGrey55;\n\n @include highContrast() {\n color: GrayText;\n }\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Element,\n Fragment,\n Event,\n EventEmitter\n} from \"@stencil/core\";\n\nimport {\n StzhStepperItemClickEvent,\n StzhStepperItemDottedClickEvent\n} from '../../index';\n\n/\n @slot - Slot for label (or use label prop)\n /\n@Component({\n tag: \"stzh-stepper-item\",\n styleUrl: \"stzh-stepper-item.scss\",\n scoped: true\n})\nexport class StzhStepperItem {\n /* The label of the item. /\n @Prop({ reflect: true }) label: string;\n\n /* When true, it displays a not-allowed cursor on hover. Use this for steps that are not applicable. /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* Whether it's the first item (used internally by stzh-stepper). /\n @Prop({ reflect: true }) first: boolean = false;\n\n /* Whether it's the last item (used internally by stzh-stepper). /\n @Prop({ reflect: true }) last: boolean = false;\n\n /* True when the item index is lower than the current index (used internally by stzh-stepper). /\n @Prop({ reflect: true }) passed: boolean = false;\n\n /* For passed items, this prevents displaying a checked icon when true (shows step number instead). /\n @Prop({ reflect: true }) incomplete: boolean = false;\n\n /* Whether it's the last item (used internally by stzh-stepper). /\n @Prop({ reflect: true }) current: boolean = false;\n\n /* Whether it's a hidden item (used internally by stzh-stepper). /\n @Prop({ reflect: true }) hide: boolean = false;\n\n /* Whether it's a dotted item (used internally by stzh-stepper). /\n @Prop({ reflect: true }) dotted: boolean = false;\n\n /* The number of the step (used internally by stzh-stepper). /\n @Prop({ reflect: true }) step: number = 1;\n\n /* Displays a custom icon instead of the step number. /\n @Prop({ reflect: true }) icon: string = \"\";\n\n /* When true, it displays a default cursor on hover and no click event is emitted. /\n @Prop() clickDisabled: boolean = false;\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the button element.\n * Default value will be taken from `label` prop or default slot.\n /\n @Prop() analyticsId: string;\n\n /* Click event /\n @Event() stzhClick: EventEmitter<StzhStepperItemClickEvent>;\n\n /* Dotted click event */\n @Event() stzhDottedClick: EventEmitter<StzhStepperItemDottedClickEvent>;\n\n @Element() element: HTMLStzhStepperItemElement;\n\n private button: HTMLButtonElement;\n private text: HTMLElement;\n\n private onClick = (event: MouseEvent) => {\n this.stzhClick.emit({\n component: \"stzh-stepper-item\",\n originalEvent: event,\n index: Array.prototype.indexOf.call(this.element.parentNode.children, this.element),\n });\n }\n\n private onDottedClick = (event: MouseEvent) => {\n this.stzhDottedClick.emit({\n component: \"stzh-stepper-item\",\n originalEvent: event,\n index: Array.prototype.indexOf.call(this.element.parentNode.children, this.element),\n });\n }\n\n componentDidRender() {\n requestAnimationFrame(() => {\n this.button?.setAttribute(\"s-object-id\", this.analyticsId \|\| this.text.innerText);\n });\n }\n\n render() {\n const classes = {\n \"stzh-stepper-item\": true,\n \"stzh-stepper-item--first\": this.first,\n \"stzh-stepper-item--last\": this.last,\n \"stzh-stepper-item--current\": this.current,\n \"stzh-stepper-item--hide\": this.hide,\n \"stzh-stepper-item--dotted\": this.dotted,\n \"stzh-stepper-item--has-icon\": !!this.icon,\n \"stzh-stepper-item--is-disabled\": this.disabled,\n \"stzh-stepper-item--passed\": this.passed,\n \"stzh-stepper-item--passed-incomplete\": this.passed && this.incomplete\n };\n\n const dotted = (\n <span>\n {!this.clickDisabled ? (\n <button\n class=\"stzh-stepper-item__dotted\"\n onClick={this.onDottedClick}\n >\n <stzh-icon class=\"stzh-stepper-item__dotted-icon\" name=\"more-horizontal\"></stzh-icon>\n </button>\n ) : (\n <div class=\"stzh-stepper-item__dotted stzh-stepper-item__dotted__disabled\">\n <stzh-icon class=\"stzh-stepper-item__dotted-icon\" name=\"more-horizontal\"></stzh-icon>\n </div>\n )}\n </span>\n );\n\n const content = (\n <span>\n <span class=\"stzh-stepper-item__number-block\">\n {this.icon\n ? <stzh-icon class=\"stzh-stepper-item__user-icon\" name={this.icon}></stzh-icon>\n : (\n <span>\n <span class=\"stzh-stepper-item__number\">{this.step}</span>\n {this.passed && !this.incomplete && (<stzh-icon class=\"stzh-stepper-item__icon\" name=\"checkmark\"></stzh-icon>)}\n </span>\n )\n }\n </span>\n <span\n ref={(el) => (this.text = el as HTMLElement)}\n class=\"stzh-stepper-item__label-block\"\n >\n {this.label ? this.label : <slot></slot>}\n </span>\n </span>\n );\n\n return (\n <Host role=\"listitem\">\n <div class={classes}>\n {this.last && this.dotted && dotted}\n {this.clickDisabled ? (\n <div class=\"stzh-stepper-item__unclickable\" aria-pressed={this.current ? \"true\" : \"false\"}>\n {content}\n </div>\n ) : (\n <button\n ref={(el) => (this.button = el as HTMLButtonElement)}\n class=\"stzh-stepper-item__button\"\n aria-pressed={this.current ? \"true\" : \"false\"}\n disabled={(this.dotted && this.first) \|\| this.disabled}\n onClick={this.onClick}\n >\n <span class=\"stzh-stepper-item__number-block\">\n {this.icon\n ?\n <stzh-icon class=\"stzh-stepper-item__user-icon\" name={this.icon}></stzh-icon>\n :\n <Fragment>\n <span class=\"stzh-stepper-item__number\">{this.step}</span>\n {\n this.passed && !this.incomplete &&\n (<stzh-icon class=\"stzh-stepper-item__icon\" name=\"checkmark\"></stzh-icon>)\n }\n </Fragment>\n }\n </span>\n <span\n ref={(el) => (this.text = el as HTMLElement)}\n class=\"stzh-stepper-item__label-block\"\n >\n {this.label ? this.label : <slot></slot>}\n </span>\n </button>\n )}\n {this.first && this.dotted && dotted}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}