npm - @oiz/stzh-components - Versions diffs - 2.8.0-alpha → 2.8.0-beta - Mend

@oiz/stzh-components 2.8.0-alpha → 2.8.0-beta

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

Files changed (132) hide show

package/dist/esm/stzh-badge_3.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"stzh-badge.stzh-button.stzh-icon.entry.js","mappings":";;;;AAAA,MAAM,YAAY,GAAG,4oDAA4oD;;MCeppD,SAAS;;;iBAEI,EAAE;gBAG4D,SAAS;;EAE/F,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,YAAY,EAAE,IAAI;MAClB,CAAC,oBAAoB,IAAI,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI;KAC/C,CAAC;IAEF,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,OAAO,IAChB,IAAI,CAAC,KAAK,CACP,CACD,EACP;GACH;;;;ACnCH,MAAM,aAAa,GAAG,wmZAAwmZ;;MC8BjnZ,UAAU;;;;;;IA+Hb,mBAAc,GAAY,KAAK,CAAC;IAEhC,YAAO,GAAG,CAAC,KAAiB;MAClC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC;MAClC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QACnB,SAAS,EAAE,aAAa;QACxB,aAAa,EAAE,KAAK;QACpB,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,OAAO,EAAE,IAAI,CAAC,OAAO;OACtB,CAAC,CAAC;KACJ,CAAA;IAEO,gBAAW,GAAG;MACpB,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;QACxB,IAAI,CAAC,QAAQ,EAAE,CAAC;OACjB;MAED,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;KAC7B,CAAA;IAEO,YAAO,GAAG,CAAC,KAAiB;MAClC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;MAE3B,MAAM,UAAU,GAAG,IAAI,UAAU,CAAC,OAAO,EAAE;QACzC,IAAI,EAAE,MAAM;QACZ,OAAO,EAAE,KAAK;QACd,UAAU,EAAE,KAAK;OAClB,CAAC,CAAC;MAEH,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;MACvC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;QAClB,SAAS,EAAE,aAAa;QACxB,aAAa,EAAE,KAAK;OACrB,CAAC,CAAC;KACJ,CAAA;IAEO,WAAM,GAAG,CAAC,KAAiB;MACjC,MAAM,SAAS,GAAG,IAAI,UAAU,CAAC,MAAM,EAAE;QACvC,IAAI,EAAE,MAAM;QACZ,OAAO,EAAE,KAAK;QACd,UAAU,EAAE,KAAK;OAClB,CAAC,CAAC;MAEH,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;MACtC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;QACjB,SAAS,EAAE,aAAa;QACxB,aAAa,EAAE,KAAK;OACrB,CAAC,CAAC;KACJ,CAAA;IAEO,YAAO,GAAG,CAAC,KAAiB;MAClC,IAAI,IAAI,CAAC,QAAQ,EAAE;QACjB,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,KAAK,CAAC,cAAc,EAAE,CAAC;OACxB;KACF,CAAA;;iBAjLuB,EAAE;qBAGiE,SAAS;yBAGxC,QAAQ;sBAGrB,KAAK;qBAGN,KAAK;mBAGP,KAAK;oBAGJ,KAAK;gBAGY,SAAS;qBAGyB,SAAS;mBAGtB,SAAS;gBAGrE,EAAE;wBAGiC,MAAM;mBAGL,KAAK;gBAGxB,EAAE;iBAGD,EAAE;gBAGpB,EAAE;;kBAMA,EAAE;;gBAM6B,QAAQ;oBAGnB,KAAK;kBAGP,KAAK;iBAGxB,EAAE;kBAGU,SAAS;oBAGA,KAAK;;;2BASiB,EAAE;;;;;;;;EAyBrE,MAAM,QAAQ;IACZ,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;GACrB;EAuEO,UAAU,CAAC,QAAiB;IAClC,QACE,WAAK,KAAK,EAAC,2BAA2B,IACnC,IAAI,CAAC,IAAI;MACR,iBAAW,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAc;;QAElE,YAAM,IAAI,EAAC,MAAM,GAAQ,EAE1B,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,UAAU,KAAK,IAAI,CAAC,aAAa,KAAK,MAAM,IAAI,QAAQ;MAC3E,kBAAY,KAAK,EAAC,oBAAoB,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,SAAS,GAAe,CAE3F,EACN;GACH;EAEO,aAAa;IACnB,QACE,WAAK,KAAK,EAAC,mBAAmB,IAC3B,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,UAAU,CAAC,IAAI,WAAK,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,iBAAiB,CAAO,EACnI,IAAI,CAAC,QAAQ,IAAI,WAAK,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,iBAAiB,CAAO,EACxG,WAAK,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,IAAI,GAAG,EAAoB,CAAC,IAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,eAAa,CAAO,CACjG,EACN;GACH;EAEO,WAAW,CAAC,QAAiB;IACnC,QACE,EAAC,QAAQ,QACP,WACE,KAAK,EAAC,oBAAoB,EAC1B,OAAO,EAAE,IAAI,CAAC,OAAO,IAEpB,IAAI,CAAC,IAAI,KAAK,OAAO;MACpB,WAAK,KAAK,EAAC,mBAAmB,IAC5B,WAAK,KAAK,EAAC,oBAAoB,GAAO,CAClC,EAEP,IAAI,CAAC,YAAY,KAAK,MAAM,IAAI,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,EACzD,IAAI,CAAC,aAAa,EAAE,EACpB,IAAI,CAAC,YAAY,KAAK,OAAO,IAAI,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,CACvD,EACL,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,UAAU,MAAM,IAAI,CAAC,aAAa,KAAK,QAAQ,IAAI,CAAC,QAAQ,CAAC;MAChF,kBACE,KAAK,EAAC,oBAAoB,EAC1B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,SAAS,EACpB,OAAO,EAAE,IAAI,CAAC,OAAO,GACT,CAEP,EACX;GACH;EAED,MAAM,iBAAiB;IACrB,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;MACtB,IAAI,CAAC,YAAY,GAAG,MAAM,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;KACrE;GACF;EAED,kBAAkB;IAChB,qBAAqB,CAAC;MACpB,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,aAAa,EAAE,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;KAClF,CAAC,CAAC;GACJ;EAED,MAAM;IACJ,MAAM,QAAQ,GAAY,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;IACvE,MAAM,OAAO,GAAG;MACd,aAAa,EAAE,IAAI;MACnB,uBAAuB,EAAE,QAAQ;MACjC,4BAA4B,EAAE,IAAI,CAAC,QAAQ;MAC3C,wBAAwB,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK;MACtC,0BAA0B,EAAE,IAAI,CAAC,QAAQ;MACzC,yBAAyB,EAAE,IAAI,CAAC,OAAO;MACvC,2BAA2B,EAAE,IAAI,CAAC,SAAS;MAC3C,0BAA0B,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,YAAY;MAC9D,wBAAwB,EAAE,IAAI,CAAC,MAAM;MACrC,CAAC,uBAAuB,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,MAAM;MACrD,CAAC,+BAA+B,IAAI,CAAC,aAAa,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,aAAa;MAC3E,CAAC,sBAAsB,IAAI,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,SAAS;MAC1D,CAAC,qBAAqB,IAAI,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI;MAC/C,CAAC,qBAAqB,IAAI,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI;MAC/C,CAAC,gBAAgB,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;KACjD,CAAC;IAEF,QACE,EAAC,IAAI,IAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW,IACnE,IAAI,CAAC,IAAI;MACR,SACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,MAAM,GAAG,EAAuB,CAAC,EACpD,IAAI,EAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,IAAI,CAAC,IAAI,EACtC,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,OAAO,gBACF,IAAI,CAAC,SAAS,sBACR,IAAI,CAAC,eAAe,mBACvB,OAAO,IAAI,CAAC,YAAY,KAAK,WAAW;aAClD,IAAI,CAAC,YAAY,GAAG,MAAM,GAAG,OAAO,IAAI,IAAI,mBAClC,OAAO,IAAI,CAAC,YAAY,KAAK,WAAW;aAClD,IAAI,CAAC,YAAY,GAAG,MAAM,GAAG,OAAO,IAAI,IAAI,mBAClC,IAAI,CAAC,YAAY,EAChC,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,IAEpB,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CACzB;;QAEJ,IAAI,CAAC,IAAI,KAAK,OAAO;UACnB,aACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,MAAM,GAAG,EAAsB,CAAC,EACnD,KAAK,EAAE,OAAO,EACd,OAAO,EAAE,IAAI,CAAC,OAAO,IAErB,aACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,KAAK,GAAG,EAAsB,CAAC,EAClD,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,oBAAoB,EAC1B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,gBACX,IAAI,CAAC,SAAS,sBACR,IAAI,CAAC,eAAe,mBACvB,OAAO,IAAI,CAAC,YAAY,KAAK,WAAW;iBAClD,IAAI,CAAC,YAAY,GAAG,MAAM,GAAG,OAAO,IAAI,IAAI,mBAClC,OAAO,IAAI,CAAC,YAAY,KAAK,WAAW;iBAClD,IAAI,CAAC,YAAY,GAAG,MAAM,GAAG,OAAO,IAAI,IAAI,mBAClC,IAAI,CAAC,YAAY,EAChC,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,GACrB,EACD,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CACrB;;YAER,cACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,MAAM,GAAG,EAAuB,CAAC,EACpD,KAAK,EAAE,OAAO,EACd,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,gBACX,IAAI,CAAC,SAAS,sBACR,IAAI,CAAC,eAAe,mBACvB,OAAO,IAAI,CAAC,YAAY,KAAK,WAAW;mBAClD,IAAI,CAAC,YAAY,GAAG,MAAM,GAAG,OAAO,IAAI,IAAI,mBAClC,OAAO,IAAI,CAAC,YAAY,KAAK,WAAW;mBAClD,IAAI,CAAC,YAAY,GAAG,MAAM,GAAG,OAAO,IAAI,IAAI,mBAClC,IAAI,CAAC,YAAY,EAChC,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,IAEpB,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CACpB,CAER,EACP;GACH;;;;;AC3XH,MAAM,WAAW,GAAG,m0BAAm0B;;ACOv1B,IAAI,WAAW,GAAG,CAAC,CAAC;MAOP,QAAQ;;;gBAKI,EAAE;qBAM8B,EAAE;;EAIzD,iBAAiB;IACf,IAAI,CAAC,MAAM,GAAG,aAAa,WAAW,EAAE,EAAE,CAAC;GAC5C;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACF,IAAI,CAAC,IAAI;MACR,WACE,KAAK,EAAC,WAAW,EACjB,IAAI,EAAE,IAAI,CAAC,SAAS,GAAG,KAAK,GAAG,cAAc,iBAChC,IAAI,CAAC,SAAS,GAAG,IAAI,GAAG,MAAM,EAC3C,SAAS,EAAE,IAAI,CAAC,SAAS,GAAG,MAAM,GAAG,OAAO,qBAC3B,IAAI,CAAC,SAAS,GAAG,GAAG,IAAI,CAAC,MAAM,QAAQ,GAAG,IAAI,IAE9D,IAAI,CAAC,SAAS;QACb,aAAO,EAAE,EAAE,GAAG,IAAI,CAAC,MAAM,QAAQ,IAC9B,IAAI,CAAC,SAAS,CACT,EAEV,WAAK,IAAI,EAAE,cAAc,IAAI,CAAC,IAAI,EAAE,GAAQ,CACxC,CAEH,EACP;GACH;;;;;;","names":[],"sources":["./src/components/stzh-badge/stzh-badge.scss?tag=stzh-badge&encapsulation=scoped","./src/components/stzh-badge/stzh-badge.tsx","./src/components/stzh-button/stzh-button.scss?tag=stzh-button&encapsulation=scoped","./src/components/stzh-button/stzh-button.tsx","./src/components/stzh-icon/stzh-icon.scss?tag=stzh-icon&encapsulation=scoped","./src/components/stzh-icon/stzh-icon.tsx"],"sourcesContent":[":host {\n --color: #{$colorWhite};\n --background-color: #{$baseColor};\n display: inline-flex;\n\n &[type=\"success\"] {\n --background-color: #{$colorTruegreen};\n }\n\n &[type=\"warning\"] {\n --color: #{$colorGrey87};\n --background-color: #{$colorWarning};\n }\n\n &[type=\"error\"] {\n --background-color: #{$colorError};\n }\n\n &[type=\"info\"] {\n --background-color: #{$colorZueriblue};\n }\n}\n\n.stzh-badge {\n @include badge;\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n} from \"@stencil/core\";\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: \"default\" \| \"success\" \| \"warning\" \| \"error\" \| \"info\" = \"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>\n <div class={classes}>\n {this.label}\n </div>\n </Host>\n );\n }\n}\n",":host {\n --color: #{$colorWhite};\n --background-color: #{$colorPrimary};\n --border-width: 1px;\n --border-color: #{$colorPrimary};\n --border-radius: #{$buttonBorderRadius};\n --height: #{$formInputHeight};\n --icon-size: #{iconSize('small')};\n --icon-text-margin: #{space('small')};\n --badge-icon-text-margin: calc(var(--icon-text-margin) + #{space('xxsmall')});\n --padding: calc(#{space('xsmall')} - 1px) #{space('xlarge')};\n --white-space: normal;\n --border-radius: #{$buttonBorderRadius};\n\n --hover-color: #{$colorWhite};\n --hover-background-color: #{$colorPrimaryHover};\n --hover-border-color: #{$colorPrimaryHover};\n\n --floating-position: sticky;\n --floating-float: right;\n --floating-bottom: #{space('medium')};\n --floating-right: #{space('medium')};\n\n display: inline-block;\n\n @include mq($from: small) {\n --floating-bottom: #{space('xlarge')};\n --floating-right: #{space('xlarge')};\n }\n\n &[fullwidth]:not([fullwidth=\"false\"]) {\n width: 100%;\n display: block;\n }\n\n &[rounded]:not([rounded=\"false\"]) {\n --border-radius: var(--height);\n }\n\n &[floating]:not([floating=\"false\"]) {\n position: var(--floating-position);\n bottom: var(--floating-bottom);\n right: var(--floating-right);\n float: var(--floating-float);\n }\n\n &[size=\"small\"] {\n --height: #{$formInputHeightSmall};\n }\n\n &[size=\"tiny\"] {\n --height: #{$formInputHeightTiny};\n --icon-text-margin: #{space('xsmall')};\n --padding: calc(#{space('xxsmall')} - 1px) #{space('medium')};\n }\n\n &[variant=\"secondary\"] {\n --color: #{$colorPrimary};\n --background-color: #{$colorWhite};\n --border-color: #{$colorPrimary60op};\n }\n\n &[variant=\"input\"] {\n --color: #{$formColor};\n --background-color: transparent;\n --border-color: #{$formBorderColor};\n\n --hover-color: #{$colorPrimaryHover};\n --hover-background-color: transparent;\n --hover-border-color: #{$colorPrimaryHover};\n }\n\n &[variant=\"tertiary\"] {\n --color: #{$colorPrimary};\n --background-color: transparent;\n --border-color: transparent;\n\n --hover-color: #{$colorPrimaryHover};\n --hover-background-color: #{$buttonTextHoverBackground};\n --hover-border-color: transparent;\n }\n\n &[active]:not([active=\"false\"]) {\n --color: #{$colorWhite};\n --background-color: #{$colorPrimaryHover};\n --border-color: #{$colorPrimaryHover};\n\n --hover-color: #{$colorWhite};\n --hover-background-color: #{$colorPrimaryHover};\n --hover-border-color: #{$colorPrimaryHover};\n }\n\n &[disabled]:not([disabled=\"false\"]),\n &[a11y-disabled]:not([a11y-disabled=\"false\"]) {\n --border-color: #{$colorGrey13};\n --background-color: #{$colorGrey13};\n\n --hover-border-color: #{$colorGrey13};\n --hover-background-color: #{$colorGrey13};\n }\n\n &[disabled]:not([disabled=\"false\"])[variant=\"secondary\"],\n &[disabled]:not([disabled=\"false\"])[variant=\"input\"],\n &[disabled]:not([disabled=\"false\"])[variant=\"tertiary\"],\n &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"secondary\"],\n &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"input\"],\n &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"tertiary\"] {\n --color: #{$colorGrey25};\n --border-color: #{$colorGrey13};\n --background-color: transparent;\n\n --hover-color: #{$colorGrey25};\n --hover-border-color: #{$colorGrey13};\n --hover-background-color: transparent;\n }\n}\n\n@keyframes stzh-button-effect-cta {\n\t0%,\n\t20%,\n\t50%,\n\t80%,\n\t100% {\n\t\ttransform: translateX(0);\n\t}\n\n\t40% {\n\t\ttransform: translateX(-8px);\n\t}\n\n\t60% {\n\t\ttransform: translateX(-4px);\n\t}\n}\n\n:host ::slotted(stzh-icon),\n.stzh-button__icon {\n --size: var(--icon-size);\n}\n\n.stzh-button {\n @include fontSize('milli');\n line-height: 1.25;\n font-family: inherit;\n position: relative;\n z-index: 0;\n overflow: visible;\n display: flex;\n align-items: center;\n justify-content: stretch;\n appearance: none;\n color: var(--color);\n padding: var(--padding);\n background-color: var(--background-color);\n transition-duration: $baseTransitionAnimationSpeed;\n transition-property: color, background-color, border-color;\n border-style: solid;\n border-width: var(--border-width);\n border-color: var(--border-color);\n cursor: pointer;\n text-decoration-line: none;\n width: 100%;\n min-width: var(--height);\n min-height: var(--height);\n border-radius: var(--border-radius);\n text-align: left;\n\n &:hover {\n border-color: var(--hover-border-color);\n background-color: var(--hover-background-color);\n color: var(--hover-color);\n }\n\n &__vhidden {\n @include visuallyhidden;\n }\n\n &__inner {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-grow: 1;\n }\n\n &__icon-wrapper {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: auto;\n height: 1em;\n }\n\n &__text {\n @include wordWrap;\n white-space: var(--white-space);\n text-align: center;\n }\n\n &__icon-wrapper:not(:empty) + &__text:not(:empty),\n &__text:not(:empty) + &__icon-wrapper:not(:empty) {\n margin-left: var(--icon-text-margin);\n }\n\n &__badge {\n position: absolute;\n z-index: 1;\n top: 0;\n right: 0;\n }\n\n &__input {\n @include visuallyhiddenInput;\n }\n\n &__mark {\n @include radio__mark();\n width: 20px;\n height: 20px;\n margin-right: space('xsmall');\n border-color: currentColor;\n }\n\n &__check {\n @include radio__check();\n }\n\n / Hover / Focus / Checked / Disabled of Radio Type /\n\n &__input:checked:hover ~ &__inner &__mark &__check,\n &__input:checked:focus ~ &__inner &__mark &__check {\n color: $colorPrimaryHover;\n }\n\n &:hover &__mark,\n &__input:focus:hover ~ &__inner &__mark,\n &__input:checked:hover ~ &__inner &__mark,\n &__input:checked:focus ~ &__inner &__mark {\n border-color: $colorPrimaryHover;\n }\n\n &__input:focus ~ &__inner &__mark,\n &__input:checked ~ &__inner &__mark {\n border-color: $colorPrimary;\n }\n\n &__input:checked ~ &__inner &__mark &__check {\n opacity: 1;\n }\n\n &--is-disabled &__input ~ &__inner &__mark &__check {\n color: $formDisabledColor;\n }\n\n &--is-disabled &__input ~ &__inner &__mark {\n border-color: $formDisabledBorderColor;\n }\n\n &--is-disabled &__mark {\n background-color: $formDisabledBackgroundColor;\n }\n\n / Size variants /\n\n &--size-small,\n &--size-tiny {\n @include fontSize('micro');\n }\n\n / Floating /\n\n &--is-floating {\n box-shadow: $boxShadowOverlay;\n }\n\n / Badge positioning variants /\n\n &--badge-position-button &__icon-wrapper {\n position: static;\n }\n\n &__badge,\n &--badge-position-button &__badge {\n top: calc(#{space('xsmall')} -1);\n right: calc(#{space('xsmall')} * -1);\n }\n\n &--badge-position-icon#{&}--has-icon &__icon-wrapper {\n position: relative;\n }\n\n &--badge-position-icon#{&}--has-icon &__badge {\n top: calc(#{space('xsmall')} * -1);\n right: calc(#{space('small')} * -1);\n }\n\n &--badge-position-icon#{&}--has-icon#{&}--has-badge &__icon-wrapper:not(:empty) + &__text:not(:empty),\n &--badge-position-icon#{&}--has-icon#{&}--has-badge &__text:not(:empty) + &__icon-wrapper:not(:empty) {\n margin-left: var(--badge-icon-text-margin);\n }\n\n /* Variant if button only has icon /\n\n &--has-icon-only {\n width: var(--height);\n height: var(--height);\n padding: 0;\n }\n\n &--has-icon-only &__text {\n @include visuallyhidden;\n }\n\n / Effect /\n\n &--effect-cta:hover &__icon-wrapper {\n\t\tanimation: stzh-button-effect-cta 1s;\n }\n\n / Alignment variants /\n\n &--align-left &__inner {\n justify-content: flex-start;\n }\n\n &--align-right &__inner {\n justify-content: flex-end;\n }\n\n &--align-center &__inner {\n justify-content: center;\n }\n\n &--align-space-between &__inner {\n justify-content: space-between;\n }\n\n / Disabled variant /\n\n &--is-disabled {\n cursor: not-allowed;\n }\n}\n","import {\n Component,\n Host,\n Method,\n Fragment,\n Element,\n h,\n Prop,\n Event,\n EventEmitter\n} from \"@stencil/core\";\n\nimport {\n StzhButtonFocusEvent,\n StzhButtonBlurEvent,\n StzhButtonChangeEvent\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { fetchTranslations, 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: \"default\" \| \"success\" \| \"warning\" \| \"error\" \| \"info\" = \"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 /* Whether the button is floating /\n @Prop({ reflect: true }) floating: boolean = false;\n\n /* Size variant /\n @Prop({ reflect: true }) size: \"default\" \| \"small\" \| \"tiny\" = \"default\";\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: \"default\" \| \"secondary\" \| \"input\" \| \"tertiary\" = \"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 /* The name of the input element (if type is radio) /\n @Prop({ reflect: true }) name: string = \"\";\n\n /* The value of the input element (if type is 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 /* Access key of link (usually a number e.g. 1) /\n @Prop() linkAccesskey: string;\n\n /* Accessible label for screen readers to replace visible text /\n @Prop({ attribute: \"a11y-label\" }) a11yLabel: string;\n\n /* Id for element which describes the 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 /* 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 /* Focus button /\n @Method()\n async setFocus() {\n this.button.focus();\n }\n\n /* Focus event /\n @Event() stzhFocus: EventEmitter<StzhButtonFocusEvent>;\n\n /* Input blur event /\n @Event() stzhBlur: EventEmitter<StzhButtonBlurEvent>;\n\n /* Change event (only called if type is radio) /\n @Event() stzhChange: EventEmitter<StzhButtonChangeEvent>;\n\n private button: HTMLButtonElement \| HTMLAnchorElement \| HTMLLabelElement;\n private input: HTMLInputElement;\n private text: HTMLDivElement;\n private focusedByInput: boolean = false;\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.setFocus();\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 }\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 <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 class=\"stzh-button__text\">\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 <div ref={(el) => (this.text = el as HTMLDivElement)}>{this.label ? this.label : <slot></slot>}</div>\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 if (!this.localization) {\n this.localization = await 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-floating\": this.floating,\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--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--size-${this.size}`]: !!this.size,\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}\n aria-describedby={this.a11yDescribedby}\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}\n accessKey={this.linkAccesskey}\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 checked={this.checked}\n disabled={this.disabled}\n aria-label={this.a11yLabel}\n aria-describedby={this.a11yDescribedby}\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}\n accessKey={this.linkAccesskey}\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 disabled={this.disabled}\n aria-label={this.a11yLabel}\n aria-describedby={this.a11yDescribedby}\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}\n accessKey={this.linkAccesskey}\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",":host {\n --size: #{iconSize()};\n\n display: inline-flex;\n justify-content: center;\n align-items: center;\n color: currentColor;\n vertical-align: text-top;\n}\n\n.stzh-icon {\n width: var(--size);\n height: var(--size);\n}\n","import {\n Component,\n Host,\n h,\n Prop\n} from \"@stencil/core\";\n\nlet iconCounter = 0;\n\n@Component({\n tag: \"stzh-icon\",\n styleUrl: \"stzh-icon.scss\",\n scoped: true\n})\nexport class StzhIcon {\n /\n Icon which should be displayed\n * See the [icon overview](stzh-components/assets/svgsprites/symbol/sprite.symbol.html) for a list of all available icons.\n /\n @Prop() name: string = \"\";\n\n /\n Hidden icon title for screenreader\n * (usually not needed when e.g. inside links or buttons that have text)\n */\n @Prop({ attribute: 'a11y-title' }) a11yTitle: string = \"\";\n\n private iconId: string;\n\n componentWillLoad() {\n this.iconId = `stzh-icon-${iconCounter++}`;\n }\n\n render() {\n return (\n <Host>\n {this.name &&\n <svg\n class=\"stzh-icon\"\n role={this.a11yTitle ? 'img' : 'presentation'}\n aria-hidden={this.a11yTitle ? null : 'true'}\n focusable={this.a11yTitle ? 'true' : 'false'}\n aria-labelledby={this.a11yTitle ? `${this.iconId}-title` : null}\n >\n {this.a11yTitle &&\n <title id={`${this.iconId}-title`}>\n {this.a11yTitle}\n </title>\n }\n <use href={`#stzh-icon-${this.name}`}></use>\n </svg>\n }\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"stzh-badge.stzh-button.stzh-icon.entry.js","mappings":"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","names":[],"sources":["./src/components/stzh-badge/stzh-badge.scss?tag=stzh-badge&encapsulation=scoped","./src/components/stzh-badge/stzh-badge.tsx","./src/components/stzh-button/stzh-button.scss?tag=stzh-button&encapsulation=scoped","./src/components/stzh-button/stzh-button.tsx","./src/components/stzh-icon/stzh-icon.scss?tag=stzh-icon&encapsulation=scoped","./src/components/stzh-icon/stzh-icon.tsx"],"sourcesContent":[":host {\n --color: #{$colorWhite};\n --background-color: #{$baseColor};\n display: inline-flex;\n\n &[type=\"success\"] {\n --background-color: #{$colorTruegreen};\n }\n\n &[type=\"warning\"] {\n --color: #{$colorGrey87};\n --background-color: #{$colorWarning};\n }\n\n &[type=\"error\"] {\n --background-color: #{$colorError};\n }\n\n &[type=\"info\"] {\n --background-color: #{$colorZueriblue};\n }\n}\n\n.stzh-badge {\n @include badge;\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n} from \"@stencil/core\";\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: \"default\" \| \"success\" \| \"warning\" \| \"error\" \| \"info\" = \"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>\n <div class={classes}>\n {this.label}\n </div>\n </Host>\n );\n }\n}\n",":host {\n --color: #{$colorWhite};\n --background-color: #{$colorPrimary};\n --border-width: 1px;\n --border-color: #{$colorPrimary};\n --border-radius: #{$buttonBorderRadius};\n --height: #{$formInputHeight};\n --icon-size: #{iconSize('small')};\n --icon-text-margin: #{space('small')};\n --badge-icon-text-margin: calc(var(--icon-text-margin) + #{space('xxsmall')});\n --padding: calc(#{space('xsmall')} - 1px) #{space('xlarge')};\n --white-space: normal;\n --border-radius: #{$buttonBorderRadius};\n\n --hover-color: #{$colorWhite};\n --hover-background-color: #{$colorPrimaryHover};\n --hover-border-color: #{$colorPrimaryHover};\n\n --floating-position: sticky;\n --floating-float: right;\n --floating-bottom: #{space('medium')};\n --floating-right: #{space('medium')};\n\n display: inline-block;\n\n @include mq($from: small) {\n --floating-bottom: #{space('xlarge')};\n --floating-right: #{space('xlarge')};\n }\n\n &[fullwidth]:not([fullwidth=\"false\"]) {\n width: 100%;\n display: block;\n }\n\n &[rounded]:not([rounded=\"false\"]) {\n --border-radius: var(--height);\n }\n\n &[floating]:not([floating=\"false\"]) {\n position: var(--floating-position);\n bottom: var(--floating-bottom);\n right: var(--floating-right);\n float: var(--floating-float);\n }\n\n &[size=\"small\"] {\n --height: #{$formInputHeightSmall};\n }\n\n &[size=\"tiny\"] {\n --height: #{$formInputHeightTiny};\n --icon-text-margin: #{space('xsmall')};\n --padding: calc(#{space('xxsmall')} - 1px) #{space('medium')};\n }\n\n &[variant=\"secondary\"] {\n --color: #{$colorPrimary};\n --background-color: #{$colorWhite};\n --border-color: #{$colorPrimary60op};\n }\n\n &[variant=\"input\"] {\n --color: #{$formColor};\n --background-color: transparent;\n --border-color: #{$formBorderColor};\n\n --hover-color: #{$colorPrimaryHover};\n --hover-background-color: transparent;\n --hover-border-color: #{$colorPrimaryHover};\n }\n\n &[variant=\"tertiary\"] {\n --color: #{$colorPrimary};\n --background-color: transparent;\n --border-color: transparent;\n\n --hover-color: #{$colorPrimaryHover};\n --hover-background-color: #{$buttonTextHoverBackground};\n --hover-border-color: transparent;\n }\n\n &[active]:not([active=\"false\"]) {\n --color: #{$colorWhite};\n --background-color: #{$colorPrimaryHover};\n --border-color: #{$colorPrimaryHover};\n\n --hover-color: #{$colorWhite};\n --hover-background-color: #{$colorPrimaryHover};\n --hover-border-color: #{$colorPrimaryHover};\n }\n\n &[disabled]:not([disabled=\"false\"]),\n &[a11y-disabled]:not([a11y-disabled=\"false\"]) {\n --border-color: #{$colorGrey13};\n --background-color: #{$colorGrey13};\n\n --hover-border-color: #{$colorGrey13};\n --hover-background-color: #{$colorGrey13};\n }\n\n &[disabled]:not([disabled=\"false\"])[variant=\"secondary\"],\n &[disabled]:not([disabled=\"false\"])[variant=\"input\"],\n &[disabled]:not([disabled=\"false\"])[variant=\"tertiary\"],\n &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"secondary\"],\n &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"input\"],\n &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"tertiary\"] {\n --color: #{$colorGrey25};\n --border-color: #{$colorGrey13};\n --background-color: transparent;\n\n --hover-color: #{$colorGrey25};\n --hover-border-color: #{$colorGrey13};\n --hover-background-color: transparent;\n }\n}\n\n@keyframes stzh-button-effect-cta {\n\t0%,\n\t20%,\n\t50%,\n\t80%,\n\t100% {\n\t\ttransform: translateX(0);\n\t}\n\n\t40% {\n\t\ttransform: translateX(-8px);\n\t}\n\n\t60% {\n\t\ttransform: translateX(-4px);\n\t}\n}\n\n:host ::slotted(stzh-icon),\n.stzh-button__icon {\n --size: var(--icon-size);\n}\n\n.stzh-button {\n @include fontSize('milli');\n line-height: 1.25;\n font-family: inherit;\n position: relative;\n z-index: 0;\n overflow: visible;\n display: flex;\n align-items: center;\n justify-content: stretch;\n appearance: none;\n color: var(--color);\n padding: var(--padding);\n background-color: var(--background-color);\n transition-duration: $baseTransitionAnimationSpeed;\n transition-property: color, background-color, border-color;\n border-style: solid;\n border-width: var(--border-width);\n border-color: var(--border-color);\n cursor: pointer;\n text-decoration-line: none;\n width: 100%;\n min-width: var(--height);\n min-height: var(--height);\n border-radius: var(--border-radius);\n text-align: left;\n\n &:hover {\n border-color: var(--hover-border-color);\n background-color: var(--hover-background-color);\n color: var(--hover-color);\n }\n\n &__vhidden {\n @include visuallyhidden;\n }\n\n &__inner {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-grow: 1;\n }\n\n &__icon-wrapper {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: auto;\n height: 1em;\n }\n\n &__text {\n @include wordWrap;\n white-space: var(--white-space);\n text-align: center;\n }\n\n &__icon-wrapper:not(:empty) + &__text:not(:empty),\n &__text:not(:empty) + &__icon-wrapper:not(:empty) {\n margin-left: var(--icon-text-margin);\n }\n\n &__badge {\n position: absolute;\n z-index: 1;\n top: 0;\n right: 0;\n }\n\n &__input {\n @include visuallyhiddenInput;\n }\n\n &__mark {\n @include radio__mark();\n width: 20px;\n height: 20px;\n margin-right: space('xsmall');\n border-color: currentColor;\n }\n\n &__check {\n @include radio__check();\n }\n\n / Hover / Focus / Checked / Disabled of Radio Type /\n\n &__input:checked:hover ~ &__inner &__mark &__check,\n &__input:checked:focus ~ &__inner &__mark &__check {\n color: $colorPrimaryHover;\n }\n\n &:hover &__mark,\n &__input:focus:hover ~ &__inner &__mark,\n &__input:checked:hover ~ &__inner &__mark,\n &__input:checked:focus ~ &__inner &__mark {\n border-color: $colorPrimaryHover;\n }\n\n &__input:focus ~ &__inner &__mark,\n &__input:checked ~ &__inner &__mark {\n border-color: $colorPrimary;\n }\n\n &__input:checked ~ &__inner &__mark &__check {\n opacity: 1;\n }\n\n &--is-disabled &__input ~ &__inner &__mark &__check {\n color: $formDisabledColor;\n }\n\n &--is-disabled &__input ~ &__inner &__mark {\n border-color: $formDisabledBorderColor;\n }\n\n &--is-disabled &__mark {\n background-color: $formDisabledBackgroundColor;\n }\n\n / Size variants /\n\n &--size-small,\n &--size-tiny {\n @include fontSize('micro');\n }\n\n / Floating /\n\n &--is-floating {\n box-shadow: $boxShadowOverlay;\n }\n\n / Badge positioning variants /\n\n &--badge-position-button &__icon-wrapper {\n position: static;\n }\n\n &__badge,\n &--badge-position-button &__badge {\n top: calc(#{space('xsmall')} -1);\n right: calc(#{space('xsmall')} * -1);\n }\n\n &--badge-position-icon#{&}--has-icon &__icon-wrapper {\n position: relative;\n }\n\n &--badge-position-icon#{&}--has-icon &__badge {\n top: calc(#{space('xsmall')} * -1);\n right: calc(#{space('small')} * -1);\n }\n\n &--badge-position-icon#{&}--has-icon#{&}--has-badge &__icon-wrapper:not(:empty) + &__text:not(:empty),\n &--badge-position-icon#{&}--has-icon#{&}--has-badge &__text:not(:empty) + &__icon-wrapper:not(:empty) {\n margin-left: var(--badge-icon-text-margin);\n }\n\n /* Variant if button only has icon /\n\n &--has-icon-only {\n width: var(--height);\n height: var(--height);\n padding: 0;\n }\n\n &--has-icon-only &__text {\n @include visuallyhidden;\n }\n\n / Effect /\n\n &--effect-cta:hover &__icon-wrapper {\n\t\tanimation: stzh-button-effect-cta 1s;\n }\n\n / Alignment variants /\n\n &--align-left &__inner {\n justify-content: flex-start;\n }\n\n &--align-right &__inner {\n justify-content: flex-end;\n }\n\n &--align-center &__inner {\n justify-content: center;\n }\n\n &--align-space-between &__inner {\n justify-content: space-between;\n }\n\n / Disabled variant /\n\n &--is-disabled {\n cursor: not-allowed;\n }\n}\n","import {\n Component,\n Host,\n Method,\n Fragment,\n Element,\n h,\n Prop,\n Event,\n EventEmitter\n} from \"@stencil/core\";\n\nimport {\n StzhButtonFocusEvent,\n StzhButtonBlurEvent,\n StzhButtonChangeEvent\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { fetchTranslations, 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: \"default\" \| \"success\" \| \"warning\" \| \"error\" \| \"info\" = \"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 /* Whether the button is floating /\n @Prop({ reflect: true }) floating: boolean = false;\n\n /* Size variant /\n @Prop({ reflect: true }) size: \"default\" \| \"small\" \| \"tiny\" = \"default\";\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: \"default\" \| \"secondary\" \| \"input\" \| \"tertiary\" = \"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 /* The name of the input element (if type is radio) /\n @Prop({ reflect: true }) name: string = \"\";\n\n /* The value of the input element (if type is 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 /* Access key of link (usually a number e.g. 1) /\n @Prop() linkAccesskey: string;\n\n /* Accessible label for screen readers to replace visible text /\n @Prop({ attribute: \"a11y-label\" }) a11yLabel: string;\n\n /* Id for element which describes the 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 /* 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 /* Focus button /\n @Method()\n async setFocus() {\n this.button.focus();\n }\n\n /* Focus event /\n @Event() stzhFocus: EventEmitter<StzhButtonFocusEvent>;\n\n /* Input blur event /\n @Event() stzhBlur: EventEmitter<StzhButtonBlurEvent>;\n\n /* Change event (only called if type is radio) /\n @Event() stzhChange: EventEmitter<StzhButtonChangeEvent>;\n\n private button: HTMLButtonElement \| HTMLAnchorElement \| HTMLLabelElement;\n private input: HTMLInputElement;\n private text: HTMLDivElement;\n private focusedByInput: boolean = false;\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.setFocus();\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 }\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 <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 class=\"stzh-button__text\">\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 <div ref={(el) => (this.text = el as HTMLDivElement)}>{this.label ? this.label : <slot></slot>}</div>\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 if (!this.localization) {\n this.localization = await 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-floating\": this.floating,\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--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--size-${this.size}`]: !!this.size,\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 accessKey={this.linkAccesskey}\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 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 accessKey={this.linkAccesskey}\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 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 accessKey={this.linkAccesskey}\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",":host {\n --size: #{iconSize()};\n\n display: inline-flex;\n justify-content: center;\n align-items: center;\n color: currentColor;\n vertical-align: text-top;\n}\n\n.stzh-icon {\n width: var(--size);\n height: var(--size);\n}\n","import {\n Component,\n Host,\n h,\n Prop\n} from \"@stencil/core\";\n\nlet iconCounter = 0;\n\n@Component({\n tag: \"stzh-icon\",\n styleUrl: \"stzh-icon.scss\",\n scoped: true\n})\nexport class StzhIcon {\n /\n Icon which should be displayed\n * See the [icon overview](stzh-components/assets/svgsprites/symbol/sprite.symbol.html) for a list of all available icons.\n /\n @Prop() name: string = \"\";\n\n /\n Hidden icon title for screenreader\n * (usually not needed when e.g. inside links or buttons that have text)\n */\n @Prop({ attribute: 'a11y-title' }) a11yTitle: string = \"\";\n\n private iconId: string;\n\n componentWillLoad() {\n this.iconId = `stzh-icon-${iconCounter++}`;\n }\n\n render() {\n return (\n <Host>\n {this.name &&\n <svg\n class=\"stzh-icon\"\n role={this.a11yTitle ? 'img' : 'presentation'}\n aria-hidden={this.a11yTitle ? null : 'true'}\n focusable={this.a11yTitle ? 'true' : 'false'}\n aria-labelledby={this.a11yTitle ? `${this.iconId}-title` : null}\n >\n {this.a11yTitle &&\n <title id={`${this.iconId}-title`}>\n {this.a11yTitle}\n </title>\n }\n <use href={`#stzh-icon-${this.name}`}></use>\n </svg>\n }\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/stzh-chip_2.entry.js CHANGED Viewed

@@ -109,13 +109,13 @@ const StzhChip = class {
           "stzh-chip__button": true,
           "is-button": !this.nonInteractive && !this.href,
           "is-link": !this.nonInteractive && !!this.href
-        }, href: this.disabled ? null : this.href, target: this.target, tabindex: this.a11yTabindex, "aria-label": this.a11yLabel, "aria-describedby": this.a11yDescribedby, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur }, this.renderInner())
+        }, href: this.disabled ? null : this.href, target: this.target, tabindex: this.a11yTabindex, "aria-label": this.a11yLabel || null, "aria-describedby": this.a11yDescribedby || null, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur }, this.renderInner())
       :
         h(Chip, { ref: (el) => (this.chip = el), class: {
             "stzh-chip__button": true,
             "is-button": !this.nonInteractive && !this.href,
             "is-link": !this.nonInteractive && !!this.href
-          }, disabled: this.disabled, type: "button", tabindex: this.a11yTabindex, "aria-label": this.a11yLabel, "aria-describedby": this.a11yDescribedby, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur }, this.renderInner()))));
+          }, disabled: this.disabled, type: "button", tabindex: this.a11yTabindex, "aria-label": this.a11yLabel || null, "aria-describedby": this.a11yDescribedby || null, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur }, this.renderInner()))));
   }
   get element() { return getElement(this); }
 };

