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

@oiz/stzh-components 3.1.0 → 3.2.0-beta1

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

Files changed (673) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"stzh-iframe.js","sourceRoot":"","sources":["../../../../src/components/stzh-iframe/stzh-iframe.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Host,\n h,\n Element,\n Prop,\n State,\n Watch,\n Event,\n EventEmitter,\n} from \"@stencil/core\";\n\nimport {\n StzhIframeView,\n StzhIframePreviewSkipEvent,\n StzhIframeViewChangeEvent,\n} from \"../../index\";\nimport { StzhIframeLocalizedText } from \"./stzh-iframe.localization\";\n\nimport Cookies from \"js-cookie\";\n\nconst COOKIE_PREFIX_CONFIRM = \"stzh-components-iframe-confirm\";\n\nlet iframeCounter = 0;\n\n/*\n @slot preview-logo - Slot for logo\n * @slot preview-image - Slot for preview image\n * @slot cookiewall-text - Slot for cookiewall text\n /\n@Component({\n tag: \"stzh-iframe\",\n styleUrl: \"stzh-iframe.scss\",\n scoped: true\n})\nexport class StzhIframe {\n /* Translation strings /\n @Prop() localization: StzhIframeLocalizedText;\n\n /* Id of iframe /\n @Prop() iframeId: string;\n\n /* Error text of iframe if couldn't be loaded /\n @Prop() iframeErrorText: string;\n\n /\n Name of iframe\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe?retiredLocale=de#name\n /\n @Prop() name: string;\n\n /\n Sandbox of iframe\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe?retiredLocale=de#sandbox\n /\n @Prop() sandbox: string;\n\n /\n ReferrerPolicy of Iframe\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe?retiredLocale=de#referrerpolicy\n /\n @Prop() referrerpolicy: \"no-referrer\"\n \| \"no-referrer-when-downgrade\"\n \| \"origin\"\n \| \"origin-when-cross-origin\"\n \| \"same-origin\"\n \| \"strict-origin\"\n \| \"strict-origin-when-cross-origin\"\n \| \"unsafe-url\";\n\n /\n Allow of Iframe\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe?retiredLocale=de#allow\n /\n @Prop() allow: string = \"autoplay; fullscreen\";\n\n /* Width of iframe /\n @Prop() width: string;\n\n /* Width of iframe /\n @Prop() height: string;\n\n /* `src` of iframe /\n @Prop() src: string = \"\";\n private _src: string \| null = null;\n\n /\n Cookie name (if not empty, the user will be shown a cookie wall)\n * Will be prefixed with `stzh-components-iframe-confirm-`.\n /\n @Prop() cookie: string;\n\n /\n Number of days the cookie is valid for.\n * If omitted or set to null, the cookie expires when browser is closed.\n * Maximum is on year (365 days, is default).\n /\n @Prop() cookieExpires: number \| null = 365;\n\n /* Confirm button icon /\n @Prop() cookieConfirmIcon: string;\n\n /* Confirm button label /\n @Prop() cookieConfirmLabel: string;\n\n /* Confirm text (use instead of `cookiewall-text` slot) /\n @Prop() cookieConfirmText: string;\n\n /* Preview label /\n @Prop() previewLabel: string;\n\n /* Preview icon /\n @Prop() previewIcon: string = \"external-link\";\n\n /* Whether preview should be skipped, if user has passed the cookiewall before /\n @Prop() skipPreviewIfCookieAccepted: boolean = false;\n\n /* Whether preview should always be skipped /\n @Prop() skipPreview: boolean = false;\n\n @Element() element: HTMLStzhIframeElement;\n\n @State() view: StzhIframeView = \"preview\";\n\n /* Preview skip (only gets executed if it goes directly to iframe and not cookiewall) /\n @Event() stzhPreviewSkip: EventEmitter<StzhIframePreviewSkipEvent>;\n\n /* View change */\n @Event() stzhViewChange: EventEmitter<StzhIframeViewChangeEvent>;\n\n @Watch(\"src\")\n srcWatcher(newValue: string) {\n if (this.view === \"iframe\") {\n this._src = newValue;\n }\n }\n\n @Watch(\"view\")\n viewWatcher(newValue: StzhIframeView) {\n if (newValue === \"iframe\") {\n this._src = this.src;\n } else {\n this._src = null;\n }\n }\n\n private internalId: string;\n private iframeElement: HTMLIFrameElement;\n private previewButtonElement: HTMLButtonElement;\n private confirmButtonElement: HTMLStzhButtonElement;\n private updateFocus: boolean = false;\n\n private handleIframeLoad = () => {\n if (this.updateFocus) {\n this.iframeElement.focus();\n this.updateFocus = false;\n }\n }\n\n private handleCookiewallCloseClick = () => {\n this.updateFocus = true;\n this.view = \"preview\";\n\n this.stzhViewChange.emit({\n component: \"stzh-iframe\",\n value: this.view\n });\n }\n\n private handleCookiewallConfirmClick = () => {\n Cookies.set(`${COOKIE_PREFIX_CONFIRM}-${this.cookie}`, \"1\", {\n expires: this.cookieExpires \|\| null\n });\n\n this.updateFocus = true;\n this.view = \"iframe\";\n\n this.stzhViewChange.emit({\n component: \"stzh-iframe\",\n value: this.view\n });\n }\n\n private handlePreviewClick = () => {\n\t\tconst cookieAccepted = Cookies.get(`${COOKIE_PREFIX_CONFIRM}-${this.cookie}`) \|\| false;\n this.updateFocus = true;\n\n if (!this.cookie \|\| cookieAccepted) {\n this.view = \"iframe\";\n } else {\n this.view = \"cookiewall\";\n }\n\n this.stzhViewChange.emit({\n component: \"stzh-iframe\",\n value: this.view\n });\n }\n\n async componentWillLoad() {\n this.internalId = `stzh-iframe-${iframeCounter++}`;\n\n\t\tconst cookieAccepted = Cookies.get(`${COOKIE_PREFIX_CONFIRM}-${this.cookie}`) \|\| false;\n\n if (\n ((!this.cookie \|\| cookieAccepted) && (this.skipPreviewIfCookieAccepted \|\| this.skipPreview))\n \|\| (!this.cookie && this.skipPreview)\n ) {\n this.stzhPreviewSkip.emit({\n component: \"stzh-iframe\"\n });\n\n this.view = \"iframe\";\n } else if (this.cookie && this.skipPreview) {\n this.view = \"cookiewall\";\n }\n\n this.viewWatcher(this.view);\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"iframe\");\n }\n }\n\n async componentDidRender() {\n if (this.updateFocus) {\n if (this.view === \"iframe\") {\n // wait for iframe load event (handleIframeLoad)\n } else if (this.view === \"preview\") {\n this.previewButtonElement.focus();\n this.updateFocus = false;\n } else if (this.view === \"cookiewall\") {\n this.confirmButtonElement.focus();\n this.updateFocus = false;\n }\n }\n }\n\n render() {\n const classes = {\n \"stzh-iframe\": true,\n };\n\n return (\n <Host>\n <div class={classes}>\n {this.view === \"iframe\" &&\n <iframe\n id={this.iframeId}\n name={this.name}\n sandbox={this.sandbox}\n referrerPolicy={this.referrerpolicy}\n width={this.width}\n height={this.height}\n ref={(el) => (this.iframeElement = el as HTMLIFrameElement)}\n class=\"stzh-iframe__iframe\"\n src={this._src}\n allow={this.allow}\n onLoad={this.handleIframeLoad}\n >{this.iframeErrorText}</iframe>\n }\n\n <button\n ref={(el) => (this.previewButtonElement = el as HTMLButtonElement)}\n onClick={this.handlePreviewClick}\n aria-label={this.previewLabel \|\| this.localization.defaultPreviewLabel}\n // disabled={this.view === \"cookiewall\"}\n class={{\n \"stzh-iframe__preview\": true,\n \"is-visible\": this.view === \"preview\" \|\| this.view === \"cookiewall\"\n }}\n >\n <div class=\"stzh-iframe__preview-image-wrapper\">\n <slot name=\"preview-image\"></slot>\n </div>\n\n <div class=\"stzh-iframe__preview-logo-wrapper\">\n <slot name=\"preview-logo\"></slot>\n </div>\n\n {this.previewIcon &&\n <div class={{\n \"stzh-iframe__preview-run\": true,\n \"is-visible\": this.view === \"preview\"\n }}>\n <stzh-icon class=\"stzh-iframe__preview-run-icon\" name={this.previewIcon}></stzh-icon>\n </div>\n }\n </button>\n\n {this.cookie &&\n <div\n class={{\n \"stzh-iframe__cookiewall\": true,\n \"is-visible\": this.view === \"cookiewall\"\n }}\n >\n <div class=\"stzh-iframe__cookiewall-content\">\n <div\n class=\"stzh-iframe__cookiewall-text\"\n id={`${this.internalId}-cookiewall-text`}\n >\n {this.cookieConfirmText ? this.cookieConfirmText : <slot name=\"cookiewall-text\"></slot>}\n </div>\n\n <stzh-button\n ref={(el) => (this.confirmButtonElement = el as HTMLStzhButtonElement)}\n class=\"stzh-iframe__cookiewall-button\"\n size=\"small\"\n a11yDescribedby={`${this.internalId}-cookiewall-text`}\n icon={this.cookieConfirmIcon}\n label={this.cookieConfirmLabel \|\| this.localization.defaultConfirmLabel}\n onClick={this.handleCookiewallConfirmClick}\n ></stzh-button>\n </div>\n\n {!this.skipPreview &&\n <button\n class=\"stzh-iframe__cookiewall-close\"\n onClick={this.handleCookiewallCloseClick}\n aria-label={this.localization.confirmCloseLabel}\n >\n <stzh-icon class=\"stzh-iframe__cookiewall-close-icon\" name=\"close\"></stzh-icon>\n </button>\n }\n </div>\n }\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"stzh-iframe.js","sourceRoot":"","sources":["../../../../src/components/stzh-iframe/stzh-iframe.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAKrG,OAAO,OAAO,MAAM,WAAW,CAAC;AAChC,OAAO,kBAAkB,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAE5E,MAAM,qBAAqB,GAAG,gCAAgC,CAAC;AAE/D,IAAI,aAAa,GAAG,CAAC,CAAC;AAEtB;;;;GAIG;AAMH,MAAM,OAAO,UAAU;;IA2Db,SAAI,GAAkB,IAAI,CAAC;IAkE3B,gBAAW,GAAY,KAAK,CAAC;IAE7B,qBAAgB,GAAG,GAAG,EAAE;MAC9B,IAAI,IAAI,CAAC,WAAW,EAAE;QACpB,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE,CAAC;QAC3B,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;OAC1B;MACD,IAAI,CAAC,wBAAwB,EAAE,CAAC;IAClC,CAAC,CAAC;IAsEM,+BAA0B,GAAG,GAAG,EAAE;MACxC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;MACxB,IAAI,CAAC,IAAI,GAAG,SAAS,CAAC;MAEtB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC;QACvB,SAAS,EAAE,aAAa;QACxB,KAAK,EAAE,IAAI,CAAC,IAAI;OACjB,CAAC,CAAC;IACL,CAAC,CAAC;IAEM,iCAA4B,GAAG,GAAG,EAAE;MAC1C,OAAO,CAAC,GAAG,CAAC,GAAG,qBAAqB,IAAI,IAAI,CAAC,MAAM,EAAE,EAAE,GAAG,EAAE;QAC1D,OAAO,EAAE,IAAI,CAAC,aAAa,IAAI,IAAI;OACpC,CAAC,CAAC;MAEH,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;MACxB,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC;MAErB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC;QACvB,SAAS,EAAE,aAAa;QACxB,KAAK,EAAE,IAAI,CAAC,IAAI;OACjB,CAAC,CAAC;IACL,CAAC,CAAC;IAEM,uBAAkB,GAAG,GAAG,EAAE;MAChC,MAAM,cAAc,GAAG,OAAO,CAAC,GAAG,CAAC,GAAG,qBAAqB,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC,IAAI,KAAK,CAAC;MACvF,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;MAExB,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,cAAc,EAAE;QAClC,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC;OACtB;WAAM;QACL,IAAI,CAAC,IAAI,GAAG,YAAY,CAAC;OAC1B;MAED,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC;QACvB,SAAS,EAAE,aAAa;QACxB,KAAK,EAAE,IAAI,CAAC,IAAI;OACjB,CAAC,CAAC;IACL,CAAC,CAAC;;;;gCAtO+E,MAAM;;;;;;iBAsC/D,sBAAsB;iBAGtB,MAAM;kBAGL,MAAM;eAGT,EAAE;;yBAce,GAAG;;;;;uBAeZ,eAAe;uCAGE,KAAK;uBAGrB,KAAK;gBAIJ,SAAS;;EASzC,UAAU,CAAC,QAAgB;IACzB,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE;MAC1B,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC;KACtB;EACH,CAAC;EAGD,WAAW,CAAC,QAAwB;IAClC,IAAI,QAAQ,KAAK,QAAQ,EAAE;MACzB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC;KACtB;SAAM;MACL,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;KAClB;EACH,CAAC;EAgBO,wBAAwB;IAC9B,QAAQ,IAAI,CAAC,oBAAoB,EAAE;MACjC,KAAK,MAAM;QACT,OAAO;MACT,KAAK,aAAa;QAChB,OAAO,CAAC,GAAG,CAAC,oBAAoB,EAAE,kBAAkB,CAAC,CAAC;QACtD,kBAAkB,CAAC,YAAY,CAC7B,EAAE,GAAG,EAAE,kBAAkB,EAAE,KAAK,mBAAmB,CAAC,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,EAC9E,IAAI,CAAC,aAAa,CACnB,CAAC;QACF,MAAM;MACR,KAAK,uBAAuB;QAC1B,IAAI,CAAC,IAAI,CAAC,8BAA8B,EAAE;UACxC,OAAO,CAAC,GAAG,CAAC,cAAc,EAAE,oDAAoD,CAAC,CAAC;SACnF;QACD,IAAI,CAAC,qBAAqB,CAAC;UACzB,OAAO,EAAE,IAAI,CAAC,QAAQ;UACtB,gBAAgB,EAAE,IAAI,CAAC,6BAA6B,IAAI,CAAC;UACzD,aAAa,EAAE,KAAK;UACpB,iBAAiB,EAAE,IAAI,CAAC,8BAA8B;SACvD,CAAC,CAAC;QACH,MAAM;KACT;EACH,CAAC;EAEO,qBAAqB,CAAC,MAK7B;IACC,MAAM,aAAa,GAAG,CAAC,MAAyB,EAAE,MAAoC,EAAE,EAAE;MACxF,OAAO,GAAG,EAAE;;QACV,IAAI;UACF,MAAM,SAAS,GAAG,CAAA,MAAA,MAAM,CAAC,aAAa,0CAAE,QAAQ,CAAC,IAAI,CAAC,YAAY,KAAI,CAAC,CAAC;UACxE,IAAI,SAAS,GAAG,CAAC,EAAE;YACjB,MAAM,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,SAAS,GAAG,MAAM,CAAC,gBAAgB,IAAI,CAAC;WAClE;SACF;QAAC,OAAO,KAAK,EAAE;UACd,OAAO,CAAC,IAAI,CAAC,cAAc,EAAE,kEAAkE,EAAE,KAAK,CAAC,CAAC;SACzG;MACH,CAAC,CAAC;IACJ,CAAC,CAAC;IAEF,IAAI,CAAC,MAAM,CAAC,aAAa,EAAE;MACzB,QAAQ,CAAC,MAAM,GAAG,MAAM,CAAC,iBAAiB,CAAC;KAC5C;IAED,MAAM,MAAM,GAAG,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAC,OAAO,CAAsB,CAAC;IAC5E,IAAI,CAAC,MAAM,EAAE;MACX,OAAO,CAAC,KAAK,CAAC,kBAAkB,MAAM,CAAC,OAAO,YAAY,CAAC,CAAC;MAC5D,OAAO;KACR;IAED,MAAM,OAAO,GAAG,aAAa,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC9C,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;IAC3C,MAAM,CAAC,gBAAgB,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACzC,MAAM,CAAC,gBAAgB,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACzC,MAAM,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,OAAO,CAAC,CAAC,CAAC,gCAAgC;IAEtF,IAAI;MACF,uFAAuF;MACvF,OAAO,EAAE,CAAC;KACX;IAAC,OAAO,KAAK,EAAE;MACd,OAAO,CAAC,IAAI,CAAC,yEAAyE,EAAE,KAAK,CAAC,CAAC;KAChG;EACH,CAAC;EA0CD,KAAK,CAAC,iBAAiB;IACrB,IAAI,CAAC,UAAU,GAAG,eAAe,aAAa,EAAE,EAAE,CAAC;IAEnD,MAAM,cAAc,GAAG,OAAO,CAAC,GAAG,CAAC,GAAG,qBAAqB,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC,IAAI,KAAK,CAAC;IAEvF,IACE,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,IAAI,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,2BAA2B,IAAI,IAAI,CAAC,WAAW,CAAC,CAAC;MAC5F,CAAC,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,WAAW,CAAC,EAClC;MACA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;QACxB,SAAS,EAAE,aAAa;OACzB,CAAC,CAAC;MAEH,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC;KACtB;SAAM,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,WAAW,EAAE;MAC1C,IAAI,CAAC,IAAI,GAAG,YAAY,CAAC;KAC1B;IAED,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAE5B,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;MACtB,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;KACjG;EACH,CAAC;EAED,KAAK,CAAC,kBAAkB;IACtB,IAAI,IAAI,CAAC,WAAW,EAAE;MACpB,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE;QAC1B,gDAAgD;OACjD;WAAM,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,EAAE;QAClC,IAAI,CAAC,oBAAoB,CAAC,KAAK,EAAE,CAAC;QAClC,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;OAC1B;WAAM,IAAI,IAAI,CAAC,IAAI,KAAK,YAAY,EAAE;QACrC,IAAI,CAAC,oBAAoB,CAAC,KAAK,EAAE,CAAC;QAClC,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;OAC1B;KACF;EACH,CAAC;EAED,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,aAAa,EAAE,IAAI;KACpB,CAAC;IAEF,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAE,OAAO;QAChB,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,CACzB,cACE,EAAE,EAAE,IAAI,CAAC,QAAQ,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,aAAa,GAAG,EAAuB,CAAC,EACzD,KAAK,EAAC,qBAAqB,EAC3B,GAAG,EAAE,IAAI,CAAC,IAAI,EACd,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,gBAAgB,IAE5B,IAAI,CAAC,eAAe,CACd,CACV;QAED,cACE,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,oBAAoB,GAAG,EAAuB,CAAC,EAChE,OAAO,EAAE,IAAI,CAAC,kBAAkB,gBACpB,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,YAAY,CAAC,mBAAmB;UACtE,wCAAwC;UACxC,KAAK,EAAE;YACL,sBAAsB,EAAE,IAAI;YAC5B,YAAY,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,YAAY;WACpE;UAED,WAAK,KAAK,EAAC,oCAAoC;YAC7C,YAAM,IAAI,EAAC,eAAe,GAAQ,CAC9B;UAEN,WAAK,KAAK,EAAC,mCAAmC;YAC5C,YAAM,IAAI,EAAC,cAAc,GAAQ,CAC7B;UAEL,IAAI,CAAC,WAAW,IAAI,CACnB,WACE,KAAK,EAAE;cACL,0BAA0B,EAAE,IAAI;cAChC,YAAY,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;aACtC;YAED,iBAAW,KAAK,EAAC,+BAA+B,EAAC,IAAI,EAAE,IAAI,CAAC,WAAW,GAAc,CACjF,CACP,CACM;QAER,IAAI,CAAC,MAAM,IAAI,CACd,WACE,KAAK,EAAE;YACL,yBAAyB,EAAE,IAAI;YAC/B,YAAY,EAAE,IAAI,CAAC,IAAI,KAAK,YAAY;WACzC;UAED,WAAK,KAAK,EAAC,iCAAiC;YAC1C,WAAK,KAAK,EAAC,8BAA8B,EAAC,EAAE,EAAE,GAAG,IAAI,CAAC,UAAU,kBAAkB,IAC/E,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,YAAM,IAAI,EAAC,iBAAiB,GAAQ,CACnF;YAEN,mBACE,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,oBAAoB,GAAG,EAA2B,CAAC,EACpE,KAAK,EAAC,gCAAgC,EACtC,IAAI,EAAC,OAAO,EACZ,eAAe,EAAE,GAAG,IAAI,CAAC,UAAU,kBAAkB,EACrD,IAAI,EAAE,IAAI,CAAC,iBAAiB,EAC5B,KAAK,EAAE,IAAI,CAAC,kBAAkB,IAAI,IAAI,CAAC,YAAY,CAAC,mBAAmB,EACvE,OAAO,EAAE,IAAI,CAAC,4BAA4B,GAC7B,CACX;UAEL,CAAC,IAAI,CAAC,WAAW,IAAI,CACpB,cACE,KAAK,EAAC,+BAA+B,EACrC,OAAO,EAAE,IAAI,CAAC,0BAA0B,gBAC5B,IAAI,CAAC,YAAY,CAAC,iBAAiB;YAE/C,iBAAW,KAAK,EAAC,oCAAoC,EAAC,IAAI,EAAC,OAAO,GAAa,CACxE,CACV,CACG,CACP,CACG,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Prop, State, Watch } from \"@stencil/core\";\n\nimport { StzhIframePreviewSkipEvent, StzhIframeView, StzhIframeViewChangeEvent } from \"../../index\";\nimport { StzhIframeLocalizedText } from \"./stzh-iframe.localization\";\n\nimport Cookies from \"js-cookie\";\nimport iFrameResizeModule from \"iframe-resizer\";\nimport { getStzhEnvironment, StzhEnvironmentEnum } from \"../../utils/utils\";\n\nconst COOKIE_PREFIX_CONFIRM = \"stzh-components-iframe-confirm\";\n\nlet iframeCounter = 0;\n\n/*\n @slot preview-logo - Slot for logo\n * @slot preview-image - Slot for preview image\n * @slot cookiewall-text - Slot for cookiewall text\n /\n@Component({\n tag: \"stzh-iframe\",\n styleUrl: \"stzh-iframe.scss\",\n scoped: true,\n})\nexport class StzhIframe {\n /* Translation strings /\n @Prop() localization: StzhIframeLocalizedText;\n\n /* Id of iframe /\n @Prop() iframeId: string;\n\n /* Error text of iframe if couldn't be loaded /\n @Prop() iframeErrorText: string;\n\n /* Automatic height resizing of iFrame /\n @Prop() iframeResizerVariant: \"None\" \| \"PostMessage\" \| \"SameSecondLevelDomain\" = \"None\";\n\n /* Height correction for automatically resized iFrames /\n @Prop() iframeResizerHeightCorrection: number;\n\n /* Second level domain for automatically resized iFrames /\n @Prop() iframeResizerSecondlevelDomain: string;\n\n /\n Name of iframe\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe?retiredLocale=de#name\n /\n @Prop() name: string;\n\n /\n Sandbox of iframe\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe?retiredLocale=de#sandbox\n /\n @Prop() sandbox: string;\n\n /\n ReferrerPolicy of Iframe\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe?retiredLocale=de#referrerpolicy\n /\n @Prop() referrerpolicy:\n \| \"no-referrer\"\n \| \"no-referrer-when-downgrade\"\n \| \"origin\"\n \| \"origin-when-cross-origin\"\n \| \"same-origin\"\n \| \"strict-origin\"\n \| \"strict-origin-when-cross-origin\"\n \| \"unsafe-url\";\n\n /\n Allow of Iframe\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe?retiredLocale=de#allow\n /\n @Prop() allow: string = \"autoplay; fullscreen\";\n\n /* Width of iframe /\n @Prop() width: string = \"100%\";\n\n /* Width of iframe /\n @Prop() height: string = \"100%\";\n\n /* `src` of iframe /\n @Prop() src: string = \"\";\n private _src: string \| null = null;\n\n /\n Cookie name (if not empty, the user will be shown a cookie wall)\n * Will be prefixed with `stzh-components-iframe-confirm-`.\n /\n @Prop() cookie: string;\n\n /\n Number of days the cookie is valid for.\n * If omitted or set to null, the cookie expires when browser is closed.\n * Maximum is on year (365 days, is default).\n /\n @Prop() cookieExpires: number \| null = 365;\n\n /* Confirm button icon /\n @Prop() cookieConfirmIcon: string;\n\n /* Confirm button label /\n @Prop() cookieConfirmLabel: string;\n\n /* Confirm text (use instead of `cookiewall-text` slot) /\n @Prop() cookieConfirmText: string;\n\n /* Preview label /\n @Prop() previewLabel: string;\n\n /* Preview icon /\n @Prop() previewIcon: string = \"external-link\";\n\n /* Whether preview should be skipped, if user has passed the cookiewall before /\n @Prop() skipPreviewIfCookieAccepted: boolean = false;\n\n /* Whether preview should always be skipped /\n @Prop() skipPreview: boolean = false;\n\n @Element() element: HTMLStzhIframeElement;\n\n @State() view: StzhIframeView = \"preview\";\n\n /* Preview skip (only gets executed if it goes directly to iframe and not cookiewall) /\n @Event() stzhPreviewSkip: EventEmitter<StzhIframePreviewSkipEvent>;\n\n /* View change */\n @Event() stzhViewChange: EventEmitter<StzhIframeViewChangeEvent>;\n\n @Watch(\"src\")\n srcWatcher(newValue: string) {\n if (this.view === \"iframe\") {\n this._src = newValue;\n }\n }\n\n @Watch(\"view\")\n viewWatcher(newValue: StzhIframeView) {\n if (newValue === \"iframe\") {\n this._src = this.src;\n } else {\n this._src = null;\n }\n }\n\n private internalId: string;\n private iframeElement: HTMLIFrameElement;\n private previewButtonElement: HTMLButtonElement;\n private confirmButtonElement: HTMLStzhButtonElement;\n private updateFocus: boolean = false;\n\n private handleIframeLoad = () => {\n if (this.updateFocus) {\n this.iframeElement.focus();\n this.updateFocus = false;\n }\n this.initializeIframeResizing();\n };\n\n private initializeIframeResizing() {\n switch (this.iframeResizerVariant) {\n case \"None\":\n return;\n case \"PostMessage\":\n console.log(\"iFrameResizeModule\", iFrameResizeModule);\n iFrameResizeModule.iframeResize(\n { log: getStzhEnvironment() !== StzhEnvironmentEnum.PROD, checkOrigin: false },\n this.iframeElement\n );\n break;\n case \"SameSecondLevelDomain\":\n if (!this.iframeResizerSecondlevelDomain) {\n console.log(\"stzh-iframe:\", \"property 'iframeSecondlevelDomain' not filled out.\");\n }\n this.setupIframeAutoSizing({\n frameId: this.iframeId,\n heightCorrection: this.iframeResizerHeightCorrection \|\| 0,\n hasSameDomain: false,\n secondLevelDomain: this.iframeResizerSecondlevelDomain,\n });\n break;\n }\n }\n\n private setupIframeAutoSizing(config: {\n frameId: string;\n heightCorrection: number;\n hasSameDomain: boolean;\n secondLevelDomain: string;\n }) {\n const createResizer = (iframe: HTMLIFrameElement, config: { heightCorrection: number }) => {\n return () => {\n try {\n const newHeight = iframe.contentWindow?.document.body.scrollHeight \|\| 0;\n if (newHeight > 0) {\n iframe.style.height = `${newHeight + config.heightCorrection}px`;\n }\n } catch (error) {\n console.warn(\"stzh-iframe:\", \"Resizing not possible, perhaps due to cross-domain restrictions:\", error);\n }\n };\n };\n\n if (!config.hasSameDomain) {\n document.domain = config.secondLevelDomain;\n }\n\n const iframe = document.getElementById(config.frameId) as HTMLIFrameElement;\n if (!iframe) {\n console.error(`Iframe with ID ${config.frameId} not found`);\n return;\n }\n\n const resizer = createResizer(iframe, config);\n window.addEventListener(\"resize\", resizer);\n iframe.addEventListener(\"load\", resizer);\n iframe.addEventListener(\"blur\", resizer);\n iframe.addEventListener(\"readystatechange\", resizer); // hack for internet explorer...\n\n try {\n // this might go wrong on IE, if iframe hasn't fully loaded yet, but it doesn't matter.\n resizer();\n } catch (error) {\n console.warn(\"Initial resize failed, likely due to iframe not being fully loaded yet:\", error);\n }\n }\n\n private handleCookiewallCloseClick = () => {\n this.updateFocus = true;\n this.view = \"preview\";\n\n this.stzhViewChange.emit({\n component: \"stzh-iframe\",\n value: this.view,\n });\n };\n\n private handleCookiewallConfirmClick = () => {\n Cookies.set(`${COOKIE_PREFIX_CONFIRM}-${this.cookie}`, \"1\", {\n expires: this.cookieExpires \|\| null,\n });\n\n this.updateFocus = true;\n this.view = \"iframe\";\n\n this.stzhViewChange.emit({\n component: \"stzh-iframe\",\n value: this.view,\n });\n };\n\n private handlePreviewClick = () => {\n const cookieAccepted = Cookies.get(`${COOKIE_PREFIX_CONFIRM}-${this.cookie}`) \|\| false;\n this.updateFocus = true;\n\n if (!this.cookie \|\| cookieAccepted) {\n this.view = \"iframe\";\n } else {\n this.view = \"cookiewall\";\n }\n\n this.stzhViewChange.emit({\n component: \"stzh-iframe\",\n value: this.view,\n });\n };\n\n async componentWillLoad() {\n this.internalId = `stzh-iframe-${iframeCounter++}`;\n\n const cookieAccepted = Cookies.get(`${COOKIE_PREFIX_CONFIRM}-${this.cookie}`) \|\| false;\n\n if (\n ((!this.cookie \|\| cookieAccepted) && (this.skipPreviewIfCookieAccepted \|\| this.skipPreview)) \|\|\n (!this.cookie && this.skipPreview)\n ) {\n this.stzhPreviewSkip.emit({\n component: \"stzh-iframe\",\n });\n\n this.view = \"iframe\";\n } else if (this.cookie && this.skipPreview) {\n this.view = \"cookiewall\";\n }\n\n this.viewWatcher(this.view);\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"iframe\");\n }\n }\n\n async componentDidRender() {\n if (this.updateFocus) {\n if (this.view === \"iframe\") {\n // wait for iframe load event (handleIframeLoad)\n } else if (this.view === \"preview\") {\n this.previewButtonElement.focus();\n this.updateFocus = false;\n } else if (this.view === \"cookiewall\") {\n this.confirmButtonElement.focus();\n this.updateFocus = false;\n }\n }\n }\n\n render() {\n const classes = {\n \"stzh-iframe\": true,\n };\n\n return (\n <Host>\n <div class={classes}>\n {this.view === \"iframe\" && (\n <iframe\n id={this.iframeId}\n name={this.name}\n sandbox={this.sandbox}\n referrerPolicy={this.referrerpolicy}\n width={this.width}\n height={this.height}\n ref={el => (this.iframeElement = el as HTMLIFrameElement)}\n class=\"stzh-iframe__iframe\"\n src={this._src}\n allow={this.allow}\n onLoad={this.handleIframeLoad}\n >\n {this.iframeErrorText}\n </iframe>\n )}\n\n <button\n ref={el => (this.previewButtonElement = el as HTMLButtonElement)}\n onClick={this.handlePreviewClick}\n aria-label={this.previewLabel \|\| this.localization.defaultPreviewLabel}\n // disabled={this.view === \"cookiewall\"}\n class={{\n \"stzh-iframe__preview\": true,\n \"is-visible\": this.view === \"preview\" \|\| this.view === \"cookiewall\",\n }}\n >\n <div class=\"stzh-iframe__preview-image-wrapper\">\n <slot name=\"preview-image\"></slot>\n </div>\n\n <div class=\"stzh-iframe__preview-logo-wrapper\">\n <slot name=\"preview-logo\"></slot>\n </div>\n\n {this.previewIcon && (\n <div\n class={{\n \"stzh-iframe__preview-run\": true,\n \"is-visible\": this.view === \"preview\",\n }}\n >\n <stzh-icon class=\"stzh-iframe__preview-run-icon\" name={this.previewIcon}></stzh-icon>\n </div>\n )}\n </button>\n\n {this.cookie && (\n <div\n class={{\n \"stzh-iframe__cookiewall\": true,\n \"is-visible\": this.view === \"cookiewall\",\n }}\n >\n <div class=\"stzh-iframe__cookiewall-content\">\n <div class=\"stzh-iframe__cookiewall-text\" id={`${this.internalId}-cookiewall-text`}>\n {this.cookieConfirmText ? this.cookieConfirmText : <slot name=\"cookiewall-text\"></slot>}\n </div>\n\n <stzh-button\n ref={el => (this.confirmButtonElement = el as HTMLStzhButtonElement)}\n class=\"stzh-iframe__cookiewall-button\"\n size=\"small\"\n a11yDescribedby={`${this.internalId}-cookiewall-text`}\n icon={this.cookieConfirmIcon}\n label={this.cookieConfirmLabel \|\| this.localization.defaultConfirmLabel}\n onClick={this.handleCookiewallConfirmClick}\n ></stzh-button>\n </div>\n\n {!this.skipPreview && (\n <button\n class=\"stzh-iframe__cookiewall-close\"\n onClick={this.handleCookiewallCloseClick}\n aria-label={this.localization.confirmCloseLabel}\n >\n <stzh-icon class=\"stzh-iframe__cookiewall-close-icon\" name=\"close\"></stzh-icon>\n </button>\n )}\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"]}

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

