@trendyol/baklava 2.2.0-beta.11 → 2.2.0-beta.12
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/baklava.js +1 -1
- package/dist/{chunk-PQGNHKRY.js → chunk-RWGRG34A.js} +3 -3
- package/dist/chunk-RWGRG34A.js.map +7 -0
- package/dist/components/input/bl-input.d.ts +3 -0
- package/dist/components/input/bl-input.d.ts.map +1 -1
- package/dist/components/input/bl-input.js +1 -1
- package/dist/components/pagination/bl-pagination.js +1 -1
- package/dist/custom-elements.json +10 -0
- package/package.json +1 -1
- package/dist/chunk-PQGNHKRY.js.map +0 -7
package/dist/baklava.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{c,f as i}from"./chunk-GTDEKKNK.js";import{b as S}from"./chunk-JDCH6CPC.js";import{a as b}from"./chunk-46EV26PW.js";import{a as I}from"./chunk-VSVRDIIK.js";import{a as P}from"./chunk-JJFKQTCC.js";import{a as g}from"./chunk-BACB2XRD.js";import{a as w}from"./chunk-3V7WS57E.js";import{a as u}from"./chunk-IBIMAAYG.js";import{b as T,d as G}from"./chunk-GZ6UX22X.js";import{b as D}from"./chunk-KWPCEINY.js";import{a as B}from"./chunk-TQGTQR3B.js";import{a as m}from"./chunk-QRG3LQVX.js";import{a as s}from"./chunk-IUVH4INI.js";import{a as x}from"./chunk-
|
|
1
|
+
import{c,f as i}from"./chunk-GTDEKKNK.js";import{b as S}from"./chunk-JDCH6CPC.js";import{a as b}from"./chunk-46EV26PW.js";import{a as I}from"./chunk-VSVRDIIK.js";import{a as P}from"./chunk-JJFKQTCC.js";import{a as g}from"./chunk-BACB2XRD.js";import{a as w}from"./chunk-3V7WS57E.js";import{a as u}from"./chunk-IBIMAAYG.js";import{b as T,d as G}from"./chunk-GZ6UX22X.js";import{b as D}from"./chunk-KWPCEINY.js";import{a as B}from"./chunk-TQGTQR3B.js";import{a as m}from"./chunk-QRG3LQVX.js";import{a as s}from"./chunk-IUVH4INI.js";import{a as x}from"./chunk-RWGRG34A.js";import"./chunk-HGGOQO7A.js";import"./chunk-3B64VOWB.js";import{a as h}from"./chunk-TQLVA27P.js";import"./chunk-ANYJUR6Q.js";import{a as n}from"./chunk-TZVDWFVR.js";import{a as r}from"./chunk-XSWME4GN.js";import{a}from"./chunk-H2YTRXAE.js";import{b as f,e as p}from"./chunk-IRM2I2KP.js";import"./chunk-A7DGJXEE.js";import"./chunk-DJOD4BTL.js";import{a as d}from"./chunk-OEWLCX2T.js";import{b as l}from"./chunk-WFXTKCOT.js";import"./chunk-FPMKZ54Q.js";import{a as o,b as e,c as t}from"./chunk-XFVN5XN3.js";import"./chunk-B27KOFJ6.js";import"./chunk-IRDH7CN2.js";import"./chunk-3WPZVKAO.js";import"./chunk-A42CHPBQ.js";import"./chunk-RLMJN536.js";import"./chunk-EUBAYBYO.js";import"./chunk-VO7C5OZC.js";export{r as BlAlert,a as BlBadge,l as BlButton,f as BlCheckbox,p as BlCheckboxGroup,d as BlDialog,u as BlDrawer,G as BlDropdown,D as BlDropdownGroup,T as BlDropdownItem,t as BlIcon,x as BlInput,B as BlPagination,h as BlPopover,n as BlProgressIndicator,c as BlRadio,i as BlRadioGroup,m as BlSelect,s as BlSelectOption,S as BlSwitch,I as BlTab,b as BlTabGroup,P as BlTabPanel,g as BlTextarea,w as BlTooltip,e as getIconPath,o as setIconPath};
|
|
2
2
|
//# sourceMappingURL=baklava.js.map
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import{a as f}from"./chunk-HGGOQO7A.js";import{a as m}from"./chunk-A7DGJXEE.js";import{a as g}from"./chunk-DJOD4BTL.js";import{a as u}from"./chunk-WFXTKCOT.js";import{a as p}from"./chunk-FPMKZ54Q.js";import{a as n}from"./chunk-B27KOFJ6.js";import{a as v,b as i,c,d as b}from"./chunk-IRDH7CN2.js";import{a}from"./chunk-3WPZVKAO.js";import{a as h,b as o,f as d}from"./chunk-EUBAYBYO.js";import{c as t}from"./chunk-VO7C5OZC.js";var V=h`:host{display:inline-block;width:200px;position:relative}.wrapper{--border-color:var(--bl-color-neutral-lighter);--icon-color:var(--bl-color-neutral-light);--text-color:var(--bl-color-neutral-darker);--height:var(--bl-size-2xl);--input-font:var(--bl-font-body-text-2);--line-height:var(--bl-font-body-text-2-line-height);--icon-size:var(--line-height);--icon-gap:var(--bl-size-xs);--padding-vertical:calc((var(--height) - var(--line-height)) / 2);--padding-horizontal:var(--bl-size-xs);--autofill-bg-color:var(--bl-color-primary-contrast);--label-padding:var(--bl-size-3xs);--background-color:var(--bl-color-neutral-full);display:grid;position:relative;gap:var(--bl-size-3xs)}.wrapper:focus-within{--border-color:var(--bl-color-primary);--icon-color:var(--bl-color-primary)}.wrapper.dirty.invalid{--border-color:var(--bl-color-danger);--icon-color:var(--bl-color-danger)}:host([size='large']) .wrapper{--height:var(--bl-size-3xl);--padding-vertical:var(--bl-size-xs);--padding-horizontal:var(--bl-size-m);--icon-gap:var(--bl-size-m)}:host([size='small']) .wrapper{--height:var(--bl-size-xl);--input-font:var(--bl-font-body-text-3);--padding-vertical:var(--bl-size-3xs);--icon-size:var(--bl-font-body-text-3-line-height);--icon-gap:var(--bl-size-2xs)}.input-wrapper{--border-size:1px;outline:none;display:flex;box-sizing:border-box;gap:var(--padding-vertical);height:var(--height);border:solid var(--border-size) var(--border-color);padding:0 calc(var(--padding-horizontal) - var(--label-padding) - var(--border-size));background-color:var(--background-color);border-radius:var(--bl-size-3xs);margin:0;width:0;min-width:100%}:host([disabled]) .wrapper{cursor:not-allowed;--background-color:var(--bl-color-neutral-lightest);--text-color:var(--bl-color-neutral-light)}.wrapper:has(input:autofill){--background-color:var(--autofill-bg-color)}.wrapper:has(input:-webkit-autofill){--background-color:var(--autofill-bg-color)}.input-wrapper legend,label{padding:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}label{position:absolute;max-width:max-content;transition:all ease-in .1s;font:var(--input-font);top:var(--padding-vertical);left:var(--padding-horizontal);right:var(--padding-horizontal);pointer-events:none;color:var(--bl-color-neutral-light)}.has-icon label{right:calc(var(--padding-horizontal) + var(--icon-size) + var(--padding-vertical))}.input-wrapper legend{height:0;visibility:hidden;display:none}.input-wrapper legend span{padding:0 var(--label-padding);display:inline-block;opacity:0;visibility:visible}input{width:100%;align-self:stretch;outline:0;border:0;padding:0
|
|
1
|
+
import{a as f}from"./chunk-HGGOQO7A.js";import{a as m}from"./chunk-A7DGJXEE.js";import{a as g}from"./chunk-DJOD4BTL.js";import{a as u}from"./chunk-WFXTKCOT.js";import{a as p}from"./chunk-FPMKZ54Q.js";import{a as n}from"./chunk-B27KOFJ6.js";import{a as v,b as i,c,d as b}from"./chunk-IRDH7CN2.js";import{a}from"./chunk-3WPZVKAO.js";import{a as h,b as o,f as d}from"./chunk-EUBAYBYO.js";import{c as t}from"./chunk-VO7C5OZC.js";var V=h`:host{display:inline-block;width:200px;position:relative}.wrapper{--border-color:var(--bl-color-neutral-lighter);--icon-color:var(--bl-color-neutral-light);--text-color:var(--bl-color-neutral-darker);--height:var(--bl-size-2xl);--input-font:var(--bl-font-body-text-2);--line-height:var(--bl-font-body-text-2-line-height);--icon-size:var(--line-height);--icon-gap:var(--bl-size-xs);--padding-vertical:calc((var(--height) - var(--line-height)) / 2);--padding-horizontal:var(--bl-size-xs);--autofill-bg-color:var(--bl-color-primary-contrast);--label-padding:var(--bl-size-3xs);--background-color:var(--bl-color-neutral-full);display:grid;position:relative;gap:var(--bl-size-3xs)}.wrapper:focus-within{--border-color:var(--bl-color-primary);--icon-color:var(--bl-color-primary)}.wrapper.dirty.invalid{--border-color:var(--bl-color-danger);--icon-color:var(--bl-color-danger)}:host([size='large']) .wrapper{--height:var(--bl-size-3xl);--padding-vertical:var(--bl-size-xs);--padding-horizontal:var(--bl-size-m);--icon-gap:var(--bl-size-m)}:host([size='small']) .wrapper{--height:var(--bl-size-xl);--input-font:var(--bl-font-body-text-3);--padding-vertical:var(--bl-size-3xs);--icon-size:var(--bl-font-body-text-3-line-height);--icon-gap:var(--bl-size-2xs)}.input-wrapper{--border-size:1px;outline:none;display:flex;box-sizing:border-box;gap:var(--padding-vertical);height:var(--height);border:solid var(--border-size) var(--border-color);padding:0 calc(var(--bl-input-padding-end, var(--padding-horizontal)) - var(--label-padding) - var(--border-size)) 0 calc(var(--bl-input-padding-start, var(--padding-horizontal)) - var(--label-padding) - var(--border-size));background-color:var(--background-color);border-radius:var(--bl-size-3xs);margin:0;width:0;min-width:100%}:host([disabled]) .wrapper{cursor:not-allowed;--background-color:var(--bl-color-neutral-lightest);--text-color:var(--bl-color-neutral-light)}.wrapper:has(input:autofill){--background-color:var(--autofill-bg-color)}.wrapper:has(input:-webkit-autofill){--background-color:var(--autofill-bg-color)}.input-wrapper legend,label{padding:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}label{position:absolute;max-width:max-content;transition:all ease-in .1s;font:var(--input-font);top:var(--padding-vertical);left:var(--bl-input-padding-start, var(--padding-horizontal));right:var(--bl-input-padding-end, var(--padding-horizontal));pointer-events:none;color:var(--bl-color-neutral-light)}.has-icon label{right:calc(var(--bl-input-padding-end, var(--padding-horizontal)) + var(--icon-size) + var(--padding-vertical))}.input-wrapper legend{height:0;visibility:hidden;display:none}.input-wrapper legend span{padding:0 var(--label-padding);display:inline-block;opacity:0;visibility:visible}input{width:100%;align-self:stretch;outline:0;border:0;padding:0 0 0 var(--label-padding);font:var(--input-font);color:var(--text-color);-webkit-text-fill-color:var(--text-color);background-color:transparent}input::-webkit-credentials-auto-fill-button{color:red}:where(.wrapper:focus-within, .wrapper.has-value) input{padding-left:var(--label-padding)}input:disabled{cursor:not-allowed}input:autofill{background-color:var(--autofill-bg-color);/**
|
|
2
2
|
* Some browsers doesn't allow setting background-color
|
|
3
3
|
* https://developer.mozilla.org/en-US/docs/Web/CSS/:autofill
|
|
4
4
|
*/box-shadow:0 0 0 40rem var(--autofill-bg-color) inset}input:-webkit-autofill{background-color:var(--autofill-bg-color);/**
|
|
5
5
|
* Some browsers doesn't allow setting background-color
|
|
6
6
|
* https://developer.mozilla.org/en-US/docs/Web/CSS/:autofill
|
|
7
|
-
*/box-shadow:0 0 0 40rem var(--autofill-bg-color) inset}.icon{display:flex;align-items:center;gap:var(--icon-gap);flex-basis:var(--icon-size);align-self:center;height:var(--icon-size);margin-right:var(--label-padding)}bl-icon:not(.reveal-icon){font-size:var(--icon-size);color:var(--icon-color);height:var(--icon-size)}.reveal-button bl-icon{display:none}bl-icon[name='eye_on']{display:inline-block}.password-visible bl-icon[name='eye_on']{display:none}.password-visible bl-icon[name='eye_off']{display:inline-block}.wrapper:not(.has-icon) .icon{display:none}.hint{display:none;font:var(--bl-font-body-text-3)}.hint p{padding:0;margin:0}::placeholder{color:var(--bl-color-neutral-light);-webkit-text-fill-color:var(--bl-color-neutral-light)}:host([label]) ::placeholder{color:transparent;-webkit-text-fill-color:transparent;transition:color ease-out 0.4s}:host([label-fixed]) ::placeholder,:host :focus-within ::placeholder{color:var(--bl-color-neutral-light);-webkit-text-fill-color:var(--bl-color-neutral-light)}:host([label-fixed]) label{position:static;transition:none;transform:none;pointer-events:initial;font:var(--bl-font-caption);color:var(--bl-color-neutral-dark);padding:0}:host([label-fixed]) legend{display:none}:host(:not([label-fixed])) :focus-within label,:host(:not([label-fixed])) .has-value label{top:0;left:calc(var(--padding-horizontal) - var(--label-padding));right:calc(var(--padding-horizontal) - var(--label-padding));transform:translateY(-50%);font:var(--bl-font-caption);color:var(--bl-color-neutral-dark);padding:0 var(--label-padding);pointer-events:initial;z-index:var(--bl-index-base)}:host([label]:not([label-fixed])) :where(:focus-within, .has-value) legend{max-width:100%;font:var(--bl-font-caption);display:block}.error-icon,.invalid-text{display:none}.dirty.invalid label,.invalid-text,.error-icon{color:var(--bl-color-danger)}.help-text{color:var(--bl-color-neutral-dark)}:host([help-text]) .hint,.dirty.invalid .hint{display:block}.dirty.invalid .invalid-text{display:block}.dirty.invalid .help-text{display:none}.dirty.invalid .error-icon{display:inline-block}.dirty.invalid .custom-icon ~ .error-icon{display:none}`,y=V;var e=class extends g(d){constructor(){super(...arguments);this.type="text";this.value="";this.required=!1;this.autofocus=!1;this.size="medium";this.disabled=!1;this.readonly=!1;this.labelFixed=!1;this.onKeydown=r=>{r.code==="Enter"&&this.form&&u(this.form)};this.onError=()=>{this.onInvalid(this.internals.validity)};this.dirty=!1;this.passwordVisible=!1;this.inputId=Math.random().toString(36).substring(2)}static get styles(){return[y]}set customInvalidText(r){this._customInvalidText=r,this.setValue(this.value)}get customInvalidText(){return this._customInvalidText}connectedCallback(){var r;super.connectedCallback(),this.addEventListener("keydown",this.onKeydown),this.addEventListener("invalid",this.onError),(r=this.form)==null||r.addEventListener("submit",()=>{this.reportValidity()})}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",this.onKeydown),this.removeEventListener("invalid",this.onError)}textVisibilityToggle(){this.passwordVisible=!this.passwordVisible}validityCallback(){var r;return this.customInvalidText||((r=this.validationTarget)==null?void 0:r.validationMessage)}async forceCustomError(){await this.updateComplete,this.validationTarget.setCustomValidity(this.customInvalidText||"An error occurred"),this.setValue(this.value),this.reportValidity()}async clearCustomError(){await this.updateComplete,this.validationTarget.setCustomValidity(""),this.setValue(this.value),this.reportValidity()}reportValidity(){return this.dirty=!0,this.requestUpdate(),this.checkValidity()}inputHandler(r){let l=r.target.value;this.value=l,this.onInput(l)}changeHandler(r){let l=r.target.value;this.dirty=!0,this.value=l,this.onChange(l)}firstUpdated(){this.setValue(this.value)}async updated(r){r.has("value")&&(this.setValue(this.value),await this.validationComplete,this.requestUpdate())}render(){let r=this.checkValidity()?"":o`<p id="errorMessage" aria-live="polite" class="invalid-text">
|
|
7
|
+
*/box-shadow:0 0 0 40rem var(--autofill-bg-color) inset}.icon{display:flex;align-items:center;gap:var(--icon-gap);flex-basis:var(--icon-size);align-self:center;height:var(--icon-size);margin-right:var(--label-padding)}bl-icon:not(.reveal-icon){font-size:var(--icon-size);color:var(--icon-color);height:var(--icon-size)}.reveal-button bl-icon{display:none}bl-icon[name='eye_on']{display:inline-block}.password-visible bl-icon[name='eye_on']{display:none}.password-visible bl-icon[name='eye_off']{display:inline-block}.wrapper:not(.has-icon) .icon{display:none}.hint{display:none;font:var(--bl-font-body-text-3)}.hint p{padding:0;margin:0}::placeholder{color:var(--bl-color-neutral-light);-webkit-text-fill-color:var(--bl-color-neutral-light)}:host([label]) ::placeholder{color:transparent;-webkit-text-fill-color:transparent;transition:color ease-out 0.4s}:host([label-fixed]) ::placeholder,:host :focus-within ::placeholder{color:var(--bl-color-neutral-light);-webkit-text-fill-color:var(--bl-color-neutral-light)}:host([label-fixed]) label{position:static;transition:none;transform:none;pointer-events:initial;font:var(--bl-font-caption);color:var(--bl-color-neutral-dark);padding:0}:host([label-fixed]) legend{display:none}:host(:not([label-fixed])) :focus-within label,:host(:not([label-fixed])) .has-value label{top:0;left:calc(var(--bl-input-padding-start, var(--padding-horizontal)) - var(--label-padding));right:calc(var(--bl-input-padding-end, var(--padding-horizontal)) - var(--label-padding));transform:translateY(-50%);font:var(--bl-font-caption);color:var(--bl-color-neutral-dark);padding:0 var(--label-padding);pointer-events:initial;z-index:var(--bl-index-base)}:host([label]:not([label-fixed])) :where(:focus-within, .has-value) legend{max-width:100%;font:var(--bl-font-caption);display:block}.error-icon,.invalid-text{display:none}.dirty.invalid label,.invalid-text,.error-icon{color:var(--bl-color-danger)}.help-text{color:var(--bl-color-neutral-dark)}:host([help-text]) .hint,.dirty.invalid .hint{display:block}.dirty.invalid .invalid-text{display:block}.dirty.invalid .help-text{display:none}.dirty.invalid .error-icon{display:inline-block}.dirty.invalid .custom-icon ~ .error-icon{display:none}`,y=V;var e=class extends g(d){constructor(){super(...arguments);this.type="text";this.value="";this.required=!1;this.autofocus=!1;this.size="medium";this.disabled=!1;this.readonly=!1;this.labelFixed=!1;this.onKeydown=r=>{r.code==="Enter"&&this.form&&u(this.form)};this.onError=()=>{this.onInvalid(this.internals.validity)};this.dirty=!1;this.passwordVisible=!1;this.inputId=Math.random().toString(36).substring(2)}static get styles(){return[y]}set customInvalidText(r){this._customInvalidText=r,this.setValue(this.value)}get customInvalidText(){return this._customInvalidText}connectedCallback(){var r;super.connectedCallback(),this.addEventListener("keydown",this.onKeydown),this.addEventListener("invalid",this.onError),(r=this.form)==null||r.addEventListener("submit",()=>{this.reportValidity()})}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",this.onKeydown),this.removeEventListener("invalid",this.onError)}textVisibilityToggle(){this.passwordVisible=!this.passwordVisible}validityCallback(){var r;return this.customInvalidText||((r=this.validationTarget)==null?void 0:r.validationMessage)}async forceCustomError(){await this.updateComplete,this.validationTarget.setCustomValidity(this.customInvalidText||"An error occurred"),this.setValue(this.value),this.reportValidity()}async clearCustomError(){await this.updateComplete,this.validationTarget.setCustomValidity(""),this.setValue(this.value),this.reportValidity()}reportValidity(){return this.dirty=!0,this.requestUpdate(),this.checkValidity()}inputHandler(r){let l=r.target.value;this.value=l,this.onInput(l)}changeHandler(r){let l=r.target.value;this.dirty=!0,this.value=l,this.onChange(l)}firstUpdated(){this.setValue(this.value)}async updated(r){r.has("value")&&(this.setValue(this.value),await this.validationComplete,this.requestUpdate())}render(){let r=this.checkValidity()?"":o`<p id="errorMessage" aria-live="polite" class="invalid-text">
|
|
8
8
|
${this.validationMessage}
|
|
9
9
|
</p>`,l=this.helpText?o`<p id="helpText" class="help-text">${this.helpText}</p>`:"",x=this.icon?o`<bl-icon class="custom-icon" name="${this.icon}"></bl-icon>`:"",w=this.label?o`<label for=${this.inputId}>${this.label}</label>`:"",s=this.type==="password",k=s?o`<bl-button
|
|
10
10
|
size="small"
|
|
@@ -50,4 +50,4 @@ import{a as f}from"./chunk-HGGOQO7A.js";import{a as m}from"./chunk-A7DGJXEE.js";
|
|
|
50
50
|
</fieldset>
|
|
51
51
|
<div class="hint">${r} ${l}</div>
|
|
52
52
|
</div>`}};e.shadowRootOptions={...d.shadowRootOptions,delegatesFocus:!0},e.formControlValidators=f,t([b("input")],e.prototype,"validationTarget",2),t([i({reflect:!0})],e.prototype,"name",2),t([i({reflect:!0})],e.prototype,"type",2),t([i({reflect:!0})],e.prototype,"label",2),t([i({reflect:!0})],e.prototype,"placeholder",2),t([i({reflect:!0})],e.prototype,"value",2),t([i({type:Boolean,reflect:!0})],e.prototype,"required",2),t([i({type:Number,reflect:!0})],e.prototype,"minlength",2),t([i({type:Number,reflect:!0})],e.prototype,"maxlength",2),t([i({type:Number,reflect:!0})],e.prototype,"min",2),t([i({type:Number,reflect:!0})],e.prototype,"max",2),t([i({type:String,reflect:!0})],e.prototype,"pattern",2),t([i({type:Number,reflect:!0})],e.prototype,"step",2),t([i({type:String,reflect:!0})],e.prototype,"autocomplete",2),t([i({type:String,reflect:!0})],e.prototype,"inputmode",2),t([i({type:Boolean,reflect:!0})],e.prototype,"autofocus",2),t([i({type:String,reflect:!0})],e.prototype,"icon",2),t([i({type:String,reflect:!0})],e.prototype,"size",2),t([i({type:Boolean,reflect:!0})],e.prototype,"disabled",2),t([i({type:Boolean,reflect:!0})],e.prototype,"readonly",2),t([i({type:Boolean,attribute:"label-fixed",reflect:!0})],e.prototype,"labelFixed",2),t([i({type:String,attribute:"invalid-text",reflect:!0})],e.prototype,"customInvalidText",1),t([i({type:String,attribute:"help-text",reflect:!0})],e.prototype,"helpText",2),t([n("bl-change")],e.prototype,"onChange",2),t([n("bl-input")],e.prototype,"onInput",2),t([n("bl-invalid")],e.prototype,"onInvalid",2),t([c()],e.prototype,"dirty",2),t([c()],e.prototype,"passwordVisible",2),e=t([v("bl-input")],e);export{e as a};
|
|
53
|
-
//# sourceMappingURL=chunk-
|
|
53
|
+
//# sourceMappingURL=chunk-RWGRG34A.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../src/components/input/bl-input.css", "../src/components/input/bl-input.ts"],
|
|
4
|
+
"sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{display:inline-block;width:200px;position:relative}.wrapper{--border-color:var(--bl-color-neutral-lighter);--icon-color:var(--bl-color-neutral-light);--text-color:var(--bl-color-neutral-darker);--height:var(--bl-size-2xl);--input-font:var(--bl-font-body-text-2);--line-height:var(--bl-font-body-text-2-line-height);--icon-size:var(--line-height);--icon-gap:var(--bl-size-xs);--padding-vertical:calc((var(--height) - var(--line-height)) / 2);--padding-horizontal:var(--bl-size-xs);--autofill-bg-color:var(--bl-color-primary-contrast);--label-padding:var(--bl-size-3xs);--background-color:var(--bl-color-neutral-full);display:grid;position:relative;gap:var(--bl-size-3xs)}.wrapper:focus-within{--border-color:var(--bl-color-primary);--icon-color:var(--bl-color-primary)}.wrapper.dirty.invalid{--border-color:var(--bl-color-danger);--icon-color:var(--bl-color-danger)}:host([size='large']) .wrapper{--height:var(--bl-size-3xl);--padding-vertical:var(--bl-size-xs);--padding-horizontal:var(--bl-size-m);--icon-gap:var(--bl-size-m)}:host([size='small']) .wrapper{--height:var(--bl-size-xl);--input-font:var(--bl-font-body-text-3);--padding-vertical:var(--bl-size-3xs);--icon-size:var(--bl-font-body-text-3-line-height);--icon-gap:var(--bl-size-2xs)}.input-wrapper{--border-size:1px;outline:none;display:flex;box-sizing:border-box;gap:var(--padding-vertical);height:var(--height);border:solid var(--border-size) var(--border-color);padding:0 calc(var(--bl-input-padding-end, var(--padding-horizontal)) - var(--label-padding) - var(--border-size)) 0 calc(var(--bl-input-padding-start, var(--padding-horizontal)) - var(--label-padding) - var(--border-size));background-color:var(--background-color);border-radius:var(--bl-size-3xs);margin:0;width:0;min-width:100%}:host([disabled]) .wrapper{cursor:not-allowed;--background-color:var(--bl-color-neutral-lightest);--text-color:var(--bl-color-neutral-light)}.wrapper:has(input:autofill){--background-color:var(--autofill-bg-color)}.wrapper:has(input:-webkit-autofill){--background-color:var(--autofill-bg-color)}.input-wrapper legend,label{padding:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}label{position:absolute;max-width:max-content;transition:all ease-in .1s;font:var(--input-font);top:var(--padding-vertical);left:var(--bl-input-padding-start, var(--padding-horizontal));right:var(--bl-input-padding-end, var(--padding-horizontal));pointer-events:none;color:var(--bl-color-neutral-light)}.has-icon label{right:calc(var(--bl-input-padding-end, var(--padding-horizontal)) + var(--icon-size) + var(--padding-vertical))}.input-wrapper legend{height:0;visibility:hidden;display:none}.input-wrapper legend span{padding:0 var(--label-padding);display:inline-block;opacity:0;visibility:visible}input{width:100%;align-self:stretch;outline:0;border:0;padding:0 0 0 var(--label-padding);font:var(--input-font);color:var(--text-color);-webkit-text-fill-color:var(--text-color);background-color:transparent}input::-webkit-credentials-auto-fill-button{color:red}:where(.wrapper:focus-within, .wrapper.has-value) input{padding-left:var(--label-padding)}input:disabled{cursor:not-allowed}input:autofill{background-color:var(--autofill-bg-color);/**\n * Some browsers doesn't allow setting background-color\n * https://developer.mozilla.org/en-US/docs/Web/CSS/:autofill\n */box-shadow:0 0 0 40rem var(--autofill-bg-color) inset}input:-webkit-autofill{background-color:var(--autofill-bg-color);/**\n * Some browsers doesn't allow setting background-color\n * https://developer.mozilla.org/en-US/docs/Web/CSS/:autofill\n */box-shadow:0 0 0 40rem var(--autofill-bg-color) inset}.icon{display:flex;align-items:center;gap:var(--icon-gap);flex-basis:var(--icon-size);align-self:center;height:var(--icon-size);margin-right:var(--label-padding)}bl-icon:not(.reveal-icon){font-size:var(--icon-size);color:var(--icon-color);height:var(--icon-size)}.reveal-button bl-icon{display:none}bl-icon[name='eye_on']{display:inline-block}.password-visible bl-icon[name='eye_on']{display:none}.password-visible bl-icon[name='eye_off']{display:inline-block}.wrapper:not(.has-icon) .icon{display:none}.hint{display:none;font:var(--bl-font-body-text-3)}.hint p{padding:0;margin:0}::placeholder{color:var(--bl-color-neutral-light);-webkit-text-fill-color:var(--bl-color-neutral-light)}:host([label]) ::placeholder{color:transparent;-webkit-text-fill-color:transparent;transition:color ease-out 0.4s}:host([label-fixed]) ::placeholder,:host :focus-within ::placeholder{color:var(--bl-color-neutral-light);-webkit-text-fill-color:var(--bl-color-neutral-light)}:host([label-fixed]) label{position:static;transition:none;transform:none;pointer-events:initial;font:var(--bl-font-caption);color:var(--bl-color-neutral-dark);padding:0}:host([label-fixed]) legend{display:none}:host(:not([label-fixed])) :focus-within label,:host(:not([label-fixed])) .has-value label{top:0;left:calc(var(--bl-input-padding-start, var(--padding-horizontal)) - var(--label-padding));right:calc(var(--bl-input-padding-end, var(--padding-horizontal)) - var(--label-padding));transform:translateY(-50%);font:var(--bl-font-caption);color:var(--bl-color-neutral-dark);padding:0 var(--label-padding);pointer-events:initial;z-index:var(--bl-index-base)}:host([label]:not([label-fixed])) :where(:focus-within, .has-value) legend{max-width:100%;font:var(--bl-font-caption);display:block}.error-icon,.invalid-text{display:none}.dirty.invalid label,.invalid-text,.error-icon{color:var(--bl-color-danger)}.help-text{color:var(--bl-color-neutral-dark)}:host([help-text]) .hint,.dirty.invalid .hint{display:block}.dirty.invalid .invalid-text{display:block}.dirty.invalid .help-text{display:none}.dirty.invalid .error-icon{display:inline-block}.dirty.invalid .custom-icon ~ .error-icon{display:none}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult, PropertyValues } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { FormControlMixin } from '@open-wc/form-control';\nimport { submit } from '@open-wc/form-helpers';\nimport { live } from 'lit/directives/live.js';\nimport { event, EventDispatcher } from '../../utilities/event';\nimport { innerInputValidators } from '../../utilities/form-control';\nimport 'element-internals-polyfill';\nimport '../icon/bl-icon';\nimport '../button/bl-button';\n\nimport style from './bl-input.css';\n\nexport type InputSize = 'small' | 'medium' | 'large';\n/**\n * @tag bl-input\n * @summary Baklava Input component\n *\n * @cssproperty [--bl-input-padding-start] Sets the padding start\n * @cssproperty [--bl-input-padding-end] Sets the padding end\n */\n@customElement('bl-input')\nexport default class BlInput extends FormControlMixin(LitElement) {\n static get styles(): CSSResultGroup {\n return [style];\n }\n static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };\n\n static formControlValidators = innerInputValidators;\n\n @query('input')\n validationTarget: HTMLInputElement;\n\n /**\n * Sets name of the input\n */\n @property({ reflect: true })\n name?: string;\n\n /**\n * Type of the input. It's used to set `type` attribute of native input inside. Only `text`, `number` and `password` is supported for now.\n */\n @property({ reflect: true })\n type: 'text' | 'password' | 'number' | 'tel' | 'url' = 'text';\n\n /**\n * Sets label of the input\n */\n @property({ reflect: true })\n label?: string;\n\n /**\n * Sets placeholder of the input\n */\n @property({ reflect: true })\n placeholder?: string;\n\n /**\n * Sets initial value of the input\n */\n @property({ reflect: true })\n value = '';\n\n /**\n * Makes input a mandatory field\n */\n @property({ type: Boolean, reflect: true })\n required = false;\n\n /**\n * Sets minimum length of the input\n */\n @property({ type: Number, reflect: true })\n minlength?: number;\n\n /**\n * Sets maximum length of the input\n */\n @property({ type: Number, reflect: true })\n maxlength?: number;\n\n /**\n * Sets the smallest number can be entered to a `number` input\n */\n @property({ type: Number, reflect: true })\n min?: number;\n\n /**\n * Sets the biggest number can be entered to a `number` input\n */\n @property({ type: Number, reflect: true })\n max?: number;\n\n /**\n * Sets a regex pattern form the input validation\n */\n @property({ type: String, reflect: true })\n pattern?: string;\n\n /**\n * Sets the increase and decrease step to a `number` input\n */\n @property({ type: Number, reflect: true })\n step?: number;\n\n /**\n * Hints browser to autocomplete this field.\n */\n @property({ type: String, reflect: true })\n autocomplete: string;\n\n /**\n * Sets the input mode of the field for asking browser to show the desired keyboard.\n */\n @property({ type: String, reflect: true })\n inputmode: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';\n\n /**\n * Sets input to get keyboard focus automatically\n */\n @property({ type: Boolean, reflect: true })\n autofocus = false;\n\n /**\n * Sets the custom icon name. `bl-icon` component is used to show an icon\n */\n @property({ type: String, reflect: true })\n icon?: string;\n\n /**\n * Sets input size.\n */\n @property({ type: String, reflect: true })\n size?: InputSize = 'medium';\n\n /**\n * Disables the input\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * Makes the input readonly.\n */\n @property({ type: Boolean, reflect: true })\n readonly = false;\n\n /**\n * Makes label as fixed positioned\n */\n @property({ type: Boolean, attribute: 'label-fixed', reflect: true })\n labelFixed = false;\n\n /**\n * Overrides error message. This message will override default error messages\n */\n @property({ type: String, attribute: 'invalid-text', reflect: true })\n set customInvalidText(value: string) {\n this._customInvalidText = value;\n this.setValue(this.value);\n }\n\n get customInvalidText(): string {\n return this._customInvalidText;\n }\n\n private _customInvalidText: string;\n\n /**\n * Adds help text\n */\n @property({ type: String, attribute: 'help-text', reflect: true })\n helpText?: string;\n\n /**\n * Fires when an alteration to the element's value is committed by the user. Unlike the input event, the change event is not necessarily fired for each alteration to an element's value.\n */\n @event('bl-change') private onChange: EventDispatcher<string>;\n\n /**\n * Fires when the value of an input element has been changed.\n */\n @event('bl-input') private onInput: EventDispatcher<string>;\n\n /**\n * Fires when the value of an input element has been changed.\n */\n @event('bl-invalid') private onInvalid: EventDispatcher<ValidityState>;\n\n connectedCallback(): void {\n super.connectedCallback();\n this.addEventListener('keydown', this.onKeydown);\n this.addEventListener('invalid', this.onError);\n\n this.form?.addEventListener('submit', () => {\n this.reportValidity();\n });\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n this.removeEventListener('keydown', this.onKeydown);\n this.removeEventListener('invalid', this.onError);\n }\n\n private onKeydown = (event: KeyboardEvent): void => {\n if (event.code === 'Enter' && this.form) {\n submit(this.form);\n }\n };\n\n private onError = (): void => {\n this.onInvalid(this.internals.validity);\n };\n\n @state() private dirty = false;\n\n @state() private passwordVisible = false;\n\n private textVisibilityToggle() {\n this.passwordVisible = !this.passwordVisible;\n }\n\n validityCallback(): string | void {\n return this.customInvalidText || this.validationTarget?.validationMessage;\n }\n\n /**\n * Force to set input as in invalid state.\n */\n async forceCustomError() {\n await this.updateComplete;\n this.validationTarget.setCustomValidity(this.customInvalidText || 'An error occurred');\n this.setValue(this.value);\n this.reportValidity();\n }\n\n /**\n * Clear forced invalid state\n */\n async clearCustomError() {\n await this.updateComplete;\n this.validationTarget.setCustomValidity('');\n this.setValue(this.value);\n this.reportValidity();\n }\n\n reportValidity() {\n this.dirty = true;\n this.requestUpdate();\n return this.checkValidity();\n }\n\n private inputHandler(event: Event) {\n const value = (event.target as HTMLInputElement).value;\n\n this.value = value;\n this.onInput(value);\n }\n\n private changeHandler(event: Event) {\n const value = (event.target as HTMLInputElement).value;\n\n this.dirty = true;\n this.value = value;\n this.onChange(value);\n }\n\n firstUpdated() {\n this.setValue(this.value);\n }\n\n protected async updated(changedProperties: PropertyValues) {\n if (changedProperties.has('value')) {\n this.setValue(this.value);\n\n await this.validationComplete;\n\n this.requestUpdate();\n }\n }\n\n private inputId = Math.random().toString(36).substring(2);\n\n render(): TemplateResult {\n const invalidMessage = !this.checkValidity()\n ? html`<p id=\"errorMessage\" aria-live=\"polite\" class=\"invalid-text\">\n ${this.validationMessage}\n </p>`\n : ``;\n const helpMessage = this.helpText\n ? html`<p id=\"helpText\" class=\"help-text\">${this.helpText}</p>`\n : ``;\n\n const icon = this.icon ? html`<bl-icon class=\"custom-icon\" name=\"${this.icon}\"></bl-icon>` : '';\n const label = this.label ? html`<label for=${this.inputId}>${this.label}</label>` : '';\n const passwordInput = this.type === 'password';\n\n const revealButton = passwordInput\n ? html`<bl-button\n size=\"small\"\n kind=\"neutral\"\n variant=\"tertiary\"\n class=\"${classMap({\n 'reveal-button': true,\n 'password-visible': this.passwordVisible,\n })}\"\n aria-label=\"Toggle password reveal\"\n @bl-click=\"${this.textVisibilityToggle}\"\n >\n <bl-icon class=\"reveal-icon\" slot=\"icon\" name=\"eye_on\"></bl-icon>\n <bl-icon class=\"reveal-icon\" slot=\"icon\" name=\"eye_off\"></bl-icon>\n </bl-button>`\n : '';\n\n const classes = {\n 'wrapper': true,\n 'dirty': this.dirty,\n 'invalid': !this.checkValidity(),\n 'has-icon': passwordInput || this.icon || (this.dirty && !this.checkValidity()),\n 'has-value': this.value !== null && this.value !== '',\n };\n\n const passwordType = this.passwordVisible ? 'text' : 'password';\n const inputType = passwordInput ? passwordType : this.type;\n\n return html`<div class=${classMap(classes)}>\n ${label}\n <fieldset class=\"input-wrapper\">\n <legend><span>${this.label}</span></legend>\n <input\n id=${this.inputId}\n type=${inputType}\n .value=${live(this.value)}\n inputmode=\"${ifDefined(this.inputmode)}\"\n ?autofocus=${this.autofocus}\n autocomplete=\"${ifDefined(this.autocomplete)}\"\n placeholder=\"${ifDefined(this.placeholder)}\"\n minlength=\"${ifDefined(this.minlength)}\"\n maxlength=\"${ifDefined(this.maxlength)}\"\n min=\"${ifDefined(this.min)}\"\n max=\"${ifDefined(this.max)}\"\n pattern=\"${ifDefined(this.pattern)}\"\n step=\"${ifDefined(this.step)}\"\n ?required=${this.required}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n @change=${this.changeHandler}\n @input=${this.inputHandler}\n aria-invalid=${this.checkValidity() ? 'false' : 'true'}\n aria-describedby=${ifDefined(this.helpText ? 'helpText' : undefined)}\n aria-errormessage=${ifDefined(this.checkValidity() ? undefined : 'errorMessage')}\n />\n <div class=\"icon\">\n ${revealButton} ${icon}\n <bl-icon class=\"error-icon\" name=\"alert\"></bl-icon>\n </div>\n </fieldset>\n <div class=\"hint\">${invalidMessage} ${helpMessage}</div>\n </div>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'bl-input': BlInput;\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["styles", "i", "bl_input_default", "BlInput", "FormControlMixin", "s", "event", "submit", "bl_input_default", "value", "_a", "changedProperties", "invalidMessage", "y", "helpMessage", "icon", "label", "passwordInput", "revealButton", "o", "classes", "passwordType", "inputType", "l", "innerInputValidators", "__decorateClass", "i", "e", "t"]
|
|
7
|
+
}
|
|
@@ -7,6 +7,9 @@ declare const BlInput_base: import("@open-wc/form-control").Constructor<import("
|
|
|
7
7
|
/**
|
|
8
8
|
* @tag bl-input
|
|
9
9
|
* @summary Baklava Input component
|
|
10
|
+
*
|
|
11
|
+
* @cssproperty [--bl-input-padding-start] Sets the padding start
|
|
12
|
+
* @cssproperty [--bl-input-padding-end] Sets the padding end
|
|
10
13
|
*/
|
|
11
14
|
export default class BlInput extends BlInput_base {
|
|
12
15
|
static get styles(): CSSResultGroup;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"bl-input.d.ts","sourceRoot":"","sources":["../../../src/components/input/bl-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAQ,UAAU,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AASvF,OAAO,4BAA4B,CAAC;AACpC,OAAO,iBAAiB,CAAC;AACzB,OAAO,qBAAqB,CAAC;AAI7B,oBAAY,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;;AACrD
|
|
1
|
+
{"version":3,"file":"bl-input.d.ts","sourceRoot":"","sources":["../../../src/components/input/bl-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAQ,UAAU,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AASvF,OAAO,4BAA4B,CAAC;AACpC,OAAO,iBAAiB,CAAC;AACzB,OAAO,qBAAqB,CAAC;AAI7B,oBAAY,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;;AACrD;;;;;;GAMG;AAEH,MAAM,CAAC,OAAO,OAAO,OAAQ,SAAQ,YAA4B;IAC/D,MAAM,KAAK,MAAM,IAAI,cAAc,CAElC;IACD,MAAM,CAAC,iBAAiB;;;;;MAA6D;IAErF,MAAM,CAAC,qBAAqB;;;;;QAAwB;IAGpD,gBAAgB,EAAE,gBAAgB,CAAC;IAEnC;;OAEG;IAEH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IAEH,IAAI,EAAE,MAAM,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,GAAG,KAAK,CAAU;IAE9D;;OAEG;IAEH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IAEH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IAEH,KAAK,SAAM;IAEX;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IAEH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;OAEG;IAEH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;OAEG;IAEH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IAEH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IAEH,YAAY,EAAE,MAAM,CAAC;IAErB;;OAEG;IAEH,SAAS,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,KAAK,GAAG,QAAQ,GAAG,OAAO,GAAG,KAAK,CAAC;IAExF;;OAEG;IAEH,SAAS,UAAS;IAElB;;OAEG;IAEH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IAEH,IAAI,CAAC,EAAE,SAAS,CAAY;IAE5B;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,UAAU,UAAS;IAEnB;;OAEG;IACH,IACI,iBAAiB,CAAC,KAAK,EAAE,MAAM,EAGlC;IAED,IAAI,iBAAiB,IAAI,MAAM,CAE9B;IAED,OAAO,CAAC,kBAAkB,CAAS;IAEnC;;OAEG;IAEH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACiB,OAAO,CAAC,QAAQ,CAA0B;IAE9D;;OAEG;IACgB,OAAO,CAAC,OAAO,CAA0B;IAE5D;;OAEG;IACkB,OAAO,CAAC,SAAS,CAAiC;IAEvE,iBAAiB,IAAI,IAAI;IAUzB,oBAAoB,IAAI,IAAI;IAM5B,OAAO,CAAC,SAAS,CAIf;IAEF,OAAO,CAAC,OAAO,CAEb;IAEO,OAAO,CAAC,KAAK,CAAS;IAEtB,OAAO,CAAC,eAAe,CAAS;IAEzC,OAAO,CAAC,oBAAoB;IAI5B,gBAAgB,IAAI,MAAM,GAAG,IAAI;IAIjC;;OAEG;IACG,gBAAgB;IAOtB;;OAEG;IACG,gBAAgB;IAOtB,cAAc;IAMd,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,aAAa;IAQrB,YAAY;cAII,OAAO,CAAC,iBAAiB,EAAE,cAAc;IAUzD,OAAO,CAAC,OAAO,CAA2C;IAE1D,MAAM,IAAI,cAAc;CA6EzB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a}from"../../chunk-
|
|
1
|
+
import{a}from"../../chunk-RWGRG34A.js";import"../../chunk-HGGOQO7A.js";import"../../chunk-3B64VOWB.js";import"../../chunk-A7DGJXEE.js";import"../../chunk-DJOD4BTL.js";import"../../chunk-WFXTKCOT.js";import"../../chunk-FPMKZ54Q.js";import"../../chunk-XFVN5XN3.js";import"../../chunk-B27KOFJ6.js";import"../../chunk-IRDH7CN2.js";import"../../chunk-3WPZVKAO.js";import"../../chunk-A42CHPBQ.js";import"../../chunk-RLMJN536.js";import"../../chunk-EUBAYBYO.js";import"../../chunk-VO7C5OZC.js";export{a as default};
|
|
2
2
|
//# sourceMappingURL=bl-input.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a}from"../../chunk-TQGTQR3B.js";import"../../chunk-QRG3LQVX.js";import"../../chunk-IUVH4INI.js";import"../../chunk-
|
|
1
|
+
import{a}from"../../chunk-TQGTQR3B.js";import"../../chunk-QRG3LQVX.js";import"../../chunk-IUVH4INI.js";import"../../chunk-RWGRG34A.js";import"../../chunk-HGGOQO7A.js";import"../../chunk-3B64VOWB.js";import"../../chunk-ANYJUR6Q.js";import"../../chunk-A7DGJXEE.js";import"../../chunk-DJOD4BTL.js";import"../../chunk-WFXTKCOT.js";import"../../chunk-FPMKZ54Q.js";import"../../chunk-XFVN5XN3.js";import"../../chunk-B27KOFJ6.js";import"../../chunk-IRDH7CN2.js";import"../../chunk-3WPZVKAO.js";import"../../chunk-A42CHPBQ.js";import"../../chunk-RLMJN536.js";import"../../chunk-EUBAYBYO.js";import"../../chunk-VO7C5OZC.js";export{a as default};
|
|
2
2
|
//# sourceMappingURL=bl-pagination.js.map
|
|
@@ -839,6 +839,16 @@
|
|
|
839
839
|
"kind": "class",
|
|
840
840
|
"description": "",
|
|
841
841
|
"name": "BlInput",
|
|
842
|
+
"cssProperties": [
|
|
843
|
+
{
|
|
844
|
+
"description": "Sets the padding start",
|
|
845
|
+
"name": "--bl-input-padding-start"
|
|
846
|
+
},
|
|
847
|
+
{
|
|
848
|
+
"description": "Sets the padding end",
|
|
849
|
+
"name": "--bl-input-padding-end"
|
|
850
|
+
}
|
|
851
|
+
],
|
|
842
852
|
"events": [
|
|
843
853
|
{
|
|
844
854
|
"type": {
|
package/package.json
CHANGED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../src/components/input/bl-input.css", "../src/components/input/bl-input.ts"],
|
|
4
|
-
"sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{display:inline-block;width:200px;position:relative}.wrapper{--border-color:var(--bl-color-neutral-lighter);--icon-color:var(--bl-color-neutral-light);--text-color:var(--bl-color-neutral-darker);--height:var(--bl-size-2xl);--input-font:var(--bl-font-body-text-2);--line-height:var(--bl-font-body-text-2-line-height);--icon-size:var(--line-height);--icon-gap:var(--bl-size-xs);--padding-vertical:calc((var(--height) - var(--line-height)) / 2);--padding-horizontal:var(--bl-size-xs);--autofill-bg-color:var(--bl-color-primary-contrast);--label-padding:var(--bl-size-3xs);--background-color:var(--bl-color-neutral-full);display:grid;position:relative;gap:var(--bl-size-3xs)}.wrapper:focus-within{--border-color:var(--bl-color-primary);--icon-color:var(--bl-color-primary)}.wrapper.dirty.invalid{--border-color:var(--bl-color-danger);--icon-color:var(--bl-color-danger)}:host([size='large']) .wrapper{--height:var(--bl-size-3xl);--padding-vertical:var(--bl-size-xs);--padding-horizontal:var(--bl-size-m);--icon-gap:var(--bl-size-m)}:host([size='small']) .wrapper{--height:var(--bl-size-xl);--input-font:var(--bl-font-body-text-3);--padding-vertical:var(--bl-size-3xs);--icon-size:var(--bl-font-body-text-3-line-height);--icon-gap:var(--bl-size-2xs)}.input-wrapper{--border-size:1px;outline:none;display:flex;box-sizing:border-box;gap:var(--padding-vertical);height:var(--height);border:solid var(--border-size) var(--border-color);padding:0 calc(var(--padding-horizontal) - var(--label-padding) - var(--border-size));background-color:var(--background-color);border-radius:var(--bl-size-3xs);margin:0;width:0;min-width:100%}:host([disabled]) .wrapper{cursor:not-allowed;--background-color:var(--bl-color-neutral-lightest);--text-color:var(--bl-color-neutral-light)}.wrapper:has(input:autofill){--background-color:var(--autofill-bg-color)}.wrapper:has(input:-webkit-autofill){--background-color:var(--autofill-bg-color)}.input-wrapper legend,label{padding:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}label{position:absolute;max-width:max-content;transition:all ease-in .1s;font:var(--input-font);top:var(--padding-vertical);left:var(--padding-horizontal);right:var(--padding-horizontal);pointer-events:none;color:var(--bl-color-neutral-light)}.has-icon label{right:calc(var(--padding-horizontal) + var(--icon-size) + var(--padding-vertical))}.input-wrapper legend{height:0;visibility:hidden;display:none}.input-wrapper legend span{padding:0 var(--label-padding);display:inline-block;opacity:0;visibility:visible}input{width:100%;align-self:stretch;outline:0;border:0;padding:0;padding-left:var(--label-padding);font:var(--input-font);color:var(--text-color);-webkit-text-fill-color:var(--text-color);background-color:transparent}input::-webkit-credentials-auto-fill-button{color:red}:where(.wrapper:focus-within, .wrapper.has-value) input{padding-left:var(--label-padding)}input:disabled{cursor:not-allowed}input:autofill{background-color:var(--autofill-bg-color);/**\n * Some browsers doesn't allow setting background-color\n * https://developer.mozilla.org/en-US/docs/Web/CSS/:autofill\n */box-shadow:0 0 0 40rem var(--autofill-bg-color) inset}input:-webkit-autofill{background-color:var(--autofill-bg-color);/**\n * Some browsers doesn't allow setting background-color\n * https://developer.mozilla.org/en-US/docs/Web/CSS/:autofill\n */box-shadow:0 0 0 40rem var(--autofill-bg-color) inset}.icon{display:flex;align-items:center;gap:var(--icon-gap);flex-basis:var(--icon-size);align-self:center;height:var(--icon-size);margin-right:var(--label-padding)}bl-icon:not(.reveal-icon){font-size:var(--icon-size);color:var(--icon-color);height:var(--icon-size)}.reveal-button bl-icon{display:none}bl-icon[name='eye_on']{display:inline-block}.password-visible bl-icon[name='eye_on']{display:none}.password-visible bl-icon[name='eye_off']{display:inline-block}.wrapper:not(.has-icon) .icon{display:none}.hint{display:none;font:var(--bl-font-body-text-3)}.hint p{padding:0;margin:0}::placeholder{color:var(--bl-color-neutral-light);-webkit-text-fill-color:var(--bl-color-neutral-light)}:host([label]) ::placeholder{color:transparent;-webkit-text-fill-color:transparent;transition:color ease-out 0.4s}:host([label-fixed]) ::placeholder,:host :focus-within ::placeholder{color:var(--bl-color-neutral-light);-webkit-text-fill-color:var(--bl-color-neutral-light)}:host([label-fixed]) label{position:static;transition:none;transform:none;pointer-events:initial;font:var(--bl-font-caption);color:var(--bl-color-neutral-dark);padding:0}:host([label-fixed]) legend{display:none}:host(:not([label-fixed])) :focus-within label,:host(:not([label-fixed])) .has-value label{top:0;left:calc(var(--padding-horizontal) - var(--label-padding));right:calc(var(--padding-horizontal) - var(--label-padding));transform:translateY(-50%);font:var(--bl-font-caption);color:var(--bl-color-neutral-dark);padding:0 var(--label-padding);pointer-events:initial;z-index:var(--bl-index-base)}:host([label]:not([label-fixed])) :where(:focus-within, .has-value) legend{max-width:100%;font:var(--bl-font-caption);display:block}.error-icon,.invalid-text{display:none}.dirty.invalid label,.invalid-text,.error-icon{color:var(--bl-color-danger)}.help-text{color:var(--bl-color-neutral-dark)}:host([help-text]) .hint,.dirty.invalid .hint{display:block}.dirty.invalid .invalid-text{display:block}.dirty.invalid .help-text{display:none}.dirty.invalid .error-icon{display:inline-block}.dirty.invalid .custom-icon ~ .error-icon{display:none}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult, PropertyValues } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { FormControlMixin } from '@open-wc/form-control';\nimport { submit } from '@open-wc/form-helpers';\nimport { live } from 'lit/directives/live.js';\nimport { event, EventDispatcher } from '../../utilities/event';\nimport { innerInputValidators } from '../../utilities/form-control';\nimport 'element-internals-polyfill';\nimport '../icon/bl-icon';\nimport '../button/bl-button';\n\nimport style from './bl-input.css';\n\nexport type InputSize = 'small' | 'medium' | 'large';\n/**\n * @tag bl-input\n * @summary Baklava Input component\n */\n@customElement('bl-input')\nexport default class BlInput extends FormControlMixin(LitElement) {\n static get styles(): CSSResultGroup {\n return [style];\n }\n static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };\n\n static formControlValidators = innerInputValidators;\n\n @query('input')\n validationTarget: HTMLInputElement;\n\n /**\n * Sets name of the input\n */\n @property({ reflect: true })\n name?: string;\n\n /**\n * Type of the input. It's used to set `type` attribute of native input inside. Only `text`, `number` and `password` is supported for now.\n */\n @property({ reflect: true })\n type: 'text' | 'password' | 'number' | 'tel' | 'url' = 'text';\n\n /**\n * Sets label of the input\n */\n @property({ reflect: true })\n label?: string;\n\n /**\n * Sets placeholder of the input\n */\n @property({ reflect: true })\n placeholder?: string;\n\n /**\n * Sets initial value of the input\n */\n @property({ reflect: true })\n value = '';\n\n /**\n * Makes input a mandatory field\n */\n @property({ type: Boolean, reflect: true })\n required = false;\n\n /**\n * Sets minimum length of the input\n */\n @property({ type: Number, reflect: true })\n minlength?: number;\n\n /**\n * Sets maximum length of the input\n */\n @property({ type: Number, reflect: true })\n maxlength?: number;\n\n /**\n * Sets the smallest number can be entered to a `number` input\n */\n @property({ type: Number, reflect: true })\n min?: number;\n\n /**\n * Sets the biggest number can be entered to a `number` input\n */\n @property({ type: Number, reflect: true })\n max?: number;\n\n /**\n * Sets a regex pattern form the input validation\n */\n @property({ type: String, reflect: true })\n pattern?: string;\n\n /**\n * Sets the increase and decrease step to a `number` input\n */\n @property({ type: Number, reflect: true })\n step?: number;\n\n /**\n * Hints browser to autocomplete this field.\n */\n @property({ type: String, reflect: true })\n autocomplete: string;\n\n /**\n * Sets the input mode of the field for asking browser to show the desired keyboard.\n */\n @property({ type: String, reflect: true })\n inputmode: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';\n\n /**\n * Sets input to get keyboard focus automatically\n */\n @property({ type: Boolean, reflect: true })\n autofocus = false;\n\n /**\n * Sets the custom icon name. `bl-icon` component is used to show an icon\n */\n @property({ type: String, reflect: true })\n icon?: string;\n\n /**\n * Sets input size.\n */\n @property({ type: String, reflect: true })\n size?: InputSize = 'medium';\n\n /**\n * Disables the input\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * Makes the input readonly.\n */\n @property({ type: Boolean, reflect: true })\n readonly = false;\n\n /**\n * Makes label as fixed positioned\n */\n @property({ type: Boolean, attribute: 'label-fixed', reflect: true })\n labelFixed = false;\n\n /**\n * Overrides error message. This message will override default error messages\n */\n @property({ type: String, attribute: 'invalid-text', reflect: true })\n set customInvalidText(value: string) {\n this._customInvalidText = value;\n this.setValue(this.value);\n }\n\n get customInvalidText(): string {\n return this._customInvalidText;\n }\n\n private _customInvalidText: string;\n\n /**\n * Adds help text\n */\n @property({ type: String, attribute: 'help-text', reflect: true })\n helpText?: string;\n\n /**\n * Fires when an alteration to the element's value is committed by the user. Unlike the input event, the change event is not necessarily fired for each alteration to an element's value.\n */\n @event('bl-change') private onChange: EventDispatcher<string>;\n\n /**\n * Fires when the value of an input element has been changed.\n */\n @event('bl-input') private onInput: EventDispatcher<string>;\n\n /**\n * Fires when the value of an input element has been changed.\n */\n @event('bl-invalid') private onInvalid: EventDispatcher<ValidityState>;\n\n connectedCallback(): void {\n super.connectedCallback();\n this.addEventListener('keydown', this.onKeydown);\n this.addEventListener('invalid', this.onError);\n\n this.form?.addEventListener('submit', () => {\n this.reportValidity();\n });\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n this.removeEventListener('keydown', this.onKeydown);\n this.removeEventListener('invalid', this.onError);\n }\n\n private onKeydown = (event: KeyboardEvent): void => {\n if (event.code === 'Enter' && this.form) {\n submit(this.form);\n }\n };\n\n private onError = (): void => {\n this.onInvalid(this.internals.validity);\n };\n\n @state() private dirty = false;\n\n @state() private passwordVisible = false;\n\n private textVisibilityToggle() {\n this.passwordVisible = !this.passwordVisible;\n }\n\n validityCallback(): string | void {\n return this.customInvalidText || this.validationTarget?.validationMessage;\n }\n\n /**\n * Force to set input as in invalid state.\n */\n async forceCustomError() {\n await this.updateComplete;\n this.validationTarget.setCustomValidity(this.customInvalidText || 'An error occurred');\n this.setValue(this.value);\n this.reportValidity();\n }\n\n /**\n * Clear forced invalid state\n */\n async clearCustomError() {\n await this.updateComplete;\n this.validationTarget.setCustomValidity('');\n this.setValue(this.value);\n this.reportValidity();\n }\n\n reportValidity() {\n this.dirty = true;\n this.requestUpdate();\n return this.checkValidity();\n }\n\n private inputHandler(event: Event) {\n const value = (event.target as HTMLInputElement).value;\n\n this.value = value;\n this.onInput(value);\n }\n\n private changeHandler(event: Event) {\n const value = (event.target as HTMLInputElement).value;\n\n this.dirty = true;\n this.value = value;\n this.onChange(value);\n }\n\n firstUpdated() {\n this.setValue(this.value);\n }\n\n protected async updated(changedProperties: PropertyValues) {\n if (changedProperties.has('value')) {\n this.setValue(this.value);\n\n await this.validationComplete;\n\n this.requestUpdate();\n }\n }\n\n private inputId = Math.random().toString(36).substring(2);\n\n render(): TemplateResult {\n const invalidMessage = !this.checkValidity()\n ? html`<p id=\"errorMessage\" aria-live=\"polite\" class=\"invalid-text\">\n ${this.validationMessage}\n </p>`\n : ``;\n const helpMessage = this.helpText\n ? html`<p id=\"helpText\" class=\"help-text\">${this.helpText}</p>`\n : ``;\n\n const icon = this.icon ? html`<bl-icon class=\"custom-icon\" name=\"${this.icon}\"></bl-icon>` : '';\n const label = this.label ? html`<label for=${this.inputId}>${this.label}</label>` : '';\n const passwordInput = this.type === 'password';\n\n const revealButton = passwordInput\n ? html`<bl-button\n size=\"small\"\n kind=\"neutral\"\n variant=\"tertiary\"\n class=\"${classMap({\n 'reveal-button': true,\n 'password-visible': this.passwordVisible,\n })}\"\n aria-label=\"Toggle password reveal\"\n @bl-click=\"${this.textVisibilityToggle}\"\n >\n <bl-icon class=\"reveal-icon\" slot=\"icon\" name=\"eye_on\"></bl-icon>\n <bl-icon class=\"reveal-icon\" slot=\"icon\" name=\"eye_off\"></bl-icon>\n </bl-button>`\n : '';\n\n const classes = {\n 'wrapper': true,\n 'dirty': this.dirty,\n 'invalid': !this.checkValidity(),\n 'has-icon': passwordInput || this.icon || (this.dirty && !this.checkValidity()),\n 'has-value': this.value !== null && this.value !== '',\n };\n\n const passwordType = this.passwordVisible ? 'text' : 'password';\n const inputType = passwordInput ? passwordType : this.type;\n\n return html`<div class=${classMap(classes)}>\n ${label}\n <fieldset class=\"input-wrapper\">\n <legend><span>${this.label}</span></legend>\n <input\n id=${this.inputId}\n type=${inputType}\n .value=${live(this.value)}\n inputmode=\"${ifDefined(this.inputmode)}\"\n ?autofocus=${this.autofocus}\n autocomplete=\"${ifDefined(this.autocomplete)}\"\n placeholder=\"${ifDefined(this.placeholder)}\"\n minlength=\"${ifDefined(this.minlength)}\"\n maxlength=\"${ifDefined(this.maxlength)}\"\n min=\"${ifDefined(this.min)}\"\n max=\"${ifDefined(this.max)}\"\n pattern=\"${ifDefined(this.pattern)}\"\n step=\"${ifDefined(this.step)}\"\n ?required=${this.required}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n @change=${this.changeHandler}\n @input=${this.inputHandler}\n aria-invalid=${this.checkValidity() ? 'false' : 'true'}\n aria-describedby=${ifDefined(this.helpText ? 'helpText' : undefined)}\n aria-errormessage=${ifDefined(this.checkValidity() ? undefined : 'errorMessage')}\n />\n <div class=\"icon\">\n ${revealButton} ${icon}\n <bl-icon class=\"error-icon\" name=\"alert\"></bl-icon>\n </div>\n </fieldset>\n <div class=\"hint\">${invalidMessage} ${helpMessage}</div>\n </div>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'bl-input': BlInput;\n }\n}\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": ["styles", "i", "bl_input_default", "BlInput", "FormControlMixin", "s", "event", "submit", "bl_input_default", "value", "_a", "changedProperties", "invalidMessage", "y", "helpMessage", "icon", "label", "passwordInput", "revealButton", "o", "classes", "passwordType", "inputType", "l", "innerInputValidators", "__decorateClass", "i", "e", "t"]
|
|
7
|
-
}
|