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

@oiz/stzh-components 3.2.0-beta1 → 3.2.0

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

Files changed (285) hide show

package/dist/cjs/stzh-vbz-intro.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"stzh-vbz-intro.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,swMAAswM;;~~MCSjxM~~,YAAY;;;IAQf,gBAAW,GAA2B,EAAE,CAAC;IAiBzC,SAAI,GAAG;MACb,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;KACzC,CAAC;;sBApBgD,EAAE;;EAIpD,iBAAiB,CAAC,QAAqC;IACrD,IAAI,CAAC,QAAQ,EAAE;MACb,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC;KACvB;SAAM,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;MACvC,IAAI;QACF,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;OACzC;MAAC,OAAO,CAAC,EAAE;QACV,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC;OACvB;KACF;SAAM;MACL,IAAI,CAAC,WAAW,GAAG,QAAQ,CAAC;KAC7B;GACF;EAMD,MAAM,iBAAiB;IACrB,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;MACtB,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;KACpG;GACF;EAED,iBAAiB;IACf,IAAI,CAAC,IAAI,EAAE,CAAC;GACb;EAED,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,gBAAgB,EAAE,IAAI;KACvB,CAAC;IAEF,QACEA,QAACC,UAAI,QACHD,iBAAK,KAAK,EAAE,OAAO,IACjBA,iBAAK,KAAK,EAAC,wBAAwB,IACjCA,kBAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,EACL,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,KAC1BA,iBAAK,KAAK,EAAC,4BAA4B,IACrCA,0BAAc,KAAK,EAAC,oCAAoC,IACrD,IAAI,CAAC,YAAY,CAAC,iBAAiB,CACvB,EACd,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,IAAI,KACxBA,iBAAK,KAAK,EAAC,0BAA0B,IACnCA,uBAAW,KAAK,EAAC,gCAAgC,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,aAAa,IACnF,IAAI,CAAC,KAAK,CACD,CACR,CACP,CAAC,CACE,CACP,CACG,CACD,EACP;GACH;;;;;;;;;;","names":["h","Host"],"sources":["src/components/stzh-vbz-intro/stzh-vbz-intro.scss?tag=stzh-vbz-intro&encapsulation=scoped","src/components/stzh-vbz-intro/stzh-vbz-intro.tsx"],"sourcesContent":["/*\n @prop --background-color: Background color of top news section\n * @prop --background-color-mostsearched: Background color of top most searched section\n \n @prop --stzh-vbz-intro-subtitle-font: Global: Font of the topnews subtitle\n * @prop --stzh-vbz-intro-topnews-item-subtitle-color: Global: Color of the topnews subtitle\n * @prop --stzh-vbz-intro-topnews-item-subtitle-highlighted-color: Global: Color of the topnews subtitle (highlighted variant)\n /\n\n:host {\n --background-color-topnews: #{$topnewsBackgroundColor};\n --background-color-mostsearched: #{$mostsearchedBackgroundColor};\n --topnews-item-subtitle-font: var(--stzh-vbz-intro-topnews-subtitle-font, #{$topnewsSubtitleFont});\n --topnews-item-subtitle-color: var(--stzh-vbz-intro-topnews-item-subtitle-color, #{$colorPrimary70});\n --topnews-item-subtitle-highlighted-color: var(--stzh-vbz-intro-topnews-item-subtitle-highlighted-color, #{$colorPrimary60});\n\n --grid-template-areas: \"ticker ticker ticker ticker\" \"quicklinks quicklinks quicklinks quicklinks\";\n\n @include mq($from: medium) {\n --grid-template-areas: \"ticker ticker ticker ticker ticker quicklinks quicklinks quicklinks\";\n }\n\n @include mq($from: large) {\n --grid-template-areas: \"ticker ticker ticker ticker ticker ticker ticker ticker quicklinks quicklinks quicklinks quicklinks\";\n }\n}\n\n.stzh-vbz-intro {\n @include grid;\n grid-template-areas: var(--grid-template-areas);\n\n &__ticker,\n &__quicklinks {\n display: flex;\n flex-direction: column;\n @include spaceCurve('padding-top', 'regular');\n @include spaceCurve('padding-bottom', 'regular');\n }\n\n &__ticker {\n grid-area: ticker;\n\n @include mq($from: ultra) {\n padding-left: 0;\n }\n }\n\n /\n Quick links.\n /\n &__quicklinks {\n grid-area: quicklinks;\n background-color: var(--stzh-color-primary60);\n padding-left: space('large');\n margin-left: $containerMargin -1;\n padding-right: space('large');\n margin-right: $containerMargin * -1;\n\n @include mq($from: small) {\n display: grid;\n gap: 0 space('large');\n grid-template-columns: repeat(2, minmax(0, 1fr));\n padding-left: $containerMarginSmall;\n margin-left: $containerMarginSmall * -1;\n padding-right: $containerMarginSmall;\n margin-right: $containerMarginSmall * -1;\n }\n\n @include mq($from: medium) {\n display: flex;\n gap: inherit;\n grid-template-columns: inherit;\n padding-left: $containerMarginMedium;\n margin-left: inherit;\n padding-right: $containerMarginMedium;\n margin-right: $containerMarginMedium * -1;\n }\n\n @include mq($from: large) {\n padding-right: $containerMarginLarge;\n margin-right: $containerMarginLarge * -1;\n }\n\n @include mq($from: ultra) {\n margin-right: calc(((100vw - #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px)) * -0.5));\n }\n }\n\n .stzh-vbz-intro-quicklinks__heading {\n --color: var(--stzh-color-white);\n margin-bottom: space('xsmall');\n }\n\n .stzh-vbz-intro-quicklink__link {\n --text-decoration-line: none;\n --color: var(--stzh-color-white);\n --hover-text-decoration-line: none;\n --hover-color: var(--stzh-color-white);\n\n transition: transform 150ms ease;\n padding-top: space('xsmall');\n padding-bottom: space('xsmall');\n\n &:hover, {\n transform: translateX(10px);\n\n @include mq($from: medium) {\n transform: translateX(20px);\n }\n }\n }\n}\n","import { Component, Element, h, Host, Prop, Watch } from \"@stencil/core\";\nimport { StzhMostsearchedItem, StzhVbzQuicklink } from \"../../index\";\nimport { StzhVbzIntroLocalizedText } from \"./stzh-vbz-intro.localization\";\n\n@Component({\n tag: \"stzh-vbz-intro\",\n styleUrl: \"stzh-vbz-intro.scss\",\n scoped: true,\n})\nexport class StzhVbzIntro {\n @Element() element: HTMLStzhVbzIntroElement;\n\n /** Translation strings. /\n @Prop() localization: StzhVbzIntroLocalizedText;\n\n /* Most searched items */\n @Prop() quicklinks: StzhVbzQuicklink[] \| string = [];\n private _quicklinks: StzhMostsearchedItem[] = [];\n\n @Watch(\"quicklinks\")\n quicklinksWatcher(newValue: StzhVbzQuicklink[] \| string) {\n if (!newValue) {\n this._quicklinks = [];\n } else if (typeof newValue === \"string\") {\n try {\n this._quicklinks = JSON.parse(newValue);\n } catch (e) {\n this._quicklinks = [];\n }\n } else {\n this._quicklinks = newValue;\n }\n }\n\n private init = () => {\n this.quicklinksWatcher(this.quicklinks);\n };\n\n async componentWillLoad() {\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"vbz-intro\");\n }\n }\n\n connectedCallback() {\n this.init();\n }\n\n render() {\n const classes = {\n \"stzh-vbz-intro\": true,\n };\n\n return (\n <Host>\n <div class={classes}>\n <div class=\"stzh-vbz-intro__ticker\">\n <slot name=\"ticker\"></slot>\n </div>\n {this._quicklinks.length > 0 && (\n <div class=\"stzh-vbz-intro__quicklinks\">\n <stzh-heading class=\"stzh-vbz-intro-quicklinks__heading\">\n {this.localization.quicklinksHeading}\n </stzh-heading>\n {this._quicklinks.map(item => (\n <div class=\"stzh-vbz-intro-quicklink\">\n <stzh-link class=\"stzh-vbz-intro-quicklink__link\" href={item.href} icon={\"arrow-right\"}>\n {item.label}\n </stzh-link>\n </div>\n ))}\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"stzh-vbz-intro.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,swMAAswM;;MCYjxM,YAAY;;;IAQf,gBAAW,GAA2B,EAAE,CAAC;IAiBzC,SAAI,GAAG;MACb,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;KACzC,CAAC;;sBApBgD,EAAE;;EAIpD,iBAAiB,CAAC,QAAqC;IACrD,IAAI,CAAC,QAAQ,EAAE;MACb,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC;KACvB;SAAM,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;MACvC,IAAI;QACF,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;OACzC;MAAC,OAAO,CAAC,EAAE;QACV,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC;OACvB;KACF;SAAM;MACL,IAAI,CAAC,WAAW,GAAG,QAAQ,CAAC;KAC7B;GACF;EAMD,MAAM,iBAAiB;IACrB,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;MACtB,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;KACpG;GACF;EAED,iBAAiB;IACf,IAAI,CAAC,IAAI,EAAE,CAAC;GACb;EAED,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,gBAAgB,EAAE,IAAI;KACvB,CAAC;IAEF,QACEA,QAACC,UAAI,QACHD,iBAAK,KAAK,EAAE,OAAO,IACjBA,iBAAK,KAAK,EAAC,wBAAwB,IACjCA,kBAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,EACL,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,KAC1BA,iBAAK,KAAK,EAAC,4BAA4B,IACrCA,0BAAc,KAAK,EAAC,oCAAoC,IACrD,IAAI,CAAC,YAAY,CAAC,iBAAiB,CACvB,EACd,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,IAAI,KACxBA,iBAAK,KAAK,EAAC,0BAA0B,IACnCA,uBAAW,KAAK,EAAC,gCAAgC,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,aAAa,IACnF,IAAI,CAAC,KAAK,CACD,CACR,CACP,CAAC,CACE,CACP,CACG,CACD,EACP;GACH;;;;;;;;;;","names":["h","Host"],"sources":["src/components/stzh-vbz-intro/stzh-vbz-intro.scss?tag=stzh-vbz-intro&encapsulation=scoped","src/components/stzh-vbz-intro/stzh-vbz-intro.tsx"],"sourcesContent":["/*\n @prop --background-color: Background color of top news section\n * @prop --background-color-mostsearched: Background color of top most searched section\n \n @prop --stzh-vbz-intro-subtitle-font: Global: Font of the topnews subtitle\n * @prop --stzh-vbz-intro-topnews-item-subtitle-color: Global: Color of the topnews subtitle\n * @prop --stzh-vbz-intro-topnews-item-subtitle-highlighted-color: Global: Color of the topnews subtitle (highlighted variant)\n /\n\n:host {\n --background-color-topnews: #{$topnewsBackgroundColor};\n --background-color-mostsearched: #{$mostsearchedBackgroundColor};\n --topnews-item-subtitle-font: var(--stzh-vbz-intro-topnews-subtitle-font, #{$topnewsSubtitleFont});\n --topnews-item-subtitle-color: var(--stzh-vbz-intro-topnews-item-subtitle-color, #{$colorPrimary70});\n --topnews-item-subtitle-highlighted-color: var(--stzh-vbz-intro-topnews-item-subtitle-highlighted-color, #{$colorPrimary60});\n\n --grid-template-areas: \"ticker ticker ticker ticker\" \"quicklinks quicklinks quicklinks quicklinks\";\n\n @include mq($from: medium) {\n --grid-template-areas: \"ticker ticker ticker ticker ticker quicklinks quicklinks quicklinks\";\n }\n\n @include mq($from: large) {\n --grid-template-areas: \"ticker ticker ticker ticker ticker ticker ticker ticker quicklinks quicklinks quicklinks quicklinks\";\n }\n}\n\n.stzh-vbz-intro {\n @include grid;\n grid-template-areas: var(--grid-template-areas);\n\n &__ticker,\n &__quicklinks {\n display: flex;\n flex-direction: column;\n @include spaceCurve('padding-top', 'regular');\n @include spaceCurve('padding-bottom', 'regular');\n }\n\n &__ticker {\n grid-area: ticker;\n\n @include mq($from: ultra) {\n padding-left: 0;\n }\n }\n\n /\n Quick links.\n /\n &__quicklinks {\n grid-area: quicklinks;\n background-color: var(--stzh-color-primary60);\n padding-left: space('large');\n margin-left: $containerMargin -1;\n padding-right: space('large');\n margin-right: $containerMargin * -1;\n\n @include mq($from: small) {\n display: grid;\n gap: 0 space('large');\n grid-template-columns: repeat(2, minmax(0, 1fr));\n padding-left: $containerMarginSmall;\n margin-left: $containerMarginSmall * -1;\n padding-right: $containerMarginSmall;\n margin-right: $containerMarginSmall * -1;\n }\n\n @include mq($from: medium) {\n display: flex;\n gap: inherit;\n grid-template-columns: inherit;\n padding-left: $containerMarginMedium;\n margin-left: inherit;\n padding-right: $containerMarginMedium;\n margin-right: $containerMarginMedium * -1;\n }\n\n @include mq($from: large) {\n padding-right: $containerMarginLarge;\n margin-right: $containerMarginLarge * -1;\n }\n\n @include mq($from: ultra) {\n margin-right: calc(((100vw - #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px)) * -0.5));\n }\n }\n\n .stzh-vbz-intro-quicklinks__heading {\n --color: var(--stzh-color-white);\n margin-bottom: space('xsmall');\n }\n\n .stzh-vbz-intro-quicklink__link {\n --text-decoration-line: none;\n --color: var(--stzh-color-white);\n --hover-text-decoration-line: none;\n --hover-color: var(--stzh-color-white);\n\n transition: transform 150ms ease;\n padding-top: space('xsmall');\n padding-bottom: space('xsmall');\n\n &:hover, {\n transform: translateX(10px);\n\n @include mq($from: medium) {\n transform: translateX(20px);\n }\n }\n }\n}\n","import { Component, Element, h, Host, Prop, Watch } from \"@stencil/core\";\nimport { StzhMostsearchedItem, StzhVbzQuicklink } from \"../../index\";\nimport { StzhVbzIntroLocalizedText } from \"./stzh-vbz-intro.localization\";\n\n/*\n @slot ticker - slot for ticker content \n /\n@Component({\n tag: \"stzh-vbz-intro\",\n styleUrl: \"stzh-vbz-intro.scss\",\n scoped: true,\n})\nexport class StzhVbzIntro {\n @Element() element: HTMLStzhVbzIntroElement;\n\n /* Translation strings. /\n @Prop() localization: StzhVbzIntroLocalizedText;\n\n /* Most searched items */\n @Prop() quicklinks: StzhVbzQuicklink[] \| string = [];\n private _quicklinks: StzhMostsearchedItem[] = [];\n\n @Watch(\"quicklinks\")\n quicklinksWatcher(newValue: StzhVbzQuicklink[] \| string) {\n if (!newValue) {\n this._quicklinks = [];\n } else if (typeof newValue === \"string\") {\n try {\n this._quicklinks = JSON.parse(newValue);\n } catch (e) {\n this._quicklinks = [];\n }\n } else {\n this._quicklinks = newValue;\n }\n }\n\n private init = () => {\n this.quicklinksWatcher(this.quicklinks);\n };\n\n async componentWillLoad() {\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"vbz-intro\");\n }\n }\n\n connectedCallback() {\n this.init();\n }\n\n render() {\n const classes = {\n \"stzh-vbz-intro\": true,\n };\n\n return (\n <Host>\n <div class={classes}>\n <div class=\"stzh-vbz-intro__ticker\">\n <slot name=\"ticker\"></slot>\n </div>\n {this._quicklinks.length > 0 && (\n <div class=\"stzh-vbz-intro__quicklinks\">\n <stzh-heading class=\"stzh-vbz-intro-quicklinks__heading\">\n {this.localization.quicklinksHeading}\n </stzh-heading>\n {this._quicklinks.map(item => (\n <div class=\"stzh-vbz-intro-quicklink\">\n <stzh-link class=\"stzh-vbz-intro-quicklink__link\" href={item.href} icon={\"arrow-right\"}>\n {item.label}\n </stzh-link>\n </div>\n ))}\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/stzh-youtube.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"stzh-youtube.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,6vCAA6vC;;~~MCqBvwC~~,WAAW;;;IA8Bd,yBAAoB,GAAG;MAC7B,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;KAC5B,CAAA;;eA3BqB,EAAE;kBAMC,SAAS;yBAOK,GAAG;uCAGK,KAAK;uBAGrB,KAAK;0BAIV,KAAK;;EAM/B,MAAM,iBAAiB;IACrB,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;MACtB,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;KAClG;GACF;EAED,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,cAAc,EAAE,IAAI;KACrB,CAAC;IAEF,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;IAEzC,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,IAAI,SAAS,GAAG,GAAG,GAAG,GAAG,CAAC;QAC1C,SAAS;QACT,aAAa;QACb,QAAQ;QACR,mBAAmB;QACnB,gBAAgB;QAChB,WAAW,kBAAkB,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,GAAG,IAAI,GAAG,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;QACvF,gBAAgB;QAChB,aAAa;SACZ,IAAI,CAAC,cAAc,GAAG,EAAE,GAAG,aAAa,CAAC,CAAC;IAE/C,QACEA,QAACC,UAAI,QACHD,iBAAK,KAAK,EAAE,OAAO,IACjBA,4BACEA,yBACE,GAAG,EAAE,GAAG,EACR,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC,YAAY,EAC5C,WAAW,EAAE,MAAM,EACnB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,kBAAkB,EAAE,IAAI,CAAC,YAAY,CAAC,YAAY,EAClD,iBAAiB,EAAE,MAAM,EACzB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,2BAA2B,EAAE,IAAI,CAAC,2BAA2B,EAC7D,iBAAiB,EAAE,IAAI,CAAC,oBAAoB,IAE5CA,kBAAM,IAAI,EAAC,cAAc,EAAC,IAAI,EAAC,cAAc,GAAQ,EACrDA,kBAAM,IAAI,EAAC,eAAe,EAAC,IAAI,EAAC,eAAe,GAAQ,EACvDA,iBAAK,IAAI,EAAC,iBAAiB,EAAC,SAAS,EAAE,IAAI,CAAC,YAAY,CAAC,WAAW,GAAQ,CAChE,CACH,CACT,CACD,EACP;GACH;;;;;;;","names":["h","Host"],"sources":["src/components/stzh-youtube/stzh-youtube.scss?tag=stzh-youtube&encapsulation=scoped","src/components/stzh-youtube/stzh-youtube.tsx"],"sourcesContent":[":host {\n @media print {\n display: none;\n }\n}\n\n.stzh-youtube {\n\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n State,\n} from \"@stencil/core\";\n\nimport { StzhYoutubeLocalizedText } from './stzh-youtube.localization';\n\n// import { hasSlot } from \"../../utils/utils\";\n\n/*\n \n /\n@Component({\n tag: \"stzh-youtube\",\n styleUrl: \"stzh-youtube.scss\",\n scoped: true\n})\nexport class StzhYoutube {\n /* Translation strings /\n @Prop() localization: StzhYoutubeLocalizedText;\n\n /* URL to youtube video /\n @Prop() url: string = \"\";\n\n /\n Cookie name (used for showing/hiding cookie wall)\n * Will be prefixed with `stzh-components-iframe-confirm-`.\n /\n @Prop() cookie: string = \"youtube\";\n\n /\n Number of days the cookie is valid for.\n * If omitted or set to null or 0, 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 /* Whether preview should be skipped, if user 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: HTMLStzhYoutubeElement;\n\n @State() previewSkipped = false;\n\n private handlePreviewSkipped = () => {\n this.previewSkipped = true;\n }\n\n async componentWillLoad() {\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"youtube\");\n }\n }\n\n render() {\n const classes = {\n \"stzh-youtube\": true,\n };\n\n const hasParams = this.url.includes(\"?\");\n\n const url = this.url + (hasParams ? \"&\" : \"?\")\n + \"html5=1\"\n + \"&showinfo=0\"\n + \"&rel=0\"\n + \"&modestbranding=0\"\n + \"&playsinline=1\"\n + `&origin=${encodeURIComponent(window.location.protocol + \"//\" + window.location.host)}`\n + \"&enablejsapi=1\"\n + \"&widgetid=1\"\n + (this.previewSkipped ? \"\" : \"&autoplay=1\");\n\n return (\n <Host>\n <div class={classes}>\n <stzh-ratio>\n <stzh-iframe\n src={url}\n previewLabel={this.localization.previewLabel}\n previewIcon={\"play\"}\n cookie={this.cookie}\n cookieConfirmLabel={this.localization.confirmLabel}\n cookieConfirmIcon={\"play\"}\n cookieExpires={this.cookieExpires}\n skipPreview={this.skipPreview}\n skipPreviewIfCookieAccepted={this.skipPreviewIfCookieAccepted}\n onStzhPreviewSkip={this.handlePreviewSkipped}\n >\n <slot name=\"preview-logo\" slot=\"preview-logo\"></slot>\n <slot name=\"preview-image\" slot=\"preview-image\"></slot>\n <div slot=\"cookiewall-text\" innerHTML={this.localization.confirmText}></div>\n </stzh-iframe>\n </stzh-ratio>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"stzh-youtube.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,6vCAA6vC;;MCsBvwC,WAAW;;;IA8Bd,yBAAoB,GAAG;MAC7B,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;KAC5B,CAAA;;eA3BqB,EAAE;kBAMC,SAAS;yBAOK,GAAG;uCAGK,KAAK;uBAGrB,KAAK;0BAIV,KAAK;;EAM/B,MAAM,iBAAiB;IACrB,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;MACtB,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;KAClG;GACF;EAED,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,cAAc,EAAE,IAAI;KACrB,CAAC;IAEF,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;IAEzC,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,IAAI,SAAS,GAAG,GAAG,GAAG,GAAG,CAAC;QAC1C,SAAS;QACT,aAAa;QACb,QAAQ;QACR,mBAAmB;QACnB,gBAAgB;QAChB,WAAW,kBAAkB,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,GAAG,IAAI,GAAG,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;QACvF,gBAAgB;QAChB,aAAa;SACZ,IAAI,CAAC,cAAc,GAAG,EAAE,GAAG,aAAa,CAAC,CAAC;IAE/C,QACEA,QAACC,UAAI,QACHD,iBAAK,KAAK,EAAE,OAAO,IACjBA,4BACEA,yBACE,GAAG,EAAE,GAAG,EACR,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC,YAAY,EAC5C,WAAW,EAAE,MAAM,EACnB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,kBAAkB,EAAE,IAAI,CAAC,YAAY,CAAC,YAAY,EAClD,iBAAiB,EAAE,MAAM,EACzB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,2BAA2B,EAAE,IAAI,CAAC,2BAA2B,EAC7D,iBAAiB,EAAE,IAAI,CAAC,oBAAoB,IAE5CA,kBAAM,IAAI,EAAC,cAAc,EAAC,IAAI,EAAC,cAAc,GAAQ,EACrDA,kBAAM,IAAI,EAAC,eAAe,EAAC,IAAI,EAAC,eAAe,GAAQ,EACvDA,iBAAK,IAAI,EAAC,iBAAiB,EAAC,SAAS,EAAE,IAAI,CAAC,YAAY,CAAC,WAAW,GAAQ,CAChE,CACH,CACT,CACD,EACP;GACH;;;;;;;","names":["h","Host"],"sources":["src/components/stzh-youtube/stzh-youtube.scss?tag=stzh-youtube&encapsulation=scoped","src/components/stzh-youtube/stzh-youtube.tsx"],"sourcesContent":[":host {\n @media print {\n display: none;\n }\n}\n\n.stzh-youtube {\n\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n State,\n} from \"@stencil/core\";\n\nimport { StzhYoutubeLocalizedText } from './stzh-youtube.localization';\n\n// import { hasSlot } from \"../../utils/utils\";\n\n/*\n @slot prewiev-logo - Slot for preview logo\n * @slot prewiev-image - Slot for preview image\n /\n@Component({\n tag: \"stzh-youtube\",\n styleUrl: \"stzh-youtube.scss\",\n scoped: true\n})\nexport class StzhYoutube {\n /* Translation strings /\n @Prop() localization: StzhYoutubeLocalizedText;\n\n /* URL to youtube video /\n @Prop() url: string = \"\";\n\n /\n Cookie name (used for showing/hiding cookie wall)\n * Will be prefixed with `stzh-components-iframe-confirm-`.\n /\n @Prop() cookie: string = \"youtube\";\n\n /\n Number of days the cookie is valid for.\n * If omitted or set to null or 0, 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 /* Whether preview should be skipped, if user 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: HTMLStzhYoutubeElement;\n\n @State() previewSkipped = false;\n\n private handlePreviewSkipped = () => {\n this.previewSkipped = true;\n }\n\n async componentWillLoad() {\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"youtube\");\n }\n }\n\n render() {\n const classes = {\n \"stzh-youtube\": true,\n };\n\n const hasParams = this.url.includes(\"?\");\n\n const url = this.url + (hasParams ? \"&\" : \"?\")\n + \"html5=1\"\n + \"&showinfo=0\"\n + \"&rel=0\"\n + \"&modestbranding=0\"\n + \"&playsinline=1\"\n + `&origin=${encodeURIComponent(window.location.protocol + \"//\" + window.location.host)}`\n + \"&enablejsapi=1\"\n + \"&widgetid=1\"\n + (this.previewSkipped ? \"\" : \"&autoplay=1\");\n\n return (\n <Host>\n <div class={classes}>\n <stzh-ratio>\n <stzh-iframe\n src={url}\n previewLabel={this.localization.previewLabel}\n previewIcon={\"play\"}\n cookie={this.cookie}\n cookieConfirmLabel={this.localization.confirmLabel}\n cookieConfirmIcon={\"play\"}\n cookieExpires={this.cookieExpires}\n skipPreview={this.skipPreview}\n skipPreviewIfCookieAccepted={this.skipPreviewIfCookieAccepted}\n onStzhPreviewSkip={this.handlePreviewSkipped}\n >\n <slot name=\"preview-logo\" slot=\"preview-logo\"></slot>\n <slot name=\"preview-image\" slot=\"preview-image\"></slot>\n <div slot=\"cookiewall-text\" innerHTML={this.localization.confirmText}></div>\n </stzh-iframe>\n </stzh-ratio>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -9,6 +9,7 @@ import "@vidstack/player/dist/prod/define/vds-slider-value-text.js";
 import "@vidstack/player/dist/prod/define/vds-time.js";
 import { hasSlot } from "../../utils/utils";
 /**
+ * @slot - Slot for any content
  * @slot transcript - Slot for transcript text
  */
 export class StzhAudio {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"stzh-audio.js","sourceRoot":"","sources":["../../../../src/components/stzh-audio/stzh-audio.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Event,\n EventEmitter,\n Method\n} from \"@stencil/core\";\n\nimport {\n StzhAudioPlayEvent,\n StzhAudioPlayingEvent,\n StzhAudioPauseEvent,\n StzhAudioReplayEvent,\n StzhAudioEndEvent,\n StzhAudioEndedEvent,\n StzhAudioErrorEvent\n} from \"../../index\"\n\nimport \"@vidstack/player/dist/prod/define/vds-media.js\";\nimport \"@vidstack/player/dist/prod/define/vds-audio.js\";\nimport \"@vidstack/player/dist/prod/define/vds-play-button.js\";\nimport \"@vidstack/player/dist/prod/define/vds-mute-button.js\";\nimport \"@vidstack/player/dist/prod/define/vds-time-slider.js\";\nimport \"@vidstack/player/dist/prod/define/vds-volume-slider.js\";\nimport \"@vidstack/player/dist/prod/define/vds-slider-value-text.js\";\nimport \"@vidstack/player/dist/prod/define/vds-time.js\";\n\nimport { hasSlot } from \"../../utils/utils\";\n\nimport { StzhAudioLocalizedText } from './stzh-audio.localization';\n\n/*\n @slot transcript - Slot for transcript text\n /\n@Component({\n tag: \"stzh-audio\",\n styleUrl: \"stzh-audio.scss\",\n scoped: true\n})\nexport class StzhAudio {\n /* Translation strings /\n @Prop() localization: StzhAudioLocalizedText;\n\n /* Path to audio file /\n @Prop() src: string = \"\";\n\n /* Preload strategy /\n @Prop() preload: \"none\" \| \"metadata\" \| \"auto\" = \"none\";\n\n /* Transcript text (alternative for slot) /\n @Prop() transcript: string = \"\";\n\n /* Whether transcript should be shown /\n @Prop({ mutable: true }) transcriptShown: boolean = false;\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the download link element.\n * Default value will be taken from translations.\n /\n @Prop() downloadAnalyticsId: string;\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the transcript button element.\n * Default value will be taken from translations.\n /\n @Prop() transcriptAnalyticsId: string;\n\n /* Fired when the paused property is changed from true to false, as a result of the play() method, or the autoplay attribute. /\n @Event() stzhPlay: EventEmitter<StzhAudioPlayEvent>;\n\n /* Fired when playback is ready to start after having been paused or delayed due to lack of data. /\n @Event() stzhPlaying: EventEmitter<StzhAudioPlayingEvent>;\n\n /* Fired when a request to pause an activity is handled and the activity has entered its paused state, most commonly after the media has been paused through a call to the pause() method. /\n @Event() stzhPause: EventEmitter<StzhAudioPauseEvent>;\n\n /* Fired when media playback starts again after being in an ended state. This is fired when the loop property is true and media loops, whereas the vds-play event is not. /\n @Event() stzhReplay: EventEmitter<StzhAudioReplayEvent>;\n\n /* Fired each time media playback has reached the end. This is fired even if the loop property is true, which is generally when you'd reach for this event over the MediaEndedEvent if you want to be notified of media looping. /\n @Event() stzhEnd: EventEmitter<StzhAudioEndEvent>;\n\n /* Fired when playback or streaming has stopped because the end of the media was reached or because no further data is available. This is not fired if playback will start from the beginning again due to the loop property being true (see MediaReplayEvent and MediaEndEvent). /\n @Event() stzhEnded: EventEmitter<StzhAudioEndedEvent>;\n\n /* Fired when media loading or playback has encountered any issues (for example, a network connectivity problem). The event detail contains a potential message containing more information about the error (empty string if nothing available), and a code that identifies the general type of error that occurred. */\n @Event() stzhError: EventEmitter<StzhAudioErrorEvent>;\n\n @Element() element: HTMLStzhAudioElement;\n\n @Method()\n async play() {\n this.vsdAudioElement.play();\n }\n\n @Method()\n async pause() {\n this.vsdAudioElement.pause();\n }\n\n private vsdAudioElement: any;\n\n async componentWillLoad() {\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"audio\");\n }\n }\n\n render() {\n const hasTranscript = !!this.transcript \|\| hasSlot(this.element, \"transcript\");\n const classes = {\n \"stzh-audio\": true\n };\n\n return (\n <Host>\n <vds-media class={classes}>\n <vds-audio\n class=\"stzh-audio__audio\"\n ref={(el) => (this.vsdAudioElement = el as HTMLElement)}\n // events from: https://www.vidstack.io/docs/player/components/providers/audio/api.html#events--vds-progress\n onVds-play={() => {this.stzhPlay.emit({ component: \"stzh-audio\" })}}\n onVds-playing={() => {this.stzhPlaying.emit({ component: \"stzh-audio\" })}}\n onVds-end={() => {this.stzhEnd.emit({ component: \"stzh-audio\" })}}\n onVds-ended={() => {this.stzhEnded.emit({ component: \"stzh-audio\" })}}\n onVds-replay={() => {this.stzhReplay.emit({ component: \"stzh-audio\" })}}\n onVds-error={(e: ErrorEvent) => {this.stzhError.emit({ component: \"stzh-audio\", originalEvent: e })}}\n >\n <audio preload={this.preload} src={this.src}>\n <slot></slot>\n </audio>\n </vds-audio>\n\n <div class=\"stzh-audio__controls\">\n <div class=\"stzh-audio__loader-overlay\">\n <stzh-loader\n class=\"stzh-audio__loader\"\n label={this.localization.loading}\n hide-label\n ></stzh-loader>\n </div>\n\n <div class=\"stzh-audio__controls-top\">\n <vds-time-slider class=\"stzh-audio__slider is-time\">\n <div class=\"stzh-audio__slider-track\"></div>\n <div class=\"stzh-audio__slider-track is-fill\"></div>\n <div class=\"stzh-audio__slider-thumb-container\">\n <div class=\"stzh-audio__slider-thumb\"></div>\n </div>\n <div class=\"stzh-audio__media-preview-container\">\n <vds-slider-value-text class=\"stzh-audio__slider-text\" type=\"pointer\" format=\"time\"></vds-slider-value-text>\n </div>\n </vds-time-slider>\n </div>\n\n <div class=\"stzh-audio__controls-bottom\">\n <div class=\"stzh-audio__controls-bottom-left\">\n <stzh-tooltip>\n <vds-play-button class=\"stzh-audio__button is-play\">\n <stzh-icon class=\"stzh-audio__played\" name=\"play\"></stzh-icon>\n <stzh-icon class=\"stzh-audio__paused\" name=\"pause\"></stzh-icon>\n </vds-play-button>\n <span slot=\"content\">\n <span class=\"stzh-audio__played\">{this.localization.play}</span>\n <span class=\"stzh-audio__paused\">{this.localization.pause}</span>\n </span>\n </stzh-tooltip>\n\n <div class=\"stzh-audio__time\">\n <vds-time type=\"current\"></vds-time>\n <span class=\"stzh-audio__time-separator\">/</span>\n <vds-time type=\"duration\"></vds-time>\n </div>\n\n <stzh-tooltip>\n <vds-mute-button class=\"stzh-audio__button is-mute\">\n <stzh-icon class=\"stzh-audio__muted\" name=\"volume-medium\"></stzh-icon>\n <stzh-icon class=\"stzh-audio__unmuted\" name=\"silent-mode\"></stzh-icon>\n </vds-mute-button>\n <span slot=\"content\">\n <span class=\"stzh-audio__muted\">{this.localization.mute}</span>\n <span class=\"stzh-audio__unmuted\">{this.localization.unmute}</span>\n </span>\n </stzh-tooltip>\n\n <vds-volume-slider class=\"stzh-audio__slider is-volume\">\n <div class=\"stzh-audio__slider-track\"></div>\n <div class=\"stzh-audio__slider-track is-fill\"></div>\n <div class=\"stzh-audio__slider-thumb-container is-shown\">\n <div class=\"stzh-audio__slider-thumb\"></div>\n </div>\n <div class=\"stzh-audio__media-preview-container\">\n <vds-slider-value-text class=\"stzh-audio__slider-text\" type=\"pointer\" format=\"percent\"></vds-slider-value-text>\n </div>\n </vds-volume-slider>\n </div>\n\n <div class=\"stzh-audio__controls-bottom-right\">\n {hasTranscript &&\n <stzh-tooltip\n content={this.transcriptShown ? this.localization.hideTranscript : this.localization.showTranscript}\n >\n <button\n class={{\n \"stzh-audio__button is-transcript\": true,\n \"is-active\": this.transcriptShown\n }}\n onClick={() => this.transcriptShown = !this.transcriptShown}\n s-object-id={this.transcriptAnalyticsId \|\| (this.transcriptShown ? this.localization.hideTranscript : this.localization.showTranscript)}\n >\n <stzh-icon name=\"transcript\"></stzh-icon>\n </button>\n </stzh-tooltip>\n }\n\n <stzh-tooltip content={this.localization.download}>\n <a\n class=\"stzh-audio__button is-download\"\n href={this.src}\n download=\"\"\n s-object-id={this.downloadAnalyticsId \|\| this.localization.download}\n >\n <stzh-icon name=\"download\"></stzh-icon>\n </a>\n </stzh-tooltip>\n </div>\n </div>\n </div>\n\n <div class=\"stzh-audio__transcript\" hidden={!this.transcriptShown}>\n {this.transcript ? this.transcript : <slot name=\"transcript\"></slot>}\n </div>\n </vds-media>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"stzh-audio.js","sourceRoot":"","sources":["../../../../src/components/stzh-audio/stzh-audio.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Event,\n EventEmitter,\n Method\n} from \"@stencil/core\";\n\nimport {\n StzhAudioPlayEvent,\n StzhAudioPlayingEvent,\n StzhAudioPauseEvent,\n StzhAudioReplayEvent,\n StzhAudioEndEvent,\n StzhAudioEndedEvent,\n StzhAudioErrorEvent\n} from \"../../index\"\n\nimport \"@vidstack/player/dist/prod/define/vds-media.js\";\nimport \"@vidstack/player/dist/prod/define/vds-audio.js\";\nimport \"@vidstack/player/dist/prod/define/vds-play-button.js\";\nimport \"@vidstack/player/dist/prod/define/vds-mute-button.js\";\nimport \"@vidstack/player/dist/prod/define/vds-time-slider.js\";\nimport \"@vidstack/player/dist/prod/define/vds-volume-slider.js\";\nimport \"@vidstack/player/dist/prod/define/vds-slider-value-text.js\";\nimport \"@vidstack/player/dist/prod/define/vds-time.js\";\n\nimport { hasSlot } from \"../../utils/utils\";\n\nimport { StzhAudioLocalizedText } from './stzh-audio.localization';\n\n/*\n @slot - Slot for any content\n * @slot transcript - Slot for transcript text\n /\n@Component({\n tag: \"stzh-audio\",\n styleUrl: \"stzh-audio.scss\",\n scoped: true\n})\nexport class StzhAudio {\n /* Translation strings /\n @Prop() localization: StzhAudioLocalizedText;\n\n /* Path to audio file /\n @Prop() src: string = \"\";\n\n /* Preload strategy /\n @Prop() preload: \"none\" \| \"metadata\" \| \"auto\" = \"none\";\n\n /* Transcript text (alternative for slot) /\n @Prop() transcript: string = \"\";\n\n /* Whether transcript should be shown /\n @Prop({ mutable: true }) transcriptShown: boolean = false;\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the download link element.\n * Default value will be taken from translations.\n /\n @Prop() downloadAnalyticsId: string;\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the transcript button element.\n * Default value will be taken from translations.\n /\n @Prop() transcriptAnalyticsId: string;\n\n /* Fired when the paused property is changed from true to false, as a result of the play() method, or the autoplay attribute. /\n @Event() stzhPlay: EventEmitter<StzhAudioPlayEvent>;\n\n /* Fired when playback is ready to start after having been paused or delayed due to lack of data. /\n @Event() stzhPlaying: EventEmitter<StzhAudioPlayingEvent>;\n\n /* Fired when a request to pause an activity is handled and the activity has entered its paused state, most commonly after the media has been paused through a call to the pause() method. /\n @Event() stzhPause: EventEmitter<StzhAudioPauseEvent>;\n\n /* Fired when media playback starts again after being in an ended state. This is fired when the loop property is true and media loops, whereas the vds-play event is not. /\n @Event() stzhReplay: EventEmitter<StzhAudioReplayEvent>;\n\n /* Fired each time media playback has reached the end. This is fired even if the loop property is true, which is generally when you'd reach for this event over the MediaEndedEvent if you want to be notified of media looping. /\n @Event() stzhEnd: EventEmitter<StzhAudioEndEvent>;\n\n /* Fired when playback or streaming has stopped because the end of the media was reached or because no further data is available. This is not fired if playback will start from the beginning again due to the loop property being true (see MediaReplayEvent and MediaEndEvent). /\n @Event() stzhEnded: EventEmitter<StzhAudioEndedEvent>;\n\n /* Fired when media loading or playback has encountered any issues (for example, a network connectivity problem). The event detail contains a potential message containing more information about the error (empty string if nothing available), and a code that identifies the general type of error that occurred. */\n @Event() stzhError: EventEmitter<StzhAudioErrorEvent>;\n\n @Element() element: HTMLStzhAudioElement;\n\n @Method()\n async play() {\n this.vsdAudioElement.play();\n }\n\n @Method()\n async pause() {\n this.vsdAudioElement.pause();\n }\n\n private vsdAudioElement: any;\n\n async componentWillLoad() {\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"audio\");\n }\n }\n\n render() {\n const hasTranscript = !!this.transcript \|\| hasSlot(this.element, \"transcript\");\n const classes = {\n \"stzh-audio\": true\n };\n\n return (\n <Host>\n <vds-media class={classes}>\n <vds-audio\n class=\"stzh-audio__audio\"\n ref={(el) => (this.vsdAudioElement = el as HTMLElement)}\n // events from: https://www.vidstack.io/docs/player/components/providers/audio/api.html#events--vds-progress\n onVds-play={() => {this.stzhPlay.emit({ component: \"stzh-audio\" })}}\n onVds-playing={() => {this.stzhPlaying.emit({ component: \"stzh-audio\" })}}\n onVds-end={() => {this.stzhEnd.emit({ component: \"stzh-audio\" })}}\n onVds-ended={() => {this.stzhEnded.emit({ component: \"stzh-audio\" })}}\n onVds-replay={() => {this.stzhReplay.emit({ component: \"stzh-audio\" })}}\n onVds-error={(e: ErrorEvent) => {this.stzhError.emit({ component: \"stzh-audio\", originalEvent: e })}}\n >\n <audio preload={this.preload} src={this.src}>\n <slot></slot>\n </audio>\n </vds-audio>\n\n <div class=\"stzh-audio__controls\">\n <div class=\"stzh-audio__loader-overlay\">\n <stzh-loader\n class=\"stzh-audio__loader\"\n label={this.localization.loading}\n hide-label\n ></stzh-loader>\n </div>\n\n <div class=\"stzh-audio__controls-top\">\n <vds-time-slider class=\"stzh-audio__slider is-time\">\n <div class=\"stzh-audio__slider-track\"></div>\n <div class=\"stzh-audio__slider-track is-fill\"></div>\n <div class=\"stzh-audio__slider-thumb-container\">\n <div class=\"stzh-audio__slider-thumb\"></div>\n </div>\n <div class=\"stzh-audio__media-preview-container\">\n <vds-slider-value-text class=\"stzh-audio__slider-text\" type=\"pointer\" format=\"time\"></vds-slider-value-text>\n </div>\n </vds-time-slider>\n </div>\n\n <div class=\"stzh-audio__controls-bottom\">\n <div class=\"stzh-audio__controls-bottom-left\">\n <stzh-tooltip>\n <vds-play-button class=\"stzh-audio__button is-play\">\n <stzh-icon class=\"stzh-audio__played\" name=\"play\"></stzh-icon>\n <stzh-icon class=\"stzh-audio__paused\" name=\"pause\"></stzh-icon>\n </vds-play-button>\n <span slot=\"content\">\n <span class=\"stzh-audio__played\">{this.localization.play}</span>\n <span class=\"stzh-audio__paused\">{this.localization.pause}</span>\n </span>\n </stzh-tooltip>\n\n <div class=\"stzh-audio__time\">\n <vds-time type=\"current\"></vds-time>\n <span class=\"stzh-audio__time-separator\">/</span>\n <vds-time type=\"duration\"></vds-time>\n </div>\n\n <stzh-tooltip>\n <vds-mute-button class=\"stzh-audio__button is-mute\">\n <stzh-icon class=\"stzh-audio__muted\" name=\"volume-medium\"></stzh-icon>\n <stzh-icon class=\"stzh-audio__unmuted\" name=\"silent-mode\"></stzh-icon>\n </vds-mute-button>\n <span slot=\"content\">\n <span class=\"stzh-audio__muted\">{this.localization.mute}</span>\n <span class=\"stzh-audio__unmuted\">{this.localization.unmute}</span>\n </span>\n </stzh-tooltip>\n\n <vds-volume-slider class=\"stzh-audio__slider is-volume\">\n <div class=\"stzh-audio__slider-track\"></div>\n <div class=\"stzh-audio__slider-track is-fill\"></div>\n <div class=\"stzh-audio__slider-thumb-container is-shown\">\n <div class=\"stzh-audio__slider-thumb\"></div>\n </div>\n <div class=\"stzh-audio__media-preview-container\">\n <vds-slider-value-text class=\"stzh-audio__slider-text\" type=\"pointer\" format=\"percent\"></vds-slider-value-text>\n </div>\n </vds-volume-slider>\n </div>\n\n <div class=\"stzh-audio__controls-bottom-right\">\n {hasTranscript &&\n <stzh-tooltip\n content={this.transcriptShown ? this.localization.hideTranscript : this.localization.showTranscript}\n >\n <button\n class={{\n \"stzh-audio__button is-transcript\": true,\n \"is-active\": this.transcriptShown\n }}\n onClick={() => this.transcriptShown = !this.transcriptShown}\n s-object-id={this.transcriptAnalyticsId \|\| (this.transcriptShown ? this.localization.hideTranscript : this.localization.showTranscript)}\n >\n <stzh-icon name=\"transcript\"></stzh-icon>\n </button>\n </stzh-tooltip>\n }\n\n <stzh-tooltip content={this.localization.download}>\n <a\n class=\"stzh-audio__button is-download\"\n href={this.src}\n download=\"\"\n s-object-id={this.downloadAnalyticsId \|\| this.localization.download}\n >\n <stzh-icon name=\"download\"></stzh-icon>\n </a>\n </stzh-tooltip>\n </div>\n </div>\n </div>\n\n <div class=\"stzh-audio__transcript\" hidden={!this.transcriptShown}>\n {this.transcript ? this.transcript : <slot name=\"transcript\"></slot>}\n </div>\n </vds-media>\n </Host>\n );\n }\n}\n"]}

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

@@ -12,7 +12,7 @@ export class StzhBadge {
       "stzh-badge": true,
       [`stzh-badge--type-${this.type}`]: !!this.type
     };
-    return (h(Host, { filled: !!this.label }, h("div", { class: classes }, this.label)));
+    return (h(Host, { filled: !!this.label }, h("div", { class: classes }, this.label || h("slot", null))));
   }
   static get is() { return "stzh-badge"; }
   static get encapsulation() { return "scoped"; }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"stzh-badge.js","sourceRoot":"","sources":["../../../../src/components/stzh-badge/stzh-badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,CAAC,EACD,IAAI,GACL,MAAM,eAAe,CAAC;AAIvB;;GAEG;AAMH,MAAM,OAAO,SAAS;;iBAEI,EAAE;gBAGqB,SAAS;;EAExD,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,YAAY,EAAE,IAAI;MAClB,CAAC,oBAAoB,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI;KAC/C,CAAC;IAEF,OAAO,CACL,EAAC,IAAI,IAAC,MAAM,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK;MACxB,WAAK,KAAK,EAAE,OAAO,IAChB,IAAI,CAAC,KAAK,~~CACP~~,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n Component,\n Host,\n h,\n Prop,\n} from \"@stencil/core\";\n\nimport { StzhBadgeType } from \"../../index\";\n\n/*\n @slot - Slot badge content\n /\n@Component({\n tag: \"stzh-badge\",\n styleUrl: \"stzh-badge.scss\",\n scoped: true\n})\nexport class StzhBadge {\n /* Text content of the badge /\n @Prop() label: string = \"\";\n\n /* Type */\n @Prop({ reflect: true }) type: StzhBadgeType = \"default\";\n\n render() {\n const classes = {\n \"stzh-badge\": true,\n [`stzh-badge--type-${this.type}`]: !!this.type\n };\n\n return (\n <Host filled={!!this.label}>\n <div class={classes}>\n {this.label}\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"stzh-badge.js","sourceRoot":"","sources":["../../../../src/components/stzh-badge/stzh-badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,CAAC,EACD,IAAI,GACL,MAAM,eAAe,CAAC;AAIvB;;GAEG;AAMH,MAAM,OAAO,SAAS;;iBAEI,EAAE;gBAGqB,SAAS;;EAExD,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,YAAY,EAAE,IAAI;MAClB,CAAC,oBAAoB,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI;KAC/C,CAAC;IAEF,OAAO,CACL,EAAC,IAAI,IAAC,MAAM,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK;MACxB,WAAK,KAAK,EAAE,OAAO,IAChB,IAAI,CAAC,KAAK,IAAI,eAAa,CACxB,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n Component,\n Host,\n h,\n Prop,\n} from \"@stencil/core\";\n\nimport { StzhBadgeType } from \"../../index\";\n\n/*\n @slot - Slot badge content\n /\n@Component({\n tag: \"stzh-badge\",\n styleUrl: \"stzh-badge.scss\",\n scoped: true\n})\nexport class StzhBadge {\n /* Text content of the badge /\n @Prop() label: string = \"\";\n\n /* Type */\n @Prop({ reflect: true }) type: StzhBadgeType = \"default\";\n\n render() {\n const classes = {\n \"stzh-badge\": true,\n [`stzh-badge--type-${this.type}`]: !!this.type\n };\n\n return (\n <Host filled={!!this.label}>\n <div class={classes}>\n {this.label \|\| <slot></slot>}\n </div>\n </Host>\n );\n }\n}\n"]}

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

