v4web-components/dist/stencil-library/p-1a098ed4.entry.js

Stencil Component Starter

import{r as a,c as e,h as o}from"./p-c2aeec95.js";const l=":host{display:block}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}button.max-width{width:100%}button{position:relative;background-color:rgba(0, 0, 0, 0);border-style:solid;cursor:pointer;outline:none}button .label{display:flex;justify-content:center;align-items:center;gap:var(--lab-ds-semantic-selectable-space-gap-s)}.icon{font-family:Material Symbols Outlined;animation:spin 1s linear infinite;font-size:var(--lab-ds-semantic-size-icon-s)}.large .icon{font-size:var(--lab-ds-semantic-size-icon-sm)}.icon-loading{display:flex;align-items:center;justify-content:center;position:absolute;left:50%;top:50%;transform:translate(-50%, -50%)}button .icon{display:none}button.loading .label{opacity:0}button.loading .icon{display:flex;color:var(--lab-ds-semantic-color-bg-default);animation:spin 1s linear infinite}.leading-icon{margin-top:-0.5rem;margin-bottom:-0.5rem}.step-icon{margin-top:-0.5rem;margin-bottom:-0.5rem}.button.small{padding-top:var(--lab-ds-semantic-selectable-space-padding-s);padding-bottom:var(--lab-ds-semantic-selectable-space-padding-s);padding-left:var(--lab-ds-semantic-selectable-space-padding-xl);padding-right:var(--lab-ds-semantic-selectable-space-padding-xl);border-radius:var(--lab-ds-semantic-selectable-border-radius-xs);gap:var(--lab-ds-semantic-selectable-space-gap-s);font:var(--lab-ds-component-button-typography-none-decoration-small);font-family:var(--lab-ds-component-button-font-family);font-size:var(--lab-ds-component-button-font-size-small);font-weight:var(--lab-ds-component-button-font-weight);line-height:var(--lab-ds-component-button-font-line-height-small);text-transform:var(--lab-ds-core-font-letter-case-02)}.button.medium{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-xxxl);padding-right:var(--lab-ds-semantic-selectable-space-padding-xxxl);border-radius:var(--lab-ds-semantic-selectable-border-radius-xs);gap:var(--lab-ds-semantic-selectable-space-gap-s);font:var(--lab-ds-component-button-typography-none-decoration-medium);font-family:var(--lab-ds-component-button-font-family);font-size:var(--lab-ds-component-button-font-size-medium);font-weight:var(--lab-ds-component-button-font-weight);line-height:var(--lab-ds-component-button-font-line-height-medium);text-transform:var(--lab-ds-core-font-letter-case-02)}.button.large{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-xxxl);padding-right:var(--lab-ds-semantic-selectable-space-padding-xxxl);border-radius:var(--lab-ds-semantic-selectable-border-radius-xs);gap:var(--lab-ds-semantic-selectable-space-gap-s);font:var(--lab-ds-component-button-typography-none-decoration-large);font-family:var(--lab-ds-component-button-font-family);font-size:var(--lab-ds-component-button-font-size-large);font-weight:var(--lab-ds-component-button-font-weight);line-height:var(--lab-ds-component-button-font-line-height-large);text-transform:var(--lab-ds-core-font-letter-case-02)}.primary{background-color:var(--lab-ds-semantic-selectable-color-primary-default);border-color:var(--lab-ds-semantic-selectable-color-primary-default);color:var(--lab-ds-semantic-color-fg-contrast-primary)}.primary:focus:not([disabled]){background-color:var(--lab-ds-semantic-selectable-color-primary-default);border-radius:var(--lab-ds-semantic-selectable-border-radius-xs);outline-width:var(--lab-ds-semantic-selectable-border-width-m);outline-style:solid;outline-color:var(--lab-ds-semantic-selectable-color-primary-focus);outline-offset:var(--lab-ds-semantic-selectable-space-padding-xxs)}.primary:hover:not([disabled]){background-color:var(--lab-ds-semantic-selectable-color-primary-hover);border-color:var(--lab-ds-semantic-selectable-color-primary-hover)}.primary:active:not([disabled]){background-color:var(--lab-ds-semantic-selectable-color-primary-press);border-color:var(--lab-ds-semantic-selectable-color-primary-press)}.primary:disabled{background-color:var(--lab-ds-semantic-color-bg-disabled);border-color:var(--lab-ds-semantic-color-bg-disabled);color:var(--lab-ds-semantic-color-fg-disabled);cursor:not-allowed}.primary.loading{background-color:var(--lab-ds-semantic-selectable-color-primary-loading);border-color:var(--lab-ds-semantic-selectable-color-primary-loading)}.outlined{color:var(--lab-ds-semantic-selectable-color-primary-default);border-color:var(--lab-ds-semantic-selectable-color-primary-default);border-width:var(--lab-ds-semantic-selectable-border-width-m);border-radius:var(--lab-ds-semantic-selectable-border-radius-xs)}.outlined:hover:not([disabled]){background-color:var(--lab-ds-semantic-selectable-color-primary-hover);color:var(--lab-ds-semantic-color-fg-default);border-color:var(--lab-ds-semantic-selectable-color-primary-hover)}.outlined:focus:not([disabled]){background-color:var(--lab-ds-semantic-selectable-color-primary-default);border-radius:var(--lab-ds-semantic-selectable-border-radius-xs);outline-width:var(--lab-ds-semantic-selectable-border-width-m);outline-style:solid;outline-color:var(--lab-ds-semantic-selectable-color-primary-focus);outline-offset:var(--lab-ds-semantic-selectable-space-padding-xxs);color:var(--lab-ds-semantic-color-fg-default)}.outlined:active:not([disabled]){background-color:var(--lab-ds-semantic-selectable-color-primary-press);color:var(--lab-ds-semantic-color-fg-default)}.outlined:disabled{background-color:none;color:var(--lab-ds-semantic-color-fg-disabled);border-color:var(--lab-ds-semantic-color-fg-disabled);border-width:var(--lab-ds-semantic-selectable-border-width-m);border-radius:var(--lab-ds-semantic-selectable-border-radius-xs);cursor:not-allowed}.outlined.loading{background-color:var(--lab-ds-semantic-selectable-color-primary-loading);border:none}.link-button{color:var(--lab-ds-semantic-color-fg-default);border:none}.link-button.small .label-text{font:var(--lab-ds-component-button-typography-underlined-small);text-decoration:underline}.link-button.medium .label-text{font:var(--lab-ds-component-button-typography-underlined-medium);text-decoration:underline}.link-button.large .label-text{font:var(--lab-ds-component-button-typography-underlined-large);text-decoration:underline}.link-button:hover:not([disabled]){background-color:var(--lab-ds-semantic-selectable-color-bg-hover);color:var(--lab-ds-semantic-color-fg-default);border:none}.link-button:focus:not([disabled]){border-radius:var(--lab-ds-semantic-selectable-border-radius-xs);outline-width:var(--lab-ds-semantic-selectable-border-width-m);outline-style:solid;outline-color:var(--lab-ds-semantic-color-fg-default);outline-offset:var(--lab-ds-semantic-selectable-space-padding-xxs);color:var(--lab-ds-semantic-color-fg-default)}.link-button:active:not([disabled]){background-color:var(--lab-ds-semantic-color-bg-cloudy);color:var(--lab-ds-semantic-color-fg-default);border:none;outline:none}.link-button:disabled{color:var(--lab-ds-semantic-color-fg-disabled);border-color:var(--lab-ds-semantic-color-fg-disabled);cursor:not-allowed}.link-button.loading{background-color:var(--lab-ds-semantic-color-bg-cloudy)}.link-button && .small{font:var(--lab-ds-component-button-typography-underlined-small)}.link-button && .medium{font:var(--lab-ds-component-button-typography-underlined-medium)}.link-button && .large{font:var(--lab-ds-component-button-typography-underlined-large)}.cta{background-color:var(--lab-ds-semantic-selectable-color-primary-default);color:var(--lab-ds-semantic-color-fg-default);border:none;animation:pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite}@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.5}}.cta:hover:not([disabled]){background-color:var(--lab-ds-semantic-selectable-color-primary-hover);color:var(--lab-ds-semantic-color-fg-default);box-shadow:var(--lab-ds-semantic-selectable-shadow-s);animation:none}.cta:focus:not([disabled]){background-color:var(--lab-ds-semantic-selectable-color-primary-default);border-radius:var(--lab-ds-semantic-selectable-border-radius-xs);outline-width:var(--lab-ds-semantic-selectable-border-width-m);outline-style:solid;outline-color:var(--lab-ds-semantic-selectable-color-primary-focus);outline-offset:var(--lab-ds-semantic-selectable-space-padding-xxs);color:var(--lab-ds-semantic-color-fg-default)}.cta:active:not([disabled]){background-color:var(--lab-ds-semantic-selectable-color-primary-press);color:var(--lab-ds-semantic-color-fg-default)}.cta:disabled{background-color:var(--lab-ds-semantic-selectable-color-bg-disabled);color:var(--lab-ds-semantic-color-fg-disabled);animation:none;cursor:not-allowed}.cta.loading{background-color:var(--lab-ds-semantic-selectable-color-primary-loading);animation:none}.danger-primary{background-color:var(--lab-ds-semantic-selectable-color-bg-dark-error);border-color:var(--lab-ds-semantic-selectable-color-bg-dark-error);color:var(--lab-ds-semantic-selectable-color-bg-pure)}.danger-primary:hover:not([disabled]){background-color:var(--lab-ds-semantic-selectable-color-error-hover);border-color:var(--lab-ds-semantic-selectable-color-error-hover);color:var(--lab-ds-semantic-color-bg-default)}.danger-primary:focus:not([disabled]){background-color:var(--lab-ds-semantic-selectable-color-bg-dark-error);border-color:var(--lab-ds-semantic-selectable-color-bg-dark-error);border-radius:var(--lab-ds-semantic-selectable-border-radius-xs);outline-width:var(--lab-ds-semantic-selectable-border-width-m);outline-style:solid;outline-color:var(--lab-ds-semantic-selectable-color-error-focus);outline-offset:var(--lab-ds-semantic-selectable-space-padding-xxs);color:var(--lab-ds-semantic-color-bg-default)}.danger-primary:active:not([disabled]){background-color:var(--lab-ds-semantic-selectable-color-error-press);border-color:var(--lab-ds-semantic-selectable-color-error-press);color:var(--lab-ds-semantic-color-bg-default)}.danger-primary:disabled{background-color:var(--lab-ds-semantic-selectable-color-bg-disabled);border-color:var(--lab-ds-semantic-selectable-color-bg-disabled);color:var(--lab-ds-semantic-color-fg-disabled);cursor:not-allowed}.danger-primary.loading{background-color:var(--lab-ds-semantic-selectable-color-error-loading);border-color:var(--lab-ds-semantic-selectable-color-error-loading)}.danger-outlined{color:var(--lab-ds-semantic-selectable-color-bg-dark-error);border-color:var(--lab-ds-semantic-selectable-color-border-dark-error);border-width:var(--lab-ds-semantic-selectable-border-width-m);border-radius:var(--lab-ds-semantic-selectable-border-radius-xs)}.danger-outlined:hover:not([disabled]){background-color:var(--lab-ds-semantic-selectable-color-error-hover);color:var(--lab-ds-semantic-selectable-color-bg-pure);border-color:rgba(0, 0, 0, 0)}.danger-outlined:focus:not([disabled]){background-color:var(--lab-ds-semantic-selectable-color-bg-dark-error);border-radius:var(--lab-ds-semantic-selectable-border-radius-xs);outline-width:var(--lab-ds-semantic-selectable-border-width-m);outline-style:solid;outline-color:var(--lab-ds-semantic-selectable-color-error-focus);outline-offset:var(--lab-ds-semantic-selectable-space-padding-xxs);color:var(--lab-ds-semantic-color-bg-default)}.danger-outlined:active:not([disabled]){background-color:var(--lab-ds-semantic-selectable-color-error-press);color:var(--lab-ds-semantic-color-bg-default)}.danger-outlined:disabled{color:var(--lab-ds-semantic-color-fg-disabled);border-color:var(--lab-ds-semantic-color-bg-disabled);border-width:var(--lab-ds-semantic-selectable-border-width-m);border-radius:var(--lab-ds-semantic-selectable-border-radius-xs);cursor:not-allowed}.danger-outlined.loading{background-color:var(--lab-ds-semantic-selectable-color-error-loading);color:var(--lab-ds-semantic-color-bg-default);border-color:var(--lab-ds-semantic-selectable-color-error-loading)}";const r=class{constructor(o){a(this,o);this.handleButton=e(this,"handleButton",7);this.size="medium";this.type="button";this.variant="primary";this.disabled=undefined;this.loading=undefined;this.leadingIcon=undefined;this.stepIcon=undefined;this.label=undefined;this.maxWidth=false}handleClick(){this.handleButton.emit()}render(){return o("button",{disabled:this.disabled||this.loading,onClick:()=>this.handleClick(),type:this.type,class:`button ${this.maxWidth?"max-width":""} ${this.variant} ${this.size} ${this.loading&&"loading"}`},o("span",{class:"label"},this.leadingIcon&&o("lab-ds-icon-not-selectable",{class:"leading-icon",size:this.size==="large"?"s-medium":"small",icon:this.leadingIcon}),this.label&&o("span",{class:"label-text"},this.label),this.stepIcon&&o("lab-ds-icon-not-selectable",{class:"step-icon",size:this.size==="large"?"s-medium":"small",icon:this.stepIcon})),o("div",{class:"icon-loading"},o("span",{class:"material-symbols-outlined icon"},"progress_activity")))}};r.style=l;export{r as lab_ds_button};
//# sourceMappingURL=p-1a098ed4.entry.js.map