finpro
Version:
20 lines (19 loc) • 7.37 kB
JavaScript
import{a as n}from"./chunk-ZO5WDGDN.js";import{a as g}from"./chunk-23UFIOHV.js";import{a as _}from"./chunk-2M6HTKCC.js";import{a as y}from"./chunk-JA3VZI2D.js";import{a as h,b as r,g as u,h as e,i as b,j as m}from"./chunk-GBPY57YZ.js";import{a as o}from"./chunk-NZ3RGSR6.js";var z=globalThis.SubmitEvent=typeof globalThis.SubmitEvent<"u"?SubmitEvent:Event,x=i=>{if(!(!i.noValidate&&!i.reportValidity())){let p=new z("submit",{bubbles:!0,cancelable:!0});i.dispatchEvent(p),p.defaultPrevented||i.submit()}};var E=h` spin{from{transform:rotate(0)}to{transform:rotate(359deg)}}:host{display:var(--fp-button-display,inline-block);max-width:100%;position:relative}.button{--main-color:var(--fp-color-primary);--main-hover-color:var(--fp-color-primary-hover);--text-hover-color:var(--fp-color-secondary-background);--content-color:var(--fp-color-content-primary-contrast);--bg-color:var(--main-color);--border-color:var(--main-color);--padding-vertical:var(--fp-size-2xs);--padding-horizontal:var(--fp-size-l);--margin-icon:var(--padding-vertical);--icon-size:var(--fp-size-l);--font:var(--fp-font-title-3-medium);--height:var(--fp-size-5xl);display:flex;gap:var(--margin-icon);justify-content:var(--fp-button-justify,center);align-items:center;box-sizing:border-box;width:100%;height:var(--height);border:solid 1px var(--border-color);border-radius:6px;text-decoration:none;padding:var(--padding-vertical) var(--padding-horizontal);cursor:pointer;background-color:var(--bg-color);color:var(--content-color);font:var(--font);font-kerning:none;user-select:none}:host(:hover) .button,:host(.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__) .button{--bg-color:var(--main-hover-color);--border-color:var(--main-hover-color)}.label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([size='small']) .button{--font:var(--fp-font-title-4-medium);--padding-vertical:var(--fp-size-4xs);--padding-horizontal:var(--fp-size-2xs);--icon-size:var(--fp-size-m);--height:var(--fp-size-3xl)}:host([size='large']) .button{--font:var(--fp-font-title-3-medium);--padding-vertical:var(--fp-size-s);--padding-horizontal:var(--fp-size-3xl);--margin-icon:var(--fp-size-2xs);--height:var(--fp-size-6xl)}.button:focus{outline:0}.button:focus-visible{position:relative;outline:0}.button:focus-visible::after{border:2px solid var(--main-color);border-radius:var(--fp-border-radius-l);content:'';position:absolute;inset:-4px}.loading-icon{animation:spin 1s linear infinite;font-size:var(--icon-size)}:host ::slotted(fp-icon){font-size:var(--icon-size)}:host([loading]) ::slotted(fp-icon){display:none}:host .has-icon:not(.has-content){--padding-horizontal:var(--padding-vertical);--margin-icon:0}:host([variant='secondary']) .button{--bg-color:transparent;--content-color:var(--main-color)}:host([variant='tertiary']) .button{--content-color:var(--main-color);--border-color:transparent;--bg-color:transparent}:host([kind='neutral']) .button{--main-color:var(--fp-color-secondary);--main-hover-color:var(--fp-color-secondary-hover)}:host([kind='success']) .button{--main-color:var(--fp-color-success);--main-hover-color:var(--fp-color-success-hover)}:host([kind='danger']) .button{--main-color:var(--fp-color-danger);--main-hover-color:var(--fp-color-danger-hover)}:host([disabled]){cursor:not-allowed}:host([loading]){cursor:wait}:host([loading]) fp-icon:not(.loading-icon){display:none}:host .button[aria-disabled='true']{--main-color:var(--fp-color-tertiary);--main-hover-color:var(--fp-color-tertiary);--content-color:var(--fp-color-content-passive);--bg-color:var(--main-color);pointer-events:none;text-decoration:none}:host([variant='tertiary']) .button[aria-disabled='true']{--main-color:transparent}:host([variant='secondary']:hover) .button[aria-disabled='false'],:host([variant='secondary'].__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__) .button[aria-disabled='false']{--content-color:var(--fp-color-content-primary-contrast);--bg-color:var(--main-hover-color)}:host([variant='tertiary']:hover) .button[aria-disabled='false'],:host([variant='tertiary'].__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__) .button[aria-disabled='false']{--content-color:var(--main-hover-color);--bg-color:var(--text-hover-color)}:host([dropdown]) .open{display:none}:host([dropdown]) .active .open{display:inline-block}:host([dropdown]) .active .close{display:none}:host .active.button{--bg-color:var(--main-hover-color);--border-color:var(--main-hover-color)}:host([variant='secondary']) .active.button{--content-color:var(--fp-color-content-primary-contrast);--bg-color:var(--main-hover-color)}:host([variant='tertiary']) .active.button{--content-color:var(--main-color);--bg-color:var(--fp-color-tertiary);--border-color:transparent}`,T=E;var t=class extends y{constructor(){super(...arguments);this.variant="primary";this.kind="default";this.size="medium";this.loading=!1;this.disabled=!1;this.target="_self";this.dropdown=!1;this.active=!1}static get styles(){return[T]}get _isActive(){return this.active}connectedCallback(){super.connectedCallback(),this.form=this.closest("form")}caretTemplate(){return r` <fp-icon class="open" name="chevron-up"></fp-icon>
<fp-icon class="close" name="chevron-down"></fp-icon>`}_handleClick(){this.type==="submit"&&this.form&&x(this.form),this.onClick("Click event fired!")}focus(){this.button.focus()}get _hasIconSlot(){return this.querySelector(':scope > [slot="icon"]')!==null}get _hasDefaultSlot(){return[...this.childNodes].some(a=>{var c;let s=a.nodeType;return s===a.TEXT_NODE&&((c=a.textContent)==null?void 0:c.trim())!==""||s===a.ELEMENT_NODE&&!a.hasAttribute("slot")})}render(){let l=this.loading||this.disabled,a=this.loading&&this.loadingLabel?this.loadingLabel:r`<slot></slot>`,s=!!this.href,c=this.icon?r`<fp-icon name=${this.icon}></fp-icon>`:"",d=this.loading?r`<fp-icon class="loading-icon" name="loading"></fp-icon>`:"",v=r`<slot name="icon">${c}</slot> <span class="label">${a}</span>`,S=this.dropdown?this.caretTemplate():"",f=_({button:!0,"has-icon":this.icon||this._hasIconSlot,"has-content":this._hasDefaultSlot,active:!s&&this._isActive});return s?r`<a
class=${f}
aria-disabled="${n(l)}"
aria-label="${n(this.label)}"
href=${n(this.href)}
target=${n(this.target)}
role="button"
>${d} ${v}
</a>`:r`<button
class=${f}
aria-disabled="${n(l)}"
aria-label="${n(this.label)}"
?disabled=${l}
="${this._handleClick}"
>
${d} ${v} ${S}
</button>`}};o([e({type:String,reflect:!0})],t.prototype,"variant",2),o([e({type:String,reflect:!0})],t.prototype,"kind",2),o([e({type:String,reflect:!0})],t.prototype,"size",2),o([e({type:String})],t.prototype,"label",2),o([e({type:String,attribute:"loading-label"})],t.prototype,"loadingLabel",2),o([e({type:Boolean,reflect:!0})],t.prototype,"loading",2),o([e({type:Boolean,reflect:!0})],t.prototype,"disabled",2),o([e({type:String})],t.prototype,"href",2),o([e({type:String})],t.prototype,"icon",2),o([e({type:String})],t.prototype,"target",2),o([e({type:String})],t.prototype,"type",2),o([e({type:Boolean})],t.prototype,"dropdown",2),o([b({})],t.prototype,"active",2),o([m(".button")],t.prototype,"button",2),o([g("fp-click")],t.prototype,"onClick",2),t=o([u("fp-button")],t);export{x as a,t as b};
//# sourceMappingURL=chunk-7XLYVQDH.js.map