@@ -2,7 +2,7 @@ import { Host, h, Fragment, } from "@stencil/core";
 const ITEM_EXPAND_INDEX = 1;
 const SHRINK_DIRECTION = 1; // 1 = removes item to the right / -1 = removes item to the left
 /**
- * @slot - Slot for e.g. image or video
+ *
  */
 export class StzhBreadcrumb {
   constructor() {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"stzh-breadcrumb.js","sourceRoot":"","sources":["../../../../src/components/stzh-breadcrumb/stzh-breadcrumb.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,CAAC,EACD,OAAO,EACP,IAAI,EACJ,KAAK,EACL,KAAK,EACL,QAAQ,EAAE,KAAK,GAChB,MAAM,eAAe,CAAC;AAMvB,MAAM,iBAAiB,GAAG,CAAC,CAAC;AAC5B,MAAM,gBAAgB,GAAG,CAAC,CAAC,CAAC,gEAAgE;AAE5F;;GAEG;AAMH,MAAM,OAAO,cAAc;;IAyDjB,oBAAe,GAAG,GAAG,EAAE;MAC7B,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;QACvC,OAAO;OACR;MAED,MAAM,cAAc,GAAG,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC;MAEnD,MAAM,gCAAgC,GAAG,IAAI,CAAC,SAAS;SACpD,MAAM,CAAC,CAAC,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE;QAChC,IAAI,KAAK,KAAK,iBAAiB,EAAE;UAC/B,OAAO,QAAQ,CAAC;SACjB;aAAM;UACL,OAAO,QAAQ,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC;SAC3B;MACH,CAAC,EAAE,CAAC,CAAC,CAAC;MAER,IAAI,gCAAgC,IAAI,cAAc,IAAI,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;QACrG,MAAM,SAAS,GAAG,EAAE,CAAC;QAErB,MAAM,eAAe,GAAG,IAAI,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC;QAC7D,IAAI,kBAAkB,GAAG,iBAAiB,GAAG,gBAAgB,CAAC;QAC9D,IAAI,qCAAqC,GAAG,gCAAgC,CAAC;QAE7E,GAAG;UACD,MAAM,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,kBAAkB,CAAC,CAAC;UACnD,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;UAC3B,qCAAqC,GAAG,qCAAqC,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC;UAC3F,kBAAkB,GAAG,kBAAkB,GAAG,gBAAgB,CAAC;SAC5D,QACC,qCAAqC,GAAG,eAAe,IAAI,cAAc;aACtE,kBAAkB,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,EAC7C;QAEF,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;QAE3B,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,EAAE;UACvC,IAAI,KAAK,KAAK,iBAAiB,EAAE;YAC/B,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;WACpC;eAAM;YACL,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,EAAE,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC;WAC9D;QACH,CAAC,CAAC,CAAC;OACJ;WAAM;QACL,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;QAE5B,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,EAAE;UACvC,IAAI,KAAK,KAAK,iBAAiB,EAAE;YAC/B,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;WACjC;eAAM;YACL,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;WACpC;QACH,CAAC,CAAC,CAAC;OACJ;IACH,CAAC,CAAA;IAEO,gBAAW,GAAG,GAAG,EAAE;MACzB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;QACpB,OAAO;OACR;MAED,4IAA4I;MAC5I,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,wBAAwB,CAAC,CAAkB,CAAC;MACtG,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;MAEpB,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;QACrB,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAC/C,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC;MACrC,CAAC,CAAC,CAAA;MAEF,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC,CAAA;IAEO,0BAAqB,GAAG,GAAG,EAAE;MACnC,IAAI,IAAI,CAAC,cAAc,EAAE;QACvB,MAAM,CAAC,oBAAoB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;OAClD;MAED,IAAI,CAAC,cAAc,GAAG,qBAAqB,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;IACpE,CAAC,CAAA;IAEO,qBAAgB,GAAG,GAAG,EAAE;MAC9B,IAAI,IAAI,CAAC,mBAAmB,EAAE;QAC5B,MAAM,CAAC,oBAAoB,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;OACvD;MAED,IAAI,CAAC,mBAAmB,GAAG,qBAAqB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IACrE,CAAC,CAAA;IAEO,sBAAiB,GAAG,GAAG,EAAE;MAC/B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;MAErB,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,6BAA6B,CAAC,CAAkB,CAAC;MAC/G,SAAS,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;IACvB,CAAC,CAAA;;mBAjJwD,SAAS;iBAGnB,EAAE;oBAIW,KAAK;0BA2B9B,KAAK;;EAtBxC,YAAY,CAAC,QAAuC;IAClD,IAAI,CAAC,QAAQ,EAAE;MACb,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC;KAClB;SAAM,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;MACvC,IAAI;QACF,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;OACpC;MAAC,OAAO,CAAC,EAAE;QACV,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC;OAClB;KACF;SAAM;MACL,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC;KACxB;EACH,CAAC;EAGD,eAAe;IACb,IAAI,CAAC,eAAe,EAAE,CAAC;EACzB,CAAC;EAeO,WAAW,CAAC,IAAwB,EAAE,aAAyB;IACrE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;MACtB,SAAS,EAAE,iBAAiB;MAC5B,IAAI;MACJ,aAAa;KACd,CAAC,CAAA;EACJ,CAAC;EAiGD,KAAK,CAAC,iBAAiB;IACrB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAE9B,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;MACtB,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC;KACrG;EACH,CAAC;EAED,kBAAkB;IAChB,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IAE7C,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,wBAAwB,CAAC,CAAC;IACzE,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;MACrB,IAAI,CAAC,mBAAmB,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IACzC,CAAC,CAAC,CAAC;EACL,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC;IACrE,IAAI,CAAC,mBAAmB,GAAG,IAAI,cAAc,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;EACvE,CAAC;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,cAAc,EAAE;MACvB,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE,CAAC;KAClC;IAED,IAAI,IAAI,CAAC,mBAAmB,EAAE;MAC5B,IAAI,CAAC,mBAAmB,CAAC,UAAU,EAAE,CAAC;KACvC;EACH,CAAC;EAED,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,iBAAiB,EAAE,IAAI;MACvB,8BAA8B,EAAE,IAAI,CAAC,QAAQ;MAC7C,mCAAmC,EAAE,IAAI,CAAC,cAAc;MACxD,CAAC,oBAAoB,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO;MACpD,SAAS,EAAE,IAAI,CAAC,mDAAmD;KACpE,CAAC;IAEF,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAE,OAAO;QACjB,WACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,EAAiB,CAAC,EAClD,KAAK,EAAC,sBAAsB,EAC5B,IAAI,EAAC,YAAY,gBACL,IAAI,CAAC,YAAY,CAAC,KAAK;UAEnC,UAAI,KAAK,EAAC,uBAAuB,IAC9B,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAC/B,EAAC,QAAQ;YACP,UACE,KAAK,EAAE;gBACL,uBAAuB,EAAE,IAAI;gBAC7B,SAAS,EAAE,KAAK,GAAG,CAAC,KAAK,IAAI,CAAC,MAAM,CAAC,MAAM;gBAC3C,UAAU,EAAE,KAAK,KAAK,CAAC;eACxB;cAED,yBACgB,KAAK,GAAG,CAAC,KAAK,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,EAC9D,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC,CAAC,EACzC,KAAK,EAAE;kBACL,4BAA4B,EAAE,IAAI;kBAClC,SAAS,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI;iBACvB;gBAEA,KAAK,KAAK,CAAC,CAAC,CAAC;kBACZ,iBACE,KAAK,EAAC,4BAA4B,EAClC,IAAI,EAAC,MAAM,GACA;kBACf,CAAC;oBACC,iBACE,KAAK,EAAC,yCAAyC,EAC/C,IAAI,EAAC,aAAa,GACP;gBAEf,YAAM,KAAK,EAAC,6BAA6B,IACtC,IAAI,CAAC,KAAK,CACN,CACL,CACD;YACJ,KAAK,KAAK,CAAC;cACV,UAAI,KAAK,EAAC,iCAAiC;gBACzC,cAAQ,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB;kBACxE,iBACE,KAAK,EAAC,yCAAyC,EAC/C,IAAI,EAAC,aAAa,GACP;kBACb,YAAM,KAAK,EAAC,6BAA6B;oBACvC,2BAAkB,MAAM,IACrB,IAAI,CAAC,YAAY,CAAC,WAAW,CACzB;oBACP,YAAM,KAAK,EAAC,oCAAoC,IAC7C,IAAI,CAAC,YAAY,CAAC,iBAAiB,CAC/B,CACF,CACA,CACN,CAEE,CACZ,CACE,CACD,CACF,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Watch,\n State,\n Fragment, Event, EventEmitter,\n} from \"@stencil/core\";\n\nimport { StzhBreadcrumbItem, StzhBreadcrumbItemClickEvent } from \"../../index\";\n\nimport { StzhBreadcrumbLocalizedText } from \"./stzh-breadcrumb.localization\";\n\nconst ITEM_EXPAND_INDEX = 1;\nconst SHRINK_DIRECTION = 1; // 1 = removes item to the right / -1 = removes item to the left\n\n/*\n @slot - Slot for e.g. image or video\n /\n@Component({\n tag: \"stzh-breadcrumb\",\n styleUrl: \"stzh-breadcrumb.scss\",\n scoped: true\n})\nexport class StzhBreadcrumb {\n /* Translation strings /\n @Prop() localization: StzhBreadcrumbLocalizedText;\n\n /* Variant /\n @Prop({ reflect: true }) variant: \"default\" \| \"teaser\" = \"default\";\n\n /* Breadcrumb items /\n @Prop() items: StzhBreadcrumbItem[] \| string = [];\n private _items: StzhBreadcrumbItem[];\n\n /* Whether all items are shown (true) or everything should fit into one line and not wrap (false, default) /\n @Prop({ mutable: true, reflect: true }) expanded: boolean = false;\n\n @Element() element: HTMLStzhBreadcrumbElement;\n\n @Watch(\"items\")\n itemsWatcher(newValue: StzhBreadcrumbItem[] \| string) {\n if (!newValue) {\n this._items = [];\n } else if (typeof newValue === \"string\") {\n try {\n this._items = JSON.parse(newValue);\n } catch (e) {\n this._items = [];\n }\n } else {\n this._items = newValue;\n }\n }\n\n @Watch(\"expanded\")\n expandedWatcher() {\n this.updateContainer();\n }\n\n /* Item click event */\n @Event() stzhItemClick: EventEmitter<StzhBreadcrumbItemClickEvent>;\n\n @State() hasHiddenItems: boolean = false;\n\n private navElement: HTMLElement;\n private itemSizes: [HTMLElement, number][];\n\n private debounceResize: number;\n private resizeObserver: ResizeObserver;\n private debounceResizeItems: number;\n private resizeItemsObserver: ResizeObserver;\n\n private handleClick(item: StzhBreadcrumbItem, originalEvent: MouseEvent) {\n this.stzhItemClick.emit({\n component: \"stzh-breadcrumb\",\n item,\n originalEvent\n })\n }\n\n private updateContainer = () => {\n if (!this.navElement \|\| !this.itemSizes) {\n return;\n }\n\n const containerWidth = this.navElement.clientWidth;\n\n const totalItemsWidthWithoutExpandItem = this.itemSizes\n .reduce((previous, item, index) => {\n if (index === ITEM_EXPAND_INDEX) {\n return previous;\n } else {\n return previous + item[1];\n }\n }, 0);\n\n if (totalItemsWidthWithoutExpandItem >= containerWidth && this.itemSizes.length > 2 && !this.expanded) {\n const hideItems = [];\n\n const expandItemWidth = this.itemSizes[ITEM_EXPAND_INDEX][1];\n let currentIndexToHide = ITEM_EXPAND_INDEX + SHRINK_DIRECTION;\n let totalItemsShownWidthWithoutExpandItem = totalItemsWidthWithoutExpandItem;\n\n do {\n const current = this.itemSizes[currentIndexToHide];\n hideItems.push(current[0]);\n totalItemsShownWidthWithoutExpandItem = totalItemsShownWidthWithoutExpandItem - current[1];\n currentIndexToHide = currentIndexToHide + SHRINK_DIRECTION;\n } while (\n totalItemsShownWidthWithoutExpandItem + expandItemWidth >= containerWidth\n && currentIndexToHide < this.itemSizes.length\n );\n\n this.hasHiddenItems = true;\n\n this.itemSizes.forEach(([item], index) => {\n if (index === ITEM_EXPAND_INDEX) {\n item.classList.remove('is-hidden');\n } else {\n item.classList.toggle('is-hidden', hideItems.includes(item));\n }\n });\n } else {\n this.hasHiddenItems = false;\n\n this.itemSizes.forEach(([item], index) => {\n if (index === ITEM_EXPAND_INDEX) {\n item.classList.add('is-hidden');\n } else {\n item.classList.remove('is-hidden');\n }\n });\n }\n }\n\n private updateItems = () => {\n if (!this.navElement) {\n return;\n }\n\n // TODO: current updates all item sizes, but could be optimized only to update really resized items with using passed ResizeObserver entries\n const items = Array.from(this.navElement.querySelectorAll('.stzh-breadcrumb__item')) as HTMLElement[];\n this.itemSizes = [];\n\n items.forEach((item) => {\n const { width } = item.getBoundingClientRect();\n this.itemSizes.push([item, width]);\n })\n\n this.updateContainer();\n }\n\n private handleContainerResize = () => {\n if (this.debounceResize) {\n window.cancelAnimationFrame(this.debounceResize);\n }\n\n this.debounceResize = requestAnimationFrame(this.updateContainer);\n }\n\n private handleItemResize = () => {\n if (this.debounceResizeItems) {\n window.cancelAnimationFrame(this.debounceResizeItems);\n }\n\n this.debounceResizeItems = requestAnimationFrame(this.updateItems);\n }\n\n private handleExpandClick = () => {\n this.expanded = true;\n\n const itemLinks = Array.from(this.navElement.querySelectorAll('.stzh-breadcrumb__item-link')) as HTMLElement[];\n itemLinks[2].focus();\n }\n\n async componentWillLoad() {\n this.itemsWatcher(this.items);\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"breadcrumb\");\n }\n }\n\n componentDidRender() {\n this.resizeObserver.observe(this.navElement);\n\n const items = this.navElement.querySelectorAll('.stzh-breadcrumb__item');\n items.forEach((item) => {\n this.resizeItemsObserver.observe(item);\n });\n }\n\n connectedCallback() {\n this.resizeObserver = new ResizeObserver(this.handleContainerResize);\n this.resizeItemsObserver = new ResizeObserver(this.handleItemResize);\n }\n\n disconnectedCallback() {\n if (this.resizeObserver) {\n this.resizeObserver.disconnect();\n }\n\n if (this.resizeItemsObserver) {\n this.resizeItemsObserver.disconnect();\n }\n }\n\n render() {\n const classes = {\n \"stzh-breadcrumb\": true,\n \"stzh-breadcrumb--is-expanded\": this.expanded,\n \"stzh-breadcrumb--has-hidden-items\": this.hasHiddenItems,\n [`stzh-breadcrumb--${this.variant}`]: !!this.variant,\n \"rs_skip\": true // will prevent component being read by readspeaker\n };\n\n return (\n <Host>\n <div class={classes}>\n <nav\n ref={(el) => (this.navElement = el as HTMLElement)}\n class=\"stzh-breadcrumb__nav\"\n role=\"navigation\"\n aria-label={this.localization.title}\n >\n <ol class=\"stzh-breadcrumb__list\">\n {this._items.map((item, index) =>\n <Fragment>\n <li\n class={{\n \"stzh-breadcrumb__item\": true,\n \"is-last\": index + 1 === this._items.length,\n \"is-first\": index === 0,\n }}\n >\n <a\n aria-current={index + 1 === this._items.length ? \"page\" : null}\n href={item.href}\n onClick={(e) => this.handleClick(item, e)}\n class={{\n \"stzh-breadcrumb__item-link\": true,\n \"is-link\": !!item.href\n }}\n >\n {index === 0 ?\n <stzh-icon\n class=\"stzh-breadcrumb__item-icon\"\n name=\"home\"\n ></stzh-icon>\n :\n <stzh-icon\n class=\"stzh-breadcrumb__item-icon is-separator\"\n name=\"angle-right\"\n ></stzh-icon>\n }\n <span class=\"stzh-breadcrumb__item-label\">\n {item.label}\n </span>\n </a>\n </li>\n {index === 0 &&\n <li class=\"stzh-breadcrumb__item is-expand\">\n <button class=\"stzh-breadcrumb__item-link\" onClick={this.handleExpandClick}>\n <stzh-icon\n class=\"stzh-breadcrumb__item-icon is-separator\"\n name=\"angle-right\"\n ></stzh-icon>\n <span class=\"stzh-breadcrumb__item-label\">\n <span aria-hdiden=\"true\">\n {this.localization.expandLabel}\n </span>\n <span class=\"stzh-breadcrumb__item-label-hidden\">\n {this.localization.expandHiddenLabel}\n </span>\n </span>\n </button>\n </li>\n }\n </Fragment>\n )}\n </ol>\n </nav>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"stzh-breadcrumb.js","sourceRoot":"","sources":["../../../../src/components/stzh-breadcrumb/stzh-breadcrumb.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Watch,\n State,\n Fragment, Event, EventEmitter,\n} from \"@stencil/core\";\n\nimport { StzhBreadcrumbItem, StzhBreadcrumbItemClickEvent } from \"../../index\";\n\nimport { StzhBreadcrumbLocalizedText } from \"./stzh-breadcrumb.localization\";\n\nconst ITEM_EXPAND_INDEX = 1;\nconst SHRINK_DIRECTION = 1; // 1 = removes item to the right / -1 = removes item to the left\n\n/*\n \n /\n@Component({\n tag: \"stzh-breadcrumb\",\n styleUrl: \"stzh-breadcrumb.scss\",\n scoped: true\n})\nexport class StzhBreadcrumb {\n /* Translation strings /\n @Prop() localization: StzhBreadcrumbLocalizedText;\n\n /* Variant /\n @Prop({ reflect: true }) variant: \"default\" \| \"teaser\" = \"default\";\n\n /* Breadcrumb items /\n @Prop() items: StzhBreadcrumbItem[] \| string = [];\n private _items: StzhBreadcrumbItem[];\n\n /* Whether all items are shown (true) or everything should fit into one line and not wrap (false, default) /\n @Prop({ mutable: true, reflect: true }) expanded: boolean = false;\n\n @Element() element: HTMLStzhBreadcrumbElement;\n\n @Watch(\"items\")\n itemsWatcher(newValue: StzhBreadcrumbItem[] \| string) {\n if (!newValue) {\n this._items = [];\n } else if (typeof newValue === \"string\") {\n try {\n this._items = JSON.parse(newValue);\n } catch (e) {\n this._items = [];\n }\n } else {\n this._items = newValue;\n }\n }\n\n @Watch(\"expanded\")\n expandedWatcher() {\n this.updateContainer();\n }\n\n /* Item click event */\n @Event() stzhItemClick: EventEmitter<StzhBreadcrumbItemClickEvent>;\n\n @State() hasHiddenItems: boolean = false;\n\n private navElement: HTMLElement;\n private itemSizes: [HTMLElement, number][];\n\n private debounceResize: number;\n private resizeObserver: ResizeObserver;\n private debounceResizeItems: number;\n private resizeItemsObserver: ResizeObserver;\n\n private handleClick(item: StzhBreadcrumbItem, originalEvent: MouseEvent) {\n this.stzhItemClick.emit({\n component: \"stzh-breadcrumb\",\n item,\n originalEvent\n })\n }\n\n private updateContainer = () => {\n if (!this.navElement \|\| !this.itemSizes) {\n return;\n }\n\n const containerWidth = this.navElement.clientWidth;\n\n const totalItemsWidthWithoutExpandItem = this.itemSizes\n .reduce((previous, item, index) => {\n if (index === ITEM_EXPAND_INDEX) {\n return previous;\n } else {\n return previous + item[1];\n }\n }, 0);\n\n if (totalItemsWidthWithoutExpandItem >= containerWidth && this.itemSizes.length > 2 && !this.expanded) {\n const hideItems = [];\n\n const expandItemWidth = this.itemSizes[ITEM_EXPAND_INDEX][1];\n let currentIndexToHide = ITEM_EXPAND_INDEX + SHRINK_DIRECTION;\n let totalItemsShownWidthWithoutExpandItem = totalItemsWidthWithoutExpandItem;\n\n do {\n const current = this.itemSizes[currentIndexToHide];\n hideItems.push(current[0]);\n totalItemsShownWidthWithoutExpandItem = totalItemsShownWidthWithoutExpandItem - current[1];\n currentIndexToHide = currentIndexToHide + SHRINK_DIRECTION;\n } while (\n totalItemsShownWidthWithoutExpandItem + expandItemWidth >= containerWidth\n && currentIndexToHide < this.itemSizes.length\n );\n\n this.hasHiddenItems = true;\n\n this.itemSizes.forEach(([item], index) => {\n if (index === ITEM_EXPAND_INDEX) {\n item.classList.remove('is-hidden');\n } else {\n item.classList.toggle('is-hidden', hideItems.includes(item));\n }\n });\n } else {\n this.hasHiddenItems = false;\n\n this.itemSizes.forEach(([item], index) => {\n if (index === ITEM_EXPAND_INDEX) {\n item.classList.add('is-hidden');\n } else {\n item.classList.remove('is-hidden');\n }\n });\n }\n }\n\n private updateItems = () => {\n if (!this.navElement) {\n return;\n }\n\n // TODO: current updates all item sizes, but could be optimized only to update really resized items with using passed ResizeObserver entries\n const items = Array.from(this.navElement.querySelectorAll('.stzh-breadcrumb__item')) as HTMLElement[];\n this.itemSizes = [];\n\n items.forEach((item) => {\n const { width } = item.getBoundingClientRect();\n this.itemSizes.push([item, width]);\n })\n\n this.updateContainer();\n }\n\n private handleContainerResize = () => {\n if (this.debounceResize) {\n window.cancelAnimationFrame(this.debounceResize);\n }\n\n this.debounceResize = requestAnimationFrame(this.updateContainer);\n }\n\n private handleItemResize = () => {\n if (this.debounceResizeItems) {\n window.cancelAnimationFrame(this.debounceResizeItems);\n }\n\n this.debounceResizeItems = requestAnimationFrame(this.updateItems);\n }\n\n private handleExpandClick = () => {\n this.expanded = true;\n\n const itemLinks = Array.from(this.navElement.querySelectorAll('.stzh-breadcrumb__item-link')) as HTMLElement[];\n itemLinks[2].focus();\n }\n\n async componentWillLoad() {\n this.itemsWatcher(this.items);\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"breadcrumb\");\n }\n }\n\n componentDidRender() {\n this.resizeObserver.observe(this.navElement);\n\n const items = this.navElement.querySelectorAll('.stzh-breadcrumb__item');\n items.forEach((item) => {\n this.resizeItemsObserver.observe(item);\n });\n }\n\n connectedCallback() {\n this.resizeObserver = new ResizeObserver(this.handleContainerResize);\n this.resizeItemsObserver = new ResizeObserver(this.handleItemResize);\n }\n\n disconnectedCallback() {\n if (this.resizeObserver) {\n this.resizeObserver.disconnect();\n }\n\n if (this.resizeItemsObserver) {\n this.resizeItemsObserver.disconnect();\n }\n }\n\n render() {\n const classes = {\n \"stzh-breadcrumb\": true,\n \"stzh-breadcrumb--is-expanded\": this.expanded,\n \"stzh-breadcrumb--has-hidden-items\": this.hasHiddenItems,\n [`stzh-breadcrumb--${this.variant}`]: !!this.variant,\n \"rs_skip\": true // will prevent component being read by readspeaker\n };\n\n return (\n <Host>\n <div class={classes}>\n <nav\n ref={(el) => (this.navElement = el as HTMLElement)}\n class=\"stzh-breadcrumb__nav\"\n role=\"navigation\"\n aria-label={this.localization.title}\n >\n <ol class=\"stzh-breadcrumb__list\">\n {this._items.map((item, index) =>\n <Fragment>\n <li\n class={{\n \"stzh-breadcrumb__item\": true,\n \"is-last\": index + 1 === this._items.length,\n \"is-first\": index === 0,\n }}\n >\n <a\n aria-current={index + 1 === this._items.length ? \"page\" : null}\n href={item.href}\n onClick={(e) => this.handleClick(item, e)}\n class={{\n \"stzh-breadcrumb__item-link\": true,\n \"is-link\": !!item.href\n }}\n >\n {index === 0 ?\n <stzh-icon\n class=\"stzh-breadcrumb__item-icon\"\n name=\"home\"\n ></stzh-icon>\n :\n <stzh-icon\n class=\"stzh-breadcrumb__item-icon is-separator\"\n name=\"angle-right\"\n ></stzh-icon>\n }\n <span class=\"stzh-breadcrumb__item-label\">\n {item.label}\n </span>\n </a>\n </li>\n {index === 0 &&\n <li class=\"stzh-breadcrumb__item is-expand\">\n <button class=\"stzh-breadcrumb__item-link\" onClick={this.handleExpandClick}>\n <stzh-icon\n class=\"stzh-breadcrumb__item-icon is-separator\"\n name=\"angle-right\"\n ></stzh-icon>\n <span class=\"stzh-breadcrumb__item-label\">\n <span aria-hdiden=\"true\">\n {this.localization.expandLabel}\n </span>\n <span class=\"stzh-breadcrumb__item-label-hidden\">\n {this.localization.expandHiddenLabel}\n </span>\n </span>\n </button>\n </li>\n }\n </Fragment>\n )}\n </ol>\n </nav>\n </div>\n </Host>\n );\n }\n}\n"]}

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