@@ -41,6 +41,10 @@ const TEMPLATE_NO_PREVIEW = `
 </stzh-ratio>
 `;
+const TEMPLATE_EMPTY = `
+<stzh-iframe></stzh-iframe>
+`;
 export default {
   title: 'Components/Iframe',
   component: COMPONENT_NAME,
@@ -60,33 +64,30 @@ export default {
       allowFullscreen: true
     }
   },
-  decorators: [
-    withActions,
-    withDesign
-  ]
+  decorators: [withActions, withDesign]
 };
 export const Default = {
   render: (args) => story(args, TEMPLATE),
   args: {
-    src: "https://example.com",
+    src: 'https://example.com'
   }
 };
 export const WithPreviewImage = {
   render: (args) => story(args, TEMPLATE_PREVIEW_IMAGE),
   args: {
-    src: "https://example.com",
+    src: 'https://example.com'
   }
 };
 export const WithCookieWall = {
   render: (args) => story(args, TEMPLATE_WITH_COOKIEWALL),
   args: {
-    src: "https://example.com",
-    cookie: "example-app",
-    'cookie-confirm-icon': "checkmark-circle",
-    'cookie-confirm-label': "Confirm",
+    src: 'https://example.com',
+    cookie: 'example-app',
+    'cookie-confirm-icon': 'checkmark-circle',
+    'cookie-confirm-label': 'Confirm',
     'cookie-expires': 0
   }
 };