package/dist/esm/stzh-chip_2.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"stzh-chip.stzh-clamp.entry.js","mappings":"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","names":[],"sources":["./src/components/stzh-chip/stzh-chip.scss?tag=stzh-chip&encapsulation=scoped","./src/components/stzh-chip/stzh-chip.tsx","./src/components/stzh-clamp/stzh-clamp.scss?tag=stzh-clamp","./src/components/stzh-clamp/stzh-clamp.tsx"],"sourcesContent":[":host {\n --color: #{$colorPrimary};\n --height: 32px;\n --padding: 0 #{space('medium')};\n --border-color: #{$colorGrey13};\n --border-radius: 16px;\n --remove-color: #{$baseLeadColor};\n --remove-border-radius: 24px;\n --background-color: #{$colorWhite};\n --icon-size: #{iconSize('small')};\n --icon-color: #{$colorPrimary};\n --icon-gap: #{space('xsmall')};\n --counter-color: #{$colorPrimary60op};\n --counter-gap: #{space('xsmall')};\n\n --hover-color: #{$colorPrimaryHover};\n --hover-border-color: var(--border-color);\n --hover-background-color: #{$colorPrimary8};\n --hover-remove-color: var(--hover-color);\n --hover-remove-background-color: var(--hover-background-color);\n --hover-icon-color: #{$colorPrimaryHover};\n --hover-counter-color: #{$colorPrimaryHover};\n\n display: inline-flex;\n\n @include highContrast() {\n --hover-color: Highlight;\n --hover-border: 1px solid Highlight;\n --hover-background-color: Canvas;\n --hover-remove-color: Highlight;\n --hover-remove-background-color: Canvas;\n --hover-icon-color: Highlight;\n --hover-counter-color: Highlight;\n }\n\n &[size=\"large\"] {\n --height: 40px;\n --border-radius: 20px;\n --padding: 0 #{space('xlarge')};\n }\n\n &[size=\"small\"] {\n --height: 24px;\n --icon-size: #{iconSize('xsmall')};\n --counter-gap: #{space('xxsmall')};\n }\n\n &[variant=\"input\"] {\n --border-color: transparent;\n --background-color: #{$colorGrey5};\n\n --hover-border-color: transparent;\n }\n\n &[variant=\"tag\"] {\n --color: #{$baseColor};\n --icon-color: #{$baseColor};\n --counter-color: #{$baseColor};\n --border-color: transparent;\n --background-color: #{$colorBlack8};\n\n --hover-color: #{$baseColor};\n --hover-border-color: transparent;\n --hover-background-color: #{$colorBlack8};\n --hover-icon-color: #{$baseColor};\n --hover-counter-color: #{$baseColor};\n }\n\n &[variant=\"input\"][size=\"small\"] {\n --padding: 0 #{space('small')};\n --icon-gap: #{space('xxsmall')};\n }\n\n &[variant=\"tag\"][size=\"small\"] {\n --padding: 0 #{space('xsmall')};\n --icon-gap: #{space('xxsmall')};\n }\n\n &[type=\"secondary\"] {\n --color: #{$baseLeadColor};\n --counter-color: #{$colorGrey40};\n }\n\n &[type=\"important\"] {\n --color: #{$colorError};\n --icon-color: #{$colorError};\n --counter-color: #{$colorError};\n\n --hover-color: #{$colorError};\n --hover-icon-color: #{$colorError};\n --hover-counter-color: #{$colorError};\n\n @include highContrast() {\n --hover-color: Highlight;\n --hover-icon-color: Highlight;\n --hover-counter-color: Highlight;\n }\n }\n\n &[active]:not([active=\"false\"]) {\n --color: #{$colorWhite};\n --border-color: transparent;\n --remove-color: #{$colorWhite};\n --background-color: #{$colorPrimary};\n --icon-color: #{$colorWhite};\n --counter-color: #{$colorWhite56};\n\n --hover-color: #{$colorWhite};\n --hover-border-color: transparent;\n --hover-background-color: #{$colorPrimaryHover};\n --hover-remove-color: #{$colorWhite};\n --hover-remove-background-color: #{$colorPrimaryHover};\n --hover-icon-color: #{$colorWhite};\n --hover-counter-color: #{$colorWhite56};\n\n @include highContrast() {\n --color: SelectedItem;\n --border-color: SelectedItem;\n --remove-color: SelectedItem;\n --background-color: Canvas;\n --icon-color: SelectedItem;\n --counter-color: SelectedItem;\n\n --hover-color: Highlight;\n --hover-border-color: Highlight;\n --hover-background-color: Canvas;\n --hover-remove-color: Highlight;\n --hover-remove-background-color: Canvas;\n --hover-icon-color: Highlight;\n --hover-counter-color: Highlight;\n }\n }\n\n &[non-interactive]:not([non-interactive=\"false\"]) {\n --hover-color: var(--color);\n --hover-border: var(--border-color);\n --hover-background-color: var(--background-color);\n --hover-icon-color: var(--icon-color);\n --hover-counter-color: var(--counter-color);\n }\n\n &[disabled]:not([disabled=\"false\"]) {\n --color: #{$colorGrey25};\n --border-color: #{$baseBorderColor};\n --remove-color: #{$colorGrey13};\n --background-color: #{$colorWhite};\n --icon-color: #{$colorGrey25};\n --counter-color: #{$colorGrey25};\n\n --hover-color: #{$colorGrey25};\n --hover-border-color: #{$baseBorderColor};\n --hover-background-color: #{$colorWhite};\n --hover-remove-color: #{$colorGrey13};\n --hover-remove-background-color: transparent;\n --hover-icon-color: #{$colorGrey25};\n --hover-counter-color: #{$colorGrey25};\n }\n}\n\n:host ::slotted(stzh-icon),\n.stzh-chip__icon {\n --size: var(--icon-size);\n}\n\n.stzh-chip {\n position: relative;\n\n &__vhidden {\n @include visuallyhidden;\n }\n\n &__button {\n @include fontSize('micro');\n font-family: inherit;\n height: var(--height);\n display: flex;\n flex-direction: row;\n align-items: center;\n border-radius: var(--border-radius);\n padding: var(--padding);\n color: var(--color);\n appearance: none;\n border-width: 1px;\n border-style: solid;\n border-color: var(--border-color);\n background-color: var(--background-color);\n transition-duration: $baseTransitionAnimationSpeed;\n transition-property: color, background-color, border-color;\n text-decoration-line: none;\n\n &.is-button,\n &.is-link {\n cursor: pointer;\n }\n }\n\n &__label {\n text-align: left;\n }\n\n &__icon-wrapper {\n display: flex;\n color: var(--icon-color);\n transition: color $baseTransitionAnimationSpeed;\n flex-shrink: 0;\n\n &:not(:empty) {\n margin-right: var(--icon-gap);\n }\n }\n\n &__counter {\n display: flex;\n font-variant-numeric: tabular-nums;\n margin-left: var(--counter-gap);\n color: var(--counter-color);\n transition: color $baseTransitionAnimationSpeed;\n }\n\n &__remove {\n position: absolute;\n top: 0;\n right: 0;\n appearance: none;\n font-family: inherit;\n border: none;\n background: none;\n padding: 0;\n width: var(--height);\n height: var(--height);\n border-radius: var(--remove-border-radius);\n display: flex;\n justify-content: center;\n align-items: center;\n margin-left: space('xxsmall');\n color: var(--remove-color);\n transition-duration: $baseTransitionAnimationSpeed;\n transition-property: color, background-color, border-color;\n cursor: pointer;\n\n &:hover {\n color: var(--hover-remove-color);\n background-color: var(--hover-remove-background-color);\n }\n }\n\n &__remove-icon {\n --size: #{iconSize('xxsmall')};\n }\n\n &__button:hover,\n &__remove:hover + &__button {\n color: var(--hover-color);\n background-color: var(--hover-background-color);\n border-color: var(--hover-border-color);\n }\n\n &__button:hover &__counter,\n &__remove:hover + &__button &__counter {\n color: var(--hover-counter-color);\n }\n\n &__button:hover &__icon-wrapper,\n &__remove:hover + &__button &__icon-wrapper {\n color: var(--hover-icon-color);\n }\n\n /* Size /\n\n &--size-small &__button {\n @include fontSize('nano');\n }\n\n / Removeable /\n\n &--is-removable &__button {\n padding-right: calc(var(--height) + #{space('xxsmall')});\n }\n\n / Disabled /\n\n &--is-disabled &__button,\n &--is-disabled &__remove {\n cursor: not-allowed;\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Event,\n EventEmitter,\n Element,\n Method,\n Fragment\n} from \"@stencil/core\";\n\nimport {\n StzhChipClickEvent,\n StzhChipRemoveEvent,\n StzhChipFocusEvent,\n StzhChipBlurEvent\n} from \"../../index\";\n\n/\n @slot - Slot for label\n * @slot icon - Slot for icon\n /\n@Component({\n tag: \"stzh-chip\",\n styleUrl: \"stzh-chip.scss\",\n scoped: true\n})\nexport class StzhChip {\n /* Label /\n @Prop() label: string = \"\";\n\n /* Icon (use instead of icon slot) /\n @Prop() icon: string = \"\";\n\n /* `href` if the chip should be used as link /\n @Prop() href: string = \"\";\n\n /* Target if the button is used as link (if `href` used) /\n @Prop() target: string = \"\";\n\n /* Whether chip is not interactive /\n @Prop({ reflect: true }) nonInteractive: boolean = false;\n\n /* Whether remove button should be shown /\n @Prop({ reflect: true }) removable: boolean = false;\n\n /* Variant /\n @Prop({ reflect: true }) variant: \"tag\" \| \"filter\" \| \"input\" = \"tag\";\n\n /* Size /\n @Prop({ reflect: true }) size: \"default\" \| \"small\" \| \"large\" = \"default\";\n\n /* Type /\n @Prop({ reflect: true }) type: \"default\" \| \"secondary\" \| \"important\" = \"default\";\n\n /* Counter /\n @Prop() counter: string = \"\";\n\n /* Label of remove button for screenreaders /\n @Prop() removeLabel: string = \"\";\n\n /* Active /\n @Prop({ reflect: true }) active: boolean = false;\n\n /* Disabled /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* Tabindex of link/button /\n @Prop({ attribute: \"a11y-tabindex\" }) a11yTabindex: string;\n\n /* Accessible label for screen readers to replace visible text /\n @Prop({ attribute: \"a11y-label\" }) a11yLabel: string;\n\n /* Id for element which describes the link/button /\n @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the link/button element.\n * Default value will be taken from `label` prop or default slot.\n /\n @Prop() analyticsId: string;\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the remove button element.\n * Default value will be taken from `removeLabel` prop.\n /\n @Prop() removeAnalyticsId: string;\n\n @Element() element: HTMLStzhChipElement;\n\n /* Focus menu item /\n @Method()\n async setFocus() {\n this.chip.focus();\n }\n\n /* Chip click event /\n @Event() stzhClick: EventEmitter<StzhChipClickEvent>;\n\n /* Chip remove event /\n @Event() stzhRemove: EventEmitter<StzhChipRemoveEvent>;\n\n /* Focus event /\n @Event() stzhFocus: EventEmitter<StzhChipFocusEvent>;\n\n /* Input blur event /\n @Event() stzhBlur: EventEmitter<StzhChipBlurEvent>;\n\n private chip: HTMLButtonElement \| HTMLAnchorElement;\n private text: HTMLElement;\n private focusedByInput: boolean = false;\n\n componentDidRender() {\n requestAnimationFrame(() => {\n this.chip.setAttribute(\"s-object-id\", this.analyticsId \|\| this.text.innerText);\n });\n }\n\n private renderInner(): DocumentFragment {\n return (\n <Fragment>\n <div class=\"stzh-chip__icon-wrapper\">\n {this.icon ?\n <stzh-icon class=\"stzh-chip__icon\" name={this.icon}></stzh-icon>\n :\n <slot name=\"icon\"></slot>\n }\n </div>\n\n <stzh-clamp\n lines={1}\n class=\"stzh-chip__label\"\n ref={(el) => (this.text = el as HTMLElement)}\n >\n {this.label ? this.label : <slot></slot>}\n {this.counter &&\n <span class=\"stzh-chip__vhidden\">\n  ({this.counter})\n </span>\n }\n </stzh-clamp>\n\n {this.counter &&\n <div class=\"stzh-chip__counter\" aria-hidden=\"true\">\n {this.counter}\n </div>\n }\n </Fragment>\n );\n }\n\n private onRootFocus = () => {\n if (!this.focusedByInput) {\n this.setFocus();\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-chip\",\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-chip\",\n originalEvent: event\n });\n }\n\n private onClick = (event: MouseEvent) => {\n this.stzhClick.emit({\n component: \"stzh-chip\",\n originalEvent: event\n });\n }\n\n private onRemoveClick = (event: MouseEvent) => {\n this.stzhRemove.emit({\n component: \"stzh-chip\",\n originalEvent: event\n });\n }\n\n render() {\n const classes = {\n \"stzh-chip\": true,\n \"stzh-chip--is-active\": this.active,\n \"stzh-chip--is-disabled\": this.disabled,\n \"stzh-chip--is-removable\": this.removable,\n \"stzh-chip--has-counter\": !!this.counter,\n [`stzh-chip--type-${this.type}`]: !!this.type,\n [`stzh-chip--size-${this.size}`]: !!this.size,\n [`stzh-chip--${this.variant}`]: !!this.variant\n };\n\n const Chip = this.nonInteractive ? \"div\" :\n this.href ? \"a\" : \"button\";\n\n return (\n <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n <div class={classes}>\n {this.removable &&\n <button\n class=\"stzh-chip__remove\"\n onClick={this.onRemoveClick}\n disabled={this.disabled}\n aria-label={this.removeLabel}\n type=\"button\"\n s-object-id={this.removeAnalyticsId \|\| this.removeLabel}\n >\n <stzh-icon class=\"stzh-chip__remove-icon\" name=\"close\"></stzh-icon>\n </button>\n }\n\n {this.href ?\n <Chip\n ref={(el) => (this.chip = el as HTMLAnchorElement)}\n class={{\n \"stzh-chip__button\": true,\n \"is-button\": !this.nonInteractive && !this.href,\n \"is-link\": !this.nonInteractive && !!this.href\n }}\n href={this.disabled ? null : this.href}\n target={this.target}\n tabindex={this.a11yTabindex}\n aria-label={this.a11yLabel}\n aria-describedby={this.a11yDescribedby}\n onClick={this.onClick}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n >\n {this.renderInner()}\n </Chip>\n :\n <Chip\n ref={(el) => (this.chip = el as HTMLButtonElement)}\n class={{\n \"stzh-chip__button\": true,\n \"is-button\": !this.nonInteractive && !this.href,\n \"is-link\": !this.nonInteractive && !!this.href\n }}\n disabled={this.disabled}\n type=\"button\"\n tabindex={this.a11yTabindex}\n aria-label={this.a11yLabel}\n aria-describedby={this.a11yDescribedby}\n onClick={this.onClick}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n >\n {this.renderInner()}\n </Chip>\n }\n </div>\n </Host>\n );\n }\n}\n","stzh-clamp {\n @include host;\n --current-lines: var(--lines, 0);\n\n @include mq($from: small) {\n --current-lines: var(--lines-small, var(--lines, 0));\n }\n\n @include mq($from: medium) {\n --current-lines: var(--lines-medium, var(--lines-small, var(--lines, 0)));\n }\n\n @include mq($from: large) {\n --current-lines: var(--lines-large, var(--lines-medium, var(--lines-small, var(--lines, 0))));\n }\n\n @include mq($from: ultra) {\n --current-lines: var(--lines-ultra, var(--lines-large, var(--lines-medium, var(--lines-small, var(--lines, 0)))));\n }\n\n width: 100%;\n color: inherit;\n font-family: inherit;\n font-weight: inherit;\n font-style: inherit;\n font-size: inherit;\n line-height: inherit;\n}\n\n.stzh-clamp {\n position: relative;\n\n &__text {\n @include wordWrap;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n overflow: hidden;\n\n & > :first-child {\n margin-top: 0 !important;\n }\n\n & > :last-child {\n margin-bottom: 0 !important;\n }\n\n &.is-clone {\n position: absolute;\n visibility: hidden;\n opacity: 0;\n top: 0;\n left: 0;\n width: 100%;\n }\n }\n\n &__trigger {\n margin-top: space('xxsmall');\n }\n\n &--is-not-expanded &__text,\n &__text.is-clone {\n -webkit-line-clamp: var(--current-lines);\n line-clamp: var(--current-lines);\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Method,\n Element,\n Event,\n EventEmitter\n} from \"@stencil/core\";\n\nimport {\n StzhClampClampEvent,\n StzhClampExpandEvent\n} from \"../../index\";\n\nimport { fetchTranslations } from \"../../utils/translation-utils\";\nimport { StzhClampLocalizedText } from \"./stzh-clamp.localization\";\n\n/\n \n /\n@Component({\n tag: \"stzh-clamp\",\n styleUrl: \"stzh-clamp.scss\"\n})\nexport class StzhClamp {\n /* Translation strings /\n @Prop() localization: StzhClampLocalizedText;\n\n /* Line number /\n @Prop() lines: number = 1;\n /* Line number above small breakpoint /\n @Prop() linesSmall: number = 0;\n /* Line number above medium breakpoint /\n @Prop() linesMedium: number = 0;\n /* Line number above large breakpoint /\n @Prop() linesLarge: number = 0;\n /* Line number above ultra breakpoint /\n @Prop() linesUltra: number = 0;\n\n /* Whether clamping is expanded /\n @Prop() showExpandLink: boolean = false;\n\n /* Whether clamping is expanded /\n @Prop({ mutable: true, reflect: true }) expanded: boolean = false;\n\n /* Whether the text is currently clamped (readonly) /\n @Prop({ mutable: true, reflect: true }) clamped: boolean = false;\n\n @Element() element: HTMLStzhClampElement;\n\n /* Event when clamping state changed /\n @Event() stzhClamp: EventEmitter<StzhClampClampEvent>;\n\n /* Event when expanding state changed */\n @Event() stzhExpand: EventEmitter<StzhClampExpandEvent>;\n\n @Method()\n async update() {\n this.textCloneElement.innerHTML = this.textElement.innerHTML;\n this.updateClamped();\n }\n\n private textElement: HTMLElement;\n private textCloneElement: HTMLElement;\n\n private debounceResize: number;\n private resizeObserver: ResizeObserver;\n private mutationObserver: MutationObserver;\n\n private updateClamped = () => {\n if (!this.textCloneElement) {\n return;\n }\n\n const beforeClamped = this.clamped;\n this.clamped = this.textCloneElement.scrollHeight > this.textCloneElement.clientHeight;\n\n if (beforeClamped !== this.clamped) {\n this.stzhClamp.emit({\n component: \"stzh-clamp\",\n clamped: this.clamped\n });\n }\n }\n\n private handleResize = () => {\n if (this.debounceResize) {\n window.cancelAnimationFrame(this.debounceResize);\n }\n\n this.debounceResize = requestAnimationFrame(this.updateClamped);\n }\n\n private handleMutaton = () => {\n this.update();\n }\n\n private handleExpandClick = () => {\n this.expanded = !this.expanded;\n\n this.stzhExpand.emit({\n component: \"stzh-clamp\",\n expanded: this.expanded\n });\n }\n\n async componentWillLoad() {\n if (!this.localization) {\n this.localization = await fetchTranslations(this.element, \"clamp\");\n }\n }\n\n componentDidLoad() {\n this.mutationObserver = new MutationObserver(this.handleMutaton);\n this.mutationObserver.observe(this.textElement, {\n childList: true,\n subtree: true,\n });\n }\n\n componentDidRender() {\n this.update();\n }\n\n connectedCallback() {\n this.resizeObserver = new ResizeObserver(this.handleResize);\n this.resizeObserver.observe(this.element);\n }\n\n disconnectedCallback() {\n if (this.resizeObserver) {\n this.resizeObserver.disconnect();\n }\n\n if (this.mutationObserver) {\n this.mutationObserver.disconnect();\n }\n }\n\n render() {\n const classes = {\n \"stzh-clamp\": true,\n \"stzh-clamp--is-not-expanded\": !this.expanded\n };\n\n return (\n <Host\n style={{\n '--lines': this.lines ? this.lines.toString() : null,\n '--lines-small': this.linesSmall ? this.linesSmall.toString() : null,\n '--lines-medium': this.linesMedium ? this.linesMedium.toString() : null,\n '--lines-large': this.linesLarge ? this.linesLarge.toString() : null,\n '--lines-ultra': this.linesUltra ? this.linesUltra.toString() : null,\n }}\n >\n <div class={classes}>\n <div\n ref={(el) => (this.textElement = el as HTMLDivElement)}\n class=\"stzh-clamp__text\"\n >\n <slot></slot>\n </div>\n\n <div\n ref={(el) => (this.textCloneElement = el as HTMLDivElement)}\n class=\"stzh-clamp__text is-clone\"\n aria-hidden=\"true\"\n ></div>\n\n {this.showExpandLink && this.clamped &&\n <stzh-link\n class=\"stzh-clamp__trigger\"\n a11yTabindex=\"-1\"\n aria-hidden=\"true\"\n onClick={this.handleExpandClick}\n >\n {!this.expanded ? this.localization.showMore : this.localization.showLess}\n </stzh-link>\n }\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"stzh-chip.stzh-clamp.entry.js","mappings":"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","names":[],"sources":["./src/components/stzh-chip/stzh-chip.scss?tag=stzh-chip&encapsulation=scoped","./src/components/stzh-chip/stzh-chip.tsx","./src/components/stzh-clamp/stzh-clamp.scss?tag=stzh-clamp","./src/components/stzh-clamp/stzh-clamp.tsx"],"sourcesContent":[":host {\n --color: #{$colorPrimary};\n --height: 32px;\n --padding: 0 #{space('medium')};\n --border-color: #{$colorGrey13};\n --border-radius: 16px;\n --remove-color: #{$baseLeadColor};\n --remove-border-radius: 24px;\n --background-color: #{$colorWhite};\n --icon-size: #{iconSize('small')};\n --icon-color: #{$colorPrimary};\n --icon-gap: #{space('xsmall')};\n --counter-color: #{$colorPrimary60op};\n --counter-gap: #{space('xsmall')};\n\n --hover-color: #{$colorPrimaryHover};\n --hover-border-color: var(--border-color);\n --hover-background-color: #{$colorPrimary8};\n --hover-remove-color: var(--hover-color);\n --hover-remove-background-color: var(--hover-background-color);\n --hover-icon-color: #{$colorPrimaryHover};\n --hover-counter-color: #{$colorPrimaryHover};\n\n display: inline-flex;\n\n @include highContrast() {\n --hover-color: Highlight;\n --hover-border: 1px solid Highlight;\n --hover-background-color: Canvas;\n --hover-remove-color: Highlight;\n --hover-remove-background-color: Canvas;\n --hover-icon-color: Highlight;\n --hover-counter-color: Highlight;\n }\n\n &[size=\"large\"] {\n --height: 40px;\n --border-radius: 20px;\n --padding: 0 #{space('xlarge')};\n }\n\n &[size=\"small\"] {\n --height: 24px;\n --icon-size: #{iconSize('xsmall')};\n --counter-gap: #{space('xxsmall')};\n }\n\n &[variant=\"input\"] {\n --border-color: transparent;\n --background-color: #{$colorGrey5};\n\n --hover-border-color: transparent;\n }\n\n &[variant=\"tag\"] {\n --color: #{$baseColor};\n --icon-color: #{$baseColor};\n --counter-color: #{$baseColor};\n --border-color: transparent;\n --background-color: #{$colorBlack8};\n\n --hover-color: #{$baseColor};\n --hover-border-color: transparent;\n --hover-background-color: #{$colorBlack8};\n --hover-icon-color: #{$baseColor};\n --hover-counter-color: #{$baseColor};\n }\n\n &[variant=\"input\"][size=\"small\"] {\n --padding: 0 #{space('small')};\n --icon-gap: #{space('xxsmall')};\n }\n\n &[variant=\"tag\"][size=\"small\"] {\n --padding: 0 #{space('xsmall')};\n --icon-gap: #{space('xxsmall')};\n }\n\n &[type=\"secondary\"] {\n --color: #{$baseLeadColor};\n --counter-color: #{$colorGrey40};\n }\n\n &[type=\"important\"] {\n --color: #{$colorError};\n --icon-color: #{$colorError};\n --counter-color: #{$colorError};\n\n --hover-color: #{$colorError};\n --hover-icon-color: #{$colorError};\n --hover-counter-color: #{$colorError};\n\n @include highContrast() {\n --hover-color: Highlight;\n --hover-icon-color: Highlight;\n --hover-counter-color: Highlight;\n }\n }\n\n &[active]:not([active=\"false\"]) {\n --color: #{$colorWhite};\n --border-color: transparent;\n --remove-color: #{$colorWhite};\n --background-color: #{$colorPrimary};\n --icon-color: #{$colorWhite};\n --counter-color: #{$colorWhite56};\n\n --hover-color: #{$colorWhite};\n --hover-border-color: transparent;\n --hover-background-color: #{$colorPrimaryHover};\n --hover-remove-color: #{$colorWhite};\n --hover-remove-background-color: #{$colorPrimaryHover};\n --hover-icon-color: #{$colorWhite};\n --hover-counter-color: #{$colorWhite56};\n\n @include highContrast() {\n --color: SelectedItem;\n --border-color: SelectedItem;\n --remove-color: SelectedItem;\n --background-color: Canvas;\n --icon-color: SelectedItem;\n --counter-color: SelectedItem;\n\n --hover-color: Highlight;\n --hover-border-color: Highlight;\n --hover-background-color: Canvas;\n --hover-remove-color: Highlight;\n --hover-remove-background-color: Canvas;\n --hover-icon-color: Highlight;\n --hover-counter-color: Highlight;\n }\n }\n\n &[non-interactive]:not([non-interactive=\"false\"]) {\n --hover-color: var(--color);\n --hover-border: var(--border-color);\n --hover-background-color: var(--background-color);\n --hover-icon-color: var(--icon-color);\n --hover-counter-color: var(--counter-color);\n }\n\n &[disabled]:not([disabled=\"false\"]) {\n --color: #{$colorGrey25};\n --border-color: #{$baseBorderColor};\n --remove-color: #{$colorGrey13};\n --background-color: #{$colorWhite};\n --icon-color: #{$colorGrey25};\n --counter-color: #{$colorGrey25};\n\n --hover-color: #{$colorGrey25};\n --hover-border-color: #{$baseBorderColor};\n --hover-background-color: #{$colorWhite};\n --hover-remove-color: #{$colorGrey13};\n --hover-remove-background-color: transparent;\n --hover-icon-color: #{$colorGrey25};\n --hover-counter-color: #{$colorGrey25};\n }\n}\n\n:host ::slotted(stzh-icon),\n.stzh-chip__icon {\n --size: var(--icon-size);\n}\n\n.stzh-chip {\n position: relative;\n\n &__vhidden {\n @include visuallyhidden;\n }\n\n &__button {\n @include fontSize('micro');\n font-family: inherit;\n height: var(--height);\n display: flex;\n flex-direction: row;\n align-items: center;\n border-radius: var(--border-radius);\n padding: var(--padding);\n color: var(--color);\n appearance: none;\n border-width: 1px;\n border-style: solid;\n border-color: var(--border-color);\n background-color: var(--background-color);\n transition-duration: $baseTransitionAnimationSpeed;\n transition-property: color, background-color, border-color;\n text-decoration-line: none;\n\n &.is-button,\n &.is-link {\n cursor: pointer;\n }\n }\n\n &__label {\n text-align: left;\n }\n\n &__icon-wrapper {\n display: flex;\n color: var(--icon-color);\n transition: color $baseTransitionAnimationSpeed;\n flex-shrink: 0;\n\n &:not(:empty) {\n margin-right: var(--icon-gap);\n }\n }\n\n &__counter {\n display: flex;\n font-variant-numeric: tabular-nums;\n margin-left: var(--counter-gap);\n color: var(--counter-color);\n transition: color $baseTransitionAnimationSpeed;\n }\n\n &__remove {\n position: absolute;\n top: 0;\n right: 0;\n appearance: none;\n font-family: inherit;\n border: none;\n background: none;\n padding: 0;\n width: var(--height);\n height: var(--height);\n border-radius: var(--remove-border-radius);\n display: flex;\n justify-content: center;\n align-items: center;\n margin-left: space('xxsmall');\n color: var(--remove-color);\n transition-duration: $baseTransitionAnimationSpeed;\n transition-property: color, background-color, border-color;\n cursor: pointer;\n\n &:hover {\n color: var(--hover-remove-color);\n background-color: var(--hover-remove-background-color);\n }\n }\n\n &__remove-icon {\n --size: #{iconSize('xxsmall')};\n }\n\n &__button:hover,\n &__remove:hover + &__button {\n color: var(--hover-color);\n background-color: var(--hover-background-color);\n border-color: var(--hover-border-color);\n }\n\n &__button:hover &__counter,\n &__remove:hover + &__button &__counter {\n color: var(--hover-counter-color);\n }\n\n &__button:hover &__icon-wrapper,\n &__remove:hover + &__button &__icon-wrapper {\n color: var(--hover-icon-color);\n }\n\n /* Size /\n\n &--size-small &__button {\n @include fontSize('nano');\n }\n\n / Removeable /\n\n &--is-removable &__button {\n padding-right: calc(var(--height) + #{space('xxsmall')});\n }\n\n / Disabled /\n\n &--is-disabled &__button,\n &--is-disabled &__remove {\n cursor: not-allowed;\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Event,\n EventEmitter,\n Element,\n Method,\n Fragment\n} from \"@stencil/core\";\n\nimport {\n StzhChipClickEvent,\n StzhChipRemoveEvent,\n StzhChipFocusEvent,\n StzhChipBlurEvent\n} from \"../../index\";\n\n/\n @slot - Slot for label\n * @slot icon - Slot for icon\n /\n@Component({\n tag: \"stzh-chip\",\n styleUrl: \"stzh-chip.scss\",\n scoped: true\n})\nexport class StzhChip {\n /* Label /\n @Prop() label: string = \"\";\n\n /* Icon (use instead of icon slot) /\n @Prop() icon: string = \"\";\n\n /* `href` if the chip should be used as link /\n @Prop() href: string = \"\";\n\n /* Target if the button is used as link (if `href` used) /\n @Prop() target: string = \"\";\n\n /* Whether chip is not interactive /\n @Prop({ reflect: true }) nonInteractive: boolean = false;\n\n /* Whether remove button should be shown /\n @Prop({ reflect: true }) removable: boolean = false;\n\n /* Variant /\n @Prop({ reflect: true }) variant: \"tag\" \| \"filter\" \| \"input\" = \"tag\";\n\n /* Size /\n @Prop({ reflect: true }) size: \"default\" \| \"small\" \| \"large\" = \"default\";\n\n /* Type /\n @Prop({ reflect: true }) type: \"default\" \| \"secondary\" \| \"important\" = \"default\";\n\n /* Counter /\n @Prop() counter: string = \"\";\n\n /* Label of remove button for screenreaders /\n @Prop() removeLabel: string = \"\";\n\n /* Active /\n @Prop({ reflect: true }) active: boolean = false;\n\n /* Disabled /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* Tabindex of link/button /\n @Prop({ attribute: \"a11y-tabindex\" }) a11yTabindex: string;\n\n /* Accessible label for screen readers to replace visible text /\n @Prop({ attribute: \"a11y-label\" }) a11yLabel: string;\n\n /* Id for element which describes the link/button /\n @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the link/button element.\n * Default value will be taken from `label` prop or default slot.\n /\n @Prop() analyticsId: string;\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the remove button element.\n * Default value will be taken from `removeLabel` prop.\n /\n @Prop() removeAnalyticsId: string;\n\n @Element() element: HTMLStzhChipElement;\n\n /* Focus menu item /\n @Method()\n async setFocus() {\n this.chip.focus();\n }\n\n /* Chip click event /\n @Event() stzhClick: EventEmitter<StzhChipClickEvent>;\n\n /* Chip remove event /\n @Event() stzhRemove: EventEmitter<StzhChipRemoveEvent>;\n\n /* Focus event /\n @Event() stzhFocus: EventEmitter<StzhChipFocusEvent>;\n\n /* Input blur event /\n @Event() stzhBlur: EventEmitter<StzhChipBlurEvent>;\n\n private chip: HTMLButtonElement \| HTMLAnchorElement;\n private text: HTMLElement;\n private focusedByInput: boolean = false;\n\n componentDidRender() {\n requestAnimationFrame(() => {\n this.chip.setAttribute(\"s-object-id\", this.analyticsId \|\| this.text.innerText);\n });\n }\n\n private renderInner(): DocumentFragment {\n return (\n <Fragment>\n <div class=\"stzh-chip__icon-wrapper\">\n {this.icon ?\n <stzh-icon class=\"stzh-chip__icon\" name={this.icon}></stzh-icon>\n :\n <slot name=\"icon\"></slot>\n }\n </div>\n\n <stzh-clamp\n lines={1}\n class=\"stzh-chip__label\"\n ref={(el) => (this.text = el as HTMLElement)}\n >\n {this.label ? this.label : <slot></slot>}\n {this.counter &&\n <span class=\"stzh-chip__vhidden\">\n  ({this.counter})\n </span>\n }\n </stzh-clamp>\n\n {this.counter &&\n <div class=\"stzh-chip__counter\" aria-hidden=\"true\">\n {this.counter}\n </div>\n }\n </Fragment>\n );\n }\n\n private onRootFocus = () => {\n if (!this.focusedByInput) {\n this.setFocus();\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-chip\",\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-chip\",\n originalEvent: event\n });\n }\n\n private onClick = (event: MouseEvent) => {\n this.stzhClick.emit({\n component: \"stzh-chip\",\n originalEvent: event\n });\n }\n\n private onRemoveClick = (event: MouseEvent) => {\n this.stzhRemove.emit({\n component: \"stzh-chip\",\n originalEvent: event\n });\n }\n\n render() {\n const classes = {\n \"stzh-chip\": true,\n \"stzh-chip--is-active\": this.active,\n \"stzh-chip--is-disabled\": this.disabled,\n \"stzh-chip--is-removable\": this.removable,\n \"stzh-chip--has-counter\": !!this.counter,\n [`stzh-chip--type-${this.type}`]: !!this.type,\n [`stzh-chip--size-${this.size}`]: !!this.size,\n [`stzh-chip--${this.variant}`]: !!this.variant\n };\n\n const Chip = this.nonInteractive ? \"div\" :\n this.href ? \"a\" : \"button\";\n\n return (\n <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n <div class={classes}>\n {this.removable &&\n <button\n class=\"stzh-chip__remove\"\n onClick={this.onRemoveClick}\n disabled={this.disabled}\n aria-label={this.removeLabel}\n type=\"button\"\n s-object-id={this.removeAnalyticsId \|\| this.removeLabel}\n >\n <stzh-icon class=\"stzh-chip__remove-icon\" name=\"close\"></stzh-icon>\n </button>\n }\n\n {this.href ?\n <Chip\n ref={(el) => (this.chip = el as HTMLAnchorElement)}\n class={{\n \"stzh-chip__button\": true,\n \"is-button\": !this.nonInteractive && !this.href,\n \"is-link\": !this.nonInteractive && !!this.href\n }}\n href={this.disabled ? null : this.href}\n target={this.target}\n tabindex={this.a11yTabindex}\n aria-label={this.a11yLabel \|\| null}\n aria-describedby={this.a11yDescribedby \|\| null}\n onClick={this.onClick}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n >\n {this.renderInner()}\n </Chip>\n :\n <Chip\n ref={(el) => (this.chip = el as HTMLButtonElement)}\n class={{\n \"stzh-chip__button\": true,\n \"is-button\": !this.nonInteractive && !this.href,\n \"is-link\": !this.nonInteractive && !!this.href\n }}\n disabled={this.disabled}\n type=\"button\"\n tabindex={this.a11yTabindex}\n aria-label={this.a11yLabel \|\| null}\n aria-describedby={this.a11yDescribedby \|\| null}\n onClick={this.onClick}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n >\n {this.renderInner()}\n </Chip>\n }\n </div>\n </Host>\n );\n }\n}\n","stzh-clamp {\n @include host;\n --current-lines: var(--lines, 0);\n\n @include mq($from: small) {\n --current-lines: var(--lines-small, var(--lines, 0));\n }\n\n @include mq($from: medium) {\n --current-lines: var(--lines-medium, var(--lines-small, var(--lines, 0)));\n }\n\n @include mq($from: large) {\n --current-lines: var(--lines-large, var(--lines-medium, var(--lines-small, var(--lines, 0))));\n }\n\n @include mq($from: ultra) {\n --current-lines: var(--lines-ultra, var(--lines-large, var(--lines-medium, var(--lines-small, var(--lines, 0)))));\n }\n\n width: 100%;\n color: inherit;\n font-family: inherit;\n font-weight: inherit;\n font-style: inherit;\n font-size: inherit;\n line-height: inherit;\n}\n\n.stzh-clamp {\n position: relative;\n\n &__text {\n @include wordWrap;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n overflow: hidden;\n\n & > :first-child {\n margin-top: 0 !important;\n }\n\n & > :last-child {\n margin-bottom: 0 !important;\n }\n\n &.is-clone {\n position: absolute;\n visibility: hidden;\n opacity: 0;\n top: 0;\n left: 0;\n width: 100%;\n }\n }\n\n &__trigger {\n margin-top: space('xxsmall');\n }\n\n &--is-not-expanded &__text,\n &__text.is-clone {\n -webkit-line-clamp: var(--current-lines);\n line-clamp: var(--current-lines);\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Method,\n Element,\n Event,\n EventEmitter\n} from \"@stencil/core\";\n\nimport {\n StzhClampClampEvent,\n StzhClampExpandEvent\n} from \"../../index\";\n\nimport { fetchTranslations } from \"../../utils/translation-utils\";\nimport { StzhClampLocalizedText } from \"./stzh-clamp.localization\";\n\n/\n \n /\n@Component({\n tag: \"stzh-clamp\",\n styleUrl: \"stzh-clamp.scss\"\n})\nexport class StzhClamp {\n /* Translation strings /\n @Prop() localization: StzhClampLocalizedText;\n\n /* Line number /\n @Prop() lines: number = 1;\n /* Line number above small breakpoint /\n @Prop() linesSmall: number = 0;\n /* Line number above medium breakpoint /\n @Prop() linesMedium: number = 0;\n /* Line number above large breakpoint /\n @Prop() linesLarge: number = 0;\n /* Line number above ultra breakpoint /\n @Prop() linesUltra: number = 0;\n\n /* Whether clamping is expanded /\n @Prop() showExpandLink: boolean = false;\n\n /* Whether clamping is expanded /\n @Prop({ mutable: true, reflect: true }) expanded: boolean = false;\n\n /* Whether the text is currently clamped (readonly) /\n @Prop({ mutable: true, reflect: true }) clamped: boolean = false;\n\n @Element() element: HTMLStzhClampElement;\n\n /* Event when clamping state changed /\n @Event() stzhClamp: EventEmitter<StzhClampClampEvent>;\n\n /* Event when expanding state changed */\n @Event() stzhExpand: EventEmitter<StzhClampExpandEvent>;\n\n @Method()\n async update() {\n this.textCloneElement.innerHTML = this.textElement.innerHTML;\n this.updateClamped();\n }\n\n private textElement: HTMLElement;\n private textCloneElement: HTMLElement;\n\n private debounceResize: number;\n private resizeObserver: ResizeObserver;\n private mutationObserver: MutationObserver;\n\n private updateClamped = () => {\n if (!this.textCloneElement) {\n return;\n }\n\n const beforeClamped = this.clamped;\n this.clamped = this.textCloneElement.scrollHeight > this.textCloneElement.clientHeight;\n\n if (beforeClamped !== this.clamped) {\n this.stzhClamp.emit({\n component: \"stzh-clamp\",\n clamped: this.clamped\n });\n }\n }\n\n private handleResize = () => {\n if (this.debounceResize) {\n window.cancelAnimationFrame(this.debounceResize);\n }\n\n this.debounceResize = requestAnimationFrame(this.updateClamped);\n }\n\n private handleMutaton = () => {\n this.update();\n }\n\n private handleExpandClick = () => {\n this.expanded = !this.expanded;\n\n this.stzhExpand.emit({\n component: \"stzh-clamp\",\n expanded: this.expanded\n });\n }\n\n async componentWillLoad() {\n if (!this.localization) {\n this.localization = await fetchTranslations(this.element, \"clamp\");\n }\n }\n\n componentDidLoad() {\n this.mutationObserver = new MutationObserver(this.handleMutaton);\n this.mutationObserver.observe(this.textElement, {\n childList: true,\n subtree: true,\n });\n }\n\n componentDidRender() {\n this.update();\n }\n\n connectedCallback() {\n this.resizeObserver = new ResizeObserver(this.handleResize);\n this.resizeObserver.observe(this.element);\n }\n\n disconnectedCallback() {\n if (this.resizeObserver) {\n this.resizeObserver.disconnect();\n }\n\n if (this.mutationObserver) {\n this.mutationObserver.disconnect();\n }\n }\n\n render() {\n const classes = {\n \"stzh-clamp\": true,\n \"stzh-clamp--is-not-expanded\": !this.expanded\n };\n\n return (\n <Host\n style={{\n '--lines': this.lines ? this.lines.toString() : null,\n '--lines-small': this.linesSmall ? this.linesSmall.toString() : null,\n '--lines-medium': this.linesMedium ? this.linesMedium.toString() : null,\n '--lines-large': this.linesLarge ? this.linesLarge.toString() : null,\n '--lines-ultra': this.linesUltra ? this.linesUltra.toString() : null,\n }}\n >\n <div class={classes}>\n <div\n ref={(el) => (this.textElement = el as HTMLDivElement)}\n class=\"stzh-clamp__text\"\n >\n <slot></slot>\n </div>\n\n <div\n ref={(el) => (this.textCloneElement = el as HTMLDivElement)}\n class=\"stzh-clamp__text is-clone\"\n aria-hidden=\"true\"\n ></div>\n\n {this.showExpandLink && this.clamped &&\n <stzh-link\n class=\"stzh-clamp__trigger\"\n a11yTabindex=\"-1\"\n aria-hidden=\"true\"\n onClick={this.handleExpandClick}\n >\n {!this.expanded ? this.localization.showMore : this.localization.showLess}\n </stzh-link>\n }\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/stzh-components.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { d as doc, N as NAMESPACE, p as promiseResolve, H, b as bootstrapLazy } from './index-67fd55c9.js';
 export { s as setNonce } from './index-67fd55c9.js';
-import { g as globalScripts } from './app-globals-4f0f7957.js';
+import { g as globalScripts } from './app-globals-07e538f3.js';
 /*
  Stencil Client Patch Browser v3.3.0 | MIT Licensed | https://stenciljs.com

package/dist/esm/stzh-datalist_2.entry.js CHANGED Viewed

@@ -146,7 +146,7 @@ const StzhDatalistItem = class {
         "stzh-datalist-item__value": true,
         "is-button": isButton,
         "is-link": !!this.href
-      }, href: this.href, rel: this.rel, target: this.target, download: this.download, "aria-labelledby": Item !== 'div' ? `${this.datalistItemId}-label ${this.datalistItemId}-value ${this.datalistItemId}-meta` : null, "aria-controls": this.a11yControls, "aria-expanded": typeof this.a11yExpanded !== "undefined"
+      }, href: this.href, rel: this.rel, target: this.target, download: this.download, "aria-labelledby": Item !== 'div' ? `${this.datalistItemId}-label ${this.datalistItemId}-value ${this.datalistItemId}-meta` : null, "aria-controls": this.a11yControls || null, "aria-expanded": typeof this.a11yExpanded !== "undefined"
         ? (this.a11yExpanded ? "true" : "false") : null }, this.external && h("div", { class: "stzh-datalist-item__vhidden" }, this.localization.$globals.externalLinkLabel), this.download && h("div", { class: "stzh-datalist-item__vhidden" }, this.localization.$globals.downloadLinkLabel), h("stzh-richtext", { class: "stzh-datalist-item__richtext", innerHTML: this.value }, h("slot", { name: "value" }))), h(Item, { "aria-hidden": this.statusLabel || this.meta ? null : "true", tabindex: "-1", id: `${this.datalistItemId}-meta`, class: {
         "stzh-datalist-item__meta": true,
         "is-button": isButton,

package/dist/esm/stzh-datalist_2.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"stzh-datalist.stzh-datalist-item.entry.js","mappings":"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","names":[],"sources":["./src/components/stzh-datalist/stzh-datalist.scss?tag=stzh-datalist&encapsulation=scoped","./src/components/stzh-datalist/stzh-datalist.tsx","./src/components/stzh-datalist-item/stzh-datalist-item.scss?tag=stzh-datalist-item&encapsulation=scoped","./src/components/stzh-datalist-item/stzh-datalist-item.tsx"],"sourcesContent":[":host {\n --item-label-min-width: 120px;\n\n @include mq($from: smallheader) {\n --item-label-min-width: 144px;\n }\n\n &[disable-label-min-width]:not([disable-label-min-width=\"false\"]) {\n --item-label-min-width: none;\n }\n}\n\n:host ::slotted(stzh-details),\n.stzh-datalist stzh-details {\n --content-grid-column: 1 / 6;\n --content-padding: #{space('large')} 0 #{spaceCurveValue('medium')};\n --content-border-bottom: 1px solid #{$baseBorderColor};\n\n @include mq($from: medium) {\n --content-padding: #{space('large')} 0 #{spaceCurveValue('medium', 'medium')};\n }\n\n @include mq($from: large) {\n --content-padding: #{space('large')} 0 #{spaceCurveValue('medium', 'large')};\n }\n}\n\n.stzh-datalist {\n &__list {\n width: 100%;\n }\n\n /* Has hidden border variant /\n\n &--has-hidden-border &__list {\n margin-top: calc(#{space('xsmall')} / -2);\n margin-bottom: calc(#{space('xsmall')} / -2);\n }\n\n / Vertical variant /\n\n &--direction-horizontal &__list {\n width: 100%;\n display: grid;\n border-collapse: collapse;\n grid-template-columns: auto auto minmax(auto, 1fr) auto auto;\n align-items: stretch;\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Watch,\n Prop,\n Event,\n EventEmitter\n} from \"@stencil/core\";\n\nimport {\n StzhDatalistItemEntry,\n StzhDatalistDirectionChangeEvent,\n StzhDatalistHideBorderChangeEvent\n} from \"../../index\";\n\nimport {\n media,\n addMediaChangeListener,\n removeMediaChangeListener\n} from '../../utils/media-utils';\n\n/\n /\n@Component({\n tag: \"stzh-datalist\",\n styleUrl: \"stzh-datalist.scss\",\n scoped: true\n})\nexport class StzhDatalist {\n /** Direction /\n @Prop({ reflect: true }) direction: \"vertical\" \| \"horizontal\" = \"vertical\";\n\n /* Direction above small breakpoint /\n @Prop({ reflect: true }) directionSmall: \"vertical\" \| \"horizontal\" \| \"inherit\" = \"horizontal\";\n\n /* Direction above medium breakpoint /\n @Prop({ reflect: true }) directionMedium: \"vertical\" \| \"horizontal\" \| \"inherit\" = \"inherit\";\n\n /* Direction above large breakpoint /\n @Prop({ reflect: true }) directionLarge: \"vertical\" \| \"horizontal\" \| \"inherit\" = \"inherit\";\n\n /* Direction above ultra breakpoint /\n @Prop({ reflect: true }) directionUltra: \"vertical\" \| \"horizontal\" \| \"inherit\" = \"inherit\";\n\n /* Hide border lines between items /\n @Prop({ reflect: true }) hideBorder: boolean = false;\n\n /\n Whether to disable min-width of datalist item label for the `horizontal` variant.\n \n If `false`, the default `min-width` is `144px` (for >= 800px) and `120px` (for < 800px).\n * If `true`, the `min-width` is `none`, so the label column, will have the width of cell with the widest content.\n \n You can also overwrite the label min-width via CSS with the custom property `--item-label-min-width`.\n /\n @Prop({ reflect: true }) disableLabelMinWidth: boolean = false;\n\n /* Current direction in use (readonly) /\n @Prop({ reflect: true }) currentDirection: \"vertical\" \| \"horizontal\";\n\n /\n Items in datalist\n * Array of objects that must at least include `value` attribute.\n * Can optionally contain `leadingIcon`, `label`, `meta`, `icon`, `iconLabel`, `iconTooltip`, `href`, `statusLabel`, `statusType` attribute and be nested to display deeper levels:\n * `[{\"value\":\"Value 1\", \"label\": \"Label 1\"}, {\"value\":\"Value 2\", \"label\": \"Label 2\", \"items\": [...]}]`\n /\n @Prop() items: StzhDatalistItemEntry[] \| string = [];\n private _items: StzhDatalistItemEntry[] = [];\n\n\n /* Direction attribute change event /\n @Event() stzhDirectionChange: EventEmitter<StzhDatalistDirectionChangeEvent>;\n\n /* Hide border change event /\n @Event() stzhHideBorderChange: EventEmitter<StzhDatalistHideBorderChangeEvent>;\n\n @Element() element: HTMLStzhDatalistElement;\n\n @Watch(\"hideBorder\")\n hideBorderWatcher(newValue: boolean) {\n this.stzhHideBorderChange.emit({\n component: \"stzh-datalist\",\n value: newValue\n });\n }\n\n @Watch(\"direction\")\n @Watch(\"directionSmall\")\n @Watch(\"directionMedium\")\n @Watch(\"directionLarge\")\n @Watch(\"directionUltra\")\n directionWatcher() {\n this.resizeHandler();\n }\n\n @Watch(\"currentDirection\")\n currentDirectionWatcher(newValue: \"vertical\" \| \"horizontal\") {\n this.stzhDirectionChange.emit({\n component: \"stzh-datalist\",\n value: newValue\n });\n }\n\n @Watch(\"items\")\n itemsWatcher(newValue: any[] \| string) {\n if (typeof newValue === \"string\") {\n this._items = JSON.parse(newValue);\n } else {\n this._items = newValue;\n }\n }\n\n resizeHandler = () => {\n if (media(\"ultra\").matches && this.directionUltra !== \"inherit\") {\n this.currentDirection = this.directionUltra;\n } else if (media(\"large\").matches && this.directionLarge !== \"inherit\") {\n this.currentDirection = this.directionLarge;\n } else if (media(\"medium\").matches && this.directionMedium !== \"inherit\") {\n this.currentDirection = this.directionMedium;\n } else if (media(\"small\").matches && this.directionSmall !== \"inherit\") {\n this.currentDirection = this.directionSmall;\n } else {\n this.currentDirection = this.direction;\n }\n }\n\n async componentWillLoad() {\n this.itemsWatcher(this.items);\n this.hideBorderWatcher(this.hideBorder);\n this.resizeHandler();\n }\n\n connectedCallback() {\n addMediaChangeListener(this.resizeHandler);\n }\n\n disconnectedCallback() {\n removeMediaChangeListener(this.resizeHandler);\n }\n\n render() {\n const classes = {\n \"stzh-datalist\": true,\n \"stzh-datalist--has-hidden-border\": this.hideBorder,\n [`stzh-datalist--direction-${this.currentDirection}`]: !!this.currentDirection\n };\n\n return (\n <Host>\n <div class={classes}>\n <div class=\"stzh-datalist__list\" role=\"list\">\n {this._items.map((item) =>\n <stzh-datalist-item {...item}>\n {item.items && item.items.length > 0 &&\n <stzh-datalist items={item.items}></stzh-datalist>\n }\n </stzh-datalist-item>\n )}\n <slot></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n",":host {\n --font-family: var(--stzh-font-family-regular);\n --font-weight: var(--stzh-font-weight-regular);\n --color: inherit;\n --action-display: flex;\n --label-min-width: var(--item-label-min-width, none);\n --leading-icon-background-color: #{$colorGrey5};\n --leading-icon-color: #{$colorGrey70};\n\n --hover-leading-icon-background-color: #{$colorPrimaryHover};\n --hover-leading-icon-color: #{$colorWhite};\n\n --horizontal-min-height: 48px;\n\n display: contents;\n\n &[href]:not([href=\"\"]),\n &[a11y-expanded],\n &[a11y-controls] {\n --color: #{$colorPrimary};\n --hover-color: #{$colorPrimaryHover};\n }\n\n ::slotted(stzh-datalist) {\n margin-left: space('large');\n }\n}\n\n.stzh-datalist-item {\n position: relative;\n text-decoration-line: none;\n\n &__vhidden {\n @include visuallyhidden;\n }\n\n &__wrapper {\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n }\n\n &__leading,\n &__value,\n &__label,\n &__meta,\n &__action-list {\n color: inherit;\n display: flex;\n align-items: center;\n appearance: none;\n font-family: inherit;\n background: transparent;\n border: none;\n padding: 0;\n text-decoration-line: none;\n\n &.is-button,\n &.is-link {\n cursor: pointer;\n }\n }\n\n &__leading {\n flex-shrink: 0;\n\n &:not(:empty) {\n padding-right: space('xsmall');\n }\n }\n\n &__leading-icon-container {\n color: var(--leading-icon-color);\n background-color: var(--leading-icon-background-color);\n width: 40px;\n height: 40px;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\n transition-property: color, background-color;\n transition-duration: $baseTransitionAnimationSpeed;\n }\n\n &__value {\n @include fontCurve('p1');\n font-family: var(--font-family);\n font-weight: var(--font-weight);\n flex-grow: 1;\n }\n\n &__value,\n &__icon {\n color: var(--color);\n }\n\n &__label,\n &__meta {\n @include fontCurve('caption');\n }\n\n &__meta {\n justify-content: flex-end;\n }\n\n &__label {\n @include font('medium');\n color: $baseLeadColor;\n }\n\n &__action-list {\n display: var(--action-display);\n justify-content: center;\n text-align: center;\n\n &:not(:empty) {\n padding-left: space('xsmall');\n }\n }\n\n &__action {\n &.is-non-interactive {\n display: flex;\n justify-content: center;\n align-items: center;\n width: $formInputHeightTiny;\n height: $formInputHeightTiny;\n }\n\n &.is-button[variant=\"tertiary\"] {\n --color: inherit;\n }\n }\n\n &__value,\n &__icon {\n transition: color $baseTransitionAnimationSpeed;\n }\n\n &__richtext {\n color: inherit;\n font-family: inherit;\n font-weight: inherit;\n }\n\n &__interactive {\n position: absolute;\n top: 0;\n left: 0;\n }\n\n / Button variant /\n\n &--is-button &__icon.is-open {\n display: none;\n }\n\n &--is-button#{&}--is-expanded &__icon {\n &.is-closed {\n display: none;\n }\n\n &.is-open {\n display: inline-flex;\n }\n }\n\n / Interactive variant /\n\n &--is-interactive:hover &__value,\n &--is-interactive:hover &__icon {\n color: var(--hover-color);\n }\n\n &--is-interactive:hover &__value {\n text-decoration-line: underline;\n }\n\n &--is-interactive:hover &__leading-icon-container,\n &--is-interactive:focus-within &__leading-icon-container {\n color: var(--hover-leading-icon-color);\n background-color: var(--hover-leading-icon-background-color);\n }\n\n / Vertical variant /\n\n &--direction-vertical {\n display: flex;\n padding-top: space('xsmall');\n padding-bottom: space('xsmall');\n }\n\n &--direction-vertical#{&}--has-hidden-border {\n padding-top: calc(#{space('xsmall')} / 2);\n padding-bottom: calc(#{space('xsmall')} / 2);\n }\n\n &--direction-vertical:not(#{&}--has-hidden-border) {\n border-bottom: 1px solid $baseBorderColor;\n }\n\n &--direction-vertical &__leading-icon-container {\n width: 40px;\n height: 40px;\n }\n\n &--direction-vertical &__leading-icon {\n --size: #{iconSize('medium')};\n }\n\n &--direction-vertical &__meta {\n flex-direction: column;\n }\n\n / Horizontal variant /\n\n &--direction-horizontal,\n &--direction-horizontal + &__nested {\n display: contents;\n }\n\n &--direction-horizontal + &__nested &__nested-inner {\n grid-column: 1 / 6;\n }\n\n &--direction-horizontal &__leading,\n &--direction-horizontal &__value,\n &--direction-horizontal &__label,\n &--direction-horizontal &__meta,\n &--direction-horizontal &__action-list {\n min-height: var(--horizontal-min-height);\n }\n\n &--direction-horizontal &__label,\n &--direction-horizontal &__value,\n &--direction-horizontal &__meta {\n padding-top: space('xsmall');\n padding-bottom: space('xsmall');\n }\n\n &--direction-horizontal#{&}--has-hidden-border &__label,\n &--direction-horizontal#{&}--has-hidden-border &__value,\n &--direction-horizontal#{&}--has-hidden-border &__meta {\n padding-top: calc(#{space('xsmall')} / 2);\n padding-bottom: calc(#{space('xsmall')} / 2);\n }\n\n // &--direction-horizontal:not(#{&}--has-hidden-border) &__leading,\n &--direction-horizontal:not(#{&}--has-hidden-border) &__label,\n &--direction-horizontal:not(#{&}--has-hidden-border) &__value,\n &--direction-horizontal:not(#{&}--has-hidden-border) &__meta,\n &--direction-horizontal:not(#{&}--has-hidden-border) &__action-list {\n border-bottom: 1px solid $baseBorderColor;\n }\n\n &--direction-horizontal &__label {\n &:not(:empty) {\n min-width: var(--label-min-width);\n padding-right: space('xsmall');\n }\n }\n\n &--direction-horizontal &__meta {\n &:not(:empty) {\n padding-left: space('xsmall');\n }\n }\n\n &--direction-horizontal &__leading-icon-container {\n width: 32px;\n height: 32px;\n }\n\n &--direction-horizontal &__meta-status + &__meta-text {\n margin-left: space('xsmall');\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Event,\n EventEmitter,\n Fragment,\n State,\n Watch\n} from \"@stencil/core\";\n\nimport {\n StzhDatalistItemActionClickEvent,\n StzhDatalistDirectionChangeEvent,\n StzhDatalistHideBorderChangeEvent\n} from \"../../index\";\n\nimport { fetchTranslations, StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nlet datalistItemCounter = 0;\n\n/\n @slot - Slot for nested datalist\n * @slot value - Slot for value (or use value slot instead)\n /\n@Component({\n tag: \"stzh-datalist-item\",\n styleUrl: \"stzh-datalist-item.scss\",\n scoped: true\n})\nexport class StzhDatalistItem {\n /* Translation strings /\n @Prop() localization: StzhLocaleComponent;\n\n /* Direction /\n @Prop({ reflect: true }) direction: \"vertical\" \| \"horizontal\" = \"vertical\";\n\n /* Link /\n @Prop({ reflect: true }) href: string;\n\n /* Rel (if href is used) /\n @Prop() rel: string;\n\n /* Target (if href is used) /\n @Prop() target: string;\n\n /* Download attribute of link (if `href` used) /\n @Prop() download: string;\n\n /* Leading icon /\n @Prop() leadingIcon: string;\n\n /* Icon of action button (if href is used, will only be for presentation and default to link icon) /\n @Prop() icon: string;\n\n /* Overwrite aria-label of action button (default aria label is `label` and `value`). /\n @Prop() iconLabel: string;\n\n /* Tooltip content of action button. Overwrites aria-label (set by default or `iconLabel`) of action button. /\n @Prop() iconTooltip: string;\n\n /* Label /\n @Prop() label: string = \"\";\n\n /* Value (or use value slot instead) /\n @Prop() value: string = \"\";\n\n /* Meta /\n @Prop() meta: string = \"\";\n\n /* Status Label /\n @Prop() statusLabel: string = \"\";\n\n /* Status Type /\n @Prop() statusType: \"default\" \| \"success\" \| \"warning\" \| \"error\" \| \"info\" = \"default\";\n\n /* Hide border lines /\n @Prop({ reflect: true }) hideBorder: boolean = false;\n\n /* Aria expanded of link/button /\n @Prop({ reflect: true, attribute: \"a11y-expanded\" }) a11yExpanded: boolean;\n\n /* Aria controls of link/button /\n @Prop({ attribute: \"a11y-controls\" }) a11yControls: string;\n\n /* Whether rel contains external /\n @State() external: boolean = false;\n\n /* Item action click event */\n @Event() stzhItemActionClick: EventEmitter<StzhDatalistItemActionClickEvent>;\n\n @Element() element: HTMLStzhDatalistItemElement;\n\n @Watch(\"rel\")\n externalWatcher() {\n this.external = this.rel && this.rel.includes(\"external\");\n }\n\n private datalist: HTMLStzhDatalistElement;\n private datalistItemId: string;\n\n private actionClick = (originalEvent: MouseEvent) => {\n this.stzhItemActionClick.emit({\n component: \"stzh-datalist-item\",\n originalEvent\n });\n }\n\n private handleDirectionChange = (event: CustomEvent<StzhDatalistDirectionChangeEvent>) => {\n this.direction = event.detail.value;\n }\n\n private handleHideBorderChange = (event: CustomEvent<StzhDatalistHideBorderChangeEvent>) => {\n this.hideBorder = event.detail.value;\n }\n\n private renderInner(isButton: boolean): DocumentFragment {\n const Item = isButton ? \"button\" : (this.href ? \"a\" : \"div\");\n\n return (\n <Fragment>\n <Item\n aria-hidden={this.label ? null : \"true\"}\n tabindex=\"-1\"\n id={`${this.datalistItemId}-label`}\n class={{\n \"stzh-datalist-item__label\": true,\n \"is-button\": isButton,\n \"is-link\": !!this.href\n }}\n href={this.href}\n rel={this.rel}\n target={this.target}\n download={this.download}\n >\n {this.label}\n </Item>\n\n <Item\n id={`${this.datalistItemId}-value`}\n class={{\n \"stzh-datalist-item__value\": true,\n \"is-button\": isButton,\n \"is-link\": !!this.href\n }}\n href={this.href}\n rel={this.rel}\n target={this.target}\n download={this.download}\n aria-labelledby={Item !== 'div' ? `${this.datalistItemId}-label ${this.datalistItemId}-value ${this.datalistItemId}-meta` : null}\n aria-controls={this.a11yControls}\n aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n >\n {this.external && <div class=\"stzh-datalist-item__vhidden\">{this.localization.$globals.externalLinkLabel}</div>}\n {this.download && <div class=\"stzh-datalist-item__vhidden\">{this.localization.$globals.downloadLinkLabel}</div>}\n <stzh-richtext class=\"stzh-datalist-item__richtext\" innerHTML={this.value}>\n <slot name=\"value\"></slot>\n </stzh-richtext>\n </Item>\n\n <Item\n aria-hidden={this.statusLabel \|\| this.meta ? null : \"true\"}\n tabindex=\"-1\"\n id={`${this.datalistItemId}-meta`}\n class={{\n \"stzh-datalist-item__meta\": true,\n \"is-button\": isButton,\n \"is-link\": !!this.href\n }}\n href={this.href}\n rel={this.rel}\n target={this.target}\n download={this.download}\n >\n {this.statusLabel &&\n <stzh-status\n class=\"stzh-datalist-item__meta-status\"\n label={this.statusLabel}\n type={this.statusType}\n ></stzh-status>\n }\n {this.meta && <span class=\"stzh-datalist-item__meta-text\">{this.meta}</span>}\n </Item>\n </Fragment>\n )\n }\n\n private renderLeadingIcon(isButton: boolean): HTMLElement {\n const Item = isButton ? \"button\" : (this.href ? \"a\" : \"div\");\n\n return (\n <Item\n role=\"presentation\"\n aria-hidden=\"true\"\n tabindex=\"-1\"\n class={{\n \"stzh-datalist-item__leading\": true,\n \"is-button\": isButton,\n \"is-link\": !!this.href\n }}\n href={this.href}\n rel={this.rel}\n target={this.target}\n download={this.download}\n >\n {this.leadingIcon &&\n <div class=\"stzh-datalist-item__leading-icon-container\">\n <stzh-icon class=\"stzh-datalist-item__leading-icon\" name={this.leadingIcon}></stzh-icon>\n </div>\n }\n </Item>\n );\n }\n\n async connectedCallback() {\n this.datalist = this.element.closest(\"stzh-datalist\");\n\n if (this.datalist) {\n this.direction = this.datalist.currentDirection;\n this.hideBorder = this.datalist.hideBorder;\n\n this.datalist.addEventListener(\"stzhDirectionChange\", this.handleDirectionChange);\n this.datalist.addEventListener(\"stzhHideBorderChange\", this.handleHideBorderChange);\n }\n }\n\n disconnectedCallback() {\n if (this.datalist) {\n this.datalist.removeEventListener(\"stzhDirectionChange\", this.handleDirectionChange);\n this.datalist.removeEventListener(\"stzhHideBorderChange\", this.handleHideBorderChange);\n this.datalist = null;\n }\n }\n\n async componentWillLoad() {\n this.datalistItemId = `stzh-datalist-item-${datalistItemCounter++}`;\n this.externalWatcher();\n\n if (!this.localization) {\n this.localization = await fetchTranslations(this.element, \"datalist-item\");\n }\n }\n\n render() {\n const isButton = typeof this.a11yExpanded !== \"undefined\"\n \|\| typeof this.a11yControls !== \"undefined\";\n\n const hasActionButton = !this.href && this.icon;\n\n const classes = {\n \"stzh-datalist-item\": true,\n \"stzh-datalist-item--is-interactive\": !!this.href \|\| isButton,\n \"stzh-datalist-item--is-link\": !!this.href,\n \"stzh-datalist-item--is-button\": isButton,\n \"stzh-datalist-item--is-expanded\": this.a11yExpanded,\n \"stzh-datalist-item--has-hidden-border\": this.hideBorder,\n [`stzh-datalist-item--direction-${this.direction}`]: !!this.direction\n };\n\n const Item = isButton ? \"button\" : (this.href ? \"a\" : \"div\");\n\n const ActionButton = () => {\n return (\n <stzh-button\n class={{\n \"stzh-datalist-item__action\": true,\n \"is-button\": true\n }}\n variant=\"tertiary\"\n size=\"tiny\"\n aria-label={this.iconLabel \|\| (`${this.label} ${this.value}`)}\n iconOnly={true}\n icon={this.icon}\n onClick={this.actionClick}\n ></stzh-button>\n );\n }\n\n return (\n <Host role=\"listitem\">\n <div class={classes}>\n {this.direction === \"horizontal\" ?\n <Fragment>\n {this.renderLeadingIcon(isButton)}\n {this.renderInner(isButton)}\n </Fragment>\n :\n <Fragment>\n {this.renderLeadingIcon(isButton)}\n <div class=\"stzh-datalist-item__wrapper\">\n {this.renderInner(isButton)}\n </div>\n </Fragment>\n }\n <Item\n role={hasActionButton ? null : \"presentation\"}\n aria-hidden={hasActionButton ? null : \"true\"}\n tabindex=\"-1\"\n class={{\n \"stzh-datalist-item__action-list\": true,\n \"is-button\": isButton,\n \"is-link\": !!this.href\n }}\n href={this.href}\n rel={this.rel}\n target={this.target}\n download={this.download}\n >\n {this.href &&\n (this.download ?\n <div class=\"stzh-datalist-item__action is-non-interactive\">\n <stzh-icon class=\"stzh-datalist-item__icon\" name={this.icon ? this.icon : \"download\"}></stzh-icon>\n </div>\n :\n <div class=\"stzh-datalist-item__action is-non-interactive\">\n <stzh-icon class=\"stzh-datalist-item__icon\" name={this.icon ? this.icon : (this.external ? \"external-link\" : \"arrow-right\")}></stzh-icon>\n </div>\n )\n }\n\n {isButton &&\n <div class=\"stzh-datalist-item__action is-non-interactive\">\n <stzh-icon class=\"stzh-datalist-item__icon is-closed\" name={this.icon ? this.icon : \"plus\"}></stzh-icon>\n <stzh-icon class=\"stzh-datalist-item__icon is-open\" name={this.icon ? this.icon : \"minus\"}></stzh-icon>\n </div>\n }\n\n {hasActionButton &&\n (this.iconTooltip ?\n <stzh-tooltip content={this.iconTooltip}>\n {ActionButton()}\n </stzh-tooltip>\n :\n ActionButton())\n }\n </Item>\n </div>\n\n <div class=\"stzh-datalist-item__nested\">\n <div class=\"stzh-datalist-item__nested-inner\">\n <slot></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"stzh-datalist.stzh-datalist-item.entry.js","mappings":"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","names":[],"sources":["./src/components/stzh-datalist/stzh-datalist.scss?tag=stzh-datalist&encapsulation=scoped","./src/components/stzh-datalist/stzh-datalist.tsx","./src/components/stzh-datalist-item/stzh-datalist-item.scss?tag=stzh-datalist-item&encapsulation=scoped","./src/components/stzh-datalist-item/stzh-datalist-item.tsx"],"sourcesContent":[":host {\n --item-label-min-width: 120px;\n\n @include mq($from: smallheader) {\n --item-label-min-width: 144px;\n }\n\n &[disable-label-min-width]:not([disable-label-min-width=\"false\"]) {\n --item-label-min-width: none;\n }\n}\n\n:host ::slotted(stzh-details),\n.stzh-datalist stzh-details {\n --content-grid-column: 1 / 6;\n --content-padding: #{space('large')} 0 #{spaceCurveValue('medium')};\n --content-border-bottom: 1px solid #{$baseBorderColor};\n\n @include mq($from: medium) {\n --content-padding: #{space('large')} 0 #{spaceCurveValue('medium', 'medium')};\n }\n\n @include mq($from: large) {\n --content-padding: #{space('large')} 0 #{spaceCurveValue('medium', 'large')};\n }\n}\n\n.stzh-datalist {\n &__list {\n width: 100%;\n }\n\n /* Has hidden border variant /\n\n &--has-hidden-border &__list {\n margin-top: calc(#{space('xsmall')} / -2);\n margin-bottom: calc(#{space('xsmall')} / -2);\n }\n\n / Vertical variant /\n\n &--direction-horizontal &__list {\n width: 100%;\n display: grid;\n border-collapse: collapse;\n grid-template-columns: auto auto minmax(auto, 1fr) auto auto;\n align-items: stretch;\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Watch,\n Prop,\n Event,\n EventEmitter\n} from \"@stencil/core\";\n\nimport {\n StzhDatalistItemEntry,\n StzhDatalistDirectionChangeEvent,\n StzhDatalistHideBorderChangeEvent\n} from \"../../index\";\n\nimport {\n media,\n addMediaChangeListener,\n removeMediaChangeListener\n} from '../../utils/media-utils';\n\n/\n /\n@Component({\n tag: \"stzh-datalist\",\n styleUrl: \"stzh-datalist.scss\",\n scoped: true\n})\nexport class StzhDatalist {\n /** Direction /\n @Prop({ reflect: true }) direction: \"vertical\" \| \"horizontal\" = \"vertical\";\n\n /* Direction above small breakpoint /\n @Prop({ reflect: true }) directionSmall: \"vertical\" \| \"horizontal\" \| \"inherit\" = \"horizontal\";\n\n /* Direction above medium breakpoint /\n @Prop({ reflect: true }) directionMedium: \"vertical\" \| \"horizontal\" \| \"inherit\" = \"inherit\";\n\n /* Direction above large breakpoint /\n @Prop({ reflect: true }) directionLarge: \"vertical\" \| \"horizontal\" \| \"inherit\" = \"inherit\";\n\n /* Direction above ultra breakpoint /\n @Prop({ reflect: true }) directionUltra: \"vertical\" \| \"horizontal\" \| \"inherit\" = \"inherit\";\n\n /* Hide border lines between items /\n @Prop({ reflect: true }) hideBorder: boolean = false;\n\n /\n Whether to disable min-width of datalist item label for the `horizontal` variant.\n \n If `false`, the default `min-width` is `144px` (for >= 800px) and `120px` (for < 800px).\n * If `true`, the `min-width` is `none`, so the label column, will have the width of cell with the widest content.\n \n You can also overwrite the label min-width via CSS with the custom property `--item-label-min-width`.\n /\n @Prop({ reflect: true }) disableLabelMinWidth: boolean = false;\n\n /* Current direction in use (readonly) /\n @Prop({ reflect: true }) currentDirection: \"vertical\" \| \"horizontal\";\n\n /\n Items in datalist\n * Array of objects that must at least include `value` attribute.\n * Can optionally contain `leadingIcon`, `label`, `meta`, `icon`, `iconLabel`, `iconTooltip`, `href`, `statusLabel`, `statusType` attribute and be nested to display deeper levels:\n * `[{\"value\":\"Value 1\", \"label\": \"Label 1\"}, {\"value\":\"Value 2\", \"label\": \"Label 2\", \"items\": [...]}]`\n /\n @Prop() items: StzhDatalistItemEntry[] \| string = [];\n private _items: StzhDatalistItemEntry[] = [];\n\n\n /* Direction attribute change event /\n @Event() stzhDirectionChange: EventEmitter<StzhDatalistDirectionChangeEvent>;\n\n /* Hide border change event /\n @Event() stzhHideBorderChange: EventEmitter<StzhDatalistHideBorderChangeEvent>;\n\n @Element() element: HTMLStzhDatalistElement;\n\n @Watch(\"hideBorder\")\n hideBorderWatcher(newValue: boolean) {\n this.stzhHideBorderChange.emit({\n component: \"stzh-datalist\",\n value: newValue\n });\n }\n\n @Watch(\"direction\")\n @Watch(\"directionSmall\")\n @Watch(\"directionMedium\")\n @Watch(\"directionLarge\")\n @Watch(\"directionUltra\")\n directionWatcher() {\n this.resizeHandler();\n }\n\n @Watch(\"currentDirection\")\n currentDirectionWatcher(newValue: \"vertical\" \| \"horizontal\") {\n this.stzhDirectionChange.emit({\n component: \"stzh-datalist\",\n value: newValue\n });\n }\n\n @Watch(\"items\")\n itemsWatcher(newValue: any[] \| string) {\n if (typeof newValue === \"string\") {\n this._items = JSON.parse(newValue);\n } else {\n this._items = newValue;\n }\n }\n\n resizeHandler = () => {\n if (media(\"ultra\").matches && this.directionUltra !== \"inherit\") {\n this.currentDirection = this.directionUltra;\n } else if (media(\"large\").matches && this.directionLarge !== \"inherit\") {\n this.currentDirection = this.directionLarge;\n } else if (media(\"medium\").matches && this.directionMedium !== \"inherit\") {\n this.currentDirection = this.directionMedium;\n } else if (media(\"small\").matches && this.directionSmall !== \"inherit\") {\n this.currentDirection = this.directionSmall;\n } else {\n this.currentDirection = this.direction;\n }\n }\n\n async componentWillLoad() {\n this.itemsWatcher(this.items);\n this.hideBorderWatcher(this.hideBorder);\n this.resizeHandler();\n }\n\n connectedCallback() {\n addMediaChangeListener(this.resizeHandler);\n }\n\n disconnectedCallback() {\n removeMediaChangeListener(this.resizeHandler);\n }\n\n render() {\n const classes = {\n \"stzh-datalist\": true,\n \"stzh-datalist--has-hidden-border\": this.hideBorder,\n [`stzh-datalist--direction-${this.currentDirection}`]: !!this.currentDirection\n };\n\n return (\n <Host>\n <div class={classes}>\n <div class=\"stzh-datalist__list\" role=\"list\">\n {this._items.map((item) =>\n <stzh-datalist-item {...item}>\n {item.items && item.items.length > 0 &&\n <stzh-datalist items={item.items}></stzh-datalist>\n }\n </stzh-datalist-item>\n )}\n <slot></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n",":host {\n --font-family: var(--stzh-font-family-regular);\n --font-weight: var(--stzh-font-weight-regular);\n --color: inherit;\n --action-display: flex;\n --label-min-width: var(--item-label-min-width, none);\n --leading-icon-background-color: #{$colorGrey5};\n --leading-icon-color: #{$colorGrey70};\n\n --hover-leading-icon-background-color: #{$colorPrimaryHover};\n --hover-leading-icon-color: #{$colorWhite};\n\n --horizontal-min-height: 48px;\n\n display: contents;\n\n &[href]:not([href=\"\"]),\n &[a11y-expanded],\n &[a11y-controls] {\n --color: #{$colorPrimary};\n --hover-color: #{$colorPrimaryHover};\n }\n\n ::slotted(stzh-datalist) {\n margin-left: space('large');\n }\n}\n\n.stzh-datalist-item {\n position: relative;\n text-decoration-line: none;\n\n &__vhidden {\n @include visuallyhidden;\n }\n\n &__wrapper {\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n }\n\n &__leading,\n &__value,\n &__label,\n &__meta,\n &__action-list {\n color: inherit;\n display: flex;\n align-items: center;\n appearance: none;\n font-family: inherit;\n background: transparent;\n border: none;\n padding: 0;\n text-decoration-line: none;\n\n &.is-button,\n &.is-link {\n cursor: pointer;\n }\n }\n\n &__leading {\n flex-shrink: 0;\n\n &:not(:empty) {\n padding-right: space('xsmall');\n }\n }\n\n &__leading-icon-container {\n color: var(--leading-icon-color);\n background-color: var(--leading-icon-background-color);\n width: 40px;\n height: 40px;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\n transition-property: color, background-color;\n transition-duration: $baseTransitionAnimationSpeed;\n }\n\n &__value {\n @include fontCurve('p1');\n font-family: var(--font-family);\n font-weight: var(--font-weight);\n flex-grow: 1;\n }\n\n &__value,\n &__icon {\n color: var(--color);\n }\n\n &__label,\n &__meta {\n @include fontCurve('caption');\n }\n\n &__meta {\n justify-content: flex-end;\n }\n\n &__label {\n @include font('medium');\n color: $baseLeadColor;\n }\n\n &__action-list {\n display: var(--action-display);\n justify-content: center;\n text-align: center;\n\n &:not(:empty) {\n padding-left: space('xsmall');\n }\n }\n\n &__action {\n &.is-non-interactive {\n display: flex;\n justify-content: center;\n align-items: center;\n width: $formInputHeightTiny;\n height: $formInputHeightTiny;\n }\n\n &.is-button[variant=\"tertiary\"] {\n --color: inherit;\n }\n }\n\n &__value,\n &__icon {\n transition: color $baseTransitionAnimationSpeed;\n }\n\n &__richtext {\n color: inherit;\n font-family: inherit;\n font-weight: inherit;\n }\n\n &__interactive {\n position: absolute;\n top: 0;\n left: 0;\n }\n\n / Button variant /\n\n &--is-button &__icon.is-open {\n display: none;\n }\n\n &--is-button#{&}--is-expanded &__icon {\n &.is-closed {\n display: none;\n }\n\n &.is-open {\n display: inline-flex;\n }\n }\n\n / Interactive variant /\n\n &--is-interactive:hover &__value,\n &--is-interactive:hover &__icon {\n color: var(--hover-color);\n }\n\n &--is-interactive:hover &__value {\n text-decoration-line: underline;\n }\n\n &--is-interactive:hover &__leading-icon-container,\n &--is-interactive:focus-within &__leading-icon-container {\n color: var(--hover-leading-icon-color);\n background-color: var(--hover-leading-icon-background-color);\n }\n\n / Vertical variant /\n\n &--direction-vertical {\n display: flex;\n padding-top: space('xsmall');\n padding-bottom: space('xsmall');\n }\n\n &--direction-vertical#{&}--has-hidden-border {\n padding-top: calc(#{space('xsmall')} / 2);\n padding-bottom: calc(#{space('xsmall')} / 2);\n }\n\n &--direction-vertical:not(#{&}--has-hidden-border) {\n border-bottom: 1px solid $baseBorderColor;\n }\n\n &--direction-vertical &__leading-icon-container {\n width: 40px;\n height: 40px;\n }\n\n &--direction-vertical &__leading-icon {\n --size: #{iconSize('medium')};\n }\n\n &--direction-vertical &__meta {\n flex-direction: column;\n }\n\n / Horizontal variant /\n\n &--direction-horizontal,\n &--direction-horizontal + &__nested {\n display: contents;\n }\n\n &--direction-horizontal + &__nested &__nested-inner {\n grid-column: 1 / 6;\n }\n\n &--direction-horizontal &__leading,\n &--direction-horizontal &__value,\n &--direction-horizontal &__label,\n &--direction-horizontal &__meta,\n &--direction-horizontal &__action-list {\n min-height: var(--horizontal-min-height);\n }\n\n &--direction-horizontal &__label,\n &--direction-horizontal &__value,\n &--direction-horizontal &__meta {\n padding-top: space('xsmall');\n padding-bottom: space('xsmall');\n }\n\n &--direction-horizontal#{&}--has-hidden-border &__label,\n &--direction-horizontal#{&}--has-hidden-border &__value,\n &--direction-horizontal#{&}--has-hidden-border &__meta {\n padding-top: calc(#{space('xsmall')} / 2);\n padding-bottom: calc(#{space('xsmall')} / 2);\n }\n\n // &--direction-horizontal:not(#{&}--has-hidden-border) &__leading,\n &--direction-horizontal:not(#{&}--has-hidden-border) &__label,\n &--direction-horizontal:not(#{&}--has-hidden-border) &__value,\n &--direction-horizontal:not(#{&}--has-hidden-border) &__meta,\n &--direction-horizontal:not(#{&}--has-hidden-border) &__action-list {\n border-bottom: 1px solid $baseBorderColor;\n }\n\n &--direction-horizontal &__label {\n &:not(:empty) {\n min-width: var(--label-min-width);\n padding-right: space('xsmall');\n }\n }\n\n &--direction-horizontal &__meta {\n &:not(:empty) {\n padding-left: space('xsmall');\n }\n }\n\n &--direction-horizontal &__leading-icon-container {\n width: 32px;\n height: 32px;\n }\n\n &--direction-horizontal &__meta-status + &__meta-text {\n margin-left: space('xsmall');\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Event,\n EventEmitter,\n Fragment,\n State,\n Watch\n} from \"@stencil/core\";\n\nimport {\n StzhDatalistItemActionClickEvent,\n StzhDatalistDirectionChangeEvent,\n StzhDatalistHideBorderChangeEvent\n} from \"../../index\";\n\nimport { fetchTranslations, StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nlet datalistItemCounter = 0;\n\n/\n @slot - Slot for nested datalist\n * @slot value - Slot for value (or use value slot instead)\n /\n@Component({\n tag: \"stzh-datalist-item\",\n styleUrl: \"stzh-datalist-item.scss\",\n scoped: true\n})\nexport class StzhDatalistItem {\n /* Translation strings /\n @Prop() localization: StzhLocaleComponent;\n\n /* Direction /\n @Prop({ reflect: true }) direction: \"vertical\" \| \"horizontal\" = \"vertical\";\n\n /* Link /\n @Prop({ reflect: true }) href: string;\n\n /* Rel (if href is used) /\n @Prop() rel: string;\n\n /* Target (if href is used) /\n @Prop() target: string;\n\n /* Download attribute of link (if `href` used) /\n @Prop() download: string;\n\n /* Leading icon /\n @Prop() leadingIcon: string;\n\n /* Icon of action button (if href is used, will only be for presentation and default to link icon) /\n @Prop() icon: string;\n\n /* Overwrite aria-label of action button (default aria label is `label` and `value`). /\n @Prop() iconLabel: string;\n\n /* Tooltip content of action button. Overwrites aria-label (set by default or `iconLabel`) of action button. /\n @Prop() iconTooltip: string;\n\n /* Label /\n @Prop() label: string = \"\";\n\n /* Value (or use value slot instead) /\n @Prop() value: string = \"\";\n\n /* Meta /\n @Prop() meta: string = \"\";\n\n /* Status Label /\n @Prop() statusLabel: string = \"\";\n\n /* Status Type /\n @Prop() statusType: \"default\" \| \"success\" \| \"warning\" \| \"error\" \| \"info\" = \"default\";\n\n /* Hide border lines /\n @Prop({ reflect: true }) hideBorder: boolean = false;\n\n /* Aria expanded of link/button /\n @Prop({ reflect: true, attribute: \"a11y-expanded\" }) a11yExpanded: boolean;\n\n /* Aria controls of link/button /\n @Prop({ attribute: \"a11y-controls\" }) a11yControls: string;\n\n /* Whether rel contains external /\n @State() external: boolean = false;\n\n /* Item action click event */\n @Event() stzhItemActionClick: EventEmitter<StzhDatalistItemActionClickEvent>;\n\n @Element() element: HTMLStzhDatalistItemElement;\n\n @Watch(\"rel\")\n externalWatcher() {\n this.external = this.rel && this.rel.includes(\"external\");\n }\n\n private datalist: HTMLStzhDatalistElement;\n private datalistItemId: string;\n\n private actionClick = (originalEvent: MouseEvent) => {\n this.stzhItemActionClick.emit({\n component: \"stzh-datalist-item\",\n originalEvent\n });\n }\n\n private handleDirectionChange = (event: CustomEvent<StzhDatalistDirectionChangeEvent>) => {\n this.direction = event.detail.value;\n }\n\n private handleHideBorderChange = (event: CustomEvent<StzhDatalistHideBorderChangeEvent>) => {\n this.hideBorder = event.detail.value;\n }\n\n private renderInner(isButton: boolean): DocumentFragment {\n const Item = isButton ? \"button\" : (this.href ? \"a\" : \"div\");\n\n return (\n <Fragment>\n <Item\n aria-hidden={this.label ? null : \"true\"}\n tabindex=\"-1\"\n id={`${this.datalistItemId}-label`}\n class={{\n \"stzh-datalist-item__label\": true,\n \"is-button\": isButton,\n \"is-link\": !!this.href\n }}\n href={this.href}\n rel={this.rel}\n target={this.target}\n download={this.download}\n >\n {this.label}\n </Item>\n\n <Item\n id={`${this.datalistItemId}-value`}\n class={{\n \"stzh-datalist-item__value\": true,\n \"is-button\": isButton,\n \"is-link\": !!this.href\n }}\n href={this.href}\n rel={this.rel}\n target={this.target}\n download={this.download}\n aria-labelledby={Item !== 'div' ? `${this.datalistItemId}-label ${this.datalistItemId}-value ${this.datalistItemId}-meta` : null}\n aria-controls={this.a11yControls \|\| null}\n aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n >\n {this.external && <div class=\"stzh-datalist-item__vhidden\">{this.localization.$globals.externalLinkLabel}</div>}\n {this.download && <div class=\"stzh-datalist-item__vhidden\">{this.localization.$globals.downloadLinkLabel}</div>}\n <stzh-richtext class=\"stzh-datalist-item__richtext\" innerHTML={this.value}>\n <slot name=\"value\"></slot>\n </stzh-richtext>\n </Item>\n\n <Item\n aria-hidden={this.statusLabel \|\| this.meta ? null : \"true\"}\n tabindex=\"-1\"\n id={`${this.datalistItemId}-meta`}\n class={{\n \"stzh-datalist-item__meta\": true,\n \"is-button\": isButton,\n \"is-link\": !!this.href\n }}\n href={this.href}\n rel={this.rel}\n target={this.target}\n download={this.download}\n >\n {this.statusLabel &&\n <stzh-status\n class=\"stzh-datalist-item__meta-status\"\n label={this.statusLabel}\n type={this.statusType}\n ></stzh-status>\n }\n {this.meta && <span class=\"stzh-datalist-item__meta-text\">{this.meta}</span>}\n </Item>\n </Fragment>\n )\n }\n\n private renderLeadingIcon(isButton: boolean): HTMLElement {\n const Item = isButton ? \"button\" : (this.href ? \"a\" : \"div\");\n\n return (\n <Item\n role=\"presentation\"\n aria-hidden=\"true\"\n tabindex=\"-1\"\n class={{\n \"stzh-datalist-item__leading\": true,\n \"is-button\": isButton,\n \"is-link\": !!this.href\n }}\n href={this.href}\n rel={this.rel}\n target={this.target}\n download={this.download}\n >\n {this.leadingIcon &&\n <div class=\"stzh-datalist-item__leading-icon-container\">\n <stzh-icon class=\"stzh-datalist-item__leading-icon\" name={this.leadingIcon}></stzh-icon>\n </div>\n }\n </Item>\n );\n }\n\n async connectedCallback() {\n this.datalist = this.element.closest(\"stzh-datalist\");\n\n if (this.datalist) {\n this.direction = this.datalist.currentDirection;\n this.hideBorder = this.datalist.hideBorder;\n\n this.datalist.addEventListener(\"stzhDirectionChange\", this.handleDirectionChange);\n this.datalist.addEventListener(\"stzhHideBorderChange\", this.handleHideBorderChange);\n }\n }\n\n disconnectedCallback() {\n if (this.datalist) {\n this.datalist.removeEventListener(\"stzhDirectionChange\", this.handleDirectionChange);\n this.datalist.removeEventListener(\"stzhHideBorderChange\", this.handleHideBorderChange);\n this.datalist = null;\n }\n }\n\n async componentWillLoad() {\n this.datalistItemId = `stzh-datalist-item-${datalistItemCounter++}`;\n this.externalWatcher();\n\n if (!this.localization) {\n this.localization = await fetchTranslations(this.element, \"datalist-item\");\n }\n }\n\n render() {\n const isButton = typeof this.a11yExpanded !== \"undefined\"\n \|\| typeof this.a11yControls !== \"undefined\";\n\n const hasActionButton = !this.href && this.icon;\n\n const classes = {\n \"stzh-datalist-item\": true,\n \"stzh-datalist-item--is-interactive\": !!this.href \|\| isButton,\n \"stzh-datalist-item--is-link\": !!this.href,\n \"stzh-datalist-item--is-button\": isButton,\n \"stzh-datalist-item--is-expanded\": this.a11yExpanded,\n \"stzh-datalist-item--has-hidden-border\": this.hideBorder,\n [`stzh-datalist-item--direction-${this.direction}`]: !!this.direction\n };\n\n const Item = isButton ? \"button\" : (this.href ? \"a\" : \"div\");\n\n const ActionButton = () => {\n return (\n <stzh-button\n class={{\n \"stzh-datalist-item__action\": true,\n \"is-button\": true\n }}\n variant=\"tertiary\"\n size=\"tiny\"\n aria-label={this.iconLabel \|\| (`${this.label} ${this.value}`)}\n iconOnly={true}\n icon={this.icon}\n onClick={this.actionClick}\n ></stzh-button>\n );\n }\n\n return (\n <Host role=\"listitem\">\n <div class={classes}>\n {this.direction === \"horizontal\" ?\n <Fragment>\n {this.renderLeadingIcon(isButton)}\n {this.renderInner(isButton)}\n </Fragment>\n :\n <Fragment>\n {this.renderLeadingIcon(isButton)}\n <div class=\"stzh-datalist-item__wrapper\">\n {this.renderInner(isButton)}\n </div>\n </Fragment>\n }\n <Item\n role={hasActionButton ? null : \"presentation\"}\n aria-hidden={hasActionButton ? null : \"true\"}\n tabindex=\"-1\"\n class={{\n \"stzh-datalist-item__action-list\": true,\n \"is-button\": isButton,\n \"is-link\": !!this.href\n }}\n href={this.href}\n rel={this.rel}\n target={this.target}\n download={this.download}\n >\n {this.href &&\n (this.download ?\n <div class=\"stzh-datalist-item__action is-non-interactive\">\n <stzh-icon class=\"stzh-datalist-item__icon\" name={this.icon ? this.icon : \"download\"}></stzh-icon>\n </div>\n :\n <div class=\"stzh-datalist-item__action is-non-interactive\">\n <stzh-icon class=\"stzh-datalist-item__icon\" name={this.icon ? this.icon : (this.external ? \"external-link\" : \"arrow-right\")}></stzh-icon>\n </div>\n )\n }\n\n {isButton &&\n <div class=\"stzh-datalist-item__action is-non-interactive\">\n <stzh-icon class=\"stzh-datalist-item__icon is-closed\" name={this.icon ? this.icon : \"plus\"}></stzh-icon>\n <stzh-icon class=\"stzh-datalist-item__icon is-open\" name={this.icon ? this.icon : \"minus\"}></stzh-icon>\n </div>\n }\n\n {hasActionButton &&\n (this.iconTooltip ?\n <stzh-tooltip content={this.iconTooltip}>\n {ActionButton()}\n </stzh-tooltip>\n :\n ActionButton())\n }\n </Item>\n </div>\n\n <div class=\"stzh-datalist-item__nested\">\n <div class=\"stzh-datalist-item__nested-inner\">\n <slot></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}