@oiz/stzh-components 2.6.0-aalpha → 2.6.0

package/dist/stzh-components/p-f533c689.system.entry.js

@@ -1,2 +0,0 @@
-var __awaiter=this&&this.__awaiter||function(t,e,o,r){function n(t){return t instanceof o?t:new o((function(e){e(t)}))}return new(o||(o=Promise))((function(o,i){function s(t){try{l(r.next(t))}catch(t){i(t)}}function a(t){try{l(r["throw"](t))}catch(t){i(t)}}function l(t){t.done?o(t.value):n(t.value).then(s,a)}l((r=r.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var o={label:0,sent:function(){if(i[0]&1)throw i[1];return i[1]},trys:[],ops:[]},r,n,i,s;return s={next:a(0),throw:a(1),return:a(2)},typeof Symbol==="function"&&(s[Symbol.iterator]=function(){return this}),s;function a(t){return function(e){return l([t,e])}}function l(a){if(r)throw new TypeError("Generator is already executing.");while(s&&(s=0,a[0]&&(o=0)),o)try{if(r=1,n&&(i=a[0]&2?n["return"]:a[0]?n["throw"]||((i=n["return"])&&i.call(n),0):n.next)&&!(i=i.call(n,a[1])).done)return i;if(n=0,i)a=[a[0]&2,i.value];switch(a[0]){case 0:case 1:i=a;break;case 4:o.label++;return{value:a[1],done:false};case 5:o.label++;n=a[1];a=[0];continue;case 7:a=o.ops.pop();o.trys.pop();continue;default:if(!(i=o.trys,i=i.length>0&&i[i.length-1])&&(a[0]===6||a[0]===2)){o=0;continue}if(a[0]===3&&(!i||a[1]>i[0]&&a[1]<i[3])){o.label=a[1];break}if(a[0]===6&&o.label<i[1]){o.label=i[1];i=a;break}if(i&&o.label<i[2]){o.label=i[2];o.ops.push(a);break}if(i[2])o.ops.pop();o.trys.pop();continue}a=e.call(t,o)}catch(t){a=[6,t];n=0}finally{r=i=0}if(a[0]&5)throw a[1];return{value:a[0]?a[1]:void 0,done:true}}};System.register(["./p-7b184ebb.system.js","./p-60521956.system.js"],(function(t){"use strict";var e,o,r,n;return{setters:[function(t){e=t.r;o=t.h;r=t.a},function(t){n=t.S}],execute:function(){var i=":host{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}:host[hidden]{display:none}:host *,:host *::before,:host *::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)}.stzh-amount__marker-symbol{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal}.stzh-amount__marker-text{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-amount__description-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.stzh-amount__error,.stzh-amount__description{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);color:var(--stzh-base-color)}.stzh-amount__error{color:var(--stzh-color-error)}.stzh-amount__error-list{list-style:none;margin:0;padding:0}.stzh-amount__description{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start}.stzh-amount__description-long{margin-left:var(--stzh-space-xxsmall);margin-top:0.1875rem}.stzh-amount__description-long-popover{--width:auto;--max-width:27.3125rem}.stzh-amount__description-long-popover[open]:not([open=false]) .stzh-amount__description-long-button{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-amount__description-long-button{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-amount__description-long-button:hover{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-amount stzh-icon.stzh-amount__description-long-icon{--size:var(--stzh-icon-size-xsmall)}.stzh-amount--has-error .stzh-amount__error,.stzh-amount--has-description .stzh-amount__description{margin-top:var(--stzh-space-xxsmall)}.stzh-amount__stepper-wrapper{display:-ms-flexbox;display:flex;gap:var(--stzh-space-xxsmall)}.stzh-amount stzh-input.stzh-amount__stepper-input{--text-align:center;width:100%}";var s="stzh-amount__dropdown-plus-option";var a=0;var l=t("stzh_amount",function(){function t(t){var o=this;e(this,t);this._showDropdown=!Number.isNaN(this.minValueDropdown)&&!Number.isNaN(this.maxValueDropdown)&&this.minValueDropdown<this.maxValueDropdown;this.onDropdownChange=function(t){if(t.detail.value===s){o._showDropdown=false;o.value=(o.maxValueDropdown+o.step).toString()}else{o.value=(+t.detail.value).toString()}};this.onInputMinusStepClick=function(){o.value=(+o.value-o.step).toString();o.value=o.roundToStep(+o.value).toString()};this.onInputPlusStepClick=function(){o.value=(+o.value+o.step).toString();o.value=o.roundToStep(+o.value).toString()};this.onStepperInputChange=function(t){var e=t.detail.value;e=o.roundToStep(+e).toString();if(+e>o.maxValue){e=o.maxValue.toString()}else if(+e<o.minValue){e=o.minValue.toString()}o.value=e};this.minValue=-9007199254740991;this.maxValue=9007199254740991;this.minValueDropdown=null;this.maxValueDropdown=null;this.value="";this.step=1;this.name="";this.size="default";this.disabled=false;this.popoverPlacement="bottom";this.label="";this.invalid=false;this.required=false;this.clearable=false;this.showMarker=false;this.description=undefined;this.descriptionLong=undefined;this.error=undefined;this.a11yDescribedby=""}t.prototype.minValueDropdownWatcher=function(){this.setDropdownOptions()};t.prototype.maxValueDropdownWatcher=function(){this.setDropdownOptions()};t.prototype.errorWatcher=function(t){if(typeof t==="string"){try{this._error=JSON.parse(t)}catch(e){if(t){this._error=[t]}else{this._error=[]}}}else if(t){this._error=t}else{this._error=[]}this.invalid=this._error.length>0};t.prototype.setDropdownOptions=function(){if(this._showDropdown){var t=[];for(var e=this.minValueDropdown;e<=this.maxValueDropdown;e++){t.push({text:e.toString(),value:e.toString()})}if(this.maxValue!=undefined&&this.maxValue>this.maxValueDropdown){t.push({text:"".concat(this.maxValueDropdown.toString(),"+"),value:s})}this._dropdownOptions=JSON.stringify(t)}};t.prototype.roundToStep=function(t){var e=Math.max(0,-Math.floor(Math.log10(this.step)));var o=Math.pow(10,e);var r=Math.round(t/this.step)*this.step;return Number((r*o/o).toFixed(e))};t.prototype.componentWillLoad=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.amountId="stzh-amount-".concat(a++);this.stepperInputId="".concat(this.amountId,"-stepper-input");this.setDropdownOptions();this.errorWatcher(this.error);return[2]}))}))};t.prototype.renderDropdown=function(){var t;var e=(t={"stzh-amount__dropdown":true},t["stzh-amount--popover-placement-".concat(this.popoverPlacement)]=!!this.popoverPlacement,t);return o("div",{class:e},o("stzh-dropdown",{options:this._dropdownOptions,items:[this.value],label:this.label,required:this.required,disabled:this.disabled,description:this.description,descriptionLong:this.descriptionLong,error:this.error,popoverPlacement:this.popoverPlacement,a11yDescribedby:this.a11yDescribedby,name:this.name,size:this.size,invalid:this.invalid,showMarker:this.showMarker,onStzhChange:this.onDropdownChange}))};t.prototype.renderInputStepper=function(){return o("div",{class:"stzh-amount__stepper"},o("div",{class:"stzh-amount__stepper-wrapper"},o("stzh-button",{class:"stzh-amount__stepper-minus",onClick:this.onInputMinusStepClick,variant:"secondary",icon:"minus",iconOnly:true,a11yControls:this.stepperInputId,a11yDescribedby:this.a11yDescribedby,size:this.size,disabled:+this.value<=+this.minValue||this.disabled}),o("stzh-input",{class:"stzh-amount__stepper-input",value:this.value,type:"number",label:this.label,min:this.minValue,max:this.maxValue,invalid:this.invalid,name:this.name,id:this.stepperInputId,size:this.size,step:this.step,showMarker:this.showMarker,descriptionLong:this.descriptionLong,clearable:this.clearable,disabled:this.disabled,a11yDescribedby:this.a11yDescribedby,onStzhChange:this.onStepperInputChange}),o("stzh-button",{class:"stzh-amount__stepper-plus",onClick:this.onInputPlusStepClick,variant:"secondary",icon:"plus",iconOnly:true,a11yControls:this.stepperInputId,a11yDescribedby:this.a11yDescribedby,size:this.size,disabled:+this.value>=+this.maxValue||this.disabled})),o(n,{classPrefix:"stzh-amount",id:"".concat(this.amountId,"-description"),error:this._error,description:this.description,descriptionLong:this.descriptionLong}))};t.prototype.render=function(){var t={"stzh-amount":true,"stzh-amount--has-description":!!this.description,"stzh-amount--has-description-long":!!this.descriptionLong,"stzh-amount--has-error":!!this.error};return o(r,null,o("div",{class:t,id:this.amountId},this._showDropdown?this.renderDropdown():this.renderInputStepper()))};Object.defineProperty(t,"watchers",{get:function(){return{minValueDropdown:["minValueDropdownWatcher"],maxValueDropdown:["maxValueDropdownWatcher"],error:["errorWatcher"]}},enumerable:false,configurable:true});return t}());l.style=i}}}));
-//# sourceMappingURL=p-f533c689.system.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["stzhAmountCss","DROPDOWN_ITEM_PLUS_OPTION_VALUE","amountCounter","StzhAmount","exports","this","_showDropdown","Number","isNaN","minValueDropdown","maxValueDropdown","onDropdownChange","event","detail","value","_this","step","toString","onInputMinusStepClick","roundToStep","onInputPlusStepClick","onStepperInputChange","newValue","maxValue","minValue","class_1","prototype","minValueDropdownWatcher","setDropdownOptions","maxValueDropdownWatcher","errorWatcher","_error","JSON","parse","e","invalid","length","options","i","push","text","undefined","concat","_dropdownOptions","stringify","input","decimals","Math","max","floor","log10","factor","pow","rounded","round","toFixed","componentWillLoad","amountId","stepperInputId","error","renderDropdown","classes","_a","popoverPlacement","h","class","items","label","required","disabled","description","descriptionLong","a11yDescribedby","name","size","showMarker","onStzhChange","renderInputStepper","onClick","variant","icon","iconOnly","a11yControls","type","min","id","clearable","StzhInputDescription","classPrefix","render","Host"],"sources":["src/components/stzh-amount/stzh-amount.scss?tag=stzh-amount","src/components/stzh-amount/stzh-amount.tsx"],"sourcesContent":[".stzh-amount {\n  @include input-description;\n\n  &__stepper-wrapper {\n    display: flex;\n    gap: space('xxsmall');\n  }\n\n  stzh-input#{&}__stepper-input {\n    --text-align: center;\n    width: 100%;\n  }\n}\n","import {\n  Component,\n  Host,\n  Prop,\n  h,\n  Watch,\n} from \"@stencil/core\";\n\nimport {\n  StzhDropdownChangeEvent,\n  StzhDropdownCustomEvent,\n  StzhInputChangeEvent,\n  StzhInputCustomEvent\n} from \"../../index\";\nimport { StzhInputDescription } from '../stzh-input/stzh-input-description';\n\nconst DROPDOWN_ITEM_PLUS_OPTION_VALUE = \"stzh-amount__dropdown-plus-option\"\n\nlet amountCounter = 0;\n\n@Component({\n  tag: \"stzh-amount\",\n  styleUrl: \"stzh-amount.scss\"\n})\nexport class StzhAmount {\n  /** The lowest allowed amount (can be negative). */\n  @Prop({ reflect: true }) minValue: number = -9007199254740991;\n\n  /** The highest allowed amount. */\n  @Prop({ reflect: true }) maxValue: number = 9007199254740991;\n\n  /** The lowest amount as option in the dropdown. Needs to be set to initially display a dropdown. */\n  @Prop({ reflect: true }) minValueDropdown: number | null = null;\n\n  /** The highest amount as option in the dropdown. Needs to be set to initially display a dropdown. */\n  @Prop({ reflect: true }) maxValueDropdown: number | null = null;\n  private _showDropdown: boolean = !Number.isNaN(this.minValueDropdown) && !Number.isNaN(this.maxValueDropdown)\n    && this.minValueDropdown < this.maxValueDropdown;\n\n  private _dropdownOptions: string;\n\n  /** The initial value of the amount element */\n  @Prop({ reflect: true }) value: string = \"\";\n\n  /** The step the amount can be increased or decreased */\n  @Prop({ reflect: true }) step: number = 1;\n\n  /** Name of the element (hidden select element in case of dropdown) */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** Size variant */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" = \"default\";\n\n  /** Whether the amount component is disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Popover placement for the dropdown (if applicable) */\n  @Prop({ reflect: true }) popoverPlacement: \"bottom\" | \"top\" = \"bottom\";\n\n  /** Label */\n  @Prop() label: 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  /** Whether clearable button is showing for the input field (does not apply to dropdown) */\n  @Prop({ reflect: true }) clearable: boolean = false;\n\n  /** Show text in label depending on whether field is optional/required */\n  @Prop({ reflect: true }) showMarker: boolean = false;\n\n  /** Description placed below the amount */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover */\n  @Prop() descriptionLong: string;\n\n  /** One or multiple error message(s) */\n  @Prop() error: string | string[];\n  private _error: string[];\n\n  /** Id of the element which describes the input (this will be overwritten if description prop is used) */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = '';\n\n  @Watch(\"minValueDropdown\")\n  minValueDropdownWatcher() {\n    this.setDropdownOptions();\n  }\n\n  @Watch(\"maxValueDropdown\")\n  maxValueDropdownWatcher() {\n    this.setDropdownOptions();\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  private amountId: string;\n  private stepperInputId: string;\n\n  /** Fill the dropdown with options according to maxValueDropdown & minValueDropdown. */\n  private setDropdownOptions(): void {\n    if (this._showDropdown) {\n      const options = [];\n\n      for (let i = this.minValueDropdown; i <= this.maxValueDropdown; i++) {\n        options.push({text: i.toString(), value: i.toString()});\n      }\n      if (this.maxValue != undefined && this.maxValue > this.maxValueDropdown) {\n        options.push({text: `${this.maxValueDropdown.toString()}+`, value: DROPDOWN_ITEM_PLUS_OPTION_VALUE})\n      }\n      this._dropdownOptions = JSON.stringify(options);\n    }\n  }\n\n  /** Handling dropdown changes (switch to input stepper if the plus option is selected in the dropdown). */\n  private onDropdownChange = (event: StzhDropdownCustomEvent<StzhDropdownChangeEvent>) => {\n    if (event.detail.value === DROPDOWN_ITEM_PLUS_OPTION_VALUE) {\n      this._showDropdown = false;\n      this.value = (this.maxValueDropdown + this.step).toString();\n    } else {\n      this.value = (+event.detail.value).toString();\n    }\n  }\n\n  /** Handling the minus button. */\n  private onInputMinusStepClick = () => {\n    this.value = (+this.value - this.step).toString();\n    this.value = this.roundToStep(+this.value).toString();\n  }\n\n  /** Handling the plus button. */\n  private onInputPlusStepClick = () => {\n    this.value = (+this.value + this.step).toString();\n    this.value = this.roundToStep(+this.value).toString();\n  }\n\n  /** Handling manual value change of the stepper input. */\n  private onStepperInputChange = (event: StzhInputCustomEvent<StzhInputChangeEvent>) => {\n    let newValue = event.detail.value;\n    newValue = this.roundToStep(+newValue).toString();\n\n    if (+newValue > this.maxValue) {\n      newValue = this.maxValue.toString();\n    } else if (+newValue < this.minValue) {\n      newValue = this.minValue.toString();\n    }\n\n    this.value = newValue;\n  }\n\n  /** Making sure, that the value is rounded correctly according to the step  */\n  private roundToStep(input: number): number {\n    const decimals = Math.max(0, -Math.floor(Math.log10(this.step)));\n    const factor = Math.pow(10, decimals);\n    const rounded = Math.round(input / this.step) * this.step;\n    return Number((rounded * factor / factor).toFixed(decimals));\n  }\n\n  async componentWillLoad() {\n    this.amountId = `stzh-amount-${amountCounter++}`;\n    this.stepperInputId = `${this.amountId}-stepper-input`\n    this.setDropdownOptions();\n    this.errorWatcher(this.error);\n  }\n\n  private renderDropdown(): HTMLDivElement {\n    const classes = {\n      \"stzh-amount__dropdown\": true,\n      [`stzh-amount--popover-placement-${this.popoverPlacement}`]: !!this.popoverPlacement,\n    };\n    return (\n      <div class={classes}>\n        <stzh-dropdown\n          options={this._dropdownOptions}\n          items={[this.value]}\n          label={this.label}\n          required={this.required}\n          disabled={this.disabled}\n          description={this.description}\n          descriptionLong={this.descriptionLong}\n          error={this.error}\n          popoverPlacement={this.popoverPlacement}\n          a11yDescribedby={this.a11yDescribedby}\n          name={this.name}\n          size={this.size}\n          invalid={this.invalid}\n          showMarker={this.showMarker}\n          onStzhChange={this.onDropdownChange}\n        ></stzh-dropdown>\n      </div>\n    );\n  }\n\n  private renderInputStepper(): HTMLDivElement {\n    return (\n      <div class=\"stzh-amount__stepper\">\n        <div class=\"stzh-amount__stepper-wrapper\">\n          <stzh-button\n            class=\"stzh-amount__stepper-minus\"\n            onClick={this.onInputMinusStepClick}\n            variant=\"secondary\"\n            icon=\"minus\"\n            iconOnly={true}\n            a11yControls={this.stepperInputId}\n            a11yDescribedby={this.a11yDescribedby}\n            size={this.size}\n            disabled={+this.value <= +this.minValue || this.disabled}\n          ></stzh-button>\n          <stzh-input\n            class=\"stzh-amount__stepper-input\"\n            value={this.value}\n            type=\"number\"\n            label={this.label}\n            min={this.minValue}\n            max={this.maxValue}\n            invalid={this.invalid}\n            name={this.name}\n            id={this.stepperInputId}\n            size={this.size}\n            step={this.step}\n            showMarker={this.showMarker}\n            descriptionLong={this.descriptionLong}\n            clearable={this.clearable}\n            disabled={this.disabled}\n            a11yDescribedby={this.a11yDescribedby}\n            onStzhChange={this.onStepperInputChange}\n          ></stzh-input>\n          <stzh-button\n            class=\"stzh-amount__stepper-plus\"\n            onClick={this.onInputPlusStepClick}\n            variant=\"secondary\"\n            icon=\"plus\"\n            iconOnly={true}\n            a11yControls={this.stepperInputId}\n            a11yDescribedby={this.a11yDescribedby}\n            size={this.size}\n            disabled={+this.value >= +this.maxValue || this.disabled}\n          ></stzh-button>\n        </div>\n        <StzhInputDescription\n          classPrefix=\"stzh-amount\"\n          id={`${this.amountId}-description`}\n          error={this._error}\n          description={this.description}\n          descriptionLong={this.descriptionLong}\n        />\n      </div>\n    );\n  }\n\n  render() {\n    const classes = {\n      \"stzh-amount\": true,\n      \"stzh-amount--has-description\": !!this.description,\n      \"stzh-amount--has-description-long\": !!this.descriptionLong,\n      \"stzh-amount--has-error\": !!this.error,\n    };\n\n    return (\n      <Host>\n        <div\n          class={classes}\n          id={this.amountId}\n        >\n          {\n            this._showDropdown ?\n            this.renderDropdown()\n            :\n            this.renderInputStepper()\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"8oDAAA,IAAMA,EAAgB,ujFCgBtB,IAAMC,EAAkC,oCAExC,IAAIC,EAAgB,E,IAMPC,EAAUC,EAAA,yB,mCAYbC,KAAAC,eAA0BC,OAAOC,MAAMH,KAAKI,oBAAsBF,OAAOC,MAAMH,KAAKK,mBACvFL,KAAKI,iBAAmBJ,KAAKK,iBAoG1BL,KAAAM,iBAAmB,SAACC,GAC1B,GAAIA,EAAMC,OAAOC,QAAUb,EAAiC,CAC1Dc,EAAKT,cAAgB,MACrBS,EAAKD,OAASC,EAAKL,iBAAmBK,EAAKC,MAAMC,U,KAC5C,CACLF,EAAKD,QAAUF,EAAMC,OAAOC,OAAOG,U,GAK/BZ,KAAAa,sBAAwB,WAC9BH,EAAKD,QAAUC,EAAKD,MAAQC,EAAKC,MAAMC,WACvCF,EAAKD,MAAQC,EAAKI,aAAaJ,EAAKD,OAAOG,U,EAIrCZ,KAAAe,qBAAuB,WAC7BL,EAAKD,QAAUC,EAAKD,MAAQC,EAAKC,MAAMC,WACvCF,EAAKD,MAAQC,EAAKI,aAAaJ,EAAKD,OAAOG,U,EAIrCZ,KAAAgB,qBAAuB,SAACT,GAC9B,IAAIU,EAAWV,EAAMC,OAAOC,MAC5BQ,EAAWP,EAAKI,aAAaG,GAAUL,WAEvC,IAAKK,EAAWP,EAAKQ,SAAU,CAC7BD,EAAWP,EAAKQ,SAASN,U,MACpB,IAAKK,EAAWP,EAAKS,SAAU,CACpCF,EAAWP,EAAKS,SAASP,U,CAG3BF,EAAKD,MAAQQ,C,iBA/I8B,iB,cAGD,iB,sBAGe,K,sBAGA,K,WAOlB,G,UAGD,E,UAGA,G,UAGa,U,cAGR,M,sBAGiB,S,WAGtC,G,aAGoB,M,cAGC,M,eAGC,M,gBAGC,M,oGAaoB,E,CAGnEG,EAAAC,UAAAC,wBAAA,WACEtB,KAAKuB,oB,EAIPH,EAAAC,UAAAG,wBAAA,WACExB,KAAKuB,oB,EAIPH,EAAAC,UAAAI,aAAA,SAAaR,GACX,UAAWA,IAAa,SAAU,CAChC,IACEjB,KAAK0B,OAASC,KAAKC,MAAMX,E,CACzB,MAAOY,GACP,GAAIZ,EAAU,CACZjB,KAAK0B,OAAS,CAACT,E,KACV,CACLjB,KAAK0B,OAAS,E,QAGb,GAAIT,EAAU,CACnBjB,KAAK0B,OAAST,C,KACT,CACLjB,KAAK0B,OAAS,E,CAGhB1B,KAAK8B,QAAU9B,KAAK0B,OAAOK,OAAS,C,EAO9BX,EAAAC,UAAAE,mBAAA,WACN,GAAIvB,KAAKC,cAAe,CACtB,IAAM+B,EAAU,GAEhB,IAAK,IAAIC,EAAIjC,KAAKI,iBAAkB6B,GAAKjC,KAAKK,iBAAkB4B,IAAK,CACnED,EAAQE,KAAK,CAACC,KAAMF,EAAErB,WAAYH,MAAOwB,EAAErB,Y,CAE7C,GAAIZ,KAAKkB,UAAYkB,WAAapC,KAAKkB,SAAWlB,KAAKK,iBAAkB,CACvE2B,EAAQE,KAAK,CAACC,KAAM,GAAAE,OAAGrC,KAAKK,iBAAiBO,WAAU,KAAKH,MAAOb,G,CAErEI,KAAKsC,iBAAmBX,KAAKY,UAAUP,E,GAyCnCZ,EAAAC,UAAAP,YAAA,SAAY0B,GAClB,IAAMC,EAAWC,KAAKC,IAAI,GAAID,KAAKE,MAAMF,KAAKG,MAAM7C,KAAKW,QACzD,IAAMmC,EAASJ,KAAKK,IAAI,GAAIN,GAC5B,IAAMO,EAAUN,KAAKO,MAAMT,EAAQxC,KAAKW,MAAQX,KAAKW,KACrD,OAAOT,QAAQ8C,EAAUF,EAASA,GAAQI,QAAQT,G,EAG9CrB,EAAAC,UAAA8B,kBAAN,W,qFACEnD,KAAKoD,SAAW,eAAAf,OAAexC,KAC/BG,KAAKqD,eAAiB,GAAAhB,OAAGrC,KAAKoD,SAAQ,kBACtCpD,KAAKuB,qBACLvB,KAAKyB,aAAazB,KAAKsD,O,iBAGjBlC,EAAAC,UAAAkC,eAAA,W,MACN,IAAMC,GAAOC,EAAA,CACX,wBAAyB,MACzBA,EAAC,kCAAApB,OAAkCrC,KAAK0D,qBAAuB1D,KAAK0D,iB,GAEtE,OACEC,EAAA,OAAKC,MAAOJ,GACVG,EAAA,iBACE3B,QAAShC,KAAKsC,iBACduB,MAAO,CAAC7D,KAAKS,OACbqD,MAAO9D,KAAK8D,MACZC,SAAU/D,KAAK+D,SACfC,SAAUhE,KAAKgE,SACfC,YAAajE,KAAKiE,YAClBC,gBAAiBlE,KAAKkE,gBACtBZ,MAAOtD,KAAKsD,MACZI,iBAAkB1D,KAAK0D,iBACvBS,gBAAiBnE,KAAKmE,gBACtBC,KAAMpE,KAAKoE,KACXC,KAAMrE,KAAKqE,KACXvC,QAAS9B,KAAK8B,QACdwC,WAAYtE,KAAKsE,WACjBC,aAAcvE,KAAKM,mB,EAMnBc,EAAAC,UAAAmD,mBAAA,WACN,OACEb,EAAA,OAAKC,MAAM,wBACTD,EAAA,OAAKC,MAAM,gCACTD,EAAA,eACEC,MAAM,6BACNa,QAASzE,KAAKa,sBACd6D,QAAQ,YACRC,KAAK,QACLC,SAAU,KACVC,aAAc7E,KAAKqD,eACnBc,gBAAiBnE,KAAKmE,gBACtBE,KAAMrE,KAAKqE,KACXL,UAAWhE,KAAKS,QAAUT,KAAKmB,UAAYnB,KAAKgE,WAElDL,EAAA,cACEC,MAAM,6BACNnD,MAAOT,KAAKS,MACZqE,KAAK,SACLhB,MAAO9D,KAAK8D,MACZiB,IAAK/E,KAAKmB,SACVwB,IAAK3C,KAAKkB,SACVY,QAAS9B,KAAK8B,QACdsC,KAAMpE,KAAKoE,KACXY,GAAIhF,KAAKqD,eACTgB,KAAMrE,KAAKqE,KACX1D,KAAMX,KAAKW,KACX2D,WAAYtE,KAAKsE,WACjBJ,gBAAiBlE,KAAKkE,gBACtBe,UAAWjF,KAAKiF,UAChBjB,SAAUhE,KAAKgE,SACfG,gBAAiBnE,KAAKmE,gBACtBI,aAAcvE,KAAKgB,uBAErB2C,EAAA,eACEC,MAAM,4BACNa,QAASzE,KAAKe,qBACd2D,QAAQ,YACRC,KAAK,OACLC,SAAU,KACVC,aAAc7E,KAAKqD,eACnBc,gBAAiBnE,KAAKmE,gBACtBE,KAAMrE,KAAKqE,KACXL,UAAWhE,KAAKS,QAAUT,KAAKkB,UAAYlB,KAAKgE,YAGpDL,EAACuB,EAAoB,CACnBC,YAAY,cACZH,GAAI,GAAA3C,OAAGrC,KAAKoD,SAAQ,gBACpBE,MAAOtD,KAAK0B,OACZuC,YAAajE,KAAKiE,YAClBC,gBAAiBlE,KAAKkE,kB,EAM9B9C,EAAAC,UAAA+D,OAAA,WACE,IAAM5B,EAAU,CACd,cAAe,KACf,iCAAkCxD,KAAKiE,YACvC,sCAAuCjE,KAAKkE,gBAC5C,2BAA4BlE,KAAKsD,OAGnC,OACEK,EAAC0B,EAAI,KACH1B,EAAA,OACEC,MAAOJ,EACPwB,GAAIhF,KAAKoD,UAGPpD,KAAKC,cACLD,KAAKuD,iBAELvD,KAAKwE,sB,6NA1QM,I"}

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