@@ -94,7 +95,25 @@ export const WithCookieWall = {
 export const NoPreview = {
   render: (args) => story(args, TEMPLATE_PREVIEW_IMAGE),
   args: {
-    src: "https://example.com",
+    src: 'https://example.com',
+    'skip-preview': true
+  }
+};
+export const FixedHeight = {
+  render: (args) => story(args, TEMPLATE_EMPTY),
+  args: {
+    src: 'https://example.com',
+    'skip-preview': true,
+    height: '300'
+  }
+};
+export const ResizerPostMessage = {
+  render: (args) => story(args, TEMPLATE_EMPTY),
+  args: {
+    src: 'https://stzh-desi-unic-iframe.netlify.app',
     'skip-preview': true,
+    'iframe-resizer-variant': 'PostMessage'
   }
 };

package/dist/collection/components/stzh-input/stzh-input.css CHANGED Viewed

@@ -475,7 +475,7 @@
   line-height: var(--stzh-font-nano-text-line-height);
   margin-left: calc(-0.25em + var(--stzh-space-xsmall));
 }
-.stzh-input--type-password.stzh-input--is-not-clearable .stzh-input__button-right, .stzh-input--type-password.stzh-input--is-not-filled .stzh-input__button-right, .stzh-input--type-password.stzh-input--is-readonly .stzh-input__button-right, .stzh-input--type-password.stzh-input--is-disabled .stzh-input__button-right, .stzh-input--type-search.stzh-input--is-not-clearable .stzh-input__button-right, .stzh-input--type-search.stzh-input--is-not-filled .stzh-input__button-right, .stzh-input--type-search.stzh-input--is-readonly .stzh-input__button-right, .stzh-input--type-search.stzh-input--is-disabled .stzh-input__button-right {
+.stzh-input--type-password.stzh-input--is-not-filled .stzh-input__button-right, .stzh-input--type-password.stzh-input--is-readonly .stzh-input__button-right, .stzh-input--type-password.stzh-input--is-disabled .stzh-input__button-right, .stzh-input--type-search.stzh-input--is-not-clearable .stzh-input__button-right, .stzh-input--type-search.stzh-input--is-not-filled .stzh-input__button-right, .stzh-input--type-search.stzh-input--is-readonly .stzh-input__button-right, .stzh-input--type-search.stzh-input--is-disabled .stzh-input__button-right {
   pointer-events: none;
 }
 .stzh-input--has-button-right .stzh-input__input {

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

@@ -28,6 +28,9 @@ export class StzhInput {
         value: this.value,
       });
     };
