UNPKG

finpro

Version:
18 lines (17 loc) 4.71 kB
import{a as s}from"./chunk-233U3OM4.js";import{b as d}from"./chunk-HBTBCTHY.js";import{a as m}from"./chunk-2M6HTKCC.js";import{a as c}from"./chunk-JA3VZI2D.js";import{a as n,b as o,g as r,h as a,j as l}from"./chunk-GBPY57YZ.js";import{a as t}from"./chunk-NZ3RGSR6.js";var u=n`:host{display:block}:host([inert]){display:none}.menu-item{--font:var(--fp-font-title-3-medium);--padding:var(--fp-size-m);position:relative;display:flex;align-items:stretch;font:var(--font);color:var(--content-color);padding:var(--padding) var(--padding);user-select:none;white-space:nowrap;cursor:pointer}.menu-item.menu-item--disabled{outline:0;opacity:.5;cursor:not-allowed}.menu-item .menu-item__label{flex:1 1 auto;display:inline-flex;align-items:center;gap:8px}.menu-item .menu-item__prefix{flex:0 0 auto;display:flex;align-items:center}.menu-item .menu-item__prefix::slotted(*){margin-inline-end:var(--fp-size-xs)}.menu-item .menu-item__suffix{flex:0 0 auto;display:flex;align-items:center}.menu-item .menu-item__suffix::slotted(*){margin-inline-start:var(--fp-size-xs)}:host(:focus-visible){outline:0}:host(:hover:not([aria-disabled='true'])) .menu-item,:host(.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__:not([aria-disabled='true'])) .menu-item{background-color:var(--fp-color-tertiary);color:var(--fp-color-content-tertiary)}:host(:focus-visible) .menu-item{outline:0;background-color:var(--fp-color-secondary);color:var(--fp-color-content-secondary);opacity:1}.menu-item .menu-item__check,.menu-item .menu-item__chevron{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:1.5em;visibility:hidden}.menu-item--checked .menu-item__check,.menu-item--has-submenu .menu-item__chevron{visibility:visible}@media(forced-colors:active){:host(:hover:not([aria-disabled='true'])) .menu-item,:host(:focus-visible) .menu-item,:host(.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__:not([aria-disabled='true'])) .menu-item,:host(:focus-visible) .menu-item{outline:dashed 1px SelectedItem;outline-offset:-1px}}`,h=u;var e=class extends c{constructor(){super(...arguments);this.type="normal";this.checked=!1;this.value="";this.disabled=!1}static get styles(){return[h]}connectedCallback(){super.connectedCallback(),this.handleHostClick=this.handleHostClick.bind(this),this.addEventListener("click",this.handleHostClick)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",this.handleHostClick)}handleDefaultSlotChange(){let i=this.getTextLabel();if(typeof this.cachedTextLabel>"u"){this.cachedTextLabel=i;return}i!==this.cachedTextLabel&&(this.cachedTextLabel=i,this.emit("slotchange",{bubbles:!0,composed:!1,cancelable:!1}))}handleHostClick(i){this.disabled&&(i.preventDefault(),i.stopImmediatePropagation())}handleCheckedChange(){if(this.checked&&this.type!=="checkbox"){this.checked=!1,console.error('The checked attribute can only be used on menu items with type="checkbox"',this);return}this.type==="checkbox"?this.setAttribute("aria-checked",this.checked?"true":"false"):this.removeAttribute("aria-checked")}handleDisabledChange(){this.setAttribute("aria-disabled",this.disabled?"true":"false")}handleTypeChange(){this.type==="checkbox"?(this.setAttribute("role","menuitemcheckbox"),this.setAttribute("aria-checked",this.checked?"true":"false")):(this.setAttribute("role","menuitem"),this.removeAttribute("aria-checked"))}getTextLabel(){return d(this.defaultSlot)}render(){return o` <div part="base" class=${m({"menu-item":!0,"menu-item--checked":this.checked,"menu-item--disabled":this.disabled,"menu-item--has-submenu":!1})} > <span part="checked-icon" class="menu-item__check"> <fp-icon name="check" library="system" aria-hidden="true"></fp-icon> </span> <slot name="prefix" part="prefix" class="menu-item__prefix"></slot> <slot part="label" class="menu-item__label" @slotchange=${this.handleDefaultSlotChange}></slot> <slot name="suffix" part="suffix" class="menu-item__suffix"></slot> <span class="menu-item__chevron"> <fp-icon name="chevron-right" library="system" aria-hidden="true"></fp-icon> </span> </div> `}};t([l("slot:not([name])")],e.prototype,"defaultSlot",2),t([l(".menu-item")],e.prototype,"menuItem",2),t([a()],e.prototype,"type",2),t([a({type:Boolean,reflect:!0})],e.prototype,"checked",2),t([a()],e.prototype,"value",2),t([a({type:Boolean,reflect:!0})],e.prototype,"disabled",2),t([s("checked")],e.prototype,"handleCheckedChange",1),t([s("disabled")],e.prototype,"handleDisabledChange",1),t([s("type")],e.prototype,"handleTypeChange",1),e=t([r("fp-menu-item")],e);export{e as a}; //# sourceMappingURL=chunk-U6V3Y62T.js.map