v4web-components/dist/stencil-library/p-a5a2539b.entry.js

Stencil Component Starter

import{r as e,c as a,h as s,g as t}from"./p-c2aeec95.js";const r=".container{display:block;position:relative;padding-left:2.3rem;cursor:pointer;font-size:1.375rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.label-text{font:var(--lab-ds-semantic-typography-body-none-decoration-p2-regular);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.wrap-text .label-text{white-space:wrap}.label-text.checked{font:var(--lab-ds-semantic-typography-body-none-decoration-p2-bold)}.container-label{display:flex;gap:0.7rem;align-items:flex-start}.container input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.checkmark{position:absolute;top:0;left:0;height:1.25rem;width:1.25rem;border-style:solid;border-color:var(--lab-ds-semantic-color-bg-cloudy);border-radius:var(--lab-ds-semantic-selectable-border-radius-xs);border-width:var(--lab-ds-semantic-selectable-border-width-m);background-color:var(--lab-ds-semantic-color-bg-default)}.error.checkmark{border-color:var(--lab-ds-semantic-selectable-color-border-dark-error);background-color:rgba(0, 0, 0, 0)}.container:hover input:not([disabled]):not(:checked)~.checkmark{background-color:var(--lab-ds-semantic-selectable-color-primary-hover)}.container:active input:not([disabled])~.checkmark{background-color:var(--lab-ds-semantic-selectable-color-primary-press)}.container:focus:not([disabled]){outline-style:solid;outline-color:var(--lab-ds-semantic-selectable-color-primary-focus);border-radius:var(--lab-ds-semantic-selectable-border-radius-xs);outline-width:var(--lab-ds-semantic-selectable-border-width-s);outline-offset:0.4rem}.container.disabled{opacity:var(--lab-ds-core-opacity-80)}.container input:checked~.checkmark{background-color:rgba(0, 0, 0, 0);border-style:solid;border-color:var(--lab-ds-semantic-selectable-color-primary-default)}.checkmark:after{content:'';position:absolute;display:none}.container input:checked~.checkmark:after{display:block}.container .checkmark:after{left:0.438rem;top:0.125rem;width:0.313rem;height:0.625rem;border:solid var(--lab-ds-semantic-selectable-color-primary-default);border-width:0 0.188rem 0.188rem 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}";const l=class{constructor(s){e(this,s);this.handleCheckbox=a(this,"handleCheckbox",7);this.label=undefined;this.avatar=false;this.error=false;this.disabled=false;this.checked=false;this.wrapText=false}handleClick(){this.handleCheckbox.emit(this.checked);this.checked=!this.checked}render(){return s("label",{class:`container ${this.disabled?"disabled":""} ${this.wrapText?"wrap-text":""}`},(this.avatar||this.label)&&s("span",{class:"container-label"},this.avatar?s("lab-ds-avatar",{size:"small"}):null,this.label&&s("span",{class:`label-text ${this.checked?"checked":""}`},this.label)),s("input",{checked:this.checked,onClick:()=>this.handleClick(),disabled:this.disabled,type:"checkbox"}),s("span",{class:`${this.error&&"error"} checkmark`}))}};l.style=r;const i=".container{display:flex;align-items:center;cursor:pointer;font-size:1.375rem;gap:var(--lab-ds-semantic-selectable-space-gap-s)}input[type='radio']{appearance:none;margin:0;font:inherit;color:currentColor;width:var(--lab-ds-semantic-selectable-size-xs);height:var(--lab-ds-semantic-selectable-size-xs);border:var(--lab-ds-semantic-selectable-border-width-s) solid var(--lab-ds-semantic-selectable-color-border-default);border-radius:50%;display:flex;justify-content:center;align-items:center}input[type='radio']::before{content:'';width:var(--lab-ds-semantic-selectable-size-xxs);height:var(--lab-ds-semantic-selectable-size-xxs);border-radius:50%;transform:scale(0);transition:120ms transform ease-in-out;border-color:var(--lab-ds-semantic-selectable-color-primary-default)}input[type='radio']:checked{border-color:var(--lab-ds-semantic-selectable-color-primary-default)}input[type='radio']:checked::before{background-color:var(--lab-ds-semantic-selectable-color-primary-default);transform:scale(1)}.label-text{font:var(--lab-ds-semantic-typography-body-none-decoration-p2-regular);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.label-text.checked{font:var(--lab-ds-semantic-typography-body-none-decoration-p2-bold)}.error.checkmark{border-color:var(--lab-ds-semantic-selectable-color-border-error);background-color:rgba(0, 0, 0, 0)}.container:hover input:not([disabled]):not(:checked)~.checkmark{background-color:var(--lab-ds-semantic-selectable-color-primary-hover)}.container:active input:not([disabled])~.checkmark{background-color:var(--lab-ds-semantic-selectable-color-primary-press)}.container:focus-within:not([disabled]){outline-style:solid;outline-color:var(--lab-ds-semantic-selectable-color-primary-focus);border-radius:var(--lab-ds-semantic-selectable-border-radius-xs);outline-width:var(--lab-ds-semantic-selectable-border-width-s);outline-offset:0.4rem}.container.disabled{opacity:var(--lab-ds-core-opacity-80)}";const o=class{constructor(s){e(this,s);this.handleRadioButton=a(this,"handleRadioButton",7);this.label=undefined;this.avatar=false;this.error=false;this.disabled=false;this.checked=false}handleClick(){this.handleRadioButton.emit(this.checked)}render(){return s("label",{class:`container ${this.disabled?"disabled":""}`},s("input",{checked:this.checked,onClick:()=>this.handleClick(),disabled:this.disabled,type:"radio"}),this.avatar?s("lab-ds-avatar",{size:"small"}):null,s("span",{class:`label-text ${this.checked?"checked":""}`},this.label))}};o.style=i;const c="input{border:none;outline:none;padding:0;background-color:rgba(0, 0, 0, 0);color:var(--lab-ds-semantic-color-fg-default)}.v4-input{display:flex;flex-direction:column;gap:var(--lab-ds-semantic-selectable-space-gap-xs);color:var(--lab-ds-semantic-color-fg-default);max-width:100%}.v4-input .title-text{text-align:left;font:var(--lab-ds-semantic-typography-heading-h7)}.v4-input .input-helper{display:flex;flex-direction:column;gap:var(--lab-ds-semantic-selectable-space-gap-s)}.v4-input .helper-text{display:flex;align-items:center;gap:var(--lab-ds-semantic-selectable-space-gap-xs);font:var(--lab-ds-semantic-typography-body-none-decoration-p3-regular)}.clean-visible{display:none}.input-field{width:100%}.input-icon{display:flex;align-items:center;border-style:solid;border-radius:var(--lab-ds-semantic-selectable-border-radius-xs);border-width:var(--lab-ds-semantic-selectable-border-width-m);border-color:var(--lab-ds-semantic-selectable-color-border-default);background-color:var(--lab-ds-semantic-selectable-color-bg-default);padding-top:var(--lab-ds-semantic-selectable-space-padding-sm);padding-bottom:var(--lab-ds-semantic-selectable-space-padding-sm);padding-left:var(--lab-ds-semantic-selectable-space-padding-m);padding-right:var(--lab-ds-semantic-selectable-space-padding-m);gap:var(--lab-ds-semantic-selectable-space-gap-xs);margin-bottom:0}.input-icon .input-field{color:var(--lab-ds-semantic-color-fg-enabled);font:var(--lab-ds-semantic-typography-body-none-decoration-p2-regular)}.input-icon .icon.right{cursor:pointer;margin-top:-0.5rem;margin-bottom:-0.5rem}.options{font:var(--lab-ds-semantic-typography-body-none-decoration-p2-regular);position:relative}.hints{max-height:21rem;overflow-y:auto;overflow-x:hidden;border-style:solid;border-radius:var(--lab-ds-semantic-selectable-border-radius-xs);border-width:var(--lab-ds-semantic-selectable-border-width-m);padding-right:var(--lab-ds-semantic-selectable-space-padding-m);padding-left:var(--lab-ds-semantic-selectable-space-padding-m);padding-bottom:var(--lab-ds-semantic-selectable-space-padding-sm);padding-top:var(--lab-ds-semantic-selectable-space-padding-sm);gap:var(--lab-ds-semantic-selectable-space-gap-s);background-color:var(--lab-ds-semantic-selectable-color-bg-pure);border-color:var(--lab-ds-semantic-selectable-color-primary-press);color:var(--lab-ds-semantic-color-fg-default)}.hint-container{display:flex;align-items:center;justify-content:left;gap:var(--lab-ds-semantic-selectable-space-gap-s);cursor:pointer}.input-icon:focus-within{box-shadow:var(--lab-ds-semantic-selectable-shadow-m);border-color:var(--lab-ds-semantic-selectable-color-primary-press)}.input-icon:hover{box-shadow:var(--lab-ds-semantic-selectable-shadow-s);border-color:var(--lab-ds-semantic-selectable-color-primary-hover)}.input-icon:active{box-shadow:var(--lab-ds-semantic-selectable-shadow-m);border-color:var(--lab-ds-semantic-selectable-color-primary-press)}.v4-input.disabled .input-icon{background-color:var(--lab-ds-semantic-selectable-color-bg-disabled);border-color:var(--lab-ds-semantic-selectable-color-border-disabled);color:var(--lab-ds-semantic-selectable-color-bg-dark-success);box-shadow:none}.v4-input.disabled .title-text{color:var(--lab-ds-semantic-color-fg-disabled)}.v4-input.disabled .input-field{color:var(--lab-ds-semantic-color-fg-disabled)}.v4-input.disabled .icon{color:var(--lab-ds-semantic-color-fg-disabled)}.v4-input.disabled .input-helper{color:var(--lab-ds-semantic-color-fg-disabled)}";const n=class{constructor(s){e(this,s);this.changeInput=a(this,"changeInput",7);this.value=undefined;this.hints=undefined;this.isHintVisible=false;this.valueState=this.value;this.label="";this.disabled=false}handleChange(e){if(e===""){this.changeInput.emit("");this.value="";this.valueState=""}else{this.changeInput.emit(e.value);this.valueState=e.value}}checkForClickOutside(e){if(this.el.contains(e.target)){return}this.isHintVisible=false}render(){var e,a,t;return s("div",{class:`v4-input ${this.disabled&&"disabled"}`},s("div",{onFocusin:()=>this.isHintVisible=true,class:"input-icon"},s("lab-ds-icon-not-selectable",{class:"icon left",size:"small",icon:"search"}),s("input",{disabled:this.disabled,placeholder:this.label,class:"input-field",type:"text",value:this.value,onInput:e=>this.handleChange(e.target)}),((e=this.valueState)===null||e===void 0?void 0:e.length)>0&&s("lab-ds-icon-selectable",{onClick:()=>{this.handleChange("")},class:`icon right`,size:"small",icon:"close"})),((a=this.hints)===null||a===void 0?void 0:a.length)>0&&this.isHintVisible&&s("div",{class:"options"},s("div",{class:"hints"},(t=this.hints)===null||t===void 0?void 0:t.map(((e,a)=>{if(a>4)return null;return s("div",{onClick:()=>{this.handleChange({value:e.name});this.isHintVisible=false},class:"hint-container"},s("lab-ds-icon-not-selectable",{class:"icon",size:"small",icon:"history"}),e.name," ")})))))}get el(){return t(this)}};n.style=c;const d=".v4-skeleton-square{min-height:var(--lab-ds-semantic-placeholder-size-l);max-height:var(--lab-ds-semantic-placeholder-size-l);background-color:var(--lab-ds-semantic-color-bg-cloudy);border-radius:var(--lab-ds-semantic-selectable-border-radius-xs);position:relative;overflow:hidden}.v4-skeleton-circle{position:relative;overflow:hidden;display:flex;aspect-ratio:1/1;min-height:var(--lab-ds-semantic-placeholder-size-xxs);max-height:var(--lab-ds-semantic-placeholder-size-xxl);min-width:var(--lab-ds-semantic-placeholder-size-xxs);max-width:var(--lab-ds-semantic-placeholder-size-xxl);background-color:var(--lab-ds-semantic-color-bg-cloudy);border-radius:var(--lab-ds-semantic-selectable-border-radius-pill)}.v4-skeleton-circle::after{position:absolute;top:0;right:0;bottom:0;left:0;transform:translateX(-100%);background-image:linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #ffffffb1 50%, rgba(0, 0, 0, 0) 100%);animation:shimmer 3s infinite;animation-timing-function:linear;content:''}.v4-skeleton-square::after{position:absolute;top:0;right:0;bottom:0;left:0;transform:translateX(-100%);background-image:linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #ffffffdd 50%, rgba(0, 0, 0, 0) 100%);animation:shimmer 3s infinite;animation-timing-function:linear;content:''}@keyframes shimmer{100%{transform:translateX(100%)}}";const b=class{constructor(a){e(this,a);this.type="square";this.width="100%";this.height="100%"}render(){return s("div",null,s("div",{style:{width:this.width,height:this.height},class:`${this.type==="square"?"v4-skeleton-square":"v4-skeleton-circle"}`}))}};b.style=d;export{l as lab_ds_checkbox,o as lab_ds_radio_button,n as lab_ds_search_bar,b as lab_ds_skeleton};
//# sourceMappingURL=p-a5a2539b.entry.js.map