@@ -125,9 +125,9 @@ export class StzhButton {
     return (h("div", { class: "stzh-button__text", ref: (el) => (this.text = el) }, this.rel && this.rel.includes('external') && h("div", { class: "stzh-button__vhidden" }, this.localization.$globals.externalLinkLabel), this.download && h("div", { class: "stzh-button__vhidden" }, this.localization.$globals.downloadLinkLabel), this.label ? this.label : h("slot", null)));
   }
   renderInner(iconUsed) {
-    return (h(Fragment, null, h("div", { class: "stzh-button__inner", onClick: this.onClick }, this.type === "radio" &&
+    return (h(Fragment, null, h("div", { class: "stzh-button__inner" }, this.type === "radio" &&
       h("div", { class: "stzh-button__mark" }, h("div", { class: "stzh-button__check" })), this.iconPosition === "left" && this.renderIcon(iconUsed), this.renderContent(), this.iconPosition === "right" && this.renderIcon(iconUsed)), (this.badge || this.badgeEmpty) && (this.badgePosition === "button" || !iconUsed) &&
-      h("stzh-badge", { class: "stzh-button__badge", label: this.badge, type: this.badgeType, onClick: this.onClick })));
+      h("stzh-badge", { class: "stzh-button__badge", label: this.badge, type: this.badgeType })));
   }
   async componentWillLoad() {
     this.defaultChecked = typeof this.defaultChecked === "boolean" ? this.defaultChecked : this.checked;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"stzh-button.js","sourceRoot":"","sources":["../../../../src/components/stzh-button/stzh-button.tsx"],"names":[],"mappings":"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n Component,\n Host,\n Fragment,\n Element,\n h,\n Prop,\n Event,\n EventEmitter,\n Listen\n} from \"@stencil/core\";\n\nimport {\n StzhButtonFocusEvent,\n StzhButtonBlurEvent,\n StzhButtonChangeEvent,\n StzhButtonSize,\n StzhButtonVariant,\n StzhBadgeType,\n StzhButtonClickEvent\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\n/*\n @slot - Slot for label/text content\n * @slot icon - Slot for icon element\n /\n@Component({\n tag: \"stzh-button\",\n styleUrl: \"stzh-button.scss\",\n scoped: true\n})\nexport class StzhButton {\n /* Translation strings /\n @Prop() localization: StzhLocaleComponent;\n\n /* Display a badge aligned to button or icons /\n @Prop() badge: string = \"\";\n\n /* Badge type /\n @Prop({ reflect: true }) badgeType: StzhBadgeType = \"default\";\n\n /* Badge position /\n @Prop({ reflect: true }) badgePosition: \"icon\" \| \"button\" = \"button\";\n\n /* Whether badge should be displayed empty /\n @Prop({ reflect: true }) badgeEmpty: boolean = false;\n\n /* Whether the button is full width /\n @Prop({ reflect: true }) fullwidth: boolean = false;\n\n /* Whether the button is rounded /\n @Prop({ reflect: true }) rounded: boolean = false;\n\n /* Size variant /\n @Prop({ reflect: true }) size: StzhButtonSize = \"default\";\n\n /* Size variant (above small breakpoint) /\n @Prop({ reflect: true }) sizeSmall: StzhButtonSize;\n\n /* Size variant (above medium breakpoint) /\n @Prop({ reflect: true }) sizeMedium: StzhButtonSize;\n\n /* Size variant (above large breakpoint) /\n @Prop({ reflect: true }) sizeLarge: StzhButtonSize;\n\n /* Size variant (above ultra breakpoint) /\n @Prop({ reflect: true }) sizeUltra: StzhButtonSize;\n\n /* Text alignment /\n @Prop({ reflect: true }) textAlign: \"left\" \| \"center\" \| \"right\" \| \"space-between\" \| \"default\" = \"default\";\n\n /* Variant style /\n @Prop({ reflect: true }) variant: StzhButtonVariant = \"default\";\n\n /* Icon (use instead of icon slot) /\n @Prop() icon: string = \"\";\n\n /* Icon Position /\n @Prop({ reflect: true }) iconPosition: \"left\" \| \"right\" = \"left\";\n\n /* Checked status (if type is radio) /\n @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n /* Default checked (used by reset, if type is radio) /\n @Prop({ mutable: true }) defaultChecked: boolean;\n\n /* The name of the input element (if type is button or radio) /\n @Prop({ reflect: true }) name: string = \"\";\n\n /* The value of the input element (if type is button or radio) /\n @Prop({ mutable: true }) value: string = \"\";\n\n /* `href` if the button should be used as link /\n @Prop() href: string = \"\";\n\n /* Rel (if href is used) /\n @Prop() rel: string;\n\n /* Target if the button is used as link (if `href` used) /\n @Prop() target: string = \"\";\n\n /* Download attribute of link (if `href` used) /\n @Prop() download: string;\n\n /* Type of the button /\n @Prop() type: \"button\" \| \"submit\" \| \"reset\" \| \"radio\" = \"button\";\n\n /* Whether the button is disabled /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* Whether the button is active /\n @Prop({ reflect: true }) active: boolean = false;\n\n /* Label /\n @Prop() label: string = \"\";\n\n /* Effect/Animation used /\n @Prop() effect: \"default\" \| \"cta\" = \"default\";\n\n /* Whether only an icon is used inside the button /\n @Prop({ reflect: true }) iconOnly: boolean = false;\n\n /* Whether padding left should be removed /\n @Prop({ reflect: true }) noPaddingLeft: boolean = false;\n\n /* Whether padding right should be removed /\n @Prop({ reflect: true }) noPaddingRight: boolean = false;\n\n /* Access key of button (usually a number e.g. 1) /\n @Prop() buttonAccesskey: string;\n\n /* ID of button element /\n @Prop() buttonId: string;\n\n /* Whether to show toggle icon (show minus when a11yExpanded=true, otherwise plus) /\n @Prop({ reflect: true }) showToggleIcon: boolean = false;\n\n /* Accessible label for screen readers to replace visible text /\n @Prop({ attribute: \"a11y-label\" }) a11yLabel: string;\n\n /* Id for element which describes the button (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) /\n @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n /* Aria expanded of link/button /\n @Prop({ reflect: true, attribute: \"a11y-expanded\" }) a11yExpanded: boolean;\n\n /* Aria disabled of link/button /\n @Prop({ reflect: true, attribute: \"a11y-disabled\" }) a11yDisabled: boolean;\n\n /* Aria controls of link/button /\n @Prop({ attribute: \"a11y-controls\" }) a11yControls: string;\n\n /* Aria current of link/button /\n @Prop({ attribute: \"a11y-current\" }) a11yCurrent: string;\n\n /* Tabindex of link/button /\n @Prop({ attribute: \"a11y-tabindex\" }) a11yTabindex: string;\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the link/button element.\n * Default value will be taken from `label` prop or default slot.\n /\n @Prop() analyticsId: string;\n\n @Element() element: HTMLStzhButtonElement;\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 /* Focus event /\n @Event() stzhFocus: EventEmitter<StzhButtonFocusEvent>;\n\n /* Blur event /\n @Event() stzhBlur: EventEmitter<StzhButtonBlurEvent>;\n\n /* Change event (only called if type is radio) /\n @Event() stzhChange: EventEmitter<StzhButtonChangeEvent>;\n\n /* Click event */\n @Event() stzhClick: EventEmitter<StzhButtonClickEvent>;\n\n private button: HTMLButtonElement \| HTMLAnchorElement \| HTMLLabelElement;\n private input: HTMLInputElement;\n private text: HTMLDivElement;\n private focusedByInput: boolean = false;\n\n private handleReset = async () => {\n this.checked = this.defaultChecked;\n }\n\n private onInput = (event: InputEvent) => {\n this.checked = this.input.checked;\n this.stzhChange.emit({\n component: \"stzh-button\",\n originalEvent: event,\n value: this.value,\n checked: this.checked\n });\n }\n\n private onRootFocus = () => {\n if (!this.focusedByInput) {\n this.button.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-button\",\n originalEvent: event\n });\n }\n\n private onBlur = (event: FocusEvent) => {\n const blurEvent = new FocusEvent(\"blur\", {\n view: window,\n bubbles: false,\n cancelable: false\n });\n\n this.element.dispatchEvent(blurEvent);\n this.stzhBlur.emit({\n component: \"stzh-button\",\n originalEvent: event\n });\n }\n\n private onClick = (event: MouseEvent) => {\n if (this.disabled) {\n event.stopPropagation();\n event.preventDefault();\n }\n else {\n this.stzhClick.emit({\n component: \"stzh-button\",\n originalEvent: event,\n href: this.href\n });\n }\n }\n\n private renderIcon(iconUsed: boolean): HTMLInputElement {\n return (\n <div class=\"stzh-button__icon-wrapper\">\n {this.icon &&\n <stzh-icon class=\"stzh-button__icon\" name={this.icon}></stzh-icon>\n }\n {!this.icon && this.showToggleIcon &&\n <div class=\"stzh-button__toggle-icon-wrapper\">\n <div class=\"stzh-button__toggle-icon\"></div>\n </div>\n }\n {!this.icon && !this.showToggleIcon &&\n <slot name=\"icon\"></slot>\n }\n {(this.badge \|\| this.badgeEmpty) && this.badgePosition === \"icon\" && iconUsed &&\n <stzh-badge class=\"stzh-button__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n }\n </div>\n );\n }\n\n private renderContent(): HTMLDivElement {\n return (\n <div\n class=\"stzh-button__text\"\n ref={(el) => (this.text = el as HTMLDivElement)}\n >\n {this.rel && this.rel.includes('external') && <div class=\"stzh-button__vhidden\">{this.localization.$globals.externalLinkLabel}</div>}\n {this.download && <div class=\"stzh-button__vhidden\">{this.localization.$globals.downloadLinkLabel}</div>}\n {this.label ? this.label : <slot></slot>}\n </div>\n );\n }\n\n private renderInner(iconUsed: boolean): DocumentFragment {\n return (\n <Fragment>\n <div\n class=\"stzh-button__inner\"\n onClick={this.onClick}\n >\n {this.type === \"radio\" &&\n <div class=\"stzh-button__mark\">\n <div class=\"stzh-button__check\"></div>\n </div>\n }\n {this.iconPosition === \"left\" && this.renderIcon(iconUsed)}\n {this.renderContent()}\n {this.iconPosition === \"right\" && this.renderIcon(iconUsed)}\n </div>\n {(this.badge \|\| this.badgeEmpty) && (this.badgePosition === \"button\" \|\| !iconUsed) &&\n <stzh-badge\n class=\"stzh-button__badge\"\n label={this.badge}\n type={this.badgeType}\n onClick={this.onClick}\n ></stzh-badge>\n }\n </Fragment>\n );\n }\n\n async componentWillLoad() {\n this.defaultChecked = typeof this.defaultChecked === \"boolean\" ? this.defaultChecked : this.checked;\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"button\");\n }\n }\n\n componentDidRender() {\n requestAnimationFrame(() => {\n this.button?.setAttribute(\"s-object-id\", this.analyticsId \|\| this.text.innerText);\n });\n }\n\n render() {\n const iconUsed: boolean = hasSlot(this.element, \"icon\") \|\| !!this.icon;\n const classes = {\n \"stzh-button\": true,\n \"stzh-button--has-icon\": iconUsed,\n \"stzh-button--has-icon-only\": this.iconOnly,\n \"stzh-button--has-badge\": !!this.badge,\n \"stzh-button--is-rounded\": this.rounded,\n \"stzh-button--is-fullwidth\": this.fullwidth,\n \"stzh-button--is-disabled\": this.disabled \|\| this.a11yDisabled,\n \"stzh-button--is-active\": this.active,\n \"stzh-button--is-expanded\": this.a11yExpanded,\n [`stzh-button--effect-${this.effect}`]: !!this.effect,\n [`stzh-button--badge-position-${this.badgePosition}`]: !!this.badgePosition,\n [`stzh-button--align-${this.textAlign}`]: !!this.textAlign,\n [`stzh-button--type-${this.type}`]: !!this.type,\n [`stzh-button--${this.variant}`]: !!this.variant\n };\n\n return (\n <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n {this.href ?\n <a\n ref={(el) => (this.button = el as HTMLAnchorElement)}\n href={this.disabled ? null : this.href}\n rel={this.rel}\n download={this.download}\n target={this.target}\n class={classes}\n aria-label={this.a11yLabel \|\| null}\n aria-describedby={this.a11yDescribedby \|\| null}\n aria-disabled={typeof this.a11yDisabled !== \"undefined\"\n ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n aria-controls={this.a11yControls \|\| null}\n aria-current={this.a11yCurrent \|\| null}\n id={this.buttonId}\n accessKey={this.buttonAccesskey}\n tabindex={this.a11yTabindex}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n onClick={this.onClick}\n >\n {this.renderInner(iconUsed)}\n </a>\n :\n this.type === \"radio\" ?\n <label\n ref={(el) => (this.button = el as HTMLLabelElement)}\n class={classes}\n onClick={this.onClick}\n >\n <input\n ref={(el) => (this.input = el as HTMLInputElement)}\n type=\"radio\"\n class=\"stzh-button__input\"\n name={this.name}\n value={this.value}\n defaultChecked={this.defaultChecked}\n checked={this.checked}\n disabled={this.disabled}\n aria-label={this.a11yLabel \|\| null}\n aria-describedby={this.a11yDescribedby \|\| null}\n aria-disabled={typeof this.a11yDisabled !== \"undefined\"\n ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n aria-controls={this.a11yControls \|\| null}\n aria-current={this.a11yCurrent \|\| null}\n id={this.buttonId}\n accessKey={this.buttonAccesskey}\n tabindex={this.a11yTabindex}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n onClick={this.onClick}\n onInput={this.onInput}\n />\n {this.renderInner(iconUsed)}\n </label>\n :\n <button\n ref={(el) => (this.button = el as HTMLButtonElement)}\n class={classes}\n type={this.type}\n name={this.name}\n value={this.value}\n disabled={this.disabled}\n aria-label={this.a11yLabel \|\| null}\n aria-describedby={this.a11yDescribedby \|\| null}\n aria-disabled={typeof this.a11yDisabled !== \"undefined\"\n ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n aria-controls={this.a11yControls \|\| null}\n aria-current={this.a11yCurrent \|\| null}\n id={this.buttonId}\n accessKey={this.buttonAccesskey}\n tabindex={this.a11yTabindex}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n onClick={this.onClick}\n >\n {this.renderInner(iconUsed)}\n </button>\n }\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"stzh-button.js","sourceRoot":"","sources":["../../../../src/components/stzh-button/stzh-button.tsx"],"names":[],"mappings":"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n Component,\n Host,\n Fragment,\n Element,\n h,\n Prop,\n Event,\n EventEmitter,\n Listen\n} from \"@stencil/core\";\n\nimport {\n StzhButtonFocusEvent,\n StzhButtonBlurEvent,\n StzhButtonChangeEvent,\n StzhButtonSize,\n StzhButtonVariant,\n StzhBadgeType,\n StzhButtonClickEvent\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\n/*\n @slot - Slot for label/text content\n * @slot icon - Slot for icon element\n /\n@Component({\n tag: \"stzh-button\",\n styleUrl: \"stzh-button.scss\",\n scoped: true\n})\nexport class StzhButton {\n /* Translation strings /\n @Prop() localization: StzhLocaleComponent;\n\n /* Display a badge aligned to button or icons /\n @Prop() badge: string = \"\";\n\n /* Badge type /\n @Prop({ reflect: true }) badgeType: StzhBadgeType = \"default\";\n\n /* Badge position /\n @Prop({ reflect: true }) badgePosition: \"icon\" \| \"button\" = \"button\";\n\n /* Whether badge should be displayed empty /\n @Prop({ reflect: true }) badgeEmpty: boolean = false;\n\n /* Whether the button is full width /\n @Prop({ reflect: true }) fullwidth: boolean = false;\n\n /* Whether the button is rounded /\n @Prop({ reflect: true }) rounded: boolean = false;\n\n /* Size variant /\n @Prop({ reflect: true }) size: StzhButtonSize = \"default\";\n\n /* Size variant (above small breakpoint) /\n @Prop({ reflect: true }) sizeSmall: StzhButtonSize;\n\n /* Size variant (above medium breakpoint) /\n @Prop({ reflect: true }) sizeMedium: StzhButtonSize;\n\n /* Size variant (above large breakpoint) /\n @Prop({ reflect: true }) sizeLarge: StzhButtonSize;\n\n /* Size variant (above ultra breakpoint) /\n @Prop({ reflect: true }) sizeUltra: StzhButtonSize;\n\n /* Text alignment /\n @Prop({ reflect: true }) textAlign: \"left\" \| \"center\" \| \"right\" \| \"space-between\" \| \"default\" = \"default\";\n\n /* Variant style /\n @Prop({ reflect: true }) variant: StzhButtonVariant = \"default\";\n\n /* Icon (use instead of icon slot) /\n @Prop() icon: string = \"\";\n\n /* Icon Position /\n @Prop({ reflect: true }) iconPosition: \"left\" \| \"right\" = \"left\";\n\n /* Checked status (if type is radio) /\n @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n /* Default checked (used by reset, if type is radio) /\n @Prop({ mutable: true }) defaultChecked: boolean;\n\n /* The name of the input element (if type is button or radio) /\n @Prop({ reflect: true }) name: string = \"\";\n\n /* The value of the input element (if type is button or radio) /\n @Prop({ mutable: true }) value: string = \"\";\n\n /* `href` if the button should be used as link /\n @Prop() href: string = \"\";\n\n /* Rel (if href is used) /\n @Prop() rel: string;\n\n /* Target if the button is used as link (if `href` used) /\n @Prop() target: string = \"\";\n\n /* Download attribute of link (if `href` used) /\n @Prop() download: string;\n\n /* Type of the button /\n @Prop() type: \"button\" \| \"submit\" \| \"reset\" \| \"radio\" = \"button\";\n\n /* Whether the button is disabled /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* Whether the button is active /\n @Prop({ reflect: true }) active: boolean = false;\n\n /* Label /\n @Prop() label: string = \"\";\n\n /* Effect/Animation used /\n @Prop() effect: \"default\" \| \"cta\" = \"default\";\n\n /* Whether only an icon is used inside the button /\n @Prop({ reflect: true }) iconOnly: boolean = false;\n\n /* Whether padding left should be removed /\n @Prop({ reflect: true }) noPaddingLeft: boolean = false;\n\n /* Whether padding right should be removed /\n @Prop({ reflect: true }) noPaddingRight: boolean = false;\n\n /* Access key of button (usually a number e.g. 1) /\n @Prop() buttonAccesskey: string;\n\n /* ID of button element /\n @Prop() buttonId: string;\n\n /* Whether to show toggle icon (show minus when a11yExpanded=true, otherwise plus) /\n @Prop({ reflect: true }) showToggleIcon: boolean = false;\n\n /* Accessible label for screen readers to replace visible text /\n @Prop({ attribute: \"a11y-label\" }) a11yLabel: string;\n\n /* Id for element which describes the button (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) /\n @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n /* Aria expanded of link/button /\n @Prop({ reflect: true, attribute: \"a11y-expanded\" }) a11yExpanded: boolean;\n\n /* Aria disabled of link/button /\n @Prop({ reflect: true, attribute: \"a11y-disabled\" }) a11yDisabled: boolean;\n\n /* Aria controls of link/button /\n @Prop({ attribute: \"a11y-controls\" }) a11yControls: string;\n\n /* Aria current of link/button /\n @Prop({ attribute: \"a11y-current\" }) a11yCurrent: string;\n\n /* Tabindex of link/button /\n @Prop({ attribute: \"a11y-tabindex\" }) a11yTabindex: string;\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the link/button element.\n * Default value will be taken from `label` prop or default slot.\n /\n @Prop() analyticsId: string;\n\n @Element() element: HTMLStzhButtonElement;\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 /* Focus event /\n @Event() stzhFocus: EventEmitter<StzhButtonFocusEvent>;\n\n /* Blur event /\n @Event() stzhBlur: EventEmitter<StzhButtonBlurEvent>;\n\n /* Change event (only called if type is radio) /\n @Event() stzhChange: EventEmitter<StzhButtonChangeEvent>;\n\n /* Click event */\n @Event() stzhClick: EventEmitter<StzhButtonClickEvent>;\n\n private button: HTMLButtonElement \| HTMLAnchorElement \| HTMLLabelElement;\n private input: HTMLInputElement;\n private text: HTMLDivElement;\n private focusedByInput: boolean = false;\n\n private handleReset = async () => {\n this.checked = this.defaultChecked;\n }\n\n private onInput = (event: InputEvent) => {\n this.checked = this.input.checked;\n this.stzhChange.emit({\n component: \"stzh-button\",\n originalEvent: event,\n value: this.value,\n checked: this.checked\n });\n }\n\n private onRootFocus = () => {\n if (!this.focusedByInput) {\n this.button.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-button\",\n originalEvent: event\n });\n }\n\n private onBlur = (event: FocusEvent) => {\n const blurEvent = new FocusEvent(\"blur\", {\n view: window,\n bubbles: false,\n cancelable: false\n });\n\n this.element.dispatchEvent(blurEvent);\n this.stzhBlur.emit({\n component: \"stzh-button\",\n originalEvent: event\n });\n }\n\n private onClick = (event: MouseEvent) => {\n if (this.disabled) {\n event.stopPropagation();\n event.preventDefault();\n }\n else {\n this.stzhClick.emit({\n component: \"stzh-button\",\n originalEvent: event,\n href: this.href\n });\n }\n }\n\n private renderIcon(iconUsed: boolean): HTMLInputElement {\n return (\n <div class=\"stzh-button__icon-wrapper\">\n {this.icon &&\n <stzh-icon class=\"stzh-button__icon\" name={this.icon}></stzh-icon>\n }\n {!this.icon && this.showToggleIcon &&\n <div class=\"stzh-button__toggle-icon-wrapper\">\n <div class=\"stzh-button__toggle-icon\"></div>\n </div>\n }\n {!this.icon && !this.showToggleIcon &&\n <slot name=\"icon\"></slot>\n }\n {(this.badge \|\| this.badgeEmpty) && this.badgePosition === \"icon\" && iconUsed &&\n <stzh-badge class=\"stzh-button__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n }\n </div>\n );\n }\n\n private renderContent(): HTMLDivElement {\n return (\n <div\n class=\"stzh-button__text\"\n ref={(el) => (this.text = el as HTMLDivElement)}\n >\n {this.rel && this.rel.includes('external') && <div class=\"stzh-button__vhidden\">{this.localization.$globals.externalLinkLabel}</div>}\n {this.download && <div class=\"stzh-button__vhidden\">{this.localization.$globals.downloadLinkLabel}</div>}\n {this.label ? this.label : <slot></slot>}\n </div>\n );\n }\n\n private renderInner(iconUsed: boolean): DocumentFragment {\n return (\n <Fragment>\n <div class=\"stzh-button__inner\">\n {this.type === \"radio\" &&\n <div class=\"stzh-button__mark\">\n <div class=\"stzh-button__check\"></div>\n </div>\n }\n {this.iconPosition === \"left\" && this.renderIcon(iconUsed)}\n {this.renderContent()}\n {this.iconPosition === \"right\" && this.renderIcon(iconUsed)}\n </div>\n {(this.badge \|\| this.badgeEmpty) && (this.badgePosition === \"button\" \|\| !iconUsed) &&\n <stzh-badge\n class=\"stzh-button__badge\"\n label={this.badge}\n type={this.badgeType}\n ></stzh-badge>\n }\n </Fragment>\n );\n }\n async componentWillLoad() {\n this.defaultChecked = typeof this.defaultChecked === \"boolean\" ? this.defaultChecked : this.checked;\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"button\");\n }\n }\n\n componentDidRender() {\n requestAnimationFrame(() => {\n this.button?.setAttribute(\"s-object-id\", this.analyticsId \|\| this.text.innerText);\n });\n }\n\n render() {\n const iconUsed: boolean = hasSlot(this.element, \"icon\") \|\| !!this.icon;\n const classes = {\n \"stzh-button\": true,\n \"stzh-button--has-icon\": iconUsed,\n \"stzh-button--has-icon-only\": this.iconOnly,\n \"stzh-button--has-badge\": !!this.badge,\n \"stzh-button--is-rounded\": this.rounded,\n \"stzh-button--is-fullwidth\": this.fullwidth,\n \"stzh-button--is-disabled\": this.disabled \|\| this.a11yDisabled,\n \"stzh-button--is-active\": this.active,\n \"stzh-button--is-expanded\": this.a11yExpanded,\n [`stzh-button--effect-${this.effect}`]: !!this.effect,\n [`stzh-button--badge-position-${this.badgePosition}`]: !!this.badgePosition,\n [`stzh-button--align-${this.textAlign}`]: !!this.textAlign,\n [`stzh-button--type-${this.type}`]: !!this.type,\n [`stzh-button--${this.variant}`]: !!this.variant\n };\n\n return (\n <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n {this.href ?\n <a\n ref={(el) => (this.button = el as HTMLAnchorElement)}\n href={this.disabled ? null : this.href}\n rel={this.rel}\n download={this.download}\n target={this.target}\n class={classes}\n aria-label={this.a11yLabel \|\| null}\n aria-describedby={this.a11yDescribedby \|\| null}\n aria-disabled={typeof this.a11yDisabled !== \"undefined\"\n ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n aria-controls={this.a11yControls \|\| null}\n aria-current={this.a11yCurrent \|\| null}\n id={this.buttonId}\n accessKey={this.buttonAccesskey}\n tabindex={this.a11yTabindex}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n onClick={this.onClick}\n >\n {this.renderInner(iconUsed)}\n </a>\n :\n this.type === \"radio\" ?\n <label\n ref={(el) => (this.button = el as HTMLLabelElement)}\n class={classes}\n onClick={this.onClick}\n >\n <input\n ref={(el) => (this.input = el as HTMLInputElement)}\n type=\"radio\"\n class=\"stzh-button__input\"\n name={this.name}\n value={this.value}\n defaultChecked={this.defaultChecked}\n checked={this.checked}\n disabled={this.disabled}\n aria-label={this.a11yLabel \|\| null}\n aria-describedby={this.a11yDescribedby \|\| null}\n aria-disabled={typeof this.a11yDisabled !== \"undefined\"\n ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n aria-controls={this.a11yControls \|\| null}\n aria-current={this.a11yCurrent \|\| null}\n id={this.buttonId}\n accessKey={this.buttonAccesskey}\n tabindex={this.a11yTabindex}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n onClick={this.onClick}\n onInput={this.onInput}\n />\n {this.renderInner(iconUsed)}\n </label>\n :\n <button\n ref={(el) => (this.button = el as HTMLButtonElement)}\n class={classes}\n type={this.type}\n name={this.name}\n value={this.value}\n disabled={this.disabled}\n aria-label={this.a11yLabel \|\| null}\n aria-describedby={this.a11yDescribedby \|\| null}\n aria-disabled={typeof this.a11yDisabled !== \"undefined\"\n ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n aria-controls={this.a11yControls \|\| null}\n aria-current={this.a11yCurrent \|\| null}\n id={this.buttonId}\n accessKey={this.buttonAccesskey}\n tabindex={this.a11yTabindex}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n onClick={this.onClick}\n >\n {this.renderInner(iconUsed)}\n </button>\n }\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/stzh-card-navigation/stzh-card-navigation.css CHANGED Viewed

@@ -174,6 +174,7 @@
   gap: var(--stzh-space-small);
   background-color: var(--stzh-color-grey10);
   /* Has lead variant */
+  /* Hyphens */
 }
 .stzh-card-navigation__wrapper {
   padding-left: var(--stzh-space-medium);
@@ -341,4 +342,8 @@
   bottom: 0;
   width: 2.75rem;
   height: 2.75rem;
+}
+.stzh-card-navigation--hyphens .stzh-card-navigation__title, .stzh-card-navigation--hyphens .stzh-card-navigation__title-link {
+  -webkit-hyphens: auto;
+          hyphens: auto;
 }

