@oiz/stzh-components 2.12.0 → 2.13.0-beta1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/{app-globals-5c0c2c46.js → app-globals-6831ae97.js} +2 -2
- package/dist/cjs/{app-globals-5c0c2c46.js.map → app-globals-6831ae97.js.map} +1 -1
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/stzh-components.cjs.js +2 -2
- package/dist/cjs/stzh-datalist_2.cjs.entry.js +1 -1
- package/dist/cjs/stzh-datalist_2.cjs.entry.js.map +1 -1
- package/dist/cjs/stzh-dropdown.cjs.entry.js +12 -3
- package/dist/cjs/stzh-dropdown.cjs.entry.js.map +1 -1
- package/dist/cjs/stzh-input.cjs.entry.js +2 -2
- package/dist/cjs/stzh-input.cjs.entry.js.map +1 -1
- package/dist/cjs/stzh-upload.cjs.entry.js +8 -0
- package/dist/cjs/stzh-upload.cjs.entry.js.map +1 -1
- package/dist/collection/components/stzh-datalist-item/stzh-datalist-item.css +1 -0
- package/dist/collection/components/stzh-dropdown/stzh-dropdown.js +10 -2
- package/dist/collection/components/stzh-dropdown/stzh-dropdown.js.map +1 -1
- package/dist/collection/components/stzh-input/stzh-input.css +6 -0
- package/dist/collection/components/stzh-input/stzh-input.js +4 -4
- package/dist/collection/components/stzh-input/stzh-input.js.map +1 -1
- package/dist/collection/components/stzh-upload/stzh-upload.js +12 -0
- package/dist/collection/components/stzh-upload/stzh-upload.js.map +1 -1
- package/dist/collection/libraries/tom-select/cjs/tom-select.complete.js +4 -3
- package/dist/collection/libraries/tom-select/cjs/tom-select.js +4 -3
- package/dist/collection/libraries/tom-select/cjs/tom-select.popular.js +4 -3
- package/dist/collection/libraries/tom-select/esm/tom-select.complete.js +4 -3
- package/dist/collection/libraries/tom-select/esm/tom-select.js +4 -3
- package/dist/collection/libraries/tom-select/esm/tom-select.popular.js +4 -3
- package/dist/collection/libraries/tom-select/js/tom-select.base.js +4 -3
- package/dist/collection/libraries/tom-select/js/tom-select.base.min.js +16 -16
- package/dist/collection/libraries/tom-select/js/tom-select.complete.js +4 -3
- package/dist/collection/libraries/tom-select/js/tom-select.complete.min.js +3 -3
- package/dist/collection/libraries/tom-select/js/tom-select.popular.js +4 -3
- package/dist/collection/libraries/tom-select/js/tom-select.popular.min.js +30 -30
- package/dist/components/index.js +1 -1
- package/dist/components/stzh-datalist-item2.js +1 -1
- package/dist/components/stzh-datalist-item2.js.map +1 -1
- package/dist/components/stzh-dropdown2.js +12 -3
- package/dist/components/stzh-dropdown2.js.map +1 -1
- package/dist/components/stzh-input2.js +3 -3
- package/dist/components/stzh-input2.js.map +1 -1
- package/dist/components/stzh-upload.js +10 -0
- package/dist/components/stzh-upload.js.map +1 -1
- package/dist/esm/{app-globals-bfc779f0.js → app-globals-c1cfb228.js} +2 -2
- package/dist/esm/{app-globals-bfc779f0.js.map → app-globals-c1cfb228.js.map} +1 -1
- package/dist/esm/loader.js +2 -2
- package/dist/esm/stzh-components.js +2 -2
- package/dist/esm/stzh-datalist_2.entry.js +1 -1
- package/dist/esm/stzh-datalist_2.entry.js.map +1 -1
- package/dist/esm/stzh-dropdown.entry.js +12 -3
- package/dist/esm/stzh-dropdown.entry.js.map +1 -1
- package/dist/esm/stzh-input.entry.js +2 -2
- package/dist/esm/stzh-input.entry.js.map +1 -1
- package/dist/esm/stzh-upload.entry.js +8 -0
- package/dist/esm/stzh-upload.entry.js.map +1 -1
- package/dist/esm-es5/{app-globals-bfc779f0.js → app-globals-c1cfb228.js} +2 -2
- package/dist/esm-es5/{app-globals-bfc779f0.js.map → app-globals-c1cfb228.js.map} +1 -1
- package/dist/esm-es5/loader.js +1 -1
- package/dist/esm-es5/loader.js.map +1 -1
- package/dist/esm-es5/stzh-components.js +1 -1
- package/dist/esm-es5/stzh-components.js.map +1 -1
- package/dist/esm-es5/stzh-datalist_2.entry.js +1 -1
- package/dist/esm-es5/stzh-datalist_2.entry.js.map +1 -1
- package/dist/esm-es5/stzh-dropdown.entry.js +2 -2
- package/dist/esm-es5/stzh-dropdown.entry.js.map +1 -1
- package/dist/esm-es5/stzh-input.entry.js +1 -1
- package/dist/esm-es5/stzh-input.entry.js.map +1 -1
- package/dist/esm-es5/stzh-upload.entry.js +1 -1
- package/dist/esm-es5/stzh-upload.entry.js.map +1 -1
- package/dist/stzh-components/{p-aa9975e6.entry.js → p-24d82258.entry.js} +2 -2
- package/dist/stzh-components/p-24d82258.entry.js.map +1 -0
- package/dist/stzh-components/{p-11a57dcd.entry.js → p-2653562a.entry.js} +6 -6
- package/dist/stzh-components/p-2653562a.entry.js.map +1 -0
- package/dist/stzh-components/{p-4206f3e1.system.entry.js → p-376b64c8.system.entry.js} +5 -5
- package/dist/stzh-components/p-376b64c8.system.entry.js.map +1 -0
- package/dist/stzh-components/{p-9035fa3b.system.js → p-50faf5a6.system.js} +2 -2
- package/dist/stzh-components/{p-9035fa3b.system.js.map → p-50faf5a6.system.js.map} +1 -1
- package/dist/stzh-components/p-8438088e.system.js +2 -0
- package/dist/stzh-components/{p-eed26372.system.js.map → p-8438088e.system.js.map} +1 -1
- package/dist/stzh-components/{p-ea2fd8f8.js → p-8e02ecc8.js} +2 -2
- package/dist/stzh-components/{p-ea2fd8f8.js.map → p-8e02ecc8.js.map} +1 -1
- package/dist/stzh-components/p-990141f4.entry.js +2 -0
- package/dist/stzh-components/p-990141f4.entry.js.map +1 -0
- package/dist/stzh-components/p-c1f89d5c.system.entry.js +2 -0
- package/dist/stzh-components/p-c1f89d5c.system.entry.js.map +1 -0
- package/dist/stzh-components/{p-4488789b.entry.js → p-c90cf7f4.entry.js} +2 -2
- package/dist/stzh-components/p-c90cf7f4.entry.js.map +1 -0
- package/dist/stzh-components/{p-b19c3193.system.entry.js → p-cf18eff2.system.entry.js} +2 -2
- package/dist/stzh-components/p-cf18eff2.system.entry.js.map +1 -0
- package/dist/stzh-components/{p-2d88c544.system.entry.js → p-e6444356.system.entry.js} +2 -2
- package/dist/stzh-components/p-e6444356.system.entry.js.map +1 -0
- package/dist/stzh-components/stzh-components.esm.js +1 -1
- package/dist/stzh-components/stzh-components.esm.js.map +1 -1
- package/dist/stzh-components/stzh-components.js +1 -1
- package/dist/types/components/stzh-dropdown/stzh-dropdown.d.ts +1 -1
- package/dist/types/components/stzh-input/stzh-input.d.ts +1 -1
- package/dist/types/components/stzh-upload/stzh-upload.d.ts +2 -0
- package/dist/types/components.d.ts +4 -4
- package/dist/types/libraries/tom-select/types/defaults.d.ts +1 -0
- package/dist/types/libraries/tom-select/types/types/settings.d.ts +1 -0
- package/dist/vscode-data.json +7537 -0
- package/package.json +1 -1
- package/dist/stzh-components/p-11a57dcd.entry.js.map +0 -1
- package/dist/stzh-components/p-2d88c544.system.entry.js.map +0 -1
- package/dist/stzh-components/p-4206f3e1.system.entry.js.map +0 -1
- package/dist/stzh-components/p-4488789b.entry.js.map +0 -1
- package/dist/stzh-components/p-4ad49ece.entry.js +0 -2
- package/dist/stzh-components/p-4ad49ece.entry.js.map +0 -1
- package/dist/stzh-components/p-a0b350c2.system.entry.js +0 -2
- package/dist/stzh-components/p-a0b350c2.system.entry.js.map +0 -1
- package/dist/stzh-components/p-aa9975e6.entry.js.map +0 -1
- package/dist/stzh-components/p-b19c3193.system.entry.js.map +0 -1
- package/dist/stzh-components/p-eed26372.system.js +0 -2
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var __awaiter=this&&this.__awaiter||function(t,s,i,n){function e(t){return t instanceof i?t:new i((function(s){s(t)}))}return new(i||(i=Promise))((function(i,h){function r(t){try{p(n.next(t))}catch(t){h(t)}}function u(t){try{p(n["throw"](t))}catch(t){h(t)}}function p(t){t.done?i(t.value):e(t.value).then(r,u)}p((n=n.apply(t,s||[])).next())}))};var __generator=this&&this.__generator||function(t,s){var i={label:0,sent:function(){if(h[0]&1)throw h[1];return h[1]},trys:[],ops:[]},n,e,h,r;return r={next:u(0),throw:u(1),return:u(2)},typeof Symbol==="function"&&(r[Symbol.iterator]=function(){return this}),r;function u(t){return function(s){return p([t,s])}}function p(u){if(n)throw new TypeError("Generator is already executing.");while(r&&(r=0,u[0]&&(i=0)),i)try{if(n=1,e&&(h=u[0]&2?e["return"]:u[0]?e["throw"]||((h=e["return"])&&h.call(e),0):e.next)&&!(h=h.call(e,u[1])).done)return h;if(e=0,h)u=[u[0]&2,h.value];switch(u[0]){case 0:case 1:h=u;break;case 4:i.label++;return{value:u[1],done:false};case 5:i.label++;e=u[1];u=[0];continue;case 7:u=i.ops.pop();i.trys.pop();continue;default:if(!(h=i.trys,h=h.length>0&&h[h.length-1])&&(u[0]===6||u[0]===2)){i=0;continue}if(u[0]===3&&(!h||u[1]>h[0]&&u[1]<h[3])){i.label=u[1];break}if(u[0]===6&&i.label<h[1]){i.label=h[1];h=u;break}if(h&&i.label<h[2]){i.label=h[2];i.ops.push(u);break}if(h[2])i.ops.pop();i.trys.pop();continue}u=s.call(t,i)}catch(t){u=[6,t];e=0}finally{n=h=0}if(u[0]&5)throw u[1];return{value:u[0]?u[1]:void 0,done:true}}};import{r as registerInstance,c as createEvent,h,a as Host,g as getElement}from"./index-bfb5b569.js";import{h as hasSlot}from"./utils-8bb4c3c6.js";import{S as StzhInputDescription}from"./stzh-input-description-100efe38.js";import"./string-utils-e252977e.js";var stzhInputCss='.sc-stzh-input-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-input-h{display:none}.sc-stzh-input-h *.sc-stzh-input,.sc-stzh-input-h *.sc-stzh-input::before,.sc-stzh-input-h *.sc-stzh-input::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-input-h .has-focus.sc-stzh-input{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}.sc-stzh-input-h .stzh-fylingfocus-focused.sc-stzh-input{outline-style:none !important}.sc-stzh-input-h .stzh-fylingfocus-focused.sc-stzh-input::-moz-focus-inner{border:0 !important}.sc-stzh-input-h{--text-align:left;--input-width:100%;--padding:var(--stzh-space-xsmall) var(--stzh-space-medium);width:100%}.sc-stzh-input-h .sc-stzh-input-s>[slot=button-right],.stzh-input__button-right.sc-stzh-input{position:absolute;top:0;right:0}.sc-stzh-input-h .sc-stzh-input-s>stzh-button[slot=button-right][variant=input],.sc-stzh-input-h .sc-stzh-input-s>[slot=button-right] stzh-button[variant=input],.stzh-input__button-right[variant=input].sc-stzh-input{--border-color:transparent;--hover-border-color:transparent}.stzh-input.sc-stzh-input{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)}.stzh-input__marker-symbol.sc-stzh-input{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular)}.stzh-input__marker-text.sc-stzh-input{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-input__description-wrapper.sc-stzh-input{display:-ms-flexbox;display:flex;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.stzh-input__error.sc-stzh-input,.stzh-input__description.sc-stzh-input{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);color:var(--stzh-base-color)}.stzh-input__error.sc-stzh-input{color:var(--stzh-color-error)}.stzh-input__error-list.sc-stzh-input{list-style:none;margin:0;padding:0}.stzh-input__description.sc-stzh-input{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start}.stzh-input__description-long.sc-stzh-input{margin-left:var(--stzh-space-xxsmall);margin-top:0.1875rem}.stzh-input__description-long-popover.sc-stzh-input{--width:auto;--max-width:27.3125rem}.stzh-input__description-long-popover[open].sc-stzh-input:not([open=false]) .stzh-input__description-long-button.sc-stzh-input{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-input__description-long-button.sc-stzh-input{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-input__description-long-button.sc-stzh-input:hover{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-input.sc-stzh-input stzh-icon.stzh-input__description-long-icon.sc-stzh-input{--size:var(--stzh-icon-size-xsmall)}.stzh-input--has-error.sc-stzh-input .stzh-input__error.sc-stzh-input,.stzh-input--has-description.sc-stzh-input .stzh-input__description.sc-stzh-input{margin-top:var(--stzh-space-xxsmall)}.stzh-input__field-wrapper.sc-stzh-input{position:relative;display:-ms-flexbox;display:flex;width:var(--input-width)}.stzh-input__input.sc-stzh-input{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular);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);border:0.0625rem solid var(--stzh-color-grey61);-webkit-transition-property:color, border-color;transition-property:color, border-color;-webkit-transition-duration:var(--stzh-base-transition-animation-speed);transition-duration:var(--stzh-base-transition-animation-speed);border-radius:var(--stzh-form-input-border-radius);padding:var(--padding);margin:0;width:100%;color:var(--stzh-color-primary, var(--stzh-color-zueriblue));background:var(--stzh-color-white);-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:var(--text-align)}.stzh-input__input.sc-stzh-input::-webkit-input-placeholder{color:var(--stzh-color-grey61)}.stzh-input__input.sc-stzh-input:-moz-placeholder{color:var(--stzh-color-grey61)}.stzh-input__input.sc-stzh-input::-moz-placeholder{color:var(--stzh-color-grey61)}.stzh-input__input.sc-stzh-input:-ms-input-placeholder{color:var(--stzh-color-grey61)}.stzh-input__input.sc-stzh-input:hover,.stzh-input__input.sc-stzh-input:focus{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-input__input.sc-stzh-input::-ms-clear{display:none}.stzh-input__input.sc-stzh-input:-webkit-autofill{-webkit-background-clip:text;background-clip:text}.stzh-input__input.sc-stzh-input:-moz-placeholder-shown{text-overflow:ellipsis}.stzh-input__input.sc-stzh-input:-ms-input-placeholder{text-overflow:ellipsis}.stzh-input__input.sc-stzh-input:placeholder-shown{text-overflow:ellipsis}.stzh-input__input[type=search].sc-stzh-input::-webkit-search-decoration,.stzh-input__input[type=search].sc-stzh-input::-webkit-search-cancel-button,.stzh-input__input[type=search].sc-stzh-input::-webkit-search-results-button,.stzh-input__input[type=search].sc-stzh-input::-webkit-search-results-decoration{-webkit-appearance:none}.stzh-input__input--input.sc-stzh-input{height:var(--stzh-form-input-height)}.stzh-input__input--textarea.sc-stzh-input{min-height:var(--stzh-form-input-height);resize:vertical}.stzh-input__label.sc-stzh-input{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);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;color:var(--stzh-color-grey61);width:auto;position:absolute;top:calc(var(--stzh-form-input-height) / 2);left:calc(var(--stzh-space-medium) + 0.0625rem);max-width:calc(100% - var(--stzh-space-medium) * 2);-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-transition:all var(--stzh-base-transition-animation-speed);transition:all var(--stzh-base-transition-animation-speed);pointer-events:none}.stzh-input__label.sc-stzh-input:empty{display:none}.stzh-input__label.sc-stzh-input::before{content:"";display:none;background:var(--stzh-color-white);position:absolute;width:100%;z-index:-1;left:0;top:50%;margin-top:-0.5px;height:0.125rem}.stzh-input__input.sc-stzh-input:hover+.stzh-input__label.sc-stzh-input,.stzh-input__input.sc-stzh-input:focus+.stzh-input__label.sc-stzh-input{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-input__button-right.sc-stzh-input{display:none}.stzh-input__button-right[disabled].sc-stzh-input:not([disabled=false])[variant=input]{--color:var(--stzh-color-grey61);--background-color:transparent;--border-color:transparent;--hover-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-background-color:transparent;--hover-border-color:transparent}.stzh-input--is-clearable.stzh-input--is-filled.sc-stzh-input:not(.stzh-input--is-readonly):not(.stzh-input--is-disabled) .stzh-input__button-right.sc-stzh-input,.stzh-input--type-search.sc-stzh-input .stzh-input__button-right.sc-stzh-input{display:block}.stzh-input--type-search.sc-stzh-input:not(.stzh-input--is-filled) .stzh-input__button-right.sc-stzh-input,.stzh-input--type-search.stzh-input--is-readonly.sc-stzh-input .stzh-input__button-right.sc-stzh-input,.stzh-input--type-search.stzh-input--is-disabled.sc-stzh-input .stzh-input__button-right.sc-stzh-input{pointer-events:none}.stzh-input--is-filled.sc-stzh-input .stzh-input__button-right.is-search.sc-stzh-input{pointer-events:initial}.stzh-input.sc-stzh-input:not(.stzh-input--is-readonly):not(.stzh-input--is-disabled) .stzh-input__input.sc-stzh-input:focus+.stzh-input__label.sc-stzh-input,.stzh-input--has-fixed-label.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--is-filled.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--is-readonly.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--is-disabled.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--is-invalid.sc-stzh-input .stzh-input__label.sc-stzh-input{display:block;top:0;left:calc(var(--stzh-space-medium) - var(--stzh-space-xxsmall));height:1.25rem;line-height:1.25rem;padding:0 var(--stzh-space-xxsmall);max-width:calc(100% - var(--stzh-space-small) * 2);pointer-events:all}.stzh-input.sc-stzh-input:not(.stzh-input--is-readonly):not(.stzh-input--is-disabled) .stzh-input__input.sc-stzh-input:focus+.stzh-input__label.sc-stzh-input:not(:empty)::before,.stzh-input--has-fixed-label.sc-stzh-input .stzh-input__label.sc-stzh-input:not(:empty)::before,.stzh-input--is-filled.sc-stzh-input .stzh-input__label.sc-stzh-input:not(:empty)::before,.stzh-input--is-readonly.sc-stzh-input .stzh-input__label.sc-stzh-input:not(:empty)::before,.stzh-input--is-disabled.sc-stzh-input .stzh-input__label.sc-stzh-input:not(:empty)::before,.stzh-input--is-invalid.sc-stzh-input .stzh-input__label.sc-stzh-input:not(:empty)::before{display:block}.stzh-input--has-button-right.sc-stzh-input .stzh-input__input.sc-stzh-input{padding-right:calc(var(--stzh-space-xsmall) + var(--stzh-form-input-height))}.stzh-input--has-button-right.sc-stzh-input .stzh-input__label.sc-stzh-input{max-width:calc(100% - (var(--stzh-space-medium) + 0.0625rem) * 2 - var(--stzh-form-input-height))}.stzh-input--has-button-right.stzh-input.sc-stzh-input:not(.stzh-input--is-readonly):not(.stzh-input--is-disabled) .stzh-input__input.sc-stzh-input:focus+.stzh-input__label.sc-stzh-input,.stzh-input--has-button-right.stzh-input--has-fixed-label.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--has-button-right.stzh-input--is-filled.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--has-button-right.stzh-input--is-readonly.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--has-button-right.stzh-input--is-disabled.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--has-button-right.stzh-input--is-invalid.sc-stzh-input .stzh-input__label.sc-stzh-input{max-width:calc(100% - var(--stzh-space-medium) - var(--stzh-space-xxsmall) - 0.0625rem + var(--stzh-space-xxsmall) - var(--stzh-form-input-height))}.stzh-input--size-small.sc-stzh-input{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}.stzh-input--size-small.sc-stzh-input .stzh-input__input.sc-stzh-input{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}.stzh-input--size-small.sc-stzh-input .stzh-input__input--input.sc-stzh-input{height:var(--stzh-form-input-small-height)}.stzh-input--size-small.sc-stzh-input .stzh-input__input--textarea.sc-stzh-input{min-height:var(--stzh-form-input-small-height)}.stzh-input--size-small.sc-stzh-input .stzh-input__label.sc-stzh-input{top:calc(var(--stzh-form-input-small-height) / 2)}.stzh-input--size-small.stzh-input.sc-stzh-input:not(.stzh-input--is-readonly):not(.stzh-input--is-disabled) .stzh-input__input.sc-stzh-input:focus+.stzh-input__label.sc-stzh-input,.stzh-input--size-small.stzh-input--has-fixed-label.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--size-small.stzh-input--is-filled.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--size-small.stzh-input--is-readonly.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--size-small.stzh-input--is-disabled.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--size-small.stzh-input--is-invalid.sc-stzh-input .stzh-input__label.sc-stzh-input{top:0}.stzh-input--size-small.stzh-input--has-button-right.sc-stzh-input .stzh-input__input.sc-stzh-input{padding-right:calc(var(--stzh-space-xxsmall) + var(--stzh-form-input-small-height))}.stzh-input--size-small.stzh-input--has-button-right.sc-stzh-input .stzh-input__label.sc-stzh-input{max-width:calc(100% - (var(--stzh-space-medium) + 0.0625rem) * 2 - var(--stzh-form-input-small-height))}.stzh-input--size-small.stzh-input--has-button-right.stzh-input.sc-stzh-input:not(.stzh-input--is-readonly):not(.stzh-input--is-disabled) .stzh-input__input.sc-stzh-input:focus+.stzh-input__label.sc-stzh-input,.stzh-input--size-small.stzh-input--has-button-right.stzh-input--has-fixed-label.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--size-small.stzh-input--has-button-right.stzh-input--is-filled.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--size-small.stzh-input--has-button-right.stzh-input--is-readonly.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--size-small.stzh-input--has-button-right.stzh-input--is-disabled.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--size-small.stzh-input--has-button-right.stzh-input--is-invalid.sc-stzh-input .stzh-input__label.sc-stzh-input{max-width:calc(100% - var(--stzh-space-medium) - var(--stzh-space-xxsmall) - 0.0625rem + var(--stzh-space-xsmall) - var(--stzh-form-input-small-height))}.stzh-input.sc-stzh-input:not(.stzh-input--has-spin) .stzh-input__input.sc-stzh-input::-webkit-outer-spin-button,.stzh-input.sc-stzh-input:not(.stzh-input--has-spin) .stzh-input__input.sc-stzh-input::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}.stzh-input.sc-stzh-input:not(.stzh-input--has-spin) .stzh-input__input[type=number].sc-stzh-input{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.stzh-input--has-label-hidden.sc-stzh-input .stzh-input__label.sc-stzh-input{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-input--is-invalid.sc-stzh-input .stzh-input__input.sc-stzh-input,.stzh-input--is-invalid.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--is-invalid.sc-stzh-input .stzh-input__input.sc-stzh-input+.stzh-input__label.sc-stzh-input{color:var(--stzh-color-error)}.stzh-input--is-invalid.sc-stzh-input .stzh-input__input.sc-stzh-input{border-color:var(--stzh-color-error)}.stzh-input--is-invalid.sc-stzh-input .stzh-input__input.sc-stzh-input::-webkit-input-placeholder{color:var(--stzh-color-error)}.stzh-input--is-invalid.sc-stzh-input .stzh-input__input.sc-stzh-input:-moz-placeholder{color:var(--stzh-color-error)}.stzh-input--is-invalid.sc-stzh-input .stzh-input__input.sc-stzh-input::-moz-placeholder{color:var(--stzh-color-error)}.stzh-input--is-invalid.sc-stzh-input .stzh-input__input.sc-stzh-input:-ms-input-placeholder{color:var(--stzh-color-error)}.stzh-input--is-readonly.sc-stzh-input .stzh-input__input.sc-stzh-input,.stzh-input--is-readonly.sc-stzh-input .stzh-input__input.sc-stzh-input+.stzh-input__label.sc-stzh-input,.stzh-input--is-disabled.sc-stzh-input .stzh-input__input.sc-stzh-input,.stzh-input--is-disabled.sc-stzh-input .stzh-input__input.sc-stzh-input+.stzh-input__label.sc-stzh-input{color:var(--stzh-color-grey61)}.stzh-input--is-readonly.sc-stzh-input .stzh-input__input.sc-stzh-input,.stzh-input--is-disabled.sc-stzh-input .stzh-input__input.sc-stzh-input{color:var(--stzh-color-grey61);border-color:transparent;background-color:var(--stzh-color-black8);cursor:not-allowed}.stzh-input--is-readonly.sc-stzh-input .stzh-input__input.sc-stzh-input::-webkit-input-placeholder,.stzh-input--is-disabled.sc-stzh-input .stzh-input__input.sc-stzh-input::-webkit-input-placeholder{color:var(--stzh-color-grey61)}.stzh-input--is-readonly.sc-stzh-input .stzh-input__input.sc-stzh-input:-moz-placeholder,.stzh-input--is-disabled.sc-stzh-input .stzh-input__input.sc-stzh-input:-moz-placeholder{color:var(--stzh-color-grey61)}.stzh-input--is-readonly.sc-stzh-input .stzh-input__input.sc-stzh-input::-moz-placeholder,.stzh-input--is-disabled.sc-stzh-input .stzh-input__input.sc-stzh-input::-moz-placeholder{color:var(--stzh-color-grey61)}.stzh-input--is-readonly.sc-stzh-input .stzh-input__input.sc-stzh-input:-ms-input-placeholder,.stzh-input--is-disabled.sc-stzh-input .stzh-input__input.sc-stzh-input:-ms-input-placeholder{color:var(--stzh-color-grey61)}.stzh-input--is-readonly.sc-stzh-input .stzh-input__input.sc-stzh-input:hover,.stzh-input--is-readonly.sc-stzh-input .stzh-input__input.sc-stzh-input:focus,.stzh-input--is-disabled.sc-stzh-input .stzh-input__input.sc-stzh-input:hover,.stzh-input--is-disabled.sc-stzh-input .stzh-input__input.sc-stzh-input:focus{border-color:transparent}.stzh-input--is-readonly.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--is-disabled.sc-stzh-input .stzh-input__label.sc-stzh-input{cursor:not-allowed}.stzh-input--is-readonly.sc-stzh-input .stzh-input__label.sc-stzh-input::before,.stzh-input--is-disabled.sc-stzh-input .stzh-input__label.sc-stzh-input::before{background:transparent}.stzh-input--is-readonly.sc-stzh-input .stzh-input__button-right[disabled].sc-stzh-input:not([disabled=false])[variant=input],.stzh-input--is-disabled.sc-stzh-input .stzh-input__button-right[disabled].sc-stzh-input:not([disabled=false])[variant=input]{--color:var(--stzh-color-grey61);--hover-color:var(--stzh-color-grey61)}';var inputCounter=0;var StzhInput=function(){function t(t){var s=this;registerInstance(this,t);this.stzhChange=createEvent(this,"stzhChange",7);this.stzhChanged=createEvent(this,"stzhChanged",7);this.stzhFocus=createEvent(this,"stzhFocus",7);this.stzhBlur=createEvent(this,"stzhBlur",7);this.focusedByInput=false;this.onClearClick=function(t){s.value="";s.input.focus();s.stzhChange.emit({component:"stzh-input",originalEvent:t,value:s.value});s.stzhChanged.emit({component:"stzh-input",originalEvent:t,value:s.value})};this.onInput=function(t){s.value=s.input.value;s.stzhChange.emit({component:"stzh-input",originalEvent:t,value:s.value})};this.onChange=function(t){s.value=s.input.value;s.stzhChanged.emit({component:"stzh-input",originalEvent:t,value:s.value})};this.onRootFocus=function(){if(!s.focusedByInput){s.setFocus()}s.focusedByInput=false};this.onFocus=function(t){s.focusedByInput=true;var i=new FocusEvent("focus",{view:window,bubbles:false,cancelable:false});s.element.dispatchEvent(i);s.stzhFocus.emit({component:"stzh-input",originalEvent:t})};this.onBlur=function(t){s.input.value=s.input.value;var i=new FocusEvent("blur",{view:window,bubbles:false,cancelable:false});s.element.dispatchEvent(i);s.stzhBlur.emit({component:"stzh-input",originalEvent:t})};this.localization=undefined;this.multiline=false;this.rows=undefined;this.type="text";this.step=1;this.min=undefined;this.max=undefined;this.showSpin=false;this.readonly=false;this.disabled=false;this.clearable=false;this.showMarker=false;this.minlength=undefined;this.maxlength=undefined;this.name=undefined;this.value="";this.description=undefined;this.descriptionLong=undefined;this.error=undefined;this.invalid=false;this.required=false;this.inputmode=undefined;this.autocomplete="on";this.noAutocomplete=false;this.label="";this.labelHidden=false;this.size="default";this.a11yDescribedby="";this.filled=undefined}t.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.input.focus();return[2]}))}))};t.prototype.valueWatcher=function(t){this.filled=t!==""};t.prototype.errorWatcher=function(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};t.prototype.typeWatcher=function(t){var s=["text","search","password","email","url","tel","number"];if(!this.multiline&&!s.includes(t)){throw new Error("Type ".concat(t," not supported"))}};t.prototype.renderTextarea=function(){var t=this;return h("textarea",{class:"stzh-input__input stzh-input__input--textarea",ref:function(s){return t.input=s},id:this.inputId,name:this.name,value:this.value,rows:this.rows,disabled:this.disabled,readonly:this.readonly,minlength:this.minlength,maxlength:this.maxlength,"aria-describedby":"".concat(this.inputId,"-description ").concat(this.a11yDescribedby),"aria-required":this.required?"true":"false","aria-invalid":this.invalid?"true":"false",onChange:this.onChange,onInput:this.onInput,onFocus:this.onFocus,onBlur:this.onBlur})};t.prototype.renderInput=function(){var t=this;return h("input",{class:"stzh-input__input stzh-input__input--input",ref:function(s){return t.input=s},id:this.inputId,type:this.type,name:this.name,value:this.value,min:this.min,max:this.max,step:this.step,inputmode:this.inputmode,disabled:this.disabled,readonly:this.readonly,minlength:this.minlength,maxlength:this.maxlength,autocomplete:this.noAutocomplete?"off":this.autocomplete,"aria-autocomplete":this.noAutocomplete?"none":undefined,"aria-describedby":"".concat(this.inputId,"-description ").concat(this.a11yDescribedby),"aria-required":this.required?"true":"false","aria-invalid":this.invalid?"true":"false",onChange:this.onChange,onInput:this.onInput,onFocus:this.onFocus,onBlur:this.onBlur})};t.prototype.componentWillLoad=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(s){switch(s.label){case 0:this.inputId="stzh-input-".concat(inputCounter++);this.typeWatcher(this.type);this.valueWatcher(this.value);this.errorWatcher(this.error);if(!!this.localization)return[3,2];t=this;return[4,window.stzhComponents.utils.fetchTranslations(this.element,"input")];case 1:t.localization=s.sent();s.label=2;case 2:return[2]}}))}))};t.prototype.render=function(){var t;var s;var i=hasSlot(this.element,"button-right");var n=hasSlot(this.element,"description")||!!this.description;var e=hasSlot(this.element,"description-long")||!!this.descriptionLong;var r=hasSlot(this.element,"error")||!!this.error;var u=(t={"stzh-input":true,"stzh-input--has-button-right":i||this.type==="search"||this.clearable&&this.filled&&!this.readonly&&!this.disabled,"stzh-input--has-description":n,"stzh-input--has-description-long":e,"stzh-input--has-error":r,"stzh-input--has-spin":this.showSpin,"stzh-input--is-invalid":this.invalid,"stzh-input--is-disabled":this.disabled,"stzh-input--is-readonly":this.readonly,"stzh-input--is-required":this.required,"stzh-input--is-filled":this.filled,"stzh-input--is-clearable":this.clearable,"stzh-input--has-fixed-label":((s=window===null||window===void 0?void 0:window.stzhComponents)===null||s===void 0?void 0:s.labels)==="fixed","stzh-input--has-label-hidden":this.labelHidden},t["stzh-input--size-".concat(this.size)]=!!this.size,t["stzh-input--type-".concat(this.type)]=!!this.type,t);return h(Host,{tabindex:this.disabled?null:"-1",onFocus:this.onRootFocus},h("div",{class:u},h("div",{class:"stzh-input__field-wrapper"},this.multiline?this.renderTextarea():this.renderInput(),h("label",{class:"stzh-input__label",htmlFor:this.inputId},this.label?this.label:h("slot",null),this.showMarker&&h("span",{class:"stzh-input__marker"},h("span",{class:"stzh-input__marker-symbol","aria-hidden":"true"},this.required?this.localization.$globals.requiredFieldMarker:this.localization.$globals.optionalFieldMarker),h("span",{class:"stzh-input__marker-text"},this.required?this.localization.$globals.requiredFieldText:this.localization.$globals.optionalFieldText))),this.clearable||this.type==="search"?h("stzh-button",{class:"stzh-input__button-right",icon:this.disabled||this.readonly||!this.filled?"search":"close-circle","icon-only":true,variant:"input",onClick:this.onClearClick,disabled:this.disabled||this.readonly||!this.filled,a11yLabel:this.localization.$globals.clearButtonLabel,"aria-controls":this.inputId}):h("slot",{name:"button-right"})),h(StzhInputDescription,{classPrefix:"stzh-input",id:"".concat(this.inputId,"-description"),error:this._error,description:this.description,descriptionLong:this.descriptionLong,descriptionLongUsed:e,moreInfoButtonLabel:this.localization.$globals.moreInfoButtonLabel})))};Object.defineProperty(t.prototype,"element",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{value:["valueWatcher"],error:["errorWatcher"],type:["typeWatcher"]}},enumerable:false,configurable:true});return t}();StzhInput.style=stzhInputCss;export{StzhInput as stzh_input};
|
|
1
|
+
var __awaiter=this&&this.__awaiter||function(t,s,i,n){function e(t){return t instanceof i?t:new i((function(s){s(t)}))}return new(i||(i=Promise))((function(i,h){function r(t){try{p(n.next(t))}catch(t){h(t)}}function u(t){try{p(n["throw"](t))}catch(t){h(t)}}function p(t){t.done?i(t.value):e(t.value).then(r,u)}p((n=n.apply(t,s||[])).next())}))};var __generator=this&&this.__generator||function(t,s){var i={label:0,sent:function(){if(h[0]&1)throw h[1];return h[1]},trys:[],ops:[]},n,e,h,r;return r={next:u(0),throw:u(1),return:u(2)},typeof Symbol==="function"&&(r[Symbol.iterator]=function(){return this}),r;function u(t){return function(s){return p([t,s])}}function p(u){if(n)throw new TypeError("Generator is already executing.");while(r&&(r=0,u[0]&&(i=0)),i)try{if(n=1,e&&(h=u[0]&2?e["return"]:u[0]?e["throw"]||((h=e["return"])&&h.call(e),0):e.next)&&!(h=h.call(e,u[1])).done)return h;if(e=0,h)u=[u[0]&2,h.value];switch(u[0]){case 0:case 1:h=u;break;case 4:i.label++;return{value:u[1],done:false};case 5:i.label++;e=u[1];u=[0];continue;case 7:u=i.ops.pop();i.trys.pop();continue;default:if(!(h=i.trys,h=h.length>0&&h[h.length-1])&&(u[0]===6||u[0]===2)){i=0;continue}if(u[0]===3&&(!h||u[1]>h[0]&&u[1]<h[3])){i.label=u[1];break}if(u[0]===6&&i.label<h[1]){i.label=h[1];h=u;break}if(h&&i.label<h[2]){i.label=h[2];i.ops.push(u);break}if(h[2])i.ops.pop();i.trys.pop();continue}u=s.call(t,i)}catch(t){u=[6,t];e=0}finally{n=h=0}if(u[0]&5)throw u[1];return{value:u[0]?u[1]:void 0,done:true}}};import{r as registerInstance,c as createEvent,h,a as Host,g as getElement}from"./index-bfb5b569.js";import{h as hasSlot}from"./utils-8bb4c3c6.js";import{S as StzhInputDescription}from"./stzh-input-description-100efe38.js";import"./string-utils-e252977e.js";var stzhInputCss='.sc-stzh-input-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-input-h{display:none}.sc-stzh-input-h *.sc-stzh-input,.sc-stzh-input-h *.sc-stzh-input::before,.sc-stzh-input-h *.sc-stzh-input::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-input-h .has-focus.sc-stzh-input{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}.sc-stzh-input-h .stzh-fylingfocus-focused.sc-stzh-input{outline-style:none !important}.sc-stzh-input-h .stzh-fylingfocus-focused.sc-stzh-input::-moz-focus-inner{border:0 !important}.sc-stzh-input-h{--text-align:left;--input-width:100%;--padding:var(--stzh-space-xsmall) var(--stzh-space-medium);width:100%}[type=hidden].sc-stzh-input-h{position:absolute;top:-624.9375rem;left:-624.9375rem;visibility:hidden}.sc-stzh-input-h .sc-stzh-input-s>[slot=button-right],.stzh-input__button-right.sc-stzh-input{position:absolute;top:0;right:0}.sc-stzh-input-h .sc-stzh-input-s>stzh-button[slot=button-right][variant=input],.sc-stzh-input-h .sc-stzh-input-s>[slot=button-right] stzh-button[variant=input],.stzh-input__button-right[variant=input].sc-stzh-input{--border-color:transparent;--hover-border-color:transparent}.stzh-input.sc-stzh-input{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)}.stzh-input__marker-symbol.sc-stzh-input{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular)}.stzh-input__marker-text.sc-stzh-input{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-input__description-wrapper.sc-stzh-input{display:-ms-flexbox;display:flex;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.stzh-input__error.sc-stzh-input,.stzh-input__description.sc-stzh-input{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);color:var(--stzh-base-color)}.stzh-input__error.sc-stzh-input{color:var(--stzh-color-error)}.stzh-input__error-list.sc-stzh-input{list-style:none;margin:0;padding:0}.stzh-input__description.sc-stzh-input{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start}.stzh-input__description-long.sc-stzh-input{margin-left:var(--stzh-space-xxsmall);margin-top:0.1875rem}.stzh-input__description-long-popover.sc-stzh-input{--width:auto;--max-width:27.3125rem}.stzh-input__description-long-popover[open].sc-stzh-input:not([open=false]) .stzh-input__description-long-button.sc-stzh-input{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-input__description-long-button.sc-stzh-input{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-input__description-long-button.sc-stzh-input:hover{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-input.sc-stzh-input stzh-icon.stzh-input__description-long-icon.sc-stzh-input{--size:var(--stzh-icon-size-xsmall)}.stzh-input--has-error.sc-stzh-input .stzh-input__error.sc-stzh-input,.stzh-input--has-description.sc-stzh-input .stzh-input__description.sc-stzh-input{margin-top:var(--stzh-space-xxsmall)}.stzh-input__field-wrapper.sc-stzh-input{position:relative;display:-ms-flexbox;display:flex;width:var(--input-width)}.stzh-input__input.sc-stzh-input{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular);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);border:0.0625rem solid var(--stzh-color-grey61);-webkit-transition-property:color, border-color;transition-property:color, border-color;-webkit-transition-duration:var(--stzh-base-transition-animation-speed);transition-duration:var(--stzh-base-transition-animation-speed);border-radius:var(--stzh-form-input-border-radius);padding:var(--padding);margin:0;width:100%;color:var(--stzh-color-primary, var(--stzh-color-zueriblue));background:var(--stzh-color-white);-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:var(--text-align)}.stzh-input__input.sc-stzh-input::-webkit-input-placeholder{color:var(--stzh-color-grey61)}.stzh-input__input.sc-stzh-input:-moz-placeholder{color:var(--stzh-color-grey61)}.stzh-input__input.sc-stzh-input::-moz-placeholder{color:var(--stzh-color-grey61)}.stzh-input__input.sc-stzh-input:-ms-input-placeholder{color:var(--stzh-color-grey61)}.stzh-input__input.sc-stzh-input:hover,.stzh-input__input.sc-stzh-input:focus{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-input__input.sc-stzh-input::-ms-clear{display:none}.stzh-input__input.sc-stzh-input:-webkit-autofill{-webkit-background-clip:text;background-clip:text}.stzh-input__input.sc-stzh-input:-moz-placeholder-shown{text-overflow:ellipsis}.stzh-input__input.sc-stzh-input:-ms-input-placeholder{text-overflow:ellipsis}.stzh-input__input.sc-stzh-input:placeholder-shown{text-overflow:ellipsis}.stzh-input__input[type=search].sc-stzh-input::-webkit-search-decoration,.stzh-input__input[type=search].sc-stzh-input::-webkit-search-cancel-button,.stzh-input__input[type=search].sc-stzh-input::-webkit-search-results-button,.stzh-input__input[type=search].sc-stzh-input::-webkit-search-results-decoration{-webkit-appearance:none}.stzh-input__input--input.sc-stzh-input{height:var(--stzh-form-input-height)}.stzh-input__input--textarea.sc-stzh-input{min-height:var(--stzh-form-input-height);resize:vertical}.stzh-input__label.sc-stzh-input{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);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;color:var(--stzh-color-grey61);width:auto;position:absolute;top:calc(var(--stzh-form-input-height) / 2);left:calc(var(--stzh-space-medium) + 0.0625rem);max-width:calc(100% - var(--stzh-space-medium) * 2);-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-transition:all var(--stzh-base-transition-animation-speed);transition:all var(--stzh-base-transition-animation-speed);pointer-events:none}.stzh-input__label.sc-stzh-input:empty{display:none}.stzh-input__label.sc-stzh-input::before{content:"";display:none;background:var(--stzh-color-white);position:absolute;width:100%;z-index:-1;left:0;top:50%;margin-top:-0.5px;height:0.125rem}.stzh-input__input.sc-stzh-input:hover+.stzh-input__label.sc-stzh-input,.stzh-input__input.sc-stzh-input:focus+.stzh-input__label.sc-stzh-input{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-input__button-right.sc-stzh-input{display:none}.stzh-input__button-right[disabled].sc-stzh-input:not([disabled=false])[variant=input]{--color:var(--stzh-color-grey61);--background-color:transparent;--border-color:transparent;--hover-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-background-color:transparent;--hover-border-color:transparent}.stzh-input--is-clearable.stzh-input--is-filled.sc-stzh-input:not(.stzh-input--is-readonly):not(.stzh-input--is-disabled) .stzh-input__button-right.sc-stzh-input,.stzh-input--type-search.sc-stzh-input .stzh-input__button-right.sc-stzh-input{display:block}.stzh-input--type-search.sc-stzh-input:not(.stzh-input--is-filled) .stzh-input__button-right.sc-stzh-input,.stzh-input--type-search.stzh-input--is-readonly.sc-stzh-input .stzh-input__button-right.sc-stzh-input,.stzh-input--type-search.stzh-input--is-disabled.sc-stzh-input .stzh-input__button-right.sc-stzh-input{pointer-events:none}.stzh-input--is-filled.sc-stzh-input .stzh-input__button-right.is-search.sc-stzh-input{pointer-events:initial}.stzh-input.sc-stzh-input:not(.stzh-input--is-readonly):not(.stzh-input--is-disabled) .stzh-input__input.sc-stzh-input:focus+.stzh-input__label.sc-stzh-input,.stzh-input--has-fixed-label.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--is-filled.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--is-readonly.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--is-disabled.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--is-invalid.sc-stzh-input .stzh-input__label.sc-stzh-input{display:block;top:0;left:calc(var(--stzh-space-medium) - var(--stzh-space-xxsmall));height:1.25rem;line-height:1.25rem;padding:0 var(--stzh-space-xxsmall);max-width:calc(100% - var(--stzh-space-small) * 2);pointer-events:all}.stzh-input.sc-stzh-input:not(.stzh-input--is-readonly):not(.stzh-input--is-disabled) .stzh-input__input.sc-stzh-input:focus+.stzh-input__label.sc-stzh-input:not(:empty)::before,.stzh-input--has-fixed-label.sc-stzh-input .stzh-input__label.sc-stzh-input:not(:empty)::before,.stzh-input--is-filled.sc-stzh-input .stzh-input__label.sc-stzh-input:not(:empty)::before,.stzh-input--is-readonly.sc-stzh-input .stzh-input__label.sc-stzh-input:not(:empty)::before,.stzh-input--is-disabled.sc-stzh-input .stzh-input__label.sc-stzh-input:not(:empty)::before,.stzh-input--is-invalid.sc-stzh-input .stzh-input__label.sc-stzh-input:not(:empty)::before{display:block}.stzh-input--has-button-right.sc-stzh-input .stzh-input__input.sc-stzh-input{padding-right:calc(var(--stzh-space-xsmall) + var(--stzh-form-input-height))}.stzh-input--has-button-right.sc-stzh-input .stzh-input__label.sc-stzh-input{max-width:calc(100% - (var(--stzh-space-medium) + 0.0625rem) * 2 - var(--stzh-form-input-height))}.stzh-input--has-button-right.stzh-input.sc-stzh-input:not(.stzh-input--is-readonly):not(.stzh-input--is-disabled) .stzh-input__input.sc-stzh-input:focus+.stzh-input__label.sc-stzh-input,.stzh-input--has-button-right.stzh-input--has-fixed-label.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--has-button-right.stzh-input--is-filled.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--has-button-right.stzh-input--is-readonly.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--has-button-right.stzh-input--is-disabled.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--has-button-right.stzh-input--is-invalid.sc-stzh-input .stzh-input__label.sc-stzh-input{max-width:calc(100% - var(--stzh-space-medium) - var(--stzh-space-xxsmall) - 0.0625rem + var(--stzh-space-xxsmall) - var(--stzh-form-input-height))}.stzh-input--size-small.sc-stzh-input{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}.stzh-input--size-small.sc-stzh-input .stzh-input__input.sc-stzh-input{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}.stzh-input--size-small.sc-stzh-input .stzh-input__input--input.sc-stzh-input{height:var(--stzh-form-input-small-height)}.stzh-input--size-small.sc-stzh-input .stzh-input__input--textarea.sc-stzh-input{min-height:var(--stzh-form-input-small-height)}.stzh-input--size-small.sc-stzh-input .stzh-input__label.sc-stzh-input{top:calc(var(--stzh-form-input-small-height) / 2)}.stzh-input--size-small.stzh-input.sc-stzh-input:not(.stzh-input--is-readonly):not(.stzh-input--is-disabled) .stzh-input__input.sc-stzh-input:focus+.stzh-input__label.sc-stzh-input,.stzh-input--size-small.stzh-input--has-fixed-label.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--size-small.stzh-input--is-filled.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--size-small.stzh-input--is-readonly.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--size-small.stzh-input--is-disabled.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--size-small.stzh-input--is-invalid.sc-stzh-input .stzh-input__label.sc-stzh-input{top:0}.stzh-input--size-small.stzh-input--has-button-right.sc-stzh-input .stzh-input__input.sc-stzh-input{padding-right:calc(var(--stzh-space-xxsmall) + var(--stzh-form-input-small-height))}.stzh-input--size-small.stzh-input--has-button-right.sc-stzh-input .stzh-input__label.sc-stzh-input{max-width:calc(100% - (var(--stzh-space-medium) + 0.0625rem) * 2 - var(--stzh-form-input-small-height))}.stzh-input--size-small.stzh-input--has-button-right.stzh-input.sc-stzh-input:not(.stzh-input--is-readonly):not(.stzh-input--is-disabled) .stzh-input__input.sc-stzh-input:focus+.stzh-input__label.sc-stzh-input,.stzh-input--size-small.stzh-input--has-button-right.stzh-input--has-fixed-label.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--size-small.stzh-input--has-button-right.stzh-input--is-filled.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--size-small.stzh-input--has-button-right.stzh-input--is-readonly.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--size-small.stzh-input--has-button-right.stzh-input--is-disabled.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--size-small.stzh-input--has-button-right.stzh-input--is-invalid.sc-stzh-input .stzh-input__label.sc-stzh-input{max-width:calc(100% - var(--stzh-space-medium) - var(--stzh-space-xxsmall) - 0.0625rem + var(--stzh-space-xsmall) - var(--stzh-form-input-small-height))}.stzh-input.sc-stzh-input:not(.stzh-input--has-spin) .stzh-input__input.sc-stzh-input::-webkit-outer-spin-button,.stzh-input.sc-stzh-input:not(.stzh-input--has-spin) .stzh-input__input.sc-stzh-input::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}.stzh-input.sc-stzh-input:not(.stzh-input--has-spin) .stzh-input__input[type=number].sc-stzh-input{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.stzh-input--has-label-hidden.sc-stzh-input .stzh-input__label.sc-stzh-input{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-input--is-invalid.sc-stzh-input .stzh-input__input.sc-stzh-input,.stzh-input--is-invalid.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--is-invalid.sc-stzh-input .stzh-input__input.sc-stzh-input+.stzh-input__label.sc-stzh-input{color:var(--stzh-color-error)}.stzh-input--is-invalid.sc-stzh-input .stzh-input__input.sc-stzh-input{border-color:var(--stzh-color-error)}.stzh-input--is-invalid.sc-stzh-input .stzh-input__input.sc-stzh-input::-webkit-input-placeholder{color:var(--stzh-color-error)}.stzh-input--is-invalid.sc-stzh-input .stzh-input__input.sc-stzh-input:-moz-placeholder{color:var(--stzh-color-error)}.stzh-input--is-invalid.sc-stzh-input .stzh-input__input.sc-stzh-input::-moz-placeholder{color:var(--stzh-color-error)}.stzh-input--is-invalid.sc-stzh-input .stzh-input__input.sc-stzh-input:-ms-input-placeholder{color:var(--stzh-color-error)}.stzh-input--is-readonly.sc-stzh-input .stzh-input__input.sc-stzh-input,.stzh-input--is-readonly.sc-stzh-input .stzh-input__input.sc-stzh-input+.stzh-input__label.sc-stzh-input,.stzh-input--is-disabled.sc-stzh-input .stzh-input__input.sc-stzh-input,.stzh-input--is-disabled.sc-stzh-input .stzh-input__input.sc-stzh-input+.stzh-input__label.sc-stzh-input{color:var(--stzh-color-grey61)}.stzh-input--is-readonly.sc-stzh-input .stzh-input__input.sc-stzh-input,.stzh-input--is-disabled.sc-stzh-input .stzh-input__input.sc-stzh-input{color:var(--stzh-color-grey61);border-color:transparent;background-color:var(--stzh-color-black8);cursor:not-allowed}.stzh-input--is-readonly.sc-stzh-input .stzh-input__input.sc-stzh-input::-webkit-input-placeholder,.stzh-input--is-disabled.sc-stzh-input .stzh-input__input.sc-stzh-input::-webkit-input-placeholder{color:var(--stzh-color-grey61)}.stzh-input--is-readonly.sc-stzh-input .stzh-input__input.sc-stzh-input:-moz-placeholder,.stzh-input--is-disabled.sc-stzh-input .stzh-input__input.sc-stzh-input:-moz-placeholder{color:var(--stzh-color-grey61)}.stzh-input--is-readonly.sc-stzh-input .stzh-input__input.sc-stzh-input::-moz-placeholder,.stzh-input--is-disabled.sc-stzh-input .stzh-input__input.sc-stzh-input::-moz-placeholder{color:var(--stzh-color-grey61)}.stzh-input--is-readonly.sc-stzh-input .stzh-input__input.sc-stzh-input:-ms-input-placeholder,.stzh-input--is-disabled.sc-stzh-input .stzh-input__input.sc-stzh-input:-ms-input-placeholder{color:var(--stzh-color-grey61)}.stzh-input--is-readonly.sc-stzh-input .stzh-input__input.sc-stzh-input:hover,.stzh-input--is-readonly.sc-stzh-input .stzh-input__input.sc-stzh-input:focus,.stzh-input--is-disabled.sc-stzh-input .stzh-input__input.sc-stzh-input:hover,.stzh-input--is-disabled.sc-stzh-input .stzh-input__input.sc-stzh-input:focus{border-color:transparent}.stzh-input--is-readonly.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--is-disabled.sc-stzh-input .stzh-input__label.sc-stzh-input{cursor:not-allowed}.stzh-input--is-readonly.sc-stzh-input .stzh-input__label.sc-stzh-input::before,.stzh-input--is-disabled.sc-stzh-input .stzh-input__label.sc-stzh-input::before{background:transparent}.stzh-input--is-readonly.sc-stzh-input .stzh-input__button-right[disabled].sc-stzh-input:not([disabled=false])[variant=input],.stzh-input--is-disabled.sc-stzh-input .stzh-input__button-right[disabled].sc-stzh-input:not([disabled=false])[variant=input]{--color:var(--stzh-color-grey61);--hover-color:var(--stzh-color-grey61)}';var inputCounter=0;var StzhInput=function(){function t(t){var s=this;registerInstance(this,t);this.stzhChange=createEvent(this,"stzhChange",7);this.stzhChanged=createEvent(this,"stzhChanged",7);this.stzhFocus=createEvent(this,"stzhFocus",7);this.stzhBlur=createEvent(this,"stzhBlur",7);this.focusedByInput=false;this.onClearClick=function(t){s.value="";s.input.focus();s.stzhChange.emit({component:"stzh-input",originalEvent:t,value:s.value});s.stzhChanged.emit({component:"stzh-input",originalEvent:t,value:s.value})};this.onInput=function(t){s.value=s.input.value;s.stzhChange.emit({component:"stzh-input",originalEvent:t,value:s.value})};this.onChange=function(t){s.value=s.input.value;s.stzhChanged.emit({component:"stzh-input",originalEvent:t,value:s.value})};this.onRootFocus=function(){if(!s.focusedByInput){s.setFocus()}s.focusedByInput=false};this.onFocus=function(t){s.focusedByInput=true;var i=new FocusEvent("focus",{view:window,bubbles:false,cancelable:false});s.element.dispatchEvent(i);s.stzhFocus.emit({component:"stzh-input",originalEvent:t})};this.onBlur=function(t){s.input.value=s.input.value;var i=new FocusEvent("blur",{view:window,bubbles:false,cancelable:false});s.element.dispatchEvent(i);s.stzhBlur.emit({component:"stzh-input",originalEvent:t})};this.localization=undefined;this.multiline=false;this.rows=undefined;this.type="text";this.step=1;this.min=undefined;this.max=undefined;this.showSpin=false;this.readonly=false;this.disabled=false;this.clearable=false;this.showMarker=false;this.minlength=undefined;this.maxlength=undefined;this.name=undefined;this.value="";this.description=undefined;this.descriptionLong=undefined;this.error=undefined;this.invalid=false;this.required=false;this.inputmode=undefined;this.autocomplete="on";this.noAutocomplete=false;this.label="";this.labelHidden=false;this.size="default";this.a11yDescribedby="";this.filled=undefined}t.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.input.focus();return[2]}))}))};t.prototype.valueWatcher=function(t){this.filled=t!==""};t.prototype.errorWatcher=function(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};t.prototype.typeWatcher=function(t){var s=["text","search","password","email","url","tel","number","hidden"];if(!this.multiline&&!s.includes(t)){throw new Error("Type ".concat(t," not supported"))}};t.prototype.renderTextarea=function(){var t=this;return h("textarea",{class:"stzh-input__input stzh-input__input--textarea",ref:function(s){return t.input=s},id:this.inputId,name:this.name,value:this.value,rows:this.rows,disabled:this.disabled,readonly:this.readonly,minlength:this.minlength,maxlength:this.maxlength,"aria-describedby":"".concat(this.inputId,"-description ").concat(this.a11yDescribedby),"aria-required":this.required?"true":"false","aria-invalid":this.invalid?"true":"false",onChange:this.onChange,onInput:this.onInput,onFocus:this.onFocus,onBlur:this.onBlur})};t.prototype.renderInput=function(){var t=this;return h("input",{class:"stzh-input__input stzh-input__input--input",ref:function(s){return t.input=s},id:this.inputId,type:this.type,name:this.name,value:this.value,min:this.min,max:this.max,step:this.step,inputmode:this.inputmode,disabled:this.disabled,readonly:this.readonly,minlength:this.minlength,maxlength:this.maxlength,autocomplete:this.noAutocomplete?"off":this.autocomplete,"aria-autocomplete":this.noAutocomplete?"none":undefined,"aria-describedby":"".concat(this.inputId,"-description ").concat(this.a11yDescribedby),"aria-required":this.required?"true":"false","aria-invalid":this.invalid?"true":"false",onChange:this.onChange,onInput:this.onInput,onFocus:this.onFocus,onBlur:this.onBlur})};t.prototype.componentWillLoad=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(s){switch(s.label){case 0:this.inputId="stzh-input-".concat(inputCounter++);this.typeWatcher(this.type);this.valueWatcher(this.value);this.errorWatcher(this.error);if(!!this.localization)return[3,2];t=this;return[4,window.stzhComponents.utils.fetchTranslations(this.element,"input")];case 1:t.localization=s.sent();s.label=2;case 2:return[2]}}))}))};t.prototype.render=function(){var t;var s;var i=hasSlot(this.element,"button-right");var n=hasSlot(this.element,"description")||!!this.description;var e=hasSlot(this.element,"description-long")||!!this.descriptionLong;var r=hasSlot(this.element,"error")||!!this.error;var u=(t={"stzh-input":true,"stzh-input--has-button-right":i||this.type==="search"||this.clearable&&this.filled&&!this.readonly&&!this.disabled,"stzh-input--has-description":n,"stzh-input--has-description-long":e,"stzh-input--has-error":r,"stzh-input--has-spin":this.showSpin,"stzh-input--is-invalid":this.invalid,"stzh-input--is-disabled":this.disabled,"stzh-input--is-readonly":this.readonly,"stzh-input--is-required":this.required,"stzh-input--is-filled":this.filled,"stzh-input--is-clearable":this.clearable,"stzh-input--has-fixed-label":((s=window===null||window===void 0?void 0:window.stzhComponents)===null||s===void 0?void 0:s.labels)==="fixed","stzh-input--has-label-hidden":this.labelHidden},t["stzh-input--size-".concat(this.size)]=!!this.size,t["stzh-input--type-".concat(this.type)]=!!this.type,t);return h(Host,{tabindex:this.disabled?null:"-1",onFocus:this.onRootFocus},h("div",{class:u},h("div",{class:"stzh-input__field-wrapper"},this.multiline?this.renderTextarea():this.renderInput(),h("label",{class:"stzh-input__label",htmlFor:this.inputId},this.label?this.label:h("slot",null),this.showMarker&&h("span",{class:"stzh-input__marker"},h("span",{class:"stzh-input__marker-symbol","aria-hidden":"true"},this.required?this.localization.$globals.requiredFieldMarker:this.localization.$globals.optionalFieldMarker),h("span",{class:"stzh-input__marker-text"},this.required?this.localization.$globals.requiredFieldText:this.localization.$globals.optionalFieldText))),this.clearable||this.type==="search"?h("stzh-button",{class:"stzh-input__button-right",icon:this.disabled||this.readonly||!this.filled?"search":"close-circle","icon-only":true,variant:"input",onClick:this.onClearClick,disabled:this.disabled||this.readonly||!this.filled,a11yLabel:this.localization.$globals.clearButtonLabel,"aria-controls":this.inputId}):h("slot",{name:"button-right"})),h(StzhInputDescription,{classPrefix:"stzh-input",id:"".concat(this.inputId,"-description"),error:this._error,description:this.description,descriptionLong:this.descriptionLong,descriptionLongUsed:e,moreInfoButtonLabel:this.localization.$globals.moreInfoButtonLabel})))};Object.defineProperty(t.prototype,"element",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{value:["valueWatcher"],error:["errorWatcher"],type:["typeWatcher"]}},enumerable:false,configurable:true});return t}();StzhInput.style=stzhInputCss;export{StzhInput as stzh_input};
|
|
2
2
|
//# sourceMappingURL=stzh-input.entry.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["stzhInputCss","inputCounter","StzhInput","this","focusedByInput","onClearClick","event","_this","value","input","focus","stzhChange","emit","component","originalEvent","stzhChanged","onInput","onChange","onRootFocus","setFocus","onFocus","focusEvent","FocusEvent","view","window","bubbles","cancelable","element","dispatchEvent","stzhFocus","onBlur","blurEvent","stzhBlur","class_1","prototype","valueWatcher","newValue","filled","errorWatcher","_error","JSON","parse","e","invalid","length","typeWatcher","types","multiline","includes","Error","concat","renderTextarea","h","class","ref","el","id","inputId","name","rows","disabled","readonly","minlength","maxlength","a11yDescribedby","required","renderInput","type","min","max","step","inputmode","autocomplete","noAutocomplete","undefined","componentWillLoad","error","localization","_b","stzhComponents","utils","fetchTranslations","_c","sent","render","buttonRightSlotUsed","hasSlot","descriptionUsed","description","descriptionLongUsed","descriptionLong","errorUsed","classes","clearable","showSpin","_a","labels","labelHidden","size","Host","tabindex","htmlFor","label","showMarker","$globals","requiredFieldMarker","optionalFieldMarker","requiredFieldText","optionalFieldText","icon","variant","onClick","a11yLabel","clearButtonLabel","StzhInputDescription","classPrefix","moreInfoButtonLabel"],"sources":["src/components/stzh-input/stzh-input.scss?tag=stzh-input&encapsulation=scoped","src/components/stzh-input/stzh-input.tsx"],"sourcesContent":["/**\n * @prop --text-align: Text align of field\n * @prop --input-width: Width of of field\n * @prop --padding: Padding of field\n *\n * @prop --stzh-form-input-height: **Global**: Height of fields & buttons\n * @prop --stzh-form-input-small-height: **Global**: Height of fields & buttons when small variant is used\n * @prop --stzh-form-input-tiny-height: **Global**: Height of fields & buttons when tiny variant is used\n */\n\n:host {\n --text-align: left;\n --input-width: 100%;\n --padding: #{space('xsmall')} #{space('medium')};\n\n width: 100%;\n}\n\n:host ::slotted([slot=\"button-right\"]),\n.stzh-input__button-right {\n position: absolute;\n top: 0;\n right: 0;\n}\n\n:host ::slotted(stzh-button[slot=\"button-right\"][variant=\"input\"]),\n:host ::slotted([slot=\"button-right\"]) stzh-button[variant=\"input\"],\n.stzh-input__button-right[variant=\"input\"] {\n --border-color: transparent;\n --hover-border-color: transparent;\n}\n\n.stzh-input {\n\t@include input-description;\n\t@include fontSize('milli');\n\n &__field-wrapper {\n position: relative;\n display: flex;\n width: var(--input-width);\n }\n\n &__input {\n @include font;\n @include fontSize('milli');\n border: 1px solid $formBorderColor;\n transition-property: color, border-color;\n transition-duration: $baseTransitionAnimationSpeed;\n border-radius: $formInputBorderRadius;\n padding: var(--padding);\n margin: 0;\n width: 100%;\n color: $colorPrimary;\n background: $colorWhite;\n appearance: none;\n text-align: var(--text-align);\n\n @include placeholder {\n color: $formInputPlaceholderColor;\n }\n\n &:hover,\n &:focus {\n color: $colorPrimaryHover;\n border-color: $colorPrimaryHover;\n }\n\n // remove clear button for IE11\n &::-ms-clear {\n display: none;\n }\n\n // prevent ugly autofill background color in chrome\n &:-webkit-autofill {\n background-clip: text;\n }\n\n // show ellipsis for placeholders that are too long\n &:placeholder-shown {\n text-overflow: ellipsis;\n }\n\n // hide search clear icon on chrome\n &[type=\"search\"]::-webkit-search-decoration,\n &[type=\"search\"]::-webkit-search-cancel-button,\n &[type=\"search\"]::-webkit-search-results-button,\n &[type=\"search\"]::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n\n /* Normal inputs */\n\n &--input {\n height: $formInputHeight;\n }\n\n /* Textarea */\n\n &--textarea {\n min-height: $formInputHeight;\n resize: vertical;\n }\n }\n\n &__label {\n @include font('heavy');\n @include fontSize('nano');\n @include truncate;\n color: $formColor;\n width: auto;\n position: absolute;\n top: calc(#{$formInputHeight} / 2);\n // padding-left (medium) + border-left\n left: calc(#{space('medium')} + 1px);\n max-width: calc(100% - #{space('medium')} * 2);\n transform: translateY(-50%);\n transition: all $baseTransitionAnimationSpeed;\n pointer-events: none;\n\n &:empty {\n display: none;\n }\n\n &::before {\n content: '';\n display: none;\n background: $colorWhite;\n position: absolute;\n width: 100%;\n z-index: -1;\n left: 0;\n top: 50%;\n // prevent white line not fully overlaping border of input\n margin-top: -0.5px;\n height: 2px;\n }\n }\n\n &__input:hover + &__label,\n &__input:focus + &__label {\n color: $colorPrimaryHover;\n }\n\n &__button-right {\n display: none;\n\n &[disabled]:not([disabled=\"false\"])[variant=\"input\"] {\n --color: #{$formColor};\n --background-color: transparent;\n --border-color: transparent;\n\n --hover-color: #{$colorPrimaryHover};\n --hover-background-color: transparent;\n --hover-border-color: transparent;\n }\n }\n\n /* Clearable / Search input */\n\n &--is-clearable#{&}--is-filled:not(#{&}--is-readonly):not(#{&}--is-disabled) &__button-right,\n &--type-search &__button-right {\n display: block;\n }\n\n &--type-search:not(#{&}--is-filled) &__button-right,\n &--type-search#{&}--is-readonly &__button-right,\n &--type-search#{&}--is-disabled &__button-right {\n pointer-events: none;\n }\n\n /* Filled variant */\n\n &--is-filled &__button-right {\n &.is-search {\n pointer-events: initial;\n }\n }\n\n /* Styles for floating label */\n\n &:not(#{&}--is-readonly):not(#{&}--is-disabled) &__input:focus + &__label,\n &--has-fixed-label &__label,\n &--is-filled &__label,\n &--is-readonly &__label,\n &--is-disabled &__label,\n &--is-invalid &__label {\n display: block;\n top: 0;\n // padding-left (input field medium) - padding-left\n left: calc(#{space('medium')} - #{space('xxsmall')});\n height: 20px; // dividable by two (so before element is always positioned correctly)\n line-height: 20px;\n padding: 0 space('xxsmall');\n max-width: calc(100% - #{space('small')} * 2);\n pointer-events: all;\n\n &:not(:empty)::before {\n display: block;\n }\n }\n\n /* Button Right Variant */\n\n &--has-button-right &__input {\n // distance to icon + icon button width\n padding-right: calc(#{space('xsmall')} + #{$formInputHeight});\n }\n\n &--has-button-right &__label {\n // 100% - ((padding left of normal variant + border 1px) * 2) - icon button width\n max-width: calc(100% - (#{space('medium')} + 1px) * 2 - #{$formInputHeight});\n }\n\n &--has-button-right#{&}:not(#{&}--is-readonly):not(#{&}--is-disabled) &__input:focus + &__label,\n &--has-button-right#{&}--has-fixed-label &__label,\n &--has-button-right#{&}--is-filled &__label,\n &--has-button-right#{&}--is-readonly &__label,\n &--has-button-right#{&}--is-disabled &__label,\n &--has-button-right#{&}--is-invalid &__label {\n // 100% - left distance to text + 1px border + padding label right side - icon button width\n max-width: calc(100% - #{space('medium')} - #{space('xxsmall')} - 1px + #{space('xxsmall')} - #{$formInputHeight});\n }\n\n /* Size variants */\n\n &--size-small {\n @include fontSize('micro');\n }\n\n &--size-small &__input {\n @include fontSize('micro');\n\n &--input {\n height: $formInputHeightSmall;\n }\n\n &--textarea {\n min-height: $formInputHeightSmall;\n }\n }\n\n &--size-small &__label {\n top: calc(#{$formInputHeightSmall} / 2);\n }\n\n &--size-small#{&}:not(#{&}--is-readonly):not(#{&}--is-disabled) &__input:focus + &__label,\n &--size-small#{&}--has-fixed-label &__label,\n &--size-small#{&}--is-filled &__label,\n &--size-small#{&}--is-readonly &__label,\n &--size-small#{&}--is-disabled &__label,\n &--size-small#{&}--is-invalid &__label {\n top: 0;\n }\n\n &--size-small#{&}--has-button-right &__input {\n padding-right: calc(#{space('xxsmall')} + #{$formInputHeightSmall});\n }\n\n &--size-small#{&}--has-button-right &__label {\n max-width: calc(100% - (#{space('medium')} + 1px) * 2 - #{$formInputHeightSmall});\n }\n\n &--size-small#{&}--has-button-right#{&}:not(#{&}--is-readonly):not(#{&}--is-disabled) &__input:focus + &__label,\n &--size-small#{&}--has-button-right#{&}--has-fixed-label &__label,\n &--size-small#{&}--has-button-right#{&}--is-filled &__label,\n &--size-small#{&}--has-button-right#{&}--is-readonly &__label,\n &--size-small#{&}--has-button-right#{&}--is-disabled &__label,\n &--size-small#{&}--has-button-right#{&}--is-invalid &__label {\n max-width: calc(100% - #{space('medium')} - #{space('xxsmall')} - 1px + #{space('xsmall')} - #{$formInputHeightSmall});\n }\n\n /* Spin button */\n\n &:not(#{&}--has-spin) &__input {\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n appearance: none;\n margin: 0;\n }\n\n &[type=number] {\n appearance: textfield;\n }\n }\n\n /* Hidden label */\n &--has-label-hidden &__label {\n @include visuallyhidden;\n }\n\n /* Invalid */\n\n &--is-invalid &__input,\n &--is-invalid &__label,\n &--is-invalid &__input + &__label {\n color: $colorError;\n }\n\n &--is-invalid &__input {\n border-color: $colorError;\n\n @include placeholder {\n color: $colorError;\n }\n }\n\n /* Readonly / Disabled */\n\n &--is-readonly &__input,\n &--is-readonly &__input + &__label,\n &--is-disabled &__input,\n &--is-disabled &__input + &__label {\n color: $formDisabledColor;\n }\n\n &--is-readonly &__input,\n &--is-disabled &__input {\n color: $formDisabledColor;\n border-color: $formDisabledBorderColor;\n background-color: $formDisabledBackgroundColor;\n cursor: not-allowed;\n\n @include placeholder {\n color: $formDisabledColor;\n }\n\n &:hover,\n &:focus {\n border-color: $formDisabledBorderColor;\n }\n }\n\n &--is-readonly &__label,\n &--is-disabled &__label {\n cursor: not-allowed;\n\n &::before {\n background: transparent;\n }\n }\n\n &--is-readonly &__button-right,\n &--is-disabled &__button-right {\n &[disabled]:not([disabled=\"false\"])[variant=\"input\"] {\n --color: #{$formDisabledColor};\n --hover-color: #{$formDisabledColor};\n }\n }\n}\n","import {\n Component,\n Prop,\n Host,\n Event,\n EventEmitter,\n State,\n Method,\n Element,\n h,\n Watch\n} from \"@stencil/core\";\n\nimport {\n StzhInputChangeEvent,\n StzhInputChangedEvent,\n StzhInputFocusEvent,\n StzhInputBlurEvent\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nimport { StzhInputDescription } from \"./stzh-input-description\";\n\nlet inputCounter = 0;\n\n/**\n * @slot - Slot for label content\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot error - Slot for error\n * @slot button-right - Slot for right button\n */\n@Component({\n tag: \"stzh-input\",\n styleUrl: \"stzh-input.scss\",\n scoped: true\n})\nexport class StzhInput {\n /** Translation strings */\n @Prop() localization: StzhLocaleComponent;\n\n /** Whether the input is a textarea or an input field */\n @Prop() multiline: boolean = false;\n\n /** Rows attribute if input element is textarea */\n @Prop() rows: number;\n\n /** If input field, this defines the type (if `search`, a search icon will be displayed) */\n @Prop() type: \"text\" | \"search\" | \"password\" | \"email\" | \"url\" | \"tel\" | \"number\" = \"text\";\n\n /** If input type is number, this will be the step size */\n @Prop() step: number = 1;\n\n /** If input type is number, this will be the minimum step number */\n @Prop() min: number;\n\n /** If input type is number, this will be the maximum step number */\n @Prop() max: number;\n\n /** If input type is number and this property is true, this will show the spin buttons on hover/focus */\n @Prop({ reflect: true }) showSpin: boolean = false;\n\n /** Whether the element is readonly or not */\n @Prop({ reflect: true }) readonly: boolean = false;\n\n /** Whether the element is disabled or not */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /** Whether clearable button is showing when input field has value and is enabled (button-right slot not usable anymore when true) */\n @Prop({ reflect: true }) clearable: boolean = false;\n\n /** 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 /** Minimum of characters */\n @Prop() minlength: number;\n\n /** Maxlength of characters */\n @Prop() maxlength: number;\n\n /** The name of the input element */\n @Prop({ reflect: true }) name: string;\n\n /** The value of the input element */\n @Prop({ mutable: true }) value: string = \"\";\n\n /** 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 /** Invalid status */\n @Prop({ reflect: true }) invalid: boolean = false;\n\n /** Required status */\n @Prop({ reflect: true }) required: boolean = false;\n\n /**\n * Specify inputmode.\n * See [MDN](https://developer.mozilla.org/de/docs/Web/HTML/Global_attributes/inputmode) for possible values\n */\n @Prop() inputmode: string;\n\n /**\n * Specify what the user agent has to provide as automated assistance.\n * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for possible values\n */\n @Prop() autocomplete: string = \"on\";\n\n /** Whether autocomplete should be turned off */\n @Prop() noAutocomplete: boolean = false;\n\n /** Label */\n @Prop() label: string = \"\";\n\n /** Whether label should be visually hidden. */\n @Prop() labelHidden: boolean = false;\n\n /** Size variant */\n @Prop({ reflect: true }) size: \"default\" | \"small\" = \"default\";\n\n /** Id for element which describes the input (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */\n @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n /** Whether the input is filled or not */\n @State() filled: boolean;\n\n @Element() element: HTMLStzhInputElement;\n\n /** Focus input field */\n @Method()\n async setFocus() {\n this.input.focus();\n }\n\n /** Input change event */\n @Event() stzhChange: EventEmitter<StzhInputChangeEvent>;\n\n /** Input changed event */\n @Event() stzhChanged: EventEmitter<StzhInputChangedEvent>;\n\n /** Input focus event */\n @Event() stzhFocus: EventEmitter<StzhInputFocusEvent>;\n\n /** Input blur event */\n @Event() stzhBlur: EventEmitter<StzhInputBlurEvent>;\n\n @Watch(\"value\")\n valueWatcher(newValue: string) {\n this.filled = newValue !== \"\";\n }\n\n @Watch(\"error\")\n errorWatcher(newValue: string | string[]) {\n if (typeof newValue === \"string\") {\n try {\n this._error = JSON.parse(newValue);\n } catch (e) {\n if (newValue) {\n this._error = [newValue];\n } else {\n this._error = [];\n }\n }\n } else if (newValue) {\n this._error = newValue;\n } else {\n this._error = [];\n }\n\n this.invalid = this._error.length > 0;\n }\n\n @Watch(\"type\")\n typeWatcher(newValue: string) {\n const types = [\n \"text\", \"search\", \"password\", \"email\", \"url\", \"tel\", \"number\"\n ];\n\n if (!this.multiline && !types.includes(newValue)) {\n throw new Error(`Type ${newValue} not supported`);\n }\n }\n\n private input: HTMLInputElement | HTMLTextAreaElement;\n private inputId: string;\n private focusedByInput: boolean = false;\n\n private onClearClick = (event: MouseEvent) => {\n this.value = \"\";\n this.input.focus();\n\n this.stzhChange.emit({\n component: \"stzh-input\",\n originalEvent: event,\n value: this.value\n });\n\n this.stzhChanged.emit({\n component: \"stzh-input\",\n originalEvent: event,\n value: this.value\n });\n }\n\n private onInput = (event: InputEvent) => {\n this.value = this.input.value;\n\n this.stzhChange.emit({\n component: \"stzh-input\",\n originalEvent: event,\n value: this.value\n });\n }\n\n private onChange = (event: InputEvent) => {\n this.value = this.input.value;\n\n this.stzhChanged.emit({\n component: \"stzh-input\",\n originalEvent: event,\n value: this.value\n });\n }\n\n private onRootFocus = () => {\n if (!this.focusedByInput) {\n this.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-input\",\n originalEvent: event\n });\n }\n\n private onBlur = (event: FocusEvent) => {\n // fixes weird bug where autofill selection doesn't get removed\n this.input.value = this.input.value;\n\n const blurEvent = new FocusEvent('blur', {\n view: window,\n bubbles: false,\n cancelable: false\n });\n\n this.element.dispatchEvent(blurEvent);\n this.stzhBlur.emit({\n component: \"stzh-input\",\n originalEvent: event\n });\n }\n\n private renderTextarea(): HTMLTextAreaElement {\n return (\n <textarea\n class=\"stzh-input__input stzh-input__input--textarea\"\n ref={(el) => (this.input = el as HTMLTextAreaElement)}\n id={this.inputId}\n name={this.name}\n value={this.value}\n rows={this.rows}\n disabled={this.disabled}\n readonly={this.readonly}\n minlength={this.minlength}\n maxlength={this.maxlength}\n aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n aria-required={this.required ? \"true\" : \"false\"}\n aria-invalid={this.invalid ? \"true\" : \"false\"}\n onChange={this.onChange}\n onInput={this.onInput}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n ></textarea>\n );\n }\n\n private renderInput(): HTMLInputElement {\n return (\n <input\n class=\"stzh-input__input stzh-input__input--input\"\n ref={(el) => (this.input = el as HTMLInputElement)}\n id={this.inputId}\n type={this.type}\n name={this.name}\n value={this.value}\n min={this.min}\n max={this.max}\n step={this.step}\n inputmode={this.inputmode}\n disabled={this.disabled}\n readonly={this.readonly}\n minlength={this.minlength}\n maxlength={this.maxlength}\n autocomplete={this.noAutocomplete ? \"off\" : this.autocomplete}\n aria-autocomplete={this.noAutocomplete ? \"none\" : undefined}\n aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n aria-required={this.required ? \"true\" : \"false\"}\n aria-invalid={this.invalid ? \"true\" : \"false\"}\n onChange={this.onChange}\n onInput={this.onInput}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n />\n );\n }\n\n async componentWillLoad() {\n this.inputId = `stzh-input-${inputCounter++}`;\n this.typeWatcher(this.type);\n this.valueWatcher(this.value);\n this.errorWatcher(this.error);\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"input\");\n }\n }\n\n render() {\n const buttonRightSlotUsed = hasSlot(this.element, 'button-right');\n const descriptionUsed = hasSlot(this.element, 'description') || !!this.description;\n const descriptionLongUsed = hasSlot(this.element, 'description-long') || !!this.descriptionLong;\n const errorUsed = hasSlot(this.element, 'error') || !!this.error;\n const classes = {\n \"stzh-input\": true,\n \"stzh-input--has-button-right\": buttonRightSlotUsed\n || this.type === \"search\"\n || (this.clearable && this.filled && !this.readonly && !this.disabled),\n \"stzh-input--has-description\": descriptionUsed,\n \"stzh-input--has-description-long\": descriptionLongUsed,\n \"stzh-input--has-error\": errorUsed,\n \"stzh-input--has-spin\": this.showSpin,\n \"stzh-input--is-invalid\": this.invalid,\n \"stzh-input--is-disabled\": this.disabled,\n \"stzh-input--is-readonly\": this.readonly,\n \"stzh-input--is-required\": this.required,\n \"stzh-input--is-filled\": this.filled,\n \"stzh-input--is-clearable\": this.clearable,\n \"stzh-input--has-fixed-label\": window?.stzhComponents?.labels === \"fixed\",\n \"stzh-input--has-label-hidden\": this.labelHidden,\n [`stzh-input--size-${this.size}`]: !!this.size,\n [`stzh-input--type-${this.type}`]: !!this.type,\n };\n\n return (\n <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n <div class={classes}>\n <div class=\"stzh-input__field-wrapper\">\n {this.multiline ? this.renderTextarea() : this.renderInput()}\n <label class=\"stzh-input__label\" htmlFor={this.inputId}>\n {this.label ? this.label : <slot></slot>}\n {this.showMarker &&\n <span class=\"stzh-input__marker\">\n <span class=\"stzh-input__marker-symbol\" aria-hidden=\"true\">\n {this.required\n ? this.localization.$globals.requiredFieldMarker\n : this.localization.$globals.optionalFieldMarker\n }\n </span>\n <span class=\"stzh-input__marker-text\">\n {this.required\n ? this.localization.$globals.requiredFieldText\n : this.localization.$globals.optionalFieldText\n }\n </span>\n </span>\n }\n </label>\n {this.clearable || this.type === \"search\"\n ?\n <stzh-button\n class=\"stzh-input__button-right\"\n icon={this.disabled || this.readonly || !this.filled ? \"search\" : \"close-circle\"}\n icon-only\n variant=\"input\"\n onClick={this.onClearClick}\n disabled={this.disabled || this.readonly || !this.filled}\n a11yLabel={this.localization.$globals.clearButtonLabel}\n aria-controls={this.inputId}\n ></stzh-button>\n :\n <slot name=\"button-right\"></slot>\n }\n </div>\n <StzhInputDescription\n classPrefix=\"stzh-input\"\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"],"mappings":"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"}
|
|
1
|
+
{"version":3,"names":["stzhInputCss","inputCounter","StzhInput","this","focusedByInput","onClearClick","event","_this","value","input","focus","stzhChange","emit","component","originalEvent","stzhChanged","onInput","onChange","onRootFocus","setFocus","onFocus","focusEvent","FocusEvent","view","window","bubbles","cancelable","element","dispatchEvent","stzhFocus","onBlur","blurEvent","stzhBlur","class_1","prototype","valueWatcher","newValue","filled","errorWatcher","_error","JSON","parse","e","invalid","length","typeWatcher","types","multiline","includes","Error","concat","renderTextarea","h","class","ref","el","id","inputId","name","rows","disabled","readonly","minlength","maxlength","a11yDescribedby","required","renderInput","type","min","max","step","inputmode","autocomplete","noAutocomplete","undefined","componentWillLoad","error","localization","_b","stzhComponents","utils","fetchTranslations","_c","sent","render","buttonRightSlotUsed","hasSlot","descriptionUsed","description","descriptionLongUsed","descriptionLong","errorUsed","classes","clearable","showSpin","_a","labels","labelHidden","size","Host","tabindex","htmlFor","label","showMarker","$globals","requiredFieldMarker","optionalFieldMarker","requiredFieldText","optionalFieldText","icon","variant","onClick","a11yLabel","clearButtonLabel","StzhInputDescription","classPrefix","moreInfoButtonLabel"],"sources":["src/components/stzh-input/stzh-input.scss?tag=stzh-input&encapsulation=scoped","src/components/stzh-input/stzh-input.tsx"],"sourcesContent":["/**\n * @prop --text-align: Text align of field\n * @prop --input-width: Width of of field\n * @prop --padding: Padding of field\n *\n * @prop --stzh-form-input-height: **Global**: Height of fields & buttons\n * @prop --stzh-form-input-small-height: **Global**: Height of fields & buttons when small variant is used\n * @prop --stzh-form-input-tiny-height: **Global**: Height of fields & buttons when tiny variant is used\n */\n\n:host {\n --text-align: left;\n --input-width: 100%;\n --padding: #{space('xsmall')} #{space('medium')};\n\n &[type=\"hidden\"] {\n position: absolute;\n top: -9999px;\n left: -9999px;\n visibility: hidden;\n }\n\n width: 100%;\n}\n\n:host ::slotted([slot=\"button-right\"]),\n.stzh-input__button-right {\n position: absolute;\n top: 0;\n right: 0;\n}\n\n:host ::slotted(stzh-button[slot=\"button-right\"][variant=\"input\"]),\n:host ::slotted([slot=\"button-right\"]) stzh-button[variant=\"input\"],\n.stzh-input__button-right[variant=\"input\"] {\n --border-color: transparent;\n --hover-border-color: transparent;\n}\n\n.stzh-input {\n\t@include input-description;\n\t@include fontSize('milli');\n\n &__field-wrapper {\n position: relative;\n display: flex;\n width: var(--input-width);\n }\n\n &__input {\n @include font;\n @include fontSize('milli');\n border: 1px solid $formBorderColor;\n transition-property: color, border-color;\n transition-duration: $baseTransitionAnimationSpeed;\n border-radius: $formInputBorderRadius;\n padding: var(--padding);\n margin: 0;\n width: 100%;\n color: $colorPrimary;\n background: $colorWhite;\n appearance: none;\n text-align: var(--text-align);\n\n @include placeholder {\n color: $formInputPlaceholderColor;\n }\n\n &:hover,\n &:focus {\n color: $colorPrimaryHover;\n border-color: $colorPrimaryHover;\n }\n\n // remove clear button for IE11\n &::-ms-clear {\n display: none;\n }\n\n // prevent ugly autofill background color in chrome\n &:-webkit-autofill {\n background-clip: text;\n }\n\n // show ellipsis for placeholders that are too long\n &:placeholder-shown {\n text-overflow: ellipsis;\n }\n\n // hide search clear icon on chrome\n &[type=\"search\"]::-webkit-search-decoration,\n &[type=\"search\"]::-webkit-search-cancel-button,\n &[type=\"search\"]::-webkit-search-results-button,\n &[type=\"search\"]::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n\n /* Normal inputs */\n\n &--input {\n height: $formInputHeight;\n }\n\n /* Textarea */\n\n &--textarea {\n min-height: $formInputHeight;\n resize: vertical;\n }\n }\n\n &__label {\n @include font('heavy');\n @include fontSize('nano');\n @include truncate;\n color: $formColor;\n width: auto;\n position: absolute;\n top: calc(#{$formInputHeight} / 2);\n // padding-left (medium) + border-left\n left: calc(#{space('medium')} + 1px);\n max-width: calc(100% - #{space('medium')} * 2);\n transform: translateY(-50%);\n transition: all $baseTransitionAnimationSpeed;\n pointer-events: none;\n\n &:empty {\n display: none;\n }\n\n &::before {\n content: '';\n display: none;\n background: $colorWhite;\n position: absolute;\n width: 100%;\n z-index: -1;\n left: 0;\n top: 50%;\n // prevent white line not fully overlaping border of input\n margin-top: -0.5px;\n height: 2px;\n }\n }\n\n &__input:hover + &__label,\n &__input:focus + &__label {\n color: $colorPrimaryHover;\n }\n\n &__button-right {\n display: none;\n\n &[disabled]:not([disabled=\"false\"])[variant=\"input\"] {\n --color: #{$formColor};\n --background-color: transparent;\n --border-color: transparent;\n\n --hover-color: #{$colorPrimaryHover};\n --hover-background-color: transparent;\n --hover-border-color: transparent;\n }\n }\n\n /* Clearable / Search input */\n\n &--is-clearable#{&}--is-filled:not(#{&}--is-readonly):not(#{&}--is-disabled) &__button-right,\n &--type-search &__button-right {\n display: block;\n }\n\n &--type-search:not(#{&}--is-filled) &__button-right,\n &--type-search#{&}--is-readonly &__button-right,\n &--type-search#{&}--is-disabled &__button-right {\n pointer-events: none;\n }\n\n /* Filled variant */\n\n &--is-filled &__button-right {\n &.is-search {\n pointer-events: initial;\n }\n }\n\n /* Styles for floating label */\n\n &:not(#{&}--is-readonly):not(#{&}--is-disabled) &__input:focus + &__label,\n &--has-fixed-label &__label,\n &--is-filled &__label,\n &--is-readonly &__label,\n &--is-disabled &__label,\n &--is-invalid &__label {\n display: block;\n top: 0;\n // padding-left (input field medium) - padding-left\n left: calc(#{space('medium')} - #{space('xxsmall')});\n height: 20px; // dividable by two (so before element is always positioned correctly)\n line-height: 20px;\n padding: 0 space('xxsmall');\n max-width: calc(100% - #{space('small')} * 2);\n pointer-events: all;\n\n &:not(:empty)::before {\n display: block;\n }\n }\n\n /* Button Right Variant */\n\n &--has-button-right &__input {\n // distance to icon + icon button width\n padding-right: calc(#{space('xsmall')} + #{$formInputHeight});\n }\n\n &--has-button-right &__label {\n // 100% - ((padding left of normal variant + border 1px) * 2) - icon button width\n max-width: calc(100% - (#{space('medium')} + 1px) * 2 - #{$formInputHeight});\n }\n\n &--has-button-right#{&}:not(#{&}--is-readonly):not(#{&}--is-disabled) &__input:focus + &__label,\n &--has-button-right#{&}--has-fixed-label &__label,\n &--has-button-right#{&}--is-filled &__label,\n &--has-button-right#{&}--is-readonly &__label,\n &--has-button-right#{&}--is-disabled &__label,\n &--has-button-right#{&}--is-invalid &__label {\n // 100% - left distance to text + 1px border + padding label right side - icon button width\n max-width: calc(100% - #{space('medium')} - #{space('xxsmall')} - 1px + #{space('xxsmall')} - #{$formInputHeight});\n }\n\n /* Size variants */\n\n &--size-small {\n @include fontSize('micro');\n }\n\n &--size-small &__input {\n @include fontSize('micro');\n\n &--input {\n height: $formInputHeightSmall;\n }\n\n &--textarea {\n min-height: $formInputHeightSmall;\n }\n }\n\n &--size-small &__label {\n top: calc(#{$formInputHeightSmall} / 2);\n }\n\n &--size-small#{&}:not(#{&}--is-readonly):not(#{&}--is-disabled) &__input:focus + &__label,\n &--size-small#{&}--has-fixed-label &__label,\n &--size-small#{&}--is-filled &__label,\n &--size-small#{&}--is-readonly &__label,\n &--size-small#{&}--is-disabled &__label,\n &--size-small#{&}--is-invalid &__label {\n top: 0;\n }\n\n &--size-small#{&}--has-button-right &__input {\n padding-right: calc(#{space('xxsmall')} + #{$formInputHeightSmall});\n }\n\n &--size-small#{&}--has-button-right &__label {\n max-width: calc(100% - (#{space('medium')} + 1px) * 2 - #{$formInputHeightSmall});\n }\n\n &--size-small#{&}--has-button-right#{&}:not(#{&}--is-readonly):not(#{&}--is-disabled) &__input:focus + &__label,\n &--size-small#{&}--has-button-right#{&}--has-fixed-label &__label,\n &--size-small#{&}--has-button-right#{&}--is-filled &__label,\n &--size-small#{&}--has-button-right#{&}--is-readonly &__label,\n &--size-small#{&}--has-button-right#{&}--is-disabled &__label,\n &--size-small#{&}--has-button-right#{&}--is-invalid &__label {\n max-width: calc(100% - #{space('medium')} - #{space('xxsmall')} - 1px + #{space('xsmall')} - #{$formInputHeightSmall});\n }\n\n /* Spin button */\n\n &:not(#{&}--has-spin) &__input {\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n appearance: none;\n margin: 0;\n }\n\n &[type=number] {\n appearance: textfield;\n }\n }\n\n /* Hidden label */\n &--has-label-hidden &__label {\n @include visuallyhidden;\n }\n\n /* Invalid */\n\n &--is-invalid &__input,\n &--is-invalid &__label,\n &--is-invalid &__input + &__label {\n color: $colorError;\n }\n\n &--is-invalid &__input {\n border-color: $colorError;\n\n @include placeholder {\n color: $colorError;\n }\n }\n\n /* Readonly / Disabled */\n\n &--is-readonly &__input,\n &--is-readonly &__input + &__label,\n &--is-disabled &__input,\n &--is-disabled &__input + &__label {\n color: $formDisabledColor;\n }\n\n &--is-readonly &__input,\n &--is-disabled &__input {\n color: $formDisabledColor;\n border-color: $formDisabledBorderColor;\n background-color: $formDisabledBackgroundColor;\n cursor: not-allowed;\n\n @include placeholder {\n color: $formDisabledColor;\n }\n\n &:hover,\n &:focus {\n border-color: $formDisabledBorderColor;\n }\n }\n\n &--is-readonly &__label,\n &--is-disabled &__label {\n cursor: not-allowed;\n\n &::before {\n background: transparent;\n }\n }\n\n &--is-readonly &__button-right,\n &--is-disabled &__button-right {\n &[disabled]:not([disabled=\"false\"])[variant=\"input\"] {\n --color: #{$formDisabledColor};\n --hover-color: #{$formDisabledColor};\n }\n }\n}\n","import {\n Component,\n Prop,\n Host,\n Event,\n EventEmitter,\n State,\n Method,\n Element,\n h,\n Watch\n} from \"@stencil/core\";\n\nimport {\n StzhInputChangeEvent,\n StzhInputChangedEvent,\n StzhInputFocusEvent,\n StzhInputBlurEvent\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nimport { StzhInputDescription } from \"./stzh-input-description\";\n\nlet inputCounter = 0;\n\n/**\n * @slot - Slot for label content\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot error - Slot for error\n * @slot button-right - Slot for right button\n */\n@Component({\n tag: \"stzh-input\",\n styleUrl: \"stzh-input.scss\",\n scoped: true\n})\nexport class StzhInput {\n /** Translation strings */\n @Prop() localization: StzhLocaleComponent;\n\n /** Whether the input is a textarea or an input field */\n @Prop() multiline: boolean = false;\n\n /** Rows attribute if input element is textarea */\n @Prop() rows: number;\n\n /** If input field, this defines the type (if `search`, a search icon will be displayed) */\n @Prop({ reflect: true }) type: \"text\" | \"search\" | \"password\" | \"email\" | \"url\" | \"tel\" | \"number\" | \"hidden\" = \"text\";\n\n /** If input type is number, this will be the step size */\n @Prop() step: number = 1;\n\n /** If input type is number, this will be the minimum step number */\n @Prop() min: number;\n\n /** If input type is number, this will be the maximum step number */\n @Prop() max: number;\n\n /** If input type is number and this property is true, this will show the spin buttons on hover/focus */\n @Prop({ reflect: true }) showSpin: boolean = false;\n\n /** Whether the element is readonly or not */\n @Prop({ reflect: true }) readonly: boolean = false;\n\n /** Whether the element is disabled or not */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /** Whether clearable button is showing when input field has value and is enabled (button-right slot not usable anymore when true) */\n @Prop({ reflect: true }) clearable: boolean = false;\n\n /** 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 /** Minimum of characters */\n @Prop() minlength: number;\n\n /** Maxlength of characters */\n @Prop() maxlength: number;\n\n /** The name of the input element */\n @Prop({ reflect: true }) name: string;\n\n /** The value of the input element */\n @Prop({ mutable: true }) value: string = \"\";\n\n /** 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 /** Invalid status */\n @Prop({ reflect: true }) invalid: boolean = false;\n\n /** Required status */\n @Prop({ reflect: true }) required: boolean = false;\n\n /**\n * Specify inputmode.\n * See [MDN](https://developer.mozilla.org/de/docs/Web/HTML/Global_attributes/inputmode) for possible values\n */\n @Prop() inputmode: string;\n\n /**\n * Specify what the user agent has to provide as automated assistance.\n * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for possible values\n */\n @Prop() autocomplete: string = \"on\";\n\n /** Whether autocomplete should be turned off */\n @Prop() noAutocomplete: boolean = false;\n\n /** Label */\n @Prop() label: string = \"\";\n\n /** Whether label should be visually hidden. */\n @Prop() labelHidden: boolean = false;\n\n /** Size variant */\n @Prop({ reflect: true }) size: \"default\" | \"small\" = \"default\";\n\n /** Id for element which describes the input (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */\n @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n /** Whether the input is filled or not */\n @State() filled: boolean;\n\n @Element() element: HTMLStzhInputElement;\n\n /** Focus input field */\n @Method()\n async setFocus() {\n this.input.focus();\n }\n\n /** Input change event */\n @Event() stzhChange: EventEmitter<StzhInputChangeEvent>;\n\n /** Input changed event */\n @Event() stzhChanged: EventEmitter<StzhInputChangedEvent>;\n\n /** Input focus event */\n @Event() stzhFocus: EventEmitter<StzhInputFocusEvent>;\n\n /** Input blur event */\n @Event() stzhBlur: EventEmitter<StzhInputBlurEvent>;\n\n @Watch(\"value\")\n valueWatcher(newValue: string) {\n this.filled = newValue !== \"\";\n }\n\n @Watch(\"error\")\n errorWatcher(newValue: string | string[]) {\n if (typeof newValue === \"string\") {\n try {\n this._error = JSON.parse(newValue);\n } catch (e) {\n if (newValue) {\n this._error = [newValue];\n } else {\n this._error = [];\n }\n }\n } else if (newValue) {\n this._error = newValue;\n } else {\n this._error = [];\n }\n\n this.invalid = this._error.length > 0;\n }\n\n @Watch(\"type\")\n typeWatcher(newValue: string) {\n const types = [\n \"text\", \"search\", \"password\", \"email\", \"url\", \"tel\", \"number\", \"hidden\"\n ];\n\n if (!this.multiline && !types.includes(newValue)) {\n throw new Error(`Type ${newValue} not supported`);\n }\n }\n\n private input: HTMLInputElement | HTMLTextAreaElement;\n private inputId: string;\n private focusedByInput: boolean = false;\n\n private onClearClick = (event: MouseEvent) => {\n this.value = \"\";\n this.input.focus();\n\n this.stzhChange.emit({\n component: \"stzh-input\",\n originalEvent: event,\n value: this.value\n });\n\n this.stzhChanged.emit({\n component: \"stzh-input\",\n originalEvent: event,\n value: this.value\n });\n }\n\n private onInput = (event: InputEvent) => {\n this.value = this.input.value;\n\n this.stzhChange.emit({\n component: \"stzh-input\",\n originalEvent: event,\n value: this.value\n });\n }\n\n private onChange = (event: InputEvent) => {\n this.value = this.input.value;\n\n this.stzhChanged.emit({\n component: \"stzh-input\",\n originalEvent: event,\n value: this.value\n });\n }\n\n private onRootFocus = () => {\n if (!this.focusedByInput) {\n this.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-input\",\n originalEvent: event\n });\n }\n\n private onBlur = (event: FocusEvent) => {\n // fixes weird bug where autofill selection doesn't get removed\n this.input.value = this.input.value;\n\n const blurEvent = new FocusEvent('blur', {\n view: window,\n bubbles: false,\n cancelable: false\n });\n\n this.element.dispatchEvent(blurEvent);\n this.stzhBlur.emit({\n component: \"stzh-input\",\n originalEvent: event\n });\n }\n\n private renderTextarea(): HTMLTextAreaElement {\n return (\n <textarea\n class=\"stzh-input__input stzh-input__input--textarea\"\n ref={(el) => (this.input = el as HTMLTextAreaElement)}\n id={this.inputId}\n name={this.name}\n value={this.value}\n rows={this.rows}\n disabled={this.disabled}\n readonly={this.readonly}\n minlength={this.minlength}\n maxlength={this.maxlength}\n aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n aria-required={this.required ? \"true\" : \"false\"}\n aria-invalid={this.invalid ? \"true\" : \"false\"}\n onChange={this.onChange}\n onInput={this.onInput}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n ></textarea>\n );\n }\n\n private renderInput(): HTMLInputElement {\n return (\n <input\n class=\"stzh-input__input stzh-input__input--input\"\n ref={(el) => (this.input = el as HTMLInputElement)}\n id={this.inputId}\n type={this.type}\n name={this.name}\n value={this.value}\n min={this.min}\n max={this.max}\n step={this.step}\n inputmode={this.inputmode}\n disabled={this.disabled}\n readonly={this.readonly}\n minlength={this.minlength}\n maxlength={this.maxlength}\n autocomplete={this.noAutocomplete ? \"off\" : this.autocomplete}\n aria-autocomplete={this.noAutocomplete ? \"none\" : undefined}\n aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n aria-required={this.required ? \"true\" : \"false\"}\n aria-invalid={this.invalid ? \"true\" : \"false\"}\n onChange={this.onChange}\n onInput={this.onInput}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n />\n );\n }\n\n async componentWillLoad() {\n this.inputId = `stzh-input-${inputCounter++}`;\n this.typeWatcher(this.type);\n this.valueWatcher(this.value);\n this.errorWatcher(this.error);\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"input\");\n }\n }\n\n render() {\n const buttonRightSlotUsed = hasSlot(this.element, 'button-right');\n const descriptionUsed = hasSlot(this.element, 'description') || !!this.description;\n const descriptionLongUsed = hasSlot(this.element, 'description-long') || !!this.descriptionLong;\n const errorUsed = hasSlot(this.element, 'error') || !!this.error;\n const classes = {\n \"stzh-input\": true,\n \"stzh-input--has-button-right\": buttonRightSlotUsed\n || this.type === \"search\"\n || (this.clearable && this.filled && !this.readonly && !this.disabled),\n \"stzh-input--has-description\": descriptionUsed,\n \"stzh-input--has-description-long\": descriptionLongUsed,\n \"stzh-input--has-error\": errorUsed,\n \"stzh-input--has-spin\": this.showSpin,\n \"stzh-input--is-invalid\": this.invalid,\n \"stzh-input--is-disabled\": this.disabled,\n \"stzh-input--is-readonly\": this.readonly,\n \"stzh-input--is-required\": this.required,\n \"stzh-input--is-filled\": this.filled,\n \"stzh-input--is-clearable\": this.clearable,\n \"stzh-input--has-fixed-label\": window?.stzhComponents?.labels === \"fixed\",\n \"stzh-input--has-label-hidden\": this.labelHidden,\n [`stzh-input--size-${this.size}`]: !!this.size,\n [`stzh-input--type-${this.type}`]: !!this.type,\n };\n\n return (\n <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n <div class={classes}>\n <div class=\"stzh-input__field-wrapper\">\n {this.multiline ? this.renderTextarea() : this.renderInput()}\n <label class=\"stzh-input__label\" htmlFor={this.inputId}>\n {this.label ? this.label : <slot></slot>}\n {this.showMarker &&\n <span class=\"stzh-input__marker\">\n <span class=\"stzh-input__marker-symbol\" aria-hidden=\"true\">\n {this.required\n ? this.localization.$globals.requiredFieldMarker\n : this.localization.$globals.optionalFieldMarker\n }\n </span>\n <span class=\"stzh-input__marker-text\">\n {this.required\n ? this.localization.$globals.requiredFieldText\n : this.localization.$globals.optionalFieldText\n }\n </span>\n </span>\n }\n </label>\n {this.clearable || this.type === \"search\"\n ?\n <stzh-button\n class=\"stzh-input__button-right\"\n icon={this.disabled || this.readonly || !this.filled ? \"search\" : \"close-circle\"}\n icon-only\n variant=\"input\"\n onClick={this.onClearClick}\n disabled={this.disabled || this.readonly || !this.filled}\n a11yLabel={this.localization.$globals.clearButtonLabel}\n aria-controls={this.inputId}\n ></stzh-button>\n :\n <slot name=\"button-right\"></slot>\n }\n </div>\n <StzhInputDescription\n classPrefix=\"stzh-input\"\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"],"mappings":"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"}
|