+    this.onTogglePasswordVisibilityClick = async () => {
+      this.showPassword = !this.showPassword;
+    };
     this.handleReset = async () => {
       this.value = this.defaultValue;
       // we also update value, since render doesn't get executed sometimes
@@ -120,6 +123,7 @@ export class StzhInput {
     this.size = "default";
     this.a11yDescribedby = "";
     this.filled = undefined;
+    this.showPassword = undefined;
   }
   resetListener(event) {
     if (event.target.contains(this.element)) {
@@ -165,7 +169,7 @@ export class StzhInput {
     return (h("textarea", { class: "stzh-input__input stzh-input__input--textarea", ref: el => (this.input = el), id: this.inputId, name: this.name, value: this.value, rows: this.rows, disabled: this.disabled, readonly: this.readonly, minlength: this.minlength, maxlength: this.maxlength, "aria-describedby": `${this.inputId}-description ${this.a11yDescribedby}`, "aria-required": this.required ? "true" : "false", "aria-invalid": this.invalid ? "true" : "false", onChange: this.onChange, onInput: this.onInput, onFocus: this.onFocus, onBlur: this.onBlur }));
   }
   renderInput() {
-    return (h("input", { class: "stzh-input__input stzh-input__input--input", ref: el => (this.input = el), id: this.inputId, type: this.type, name: this.name, value: this.value, defaultValue: this.defaultValue, min: this.min, max: this.max, step: this.step, inputmode: this.inputmode, disabled: this.disabled, readonly: this.readonly, minlength: this.minlength, maxlength: this.maxlength, autocomplete: this.noAutocomplete ? "off" : this.autocomplete, "aria-autocomplete": this.noAutocomplete ? "none" : undefined, "aria-describedby": `${this.inputId}-description ${this.a11yDescribedby}`, "aria-required": this.required ? "true" : "false", "aria-invalid": this.invalid ? "true" : "false", onChange: this.onChange, onInput: this.onInput, onFocus: this.onFocus, onBlur: this.onBlur }));
+    return (h("input", { class: "stzh-input__input stzh-input__input--input", ref: el => (this.input = el), id: this.inputId, type: this.showPassword ? "text" : this.type, name: this.name, value: this.value, defaultValue: this.defaultValue, min: this.min, max: this.max, step: this.step, inputmode: this.inputmode, disabled: this.disabled, readonly: this.readonly, minlength: this.minlength, maxlength: this.maxlength, autocomplete: this.noAutocomplete ? "off" : this.autocomplete, "aria-autocomplete": this.noAutocomplete ? "none" : undefined, "aria-describedby": `${this.inputId}-description ${this.a11yDescribedby}`, "aria-required": this.required ? "true" : "false", "aria-invalid": this.invalid ? "true" : "false", onChange: this.onChange, onInput: this.onInput, onFocus: this.onFocus, onBlur: this.onBlur }));
   }
   componentDidRender() {
     if (this.renderPromiseResolve) {
@@ -214,7 +218,7 @@ export class StzhInput {
       : this.localization.$globals.optionalFieldMarker), h("span", { class: "stzh-input__marker-text" }, this.required
       ? this.localization.$globals.requiredFieldText
       : this.localization.$globals.optionalFieldText)))), h("div", { class: "stzh-input__field-wrapper" }, this.multiline ? this.renderTextarea() : this.renderInput(), this.clearable || this.type === "search" || this.type === "password" ? ((!this.clearable || this.disabled || this.readonly || !this.filled) &&
-      (this.type === "search" || this.type === "password") ? (h("stzh-button", { class: "stzh-input__button-right", icon: this.type === "search" ? "search" : "view", size: this.size, iconOnly: true, disabled: true })) : this.filled ? (h("stzh-button", { class: "stzh-input__button-right", icon: "close", size: this.size, iconOnly: true, onClick: this.onClearClick, a11yLabel: this.localization.$globals.clearButtonLabel, "aria-controls": this.inputId })) : (h("slot", { name: "button-right" }))) : (h("slot", { name: "button-right" }))), (((_b = this._error) === null || _b === void 0 ? void 0 : _b.length) > 0 || this.description) && (h(StzhInputDescription, { classPrefix: "stzh-input", id: `${this.inputId}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongTitle: this.descriptionLongTitle, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel })))));
+      (this.type === "search" || this.type === "password") ? (h("stzh-button", { class: "stzh-input__button-right", icon: this.type === "search" ? "search" : "view", size: this.size, iconOnly: true, onClick: this.onTogglePasswordVisibilityClick, disabled: this.disabled || this.readonly })) : this.filled ? (h("stzh-button", { class: "stzh-input__button-right", icon: "close", size: this.size, iconOnly: true, onClick: this.onClearClick, a11yLabel: this.localization.$globals.clearButtonLabel, "aria-controls": this.inputId })) : (h("slot", { name: "button-right" }))) : (h("slot", { name: "button-right" }))), (((_b = this._error) === null || _b === void 0 ? void 0 : _b.length) > 0 || this.description) && (h(StzhInputDescription, { classPrefix: "stzh-input", id: `${this.inputId}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongTitle: this.descriptionLongTitle, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel })))));
   }
   static get is() { return "stzh-input"; }
   static get encapsulation() { return "scoped"; }
@@ -766,7 +770,8 @@ export class StzhInput {
   }
   static get states() {
     return {
-      "filled": {}
+      "filled": {},
+      "showPassword": {}
     };
   }
   static get events() {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"stzh-input.js","sourceRoot":"","sources":["../../../../src/components/stzh-input/stzh-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Listen, Prop, State, Watch } from \"@stencil/core\";\n\nimport { StzhInputBlurEvent, StzhInputChangedEvent, StzhInputChangeEvent, StzhInputFocusEvent } from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nimport { StzhInputDescription } from \"./stzh-input-description\";\n\nlet inputCounter = 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 * @slot button-right - Slot for right button\n /\n@Component({\n tag: \"stzh-input\",\n styleUrl: \"stzh-input.scss\",\n scoped: true,\n})\nexport class StzhInput {\n /* Translation strings /\n @Prop() localization: StzhLocaleComponent;\n\n /* Whether the input is a textarea or an input field /\n @Prop() multiline: boolean = false;\n\n /* Rows attribute if input element is textarea /\n @Prop() rows: number;\n\n /* If input field, this defines the type (if `search`, a search icon will be displayed) /\n @Prop({ reflect: true }) type: \"text\" \| \"search\" \| \"password\" \| \"email\" \| \"url\" \| \"tel\" \| \"number\" \| \"hidden\" =\n \"text\";\n\n /* If input type is number, this will be the step size /\n @Prop() step: number = 1;\n\n /* If input type is number, this will be the minimum step number /\n @Prop() min: number;\n\n /* If input type is number, this will be the maximum step number /\n @Prop() max: number;\n\n /* If input type is number and this property is true, this will show the spin buttons on hover/focus /\n @Prop({ reflect: true }) showSpin: boolean = false;\n\n /* Whether the element is readonly or not /\n @Prop({ reflect: true }) readonly: boolean = false;\n\n /* Whether the element is disabled or not /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* Whether clearable button is showing when input field has value and is enabled (button-right slot not usable anymore when true) /\n @Prop({ reflect: true }) clearable: boolean = false;\n\n /* Hide `(optional)` label (or use `required` inside form to hide it) /\n @Prop({ reflect: true }) hideOptional: boolean = false;\n\n /* Minimum of characters /\n @Prop() minlength: number;\n\n /* Maxlength of characters /\n @Prop() maxlength: number;\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 /* Default value (used by reset) /\n @Prop({ mutable: true }) defaultValue: 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 /* Invalid status /\n @Prop({ reflect: true }) invalid: boolean = false;\n\n /* Required status /\n @Prop({ reflect: true }) required: boolean = false;\n\n /\n Specify inputmode.\n * See [MDN](https://developer.mozilla.org/de/docs/Web/HTML/Global_attributes/inputmode) for possible values\n /\n @Prop() inputmode: string;\n\n /\n Specify what the user agent has to provide as automated assistance.\n * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for possible values\n /\n @Prop() autocomplete: string = \"on\";\n\n /* Whether autocomplete should be turned off /\n @Prop() noAutocomplete: boolean = false;\n\n /* Label /\n @Prop() label: string = \"\";\n\n /* Whether label should be visually hidden. /\n @Prop() labelHidden: boolean = false;\n\n /* Size variant /\n @Prop({ reflect: true }) size: \"default\" \| \"small\" = \"default\";\n\n /* Id for element which describes the input (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) /\n @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n /* Whether the input is filled or not /\n @State() filled: boolean;\n\n @Element() element: HTMLStzhInputElement;\n\n /* Input change event /\n @Event() stzhChange: EventEmitter<StzhInputChangeEvent>;\n\n /* Input changed event /\n @Event() stzhChanged: EventEmitter<StzhInputChangedEvent>;\n\n /* Input focus event /\n @Event() stzhFocus: EventEmitter<StzhInputFocusEvent>;\n\n /* Input blur event */\n @Event() stzhBlur: EventEmitter<StzhInputBlurEvent>;\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(\"value\")\n valueWatcher(newValue: string) {\n this.filled = newValue !== \"\";\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 @Watch(\"type\")\n typeWatcher(newValue: string) {\n const types = [\"text\", \"search\", \"password\", \"email\", \"url\", \"tel\", \"number\", \"hidden\"];\n\n if (!this.multiline && !types.includes(newValue)) {\n throw new Error(`Type ${newValue} not supported`);\n }\n }\n\n private input: HTMLInputElement \| HTMLTextAreaElement;\n private inputId: string;\n private focusedByInput: boolean = false;\n private renderPromiseResolve: (value?: unknown) => void;\n\n private waitForNextRender() {\n return new Promise(resolve => (this.renderPromiseResolve = resolve));\n }\n\n private onClearClick = async (event: MouseEvent) => {\n this.value = \"\";\n this.input.focus();\n\n await this.waitForNextRender();\n\n this.stzhChange.emit({\n component: \"stzh-input\",\n originalEvent: event,\n value: this.value,\n });\n\n this.stzhChanged.emit({\n component: \"stzh-input\",\n originalEvent: event,\n value: this.value,\n });\n };\n\n private handleReset = async () => {\n this.value = this.defaultValue;\n // we also update value, since render doesn't get executed sometimes\n this.input.value = this.defaultValue;\n\n // TODO: check if we need own reset event or trigger the change event\n // (custom browser behaviour doesn't send change event, when reset is executed)\n // this.stzhChange.emit({\n // component: \"stzh-input\",\n // originalEvent: event,\n // value: this.value\n // });\n };\n\n private onInput = (event: InputEvent) => {\n this.value = this.input.value;\n\n this.stzhChange.emit({\n component: \"stzh-input\",\n originalEvent: event,\n value: this.value,\n });\n };\n\n private onChange = (event: InputEvent) => {\n this.value = this.input.value;\n\n this.stzhChanged.emit({\n component: \"stzh-input\",\n originalEvent: event,\n value: this.value,\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-input\",\n originalEvent: event,\n });\n };\n\n private onBlur = (event: FocusEvent) => {\n // fixes weird bug where autofill selection doesn't get removed\n this.input.value = this.input.value;\n\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-input\",\n originalEvent: event,\n });\n };\n\n private renderTextarea(): HTMLTextAreaElement {\n return (\n <textarea\n class=\"stzh-input__input stzh-input__input--textarea\"\n ref={el => (this.input = el as HTMLTextAreaElement)}\n id={this.inputId}\n name={this.name}\n value={this.value}\n rows={this.rows}\n disabled={this.disabled}\n readonly={this.readonly}\n minlength={this.minlength}\n maxlength={this.maxlength}\n aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n aria-required={this.required ? \"true\" : \"false\"}\n aria-invalid={this.invalid ? \"true\" : \"false\"}\n onChange={this.onChange}\n onInput={this.onInput}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n ></textarea>\n );\n }\n\n private renderInput(): HTMLInputElement {\n return (\n <input\n class=\"stzh-input__input stzh-input__input--input\"\n ref={el => (this.input = el as HTMLInputElement)}\n id={this.inputId}\n type={this.type}\n name={this.name}\n value={this.value}\n defaultValue={this.defaultValue}\n min={this.min}\n max={this.max}\n step={this.step}\n inputmode={this.inputmode}\n disabled={this.disabled}\n readonly={this.readonly}\n minlength={this.minlength}\n maxlength={this.maxlength}\n autocomplete={this.noAutocomplete ? \"off\" : this.autocomplete}\n aria-autocomplete={this.noAutocomplete ? \"none\" : undefined}\n aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n aria-required={this.required ? \"true\" : \"false\"}\n aria-invalid={this.invalid ? \"true\" : \"false\"}\n onChange={this.onChange}\n onInput={this.onInput}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n />\n );\n }\n\n componentDidRender() {\n if (this.renderPromiseResolve) {\n this.renderPromiseResolve();\n }\n }\n\n async componentWillLoad() {\n this.inputId = `stzh-input-${inputCounter++}`;\n this.typeWatcher(this.type);\n this.valueWatcher(this.value);\n this.errorWatcher(this.error);\n\n this.defaultValue = this.defaultValue \|\| this.value;\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"input\");\n }\n }\n\n render() {\n const buttonRightSlotUsed = hasSlot(this.element, \"button-right\");\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-input\": true,\n \"stzh-input--has-button-right\":\n buttonRightSlotUsed \|\|\n this.type === \"search\" \|\|\n (this.clearable && this.filled && !this.readonly && !this.disabled),\n \"stzh-input--has-description\": descriptionUsed,\n \"stzh-input--has-description-long\": descriptionLongUsed,\n \"stzh-input--has-error\": errorUsed,\n \"stzh-input--has-spin\": this.showSpin,\n \"stzh-input--is-invalid\": this.invalid \|\| errorUsed,\n \"stzh-input--is-disabled\": this.disabled,\n \"stzh-input--is-readonly\": this.readonly,\n \"stzh-input--is-required\": this.required,\n \"stzh-input--is-filled\": this.filled,\n \"stzh-input--is-not-filled\": !this.filled,\n \"stzh-input--is-clearable\": this.clearable,\n \"stzh-input--is-not-clearable\": !this.clearable,\n \"stzh-input--has-label-hidden\": this.labelHidden,\n [`stzh-input--size-${this.size}`]: !!this.size,\n [`stzh-input--type-${this.type}`]: !!this.type,\n };\n\n return (\n <Host\n is-invalid={this.invalid \|\| errorUsed}\n tabindex={this.disabled ? null : \"-1\"}\n onFocus={this.onRootFocus}\n is-filled={this.filled}\n >\n <div class={classes}>\n <label class=\"stzh-input__label\" htmlFor={this.inputId}>\n {this.label ? this.label : <slot></slot>}\n {!this.hideOptional && (\n <span class=\"stzh-input__marker\">\n <span class=\"stzh-input__marker-symbol\" aria-hidden=\"true\">\n {this.required\n ? this.localization.$globals.requiredFieldMarker\n : this.localization.$globals.optionalFieldMarker}\n </span>\n <span class=\"stzh-input__marker-text\">\n {this.required\n ? this.localization.$globals.requiredFieldText\n : this.localization.$globals.optionalFieldText}\n </span>\n </span>\n )}\n </label>\n <div class=\"stzh-input__field-wrapper\">\n {this.multiline ? this.renderTextarea() : this.renderInput()}\n {this.clearable \|\| this.type === \"search\" \|\| this.type === \"password\" ? (\n (!this.clearable \|\| this.disabled \|\| this.readonly \|\| !this.filled) &&\n (this.type === \"search\" \|\| this.type === \"password\") ? (\n <stzh-button\n class=\"stzh-input__button-right\"\n icon={this.type === \"search\" ? \"search\" : \"view\"}\n size={this.size}\n iconOnly={true}\n disabled={true}\n ></stzh-button>\n ) : this.filled ? (\n <stzh-button\n class=\"stzh-input__button-right\"\n icon=\"close\"\n size={this.size}\n iconOnly={true}\n onClick={this.onClearClick}\n a11yLabel={this.localization.$globals.clearButtonLabel}\n aria-controls={this.inputId}\n ></stzh-button>\n ) : (\n <slot name=\"button-right\"></slot>\n )\n ) : (\n <slot name=\"button-right\"></slot>\n )}\n </div>\n {(this._error?.length > 0 \|\| this.description) && (\n <StzhInputDescription\n classPrefix=\"stzh-input\"\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"]}