package/dist/collection/components/stzh-card-navigation/stzh-card-navigation.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { Host, h, } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { hasSlot } from "../../utils/utils";
 /**
  * @slot heading - Heading text (alternative for heading property)
@@ -10,7 +10,7 @@ export class StzhCardNavigation {
       this.stzhClick.emit({
         component: "stzh-card-navigation",
         originalEvent,
-        href: this.href
+        href: this.href,
       });
     };
     this.href = undefined;
@@ -19,6 +19,7 @@ export class StzhCardNavigation {
     this.heading = "";
     this.headingLevel = "3";
     this.lead = "";
+    this.hyphensEnabled = false;
   }
   componentDidRender() {
     requestAnimationFrame(() => {
@@ -30,14 +31,15 @@ export class StzhCardNavigation {
     });
   }
   render() {
-    const hasLead = !!this.lead || hasSlot(this.element, 'lead');
+    const hasLead = !!this.lead || hasSlot(this.element, "lead");
     const classes = {
       "stzh-card-navigation": true,
       "stzh-card-navigation--has-lead": hasLead,
+      "stzh-card-navigation--hyphens": this.hyphensEnabled,
     };
     const Heading = `h${this.headingLevel}`;
     const TitleLink = this.href ? "a" : "button";
-    return (h(Host, { "has-lead": hasLead }, h("article", { class: classes, "aria-label": this.heading, role: "listitem" }, h("div", { class: "stzh-card-navigation__wrapper" }, h(Heading, { class: "stzh-card-navigation__title" }, h(TitleLink, { ref: (el) => (this.titleLinkElement = el), class: "stzh-card-navigation__title-link", href: this.href, target: this.target, onClick: this.handleCardClick }, h("div", { ref: (el) => (this.headingTextElement = el) }, this.heading ? this.heading : h("slot", { name: "heading" })))), h("div", { class: "stzh-card-navigation__lead" }, this.lead ? this.lead : h("slot", { name: "lead" }))), h("div", { class: "stzh-card-navigation__arrow" }, h("stzh-icon", { class: "stzh-card-navigation__arrow-icon", name: "arrow-right" })))));
+    return (h(Host, { "has-lead": hasLead }, h("article", { class: classes, "aria-label": this.heading, role: "listitem" }, h("div", { class: "stzh-card-navigation__wrapper" }, h(Heading, { class: "stzh-card-navigation__title" }, h(TitleLink, { ref: el => (this.titleLinkElement = el), class: "stzh-card-navigation__title-link", href: this.href, target: this.target, onClick: this.handleCardClick }, h("div", { ref: el => (this.headingTextElement = el) }, this.heading ? this.heading : h("slot", { name: "heading" })))), h("div", { class: "stzh-card-navigation__lead" }, this.lead ? this.lead : h("slot", { name: "lead" }))), h("div", { class: "stzh-card-navigation__arrow" }, h("stzh-icon", { class: "stzh-card-navigation__arrow-icon", name: "arrow-right" })))));
   }
   static get is() { return "stzh-card-navigation"; }
   static get encapsulation() { return "scoped"; }
@@ -157,6 +159,24 @@ export class StzhCardNavigation {
         "attribute": "lead",
         "reflect": false,
         "defaultValue": "\"\""
+      },
+      "hyphensEnabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Automatic Hyphens"
+        },
+        "attribute": "hyphens-enabled",
+        "reflect": true,
+        "defaultValue": "false"
       }
     };
   }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"stzh-card-navigation.js","sourceRoot":"","sources":["../../../../src/components/stzh-card-navigation/stzh-card-navigation.tsx"],"names":[],"mappings":"AAAA,OAAO,~~EACL~~,SAAS,~~EACT~~,~~IAAI~~,~~EACJ~~,~~CAAC~~,~~EACD~~,~~OAAO~~,~~EACP~~,IAAI,~~EACJ~~,~~KAAK~~,~~GAEN~~,MAAM,eAAe,CAAC;~~AAKvB~~,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAE5C;;;GAGG;AAMH,MAAM,OAAO,kBAAkB;;~~IA+BrB~~,oBAAe,GAAG,CAAC,aAAyB,EAAE,EAAE;MACtD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;QAClB,SAAS,EAAE,sBAAsB;QACjC,aAAa;QACb,IAAI,EAAE,IAAI,CAAC,IAAI;OAChB,CAAC,CAAC;IACL,CAAC,~~CAAA~~;;;;~~mBAtByB~~,EAAE;wBAGkB,GAAG;gBAG1B,EAAE;;~~EAkBzB~~,kBAAkB;IAChB,qBAAqB,CAAC,GAAG,EAAE;;MACzB,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,KAAI,MAAA,IAAI,CAAC,kBAAkB,0CAAE,SAAS,CAAA,CAAC;MAExE,IAAI,QAAQ,EAAE;QACZ,MAAA,IAAI,CAAC,gBAAgB,0CAAE,YAAY,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC;OAC9D;IACH,CAAC,CAAC,CAAC;EACL,CAAC;EAED,MAAM;IACJ,MAAM,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;IAE7D,MAAM,OAAO,GAAG;MACd,sBAAsB,EAAE,IAAI;MAC5B,gCAAgC,EAAE,OAAO;~~KAC1C~~,CAAC;IAEF,MAAM,OAAO,GAAG,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;IACxC,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC;IAE7C,OAAO,CACL,EAAC,IAAI,gBAAW,OAAO;MACrB,eAAS,KAAK,EAAE,OAAO,gBAAc,IAAI,CAAC,OAAO,EAAE,IAAI,EAAC,UAAU;QAChE,WAAK,KAAK,EAAC,+BAA+B;UACxC,EAAC,OAAO,IAAC,KAAK,EAAC,6BAA6B;YAC1C,EAAC,SAAS,IACR,GAAG,EAAE,~~CAAC,~~EAAE,~~EAAE~~,EAAE,CAAC,CAAC,IAAI,CAAC,gBAAgB,GAAG,EAA2C,CAAC,~~EAClF~~,KAAK,EAAC,kCAAkC,EACxC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,eAAe;cAE7B,WAAK,GAAG,EAAE,~~CAAC,~~EAAE,~~EAAE~~,EAAE,CAAC,CAAC,IAAI,CAAC,kBAAkB,GAAG,EAAoB,CAAC,~~IAC/D~~,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,YAAM,IAAI,EAAC,SAAS,GAAQ,CACvD,CACI,CACJ;UAEV,WAAK,KAAK,EAAC,4BAA4B,~~IACpC~~,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,YAAM,IAAI,EAAC,MAAM,GAAQ,~~CAC9C~~,~~CACF~~;QAEN,WAAK,KAAK,EAAC,6BAA6B;UACtC,iBAAW,KAAK,EAAC,kCAAkC,EAAC,IAAI,EAAC,aAAa,GAAa,CAC/E,CACE,CACL,CACR,CAAC;EACJ,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["import {\n Component~~,\n Host,\n h,\n~~ Element~~,\n Prop,\n~~ Event~~,\n~~ EventEmitter~~,\n~~} from \"@stencil/core\";\n\nimport {\n StzhCardNavigationClickEvent\n} from \"../../index\";\nimport { hasSlot } from \"../../utils/utils\";\n\n/*\n @slot heading - Heading text (alternative for heading property)\n * @slot lead - Lead text (alternative for lead property)\n /\n@Component({\n tag: \"stzh-card-navigation\",\n styleUrl: \"stzh-card-navigation.scss\",\n scoped: true\n})\nexport class StzhCardNavigation {\n /* Href of card /\n @Prop({ reflect: true }) href: string;\n\n /* target if the button is used as link (if href used) /\n @Prop() target: string;\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the link elements.\n * Default value will be taken from `heading` prop/slot.\n /\n @Prop() analyticsId: string;\n\n /* Heading (alternative for heading slot) /\n @Prop() heading: string = \"\";\n\n /* Heading level /\n @Prop() headingLevel: \"1\" \| \"2\" \| \"3\" \| \"4\" = \"3\";\n\n /* Lead text (alternative for lead slot) /\n @Prop() lead: string = \"\";\n\n @Element() element: HTMLStzhListElement;\n\n /* Click event (if href is used) */\n @Event() stzhClick: EventEmitter<StzhCardNavigationClickEvent>;\n\n private titleLinkElement: HTMLAnchorElement \| HTMLButtonElement;\n private headingTextElement: HTMLDivElement;\n\n private handleCardClick = (originalEvent: MouseEvent) => {\n this.stzhClick.emit({\n component: \"stzh-card-navigation\",\n originalEvent,\n href: this.href\n });\n }\n\n componentDidRender() {\n requestAnimationFrame(() => {\n const objectId = this.analyticsId \|\| this.headingTextElement?.innerText;\n\n if (objectId) {\n this.titleLinkElement?.setAttribute(\"s-object-id\", objectId);\n }\n });\n }\n\n render() {\n const hasLead = !!this.lead \|\| hasSlot(this.element, 'lead');\n\n const classes = {\n \"stzh-card-navigation\": true,\n \"stzh-card-navigation--has-lead\": hasLead,\n };\n\n const Heading = `h${this.headingLevel}`;\n const TitleLink = this.href ? \"a\" : \"button\";\n\n return (\n <Host has-lead={hasLead}>\n <article class={classes} aria-label={this.heading} role=\"listitem\">\n <div class=\"stzh-card-navigation__wrapper\">\n <Heading class=\"stzh-card-navigation__title\">\n <TitleLink\n ref={(el) => (this.titleLinkElement = el as HTMLAnchorElement \| HTMLButtonElement)}\n class=\"stzh-card-navigation__title-link\"\n href={this.href}\n target={this.target}\n onClick={this.handleCardClick}\n >\n <div ref={(el) => (this.headingTextElement = el as HTMLDivElement)}>\n {this.heading ? this.heading : <slot name=\"heading\"></slot>}\n </div>\n </TitleLink>\n </Heading>\n\n <div class=\"stzh-card-navigation__lead\"~~>\n~~ {this.lead ? this.lead : <slot name=\"lead\"></slot>}\n </div>\n </div>\n\n <div class=\"stzh-card-navigation__arrow\">\n <stzh-icon class=\"stzh-card-navigation__arrow-icon\" name=\"arrow-right\"></stzh-icon>\n </div>\n </article>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"stzh-card-navigation.js","sourceRoot":"","sources":["../../../../src/components/stzh-card-navigation/stzh-card-navigation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAGvF,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAE5C;;;GAGG;AAMH,MAAM,OAAO,kBAAkB;;IAkCrB,oBAAe,GAAG,CAAC,aAAyB,EAAE,EAAE;MACtD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;QAClB,SAAS,EAAE,sBAAsB;QACjC,aAAa;QACb,IAAI,EAAE,IAAI,CAAC,IAAI;OAChB,CAAC,CAAC;IACL,CAAC,CAAC;;;;mBAzBwB,EAAE;wBAGkB,GAAG;gBAG1B,EAAE;0BAG0B,KAAK;;EAkBxD,kBAAkB;IAChB,qBAAqB,CAAC,GAAG,EAAE;;MACzB,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,KAAI,MAAA,IAAI,CAAC,kBAAkB,0CAAE,SAAS,CAAA,CAAC;MAExE,IAAI,QAAQ,EAAE;QACZ,MAAA,IAAI,CAAC,gBAAgB,0CAAE,YAAY,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC;OAC9D;IACH,CAAC,CAAC,CAAC;EACL,CAAC;EAED,MAAM;IACJ,MAAM,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;IAE7D,MAAM,OAAO,GAAG;MACd,sBAAsB,EAAE,IAAI;MAC5B,gCAAgC,EAAE,OAAO;MACzC,+BAA+B,EAAE,IAAI,CAAC,cAAc;KACrD,CAAC;IAEF,MAAM,OAAO,GAAG,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;IACxC,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC;IAE7C,OAAO,CACL,EAAC,IAAI,gBAAW,OAAO;MACrB,eAAS,KAAK,EAAE,OAAO,gBAAc,IAAI,CAAC,OAAO,EAAE,IAAI,EAAC,UAAU;QAChE,WAAK,KAAK,EAAC,+BAA+B;UACxC,EAAC,OAAO,IAAC,KAAK,EAAC,6BAA6B;YAC1C,EAAC,SAAS,IACR,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,gBAAgB,GAAG,EAA2C,CAAC,EAChF,KAAK,EAAC,kCAAkC,EACxC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,eAAe;cAE7B,WAAK,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,kBAAkB,GAAG,EAAoB,CAAC,IAC7D,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,YAAM,IAAI,EAAC,SAAS,GAAQ,CACvD,CACI,CACJ;UAEV,WAAK,KAAK,EAAC,4BAA4B,IAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,YAAM,IAAI,EAAC,MAAM,GAAQ,CAAO,CAC7F;QAEN,WAAK,KAAK,EAAC,6BAA6B;UACtC,iBAAW,KAAK,EAAC,kCAAkC,EAAC,IAAI,EAAC,aAAa,GAAa,CAC/E,CACE,CACL,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Prop } from \"@stencil/core\";\n\nimport { StzhCardNavigationClickEvent } from \"../../index\";\nimport { hasSlot } from \"../../utils/utils\";\n\n/*\n @slot heading - Heading text (alternative for heading property)\n * @slot lead - Lead text (alternative for lead property)\n /\n@Component({\n tag: \"stzh-card-navigation\",\n styleUrl: \"stzh-card-navigation.scss\",\n scoped: true,\n})\nexport class StzhCardNavigation {\n /* Href of card /\n @Prop({ reflect: true }) href: string;\n\n /* target if the button is used as link (if href used) /\n @Prop() target: string;\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the link elements.\n * Default value will be taken from `heading` prop/slot.\n /\n @Prop() analyticsId: string;\n\n /* Heading (alternative for heading slot) /\n @Prop() heading: string = \"\";\n\n /* Heading level /\n @Prop() headingLevel: \"1\" \| \"2\" \| \"3\" \| \"4\" = \"3\";\n\n /* Lead text (alternative for lead slot) /\n @Prop() lead: string = \"\";\n\n /* Automatic Hyphens /\n @Prop({ reflect: true }) hyphensEnabled: boolean = false;\n\n @Element() element: HTMLStzhListElement;\n\n /* Click event (if href is used) */\n @Event() stzhClick: EventEmitter<StzhCardNavigationClickEvent>;\n\n private titleLinkElement: HTMLAnchorElement \| HTMLButtonElement;\n private headingTextElement: HTMLDivElement;\n\n private handleCardClick = (originalEvent: MouseEvent) => {\n this.stzhClick.emit({\n component: \"stzh-card-navigation\",\n originalEvent,\n href: this.href,\n });\n };\n\n componentDidRender() {\n requestAnimationFrame(() => {\n const objectId = this.analyticsId \|\| this.headingTextElement?.innerText;\n\n if (objectId) {\n this.titleLinkElement?.setAttribute(\"s-object-id\", objectId);\n }\n });\n }\n\n render() {\n const hasLead = !!this.lead \|\| hasSlot(this.element, \"lead\");\n\n const classes = {\n \"stzh-card-navigation\": true,\n \"stzh-card-navigation--has-lead\": hasLead,\n \"stzh-card-navigation--hyphens\": this.hyphensEnabled,\n };\n\n const Heading = `h${this.headingLevel}`;\n const TitleLink = this.href ? \"a\" : \"button\";\n\n return (\n <Host has-lead={hasLead}>\n <article class={classes} aria-label={this.heading} role=\"listitem\">\n <div class=\"stzh-card-navigation__wrapper\">\n <Heading class=\"stzh-card-navigation__title\">\n <TitleLink\n ref={el => (this.titleLinkElement = el as HTMLAnchorElement \| HTMLButtonElement)}\n class=\"stzh-card-navigation__title-link\"\n href={this.href}\n target={this.target}\n onClick={this.handleCardClick}\n >\n <div ref={el => (this.headingTextElement = el as HTMLDivElement)}>\n {this.heading ? this.heading : <slot name=\"heading\"></slot>}\n </div>\n </TitleLink>\n </Heading>\n\n <div class=\"stzh-card-navigation__lead\">{this.lead ? this.lead : <slot name=\"lead\"></slot>}</div>\n </div>\n\n <div class=\"stzh-card-navigation__arrow\">\n <stzh-icon class=\"stzh-card-navigation__arrow-icon\" name=\"arrow-right\"></stzh-icon>\n </div>\n </article>\n </Host>\n );\n }\n}\n"]}

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

