@oiz/stzh-components 2.11.0 → 2.12.0-beta1

package/dist/stzh-components/p-8b4cc10d.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stzhProgressbarCss","StzhProgressbar","this","setCurrentSteps","media","matches","stepsUltra","currentSteps","stepsLarge","stepsMedium","stepsSmall","steps","element","style","setProperty","toString","dataWatcher","newValue","_data","JSON","parse","lastItemIndex","length","maxStepIndex","withinLastFewSteps","index","getItemAttributes","itemIndex","item","step","first","last","current","passed","dotted","hide","substract","componentWillLoad","data","localization","window","stzhComponents","utils","fetchTranslations","connectedCallback","addMediaChangeListener","disconnectedCallback","removeMediaChangeListener","render","classes","h","Host","class","role","label","map","Object","assign","icon","disabled"],"sources":["src/components/stzh-progressbar/stzh-progressbar.scss?tag=stzh-progressbar&encapsulation=scoped","src/components/stzh-progressbar/stzh-progressbar.tsx"],"sourcesContent":[":host {\n  min-width: calc(var(--steps) * #{$progressbarItemDottedSize} * 2);\n\n  @include mq($from: small) {\n    min-width: calc(var(--steps) * #{$progressbarItemDottedSizeSmallUp} * 2);\n  }\n}\n\n.stzh-progressbar {\n  position: relative;\n\toverflow: hidden;\n\n  &__items {\n    display: flex;\n    flex-wrap: nowrap;\n  }\n\n  &__item {\n    /* flex the bullets to always have the same size */\n\t\tflex-grow: 1;\n\t\tflex-shrink: 1;\n\t\tflex-basis: 0;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  State,\n  Element,\n  Watch\n} from \"@stencil/core\";\n\nimport {\n  StzhProgressbarDataItem\n} from '../../index';\n\nimport { addMediaChangeListener, removeMediaChangeListener, media } from \"../../utils/media-utils\";\nimport { StzhProgressbarLocalizedText } from \"./stzh-progressbar.localization\"\n\n/**\n * @slot - Slot for any text content\n */\n@Component({\n  tag: \"stzh-progressbar\",\n  styleUrl: \"stzh-progressbar.scss\",\n  scoped: true\n})\nexport class StzhProgressbar {\n  /** Translation strings */\n  @Prop() localization: StzhProgressbarLocalizedText;\n\n  /**\n   * Step data (JSON array with objects that have `label` attribute and optional:\n   * - `disabled`, if step should be disabled\n   * - `icon`, if icon instead of step number should be displayed):\n   * - `analyticsId`, for Adobe Analytics, rendered as `s-object-id` (default is `label`)\n   *\n   * ```\n   * {\n   *   \"label\": \"Step Label\"\n   *   \"icon\": \"clock\",\n   *   \"disabled\": true\n   * }\n   * ```\n   */\n  @Prop() data: StzhProgressbarDataItem[] | string = [];\n  private _data: StzhProgressbarDataItem[];\n\n  /** Index of the item that be active */\n  @Prop() index: number = 0;\n\n  /** Number of steps to show below small breakpoint */\n  @Prop() steps: number = 5;\n\n  /** Number of steps to show above small breakpoint */\n  @Prop() stepsSmall: number = 6;\n\n  /** Number of steps to show above medium breakpoint */\n  @Prop() stepsMedium: number = 0;\n\n    /** Number of steps to show above large breakpoint */\n  @Prop() stepsLarge: number = 0;\n\n  /** Number of steps to show above ultra breakpoint */\n  @Prop() stepsUltra: number = 0;\n\n  @State() currentSteps: number;\n\n  @Element() element: HTMLStzhProgressbarElement;\n\n  @Watch(\"data\")\n  dataWatcher(newValue: any[] | string) {\n    if (typeof newValue === \"string\") {\n      this._data = JSON.parse(newValue);\n    }\n    else {\n      this._data = newValue;\n    }\n\n    this.lastItemIndex = this._data.length - 1;\n    this.maxStepIndex = this.currentSteps - 1;\n    this.withinLastFewSteps = this.index >= this._data.length - this.maxStepIndex;\n  }\n\n  private lastItemIndex: number;\n  private maxStepIndex: number;\n  private withinLastFewSteps: boolean;\n\n  private getItemAttributes(itemIndex: number): any {\n    const item = {} as HTMLStzhProgressbarItemElement;\n\n    item.step = itemIndex + 1;\n    item.first = itemIndex === 0;\n    item.last = itemIndex === this.lastItemIndex;\n    item.current = itemIndex === this.index;\n    item.passed = itemIndex < this.index;\n\n    // hide overflowings if more items than max steps in DOM\n    if (this._data.length > this.currentSteps) {\n      // add dots to last item if current index is below the last few items\n      if (itemIndex === this.lastItemIndex && !this.withinLastFewSteps) {\n        item.dotted = true;\n      }\n\n      if (this.index < 2) {\n        // hide overflowing items on the right\n        item.hide = itemIndex > this.maxStepIndex - 1 && itemIndex < this.lastItemIndex;\n      } else {\n        // add dots to first item if current item is third or above\n        if (itemIndex === 0) {\n          item.dotted = true;\n        }\n\n        let substract = this.index;\n\n        // if is within the last elements, calculate how much previous\n        // should be shown to stay on 5 visible elements\n        if (this.withinLastFewSteps) {\n          substract = this._data.length - this.maxStepIndex;\n        }\n\n        // hide overflowing items on left and right side\n        item.hide = itemIndex > 0 && itemIndex < substract\n          || itemIndex > this.index + (this.currentSteps - 3) && itemIndex < this.lastItemIndex;\n      }\n    }\n\n    return item;\n  }\n\n  private setCurrentSteps = () => {\n    if (media(\"ultra\").matches && this.stepsUltra) {\n      this.currentSteps = this.stepsUltra;\n    } else if (media(\"large\").matches && this.stepsLarge) {\n      this.currentSteps = this.stepsLarge;\n    } else if (media(\"medium\").matches && this.stepsMedium) {\n      this.currentSteps = this.stepsMedium;\n    } else if (media(\"small\").matches && this.stepsSmall) {\n      this.currentSteps = this.stepsSmall;\n    } else {\n      this.currentSteps = this.steps;\n    }\n\n    this.element.style.setProperty(\"--steps\", this.currentSteps.toString());\n  }\n\n  async componentWillLoad() {\n    this.dataWatcher(this.data);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"progressbar\");\n    }\n  }\n\n  connectedCallback() {\n    this.setCurrentSteps();\n    addMediaChangeListener(this.setCurrentSteps);\n  }\n\n  disconnectedCallback() {\n    removeMediaChangeListener(this.setCurrentSteps);\n  }\n\n  render() {\n    const classes = {\n      \"stzh-progressbar\": true,\n      [`stzh-progressbar--index-${this.index}`]: !!this.index\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div\n            class=\"stzh-progressbar__items\"\n            role=\"list\"\n            aria-label={this.localization.label}\n          >\n            {this._data.map((step, index) =>\n              <stzh-progressbar-item\n                {...this.getItemAttributes(index)}\n                icon={step.icon}\n                disabled={step.disabled}\n                label={step.label}\n                class=\"stzh-progressbar__item\"\n              ></stzh-progressbar-item>\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"2GAAA,MAAMA,EAAqB,o8C,MCyBdC,EAAe,M,yBAuGlBC,KAAAC,gBAAkB,KACxB,GAAIC,EAAM,SAASC,SAAWH,KAAKI,WAAY,CAC7CJ,KAAKK,aAAeL,KAAKI,U,MACpB,GAAIF,EAAM,SAASC,SAAWH,KAAKM,WAAY,CACpDN,KAAKK,aAAeL,KAAKM,U,MACpB,GAAIJ,EAAM,UAAUC,SAAWH,KAAKO,YAAa,CACtDP,KAAKK,aAAeL,KAAKO,W,MACpB,GAAIL,EAAM,SAASC,SAAWH,KAAKQ,WAAY,CACpDR,KAAKK,aAAeL,KAAKQ,U,KACpB,CACLR,KAAKK,aAAeL,KAAKS,K,CAG3BT,KAAKU,QAAQC,MAAMC,YAAY,UAAWZ,KAAKK,aAAaQ,WAAW,E,sCAlGtB,G,WAI3B,E,WAGA,E,gBAGK,E,iBAGC,E,gBAGD,E,gBAGA,E,4BAO7B,WAAAC,CAAYC,GACV,UAAWA,IAAa,SAAU,CAChCf,KAAKgB,MAAQC,KAAKC,MAAMH,E,KAErB,CACHf,KAAKgB,MAAQD,C,CAGff,KAAKmB,cAAgBnB,KAAKgB,MAAMI,OAAS,EACzCpB,KAAKqB,aAAerB,KAAKK,aAAe,EACxCL,KAAKsB,mBAAqBtB,KAAKuB,OAASvB,KAAKgB,MAAMI,OAASpB,KAAKqB,Y,CAO3D,iBAAAG,CAAkBC,GACxB,MAAMC,EAAO,GAEbA,EAAKC,KAAOF,EAAY,EACxBC,EAAKE,MAAQH,IAAc,EAC3BC,EAAKG,KAAOJ,IAAczB,KAAKmB,cAC/BO,EAAKI,QAAUL,IAAczB,KAAKuB,MAClCG,EAAKK,OAASN,EAAYzB,KAAKuB,MAG/B,GAAIvB,KAAKgB,MAAMI,OAASpB,KAAKK,aAAc,CAEzC,GAAIoB,IAAczB,KAAKmB,gBAAkBnB,KAAKsB,mBAAoB,CAChEI,EAAKM,OAAS,I,CAGhB,GAAIhC,KAAKuB,MAAQ,EAAG,CAElBG,EAAKO,KAAOR,EAAYzB,KAAKqB,aAAe,GAAKI,EAAYzB,KAAKmB,a,KAC7D,CAEL,GAAIM,IAAc,EAAG,CACnBC,EAAKM,OAAS,I,CAGhB,IAAIE,EAAYlC,KAAKuB,MAIrB,GAAIvB,KAAKsB,mBAAoB,CAC3BY,EAAYlC,KAAKgB,MAAMI,OAASpB,KAAKqB,Y,CAIvCK,EAAKO,KAAOR,EAAY,GAAKA,EAAYS,GACpCT,EAAYzB,KAAKuB,OAASvB,KAAKK,aAAe,IAAMoB,EAAYzB,KAAKmB,a,EAI9E,OAAOO,C,CAmBT,uBAAMS,GACJnC,KAAKc,YAAYd,KAAKoC,MAEtB,IAAKpC,KAAKqC,aAAc,CACtBrC,KAAKqC,mBAAqBC,OAAOC,eAAeC,MAAMC,kBAAkBzC,KAAKU,QAAS,c,EAI1F,iBAAAgC,GACE1C,KAAKC,kBACL0C,EAAuB3C,KAAKC,gB,CAG9B,oBAAA2C,GACEC,EAA0B7C,KAAKC,gB,CAGjC,MAAA6C,GACE,MAAMC,EAAU,CACd,mBAAoB,KACpB,CAAC,2BAA2B/C,KAAKuB,WAAYvB,KAAKuB,OAGpD,OACEyB,EAACC,EAAI,KACHD,EAAA,OAAKE,MAAOH,GACVC,EAAA,OACEE,MAAM,0BACNC,KAAK,OAAM,aACCnD,KAAKqC,aAAae,OAE7BpD,KAAKgB,MAAMqC,KAAI,CAAC1B,EAAMJ,IACrByB,EAAA,wBAAAM,OAAAC,OAAA,GACMvD,KAAKwB,kBAAkBD,GAAM,CACjCiC,KAAM7B,EAAK6B,KACXC,SAAU9B,EAAK8B,SACfL,MAAOzB,EAAKyB,MACZF,MAAM,gC"}

package/dist/stzh-components/p-8f98fc45.system.entry.js

@@ -1,2 +0,0 @@
-var __awaiter=this&&this.__awaiter||function(t,i,e,s){function a(t){return t instanceof e?t:new e((function(i){i(t)}))}return new(e||(e=Promise))((function(e,n){function l(t){try{h(s.next(t))}catch(t){n(t)}}function r(t){try{h(s["throw"](t))}catch(t){n(t)}}function h(t){t.done?e(t.value):a(t.value).then(l,r)}h((s=s.apply(t,i||[])).next())}))};var __generator=this&&this.__generator||function(t,i){var e={label:0,sent:function(){if(n[0]&1)throw n[1];return n[1]},trys:[],ops:[]},s,a,n,l;return l={next:r(0),throw:r(1),return:r(2)},typeof Symbol==="function"&&(l[Symbol.iterator]=function(){return this}),l;function r(t){return function(i){return h([t,i])}}function h(r){if(s)throw new TypeError("Generator is already executing.");while(l&&(l=0,r[0]&&(e=0)),e)try{if(s=1,a&&(n=r[0]&2?a["return"]:r[0]?a["throw"]||((n=a["return"])&&n.call(a),0):a.next)&&!(n=n.call(a,r[1])).done)return n;if(a=0,n)r=[r[0]&2,n.value];switch(r[0]){case 0:case 1:n=r;break;case 4:e.label++;return{value:r[1],done:false};case 5:e.label++;a=r[1];r=[0];continue;case 7:r=e.ops.pop();e.trys.pop();continue;default:if(!(n=e.trys,n=n.length>0&&n[n.length-1])&&(r[0]===6||r[0]===2)){e=0;continue}if(r[0]===3&&(!n||r[1]>n[0]&&r[1]<n[3])){e.label=r[1];break}if(r[0]===6&&e.label<n[1]){e.label=n[1];n=r;break}if(n&&e.label<n[2]){e.label=n[2];e.ops.push(r);break}if(n[2])e.ops.pop();e.trys.pop();continue}r=i.call(t,e)}catch(t){r=[6,t];a=0}finally{s=n=0}if(r[0]&5)throw r[1];return{value:r[0]?r[1]:void 0,done:true}}};System.register(["./p-290fcb28.system.js","./p-bd1030c9.system.js"],(function(t){"use strict";var i,e,s,a,n,l,r,h,o;return{setters:[function(t){i=t.r;e=t.c;s=t.h;a=t.a;n=t.g;l=t.F},function(t){r=t.m;h=t.a;o=t.r}],execute:function(){var d=".sc-stzh-datalist-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular);color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-datalist-h{display:none}.sc-stzh-datalist-h *.sc-stzh-datalist,.sc-stzh-datalist-h *.sc-stzh-datalist::before,.sc-stzh-datalist-h *.sc-stzh-datalist::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-datalist-h .has-focus.sc-stzh-datalist{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}.sc-stzh-datalist-h .stzh-fylingfocus-focused.sc-stzh-datalist{outline-style:none !important}.sc-stzh-datalist-h .stzh-fylingfocus-focused.sc-stzh-datalist::-moz-focus-inner{border:0 !important}.sc-stzh-datalist-h{--item-label-min-width:7.5rem}@media screen and (min-width: 800px){.sc-stzh-datalist-h{--item-label-min-width:9rem}}[disable-label-min-width].sc-stzh-datalist-h:not([disable-label-min-width=false]){--item-label-min-width:none}.sc-stzh-datalist-h .sc-stzh-datalist-s>stzh-details,.stzh-datalist.sc-stzh-datalist stzh-details.sc-stzh-datalist{--content-grid-column:1 / 6;--content-padding:var(--stzh-space-large) 0 var(--stzh-space-xlarge);--content-border-bottom:0.0625rem solid var(--stzh-base-border-color)}@media screen and (min-width: 1024px){.sc-stzh-datalist-h .sc-stzh-datalist-s>stzh-details,.stzh-datalist.sc-stzh-datalist stzh-details.sc-stzh-datalist{--content-padding:var(--stzh-space-large) 0 var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-datalist-h .sc-stzh-datalist-s>stzh-details,.stzh-datalist.sc-stzh-datalist stzh-details.sc-stzh-datalist{--content-padding:var(--stzh-space-large) 0 var(--stzh-space-xxxlarge)}}.stzh-datalist__list.sc-stzh-datalist{width:100%}.stzh-datalist--has-hidden-border.sc-stzh-datalist .stzh-datalist__list.sc-stzh-datalist{margin-top:calc(var(--stzh-space-xsmall) / -2);margin-bottom:calc(var(--stzh-space-xsmall) / -2)}.stzh-datalist--direction-horizontal.sc-stzh-datalist .stzh-datalist__list.sc-stzh-datalist{width:100%;display:grid;border-collapse:collapse;grid-template-columns:auto auto minmax(auto, 1fr) auto auto;-ms-flex-align:stretch;align-items:stretch}";var c=t("stzh_datalist",function(){function t(t){var s=this;i(this,t);this.stzhDirectionChange=e(this,"stzhDirectionChange",7);this.stzhHideBorderChange=e(this,"stzhHideBorderChange",7);this._items=[];this.resizeHandler=function(){if(r("ultra").matches&&s.directionUltra!=="inherit"){s.currentDirection=s.directionUltra}else if(r("large").matches&&s.directionLarge!=="inherit"){s.currentDirection=s.directionLarge}else if(r("medium").matches&&s.directionMedium!=="inherit"){s.currentDirection=s.directionMedium}else if(r("small").matches&&s.directionSmall!=="inherit"){s.currentDirection=s.directionSmall}else{s.currentDirection=s.direction}};this.direction="vertical";this.directionSmall="horizontal";this.directionMedium="inherit";this.directionLarge="inherit";this.directionUltra="inherit";this.hideBorder=false;this.disableLabelMinWidth=false;this.currentDirection=undefined;this.items=[]}t.prototype.hideBorderWatcher=function(t){this.stzhHideBorderChange.emit({component:"stzh-datalist",value:t})};t.prototype.directionWatcher=function(){this.resizeHandler()};t.prototype.currentDirectionWatcher=function(t){this.stzhDirectionChange.emit({component:"stzh-datalist",value:t})};t.prototype.itemsWatcher=function(t){if(typeof t==="string"){this._items=JSON.parse(t)}else{this._items=t}};t.prototype.componentWillLoad=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.itemsWatcher(this.items);this.hideBorderWatcher(this.hideBorder);this.resizeHandler();return[2]}))}))};t.prototype.connectedCallback=function(){h(this.resizeHandler)};t.prototype.disconnectedCallback=function(){o(this.resizeHandler)};t.prototype.render=function(){var t;var i=(t={"stzh-datalist":true,"stzh-datalist--has-hidden-border":this.hideBorder},t["stzh-datalist--direction-".concat(this.currentDirection)]=!!this.currentDirection,t);return s(a,null,s("div",{class:i},s("div",{class:"stzh-datalist__list",role:"list"},this._items.map((function(t){return s("stzh-datalist-item",Object.assign({},t),t.items&&t.items.length>0&&s("stzh-datalist",{items:t.items}))})),s("slot",null))))};Object.defineProperty(t.prototype,"element",{get:function(){return n(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{hideBorder:["hideBorderWatcher"],direction:["directionWatcher"],directionSmall:["directionWatcher"],directionMedium:["directionWatcher"],directionLarge:["directionWatcher"],directionUltra:["directionWatcher"],currentDirection:["currentDirectionWatcher"],items:["itemsWatcher"]}},enumerable:false,configurable:true});return t}());c.style=d;var m='.sc-stzh-datalist-item-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular);color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-datalist-item-h{display:none}.sc-stzh-datalist-item-h *.sc-stzh-datalist-item,.sc-stzh-datalist-item-h *.sc-stzh-datalist-item::before,.sc-stzh-datalist-item-h *.sc-stzh-datalist-item::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-datalist-item-h .has-focus.sc-stzh-datalist-item{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}.sc-stzh-datalist-item-h .stzh-fylingfocus-focused.sc-stzh-datalist-item{outline-style:none !important}.sc-stzh-datalist-item-h .stzh-fylingfocus-focused.sc-stzh-datalist-item::-moz-focus-inner{border:0 !important}.sc-stzh-datalist-item-h{--font-family:var(--stzh-font-family-regular);--font-weight:var(--stzh-font-weight-regular);--color:inherit;--action-display:flex;--label-min-width:var(--item-label-min-width, none);--leading-icon-background-color:var(--stzh-color-grey5);--leading-icon-color:var(--stzh-color-grey70);--hover-leading-icon-background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-leading-icon-color:var(--stzh-color-white);--horizontal-min-height:3rem;display:contents}[href].sc-stzh-datalist-item-h:not([href=""]),[a11y-expanded].sc-stzh-datalist-item-h,[a11y-controls].sc-stzh-datalist-item-h{--color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--hover-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.sc-stzh-datalist-item-h .sc-stzh-datalist-item-s>stzh-datalist{margin-left:var(--stzh-space-large)}.stzh-datalist-item.sc-stzh-datalist-item{position:relative;-webkit-text-decoration-line:none;text-decoration-line:none}.stzh-datalist-item__vhidden.sc-stzh-datalist-item{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-datalist-item__wrapper.sc-stzh-datalist-item{-ms-flex-positive:1;flex-grow:1;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start}.stzh-datalist-item__leading.sc-stzh-datalist-item,.stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item__meta.sc-stzh-datalist-item,.stzh-datalist-item__action-list.sc-stzh-datalist-item{color:inherit;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;background:transparent;border:none;padding:0;-webkit-text-decoration-line:none;text-decoration-line:none}.stzh-datalist-item__leading.is-button.sc-stzh-datalist-item,.stzh-datalist-item__leading.is-link.sc-stzh-datalist-item,.stzh-datalist-item__value.is-button.sc-stzh-datalist-item,.stzh-datalist-item__value.is-link.sc-stzh-datalist-item,.stzh-datalist-item__label.is-button.sc-stzh-datalist-item,.stzh-datalist-item__label.is-link.sc-stzh-datalist-item,.stzh-datalist-item__meta.is-button.sc-stzh-datalist-item,.stzh-datalist-item__meta.is-link.sc-stzh-datalist-item,.stzh-datalist-item__action-list.is-button.sc-stzh-datalist-item,.stzh-datalist-item__action-list.is-link.sc-stzh-datalist-item{cursor:pointer}.stzh-datalist-item__leading.sc-stzh-datalist-item{-ms-flex-negative:0;flex-shrink:0}.stzh-datalist-item__leading.sc-stzh-datalist-item:not(:empty){padding-right:var(--stzh-space-xsmall)}.stzh-datalist-item__leading-icon-container.sc-stzh-datalist-item{color:var(--leading-icon-color);background-color:var(--leading-icon-background-color);width:2.5rem;height:2.5rem;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;border-radius:50%;-webkit-transition-property:color, background-color;transition-property:color, background-color;-webkit-transition-duration:var(--stzh-base-transition-animation-speed);transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-datalist-item__value.sc-stzh-datalist-item{font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing);font-family:var(--font-family);font-weight:var(--font-weight);-ms-flex-positive:1;flex-grow:1}@media screen and (min-width: 1024px){.stzh-datalist-item__value.sc-stzh-datalist-item{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item__icon.sc-stzh-datalist-item{color:var(--color)}.stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item__meta.sc-stzh-datalist-item{font-size:var(--stzh-font-curve-caption-default-font-size, var(--stzh-font-nano-font-size));line-height:var(--stzh-font-curve-caption-default-text-line-height, var(--stzh-font-nano-text-line-height))}@media screen and (min-width: 1024px){.stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item__meta.sc-stzh-datalist-item{font-size:var(--stzh-font-curve-caption-medium-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-caption-medium-text-line-height, var(--stzh-font-micro-text-line-height))}}.stzh-datalist-item__meta.sc-stzh-datalist-item{-ms-flex-pack:end;justify-content:flex-end}.stzh-datalist-item__label.sc-stzh-datalist-item{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-lead-color)}.stzh-datalist-item__action-list.sc-stzh-datalist-item{display:var(--action-display);-ms-flex-pack:center;justify-content:center;text-align:center}.stzh-datalist-item__action-list.sc-stzh-datalist-item:not(:empty){padding-left:var(--stzh-space-xsmall)}.stzh-datalist-item__action.is-non-interactive.sc-stzh-datalist-item{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;width:var(--stzh-form-input-tiny-height);height:var(--stzh-form-input-tiny-height)}.stzh-datalist-item__action.is-button[variant=tertiary].sc-stzh-datalist-item{--color:inherit}.stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item__icon.sc-stzh-datalist-item{-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed)}.stzh-datalist-item__richtext.sc-stzh-datalist-item{color:inherit;font-family:inherit;font-weight:inherit}.stzh-datalist-item__interactive.sc-stzh-datalist-item{position:absolute;top:0;left:0}.stzh-datalist-item--is-button.sc-stzh-datalist-item .stzh-datalist-item__icon.is-open.sc-stzh-datalist-item{display:none}.stzh-datalist-item--is-button.stzh-datalist-item--is-expanded.sc-stzh-datalist-item .stzh-datalist-item__icon.is-closed.sc-stzh-datalist-item{display:none}.stzh-datalist-item--is-button.stzh-datalist-item--is-expanded.sc-stzh-datalist-item .stzh-datalist-item__icon.is-open.sc-stzh-datalist-item{display:-ms-inline-flexbox;display:inline-flex}.stzh-datalist-item--is-interactive.sc-stzh-datalist-item:hover .stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item--is-interactive.sc-stzh-datalist-item:hover .stzh-datalist-item__icon.sc-stzh-datalist-item{color:var(--hover-color)}.stzh-datalist-item--is-interactive.sc-stzh-datalist-item:hover .stzh-datalist-item__value.sc-stzh-datalist-item{-webkit-text-decoration-line:underline;text-decoration-line:underline}.stzh-datalist-item--is-interactive.sc-stzh-datalist-item:hover .stzh-datalist-item__leading-icon-container.sc-stzh-datalist-item,.stzh-datalist-item--is-interactive.sc-stzh-datalist-item:focus-within .stzh-datalist-item__leading-icon-container.sc-stzh-datalist-item{color:var(--hover-leading-icon-color);background-color:var(--hover-leading-icon-background-color)}.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item{display:-ms-flexbox;display:flex;padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-xsmall)}.stzh-datalist-item--direction-vertical.stzh-datalist-item--has-hidden-border.sc-stzh-datalist-item{padding-top:calc(var(--stzh-space-xsmall) / 2);padding-bottom:calc(var(--stzh-space-xsmall) / 2)}.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item:not(.stzh-datalist-item--has-hidden-border){border-bottom:0.0625rem solid var(--stzh-base-border-color)}.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__leading-icon-container.sc-stzh-datalist-item{width:2.5rem;height:2.5rem}.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__leading-icon.sc-stzh-datalist-item{--size:var(--stzh-icon-size-medium)}.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item{-ms-flex-direction:column;flex-direction:column}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item+.stzh-datalist-item__nested.sc-stzh-datalist-item{display:contents}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item+.stzh-datalist-item__nested.sc-stzh-datalist-item .stzh-datalist-item__nested-inner.sc-stzh-datalist-item{grid-column:1/6}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__leading.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__action-list.sc-stzh-datalist-item{min-height:var(--horizontal-min-height)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item{padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-xsmall)}.stzh-datalist-item--direction-horizontal.stzh-datalist-item--has-hidden-border.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.stzh-datalist-item--has-hidden-border.sc-stzh-datalist-item .stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.stzh-datalist-item--has-hidden-border.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item{padding-top:calc(var(--stzh-space-xsmall) / 2);padding-bottom:calc(var(--stzh-space-xsmall) / 2)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item:not(.stzh-datalist-item--has-hidden-border) .stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item:not(.stzh-datalist-item--has-hidden-border) .stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item:not(.stzh-datalist-item--has-hidden-border) .stzh-datalist-item__meta.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item:not(.stzh-datalist-item--has-hidden-border) .stzh-datalist-item__action-list.sc-stzh-datalist-item{border-bottom:0.0625rem solid var(--stzh-base-border-color)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item:not(:empty){min-width:var(--label-min-width);padding-right:var(--stzh-space-xsmall)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item:not(:empty){padding-left:var(--stzh-space-xsmall)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__leading-icon-container.sc-stzh-datalist-item{width:2rem;height:2rem}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__meta-status.sc-stzh-datalist-item+.stzh-datalist-item__meta-text.sc-stzh-datalist-item{margin-left:var(--stzh-space-xsmall)}';var z=0;var u=t("stzh_datalist_item",function(){function t(t){var s=this;i(this,t);this.stzhItemActionClick=e(this,"stzhItemActionClick",7);this.actionClick=function(t){s.stzhItemActionClick.emit({component:"stzh-datalist-item",originalEvent:t})};this.handleDirectionChange=function(t){s.direction=t.detail.value};this.handleHideBorderChange=function(t){s.hideBorder=t.detail.value};this.localization=undefined;this.direction="vertical";this.href=undefined;this.rel=undefined;this.target=undefined;this.download=undefined;this.leadingIcon=undefined;this.icon=undefined;this.iconLabel=undefined;this.iconTooltip=undefined;this.label="";this.value="";this.meta="";this.statusLabel="";this.statusType="default";this.hideBorder=false;this.a11yExpanded=undefined;this.a11yControls=undefined;this.external=false}t.prototype.externalWatcher=function(){this.external=this.rel&&this.rel.includes("external")};t.prototype.renderInner=function(t){var i=t?"button":this.href?"a":"div";return s(l,null,s(i,{"aria-hidden":this.label?null:"true",tabindex:"-1",id:"".concat(this.datalistItemId,"-label"),class:{"stzh-datalist-item__label":true,"is-button":t,"is-link":!!this.href},href:this.href,rel:this.rel,target:this.target,download:this.download},this.label),s(i,{id:"".concat(this.datalistItemId,"-value"),class:{"stzh-datalist-item__value":true,"is-button":t,"is-link":!!this.href},href:this.href,rel:this.rel,target:this.target,download:this.download,"aria-labelledby":i!=="div"?"".concat(this.datalistItemId,"-label ").concat(this.datalistItemId,"-value ").concat(this.datalistItemId,"-meta"):null,"aria-controls":this.a11yControls||null,"aria-expanded":typeof this.a11yExpanded!=="undefined"?this.a11yExpanded?"true":"false":null},this.external&&s("div",{class:"stzh-datalist-item__vhidden"},this.localization.$globals.externalLinkLabel),this.download&&s("div",{class:"stzh-datalist-item__vhidden"},this.localization.$globals.downloadLinkLabel),s("stzh-richtext",{class:"stzh-datalist-item__richtext",innerHTML:this.value},s("slot",{name:"value"}))),s(i,{"aria-hidden":this.statusLabel||this.meta?null:"true",tabindex:"-1",id:"".concat(this.datalistItemId,"-meta"),class:{"stzh-datalist-item__meta":true,"is-button":t,"is-link":!!this.href},href:this.href,rel:this.rel,target:this.target,download:this.download},this.statusLabel&&s("stzh-status",{class:"stzh-datalist-item__meta-status",label:this.statusLabel,type:this.statusType}),this.meta&&s("span",{class:"stzh-datalist-item__meta-text"},this.meta)))};t.prototype.renderLeadingIcon=function(t){var i=t?"button":this.href?"a":"div";return s(i,{role:"presentation","aria-hidden":"true",tabindex:"-1",class:{"stzh-datalist-item__leading":true,"is-button":t,"is-link":!!this.href},href:this.href,rel:this.rel,target:this.target,download:this.download},this.leadingIcon&&s("div",{class:"stzh-datalist-item__leading-icon-container"},s("stzh-icon",{class:"stzh-datalist-item__leading-icon",name:this.leadingIcon})))};t.prototype.connectedCallback=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.datalist=this.element.closest("stzh-datalist");if(this.datalist){this.direction=this.datalist.currentDirection;this.hideBorder=this.datalist.hideBorder;this.datalist.addEventListener("stzhDirectionChange",this.handleDirectionChange);this.datalist.addEventListener("stzhHideBorderChange",this.handleHideBorderChange)}return[2]}))}))};t.prototype.disconnectedCallback=function(){if(this.datalist){this.datalist.removeEventListener("stzhDirectionChange",this.handleDirectionChange);this.datalist.removeEventListener("stzhHideBorderChange",this.handleHideBorderChange);this.datalist=null}};t.prototype.componentWillLoad=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(i){switch(i.label){case 0:this.datalistItemId="stzh-datalist-item-".concat(z++);this.externalWatcher();if(!!this.localization)return[3,2];t=this;return[4,window.stzhComponents.utils.fetchTranslations(this.element,"datalist-item")];case 1:t.localization=i.sent();i.label=2;case 2:return[2]}}))}))};t.prototype.render=function(){var t;var i=this;var e=typeof this.a11yExpanded!=="undefined"||typeof this.a11yControls!=="undefined";var n=!this.href&&this.icon;var r=(t={"stzh-datalist-item":true,"stzh-datalist-item--is-interactive":!!this.href||e,"stzh-datalist-item--is-link":!!this.href,"stzh-datalist-item--is-button":e,"stzh-datalist-item--is-expanded":this.a11yExpanded,"stzh-datalist-item--has-hidden-border":this.hideBorder},t["stzh-datalist-item--direction-".concat(this.direction)]=!!this.direction,t);var h=e?"button":this.href?"a":"div";var o=function(){return s("stzh-button",{class:{"stzh-datalist-item__action":true,"is-button":true},variant:"tertiary",size:"tiny","aria-label":i.iconLabel||"".concat(i.label," ").concat(i.value),iconOnly:true,icon:i.icon,onClick:i.actionClick})};return s(a,{role:"listitem"},s("div",{class:r},this.direction==="horizontal"?s(l,null,this.renderLeadingIcon(e),this.renderInner(e)):s(l,null,this.renderLeadingIcon(e),s("div",{class:"stzh-datalist-item__wrapper"},this.renderInner(e))),s(h,{role:n?null:"presentation","aria-hidden":n?null:"true",tabindex:"-1",class:{"stzh-datalist-item__action-list":true,"is-button":e,"is-link":!!this.href},href:this.href,rel:this.rel,target:this.target,download:this.download},this.href&&(this.download?s("div",{class:"stzh-datalist-item__action is-non-interactive"},s("stzh-icon",{class:"stzh-datalist-item__icon",name:this.icon?this.icon:"download"})):s("div",{class:"stzh-datalist-item__action is-non-interactive"},s("stzh-icon",{class:"stzh-datalist-item__icon",name:this.icon?this.icon:this.external?"external-link":"arrow-right"}))),e&&s("div",{class:"stzh-datalist-item__action is-non-interactive"},s("stzh-icon",{class:"stzh-datalist-item__icon is-closed",name:this.icon?this.icon:"plus"}),s("stzh-icon",{class:"stzh-datalist-item__icon is-open",name:this.icon?this.icon:"minus"})),n&&(this.iconTooltip?s("stzh-tooltip",{content:this.iconTooltip},o()):o()))),s("div",{class:"stzh-datalist-item__nested"},s("div",{class:"stzh-datalist-item__nested-inner"},s("slot",null))))};Object.defineProperty(t.prototype,"element",{get:function(){return n(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{rel:["externalWatcher"]}},enumerable:false,configurable:true});return t}());u.style=m}}}));
-//# sourceMappingURL=p-8f98fc45.system.entry.js.map