@@ -1,2 +0,0 @@
-import{r as t,h as s,a as i}from"./p-9e02896c.js";import{S as e}from"./p-ea61b128.js";const o=":host{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}:host[hidden]{display:none}:host *,:host *::before,:host *::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)}.stzh-amount__marker-symbol{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal}.stzh-amount__marker-text{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-amount__description-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.stzh-amount__error,.stzh-amount__description{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);color:var(--stzh-base-color)}.stzh-amount__error{color:var(--stzh-color-error)}.stzh-amount__error-list{list-style:none;margin:0;padding:0}.stzh-amount__description{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start}.stzh-amount__description-long{margin-left:var(--stzh-space-xxsmall);margin-top:0.1875rem}.stzh-amount__description-long-popover{--width:auto;--max-width:27.3125rem}.stzh-amount__description-long-popover[open]:not([open=false]) .stzh-amount__description-long-button{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-amount__description-long-button{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-amount__description-long-button:hover{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-amount stzh-icon.stzh-amount__description-long-icon{--size:var(--stzh-icon-size-xsmall)}.stzh-amount--has-error .stzh-amount__error,.stzh-amount--has-description .stzh-amount__description{margin-top:var(--stzh-space-xxsmall)}.stzh-amount__stepper-wrapper{display:-ms-flexbox;display:flex;gap:var(--stzh-space-xxsmall)}.stzh-amount stzh-input.stzh-amount__stepper-input{--text-align:center;width:100%}";const r="stzh-amount__dropdown-plus-option";let n=0;const h=class{constructor(s){t(this,s);this._showDropdown=!Number.isNaN(this.minValueDropdown)&&!Number.isNaN(this.maxValueDropdown)&&this.minValueDropdown<this.maxValueDropdown;this.onDropdownChange=t=>{if(t.detail.value===r){this._showDropdown=false;this.value=(this.maxValueDropdown+this.step).toString()}else{this.value=(+t.detail.value).toString()}};this.onInputMinusStepClick=()=>{this.value=(+this.value-this.step).toString();this.value=this.roundToStep(+this.value).toString()};this.onInputPlusStepClick=()=>{this.value=(+this.value+this.step).toString();this.value=this.roundToStep(+this.value).toString()};this.onStepperInputChange=t=>{let s=t.detail.value;s=this.roundToStep(+s).toString();if(+s>this.maxValue){s=this.maxValue.toString()}else if(+s<this.minValue){s=this.minValue.toString()}this.value=s};this.minValue=-9007199254740991;this.maxValue=9007199254740991;this.minValueDropdown=null;this.maxValueDropdown=null;this.value="";this.step=1;this.name="";this.size="default";this.disabled=false;this.popoverPlacement="bottom";this.label="";this.invalid=false;this.required=false;this.clearable=false;this.showMarker=false;this.description=undefined;this.descriptionLong=undefined;this.error=undefined;this.a11yDescribedby=""}minValueDropdownWatcher(){this.setDropdownOptions()}maxValueDropdownWatcher(){this.setDropdownOptions()}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}setDropdownOptions(){if(this._showDropdown){const t=[];for(let s=this.minValueDropdown;s<=this.maxValueDropdown;s++){t.push({text:s.toString(),value:s.toString()})}if(this.maxValue!=undefined&&this.maxValue>this.maxValueDropdown){t.push({text:`${this.maxValueDropdown.toString()}+`,value:r})}this._dropdownOptions=JSON.stringify(t)}}roundToStep(t){const s=Math.max(0,-Math.floor(Math.log10(this.step)));const i=Math.pow(10,s);const e=Math.round(t/this.step)*this.step;return Number((e*i/i).toFixed(s))}async componentWillLoad(){this.amountId=`stzh-amount-${n++}`;this.stepperInputId=`${this.amountId}-stepper-input`;this.setDropdownOptions();this.errorWatcher(this.error)}renderDropdown(){const t={"stzh-amount__dropdown":true,[`stzh-amount--popover-placement-${this.popoverPlacement}`]:!!this.popoverPlacement};return s("div",{class:t},s("stzh-dropdown",{options:this._dropdownOptions,items:[this.value],label:this.label,required:this.required,disabled:this.disabled,description:this.description,descriptionLong:this.descriptionLong,error:this.error,popoverPlacement:this.popoverPlacement,a11yDescribedby:this.a11yDescribedby,name:this.name,size:this.size,invalid:this.invalid,showMarker:this.showMarker,onStzhChange:this.onDropdownChange}))}renderInputStepper(){return s("div",{class:"stzh-amount__stepper"},s("div",{class:"stzh-amount__stepper-wrapper"},s("stzh-button",{class:"stzh-amount__stepper-minus",onClick:this.onInputMinusStepClick,variant:"secondary",icon:"minus",iconOnly:true,a11yControls:this.stepperInputId,a11yDescribedby:this.a11yDescribedby,size:this.size,disabled:+this.value<=+this.minValue||this.disabled}),s("stzh-input",{class:"stzh-amount__stepper-input",value:this.value,type:"number",label:this.label,min:this.minValue,max:this.maxValue,invalid:this.invalid,name:this.name,id:this.stepperInputId,size:this.size,step:this.step,showMarker:this.showMarker,descriptionLong:this.descriptionLong,clearable:this.clearable,disabled:this.disabled,a11yDescribedby:this.a11yDescribedby,onStzhChange:this.onStepperInputChange}),s("stzh-button",{class:"stzh-amount__stepper-plus",onClick:this.onInputPlusStepClick,variant:"secondary",icon:"plus",iconOnly:true,a11yControls:this.stepperInputId,a11yDescribedby:this.a11yDescribedby,size:this.size,disabled:+this.value>=+this.maxValue||this.disabled})),s(e,{classPrefix:"stzh-amount",id:`${this.amountId}-description`,error:this._error,description:this.description,descriptionLong:this.descriptionLong}))}render(){const t={"stzh-amount":true,"stzh-amount--has-description":!!this.description,"stzh-amount--has-description-long":!!this.descriptionLong,"stzh-amount--has-error":!!this.error};return s(i,null,s("div",{class:t,id:this.amountId},this._showDropdown?this.renderDropdown():this.renderInputStepper()))}static get watchers(){return{minValueDropdown:["minValueDropdownWatcher"],maxValueDropdown:["maxValueDropdownWatcher"],error:["errorWatcher"]}}};h.style=o;export{h as stzh_amount};
-//# sourceMappingURL=p-fc3e596a.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["stzhAmountCss","DROPDOWN_ITEM_PLUS_OPTION_VALUE","amountCounter","StzhAmount","this","_showDropdown","Number","isNaN","minValueDropdown","maxValueDropdown","onDropdownChange","event","detail","value","step","toString","onInputMinusStepClick","roundToStep","onInputPlusStepClick","onStepperInputChange","newValue","maxValue","minValue","minValueDropdownWatcher","setDropdownOptions","maxValueDropdownWatcher","errorWatcher","_error","JSON","parse","e","invalid","length","options","i","push","text","undefined","_dropdownOptions","stringify","input","decimals","Math","max","floor","log10","factor","pow","rounded","round","toFixed","async","amountId","stepperInputId","error","renderDropdown","classes","popoverPlacement","h","class","items","label","required","disabled","description","descriptionLong","a11yDescribedby","name","size","showMarker","onStzhChange","renderInputStepper","onClick","variant","icon","iconOnly","a11yControls","type","min","id","clearable","StzhInputDescription","classPrefix","render","Host"],"sources":["./src/components/stzh-amount/stzh-amount.scss?tag=stzh-amount","./src/components/stzh-amount/stzh-amount.tsx"],"sourcesContent":[".stzh-amount {\n  @include input-description;\n\n  &__stepper-wrapper {\n    display: flex;\n    gap: space('xxsmall');\n  }\n\n  stzh-input#{&}__stepper-input {\n    --text-align: center;\n    width: 100%;\n  }\n}\n","import {\n  Component,\n  Host,\n  Prop,\n  h,\n  Watch,\n} from \"@stencil/core\";\n\nimport {\n  StzhDropdownChangeEvent,\n  StzhDropdownCustomEvent,\n  StzhInputChangeEvent,\n  StzhInputCustomEvent\n} from \"../../index\";\nimport { StzhInputDescription } from '../stzh-input/stzh-input-description';\n\nconst DROPDOWN_ITEM_PLUS_OPTION_VALUE = \"stzh-amount__dropdown-plus-option\"\n\nlet amountCounter = 0;\n\n@Component({\n  tag: \"stzh-amount\",\n  styleUrl: \"stzh-amount.scss\"\n})\nexport class StzhAmount {\n  /** The lowest allowed amount (can be negative). */\n  @Prop({ reflect: true }) minValue: number = -9007199254740991;\n\n  /** The highest allowed amount. */\n  @Prop({ reflect: true }) maxValue: number = 9007199254740991;\n\n  /** The lowest amount as option in the dropdown. Needs to be set to initially display a dropdown. */\n  @Prop({ reflect: true }) minValueDropdown: number | null = null;\n\n  /** The highest amount as option in the dropdown. Needs to be set to initially display a dropdown. */\n  @Prop({ reflect: true }) maxValueDropdown: number | null = null;\n  private _showDropdown: boolean = !Number.isNaN(this.minValueDropdown) && !Number.isNaN(this.maxValueDropdown)\n    && this.minValueDropdown < this.maxValueDropdown;\n\n  private _dropdownOptions: string;\n\n  /** The initial value of the amount element */\n  @Prop({ reflect: true }) value: string = \"\";\n\n  /** The step the amount can be increased or decreased */\n  @Prop({ reflect: true }) step: number = 1;\n\n  /** Name of the element (hidden select element in case of dropdown) */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** Size variant */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" = \"default\";\n\n  /** Whether the amount component is disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Popover placement for the dropdown (if applicable) */\n  @Prop({ reflect: true }) popoverPlacement: \"bottom\" | \"top\" = \"bottom\";\n\n  /** Label */\n  @Prop() label: 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  /** Whether clearable button is showing for the input field (does not apply to dropdown) */\n  @Prop({ reflect: true }) clearable: boolean = false;\n\n  /** Show text in label depending on whether field is optional/required */\n  @Prop({ reflect: true }) showMarker: boolean = false;\n\n  /** Description placed below the amount */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover */\n  @Prop() descriptionLong: string;\n\n  /** One or multiple error message(s) */\n  @Prop() error: string | string[];\n  private _error: string[];\n\n  /** Id of the element which describes the input (this will be overwritten if description prop is used) */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = '';\n\n  @Watch(\"minValueDropdown\")\n  minValueDropdownWatcher() {\n    this.setDropdownOptions();\n  }\n\n  @Watch(\"maxValueDropdown\")\n  maxValueDropdownWatcher() {\n    this.setDropdownOptions();\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  private amountId: string;\n  private stepperInputId: string;\n\n  /** Fill the dropdown with options according to maxValueDropdown & minValueDropdown. */\n  private setDropdownOptions(): void {\n    if (this._showDropdown) {\n      const options = [];\n\n      for (let i = this.minValueDropdown; i <= this.maxValueDropdown; i++) {\n        options.push({text: i.toString(), value: i.toString()});\n      }\n      if (this.maxValue != undefined && this.maxValue > this.maxValueDropdown) {\n        options.push({text: `${this.maxValueDropdown.toString()}+`, value: DROPDOWN_ITEM_PLUS_OPTION_VALUE})\n      }\n      this._dropdownOptions = JSON.stringify(options);\n    }\n  }\n\n  /** Handling dropdown changes (switch to input stepper if the plus option is selected in the dropdown). */\n  private onDropdownChange = (event: StzhDropdownCustomEvent<StzhDropdownChangeEvent>) => {\n    if (event.detail.value === DROPDOWN_ITEM_PLUS_OPTION_VALUE) {\n      this._showDropdown = false;\n      this.value = (this.maxValueDropdown + this.step).toString();\n    } else {\n      this.value = (+event.detail.value).toString();\n    }\n  }\n\n  /** Handling the minus button. */\n  private onInputMinusStepClick = () => {\n    this.value = (+this.value - this.step).toString();\n    this.value = this.roundToStep(+this.value).toString();\n  }\n\n  /** Handling the plus button. */\n  private onInputPlusStepClick = () => {\n    this.value = (+this.value + this.step).toString();\n    this.value = this.roundToStep(+this.value).toString();\n  }\n\n  /** Handling manual value change of the stepper input. */\n  private onStepperInputChange = (event: StzhInputCustomEvent<StzhInputChangeEvent>) => {\n    let newValue = event.detail.value;\n    newValue = this.roundToStep(+newValue).toString();\n\n    if (+newValue > this.maxValue) {\n      newValue = this.maxValue.toString();\n    } else if (+newValue < this.minValue) {\n      newValue = this.minValue.toString();\n    }\n\n    this.value = newValue;\n  }\n\n  /** Making sure, that the value is rounded correctly according to the step  */\n  private roundToStep(input: number): number {\n    const decimals = Math.max(0, -Math.floor(Math.log10(this.step)));\n    const factor = Math.pow(10, decimals);\n    const rounded = Math.round(input / this.step) * this.step;\n    return Number((rounded * factor / factor).toFixed(decimals));\n  }\n\n  async componentWillLoad() {\n    this.amountId = `stzh-amount-${amountCounter++}`;\n    this.stepperInputId = `${this.amountId}-stepper-input`\n    this.setDropdownOptions();\n    this.errorWatcher(this.error);\n  }\n\n  private renderDropdown(): HTMLDivElement {\n    const classes = {\n      \"stzh-amount__dropdown\": true,\n      [`stzh-amount--popover-placement-${this.popoverPlacement}`]: !!this.popoverPlacement,\n    };\n    return (\n      <div class={classes}>\n        <stzh-dropdown\n          options={this._dropdownOptions}\n          items={[this.value]}\n          label={this.label}\n          required={this.required}\n          disabled={this.disabled}\n          description={this.description}\n          descriptionLong={this.descriptionLong}\n          error={this.error}\n          popoverPlacement={this.popoverPlacement}\n          a11yDescribedby={this.a11yDescribedby}\n          name={this.name}\n          size={this.size}\n          invalid={this.invalid}\n          showMarker={this.showMarker}\n          onStzhChange={this.onDropdownChange}\n        ></stzh-dropdown>\n      </div>\n    );\n  }\n\n  private renderInputStepper(): HTMLDivElement {\n    return (\n      <div class=\"stzh-amount__stepper\">\n        <div class=\"stzh-amount__stepper-wrapper\">\n          <stzh-button\n            class=\"stzh-amount__stepper-minus\"\n            onClick={this.onInputMinusStepClick}\n            variant=\"secondary\"\n            icon=\"minus\"\n            iconOnly={true}\n            a11yControls={this.stepperInputId}\n            a11yDescribedby={this.a11yDescribedby}\n            size={this.size}\n            disabled={+this.value <= +this.minValue || this.disabled}\n          ></stzh-button>\n          <stzh-input\n            class=\"stzh-amount__stepper-input\"\n            value={this.value}\n            type=\"number\"\n            label={this.label}\n            min={this.minValue}\n            max={this.maxValue}\n            invalid={this.invalid}\n            name={this.name}\n            id={this.stepperInputId}\n            size={this.size}\n            step={this.step}\n            showMarker={this.showMarker}\n            descriptionLong={this.descriptionLong}\n            clearable={this.clearable}\n            disabled={this.disabled}\n            a11yDescribedby={this.a11yDescribedby}\n            onStzhChange={this.onStepperInputChange}\n          ></stzh-input>\n          <stzh-button\n            class=\"stzh-amount__stepper-plus\"\n            onClick={this.onInputPlusStepClick}\n            variant=\"secondary\"\n            icon=\"plus\"\n            iconOnly={true}\n            a11yControls={this.stepperInputId}\n            a11yDescribedby={this.a11yDescribedby}\n            size={this.size}\n            disabled={+this.value >= +this.maxValue || this.disabled}\n          ></stzh-button>\n        </div>\n        <StzhInputDescription\n          classPrefix=\"stzh-amount\"\n          id={`${this.amountId}-description`}\n          error={this._error}\n          description={this.description}\n          descriptionLong={this.descriptionLong}\n        />\n      </div>\n    );\n  }\n\n  render() {\n    const classes = {\n      \"stzh-amount\": true,\n      \"stzh-amount--has-description\": !!this.description,\n      \"stzh-amount--has-description-long\": !!this.descriptionLong,\n      \"stzh-amount--has-error\": !!this.error,\n    };\n\n    return (\n      <Host>\n        <div\n          class={classes}\n          id={this.amountId}\n        >\n          {\n            this._showDropdown ?\n            this.renderDropdown()\n            :\n            this.renderInputStepper()\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/types/components/stzh-amount/stzh-amount.d.ts