1	+ {"version":3,"file":"stzh-input.js","sourceRoot":"","sources":["../../../../src/components/stzh-input/stzh-input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAI7G,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAG5C,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAEhE,IAAI,YAAY,GAAG,CAAC,CAAC;AAErB;;;;;;;GAOG;AAMH,MAAM,OAAO,SAAS;;IAmKZ,mBAAc,GAAY,KAAK,CAAC;IAOhC,iBAAY,GAAG,KAAK,EAAE,KAAiB,EAAE,EAAE;MACjD,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;MAChB,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;MAEnB,MAAM,IAAI,CAAC,iBAAiB,EAAE,CAAC;MAE/B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QACnB,SAAS,EAAE,YAAY;QACvB,aAAa,EAAE,KAAK;QACpB,KAAK,EAAE,IAAI,CAAC,KAAK;OAClB,CAAC,CAAC;MAEH,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;QACpB,SAAS,EAAE,YAAY;QACvB,aAAa,EAAE,KAAK;QACpB,KAAK,EAAE,IAAI,CAAC,KAAK;OAClB,CAAC,CAAC;IACL,CAAC,CAAC;IAEM,oCAA+B,GAAG,KAAK,IAAI,EAAE;MACnD,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC;IACzC,CAAC,CAAC;IAEM,gBAAW,GAAG,KAAK,IAAI,EAAE;MAC/B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC;MAC/B,oEAAoE;MACpE,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC;MAErC,qEAAqE;MACrE,+EAA+E;MAC/E,yBAAyB;MACzB,6BAA6B;MAC7B,0BAA0B;MAC1B,sBAAsB;MACtB,MAAM;IACR,CAAC,CAAC;IAEM,YAAO,GAAG,CAAC,KAAiB,EAAE,EAAE;MACtC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;MAE9B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QACnB,SAAS,EAAE,YAAY;QACvB,aAAa,EAAE,KAAK;QACpB,KAAK,EAAE,IAAI,CAAC,KAAK;OAClB,CAAC,CAAC;IACL,CAAC,CAAC;IAEM,aAAQ,GAAG,CAAC,KAAiB,EAAE,EAAE;MACvC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;MAE9B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;QACpB,SAAS,EAAE,YAAY;QACvB,aAAa,EAAE,KAAK;QACpB,KAAK,EAAE,IAAI,CAAC,KAAK;OAClB,CAAC,CAAC;IACL,CAAC,CAAC;IAEM,gBAAW,GAAG,GAAG,EAAE;MACzB,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;QACxB,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;OACpB;MAED,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;IAC9B,CAAC,CAAC;IAEM,YAAO,GAAG,CAAC,KAAiB,EAAE,EAAE;MACtC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;MAE3B,MAAM,UAAU,GAAG,IAAI,UAAU,CAAC,OAAO,EAAE;QACzC,IAAI,EAAE,MAAM;QACZ,OAAO,EAAE,KAAK;QACd,UAAU,EAAE,KAAK;OAClB,CAAC,CAAC;MAEH,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;MACvC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;QAClB,SAAS,EAAE,YAAY;QACvB,aAAa,EAAE,KAAK;OACrB,CAAC,CAAC;IACL,CAAC,CAAC;IAEM,WAAM,GAAG,CAAC,KAAiB,EAAE,EAAE;MACrC,+DAA+D;MAC/D,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;MAEpC,MAAM,SAAS,GAAG,IAAI,UAAU,CAAC,MAAM,EAAE;QACvC,IAAI,EAAE,MAAM;QACZ,OAAO,EAAE,KAAK;QACd,UAAU,EAAE,KAAK;OAClB,CAAC,CAAC;MAEH,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;MACtC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;QACjB,SAAS,EAAE,YAAY;QACvB,aAAa,EAAE,KAAK;OACrB,CAAC,CAAC;IACL,CAAC,CAAC;;qBArQ2B,KAAK;;gBAOhC,MAAM;gBAGe,CAAC;;;oBASqB,KAAK;oBAGL,KAAK;oBAGL,KAAK;qBAGJ,KAAK;wBAGF,KAAK;;;;iBAYb,EAAE;wBAGK,EAAE;;;;;mBAgBN,KAAK;oBAGJ,KAAK;;wBAYnB,IAAI;0BAGD,KAAK;iBAGf,EAAE;uBAGK,KAAK;gBAGiB,SAAS;2BAGK,EAAE;;;;EAuBrE,aAAa,CAAC,KAAY;IACxB,IAAK,KAAK,CAAC,MAAsB,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE;MACxD,qBAAqB,CAAC,GAAG,EAAE;QACzB,IAAI,CAAC,WAAW,EAAE,CAAC;MACrB,CAAC,CAAC,CAAC;KACJ;EACH,CAAC;EAGD,YAAY,CAAC,QAAgB;IAC3B,IAAI,CAAC,MAAM,GAAG,QAAQ,KAAK,EAAE,CAAC;EAChC,CAAC;EAGD,YAAY,CAAC,QAA2B;IACtC,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;MAChC,IAAI;QACF,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;OACpC;MAAC,OAAO,CAAC,EAAE;QACV,IAAI,QAAQ,EAAE;UACZ,IAAI,CAAC,MAAM,GAAG,CAAC,QAAQ,CAAC,CAAC;SAC1B;aAAM;UACL,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC;SAClB;OACF;KACF;SAAM,IAAI,QAAQ,EAAE;MACnB,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC;KACxB;SAAM;MACL,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC;KAClB;EACH,CAAC;EAGD,WAAW,CAAC,QAAgB;IAC1B,MAAM,KAAK,GAAG,CAAC,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC;IAExF,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE;MAChD,MAAM,IAAI,KAAK,CAAC,QAAQ,QAAQ,gBAAgB,CAAC,CAAC;KACnD;EACH,CAAC;EAOO,iBAAiB;IACvB,OAAO,IAAI,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,oBAAoB,GAAG,OAAO,CAAC,CAAC,CAAC;EACvE,CAAC;EAoGO,cAAc;IACpB,OAAO,CACL,gBACE,KAAK,EAAC,+CAA+C,EACrD,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,EAAyB,CAAC,EACnD,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EAAE,IAAI,CAAC,SAAS,sBACP,GAAG,IAAI,CAAC,OAAO,gBAAgB,IAAI,CAAC,eAAe,EAAE,mBACxD,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,kBACjC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAC7C,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,GACT,CACb,CAAC;EACJ,CAAC;EAEO,WAAW;IACjB,OAAO,CACL,aACE,KAAK,EAAC,4CAA4C,EAClD,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,EAAsB,CAAC,EAChD,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAC5C,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,YAAY,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,uBAC1C,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,sBACzC,GAAG,IAAI,CAAC,OAAO,gBAAgB,IAAI,CAAC,eAAe,EAAE,mBACxD,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,kBACjC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAC7C,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,GACnB,CACH,CAAC;EACJ,CAAC;EAED,kBAAkB;IAChB,IAAI,IAAI,CAAC,oBAAoB,EAAE;MAC7B,IAAI,CAAC,oBAAoB,EAAE,CAAC;KAC7B;EACH,CAAC;EAED,KAAK,CAAC,iBAAiB;IACrB,IAAI,CAAC,OAAO,GAAG,cAAc,YAAY,EAAE,EAAE,CAAC;IAC9C,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC5B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC9B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAE9B,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,KAAK,CAAC;IAEpD,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;MACtB,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;KAChG;EACH,CAAC;EAED,MAAM;;IACJ,MAAM,mBAAmB,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,cAAc,CAAC,CAAC;IAClE,MAAM,eAAe,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC;IACnF,MAAM,mBAAmB,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,kBAAkB,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC;IAChG,MAAM,SAAS,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,IAAI,CAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,MAAM,IAAG,CAAC,CAAC;IAE5E,MAAM,OAAO,GAAG;MACd,YAAY,EAAE,IAAI;MAClB,8BAA8B,EAC5B,mBAAmB;QACnB,IAAI,CAAC,IAAI,KAAK,QAAQ;QACtB,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;MACrE,6BAA6B,EAAE,eAAe;MAC9C,kCAAkC,EAAE,mBAAmB;MACvD,uBAAuB,EAAE,SAAS;MAClC,sBAAsB,EAAE,IAAI,CAAC,QAAQ;MACrC,wBAAwB,EAAE,IAAI,CAAC,OAAO,IAAI,SAAS;MACnD,yBAAyB,EAAE,IAAI,CAAC,QAAQ;MACxC,yBAAyB,EAAE,IAAI,CAAC,QAAQ;MACxC,yBAAyB,EAAE,IAAI,CAAC,QAAQ;MACxC,uBAAuB,EAAE,IAAI,CAAC,MAAM;MACpC,2BAA2B,EAAE,CAAC,IAAI,CAAC,MAAM;MACzC,0BAA0B,EAAE,IAAI,CAAC,SAAS;MAC1C,8BAA8B,EAAE,CAAC,IAAI,CAAC,SAAS;MAC/C,8BAA8B,EAAE,IAAI,CAAC,WAAW;MAChD,CAAC,oBAAoB,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI;MAC9C,CAAC,oBAAoB,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI;KAC/C,CAAC;IAEF,OAAO,CACL,EAAC,IAAI,kBACS,IAAI,CAAC,OAAO,IAAI,SAAS,EACrC,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,EACrC,OAAO,EAAE,IAAI,CAAC,WAAW,eACd,IAAI,CAAC,MAAM;MAEtB,WAAK,KAAK,EAAE,OAAO;QACjB,aAAO,KAAK,EAAC,mBAAmB,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO;UACnD,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,eAAa;UACvC,CAAC,IAAI,CAAC,YAAY,IAAI,CACrB,YAAM,KAAK,EAAC,oBAAoB;YAC9B,YAAM,KAAK,EAAC,2BAA2B,iBAAa,MAAM,IACvD,IAAI,CAAC,QAAQ;cACZ,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,mBAAmB;cAChD,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,mBAAmB,CAC7C;YACP,YAAM,KAAK,EAAC,yBAAyB,IAClC,IAAI,CAAC,QAAQ;cACZ,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,iBAAiB;cAC9C,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,iBAAiB,CAC3C,CACF,CACR,CACK;QACR,WAAK,KAAK,EAAC,2BAA2B;UACnC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE;UAC3D,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC,CAAC,CAAC,CACtE,CAAC,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;YACnE,CAAC,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC,CAAC,CAAC,CAAC,CACrD,mBACE,KAAK,EAAC,0BAA0B,EAChC,IAAI,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,EAChD,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,EACd,OAAO,EAAE,IAAI,CAAC,+BAA+B,EAC7C,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,GAC3B,CAChB,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAChB,mBACE,KAAK,EAAC,0BAA0B,EAChC,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,EACd,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,SAAS,EAAE,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,gBAAgB,mBACvC,IAAI,CAAC,OAAO,GACd,CAChB,CAAC,CAAC,CAAC,CACF,YAAM,IAAI,EAAC,cAAc,GAAQ,CAClC,CACF,CAAC,CAAC,CAAC,CACF,YAAM,IAAI,EAAC,cAAc,GAAQ,CAClC,CACG;QACL,CAAC,CAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,MAAM,IAAG,CAAC,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,CAChD,EAAC,oBAAoB,IACnB,WAAW,EAAC,YAAY,EACxB,EAAE,EAAE,GAAG,IAAI,CAAC,OAAO,cAAc,EACjC,KAAK,EAAE,IAAI,CAAC,MAAM,EAClB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,oBAAoB,EAAE,IAAI,CAAC,oBAAoB,EAC/C,mBAAmB,EAAE,mBAAmB,EACxC,mBAAmB,EAAE,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,mBAAmB,GACnE,CACH,CACG,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Listen, Prop, State, Watch } from \"@stencil/core\";\n\nimport { StzhInputBlurEvent, StzhInputChangedEvent, StzhInputChangeEvent, StzhInputFocusEvent } from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nimport { StzhInputDescription } from \"./stzh-input-description\";\n\nlet inputCounter = 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 * @slot button-right - Slot for right button\n /\n@Component({\n tag: \"stzh-input\",\n styleUrl: \"stzh-input.scss\",\n scoped: true,\n})\nexport class StzhInput {\n /* Translation strings /\n @Prop() localization: StzhLocaleComponent;\n\n /* Whether the input is a textarea or an input field /\n @Prop() multiline: boolean = false;\n\n /* Rows attribute if input element is textarea /\n @Prop() rows: number;\n\n /* If input field, this defines the type (if `search`, a search icon will be displayed) /\n @Prop({ reflect: true }) type: \"text\" \| \"search\" \| \"password\" \| \"email\" \| \"url\" \| \"tel\" \| \"number\" \| \"hidden\" =\n \"text\";\n\n /* If input type is number, this will be the step size /\n @Prop() step: number = 1;\n\n /* If input type is number, this will be the minimum step number /\n @Prop() min: number;\n\n /* If input type is number, this will be the maximum step number /\n @Prop() max: number;\n\n /* If input type is number and this property is true, this will show the spin buttons on hover/focus /\n @Prop({ reflect: true }) showSpin: boolean = false;\n\n /* Whether the element is readonly or not /\n @Prop({ reflect: true }) readonly: boolean = false;\n\n /* Whether the element is disabled or not /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* Whether clearable button is showing when input field has value and is enabled (button-right slot not usable anymore when true) /\n @Prop({ reflect: true }) clearable: boolean = false;\n\n /* Hide `(optional)` label (or use `required` inside form to hide it) /\n @Prop({ reflect: true }) hideOptional: boolean = false;\n\n /* Minimum of characters /\n @Prop() minlength: number;\n\n /* Maxlength of characters /\n @Prop() maxlength: number;\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 /* Default value (used by reset) /\n @Prop({ mutable: true }) defaultValue: 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 /* Invalid status /\n @Prop({ reflect: true }) invalid: boolean = false;\n\n /* Required status /\n @Prop({ reflect: true }) required: boolean = false;\n\n /\n Specify inputmode.\n * See [MDN](https://developer.mozilla.org/de/docs/Web/HTML/Global_attributes/inputmode) for possible values\n /\n @Prop() inputmode: string;\n\n /\n Specify what the user agent has to provide as automated assistance.\n * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for possible values\n /\n @Prop() autocomplete: string = \"on\";\n\n /* Whether autocomplete should be turned off /\n @Prop() noAutocomplete: boolean = false;\n\n /* Label /\n @Prop() label: string = \"\";\n\n /* Whether label should be visually hidden. /\n @Prop() labelHidden: boolean = false;\n\n /* Size variant /\n @Prop({ reflect: true }) size: \"default\" \| \"small\" = \"default\";\n\n /* Id for element which describes the input (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) /\n @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n /* Whether the input is filled or not /\n @State() filled: boolean;\n\n /* Whether to show the password or not /\n @State() showPassword: boolean;\n\n @Element() element: HTMLStzhInputElement;\n\n /* Input change event /\n @Event() stzhChange: EventEmitter<StzhInputChangeEvent>;\n\n /* Input changed event /\n @Event() stzhChanged: EventEmitter<StzhInputChangedEvent>;\n\n /* Input focus event /\n @Event() stzhFocus: EventEmitter<StzhInputFocusEvent>;\n\n /* Input blur event */\n @Event() stzhBlur: EventEmitter<StzhInputBlurEvent>;\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(\"value\")\n valueWatcher(newValue: string) {\n this.filled = newValue !== \"\";\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 @Watch(\"type\")\n typeWatcher(newValue: string) {\n const types = [\"text\", \"search\", \"password\", \"email\", \"url\", \"tel\", \"number\", \"hidden\"];\n\n if (!this.multiline && !types.includes(newValue)) {\n throw new Error(`Type ${newValue} not supported`);\n }\n }\n\n private input: HTMLInputElement \| HTMLTextAreaElement;\n private inputId: string;\n private focusedByInput: boolean = false;\n private renderPromiseResolve: (value?: unknown) => void;\n\n private waitForNextRender() {\n return new Promise(resolve => (this.renderPromiseResolve = resolve));\n }\n\n private onClearClick = async (event: MouseEvent) => {\n this.value = \"\";\n this.input.focus();\n\n await this.waitForNextRender();\n\n this.stzhChange.emit({\n component: \"stzh-input\",\n originalEvent: event,\n value: this.value,\n });\n\n this.stzhChanged.emit({\n component: \"stzh-input\",\n originalEvent: event,\n value: this.value,\n });\n };\n\n private onTogglePasswordVisibilityClick = async () => {\n this.showPassword = !this.showPassword;\n };\n\n private handleReset = async () => {\n this.value = this.defaultValue;\n // we also update value, since render doesn't get executed sometimes\n this.input.value = this.defaultValue;\n\n // TODO: check if we need own reset event or trigger the change event\n // (custom browser behaviour doesn't send change event, when reset is executed)\n // this.stzhChange.emit({\n // component: \"stzh-input\",\n // originalEvent: event,\n // value: this.value\n // });\n };\n\n private onInput = (event: InputEvent) => {\n this.value = this.input.value;\n\n this.stzhChange.emit({\n component: \"stzh-input\",\n originalEvent: event,\n value: this.value,\n });\n };\n\n private onChange = (event: InputEvent) => {\n this.value = this.input.value;\n\n this.stzhChanged.emit({\n component: \"stzh-input\",\n originalEvent: event,\n value: this.value,\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-input\",\n originalEvent: event,\n });\n };\n\n private onBlur = (event: FocusEvent) => {\n // fixes weird bug where autofill selection doesn't get removed\n this.input.value = this.input.value;\n\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-input\",\n originalEvent: event,\n });\n };\n\n private renderTextarea(): HTMLTextAreaElement {\n return (\n <textarea\n class=\"stzh-input__input stzh-input__input--textarea\"\n ref={el => (this.input = el as HTMLTextAreaElement)}\n id={this.inputId}\n name={this.name}\n value={this.value}\n rows={this.rows}\n disabled={this.disabled}\n readonly={this.readonly}\n minlength={this.minlength}\n maxlength={this.maxlength}\n aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n aria-required={this.required ? \"true\" : \"false\"}\n aria-invalid={this.invalid ? \"true\" : \"false\"}\n onChange={this.onChange}\n onInput={this.onInput}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n ></textarea>\n );\n }\n\n private renderInput(): HTMLInputElement {\n return (\n <input\n class=\"stzh-input__input stzh-input__input--input\"\n ref={el => (this.input = el as HTMLInputElement)}\n id={this.inputId}\n type={this.showPassword ? \"text\" : this.type}\n name={this.name}\n value={this.value}\n defaultValue={this.defaultValue}\n min={this.min}\n max={this.max}\n step={this.step}\n inputmode={this.inputmode}\n disabled={this.disabled}\n readonly={this.readonly}\n minlength={this.minlength}\n maxlength={this.maxlength}\n autocomplete={this.noAutocomplete ? \"off\" : this.autocomplete}\n aria-autocomplete={this.noAutocomplete ? \"none\" : undefined}\n aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n aria-required={this.required ? \"true\" : \"false\"}\n aria-invalid={this.invalid ? \"true\" : \"false\"}\n onChange={this.onChange}\n onInput={this.onInput}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n />\n );\n }\n\n componentDidRender() {\n if (this.renderPromiseResolve) {\n this.renderPromiseResolve();\n }\n }\n\n async componentWillLoad() {\n this.inputId = `stzh-input-${inputCounter++}`;\n this.typeWatcher(this.type);\n this.valueWatcher(this.value);\n this.errorWatcher(this.error);\n\n this.defaultValue = this.defaultValue \|\| this.value;\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"input\");\n }\n }\n\n render() {\n const buttonRightSlotUsed = hasSlot(this.element, \"button-right\");\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-input\": true,\n \"stzh-input--has-button-right\":\n buttonRightSlotUsed \|\|\n this.type === \"search\" \|\|\n (this.clearable && this.filled && !this.readonly && !this.disabled),\n \"stzh-input--has-description\": descriptionUsed,\n \"stzh-input--has-description-long\": descriptionLongUsed,\n \"stzh-input--has-error\": errorUsed,\n \"stzh-input--has-spin\": this.showSpin,\n \"stzh-input--is-invalid\": this.invalid \|\| errorUsed,\n \"stzh-input--is-disabled\": this.disabled,\n \"stzh-input--is-readonly\": this.readonly,\n \"stzh-input--is-required\": this.required,\n \"stzh-input--is-filled\": this.filled,\n \"stzh-input--is-not-filled\": !this.filled,\n \"stzh-input--is-clearable\": this.clearable,\n \"stzh-input--is-not-clearable\": !this.clearable,\n \"stzh-input--has-label-hidden\": this.labelHidden,\n [`stzh-input--size-${this.size}`]: !!this.size,\n [`stzh-input--type-${this.type}`]: !!this.type,\n };\n\n return (\n <Host\n is-invalid={this.invalid \|\| errorUsed}\n tabindex={this.disabled ? null : \"-1\"}\n onFocus={this.onRootFocus}\n is-filled={this.filled}\n >\n <div class={classes}>\n <label class=\"stzh-input__label\" htmlFor={this.inputId}>\n {this.label ? this.label : <slot></slot>}\n {!this.hideOptional && (\n <span class=\"stzh-input__marker\">\n <span class=\"stzh-input__marker-symbol\" aria-hidden=\"true\">\n {this.required\n ? this.localization.$globals.requiredFieldMarker\n : this.localization.$globals.optionalFieldMarker}\n </span>\n <span class=\"stzh-input__marker-text\">\n {this.required\n ? this.localization.$globals.requiredFieldText\n : this.localization.$globals.optionalFieldText}\n </span>\n </span>\n )}\n </label>\n <div class=\"stzh-input__field-wrapper\">\n {this.multiline ? this.renderTextarea() : this.renderInput()}\n {this.clearable \|\| this.type === \"search\" \|\| this.type === \"password\" ? (\n (!this.clearable \|\| this.disabled \|\| this.readonly \|\| !this.filled) &&\n (this.type === \"search\" \|\| this.type === \"password\") ? (\n <stzh-button\n class=\"stzh-input__button-right\"\n icon={this.type === \"search\" ? \"search\" : \"view\"}\n size={this.size}\n iconOnly={true}\n onClick={this.onTogglePasswordVisibilityClick}\n disabled={this.disabled \|\| this.readonly}\n ></stzh-button>\n ) : this.filled ? (\n <stzh-button\n class=\"stzh-input__button-right\"\n icon=\"close\"\n size={this.size}\n iconOnly={true}\n onClick={this.onClearClick}\n a11yLabel={this.localization.$globals.clearButtonLabel}\n aria-controls={this.inputId}\n ></stzh-button>\n ) : (\n <slot name=\"button-right\"></slot>\n )\n ) : (\n <slot name=\"button-right\"></slot>\n )}\n </div>\n {(this._error?.length > 0 \|\| this.description) && (\n <StzhInputDescription\n classPrefix=\"stzh-input\"\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"]}