package/dist/stzh-components/p-8f98fc45.system.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stzhDatalistCss","StzhDatalist","exports","this","_items","resizeHandler","media","matches","_this","directionUltra","currentDirection","directionLarge","directionMedium","directionSmall","direction","class_1","prototype","hideBorderWatcher","newValue","stzhHideBorderChange","emit","component","value","directionWatcher","currentDirectionWatcher","stzhDirectionChange","itemsWatcher","JSON","parse","componentWillLoad","items","hideBorder","connectedCallback","addMediaChangeListener","disconnectedCallback","removeMediaChangeListener","render","classes","_a","concat","h","Host","class","role","map","item","Object","assign","length","stzhDatalistItemCss","datalistItemCounter","StzhDatalistItem","actionClick","originalEvent","stzhItemActionClick","handleDirectionChange","event","detail","handleHideBorderChange","class_2","externalWatcher","external","rel","includes","renderInner","isButton","Item","href","Fragment","label","tabindex","id","datalistItemId","target","download","a11yControls","a11yExpanded","localization","$globals","externalLinkLabel","downloadLinkLabel","innerHTML","name","statusLabel","meta","type","statusType","renderLeadingIcon","leadingIcon","datalist","element","closest","addEventListener","removeEventListener","window","stzhComponents","utils","fetchTranslations","_b","sent","hasActionButton","icon","ActionButton","variant","size","iconLabel","iconOnly","onClick","iconTooltip","content"],"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":["/**\n * @prop --item-label-min-width: Min width of label\n */\n\n: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 { 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 window.stzhComponents.utils.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"],"mappings":"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"}

package/dist/stzh-components/p-9bfe7d0d.system.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stzhAccordionCss","StzhAccordion","exports","class_1","prototype","openListener","event","accordionItemOpened","target","accordionOpened","closest","this","multiselectable","detail","component","element","items","Array","from","querySelectorAll","forEach","item","hide","setItemFocus","accordionItem","action","accordion","filter","disabled","currentIndex","indexOf","length","setFocus","render","classes","h","Host","class"],"sources":["src/components/stzh-accordion/stzh-accordion.scss?tag=stzh-accordion&encapsulation=shadow","src/components/stzh-accordion/stzh-accordion.tsx"],"sourcesContent":[":host {\n  ::slotted(stzh-accordion-item:not(:last-child)) {\n    margin-bottom: space('small');\n  }\n}\n\n.stzh-accordion {\n\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Listen,\n  Method\n} from \"@stencil/core\";\n\nimport {\n  StzhAccordionItemOpenEvent\n} from \"../../index\";\n\n/**\n * @slot - Slot for `stzh-accordion-item` elements\n */\n@Component({\n  tag: \"stzh-accordion\",\n  styleUrl: \"stzh-accordion.scss\",\n  shadow: true\n})\nexport class StzhAccordion {\n  /** Whether folds are collapsible */\n  @Prop() collapsible: boolean = true;\n\n  /** Whether multiple folds can be opened at once */\n  @Prop() multiselectable: boolean = true;\n\n  @Element() element: HTMLStzhAccordionElement;\n\n  @Listen(\"stzhOpen\")\n  openListener(event: CustomEvent<StzhAccordionItemOpenEvent>) {\n    const accordionItemOpened = event.target as HTMLStzhAccordionItemElement;\n    const accordionOpened = accordionItemOpened.closest(\"stzh-accordion\");\n\n    if (\n      this.multiselectable\n      || (event.detail && event.detail.component !== \"stzh-accordion-item\")\n      || accordionOpened !== this.element\n    ) {\n      return;\n    }\n\n    const items: HTMLStzhAccordionItemElement[] = Array.from(accordionOpened.querySelectorAll(\"stzh-accordion-item\"));\n    items.forEach((item) => {\n      if (item !== accordionItemOpened) {\n        item.hide();\n      }\n    });\n  }\n\n  /** Set focus to accordion item */\n  @Method()\n  async setItemFocus(accordionItem: HTMLStzhAccordionItemElement, action: string) {\n    const accordion = accordionItem.closest(\"stzh-accordion\");\n\n    if (accordion !== this.element) {\n      return;\n    }\n\n    const items = (Array.from(accordion.querySelectorAll(\":scope > stzh-accordion-item\")) as  HTMLStzhAccordionItemElement[])\n      .filter((item) => !item.disabled);\n\n    const currentIndex = items.indexOf(accordionItem);\n\n    if ((action === 'prev' || action === 'next') && currentIndex === null) {\n      action = action === 'prev' ? 'last' : 'first'\n    }\n\n    if (action === 'prev' && currentIndex === 0) {\n      action = 'last'\n    }\n\n    if (action === 'next' && currentIndex === items.length - 1) {\n      action = 'first'\n    }\n\n    if (action === 'prev') {\n      items[currentIndex - 1].setFocus();\n    } else if (action === 'next') {\n      items[currentIndex + 1].setFocus();\n    } else if (action === 'last') {\n      items[items.length - 1].setFocus();\n    } else if (action === 'first') {\n      items[0].setFocus();\n    } else {\n      accordionItem.setFocus();\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-accordion\": true,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"wmDAAA,IAAMA,EAAmB,kyB,ICsBZC,EAAaC,EAAA,4B,yCAEO,K,qBAGI,I,CAKnCC,EAAAC,UAAAC,aAAA,SAAaC,GACX,IAAMC,EAAsBD,EAAME,OAClC,IAAMC,EAAkBF,EAAoBG,QAAQ,kBAEpD,GACEC,KAAKC,iBACDN,EAAMO,QAAUP,EAAMO,OAAOC,YAAc,uBAC5CL,IAAoBE,KAAKI,QAC5B,CACA,M,CAGF,IAAMC,EAAwCC,MAAMC,KAAKT,EAAgBU,iBAAiB,wBAC1FH,EAAMI,SAAQ,SAACC,GACb,GAAIA,IAASd,EAAqB,CAChCc,EAAKC,M,MAOLnB,EAAAC,UAAAmB,aAAN,SAAmBC,EAA6CC,G,+FACxDC,EAAYF,EAAcd,QAAQ,kBAExC,GAAIgB,IAAcf,KAAKI,QAAS,CAC9B,S,CAGIC,EAASC,MAAMC,KAAKQ,EAAUP,iBAAiB,iCAClDQ,QAAO,SAACN,GAAS,OAACA,EAAKO,QAAN,IAEdC,EAAeb,EAAMc,QAAQN,GAEnC,IAAKC,IAAW,QAAUA,IAAW,SAAWI,IAAiB,KAAM,CACrEJ,EAASA,IAAW,OAAS,OAAS,O,CAGxC,GAAIA,IAAW,QAAUI,IAAiB,EAAG,CAC3CJ,EAAS,M,CAGX,GAAIA,IAAW,QAAUI,IAAiBb,EAAMe,OAAS,EAAG,CAC1DN,EAAS,O,CAGX,GAAIA,IAAW,OAAQ,CACrBT,EAAMa,EAAe,GAAGG,U,MACnB,GAAIP,IAAW,OAAQ,CAC5BT,EAAMa,EAAe,GAAGG,U,MACnB,GAAIP,IAAW,OAAQ,CAC5BT,EAAMA,EAAMe,OAAS,GAAGC,U,MACnB,GAAIP,IAAW,QAAS,CAC7BT,EAAM,GAAGgB,U,KACJ,CACLR,EAAcQ,U,kBAIlB7B,EAAAC,UAAA6B,OAAA,WACE,IAAMC,EAAU,CACd,iBAAkB,MAGpB,OACEC,EAACC,EAAI,KACHD,EAAA,OAAKE,MAAOH,GACVC,EAAA,c,4HA7EgB,I"}

package/dist/stzh-components/p-aafc8687.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as i,h as s,a,g as e,F as l}from"./p-c92165bd.js";import{m as h,a as n,r as d}from"./p-cc8c83a8.js";const o=".sc-stzh-datalist-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular);color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-datalist-h{display:none}.sc-stzh-datalist-h *.sc-stzh-datalist,.sc-stzh-datalist-h *.sc-stzh-datalist::before,.sc-stzh-datalist-h *.sc-stzh-datalist::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-datalist-h .has-focus.sc-stzh-datalist{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}.sc-stzh-datalist-h .stzh-fylingfocus-focused.sc-stzh-datalist{outline-style:none !important}.sc-stzh-datalist-h .stzh-fylingfocus-focused.sc-stzh-datalist::-moz-focus-inner{border:0 !important}.sc-stzh-datalist-h{--item-label-min-width:7.5rem}@media screen and (min-width: 800px){.sc-stzh-datalist-h{--item-label-min-width:9rem}}[disable-label-min-width].sc-stzh-datalist-h:not([disable-label-min-width=false]){--item-label-min-width:none}.sc-stzh-datalist-h .sc-stzh-datalist-s>stzh-details,.stzh-datalist.sc-stzh-datalist stzh-details.sc-stzh-datalist{--content-grid-column:1 / 6;--content-padding:var(--stzh-space-large) 0 var(--stzh-space-xlarge);--content-border-bottom:0.0625rem solid var(--stzh-base-border-color)}@media screen and (min-width: 1024px){.sc-stzh-datalist-h .sc-stzh-datalist-s>stzh-details,.stzh-datalist.sc-stzh-datalist stzh-details.sc-stzh-datalist{--content-padding:var(--stzh-space-large) 0 var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-datalist-h .sc-stzh-datalist-s>stzh-details,.stzh-datalist.sc-stzh-datalist stzh-details.sc-stzh-datalist{--content-padding:var(--stzh-space-large) 0 var(--stzh-space-xxxlarge)}}.stzh-datalist__list.sc-stzh-datalist{width:100%}.stzh-datalist--has-hidden-border.sc-stzh-datalist .stzh-datalist__list.sc-stzh-datalist{margin-top:calc(var(--stzh-space-xsmall) / -2);margin-bottom:calc(var(--stzh-space-xsmall) / -2)}.stzh-datalist--direction-horizontal.sc-stzh-datalist .stzh-datalist__list.sc-stzh-datalist{width:100%;display:grid;border-collapse:collapse;grid-template-columns:auto auto minmax(auto, 1fr) auto auto;-ms-flex-align:stretch;align-items:stretch}";const r=class{constructor(s){t(this,s);this.stzhDirectionChange=i(this,"stzhDirectionChange",7);this.stzhHideBorderChange=i(this,"stzhHideBorderChange",7);this._items=[];this.resizeHandler=()=>{if(h("ultra").matches&&this.directionUltra!=="inherit"){this.currentDirection=this.directionUltra}else if(h("large").matches&&this.directionLarge!=="inherit"){this.currentDirection=this.directionLarge}else if(h("medium").matches&&this.directionMedium!=="inherit"){this.currentDirection=this.directionMedium}else if(h("small").matches&&this.directionSmall!=="inherit"){this.currentDirection=this.directionSmall}else{this.currentDirection=this.direction}};this.direction="vertical";this.directionSmall="horizontal";this.directionMedium="inherit";this.directionLarge="inherit";this.directionUltra="inherit";this.hideBorder=false;this.disableLabelMinWidth=false;this.currentDirection=undefined;this.items=[]}hideBorderWatcher(t){this.stzhHideBorderChange.emit({component:"stzh-datalist",value:t})}directionWatcher(){this.resizeHandler()}currentDirectionWatcher(t){this.stzhDirectionChange.emit({component:"stzh-datalist",value:t})}itemsWatcher(t){if(typeof t==="string"){this._items=JSON.parse(t)}else{this._items=t}}async componentWillLoad(){this.itemsWatcher(this.items);this.hideBorderWatcher(this.hideBorder);this.resizeHandler()}connectedCallback(){n(this.resizeHandler)}disconnectedCallback(){d(this.resizeHandler)}render(){const t={"stzh-datalist":true,"stzh-datalist--has-hidden-border":this.hideBorder,[`stzh-datalist--direction-${this.currentDirection}`]:!!this.currentDirection};return s(a,null,s("div",{class:t},s("div",{class:"stzh-datalist__list",role:"list"},this._items.map((t=>s("stzh-datalist-item",Object.assign({},t),t.items&&t.items.length>0&&s("stzh-datalist",{items:t.items})))),s("slot",null))))}get element(){return e(this)}static get watchers(){return{hideBorder:["hideBorderWatcher"],direction:["directionWatcher"],directionSmall:["directionWatcher"],directionMedium:["directionWatcher"],directionLarge:["directionWatcher"],directionUltra:["directionWatcher"],currentDirection:["currentDirectionWatcher"],items:["itemsWatcher"]}}};r.style=o;const c='.sc-stzh-datalist-item-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular);color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-datalist-item-h{display:none}.sc-stzh-datalist-item-h *.sc-stzh-datalist-item,.sc-stzh-datalist-item-h *.sc-stzh-datalist-item::before,.sc-stzh-datalist-item-h *.sc-stzh-datalist-item::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-datalist-item-h .has-focus.sc-stzh-datalist-item{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}.sc-stzh-datalist-item-h .stzh-fylingfocus-focused.sc-stzh-datalist-item{outline-style:none !important}.sc-stzh-datalist-item-h .stzh-fylingfocus-focused.sc-stzh-datalist-item::-moz-focus-inner{border:0 !important}.sc-stzh-datalist-item-h{--font-family:var(--stzh-font-family-regular);--font-weight:var(--stzh-font-weight-regular);--color:inherit;--action-display:flex;--label-min-width:var(--item-label-min-width, none);--leading-icon-background-color:var(--stzh-color-grey5);--leading-icon-color:var(--stzh-color-grey70);--hover-leading-icon-background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-leading-icon-color:var(--stzh-color-white);--horizontal-min-height:3rem;display:contents}[href].sc-stzh-datalist-item-h:not([href=""]),[a11y-expanded].sc-stzh-datalist-item-h,[a11y-controls].sc-stzh-datalist-item-h{--color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--hover-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.sc-stzh-datalist-item-h .sc-stzh-datalist-item-s>stzh-datalist{margin-left:var(--stzh-space-large)}.stzh-datalist-item.sc-stzh-datalist-item{position:relative;-webkit-text-decoration-line:none;text-decoration-line:none}.stzh-datalist-item__vhidden.sc-stzh-datalist-item{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-datalist-item__wrapper.sc-stzh-datalist-item{-ms-flex-positive:1;flex-grow:1;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start}.stzh-datalist-item__leading.sc-stzh-datalist-item,.stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item__meta.sc-stzh-datalist-item,.stzh-datalist-item__action-list.sc-stzh-datalist-item{color:inherit;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;background:transparent;border:none;padding:0;-webkit-text-decoration-line:none;text-decoration-line:none}.stzh-datalist-item__leading.is-button.sc-stzh-datalist-item,.stzh-datalist-item__leading.is-link.sc-stzh-datalist-item,.stzh-datalist-item__value.is-button.sc-stzh-datalist-item,.stzh-datalist-item__value.is-link.sc-stzh-datalist-item,.stzh-datalist-item__label.is-button.sc-stzh-datalist-item,.stzh-datalist-item__label.is-link.sc-stzh-datalist-item,.stzh-datalist-item__meta.is-button.sc-stzh-datalist-item,.stzh-datalist-item__meta.is-link.sc-stzh-datalist-item,.stzh-datalist-item__action-list.is-button.sc-stzh-datalist-item,.stzh-datalist-item__action-list.is-link.sc-stzh-datalist-item{cursor:pointer}.stzh-datalist-item__leading.sc-stzh-datalist-item{-ms-flex-negative:0;flex-shrink:0}.stzh-datalist-item__leading.sc-stzh-datalist-item:not(:empty){padding-right:var(--stzh-space-xsmall)}.stzh-datalist-item__leading-icon-container.sc-stzh-datalist-item{color:var(--leading-icon-color);background-color:var(--leading-icon-background-color);width:2.5rem;height:2.5rem;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;border-radius:50%;-webkit-transition-property:color, background-color;transition-property:color, background-color;-webkit-transition-duration:var(--stzh-base-transition-animation-speed);transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-datalist-item__value.sc-stzh-datalist-item{font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing);font-family:var(--font-family);font-weight:var(--font-weight);-ms-flex-positive:1;flex-grow:1}@media screen and (min-width: 1024px){.stzh-datalist-item__value.sc-stzh-datalist-item{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item__icon.sc-stzh-datalist-item{color:var(--color)}.stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item__meta.sc-stzh-datalist-item{font-size:var(--stzh-font-curve-caption-default-font-size, var(--stzh-font-nano-font-size));line-height:var(--stzh-font-curve-caption-default-text-line-height, var(--stzh-font-nano-text-line-height))}@media screen and (min-width: 1024px){.stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item__meta.sc-stzh-datalist-item{font-size:var(--stzh-font-curve-caption-medium-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-caption-medium-text-line-height, var(--stzh-font-micro-text-line-height))}}.stzh-datalist-item__meta.sc-stzh-datalist-item{-ms-flex-pack:end;justify-content:flex-end}.stzh-datalist-item__label.sc-stzh-datalist-item{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-lead-color)}.stzh-datalist-item__action-list.sc-stzh-datalist-item{display:var(--action-display);-ms-flex-pack:center;justify-content:center;text-align:center}.stzh-datalist-item__action-list.sc-stzh-datalist-item:not(:empty){padding-left:var(--stzh-space-xsmall)}.stzh-datalist-item__action.is-non-interactive.sc-stzh-datalist-item{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;width:var(--stzh-form-input-tiny-height);height:var(--stzh-form-input-tiny-height)}.stzh-datalist-item__action.is-button[variant=tertiary].sc-stzh-datalist-item{--color:inherit}.stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item__icon.sc-stzh-datalist-item{-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed)}.stzh-datalist-item__richtext.sc-stzh-datalist-item{color:inherit;font-family:inherit;font-weight:inherit}.stzh-datalist-item__interactive.sc-stzh-datalist-item{position:absolute;top:0;left:0}.stzh-datalist-item--is-button.sc-stzh-datalist-item .stzh-datalist-item__icon.is-open.sc-stzh-datalist-item{display:none}.stzh-datalist-item--is-button.stzh-datalist-item--is-expanded.sc-stzh-datalist-item .stzh-datalist-item__icon.is-closed.sc-stzh-datalist-item{display:none}.stzh-datalist-item--is-button.stzh-datalist-item--is-expanded.sc-stzh-datalist-item .stzh-datalist-item__icon.is-open.sc-stzh-datalist-item{display:-ms-inline-flexbox;display:inline-flex}.stzh-datalist-item--is-interactive.sc-stzh-datalist-item:hover .stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item--is-interactive.sc-stzh-datalist-item:hover .stzh-datalist-item__icon.sc-stzh-datalist-item{color:var(--hover-color)}.stzh-datalist-item--is-interactive.sc-stzh-datalist-item:hover .stzh-datalist-item__value.sc-stzh-datalist-item{-webkit-text-decoration-line:underline;text-decoration-line:underline}.stzh-datalist-item--is-interactive.sc-stzh-datalist-item:hover .stzh-datalist-item__leading-icon-container.sc-stzh-datalist-item,.stzh-datalist-item--is-interactive.sc-stzh-datalist-item:focus-within .stzh-datalist-item__leading-icon-container.sc-stzh-datalist-item{color:var(--hover-leading-icon-color);background-color:var(--hover-leading-icon-background-color)}.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item{display:-ms-flexbox;display:flex;padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-xsmall)}.stzh-datalist-item--direction-vertical.stzh-datalist-item--has-hidden-border.sc-stzh-datalist-item{padding-top:calc(var(--stzh-space-xsmall) / 2);padding-bottom:calc(var(--stzh-space-xsmall) / 2)}.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item:not(.stzh-datalist-item--has-hidden-border){border-bottom:0.0625rem solid var(--stzh-base-border-color)}.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__leading-icon-container.sc-stzh-datalist-item{width:2.5rem;height:2.5rem}.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__leading-icon.sc-stzh-datalist-item{--size:var(--stzh-icon-size-medium)}.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item{-ms-flex-direction:column;flex-direction:column}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item+.stzh-datalist-item__nested.sc-stzh-datalist-item{display:contents}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item+.stzh-datalist-item__nested.sc-stzh-datalist-item .stzh-datalist-item__nested-inner.sc-stzh-datalist-item{grid-column:1/6}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__leading.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__action-list.sc-stzh-datalist-item{min-height:var(--horizontal-min-height)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item{padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-xsmall)}.stzh-datalist-item--direction-horizontal.stzh-datalist-item--has-hidden-border.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.stzh-datalist-item--has-hidden-border.sc-stzh-datalist-item .stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.stzh-datalist-item--has-hidden-border.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item{padding-top:calc(var(--stzh-space-xsmall) / 2);padding-bottom:calc(var(--stzh-space-xsmall) / 2)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item:not(.stzh-datalist-item--has-hidden-border) .stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item:not(.stzh-datalist-item--has-hidden-border) .stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item:not(.stzh-datalist-item--has-hidden-border) .stzh-datalist-item__meta.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item:not(.stzh-datalist-item--has-hidden-border) .stzh-datalist-item__action-list.sc-stzh-datalist-item{border-bottom:0.0625rem solid var(--stzh-base-border-color)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item:not(:empty){min-width:var(--label-min-width);padding-right:var(--stzh-space-xsmall)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item:not(:empty){padding-left:var(--stzh-space-xsmall)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__leading-icon-container.sc-stzh-datalist-item{width:2rem;height:2rem}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__meta-status.sc-stzh-datalist-item+.stzh-datalist-item__meta-text.sc-stzh-datalist-item{margin-left:var(--stzh-space-xsmall)}';let z=0;const m=class{constructor(s){t(this,s);this.stzhItemActionClick=i(this,"stzhItemActionClick",7);this.actionClick=t=>{this.stzhItemActionClick.emit({component:"stzh-datalist-item",originalEvent:t})};this.handleDirectionChange=t=>{this.direction=t.detail.value};this.handleHideBorderChange=t=>{this.hideBorder=t.detail.value};this.localization=undefined;this.direction="vertical";this.href=undefined;this.rel=undefined;this.target=undefined;this.download=undefined;this.leadingIcon=undefined;this.icon=undefined;this.iconLabel=undefined;this.iconTooltip=undefined;this.label="";this.value="";this.meta="";this.statusLabel="";this.statusType="default";this.hideBorder=false;this.a11yExpanded=undefined;this.a11yControls=undefined;this.external=false}externalWatcher(){this.external=this.rel&&this.rel.includes("external")}renderInner(t){const i=t?"button":this.href?"a":"div";return s(l,null,s(i,{"aria-hidden":this.label?null:"true",tabindex:"-1",id:`${this.datalistItemId}-label`,class:{"stzh-datalist-item__label":true,"is-button":t,"is-link":!!this.href},href:this.href,rel:this.rel,target:this.target,download:this.download},this.label),s(i,{id:`${this.datalistItemId}-value`,class:{"stzh-datalist-item__value":true,"is-button":t,"is-link":!!this.href},href:this.href,rel:this.rel,target:this.target,download:this.download,"aria-labelledby":i!=="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&&s("div",{class:"stzh-datalist-item__vhidden"},this.localization.$globals.externalLinkLabel),this.download&&s("div",{class:"stzh-datalist-item__vhidden"},this.localization.$globals.downloadLinkLabel),s("stzh-richtext",{class:"stzh-datalist-item__richtext",innerHTML:this.value},s("slot",{name:"value"}))),s(i,{"aria-hidden":this.statusLabel||this.meta?null:"true",tabindex:"-1",id:`${this.datalistItemId}-meta`,class:{"stzh-datalist-item__meta":true,"is-button":t,"is-link":!!this.href},href:this.href,rel:this.rel,target:this.target,download:this.download},this.statusLabel&&s("stzh-status",{class:"stzh-datalist-item__meta-status",label:this.statusLabel,type:this.statusType}),this.meta&&s("span",{class:"stzh-datalist-item__meta-text"},this.meta)))}renderLeadingIcon(t){const i=t?"button":this.href?"a":"div";return s(i,{role:"presentation","aria-hidden":"true",tabindex:"-1",class:{"stzh-datalist-item__leading":true,"is-button":t,"is-link":!!this.href},href:this.href,rel:this.rel,target:this.target,download:this.download},this.leadingIcon&&s("div",{class:"stzh-datalist-item__leading-icon-container"},s("stzh-icon",{class:"stzh-datalist-item__leading-icon",name:this.leadingIcon})))}async connectedCallback(){this.datalist=this.element.closest("stzh-datalist");if(this.datalist){this.direction=this.datalist.currentDirection;this.hideBorder=this.datalist.hideBorder;this.datalist.addEventListener("stzhDirectionChange",this.handleDirectionChange);this.datalist.addEventListener("stzhHideBorderChange",this.handleHideBorderChange)}}disconnectedCallback(){if(this.datalist){this.datalist.removeEventListener("stzhDirectionChange",this.handleDirectionChange);this.datalist.removeEventListener("stzhHideBorderChange",this.handleHideBorderChange);this.datalist=null}}async componentWillLoad(){this.datalistItemId=`stzh-datalist-item-${z++}`;this.externalWatcher();if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"datalist-item")}}render(){const t=typeof this.a11yExpanded!=="undefined"||typeof this.a11yControls!=="undefined";const i=!this.href&&this.icon;const e={"stzh-datalist-item":true,"stzh-datalist-item--is-interactive":!!this.href||t,"stzh-datalist-item--is-link":!!this.href,"stzh-datalist-item--is-button":t,"stzh-datalist-item--is-expanded":this.a11yExpanded,"stzh-datalist-item--has-hidden-border":this.hideBorder,[`stzh-datalist-item--direction-${this.direction}`]:!!this.direction};const h=t?"button":this.href?"a":"div";const n=()=>s("stzh-button",{class:{"stzh-datalist-item__action":true,"is-button":true},variant:"tertiary",size:"tiny","aria-label":this.iconLabel||`${this.label} ${this.value}`,iconOnly:true,icon:this.icon,onClick:this.actionClick});return s(a,{role:"listitem"},s("div",{class:e},this.direction==="horizontal"?s(l,null,this.renderLeadingIcon(t),this.renderInner(t)):s(l,null,this.renderLeadingIcon(t),s("div",{class:"stzh-datalist-item__wrapper"},this.renderInner(t))),s(h,{role:i?null:"presentation","aria-hidden":i?null:"true",tabindex:"-1",class:{"stzh-datalist-item__action-list":true,"is-button":t,"is-link":!!this.href},href:this.href,rel:this.rel,target:this.target,download:this.download},this.href&&(this.download?s("div",{class:"stzh-datalist-item__action is-non-interactive"},s("stzh-icon",{class:"stzh-datalist-item__icon",name:this.icon?this.icon:"download"})):s("div",{class:"stzh-datalist-item__action is-non-interactive"},s("stzh-icon",{class:"stzh-datalist-item__icon",name:this.icon?this.icon:this.external?"external-link":"arrow-right"}))),t&&s("div",{class:"stzh-datalist-item__action is-non-interactive"},s("stzh-icon",{class:"stzh-datalist-item__icon is-closed",name:this.icon?this.icon:"plus"}),s("stzh-icon",{class:"stzh-datalist-item__icon is-open",name:this.icon?this.icon:"minus"})),i&&(this.iconTooltip?s("stzh-tooltip",{content:this.iconTooltip},n()):n()))),s("div",{class:"stzh-datalist-item__nested"},s("div",{class:"stzh-datalist-item__nested-inner"},s("slot",null))))}get element(){return e(this)}static get watchers(){return{rel:["externalWatcher"]}}};m.style=c;export{r as stzh_datalist,m as stzh_datalist_item};
-//# sourceMappingURL=p-aafc8687.entry.js.map

package/dist/stzh-components/p-aafc8687.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stzhDatalistCss","StzhDatalist","this","_items","resizeHandler","media","matches","directionUltra","currentDirection","directionLarge","directionMedium","directionSmall","direction","hideBorderWatcher","newValue","stzhHideBorderChange","emit","component","value","directionWatcher","currentDirectionWatcher","stzhDirectionChange","itemsWatcher","JSON","parse","componentWillLoad","items","hideBorder","connectedCallback","addMediaChangeListener","disconnectedCallback","removeMediaChangeListener","render","classes","h","Host","class","role","map","item","Object","assign","length","stzhDatalistItemCss","datalistItemCounter","StzhDatalistItem","actionClick","originalEvent","stzhItemActionClick","handleDirectionChange","event","detail","handleHideBorderChange","externalWatcher","external","rel","includes","renderInner","isButton","Item","href","Fragment","label","tabindex","id","datalistItemId","target","download","a11yControls","a11yExpanded","localization","$globals","externalLinkLabel","downloadLinkLabel","innerHTML","name","statusLabel","meta","type","statusType","renderLeadingIcon","leadingIcon","datalist","element","closest","addEventListener","removeEventListener","window","stzhComponents","utils","fetchTranslations","hasActionButton","icon","ActionButton","variant","size","iconLabel","iconOnly","onClick","iconTooltip","content"],"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":["/**\n * @prop --item-label-min-width: Min width of label\n */\n\n: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 { 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 window.stzhComponents.utils.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"],"mappings":"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"}

package/dist/stzh-components/p-aefc1441.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stzhVbzTickerCss","StzhVbzTicker","this","globalDisturbances","lines","counter","VBZ","DISTURBANCE_GLOBAL","DISTURBANCE_INFORMATION","DISTURBANCE_CONSTRUCTION","DISTURBANCE_NORMAL","DISTURBANCE_EVENT","DISTURBANCE_BUS","localizationWatcher","collator","Intl","Collator","localization","$locale","numeric","apiWatcher","newValue","apiUrl","api","replace","includes","Date","now","data","axios","get","dataWatcher","_data","JSON","parse","_b","_a","Message","forEach","message","urls","channel","filter","name","CHANNEL_TICKER","url","map","reduce","a","b","concat","infoUrl","find","indexOf","CHANNEL_INFO_URL_FILTER","baseType","BASE_TYPE_GLOBAL","push","id","head","category","startDate","sDate","sTime","endDate","eDate","eTime","altStart","altEnd","affectedProduct","affectedLines","product","lineId","line","cls","disturbances","alert","Object","keys","key","sort","compare","componentWillLoad","window","stzhComponents","utils","fetchTranslations","element","dateAdapter","createFormatParseAdapter","$formats","$globals","renderDisturbance","disturbance","h","class","formatSpan","size","href","moreInfo","target","icon","moreInfoLink","render","classes","Host","length","noDisturbances","furtherDisturbanceTitle","disturbanceTitle","constructionsTitle","Fragment","role","slot"],"sources":["src/components/stzh-vbz-ticker/stzh-vbz-ticker.scss?tag=stzh-vbz-ticker&encapsulation=scoped","src/components/stzh-vbz-ticker/stzh-vbz-ticker.tsx"],"sourcesContent":[":host {\n}\n\n.stzh-vbz-ticker {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n\n  @include mq($from: medium) {\n    flex-direction: row;\n    align-items: flex-start;\n  }\n\n  &__icon {\n    --size: #{iconSize('small')};\n    margin-right: space('xsmall');\n  }\n\n  &__title {\n    @include font('medium');\n    @include fontCurve('p1');\n    display: flex;\n    flex-wrap: wrap;\n  }\n\n  &__title-parts {\n    display: flex;\n    flex-wrap: wrap;\n    margin: calc(#{space('xxxsmall')} / -1) 0;\n  }\n\n  &__title-part {\n    display: flex;\n    align-items: center;\n    white-space: nowrap;\n    margin: space('xxxsmall') 0;\n\n    &:not(:last-child) {\n      margin-right: space('large');\n    }\n\n    &--no-disturbances {\n      color: $colorTruegreen;\n    }\n\n    &--major-events {\n      color: $colorCoral;\n    }\n\n    &--disturbances {\n      color: $colorError;\n    }\n  }\n\n  // &__description {\n  //   @include fontSize('micro');\n  //   @include spaceCurve('margin-top', 'tiny');\n  // }\n\n  &__link {\n    margin-top: space('small');\n\n    @include mq($from: medium) {\n      position: absolute;\n      top: 0;\n      right: 0;\n      margin-top: 0;\n    }\n  }\n\n  &__chips {\n    display: flex;\n    flex-wrap: wrap;\n\n    &:not(:empty) {\n      margin: calc(#{space('xxsmall')} * -1);\n      margin-top: calc(#{space('medium')} - #{space('xxsmall')});\n    }\n  }\n\n  &__chip {\n    margin: space('xxsmall');\n  }\n\n  &__tooltip {\n    --width: 334px;\n  }\n\n  &__disturbance {\n    display: flex;\n    align-items: flex-start;\n\n    &:not(:first-child) {\n      margin-top: space('small');\n    }\n  }\n\n  &__disturbance--type0 &__disturbance-title,\n  &__disturbance--type0 &__disturbance-icon,\n  &__disturbance--type2 &__disturbance-title,\n  &__disturbance--type2 &__disturbance-icon {\n    color: $colorError;\n  }\n\n  &__disturbance-title {\n    @include font('medium');\n    display: flex;\n  }\n\n  &__disturbance--type0 &__disturbance-title,\n  &__disturbance--type2 &__disturbance-title {\n    @include font('heavy');\n  }\n\n  &__disturbance-icon {\n    --size: #{iconSize('xsmall')};\n    margin-top: space('xxxsmall');\n    margin-right: space('xsmall');\n  }\n\n  &__disturbance-link {\n    margin-top: space('xsmall');\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Watch,\n  Element,\n  Fragment\n} from \"@stencil/core\";\n\nimport axios from 'axios';\n\nimport { StzhLocaleAdapter } from \"../../utils/date-adapter\";\n\nimport {\n  VBZ,\n  VbzTickerInfoUrl,\n  VbzTickerDisturbance,\n  VbzTickerLine\n} from \"../../index\";\n\nimport { StzhVbzTickerLocalizedText } from \"./stzh-vbz-ticker.localization\";\n\n/**\n * @slot link - Optional link to traffic situation\n */\n@Component({\n  tag: \"stzh-vbz-ticker\",\n  styleUrl: \"stzh-vbz-ticker.scss\",\n  scoped: true\n})\nexport class StzhVbzTicker {\n  /** API URL (`{lang}` is replaced in the URL)  */\n  @Prop() api: string = \"https://fpbe.zvv.ch/restproxy/himsearch?format=json&accessId=unic&channels=ticker&additionalfields=tickers:VBZ&orderBy=LMOD_DESC&lang={lang}\";\n\n  /** Data to pass in directly (alternative for API call) */\n  @Prop() data: any = \"\";\n  private _data: any;\n\n  /** More info link (`{lang}` and `{id}` are replaced in the URL) */\n  @Prop() moreInfoLink: string = \"https://zvv.ch/zvv/{lang}/fahrplan/vl.html?himIds={id}\";\n\n  /**\n   * Date adapter, for custom parsing/formatting.\n   * Must be object with a `parse` function which accepts a `string` and returns a `Date`,\n   * and a `format` function which accepts a `Date` and returns a `string`.\n   */\n  @Prop() dateAdapter: StzhLocaleAdapter;\n\n  /** Translation strings. */\n  @Prop() localization: StzhVbzTickerLocalizedText;\n\n  @Element() element: HTMLStzhVbzTickerElement;\n\n  private globalDisturbances: VbzTickerDisturbance[] = [];\n  private lines: VbzTickerLine[] = [];\n  private collator: Intl.Collator;\n\n  private counter = {\n    [`${VBZ.DISTURBANCE_GLOBAL}`]: 0,\n    [`${VBZ.DISTURBANCE_INFORMATION}`]: 0,\n    [`${VBZ.DISTURBANCE_CONSTRUCTION}`]: 0,\n    [`${VBZ.DISTURBANCE_NORMAL}`]: 0,\n    [`${VBZ.DISTURBANCE_EVENT}`]: 0,\n    [`${VBZ.DISTURBANCE_BUS}`]: 0\n  };\n\n  @Watch(\"localization\")\n  localizationWatcher() {\n    this.collator = new Intl.Collator(this.localization.$locale, {\n      numeric: true\n    });\n  }\n\n  @Watch(\"api\")\n  async apiWatcher(newValue: string) {\n    if (!newValue) {\n      return;\n    }\n\n    let apiUrl = this.api.replace(/\\{lang\\}/, this.localization.$locale)\n    apiUrl = apiUrl + (apiUrl.includes(\"?\") ? \"&\" : \"?\") + Date.now();\n\n    // load data from API\n    const { data } = await axios.get(apiUrl);\n\n    this.data = data;\n  }\n\n  @Watch(\"data\")\n  async dataWatcher(newValue: any) {\n    if (typeof newValue === \"string\") {\n      this._data = JSON.parse(newValue);\n    } else {\n      this._data = newValue;\n    }\n\n    const lines: { [key: string]: VbzTickerLine } = {};\n\n    this._data?.Message?.forEach(message => {\n      const urls: VbzTickerInfoUrl[] = message.channel\n        .filter(channel => channel.name === VBZ.CHANNEL_TICKER && channel.url)\n        .map(channel => channel.url)\n        .reduce((a, b) => a.concat(b), []);\n\n      const infoUrl = urls\n        .find(url => url.url.indexOf(VBZ.CHANNEL_INFO_URL_FILTER) !== -1);\n\n      if (message.baseType === VBZ.BASE_TYPE_GLOBAL) {\n        this.counter[VBZ.DISTURBANCE_GLOBAL]++;\n\n        this.globalDisturbances.push({\n          id: message.id,\n          head: message.head,\n          category: message.category,\n          baseType: message.baseType,\n          startDate: new Date(`${message.sDate}T${message.sTime}+02:00`),\n          endDate: new Date(`${message.eDate}T${message.eTime}+02:00`),\n          altStart: message.altStart,\n          altEnd: message.altEnd,\n          infoUrl: infoUrl\n        });\n      } else {\n        this.counter[message.category]++;\n      }\n\n      // don't add to lines if no line/product has been linked to\n      // or if it is a information disturbance or global\n      if (\n        message.affectedProduct\n        && message.category !== VBZ.DISTURBANCE_INFORMATION\n        && message.baseType !== VBZ.BASE_TYPE_GLOBAL\n      ) {\n        const affectedLines = [];\n\n        message.affectedProduct.forEach(product => {\n          if (typeof lines[product.lineId] === \"undefined\") {\n            lines[product.lineId] = {\n              line: product.line,\n              name: product.name,\n              category: product.cls,\n              disturbances: [],\n              alert: false\n            }\n          }\n\n          if (message.category === VBZ.DISTURBANCE_NORMAL) {\n            lines[product.lineId].alert = true;\n          }\n\n          // only add disturbance message to line if it was not already added (avoiding same message twice)\n          if (!affectedLines.includes(product.lineId)) {\n            affectedLines.push(product.lineId);\n\n            lines[product.lineId].disturbances.push({\n              id: message.id,\n              head: message.head,\n              category: message.category,\n              baseType: message.baseType,\n              startDate: new Date(`${message.sDate}T${message.sTime}+02:00`),\n              endDate: new Date(`${message.eDate}T${message.eTime}+02:00`),\n              altStart: message.altStart,\n              altEnd: message.altEnd,\n              infoUrl: infoUrl\n            })\n          }\n        })\n      }\n    });\n\n    this.lines = Object.keys(lines)\n      .map(key => lines[key]);\n\n    // sort by line name\n    this.lines.sort((a, b) => this.collator\n      .compare(a.line, b.line));\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"vbz-ticker\");\n      this.localizationWatcher();\n    }\n\n    if (!this.dateAdapter) {\n      this.dateAdapter = window.stzhComponents.utils.createFormatParseAdapter(\n        this.localization.$formats,\n        this.localization.$globals\n      );\n    }\n\n    if (this.data) {\n      await this.dataWatcher(this.data);\n    } else {\n      await this.apiWatcher(this.api);\n    }\n  }\n\n  renderDisturbance(disturbance: VbzTickerDisturbance) {\n    return (\n      <div class={{\n        \"stzh-vbz-ticker__disturbance\": true,\n        [`stzh-vbz-ticker__disturbance--type${disturbance.category}`]: !!disturbance.category\n      }}>\n        {disturbance.category === VBZ.DISTURBANCE_NORMAL\n          || disturbance.baseType === VBZ.BASE_TYPE_GLOBAL\n        ?\n          <stzh-icon name=\"warning-big\" class=\"stzh-vbz-ticker__disturbance-icon\"></stzh-icon>\n          :\n          <stzh-icon name=\"construction\" class=\"stzh-vbz-ticker__disturbance-icon\"></stzh-icon>\n        }\n\n        <div class=\"stzh-vbz-ticker__disturbance-text\">\n          <div class=\"stzh-vbz-ticker__disturbance-title\">\n            {disturbance.head}\n          </div>\n\n          <div class=\"stzh-vbz-ticker__disturbance-date\">\n            {this.dateAdapter.formatSpan(\n              disturbance.altStart || disturbance.startDate,\n              disturbance.altEnd || disturbance.endDate,\n              \"date\"\n            )}\n          </div>\n\n          {disturbance.infoUrl ?\n            <stzh-link\n              class=\"stzh-vbz-ticker__disturbance-link\"\n              size=\"small\"\n              href={disturbance.infoUrl.url}\n            >\n              {this.localization.moreInfo}\n            </stzh-link>\n          :\n            <stzh-link\n              class=\"stzh-vbz-ticker__disturbance-link\"\n              size=\"small\"\n              target=\"_blank\"\n              icon=\"external-link\"\n              href={this.moreInfoLink\n                .replace(/\\{lang\\}/, this.localization.$locale)\n                .replace(/\\{id\\}/, disturbance.id)}\n            >\n              {this.localization.moreInfo}\n            </stzh-link>\n          }\n        </div>\n      </div>\n    );\n  }\n\n  render() {\n    const classes = {\n      \"stzh-vbz-ticker\": true\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"stzh-vbz-ticker__text\">\n            <div class=\"stzh-vbz-ticker__title\">\n              <div class=\"stzh-vbz-ticker__title-parts\">\n                {this.lines.length === 0 && this.counter[VBZ.DISTURBANCE_GLOBAL] === 0 &&\n                  <div class=\"stzh-vbz-ticker__title-part stzh-vbz-ticker__title-part--no-disturbances\">\n                    <stzh-icon class=\"stzh-vbz-ticker__icon\" name=\"checkmark-circle\"></stzh-icon>\n                    {this.localization.noDisturbances}\n                  </div>}\n\n                {/* {this.counter[DISTURBANCE_GLOBAL] > 0 &&\n                  <div class=\"stzh-vbz-ticker__title-part stzh-vbz-ticker__title-part--major-events\">\n                    <stzh-icon class=\"stzh-vbz-ticker__icon\" name=\"important-warning\"></stzh-icon>\n                    {this.localization.majorEventTitle}\n                  </div>} */}\n\n                {this.counter[VBZ.DISTURBANCE_NORMAL] > 0 &&\n                  <div class=\"stzh-vbz-ticker__title-part stzh-vbz-ticker__title-part--disturbances\">\n                    <stzh-icon class=\"stzh-vbz-ticker__icon\" name=\"warning\"></stzh-icon>\n                    {this.counter[VBZ.DISTURBANCE_GLOBAL] > 0 ?\n                      this.localization.furtherDisturbanceTitle : this.localization.disturbanceTitle}\n                  </div>}\n\n                {(this.counter[VBZ.DISTURBANCE_CONSTRUCTION] > 0\n                  || this.counter[VBZ.DISTURBANCE_EVENT] > 0\n                  || this.counter[VBZ.DISTURBANCE_BUS] > 0) &&\n                  <div class=\"stzh-vbz-ticker__title-part stzh-vbz-ticker__title-part--others\">\n                    <stzh-icon class=\"stzh-vbz-ticker__icon\" name=\"construction\"></stzh-icon>\n                    {this.localization.constructionsTitle}\n                  </div>}\n              </div>\n            </div>\n\n            {(this.lines.length > 0 || this.counter[VBZ.DISTURBANCE_GLOBAL] > 0) &&\n              <Fragment>\n                {/* <div class=\"stzh-vbz-ticker__description\">\n                  {this.counter[VBZ.DISTURBANCE_GLOBAL] > 0\n                    ? this.localization.globalDisturbance\n                    : this.localization.affectedLines}\n                </div> */}\n                <div class=\"stzh-vbz-ticker__chips\" role=\"list\">\n                  {/* {this.counter[VBZ.DISTURBANCE_GLOBAL] > 0 &&\n                    <div class=\"stzh-vbz-ticker__chip\" role=\"listitem\">\n                      <stzh-tooltip class=\"stzh-vbz-ticker__tooltip\">\n                        <stzh-vbz-linechip global></stzh-vbz-linechip>\n                        <div class=\"stzh-vbz-ticker__tooltip-content\" slot=\"content\">\n                          {this.globalDisturbances.map((disturbance) => this.renderDisturbance(disturbance))}\n                        </div>\n                      </stzh-tooltip>\n                    </div>} */}\n\n                  {this.lines.map((line) =>\n                    <div class=\"stzh-vbz-ticker__chip\" role=\"listitem\">\n                      <stzh-tooltip class=\"stzh-vbz-ticker__tooltip\">\n                        <stzh-vbz-linechip line={line.line} alert={line.alert}></stzh-vbz-linechip>\n                        <div class=\"stzh-vbz-ticker__tooltip-content\" slot=\"content\">\n                          {line.disturbances.map((disturbance) => this.renderDisturbance(disturbance))}\n                        </div>\n                      </stzh-tooltip>\n                    </div>\n                  )}\n                </div>\n              </Fragment>}\n          </div>\n\n          <div class=\"stzh-vbz-ticker__link\">\n            <slot name=\"link\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/stzh-components/p-afb2885a.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as s,h as i,F as r,a as o,g as e}from"./p-c92165bd.js";import{a,p as h}from"./p-23d404e1.js";import{h as n}from"./p-cfdb06e4.js";import{S as d}from"./p-bac917cc.js";import{c}from"./p-9b063923.js";const l=".sc-stzh-datepicker-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular);color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-datepicker-h{display:none}.sc-stzh-datepicker-h *.sc-stzh-datepicker,.sc-stzh-datepicker-h *.sc-stzh-datepicker::before,.sc-stzh-datepicker-h *.sc-stzh-datepicker::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-datepicker-h .has-focus.sc-stzh-datepicker{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}.sc-stzh-datepicker-h .stzh-fylingfocus-focused.sc-stzh-datepicker{outline-style:none !important}.sc-stzh-datepicker-h .stzh-fylingfocus-focused.sc-stzh-datepicker::-moz-focus-inner{border:0 !important}.sc-stzh-datepicker-h{width:100%}.stzh-datepicker__popover.sc-stzh-datepicker{--padding:var(--stzh-space-medium);--width:auto}.stzh-datepicker__actions.sc-stzh-datepicker{display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end}.stzh-datepicker__actions.sc-stzh-datepicker:not(:empty){margin-top:var(--stzh-space-xsmall)}";const z=class{constructor(i){t(this,i);this.stzhChange=s(this,"stzhChange",7);this.onRootFocus=()=>{if(this.input){this.input.setFocus()}};this.onInputChanged=()=>{const t=this.dateAdapter.parse(this.input.value,"dateInput");if(this.input.value===""||t){const s=a(t);if(this.value!==s){if(this.calendar){this.calendar.value=s}this.value=s}else{this.valueWatcher(s)}this.stzhChange.emit({component:"stzh-datepicker",value:this.value,valueAsDate:t})}};this.onCalendarChange=t=>{this.value=t.detail.value;this.stzhChange.emit({component:"stzh-datepicker",value:this.value,valueAsDate:t.detail.valueAsDate});if(this.input){this.input.value=t.detail.valueAsDate&&this.dateAdapter.format(t.detail.valueAsDate,"dateInput")}if(this.popover){this.popover.hide()}};this.calendarMin="";this.calendarMax="";this.calendarIsDateDisabled=()=>false;this.name="";this.value="";this.label="";this.labelHidden=false;this.readonly=false;this.disabled=false;this.description=undefined;this.descriptionLong=undefined;this.error=undefined;this.invalid=false;this.required=false;this.showMarker=false;this.size="default";this.inline=false;this.dateAdapter=undefined;this.localization=undefined;this.buttonLabel=undefined}createDateFormatters(){if(this.localization){this.dateFormatLong=new Intl.DateTimeFormat(this.localization.$locale,{day:"numeric",month:"long",year:"numeric"})}}valueWatcher(t){const s=h(t);if(this.calendar){this.calendar.value=t}if(this.input){this.input.value=this.dateAdapter.format(s,"dateInput")}this.updateButtonAccessibleLabel()}async setDate(t){this.value=a(t)}async getPopover(){return this.popover}updateButtonAccessibleLabel(){if(!this.localization){return}try{const t=h(this.value);this.buttonLabel=`${this.label}, ${this.localization.buttonLabel}, ${this.localization.selectedDateMessage} ${this.dateFormatLong.format(t)}`}catch(t){this.buttonLabel=`${this.label}, ${this.localization.buttonLabel}`}}connectedCallback(){this.createDateFormatters()}async componentWillLoad(){if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"datepicker")}if(!this.dateAdapter){this.dateAdapter=window.stzhComponents.utils.createFormatParseAdapter(this.localization.$formats,this.localization.$globals)}}componentDidLoad(){this.valueWatcher(this.value)}render(){const t={"stzh-datepicker":true,"stzh-datepicker--inline":this.inline};return i(o,{tabindex:this.disabled?null:"-1",onFocus:this.onRootFocus},i("div",{class:t},i("input",{type:"hidden",name:this.name,value:this.value}),this.inline&&i(r,null,i("stzh-calendar",{ref:t=>this.calendar=t,isDateDisabled:this.calendarIsDateDisabled,min:this.calendarMin,max:this.calendarMax,onStzhChange:this.onCalendarChange}),i("div",{class:"stzh-datepicker__actions"},i("slot",{name:"action"}))),!this.inline&&i("stzh-input",{label:this.label,labelHidden:this.labelHidden,ref:t=>this.input=t,noAutocomplete:true,onStzhChanged:this.onInputChanged,readonly:this.readonly,disabled:this.disabled,description:this.description,descriptionLong:this.descriptionLong,error:this.error,invalid:this.invalid,required:this.required,showMarker:this.showMarker,size:this.size},i("stzh-popover",{ref:t=>this.popover=t,class:"stzh-datepicker__popover",slot:"button-right",placement:"bottom-end",label:this.label},i("stzh-button",{variant:"input","icon-only":true,icon:"calendar",disabled:this.disabled,a11yLabel:this.buttonLabel}),i("div",{slot:"content"},i("stzh-calendar",{ref:t=>this.calendar=t,isDateDisabled:this.calendarIsDateDisabled,min:this.calendarMin,max:this.calendarMax,onStzhChange:this.onCalendarChange}),i("div",{class:"stzh-datepicker__actions"},i("slot",{name:"action"})))))))}get element(){return e(this)}static get watchers(){return{localization:["createDateFormatters"],value:["valueWatcher"]}}};z.style=l;const p='.sc-stzh-radio-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular);color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-radio-h{display:none}.sc-stzh-radio-h *.sc-stzh-radio,.sc-stzh-radio-h *.sc-stzh-radio::before,.sc-stzh-radio-h *.sc-stzh-radio::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-radio-h .has-focus.sc-stzh-radio{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}.sc-stzh-radio-h .stzh-fylingfocus-focused.sc-stzh-radio{outline-style:none !important}.sc-stzh-radio-h .stzh-fylingfocus-focused.sc-stzh-radio::-moz-focus-inner{border:0 !important}.sc-stzh-radio-h{display:inline-block}.sc-stzh-radio-h .sc-stzh-radio-s>stzh-text{--color:inherit}.stzh-radio__marker-symbol.sc-stzh-radio{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular)}.stzh-radio__marker-text.sc-stzh-radio{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-radio__description-wrapper.sc-stzh-radio{display:-ms-flexbox;display:flex;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.stzh-radio__error.sc-stzh-radio,.stzh-radio__description.sc-stzh-radio{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);color:var(--stzh-base-color)}.stzh-radio__error.sc-stzh-radio{color:var(--stzh-color-error)}.stzh-radio__error-list.sc-stzh-radio{list-style:none;margin:0;padding:0}.stzh-radio__description.sc-stzh-radio{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start}.stzh-radio__description-long.sc-stzh-radio{margin-left:var(--stzh-space-xxsmall);margin-top:0.1875rem}.stzh-radio__description-long-popover.sc-stzh-radio{--width:auto;--max-width:27.3125rem}.stzh-radio__description-long-popover[open].sc-stzh-radio:not([open=false]) .stzh-radio__description-long-button.sc-stzh-radio{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-radio__description-long-button.sc-stzh-radio{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;padding:0;border:none;background-color:transparent;border-radius:0.5rem;cursor:pointer;-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);color:var(--stzh-base-lead-color)}.stzh-radio__description-long-button.sc-stzh-radio:hover{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-radio.sc-stzh-radio stzh-icon.stzh-radio__description-long-icon.sc-stzh-radio{--size:var(--stzh-icon-size-xsmall)}.stzh-radio--has-error.sc-stzh-radio .stzh-radio__error.sc-stzh-radio,.stzh-radio--has-description.sc-stzh-radio .stzh-radio__description.sc-stzh-radio{margin-top:var(--stzh-space-xxsmall)}.stzh-radio__field-wrapper.sc-stzh-radio{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);position:relative;display:-ms-flexbox;display:flex;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}.stzh-radio__input.sc-stzh-radio{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;z-index:-1;opacity:0;pointer-events:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:var(--stzh-form-input-border-radius)}.stzh-radio__mark.sc-stzh-radio{border:0.0625rem solid var(--stzh-color-grey61);background-color:var(--stzh-color-white);width:1.5rem;height:1.5rem;-ms-flex-negative:0;flex-shrink:0;border-radius:50%;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-webkit-transition:border-color var(--stzh-base-transition-animation-speed);transition:border-color var(--stzh-base-transition-animation-speed)}.stzh-radio__mark.sc-stzh-radio::before{content:""}.stzh-radio__check.sc-stzh-radio{background-color:currentColor;color:var(--stzh-color-primary, var(--stzh-color-zueriblue));width:0.5rem;height:0.5rem;border-radius:50%;opacity:0}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-radio__check.sc-stzh-radio{background-color:ButtonText}}.stzh-radio__label.sc-stzh-radio{display:inline-block;color:var(--stzh-base-color);-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);margin-left:var(--stzh-space-small);line-height:1.5rem}.stzh-radio__label.sc-stzh-radio:empty{display:none}.stzh-radio__marker-symbol.sc-stzh-radio{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}.stzh-radio.sc-stzh-radio:hover .stzh-radio__label.sc-stzh-radio,.stzh-radio__input.sc-stzh-radio:checked:hover~.stzh-radio__label.sc-stzh-radio,.stzh-radio__input.sc-stzh-radio:checked:hover~.stzh-radio__mark.sc-stzh-radio .stzh-radio__check.sc-stzh-radio,.stzh-radio__input.sc-stzh-radio:checked:focus~.stzh-radio__mark.sc-stzh-radio .stzh-radio__check.sc-stzh-radio{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-radio__input.sc-stzh-radio:checked~.stzh-radio__label.sc-stzh-radio{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-radio.sc-stzh-radio:hover .stzh-radio__mark.sc-stzh-radio,.stzh-radio__input.sc-stzh-radio:focus:hover~.stzh-radio__mark.sc-stzh-radio,.stzh-radio__input.sc-stzh-radio:checked:hover~.stzh-radio__mark.sc-stzh-radio,.stzh-radio__input.sc-stzh-radio:checked:focus~.stzh-radio__mark.sc-stzh-radio{border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-radio__input.sc-stzh-radio:focus~.stzh-radio__mark.sc-stzh-radio,.stzh-radio__input.sc-stzh-radio:checked~.stzh-radio__mark.sc-stzh-radio{border-color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-radio__input.sc-stzh-radio:checked~.stzh-radio__mark.sc-stzh-radio .stzh-radio__check.sc-stzh-radio{opacity:1}.stzh-radio--is-invalid.sc-stzh-radio .stzh-radio__input.sc-stzh-radio~.stzh-radio__label.sc-stzh-radio,.stzh-radio--is-invalid.sc-stzh-radio .stzh-radio__input.sc-stzh-radio~.stzh-radio__mark.sc-stzh-radio .stzh-radio__check.sc-stzh-radio{color:var(--stzh-color-error)}.stzh-radio--is-invalid.sc-stzh-radio .stzh-radio__input.sc-stzh-radio~.stzh-radio__mark.sc-stzh-radio{border-color:var(--stzh-color-error)}.stzh-radio--is-disabled.sc-stzh-radio .stzh-radio__field-wrapper.sc-stzh-radio{cursor:not-allowed}.stzh-radio--is-disabled.sc-stzh-radio .stzh-radio__input.sc-stzh-radio~.stzh-radio__label.sc-stzh-radio,.stzh-radio--is-disabled.sc-stzh-radio .stzh-radio__input.sc-stzh-radio~.stzh-radio__mark.sc-stzh-radio .stzh-radio__check.sc-stzh-radio{color:var(--stzh-color-grey61)}.stzh-radio--is-disabled.sc-stzh-radio .stzh-radio__input.sc-stzh-radio~.stzh-radio__mark.sc-stzh-radio{border-color:transparent}.stzh-radio--is-disabled.sc-stzh-radio .stzh-radio__mark.sc-stzh-radio{background-color:var(--stzh-color-black8)}';let u=0;const f=class{constructor(i){t(this,i);this.stzhChange=s(this,"stzhChange",7);this.stzhFocus=s(this,"stzhFocus",7);this.stzhBlur=s(this,"stzhBlur",7);this.focusedByInput=false;this.onInput=t=>{this.checked=this.input.checked;this.stzhChange.emit({component:"stzh-radio",originalEvent:t,value:this.value,checked:this.checked})};this.onRootFocus=()=>{if(!this.focusedByInput){this.setFocus()}this.focusedByInput=false};this.onFocus=t=>{this.focusedByInput=true;const s=new FocusEvent("focus",{view:window,bubbles:false,cancelable:false});this.element.dispatchEvent(s);this.stzhFocus.emit({component:"stzh-radio",originalEvent:t})};this.onBlur=t=>{const s=new FocusEvent("blur",{view:window,bubbles:false,cancelable:false});this.element.dispatchEvent(s);this.stzhBlur.emit({component:"stzh-radio",originalEvent:t})};this.localization=undefined;this.disabled=false;this.name="";this.value="";this.invalid=false;this.required=false;this.showMarker=false;this.checked=false;this.label="";this.description=undefined;this.descriptionLong=undefined;this.error=undefined;this.a11yDescribedby=""}async setFocus(){this.input.focus()}errorWatcher(t){if(typeof t==="string"){try{this._error=JSON.parse(t)}catch(s){if(t){this._error=[t]}else{this._error=[]}}}else if(t){this._error=t}else{this._error=[]}this.invalid=this._error.length>0}async componentWillLoad(){this.inputId=`stzh-radio-${u++}`;this.errorWatcher(this.error);if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"radio")}}render(){const t=n(this.element,"description")||!!this.description;const s=n(this.element,"description-long")||!!this.descriptionLong;const r=n(this.element,"error")||!!this.error;const e={"stzh-radio":true,"stzh-radio--has-description":t,"stzh-radio--has-description-long":s,"stzh-radio--has-error":r,"stzh-radio--is-required":this.required,"stzh-radio--is-invalid":this.invalid,"stzh-radio--is-disabled":this.disabled};return i(o,{tabindex:this.disabled?null:"-1",onFocus:this.onRootFocus},i("div",{class:e},i("label",{class:"stzh-radio__field-wrapper"},i("input",{class:"stzh-radio__input",ref:t=>this.input=t,type:"radio",id:this.inputId,name:this.name,value:this.value,disabled:this.disabled,"aria-describedby":`${this.inputId}-description ${this.a11yDescribedby}`,"aria-required":this.required?"true":"false","aria-invalid":this.invalid?"true":"false",checked:this.checked,onInput:this.onInput,onFocus:this.onFocus,onBlur:this.onBlur}),i("div",{class:"stzh-radio__mark"},i("div",{class:"stzh-radio__check"})),i("div",{class:"stzh-radio__label"},this.label?this.label:i("slot",null),this.showMarker&&i("span",{class:"stzh-radio__marker"},i("span",{class:"stzh-radio__marker-symbol","aria-hidden":"true"},this.required?this.localization.$globals.requiredFieldMarker:this.localization.$globals.optionalFieldMarker),i("span",{class:"stzh-radio__marker-text"},this.required?this.localization.$globals.requiredFieldText:this.localization.$globals.optionalFieldText)))),i(d,{classPrefix:"stzh-radio",id:`${this.inputId}-description`,error:this._error,description:this.description,descriptionLong:this.descriptionLong,descriptionLongUsed:s,moreInfoButtonLabel:this.localization.$globals.moreInfoButtonLabel})))}get element(){return e(this)}static get watchers(){return{error:["errorWatcher"]}}};f.style=p;const g=".sc-stzh-radiogroup-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular);color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-radiogroup-h{display:none}.sc-stzh-radiogroup-h *.sc-stzh-radiogroup,.sc-stzh-radiogroup-h *.sc-stzh-radiogroup::before,.sc-stzh-radiogroup-h *.sc-stzh-radiogroup::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-radiogroup-h .has-focus.sc-stzh-radiogroup{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}.sc-stzh-radiogroup-h .stzh-fylingfocus-focused.sc-stzh-radiogroup{outline-style:none !important}.sc-stzh-radiogroup-h .stzh-fylingfocus-focused.sc-stzh-radiogroup::-moz-focus-inner{border:0 !important}.sc-stzh-radiogroup-h[direction=vertical] .sc-stzh-radiogroup-s>stzh-radio:not(:last-child){margin-bottom:var(--stzh-space-medium)}.sc-stzh-radiogroup-h[direction=horizontal] .sc-stzh-radiogroup-s>stzh-radio:not(:last-child){margin-right:var(--stzh-space-large)}.stzh-radiogroup.sc-stzh-radiogroup{margin:0;padding:0;border:none}.stzh-radiogroup__marker-symbol.sc-stzh-radiogroup{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular)}.stzh-radiogroup__marker-text.sc-stzh-radiogroup{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-radiogroup__description-wrapper.sc-stzh-radiogroup{display:-ms-flexbox;display:flex;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.stzh-radiogroup__error.sc-stzh-radiogroup,.stzh-radiogroup__description.sc-stzh-radiogroup{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);color:var(--stzh-base-color)}.stzh-radiogroup__error.sc-stzh-radiogroup{color:var(--stzh-color-error)}.stzh-radiogroup__error-list.sc-stzh-radiogroup{list-style:none;margin:0;padding:0}.stzh-radiogroup__description.sc-stzh-radiogroup{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start}.stzh-radiogroup__description-long.sc-stzh-radiogroup{margin-left:var(--stzh-space-xxsmall);margin-top:0.1875rem}.stzh-radiogroup__description-long-popover.sc-stzh-radiogroup{--width:auto;--max-width:27.3125rem}.stzh-radiogroup__description-long-popover[open].sc-stzh-radiogroup:not([open=false]) .stzh-radiogroup__description-long-button.sc-stzh-radiogroup{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-radiogroup__description-long-button.sc-stzh-radiogroup{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;padding:0;border:none;background-color:transparent;border-radius:0.5rem;cursor:pointer;-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);color:var(--stzh-base-lead-color)}.stzh-radiogroup__description-long-button.sc-stzh-radiogroup:hover{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-radiogroup.sc-stzh-radiogroup stzh-icon.stzh-radiogroup__description-long-icon.sc-stzh-radiogroup{--size:var(--stzh-icon-size-xsmall)}.stzh-radiogroup--has-error.sc-stzh-radiogroup .stzh-radiogroup__error.sc-stzh-radiogroup,.stzh-radiogroup--has-description.sc-stzh-radiogroup .stzh-radiogroup__description.sc-stzh-radiogroup{margin-top:var(--stzh-space-xxsmall)}.stzh-radiogroup__fields.sc-stzh-radiogroup{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start;-ms-flex-direction:column;flex-direction:column}.stzh-radiogroup__legend.sc-stzh-radiogroup{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);padding:0;margin-bottom:var(--stzh-space-xsmall)}.stzh-radiogroup--hide-legend.sc-stzh-radiogroup .stzh-radiogroup__legend.sc-stzh-radiogroup{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-radiogroup--direction-horizontal.sc-stzh-radiogroup .stzh-radiogroup__fields.sc-stzh-radiogroup{-ms-flex-direction:row;flex-direction:row}";const m="stzh-radio, stzh-button[type=radio], stzh-card";let _=0;const b=class{constructor(s){t(this,s);this._preventUpdateProperties=[];this.init=()=>{this.radios=Array.from(this.element.querySelectorAll(m));this.updateRadiosProperty("show-marker",false);this.updateRadiosProperty("a11y-describedby",`${this.radiogroupId}-description`);this.watchValue(this.value);this.watchName(this.name);this.watchDisabled(this.disabled);this.watchInvalid(this.invalid);this.watchRequired(this.required)};this.localization=undefined;this.disabled=false;this.name=undefined;this.legend=undefined;this.hideLegend=false;this.invalid=false;this.required=false;this.showMarker=false;this.value="";this.direction="vertical";this.description=undefined;this.descriptionLong=undefined;this.error=undefined;this.checkedRadio=null;this.preventUpdateProperties=[]}watchName(t){this.updateRadiosProperty("name",t)}watchDisabled(t){this.updateRadiosProperty("disabled",t)}watchInvalid(t){this.updateRadiosProperty("invalid",t)}watchRequired(t){this.updateRadiosProperty("required",t)}watchValue(t){this.updateCheckedRadioByValue(t)}errorWatcher(t){if(typeof t==="string"){try{this._error=JSON.parse(t)}catch(s){if(t){this._error=[t]}else{this._error=[]}}}else if(t){this._error=t}else{this._error=[]}this.invalid=this._error.length>0}preventUpdatePropertiesWatcher(t){if(typeof t==="string"){this._preventUpdateProperties=JSON.parse(t)}else{this._preventUpdateProperties=t}}onChange(t){this.value=t.detail.value}updateRadiosProperty(t,s){this.radios.forEach((i=>{if(t==="name"||this._preventUpdateProperties.indexOf(t)===-1){i[c(t)]=s}}))}updateCheckedRadioByValue(t){this.checkedRadio=this.radios.find((s=>s.value===t));if(this.checkedRadio){this.checkedRadio.checked=true}this.uncheckRadios()}uncheckRadios(){this.radios.forEach((t=>{if(!this.checkedRadio||t!==this.checkedRadio){t.checked=false}}))}async componentWillLoad(){this.radiogroupId=`stzh-radiogroup-${_++}`;this.errorWatcher(this.error);this.preventUpdatePropertiesWatcher(this.preventUpdateProperties);if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"radiogroup")}}componentShouldUpdate(t,s,i){return i!=="checkedRadio"}componentDidRender(){this.init()}connectedCallback(){if(!this.value){this.radios=Array.from(this.element.querySelectorAll(m));const t=this.radios.find((t=>t.checked));if(t){this.value=t.value}}this.observer=new MutationObserver(this.init);this.observer.observe(this.element,{childList:true,subtree:true})}disconnectedCallback(){if(this.observer){this.observer.disconnect()}}render(){const t=n(this.element,"description")||!!this.description;const s=n(this.element,"description-long")||!!this.descriptionLong;const r=n(this.element,"error")||!!this.error;const o={"stzh-radiogroup":true,"stzh-radiogroup--has-description":t,"stzh-radiogroup--has-description-long":s,"stzh-radiogroup--has-error":r,"stzh-radiogroup--is-required":this.required,"stzh-radiogroup--is-disabled":this.disabled,"stzh-radiogroup--is-invalid":this.invalid,"stzh-radiogroup--hide-legend":this.hideLegend,[`stzh-radiogroup--direction-${this.direction}`]:!!this.direction};return i("fieldset",{class:o},this.legend&&i("legend",{class:"stzh-radiogroup__legend"},this.legend,this.showMarker&&i("span",{class:"stzh-radiogroup__marker"},i("span",{class:"stzh-radiogroup__marker-symbol","aria-hidden":"true"},this.required?this.localization.$globals.requiredFieldMarker:this.localization.$globals.optionalFieldMarker),i("span",{class:"stzh-radiogroup__marker-text"},this.required?this.localization.$globals.requiredFieldText:this.localization.$globals.optionalFieldText))),i("div",{class:"stzh-radiogroup__fields"},i("slot",null)),i(d,{classPrefix:"stzh-radiogroup",id:`${this.radiogroupId}-description`,error:this._error,description:this.description,descriptionLong:this.descriptionLong,descriptionLongUsed:s,moreInfoButtonLabel:this.localization.$globals.moreInfoButtonLabel}))}get element(){return e(this)}static get watchers(){return{name:["watchName"],disabled:["watchDisabled"],invalid:["watchInvalid"],required:["watchRequired"],value:["watchValue"],error:["errorWatcher"],preventUpdateProperties:["preventUpdatePropertiesWatcher"]}}};b.style=g;export{z as stzh_datepicker,f as stzh_radio,b as stzh_radiogroup};
-//# sourceMappingURL=p-afb2885a.entry.js.map

package/dist/stzh-components/p-afb2885a.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stzhDatepickerCss","StzhDatepicker","this","onRootFocus","input","setFocus","onInputChanged","parsedDate","dateAdapter","parse","value","isoDate","printISODate","calendar","valueWatcher","stzhChange","emit","component","valueAsDate","onCalendarChange","event","detail","format","popover","hide","createDateFormatters","localization","dateFormatLong","Intl","DateTimeFormat","$locale","day","month","year","newValue","date","parseISODate","updateButtonAccessibleLabel","setDate","getPopover","buttonLabel","label","selectedDateMessage","err","connectedCallback","componentWillLoad","window","stzhComponents","utils","fetchTranslations","element","createFormatParseAdapter","$formats","$globals","componentDidLoad","render","classes","inline","h","Host","tabindex","disabled","onFocus","class","type","name","Fragment","ref","el","isDateDisabled","calendarIsDateDisabled","min","calendarMin","max","calendarMax","onStzhChange","labelHidden","noAutocomplete","onStzhChanged","readonly","description","descriptionLong","error","invalid","required","showMarker","size","slot","placement","variant","icon","a11yLabel","stzhRadioCss","radioCounter","StzhRadio","focusedByInput","onInput","checked","originalEvent","focusEvent","FocusEvent","view","bubbles","cancelable","dispatchEvent","stzhFocus","onBlur","blurEvent","stzhBlur","focus","errorWatcher","_error","JSON","e","length","inputId","descriptionUsed","hasSlot","descriptionLongUsed","errorUsed","id","a11yDescribedby","requiredFieldMarker","optionalFieldMarker","requiredFieldText","optionalFieldText","StzhInputDescription","classPrefix","moreInfoButtonLabel","stzhRadiogroupCss","SELECTOR_RADIO","radiogroupCounter","StzhRadiogroup","_preventUpdateProperties","init","radios","Array","from","querySelectorAll","updateRadiosProperty","radiogroupId","watchValue","watchName","watchDisabled","watchInvalid","watchRequired","updateCheckedRadioByValue","preventUpdatePropertiesWatcher","onChange","prop","forEach","radio","indexOf","camelCase","checkedRadio","find","uncheckRadios","preventUpdateProperties","componentShouldUpdate","_newValue","_oldValue","componentDidRender","observer","MutationObserver","observe","childList","subtree","disconnectedCallback","disconnect","hideLegend","direction","legend"],"sources":["src/components/stzh-datepicker/stzh-datepicker.scss?tag=stzh-datepicker&encapsulation=scoped","src/components/stzh-datepicker/stzh-datepicker.tsx","src/components/stzh-radio/stzh-radio.scss?tag=stzh-radio&encapsulation=scoped","src/components/stzh-radio/stzh-radio.tsx","src/components/stzh-radiogroup/stzh-radiogroup.scss?tag=stzh-radiogroup&encapsulation=scoped","src/components/stzh-radiogroup/stzh-radiogroup.tsx"],"sourcesContent":[":host {\n  width: 100%;\n}\n\n.stzh-datepicker {\n  &__popover {\n    --padding: #{space('medium')};\n    --width: auto;\n  }\n\n  &__actions {\n    display: flex;\n    justify-content: flex-end;\n\n    &:not(:empty) {\n      margin-top: space('xsmall');\n    }\n  }\n}\n","import {\n  Component,\n  Prop,\n  Host,\n  Element,\n  h,\n  Event,\n  EventEmitter,\n  Method,\n  Watch,\n  Fragment,\n  State\n} from \"@stencil/core\";\n\nimport {\n  StzhCalendarChangeEvent,\n  StzhDatepickerChangeEvent\n} from \"../../index\";\n\nimport { StzhCalendarDateDisabledPredicate } from \"../../index\";\n\nimport { printISODate, parseISODate } from \"../../utils/date-utils\"\nimport { StzhLocaleAdapter } from \"../../utils/date-adapter\"\n\nimport { StzhDatepickerLocalizedText } from \"./stzh-datepicker.localization\";\n\n/**\n * @slot action - Slot for action below calendar (stzh-link element)\n */\n@Component({\n  tag: \"stzh-datepicker\",\n  styleUrl: \"stzh-datepicker.scss\",\n  scoped: true\n})\nexport class StzhDatepicker {\n  /**\n   * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n   * This setting can be used alone or together with the max property.\n   */\n  @Prop() calendarMin: string = \"\"\n\n  /**\n   * Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n   * This setting can be used alone or together with the min property.\n   */\n  @Prop() calendarMax: string = \"\"\n\n  /**\n   * Controls which days are disabled and therefore disallowed.\n   * For example, this can be used to disallow selection of weekends.\n   */\n  @Prop() calendarIsDateDisabled: StzhCalendarDateDisabledPredicate = () => false\n\n  /** Name of the hidden date picker input. */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** Value of hidden date picker input (current selected date in ISO format). */\n  @Prop({ mutable: true }) value: string = \"\";\n\n  /** Label for input field and popover */\n  @Prop() label: string = \"\";\n\n  /** Whether label is visually hidden. */\n  @Prop() labelHidden: boolean = false;\n\n  /** Whether the element is readonly or not */\n  @Prop({ reflect: true }) readonly: boolean = false;\n\n  /** Whether the element is disabled or not */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover (use description-long slot as alternative) */\n  @Prop() descriptionLong: string;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** Append text to label depending if field is optional/required. true -> show \"(optional)\", false -> show nothing */\n  @Prop({ reflect: true }) showMarker: boolean = false;\n\n  /** Size variant */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" = \"default\";\n\n  /** Show calendar inline */\n  @Prop() inline: boolean = false;\n\n  /**\n   * Date adapter, for custom parsing/formatting.\n   * Must be object with a `parse` function which accepts a `string` and returns a `Date`,\n   * and a `format` function which accepts a `Date` and returns a `string`.\n   */\n  @Prop() dateAdapter: StzhLocaleAdapter;\n\n  /**  Translation strings. */\n  @Prop() localization: StzhDatepickerLocalizedText;\n\n  @State() buttonLabel: string;\n\n  @Watch(\"localization\")\n  createDateFormatters() {\n    if (this.localization) {\n      this.dateFormatLong = new Intl.DateTimeFormat(this.localization.$locale, {\n        day: \"numeric\",\n        month: \"long\",\n        year: \"numeric\",\n      })\n    }\n  }\n\n  /** Update calendar and input when value prop has changed */\n  @Watch(\"value\")\n  valueWatcher(newValue: string) {\n    const date = parseISODate(newValue);\n\n    if (this.calendar) {\n      this.calendar.value = newValue;\n    }\n\n    if (this.input) {\n      this.input.value = this.dateAdapter.format(date, \"dateInput\");\n    }\n\n    this.updateButtonAccessibleLabel();\n  }\n\n  /** Set value by a JS Date object */\n  @Method()\n  async setDate(date: Date) {\n    this.value = printISODate(date);\n  }\n\n  /** Return internal popover element */\n  @Method()\n  async getPopover(): Promise<HTMLStzhPopoverElement> {\n    return this.popover;\n  }\n\n  /** Datepicker change event */\n  @Event() stzhChange: EventEmitter<StzhDatepickerChangeEvent>;\n\n  @Element() element: HTMLStzhDatepickerElement;\n\n  /**\n   * To format dates exclusively for the benefit of screen readers.\n   *\n   * We prefer DateTimeFormat over date.toLocaleDateString, as the former has\n   * better performance when formatting large number of dates. See:\n   * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString#Performance\n   */\n  private dateFormatLong: Intl.DateTimeFormat\n\n  private input: HTMLStzhInputElement;\n  private popover: HTMLStzhPopoverElement;\n  private calendar: HTMLStzhCalendarElement;\n\n  private onRootFocus = () => {\n    if (this.input) {\n      this.input.setFocus();\n    }\n  }\n\n  private onInputChanged = () => {\n    const parsedDate = this.dateAdapter.parse(this.input.value, \"dateInput\");\n\n    if (this.input.value === \"\" || parsedDate) {\n      const isoDate = printISODate(parsedDate);\n\n      if (this.value !== isoDate) {\n        if (this.calendar) {\n          this.calendar.value = isoDate;\n        }\n\n        this.value = isoDate;\n      } else {\n        this.valueWatcher(isoDate);\n      }\n\n      this.stzhChange.emit({\n        component: \"stzh-datepicker\",\n        value: this.value,\n        valueAsDate: parsedDate,\n      })\n    }\n  }\n\n  private onCalendarChange = (event: CustomEvent<StzhCalendarChangeEvent>) => {\n    this.value = event.detail.value;\n    this.stzhChange.emit({\n      component: \"stzh-datepicker\",\n      value: this.value,\n      valueAsDate: event.detail.valueAsDate,\n    });\n\n    if (this.input) {\n      this.input.value = event.detail.valueAsDate\n        && this.dateAdapter.format(event.detail.valueAsDate, \"dateInput\");\n    }\n\n    if (this.popover) {\n      this.popover.hide();\n    }\n  }\n\n  private updateButtonAccessibleLabel() {\n    if (!this.localization) {\n      return;\n    }\n\n    try {\n      const valueAsDate = parseISODate(this.value);\n      this.buttonLabel = `${this.label}, ${this.localization.buttonLabel}, ${this.localization.selectedDateMessage} ${this.dateFormatLong.format(valueAsDate)}`;\n    } catch (err) {\n      this.buttonLabel = `${this.label}, ${this.localization.buttonLabel}`;\n    }\n  }\n\n  connectedCallback() {\n    this.createDateFormatters();\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"datepicker\");\n    }\n\n    if (!this.dateAdapter) {\n      this.dateAdapter = window.stzhComponents.utils.createFormatParseAdapter(\n        this.localization.$formats,\n        this.localization.$globals\n      );\n    }\n  }\n\n  componentDidLoad() {\n    this.valueWatcher(this.value);\n  }\n\n  render() {\n    const classes = {\n      \"stzh-datepicker\": true,\n      \"stzh-datepicker--inline\": this.inline\n    };\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          <input\n            type=\"hidden\"\n            name={this.name}\n            value={this.value}\n          />\n\n          {this.inline &&\n            <Fragment>\n              <stzh-calendar\n                ref={(el) => (this.calendar = el as HTMLStzhCalendarElement)}\n                isDateDisabled={this.calendarIsDateDisabled}\n                min={this.calendarMin}\n                max={this.calendarMax}\n                onStzhChange={this.onCalendarChange}\n              ></stzh-calendar>\n              <div class=\"stzh-datepicker__actions\">\n                <slot name=\"action\"></slot>\n              </div>\n            </Fragment>\n          }\n\n          {!this.inline &&\n            <stzh-input\n              label={this.label}\n              labelHidden={this.labelHidden}\n              ref={(el) => (this.input = el as HTMLStzhInputElement)}\n              noAutocomplete\n              onStzhChanged={this.onInputChanged}\n              readonly={this.readonly}\n              disabled={this.disabled}\n              description={this.description}\n              descriptionLong={this.descriptionLong}\n              error={this.error}\n              invalid={this.invalid}\n              required={this.required}\n              showMarker={this.showMarker}\n              size={this.size}\n            >\n              <stzh-popover\n                ref={(el) => (this.popover = el as HTMLStzhPopoverElement)}\n                class=\"stzh-datepicker__popover\"\n                slot=\"button-right\"\n                placement=\"bottom-end\"\n                label={this.label}\n              >\n                <stzh-button\n                  variant=\"input\"\n                  icon-only\n                  icon=\"calendar\"\n                  disabled={this.disabled}\n                  a11yLabel={this.buttonLabel}\n                >\n                </stzh-button>\n                <div slot=\"content\">\n                  <stzh-calendar\n                    ref={(el) => (this.calendar = el as HTMLStzhCalendarElement)}\n                    isDateDisabled={this.calendarIsDateDisabled}\n                    min={this.calendarMin}\n                    max={this.calendarMax}\n                    onStzhChange={this.onCalendarChange}\n                  >\n                  </stzh-calendar>\n                  <div class=\"stzh-datepicker__actions\">\n                    <slot name=\"action\"></slot>\n                  </div>\n                </div>\n              </stzh-popover>\n            </stzh-input>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n",":host {\n  display: inline-block;\n\n  ::slotted(stzh-text) {\n    --color: inherit;\n  }\n}\n\n.stzh-radio {\n\t@include input-description;\n\n  &__field-wrapper {\n    @include fontSize('milli');\n    position: relative;\n    display: flex;\n    user-select: none;\n    cursor: pointer;\n  }\n\n  &__input {\n    @include visuallyhiddenInput;\n    border-radius: $formInputBorderRadius;\n  }\n\n  &__mark {\n    @include radio__mark();\n  }\n\n  &__check {\n    @include radio__check();\n  }\n\n  &__label {\n    display: inline-block;\n    color: $baseColor;\n    transition: color $baseTransitionAnimationSpeed;\n    margin-left: space('small');\n    line-height: 24px;\n\n    &:empty {\n      display: none;\n    }\n  }\n\n  &__marker-symbol {\n    @include fontSize('micro');\n  }\n\n  /* Hover / Focus / Checked */\n\n  &:hover &__label,\n  &__input:checked:hover ~ &__label,\n  &__input:checked:hover ~ &__mark &__check,\n  &__input:checked:focus ~ &__mark &__check {\n    color: $colorPrimaryHover;\n  }\n\n  &__input:checked ~ &__label {\n    color: $colorPrimary;\n  }\n\n  &:hover &__mark,\n  &__input:focus:hover ~ &__mark,\n  &__input:checked:hover ~ &__mark,\n  &__input:checked:focus ~ &__mark {\n    border-color: $colorPrimaryHover;\n  }\n\n  &__input:focus ~ &__mark,\n  &__input:checked ~ &__mark {\n    border-color: $colorPrimary;\n  }\n\n  &__input:checked ~ &__mark &__check {\n    opacity: 1;\n  }\n\n  /* Invalid */\n\n  &--is-invalid &__input ~ &__label,\n  &--is-invalid &__input ~ &__mark &__check {\n    color: $colorError;\n  }\n\n  &--is-invalid &__input ~ &__mark {\n    border-color: $colorError;\n  }\n\n  /* Disabled */\n\n\t&--is-disabled &__field-wrapper {\n    cursor: not-allowed;\n  }\n\n  &--is-disabled &__input ~ &__label,\n  &--is-disabled &__input ~ &__mark &__check {\n    color: $formDisabledColor;\n  }\n\n  &--is-disabled &__input ~ &__mark {\n    border-color: $formDisabledBorderColor;\n  }\n\n  &--is-disabled &__mark {\n    background-color: $formDisabledBackgroundColor;\n  }\n}\n","import {\n  Host,\n  Component,\n  Prop,\n  Event,\n  Element,\n  EventEmitter,\n  Method,\n  h,\n  Watch\n} from \"@stencil/core\";\n\nimport {\n  StzhRadioChangeEvent,\n  StzhRadioFocusEvent,\n  StzhRadioBlurEvent\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\nlet radioCounter = 0;\n\n/**\n * @slot - Slot for label content\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot error - Slot for error\n */\n@Component({\n  tag: \"stzh-radio\",\n  styleUrl: \"stzh-radio.scss\",\n  scoped: true\n})\nexport class StzhRadio {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Whether the element is disabled or not */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** The name of the input element */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** The value of the input element */\n  @Prop({ mutable: true }) value: string = \"\";\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** Append text to label depending if field is optional/required. true -> show \"(optional)\", false -> show nothing */\n  @Prop({ reflect: true }) showMarker: boolean = false;\n\n  /** Checked status */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover (use description-long slot as alternative) */\n  @Prop() descriptionLong: string;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n  private _error: string[];\n\n  /** Id for element which describes the radio button (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  /** Focus input field */\n  @Method()\n  async setFocus() {\n    this.input.focus();\n  }\n\n  /** Input change event */\n  @Event() stzhChange: EventEmitter<StzhRadioChangeEvent>;\n\n  /** Input focus event */\n  @Event() stzhFocus: EventEmitter<StzhRadioFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhRadioBlurEvent>;\n\n  @Watch(\"error\")\n  errorWatcher(newValue: string | string[]) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._error = JSON.parse(newValue);\n      } catch (e) {\n        if (newValue) {\n          this._error = [newValue];\n        } else {\n          this._error = [];\n        }\n      }\n    } else if (newValue) {\n      this._error = newValue;\n    } else {\n      this._error = [];\n    }\n\n    this.invalid = this._error.length > 0;\n  }\n\n  @Element() element: HTMLStzhRadioElement;\n\n  private input: HTMLInputElement;\n  private inputId: string;\n  private focusedByInput: boolean = false;\n\n  private onInput = (event: InputEvent) => {\n    this.checked = this.input.checked;\n    this.stzhChange.emit({\n      component: \"stzh-radio\",\n      originalEvent: event,\n      value: this.value,\n      checked: this.checked\n    });\n  }\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.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-radio\",\n      originalEvent: event\n    });\n  }\n\n  private onBlur = (event: FocusEvent) => {\n    const blurEvent = new FocusEvent('blur', {\n      view: window,\n      bubbles: false,\n      cancelable: false\n    });\n\n    this.element.dispatchEvent(blurEvent);\n    this.stzhBlur.emit({\n      component: \"stzh-radio\",\n      originalEvent: event\n    });\n  }\n\n  async componentWillLoad() {\n    this.inputId = `stzh-radio-${radioCounter++}`;\n    this.errorWatcher(this.error);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, 'radio');\n    }\n  }\n\n  render() {\n    const descriptionUsed = hasSlot(this.element, 'description') || !!this.description;\n    const descriptionLongUsed = hasSlot(this.element, 'description-long') || !!this.descriptionLong;\n    const errorUsed = hasSlot(this.element, 'error') || !!this.error;\n\n    const classes = {\n      \"stzh-radio\": true,\n      \"stzh-radio--has-description\": descriptionUsed,\n      \"stzh-radio--has-description-long\": descriptionLongUsed,\n      \"stzh-radio--has-error\": errorUsed,\n      \"stzh-radio--is-required\": this.required,\n      \"stzh-radio--is-invalid\": this.invalid,\n      \"stzh-radio--is-disabled\": this.disabled\n    };\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          <label class=\"stzh-radio__field-wrapper\">\n            <input\n              class=\"stzh-radio__input\"\n              ref={(el) => (this.input = el as HTMLInputElement)}\n              type=\"radio\"\n              id={this.inputId}\n              name={this.name}\n              value={this.value}\n              disabled={this.disabled}\n              aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n              aria-required={this.required ? \"true\" : \"false\"}\n              aria-invalid={this.invalid ? \"true\" : \"false\"}\n              checked={this.checked}\n              onInput={this.onInput}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n            />\n            <div class=\"stzh-radio__mark\">\n              <div class=\"stzh-radio__check\"></div>\n            </div>\n            <div class=\"stzh-radio__label\">\n              {this.label ? this.label : <slot></slot>}\n              {this.showMarker &&\n                <span class=\"stzh-radio__marker\">\n                  <span class=\"stzh-radio__marker-symbol\" aria-hidden=\"true\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldMarker\n                      : this.localization.$globals.optionalFieldMarker\n                    }\n                  </span>\n                  <span class=\"stzh-radio__marker-text\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldText\n                      : this.localization.$globals.optionalFieldText\n                    }\n                  </span>\n                </span>\n              }\n            </div>\n          </label>\n          <StzhInputDescription\n            classPrefix=\"stzh-radio\"\n            id={`${this.inputId}-description`}\n            error={this._error}\n            description={this.description}\n            descriptionLong={this.descriptionLong}\n            descriptionLongUsed={descriptionLongUsed}\n            moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n          />\n        </div>\n      </Host>\n    );\n  }\n}\n",":host([direction=\"vertical\"]) {\n  ::slotted(stzh-radio:not(:last-child)) {\n    margin-bottom: space('medium');\n  }\n}\n\n:host([direction=\"horizontal\"]) {\n  ::slotted(stzh-radio:not(:last-child)) {\n    margin-right: space('large');\n  }\n}\n\n.stzh-radiogroup {\n  @include input-description;\n  margin: 0;\n  padding: 0;\n  border: none;\n\n  &__fields {\n    display: flex;\n    align-items: flex-start;\n    flex-direction: column;\n  }\n\n  &__legend {\n    @include font('heavy');\n    @include fontSize('nano');\n    padding: 0;\n    margin-bottom: space('xsmall');\n  }\n\n  &--hide-legend &__legend {\n    @include visuallyhidden;\n  }\n\n  &--direction-horizontal &__fields {\n    flex-direction: row;\n  }\n}\n","import {\n  Component,\n  Prop,\n  Element,\n  Watch,\n  h,\n  Listen\n} from \"@stencil/core\";\n\nimport { StzhRadioChangeEvent } from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { camelCase } from \"../../utils/string-utils\";\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\nconst SELECTOR_RADIO = 'stzh-radio, stzh-button[type=radio], stzh-card';\n\nlet radiogroupCounter = 0;\n\n/**\n * @slot - Slot for `stzh-radio`, `stzh-button[type=\"radio\"]` or `stzh-card` elements\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot error - Slot for error\n */\n@Component({\n  tag: \"stzh-radiogroup\",\n  styleUrl: \"stzh-radiogroup.scss\",\n  scoped: true\n})\nexport class StzhRadiogroup {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Whether the element is disabled or not */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** The name of the input radio elements, will define the radio group. If you have more than one radio group on a page, every group needs to have its own unique name */\n  @Prop({ reflect: true }) name: string;\n\n  /** The legend */\n  @Prop() legend: string;\n\n  /** Hide legend to show only for screenreaders */\n  @Prop({ reflect: true }) hideLegend: boolean = false;\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** Append text to label depending if field is optional/required. true -> show \"(optional)\", false -> show nothing */\n  @Prop({ reflect: true }) showMarker: boolean = false;\n\n  /** Select a radio by value */\n  @Prop({ mutable: true }) value: string = \"\";\n\n  /** Direction */\n  @Prop({ reflect: true }) direction: \"vertical\" | \"horizontal\" = \"vertical\";\n\n  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover (use description-long slot as alternative) */\n  @Prop() descriptionLong: string;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n  private _error: string[];\n\n  /** Current checked radio element (readonly) */\n  @Prop() checkedRadio: HTMLStzhRadioElement | null = null;\n\n  /** Prevent updating certain properties of radio elements (possible values inside array: disabled, invalid, required, hide-marker) */\n  @Prop() preventUpdateProperties: string[] | string = [];\n  private _preventUpdateProperties: string[] = [];\n\n  /** Host element */\n  @Element() element: HTMLElement;\n\n  @Watch(\"name\")\n  watchName(newValue: string) {\n    this.updateRadiosProperty(\"name\", newValue);\n  }\n\n  @Watch(\"disabled\")\n  watchDisabled(newValue: boolean) {\n    this.updateRadiosProperty(\"disabled\", newValue);\n  }\n\n  @Watch(\"invalid\")\n  watchInvalid(newValue: boolean) {\n    this.updateRadiosProperty(\"invalid\", newValue);\n  }\n\n  @Watch(\"required\")\n  watchRequired(newValue: boolean) {\n    this.updateRadiosProperty(\"required\", newValue);\n  }\n\n  @Watch(\"value\")\n  watchValue(newValue: string) {\n    this.updateCheckedRadioByValue(newValue);\n  }\n\n  @Watch(\"error\")\n  errorWatcher(newValue: string | string[]) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._error = JSON.parse(newValue);\n      } catch (e) {\n        if (newValue) {\n          this._error = [newValue];\n        } else {\n          this._error = [];\n        }\n      }\n    } else if (newValue) {\n      this._error = newValue;\n    } else {\n      this._error = [];\n    }\n\n    this.invalid = this._error.length > 0;\n  }\n\n  @Watch(\"preventUpdateProperties\")\n  preventUpdatePropertiesWatcher(newValue: string[] | string) {\n    if (typeof newValue === \"string\") {\n      this._preventUpdateProperties = JSON.parse(newValue);\n    } else {\n      this._preventUpdateProperties = newValue;\n    }\n  }\n\n  @Listen(\"stzhChange\")\n  onChange(event: CustomEvent<StzhRadioChangeEvent>) {\n    this.value = event.detail.value;\n  }\n\n  /** Radio elements */\n  private radios: HTMLStzhRadioElement[];\n  private radiogroupId: string;\n  private observer: MutationObserver;\n\n  private updateRadiosProperty(prop: string, value: any) {\n    this.radios.forEach((radio: HTMLStzhRadioElement) => {\n      if (prop === \"name\" || (this._preventUpdateProperties.indexOf(prop) === -1)) {\n        radio[camelCase(prop)] = value;\n      }\n    });\n  }\n\n  private updateCheckedRadioByValue(value: string) {\n    this.checkedRadio = this.radios.find(radio => radio.value === value);\n\n    if (this.checkedRadio) {\n      this.checkedRadio.checked = true;\n    }\n\n    this.uncheckRadios();\n  }\n\n  private uncheckRadios() {\n    // make sure that no other radios are checked than the current one or no one\n    this.radios.forEach((radio: HTMLStzhRadioElement) => {\n      if (!this.checkedRadio || radio !== this.checkedRadio) {\n        radio.checked = false;\n      }\n    });\n  }\n\n  private init = () => {\n    // update radios\n    this.radios = Array.from(this.element.querySelectorAll(SELECTOR_RADIO));\n\n    this.updateRadiosProperty(\"show-marker\", false);\n    this.updateRadiosProperty(\"a11y-describedby\", `${this.radiogroupId}-description`);\n\n    this.watchValue(this.value);\n    this.watchName(this.name);\n    this.watchDisabled(this.disabled);\n    this.watchInvalid(this.invalid);\n    this.watchRequired(this.required);\n  }\n\n  async componentWillLoad() {\n    this.radiogroupId = `stzh-radiogroup-${radiogroupCounter++}`;\n    this.errorWatcher(this.error);\n    this.preventUpdatePropertiesWatcher(this.preventUpdateProperties);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, 'radiogroup');\n    }\n  }\n\n  componentShouldUpdate(_newValue, _oldValue, prop: string) {\n    return prop !== \"checkedRadio\";\n  }\n\n  componentDidRender() {\n    this.init();\n  }\n\n  connectedCallback() {\n    if (!this.value) {\n      this.radios = Array.from(this.element.querySelectorAll(SELECTOR_RADIO));\n\n      // try to find a checkbox that might has checked set to true\n      const checkedRadio = this.radios.find(radio => radio.checked);\n\n      if (checkedRadio) {\n        this.value = checkedRadio.value;\n      }\n    }\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    const descriptionUsed = hasSlot(this.element, 'description') || !!this.description;\n    const descriptionLongUsed = hasSlot(this.element, 'description-long') || !!this.descriptionLong;\n    const errorUsed = hasSlot(this.element, 'error') || !!this.error;\n\n    const classes = {\n      \"stzh-radiogroup\": true,\n      \"stzh-radiogroup--has-description\": descriptionUsed,\n      \"stzh-radiogroup--has-description-long\": descriptionLongUsed,\n      \"stzh-radiogroup--has-error\": errorUsed,\n      \"stzh-radiogroup--is-required\": this.required,\n      \"stzh-radiogroup--is-disabled\": this.disabled,\n      \"stzh-radiogroup--is-invalid\": this.invalid,\n      \"stzh-radiogroup--hide-legend\": this.hideLegend,\n      [`stzh-radiogroup--direction-${this.direction}`]: !!this.direction\n    };\n\n    return (\n      <fieldset class={classes}>\n        {this.legend &&\n          <legend class=\"stzh-radiogroup__legend\">\n            {this.legend}\n            {this.showMarker &&\n              <span class=\"stzh-radiogroup__marker\">\n                <span class=\"stzh-radiogroup__marker-symbol\" aria-hidden=\"true\">\n                  {this.required\n                    ? this.localization.$globals.requiredFieldMarker\n                    : this.localization.$globals.optionalFieldMarker\n                  }\n                </span>\n                <span class=\"stzh-radiogroup__marker-text\">\n                  {this.required\n                    ? this.localization.$globals.requiredFieldText\n                    : this.localization.$globals.optionalFieldText\n                  }\n                </span>\n              </span>\n            }\n          </legend>\n        }\n        <div class=\"stzh-radiogroup__fields\">\n          <slot></slot>\n        </div>\n        <StzhInputDescription\n          classPrefix=\"stzh-radiogroup\"\n          id={`${this.radiogroupId}-description`}\n          error={this._error}\n          description={this.description}\n          descriptionLong={this.descriptionLong}\n          descriptionLongUsed={descriptionLongUsed}\n          moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n        />\n      </fieldset>\n    );\n  }\n}\n"],"mappings":"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"}