@@ -1,64 +0,0 @@
-export declare class StzhAmount {
-  /** The lowest allowed amount (can be negative). */
-  minValue: number;
-  /** The highest allowed amount. */
-  maxValue: number;
-  /** The lowest amount as option in the dropdown. Needs to be set to initially display a dropdown. */
-  minValueDropdown: number | null;
-  /** The highest amount as option in the dropdown. Needs to be set to initially display a dropdown. */
-  maxValueDropdown: number | null;
-  private _showDropdown;
-  private _dropdownOptions;
-  /** The initial value of the amount element */
-  value: string;
-  /** The step the amount can be increased or decreased */
-  step: number;
-  /** Name of the element (hidden select element in case of dropdown) */
-  name: string;
-  /** Size variant */
-  size: "default" | "small";
-  /** Whether the amount component is disabled */
-  disabled: boolean;
-  /** Popover placement for the dropdown (if applicable) */
-  popoverPlacement: "bottom" | "top";
-  /** Label */
-  label: string;
-  /** Invalid status */
-  invalid: boolean;
-  /** Required status */
-  required: boolean;
-  /** Whether clearable button is showing for the input field (does not apply to dropdown) */
-  clearable: boolean;
-  /** Show text in label depending on whether field is optional/required */
-  showMarker: boolean;
-  /** Description placed below the amount */
-  description: string;
-  /** Long description message appearing in a popover */
-  descriptionLong: string;
-  /** One or multiple error message(s) */
-  error: string | string[];
-  private _error;
-  /** Id of the element which describes the input (this will be overwritten if description prop is used) */
-  a11yDescribedby: string;
-  minValueDropdownWatcher(): void;
-  maxValueDropdownWatcher(): void;
-  errorWatcher(newValue: string | string[]): void;
-  private amountId;
-  private stepperInputId;
-  /** Fill the dropdown with options according to maxValueDropdown & minValueDropdown. */
-  private setDropdownOptions;
-  /** Handling dropdown changes (switch to input stepper if the plus option is selected in the dropdown). */
-  private onDropdownChange;
-  /** Handling the minus button. */
-  private onInputMinusStepClick;
-  /** Handling the plus button. */
-  private onInputPlusStepClick;
-  /** Handling manual value change of the stepper input. */
-  private onStepperInputChange;
-  /** Making sure, that the value is rounded correctly according to the step  */
-  private roundToStep;
-  componentWillLoad(): Promise<void>;
-  private renderDropdown;
-  private renderInputStepper;
-  render(): any;
-}