package/dist/collection/components/stzh-pagetitle/stzh-pagetitle.css CHANGED Viewed

@@ -170,9 +170,10 @@
 * @prop --stzh-pagetitle-disturber-stuck-height: Global: Disturber height when sticky (below medium breakpoint)
 * @prop --stzh-pagetitle-disturber-is-stuck: **Global**: Whether disturber is currently sticky (readonly variable on `<html>`)
 * @prop --stzh-pagetitle-disturber-is-not-stuck: **Global**: Whether disturber is currently not sticky (readonly variable on `<html>`)
+* @prop --stzh-pagetitle-background-color: **Global**: Background color of pagetitle.
 */
 :host {
-  --background-color: var(--stzh-pagetitle-background-color);
+  --background-color: var(--stzh-pagetitle-background-color, var(--stzh-pagetitle-background-color));
   --image-background-color: var(--stzh-ratio-background-color);
 }
 :host ::slotted([slot=image]) {

package/dist/collection/components/stzh-pagetitle-home/stzh-pagetitle-home.css CHANGED Viewed

@@ -359,6 +359,21 @@
     background: linear-gradient(270deg, rgba(0, 0, 0, 0) 31.21%, rgba(0, 0, 0, 0.5) 91.45%);
   }
 }
+@media screen and (min-width: 1600px) {
+  .stzh-pagetitle-home__image-gradient {
+    left: calc((100vw - 84.25rem) / 2);
+  }
+  .stzh-pagetitle-home__image-gradient:before {
+    content: "";
+    position: absolute;
+    background: rgba(0, 0, 0, 0.5);
+    top: 0;
+    right: calc((100vw - 84.25rem) / 2 + 84.25rem - var(--stzh-scrollbar-width, 0px));
+    bottom: 0;
+    left: calc((100vw - 84.25rem) / 2 * -1 - var(--stzh-scrollbar-width, 0px));
+    z-index: 1;
+  }
+}
 .stzh-pagetitle-home__meta {
   display: flex;
   flex-direction: column-reverse;
@@ -415,6 +430,10 @@
     grid-column: 1/span 10;
   }
 }