@@ -30,10 +30,7 @@ export default {
       allowFullscreen: true
     }
   },
-  decorators: [
-    withActions,
-    withDesign
-  ]
+  decorators: [withActions, withDesign]
 };
 export const ContentNavigation = {
@@ -43,7 +40,18 @@ export const ContentNavigation = {
     heading: 'Lorem ipsum dolor si amet',
     lead: 'Lorem ipsum dolor si amet, consectetur adipiscing elit'
   }
-}
+};
+export const WithHyphens = {
+  render: (args) => story(args, TEMPLATE),
+  args: {
+    href: '#',
+    heading: 'Hochleistungskompressorumlaufschutzventil',
+    lead: 'Lorem ipsum dolor si amet, consectetur adipiscing elit',
+    'hyphens-enabled': true,
+    lang: 'de'
+  }
+};
 export const WithoutLead = {
   render: (args) => story(args, TEMPLATE),
@@ -51,5 +59,4 @@ export const WithoutLead = {
     href: '#',
     heading: 'Lorem ipsum dolor si amet'
   }
-}
+};

package/dist/collection/components/stzh-card-searchresult/stzh-card-searchresult.css CHANGED Viewed

@@ -225,6 +225,7 @@
   /* Has image (default) */
   /* Has image right */
   /* Has description wrapper, meta or download */
+  /* Hyphens */
 }
 .stzh-card-searchresult__tag, .stzh-card-searchresult__dateline, .stzh-card-searchresult__breadcrumb, .stzh-card-searchresult__event-infos, .stzh-card-searchresult__heading-link-text, .stzh-card-searchresult__description, .stzh-card-searchresult__meta-wrapper {
   z-index: 1;
@@ -465,4 +466,8 @@
 }
 .stzh-card-searchresult--has-download .stzh-card-searchresult__meta {
   margin-bottom: var(--stzh-space-xsmall);
+}
+.stzh-card-searchresult--hyphens .stzh-card-searchresult__heading {
+  -webkit-hyphens: auto;
+          hyphens: auto;
 }