finpro/dist/chunk-KF4KVTMZ.js

Design System

import{a as s}from"./chunk-23UFIOHV.js";import{a,b as r,f as n,g as l,h as i}from"./chunk-GBPY57YZ.js";import{a as e}from"./chunk-NZ3RGSR6.js";var v=a`:host{position:relative;display:flex;align-items:center;background-color:var(--fp-color-primary-background)}.container{--title-padding-vertical:var(--fp-size-l);--title-padding-horizontal:var(--fp-size-3xl);--title-color:var(--fp-color-secondary);--caption-color:var(--fp-color-secondary);--icon-color:var(--fp-color-secondary);--border-bottom-width:var(--fp-size-5xs);--border-left-space:var(--fp-size-3xl);--font-title:var(--fp-font-title-3-medium);--font-caption:var(--fp-font-title-4-regular);--tab-right-padding:var(--fp-size-3xl);--help-container-width:var(--fp-size-5xl);--tab-height:calc(var(--fp-size-6xl) + var(--fp-size-m));display:flex;border:0;cursor:pointer;background-color:initial;width:max-content;height:var(--tab-height);padding:0 var(--tab-right-padding)}.container::after{position:absolute;content:'';right:0;top:var(--fp-size-l);height:calc(100% - var(--fp-size-5xl));border-right:1px solid var(--fp-color-tertiary-hover)}:host(:last-of-type) .container::after{border-right:0}:host .container::before{content:'';position:absolute;opacity:0;bottom:calc(-1 * var(--fp-size-5xs));left:var(--border-left-space);width:calc(100% - var(--fp-size-xxl));border-bottom:var(--border-bottom-width) solid var(--fp-color-primary)}:host([selected]:not([disabled])) .container::before{opacity:1}:host(:hover) .container,:host([selected]) .container,:host(.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__) .container,:host([selected]) .container{--title-color:var(--fp-color-primary);--icon-color:var(--fp-color-primary)}:host([disabled]) .container{cursor:not-allowed;--title-color:var(--fp-color-content-passive);--caption-color:var(--fp-color-content-passive);--icon-color:var(--fp-color-content-passive)}:host(:hover) :where(.title,.icon),:host(.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__) :where(.title,.icon){transition:color 120ms ease-out}:host([selected]) .border-bottom{display:inline-block}:host([disabled]) .container:hover,:host([disabled]) .container.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__{cursor:not-allowed}:host([help-text]) button{padding-right:0}.tab-button{width:max-content}.help-container{display:flex;justify-content:center;align-items:center;width:var(--help-container-width);height:100%;font-size:var(--fp-font-size-m);pointer-events:visible;padding-right:var(--tab-right-padding)}fp-tooltip{--fp-tooltip-position:fixed}.title{display:flex;align-items:center;justify-content:center;font:var(--font-title);color:var(--title-color);line-height:var(--fp-size-l);white-space:nowrap}.title-container{display:flex;align-items:center;justify-content:center;flex-direction:column;margin:auto}.badge-container{padding-left:var(--fp-size-4xs);display:flex;margin-bottom:1px}.caption{font:var(--font-caption);line-height:var(--fp-size-s);color:var(--caption-color);text-align:center;margin-top:var(--fp-size-5xs)}.icon{display:flex;color:var(--icon-color);font-size:var(--fp-font-size-l);margin-right:var(--fp-size-3xs);margin-bottom:1px}:host([notify]) .title::after{content:'';height:var(--fp-size-2xs);width:var(--fp-size-2xs);border-radius:var(--fp-size-4xs);margin-left:var(--fp-size-4xs);background-color:var(--fp-color-danger);margin-bottom:1px}`,c=v;var t=class extends n{constructor(){super(...arguments);this.icon="";this.notify=!1;this.badge="";this.selected=!1;this.disabled=!1}static get styles(){return[c]}connectedCallback(){super.connectedCallback(),this.updateComplete.then(()=>{var o;this.tabGroup=this.closest("fp-tab-group"),(o=this.tabGroup)==null||o.registerTab(this)})}disconnectedCallback(){var o;super.disconnectedCallback(),(o=this.tabGroup)==null||o.unregisterTab(this)}select(){this.selected=!0}updated(o){o.has("selected")&&this.selected&&this._onSelect(this.name)}render(){let o=r` <slot></slot>`,p=this.helpText?r` <div class="help-container">
            <fp-tooltip>
              <fp-button
                slot="tooltip-trigger"
                icon="info"
                variant="tertiary"
                kind="neutral"
                label="${this.helpText}"
              ></fp-button>
              ${this.helpText}
            </fp-tooltip>
          </div>`:null,d=this.icon?r` <div class="icon">
            <fp-icon name="${this.icon}"></fp-icon>
          </div>`:null,f=this.badge?r` <div class="badge-container">
            <fp-badge size="small">${this.badge}</fp-badge>
          </div>`:null,h=this.caption?r` <div class="caption">${this.caption}</div>`:null;return r`
        <button
          ?disabled="${this.disabled}"
          role="tab"
          class="container"
          @click="${()=>this.select()}"
        >
          <div class="title-container">
            <div class="title">${d} ${o} ${f}</div>
            ${h}
          </div>
          ${p}
        </button>
      `}};e([i({type:String})],t.prototype,"caption",2),e([i({type:String,reflect:!0})],t.prototype,"name",2),e([i({type:String,attribute:"help-text",reflect:!0})],t.prototype,"helpText",2),e([i({type:String})],t.prototype,"icon",2),e([i({type:Boolean,reflect:!0})],t.prototype,"notify",2),e([i({type:String})],t.prototype,"badge",2),e([i({type:Boolean,reflect:!0})],t.prototype,"selected",2),e([i({type:Boolean,reflect:!0})],t.prototype,"disabled",2),e([s("fp-tab-selected")],t.prototype,"_onSelect",2),t=e([l("fp-tab")],t);export{t as a};
//# sourceMappingURL=chunk-KF4KVTMZ.js.map