+.stzh-pagetitle-home__ratio {
+  --max-height: 42.5rem;
+  --overflow: hidden;
+}
 .stzh-pagetitle-home--has-no-image .stzh-pagetitle-home__ratio {
   display: none;
 }

package/dist/collection/components/stzh-pagination/stzh-pagination.css CHANGED Viewed

@@ -162,12 +162,22 @@
   border: 0 !important;
 }
+:host {
+  --justify-content: inherit;
+  --padding-left: calc(var(--stzh-form-input-height) + var(--stzh-space-medium));
+}
+:host[width=full] {
+  --justify-content: space-between;
+  --padding-left: 0;
+}
 .stzh-pagination {
   position: relative;
   display: flex;
   align-items: center;
   gap: var(--stzh-space-medium);
-  padding-left: calc(var(--stzh-form-input-height) + var(--stzh-space-medium));
+  padding-left: var(--padding-left);
+  justify-content: var(--justify-content);
 }
 .stzh-pagination__input {
   --text-align: center;

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

@@ -1,4 +1,4 @@
-import { Host, h, } from "@stencil/core";
+import { Fragment, h, Host } from "@stencil/core";
 /**
  */
 export class StzhPagination {
@@ -17,7 +17,7 @@ export class StzhPagination {
       if (previous !== this.value) {
         this.stzhChange.emit({
           component: "stzh-pagination",
-          page: Number(this.value)
+          page: Number(this.value),
         });
       }
     };
@@ -37,13 +37,15 @@ export class StzhPagination {
     this.labelHidden = false;
     this.readonly = false;
     this.disabled = false;
+    this.allowManualInput = true;
     this.description = undefined;
     this.descriptionLong = undefined;
     this.error = undefined;
     this.invalid = false;
     this.required = false;
     this.size = "default";
-    this.a11yDescribedby = '';
+    this.width = "default";
+    this.a11yDescribedby = "";
     this.localization = undefined;
   }
   /** Set current page to previous */
@@ -65,8 +67,7 @@ export class StzhPagination {
       "stzh-pagination": true,
       [`stzh-pagination--size-${this.size}`]: !!this.size,
     };
-    return (h(Host, { tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { class: classes }, h("stzh-input", { class: "stzh-pagination__input", type: "number", min: 1, max: this.total, label: this.label || this.localization.label, labelHidden: true, ref: (el) => (this.input = el), onStzhChange: this.onInputChange, value: ((_a = this.value) === null || _a === void 0 ? void 0 : _a.toString()) || '', required: this.required, disabled: this.disabled, description: this.description, descriptionLong: this.descriptionLong, error: this.error, a11yDescribedby: this.a11yDescribedby, name: this.name, size: this.size, invalid: this.invalid, hideOptional: true, noAutocomplete: true }), h("div", { class: "stzh-pagination__total" }, this.localization.totalLabel
-      .replace(/\{total\}/gi, this.total.toString())), h("stzh-buttongroup", null, h("stzh-button", { variant: "tertiary", icon: "angle-left", "icon-only": true, size: this.size, a11yDisabled: this.value <= 1, a11yDescribedby: this.a11yDescribedby, a11yLabel: `${this.label || this.localization.label}, ${this.localization.prevLabel}, ${this.localization.selectedPageLabel} ${this.value}`, disabled: this.disabled, onClick: () => this.prev() }), h("stzh-button", { variant: "tertiary", icon: "angle-right", "icon-only": true, size: this.size, a11yDisabled: this.value >= this.total, a11yDescribedby: this.a11yDescribedby, a11yLabel: `${this.label || this.localization.label}, ${this.localization.nextLabel}, ${this.localization.selectedPageLabel} ${this.value}`, disabled: this.disabled, onClick: () => this.next() })))));
+    return (h(Host, { tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus, width: this.width }, h("div", { class: classes }, this.allowManualInput ? (h(Fragment, null, h("stzh-input", { class: "stzh-pagination__input", type: "number", min: 1, max: this.total, label: this.label || this.localization.label, labelHidden: true, ref: el => (this.input = el), onStzhChange: this.onInputChange, value: ((_a = this.value) === null || _a === void 0 ? void 0 : _a.toString()) || "", required: this.required, disabled: this.disabled, description: this.description, descriptionLong: this.descriptionLong, error: this.error, a11yDescribedby: this.a11yDescribedby, name: this.name, size: this.size, invalid: this.invalid, hideOptional: true, noAutocomplete: true }), h("div", { class: "stzh-pagination__total" }, this.localization.totalLabel.replace(/\{total\}/gi, this.total.toString())))) : (h("div", { class: "stzh-pagination__total" }, this.value, " ", this.localization.totalLabel.replace(/\{total\}/gi, this.total.toString()))), h("stzh-buttongroup", null, h("stzh-button", { variant: "tertiary", icon: "angle-left", "icon-only": true, size: this.size, a11yDisabled: this.value <= 1, a11yDescribedby: this.a11yDescribedby, a11yLabel: `${this.label || this.localization.label}, ${this.localization.prevLabel}, ${this.localization.selectedPageLabel} ${this.value}`, disabled: this.disabled, onClick: () => this.prev() }), h("stzh-button", { variant: "tertiary", icon: "angle-right", "icon-only": true, size: this.size, a11yDisabled: this.value >= this.total, a11yDescribedby: this.a11yDescribedby, a11yLabel: `${this.label || this.localization.label}, ${this.localization.nextLabel}, ${this.localization.selectedPageLabel} ${this.value}`, disabled: this.disabled, onClick: () => this.next() })))));
   }
   static get is() { return "stzh-pagination"; }
   static get encapsulation() { return "scoped"; }
@@ -208,6 +209,24 @@ export class StzhPagination {
         "reflect": true,
         "defaultValue": "false"
       },
+      "allowManualInput": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether the current page is mutable via input"
+        },
+        "attribute": "allow-manual-input",
+        "reflect": true,
+        "defaultValue": "true"
+      },
       "description": {
         "type": "string",
         "mutable": false,
@@ -313,6 +332,24 @@ export class StzhPagination {
         "reflect": true,
         "defaultValue": "\"default\""
       },
+      "width": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"default\" | \"full\"",
+          "resolved": "\"default\" | \"full\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Width variant"
+        },
+        "attribute": "width",
+        "reflect": true,
+        "defaultValue": "\"default\""
+      },
       "a11yDescribedby": {
         "type": "string",
         "mutable": false,
@@ -329,7 +366,7 @@ export class StzhPagination {
         },
         "attribute": "a11y-describedby",
         "reflect": false,
-        "defaultValue": "''"
+        "defaultValue": "\"\""
       },
       "localization": {
         "type": "unknown",

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

	@@ -1 +1 @@
1	- {"version":3,"file":"stzh-pagination.js","sourceRoot":"","sources":["../../../../src/components/stzh-pagination/stzh-pagination.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Prop,\n Host,\n Element,\n h,\n Event,\n EventEmitter,\n Method,\n} from \"@stencil/core\";\n\nimport {\n StzhInputChangeEvent,\n StzhPaginationChangeEvent\n} from \"../../index\";\n\nimport { StzhPaginationLocalizedText } from \"./stzh-pagination.localization\";\n\n/*\n /\n@Component({\n tag: \"stzh-pagination\",\n styleUrl: \"stzh-pagination.scss\",\n scoped: true\n})\nexport class StzhPagination {\n /** Total pages available. /\n @Prop() total: number = 1;\n\n /* Name of the hidden date picker input. /\n @Prop({ reflect: true }) name: string = \"\";\n\n /* Current page. /\n @Prop({ mutable: true }) value: number = 1;\n\n /* Label for dropdown /\n @Prop() label: string = \"\";\n\n /* Whether label is hidden. /\n @Prop() labelHidden: boolean = false;\n\n /* Whether the element is readonly or not /\n @Prop({ reflect: true }) readonly: boolean = false;\n\n /* Whether the element is disabled or not /\n @Prop({ reflect: true }) disabled: boolean = false;\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 /* One or multiple error message (use error slot as alternative) /\n @Prop() error: string \| 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 /* Size variant /\n @Prop({ reflect: true }) size: \"default\" \| \"small\" = \"default\";\n\n /* Id of the element which describes the input /\n @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = '';\n\n /* Translation strings. /\n @Prop() localization: StzhPaginationLocalizedText;\n\n /* Pagination change event /\n @Event() stzhChange: EventEmitter<StzhPaginationChangeEvent>;\n\n @Element() element: HTMLStzhPaginationElement;\n\n /* Set current page to previous /\n @Method()\n async prev() {\n this.gotoPage(this.value - 1);\n }\n\n /* Set current page to next */\n @Method()\n async next() {\n this.gotoPage(this.value + 1);\n }\n\n private input: HTMLStzhInputElement;\n\n private gotoPage = (newPage: number) => {\n const previous = this.value;\n\n if (newPage >= 1 && newPage <= this.total) {\n this.value = newPage;\n } else if (newPage > this.total) {\n this.value = this.total;\n } else {\n this.value = 1;\n }\n\n if (previous !== this.value) {\n this.stzhChange.emit({\n component: \"stzh-pagination\",\n page: Number(this.value)\n });\n }\n }\n\n private onRootFocus = () => {\n if (this.input) {\n this.input.focus();\n }\n }\n\n private onInputChange = (event: CustomEvent<StzhInputChangeEvent>) => {\n const newPage = Number(event.detail.value) \|\| 1;\n this.gotoPage(newPage);\n }\n\n async componentWillLoad() {\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"pagination\");\n }\n }\n\n render() {\n const classes = {\n \"stzh-pagination\": true,\n [`stzh-pagination--size-${this.size}`]: !!this.size,\n };\n\n return (\n <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n <div class={classes}>\n <stzh-input\n class=\"stzh-pagination__input\"\n type=\"number\"\n min={1}\n max={this.total}\n label={this.label \|\| this.localization.label}\n labelHidden={true}\n ref={(el) => (this.input = el as HTMLStzhInputElement)}\n onStzhChange={this.onInputChange}\n value={this.value?.toString() \|\| ''}\n required={this.required}\n disabled={this.disabled}\n description={this.description}\n descriptionLong={this.descriptionLong}\n error={this.error}\n a11yDescribedby={this.a11yDescribedby}\n name={this.name}\n size={this.size}\n invalid={this.invalid}\n hideOptional={true}\n noAutocomplete={true}\n ></stzh-input>\n <div class=\"stzh-pagination__total\">\n {this.localization.totalLabel\n .replace(/\\{total\\}/gi, this.total.toString())}\n </div>\n <stzh-buttongroup>\n <stzh-button\n variant=\"tertiary\"\n icon=\"angle-left\"\n icon-only\n size={this.size}\n a11yDisabled={this.value <= 1}\n a11yDescribedby={this.a11yDescribedby}\n a11yLabel={`${this.label \|\| this.localization.label}, ${this.localization.prevLabel}, ${this.localization.selectedPageLabel} ${this.value}`}\n disabled={this.disabled}\n onClick={() => this.prev()}\n ></stzh-button>\n <stzh-button\n variant=\"tertiary\"\n icon=\"angle-right\"\n icon-only\n size={this.size}\n a11yDisabled={this.value >= this.total}\n a11yDescribedby={this.a11yDescribedby}\n a11yLabel={`${this.label \|\| this.localization.label}, ${this.localization.nextLabel}, ${this.localization.selectedPageLabel} ${this.value}`}\n disabled={this.disabled}\n onClick={() => this.next()}\n ></stzh-button>\n </stzh-buttongroup>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"stzh-pagination.js","sourceRoot":"","sources":["../../../../src/components/stzh-pagination/stzh-pagination.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Fragment, h, Host, Method, Prop } from \"@stencil/core\";\n\nimport { StzhInputChangeEvent, StzhPaginationChangeEvent } from \"../../index\";\n\nimport { StzhPaginationLocalizedText } from \"./stzh-pagination.localization\";\n\n/*\n /\n@Component({\n tag: \"stzh-pagination\",\n styleUrl: \"stzh-pagination.scss\",\n scoped: true,\n})\nexport class StzhPagination {\n /** Total pages available. /\n @Prop() total: number = 1;\n\n /* Name of the hidden date picker input. /\n @Prop({ reflect: true }) name: string = \"\";\n\n /* Current page. /\n @Prop({ mutable: true }) value: number = 1;\n\n /* Label for dropdown /\n @Prop() label: string = \"\";\n\n /* Whether label is hidden. /\n @Prop() labelHidden: boolean = false;\n\n /* Whether the element is readonly or not /\n @Prop({ reflect: true }) readonly: boolean = false;\n\n /* Whether the element is disabled or not /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* Whether the current page is mutable via input /\n @Prop({ reflect: true }) allowManualInput: boolean = true;\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 /* One or multiple error message (use error slot as alternative) /\n @Prop() error: string \| 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 /* Size variant /\n @Prop({ reflect: true }) size: \"default\" \| \"small\" = \"default\";\n\n /* Width variant /\n @Prop({ reflect: true }) width: \"default\" \| \"full\" = \"default\";\n\n /* Id of the element which describes the input /\n @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n /* Translation strings. /\n @Prop() localization: StzhPaginationLocalizedText;\n\n /* Pagination change event /\n @Event() stzhChange: EventEmitter<StzhPaginationChangeEvent>;\n\n @Element() element: HTMLStzhPaginationElement;\n\n /* Set current page to previous /\n @Method()\n async prev() {\n this.gotoPage(this.value - 1);\n }\n\n /* Set current page to next */\n @Method()\n async next() {\n this.gotoPage(this.value + 1);\n }\n\n private input: HTMLStzhInputElement;\n\n private gotoPage = (newPage: number) => {\n const previous = this.value;\n\n if (newPage >= 1 && newPage <= this.total) {\n this.value = newPage;\n } else if (newPage > this.total) {\n this.value = this.total;\n } else {\n this.value = 1;\n }\n\n if (previous !== this.value) {\n this.stzhChange.emit({\n component: \"stzh-pagination\",\n page: Number(this.value),\n });\n }\n };\n\n private onRootFocus = () => {\n if (this.input) {\n this.input.focus();\n }\n };\n\n private onInputChange = (event: CustomEvent<StzhInputChangeEvent>) => {\n const newPage = Number(event.detail.value) \|\| 1;\n this.gotoPage(newPage);\n };\n\n async componentWillLoad() {\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"pagination\");\n }\n }\n\n render() {\n const classes = {\n \"stzh-pagination\": true,\n [`stzh-pagination--size-${this.size}`]: !!this.size,\n };\n\n return (\n <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus} width={this.width}>\n <div class={classes}>\n {this.allowManualInput ? (\n <Fragment>\n <stzh-input\n class=\"stzh-pagination__input\"\n type=\"number\"\n min={1}\n max={this.total}\n label={this.label \|\| this.localization.label}\n labelHidden={true}\n ref={el => (this.input = el as HTMLStzhInputElement)}\n onStzhChange={this.onInputChange}\n value={this.value?.toString() \|\| \"\"}\n required={this.required}\n disabled={this.disabled}\n description={this.description}\n descriptionLong={this.descriptionLong}\n error={this.error}\n a11yDescribedby={this.a11yDescribedby}\n name={this.name}\n size={this.size}\n invalid={this.invalid}\n hideOptional={true}\n noAutocomplete={true}\n ></stzh-input>\n <div class=\"stzh-pagination__total\">\n {this.localization.totalLabel.replace(/\\{total\\}/gi, this.total.toString())}\n </div>\n </Fragment>\n ) : (\n <div class=\"stzh-pagination__total\">\n {this.value} {this.localization.totalLabel.replace(/\\{total\\}/gi, this.total.toString())}\n </div>\n )}\n <stzh-buttongroup>\n <stzh-button\n variant=\"tertiary\"\n icon=\"angle-left\"\n icon-only\n size={this.size}\n a11yDisabled={this.value <= 1}\n a11yDescribedby={this.a11yDescribedby}\n a11yLabel={`${this.label \|\| this.localization.label}, ${this.localization.prevLabel}, ${\n this.localization.selectedPageLabel\n } ${this.value}`}\n disabled={this.disabled}\n onClick={() => this.prev()}\n ></stzh-button>\n <stzh-button\n variant=\"tertiary\"\n icon=\"angle-right\"\n icon-only\n size={this.size}\n a11yDisabled={this.value >= this.total}\n a11yDescribedby={this.a11yDescribedby}\n a11yLabel={`${this.label \|\| this.localization.label}, ${this.localization.nextLabel}, ${\n this.localization.selectedPageLabel\n } ${this.value}`}\n disabled={this.disabled}\n onClick={() => this.next()}\n ></stzh-button>\n </stzh-buttongroup>\n </div>\n </Host>\n );\n }\n}\n"]}

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

@@ -307,7 +307,7 @@ export class StzhPanorama {
       text: imageTitle,
     }));
     const currentScene = this._scenes.find(({ sceneId }) => sceneId === this.scene);
-    return (h(Host, null, h("div", { class: classes }, h("stzh-figure", { class: "stzh-panorama__figure", heading: this.heading, caption: currentScene.caption || this.caption, copyright: currentScene.copyright || this.copyright }, h("stzh-ratio", null, h("div", { ref: el => (this.containerElement = el), class: "stzh-panorama__container", tabindex: "0" }, h("div", { class: "stzh-panorama__sceneselector" }, sceneOptions.length > 1 && (h("stzh-dropdown", { class: "stzh-panorama__sceneselector-dropdown", size: "small", popoverPlacement: "top", label: this.localization.sceneLabel, labelHidden: true, noSearch: true, items: [this.scene], options: sceneOptions, onStzhChange: this.handleSceneDropdownChange })), h("div", { class: "stzh-panorama__copyright" }, currentScene.imageAuthor || currentScene.copyright || this.copyright)), h("div", { class: "stzh-panorama__controls", onKeyDown: this.handleControlsKeydown }, this.showControls && (h(Fragment, null, h("stzh-button", { class: "stzh-panorama__control stzh-panorama__control--show-medium", iconOnly: true, "a11y-label": this.localization.panLeft, variant: "secondary", icon: "arrow-left", size: "small", onClick: () => this.action("panLeft") }), h("stzh-button", { class: "stzh-panorama__control stzh-panorama__control--show-medium", iconOnly: true, "a11y-label": this.localization.panRight, variant: "secondary", icon: "arrow-right", size: "small", onClick: () => this.action("panRight") }), h("stzh-button", { class: "stzh-panorama__control stzh-panorama__control--show-medium", iconOnly: true, "a11y-label": this.localization.panUp, variant: "secondary", icon: "arrow-up", size: "small", onClick: () => this.action("panUp") }), h("stzh-button", { class: "stzh-panorama__control stzh-panorama__control--show-medium", iconOnly: true, "a11y-label": this.localization.panDown, variant: "secondary", icon: "arrow-down", size: "small", onClick: () => this.action("panDown") }), h("stzh-button", { class: "stzh-panorama__control stzh-panorama__control--show-medium", iconOnly: true, "a11y-label": this.localization.zoomIn, variant: "secondary", icon: "plus", size: "small", onClick: () => this.action("zoomIn") }), h("stzh-button", { class: "stzh-panorama__control stzh-panorama__control--show-medium", iconOnly: true, "a11y-label": this.localization.zoomOut, variant: "secondary", icon: "minus", size: "small", onClick: () => this.action("zoomOut") }))), this.isOrientationSupported && (h("stzh-button", { class: "stzh-panorama__control", variant: "secondary", a11yLabel: this.isOrientationActive
+    return (h(Host, null, h("div", { class: classes }, h("stzh-figure", { class: "stzh-panorama__figure", heading: this.heading, caption: currentScene.caption || this.caption, copyright: currentScene.copyright || this.copyright }, h("stzh-ratio", null, h("div", { ref: el => (this.containerElement = el), class: "stzh-panorama__container", tabindex: "0" }, h("div", { class: "stzh-panorama__sceneselector" }, sceneOptions.length > 1 && (h("stzh-dropdown", { class: "stzh-panorama__sceneselector-dropdown", size: "small", popoverPlacement: "top", label: this.localization.sceneLabel, labelHidden: true, noSearch: true, items: [this.scene], options: sceneOptions, onStzhChange: this.handleSceneDropdownChange })), (currentScene.imageAuthor || currentScene.copyright || this.copyright) && (h("div", { class: "stzh-panorama__copyright" }, currentScene.imageAuthor || currentScene.copyright || this.copyright))), h("div", { class: "stzh-panorama__controls", onKeyDown: this.handleControlsKeydown }, this.showControls && (h(Fragment, null, h("stzh-button", { class: "stzh-panorama__control stzh-panorama__control--show-medium", iconOnly: true, "a11y-label": this.localization.panLeft, variant: "secondary", icon: "arrow-left", size: "small", onClick: () => this.action("panLeft") }), h("stzh-button", { class: "stzh-panorama__control stzh-panorama__control--show-medium", iconOnly: true, "a11y-label": this.localization.panRight, variant: "secondary", icon: "arrow-right", size: "small", onClick: () => this.action("panRight") }), h("stzh-button", { class: "stzh-panorama__control stzh-panorama__control--show-medium", iconOnly: true, "a11y-label": this.localization.panUp, variant: "secondary", icon: "arrow-up", size: "small", onClick: () => this.action("panUp") }), h("stzh-button", { class: "stzh-panorama__control stzh-panorama__control--show-medium", iconOnly: true, "a11y-label": this.localization.panDown, variant: "secondary", icon: "arrow-down", size: "small", onClick: () => this.action("panDown") }), h("stzh-button", { class: "stzh-panorama__control stzh-panorama__control--show-medium", iconOnly: true, "a11y-label": this.localization.zoomIn, variant: "secondary", icon: "plus", size: "small", onClick: () => this.action("zoomIn") }), h("stzh-button", { class: "stzh-panorama__control stzh-panorama__control--show-medium", iconOnly: true, "a11y-label": this.localization.zoomOut, variant: "secondary", icon: "minus", size: "small", onClick: () => this.action("zoomOut") }))), this.isOrientationSupported && (h("stzh-button", { class: "stzh-panorama__control", variant: "secondary", a11yLabel: this.isOrientationActive
         ? this.localization.stopOrientation
         : this.localization.startOrientation, icon: this.isOrientationActive ? "target-bullet" : "target", iconOnly: true, size: "small", onClick: () => this.action(this.isOrientationActive ? "stopOrientation" : "startOrientation") })), h("stzh-button", { class: "stzh-panorama__control", variant: "secondary", a11yLabel: this.isFullscreen
         ? this.localization.disableFullscreenLabel