@eunomia/elements 1.0.0-beta.3 → 1.0.0-beta.4

package/dist/cdn/components/chunks/chunk-ZKPCO5RB.js

@@ -1,262 +0,0 @@
-import{b as g,c as S,d as C,e as E,f as b}from"./chunk-CEDHJUUH.js";import{a as L}from"./chunk-UP4M7TER.js";import{a as $}from"./chunk-A4EQSU36.js";import{a as f}from"./chunk-5EVP7YNE.js";import{a as r,f as x,g as M,h as l,i as k,j as y,l as O,n as p,p as d,s as A}from"./chunk-XH6NREVZ.js";var v=class w extends Event{static{this.eventName="eunselect"}constructor(T){super(w.eventName,{bubbles:!0,composed:!1}),this.key=T}};var P=M`
-  :host {
-    display: inline-block;
-  }
-  #menu {
-    position: fixed;
-    top: var(--_menuTop, 0);
-    left: var(--_menuLeft, 0);
-    min-width: var(--_menuWidth, auto);
-    margin: 0;
-    padding: var(--eun-space-xs, 4px) 0;
-    list-style: none;
-    max-height: 260px;
-    overflow-y: auto;
-    font-family: var(--eun-font-family, "Mulish", sans-serif);
-    font-size: var(--eun-fontSize-s, 14px);
-    color: var(--dropdown-menu-color, var(--eun-text-color, #071621));
-    background: var(
-      --dropdown-menu-background,
-      var(--eun-surface-color, #ffffff)
-    );
-    border: var(--eun-borderWidth-s, 1px) solid
-      var(--dropdown-menu-border-color, var(--eun-border-color, #dee0e7));
-    border-radius: var(
-      --dropdown-menu-border-radius,
-      var(--eun-borderRadius-m, 8px)
-    );
-    box-shadow: var(
-      --dropdown-menu-shadow,
-      var(
-        --eun-shadow-m,
-        0 10px 15px -3px rgba(0, 0, 0, 0.1),
-        0 4px 6px -2px rgba(0, 0, 0, 0.05)
-      )
-    );
-    opacity: 0;
-    transform: translate(var(--_menuOffsetX, 0px), var(--_menuOffsetY, -4px))
-      scale(0.96);
-  }
-  #menu:not(:popover-open) {
-    display: none;
-  }
-  #menu:popover-open {
-    opacity: 1;
-    transform: translate(0, 0) scale(1);
-  }
-
-  #menu li,
-  .submenu li {
-    display: flex;
-    align-items: center;
-    gap: var(--eun-space-s, 8px);
-    padding: var(--eun-space-s, 8px) var(--eun-space-m, 16px);
-    cursor: pointer;
-    white-space: nowrap;
-    /*
-     * Fixed width/style, transparent by default : only outline-color
-     * itself needs to change on :focus-visible below, which is what makes
-     * it animatable in the first place — a style like "none" can't smoothly
-     * transition to "solid", only a color change can.
-     */
-    outline: 2px solid transparent;
-    outline-offset: -2px;
-    transition:
-      background 0.3s ease-out,
-      outline-color 0.3s ease-out;
-  }
-  #menu li:hover:not([aria-disabled="true"]),
-  #menu li:focus-visible:not([aria-disabled="true"]),
-  #menu li.highlighted:not([aria-disabled="true"]),
-  .submenu li:hover:not([aria-disabled="true"]),
-  .submenu li:focus-visible:not([aria-disabled="true"]),
-  .submenu li.highlighted:not([aria-disabled="true"]) {
-    background: linear-gradient(
-      90deg,
-      var(--dropdown-menu-accent-color, var(--eun-color-primary-500, #3d6fff))
-        2px,
-      var(--dropdown-menu-hover-background, var(--eun-content-hover, #edeff0))
-        2px,
-      var(--dropdown-menu-hover-background, var(--eun-content-hover, #edeff0))
-    );
-  }
-  #menu li:focus-visible,
-  .submenu li:focus-visible {
-    outline-color: var(
-      --dropdown-menu-accent-color,
-      var(--eun-color-primary-500, #3d6fff)
-    );
-  }
-  #menu li[aria-disabled="true"],
-  .submenu li[aria-disabled="true"] {
-    cursor: not-allowed;
-    color: var(
-      --dropdown-menu-disabled-color,
-      var(--eun-text-disabled-color, #8d93aa)
-    );
-  }
-  #menu li.active,
-  .submenu li.active {
-    font-weight: var(--eun-fontWeight-l, 700);
-    color: var(
-      --dropdown-menu-accent-color,
-      var(--eun-color-primary-500, #3d6fff)
-    );
-  }
-  #menu li .option-icon,
-  .submenu li .option-icon,
-  #menu li .submenu-chevron,
-  .submenu li .submenu-chevron {
-    flex-shrink: 0;
-  }
-  #menu li .submenu-chevron,
-  .submenu li .submenu-chevron {
-    --icon-color: var(
-      --dropdown-menu-description-color,
-      var(--eun-text-secondary, #484e61)
-    );
-    margin-right: calc(-1 * var(--eun-space-s));
-  }
-  #menu li .option-text,
-  .submenu li .option-text {
-    display: flex;
-    flex-direction: column;
-    flex: 1 1 auto;
-    min-width: 0;
-  }
-  #menu li .title,
-  .submenu li .title {
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-  #menu li .description,
-  .submenu li .description {
-    font-size: var(--eun-fontSize-xs, 12px);
-    color: var(
-      --dropdown-menu-description-color,
-      var(--eun-text-secondary, #484e61)
-    );
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-  .submenu {
-    position: fixed;
-    top: var(--_submenuTop, 0);
-    left: var(--_submenuLeft, 0);
-    margin: 0;
-    padding: var(--eun-space-xs, 4px) 0;
-    list-style: none;
-    min-width: 160px;
-    max-height: 260px;
-    overflow-y: auto;
-    font-family: var(--eun-font-family, "Mulish", sans-serif);
-    font-size: var(--eun-fontSize-s, 14px);
-    color: var(--dropdown-menu-color, var(--eun-text-color, #071621));
-    background: var(
-      --dropdown-menu-background,
-      var(--eun-surface-color, #ffffff)
-    );
-    border: var(--eun-borderWidth-s, 1px) solid
-      var(--dropdown-menu-border-color, var(--eun-border-color, #dee0e7));
-    border-radius: var(
-      --dropdown-menu-border-radius,
-      var(--eun-borderRadius-m, 8px)
-    );
-    box-shadow: var(
-      --dropdown-menu-shadow,
-      var(
-        --eun-shadow-m,
-        0 10px 15px -3px rgba(0, 0, 0, 0.1),
-        0 4px 6px -2px rgba(0, 0, 0, 0.05)
-      )
-    );
-    opacity: 0;
-    transform: translate(var(--_submenuOffsetX, -4px), 0) scale(0.96);
-  }
-  .submenu:not(:popover-open) {
-    display: none;
-  }
-  .submenu:popover-open {
-    opacity: 1;
-    transform: translate(0, 0) scale(1);
-  }
-`,R=P;var K="eun-dropdown-button",s=class extends A{constructor(){super(...arguments);this.options=[];this.disabledKeys=[];this.disabled=!1;this.size="m";this.rounded=!1;this.appearance="fill";this.placement="bottom-start";this.open=!1;this.openSubmenuKey=null;this.handleReposition=()=>{this.positionMenu(),this.repositionOpenSubmenu()};this.skipTriggerRefocus=!1;this.handlePopoverToggle=e=>{if(e.newState==="open"){this.open=!0,this.positionMenu(),this.updateComplete.then(()=>g(this.menuEntries,0)),window.addEventListener("resize",this.handleReposition),window.addEventListener("scroll",this.handleReposition,!0);return}this.open=!1,this.closeSubmenu(),window.removeEventListener("resize",this.handleReposition),window.removeEventListener("scroll",this.handleReposition,!0),this.skipTriggerRefocus?this.skipTriggerRefocus=!1:this.triggerEl?.focus()}}disconnectedCallback(){window.removeEventListener("resize",this.handleReposition),window.removeEventListener("scroll",this.handleReposition,!0),clearTimeout(this.openSubmenuTimer),clearTimeout(this.closeSubmenuTimer),super.disconnectedCallback?.()}isOptionDisabled(e){return!!e.disabled||this.disabledKeys.includes(e.key)}get hasStartSlotContent(){return this.querySelector(':scope > [slot="start"]')!==null}openMenu(){this.disabled||this.updateComplete.then(()=>{let e=this.menuEl;if(!e)return;let t=this.menuAnimation!==void 0;this.menuAnimation?.cancel(),this.menuAnimation=void 0;let i=!e.matches(":popover-open");i&&e.showPopover(),(i||t)&&this.playMenuOpenAnimation(e)})}playMenuOpenAnimation(e){e.style.removeProperty("pointer-events");let t=b(e);if(t===0)return;let i=e.style.getPropertyValue("--_menuOffsetX")||"0px",n=e.style.getPropertyValue("--_menuOffsetY")||"-4px";this.menuAnimation=e.animate([{opacity:0,transform:`translate(${i}, ${n}) scale(0.96)`},{opacity:1,transform:"translate(0, 0) scale(1)"}],{duration:t,easing:"ease",fill:"forwards"})}closeMenu(){let e=this.menuEl;this.menuAnimation?.cancel(),this.menuAnimation=void 0,e?.matches(":popover-open")&&this.playMenuCloseAnimation(e)}playMenuCloseAnimation(e){e.style.pointerEvents="none";let t=b(e),i=e.style.getPropertyValue("--_menuOffsetX")||"0px",n=e.style.getPropertyValue("--_menuOffsetY")||"-4px";if(t===0){e.hidePopover();return}let o=e.animate([{opacity:1,transform:"translate(0, 0) scale(1)"},{opacity:0,transform:`translate(${i}, ${n}) scale(0.96)`}],{duration:t,easing:"ease",fill:"forwards"});this.menuAnimation=o,o.finished.then(()=>{this.menuAnimation===o&&(this.menuAnimation=void 0),e.hidePopover()}).catch(()=>{})}closeMenuOnTabAway(){this.skipTriggerRefocus=!0,this.closeMenu()}tabAway(){this.closeMenuOnTabAway()}get menuEntries(){return[...Array.from(this.menuEl?.querySelectorAll(":scope > li")??[]),...this.itemsList??[]]}entryKey(e){return e.tagName==="LI"?e.dataset.key??null:e.key??null}closeOtherSubmenus(e){if(!this.openSubmenuKey||this.openSubmenuKey===e)return;let t=this.menuEntries.find(i=>this.entryKey(i)===this.openSubmenuKey);t?.tagName==="LI"?this.closeSubmenu():(t?.closeSubmenu(),this.openSubmenuKey=null)}notifySubmenuOpened(e){this.openSubmenuKey=e}notifySubmenuClosed(e){this.openSubmenuKey===e&&(this.openSubmenuKey=null)}dispatchSelect(e){this.dispatchEvent(new v(e)),this.closeMenu()}selectByKey(e){this.dispatchSelect(e)}getEffectivePlacement(e,t){let n=document.documentElement.clientWidth,o=document.documentElement.clientHeight;if(this.placement==="left"||this.placement==="right"){let h=e.right+4+t.width<=n,c=e.left-4-t.width>=0;return this.placement==="right"&&!h&&c?"left":this.placement==="left"&&!c&&h?"right":this.placement}let m=e.bottom+4+t.height<=o,a=e.top-4-t.height>=0,u=this.placement.startsWith("top");return u&&!a&&m?this.placement.replace("top","bottom"):!u&&!m&&a?this.placement.replace("bottom","top"):this.placement}positionMenu(){if(!this.triggerEl||!this.menuEl)return;let e=4,t=document.documentElement.clientWidth,i=document.documentElement.clientHeight,n=this.triggerEl.getBoundingClientRect(),o=this.menuEl.getBoundingClientRect(),m=this.getEffectivePlacement(n,o),a,u,h=0,c=0;switch(m){case"top":a=n.top-o.height-e*3,u=n.left+n.width/2-o.width/2,c=4;break;case"top-start":a=n.top-o.height-e*3,u=n.left,c=4;break;case"top-end":a=n.top-o.height-e*3,u=n.right-o.width,c=4;break;case"right":a=n.top+n.height/2-o.height/2,u=n.right+e,h=-4;break;case"bottom":a=n.bottom+e,u=n.left+n.width/2-o.width/2,c=-4;break;case"bottom-end":a=n.bottom+e,u=n.right-o.width,c=-4;break;case"left":a=n.top+n.height/2-o.height/2,u=n.left-o.width-e,h=4;break;default:a=n.bottom+e,u=n.left,c=-4;break}m==="left"||m==="right"?a=S(a,o.height,i,e):u=S(u,o.width,t,e),this.menuEl.style.setProperty("--_menuTop",`${a}px`),this.menuEl.style.setProperty("--_menuLeft",`${u}px`),this.menuEl.style.setProperty("--_menuWidth",`${n.width}px`),this.menuEl.style.setProperty("--_menuOffsetX",`${h}px`),this.menuEl.style.setProperty("--_menuOffsetY",`${c}px`)}getSubmenuElements(e){let t=this.menuEl?.querySelector(`li[data-key="${CSS.escape(e)}"]`),i=t?.querySelector(":scope > ul");if(!(!t||!i))return{li:t,submenu:i}}positionSubmenu(e,t){let{top:n,left:o,offsetX:m}=C(e.getBoundingClientRect(),t.getBoundingClientRect(),4);t.style.setProperty("--_submenuTop",`${n}px`),t.style.setProperty("--_submenuLeft",`${o}px`),t.style.setProperty("--_submenuOffsetX",`${m}px`)}repositionOpenSubmenu(){if(!this.openSubmenuKey)return;let e=this.menuEntries.find(t=>this.entryKey(t)===this.openSubmenuKey);if(e?.tagName==="LI"){let t=this.getSubmenuElements(this.openSubmenuKey);t&&this.positionSubmenu(t.li,t.submenu)}else e?.repositionSubmenu()}openSubmenu(e){if(!e.options?.length||this.isOptionDisabled(e))return;clearTimeout(this.openSubmenuTimer),clearTimeout(this.closeSubmenuTimer),this.closeOtherSubmenus(e.key);let t=this.getSubmenuElements(e.key)?.submenu;if(!t)return;let i=this.submenuAnimation!==void 0;this.submenuAnimation?.cancel(),this.submenuAnimation=void 0;let n=!t.matches(":popover-open");!n&&!i||(n&&t.showPopover(),this.playSubmenuOpenAnimation(t))}playSubmenuOpenAnimation(e){e.style.removeProperty("pointer-events");let t=b(e);if(t===0)return;let i=e.style.getPropertyValue("--_submenuOffsetX")||"-4px";this.submenuAnimation=e.animate([{opacity:0,transform:`translate(${i}, 0) scale(0.96)`},{opacity:1,transform:"translate(0, 0) scale(1)"}],{duration:t,easing:"ease",fill:"forwards"})}playSubmenuCloseAnimation(e){e.style.pointerEvents="none";let t=b(e),i=e.style.getPropertyValue("--_submenuOffsetX")||"-4px";if(t===0){e.hidePopover();return}let n=e.animate([{opacity:1,transform:"translate(0, 0) scale(1)"},{opacity:0,transform:`translate(${i}, 0) scale(0.96)`}],{duration:t,easing:"ease",fill:"forwards"});this.submenuAnimation=n,n.finished.then(()=>{this.submenuAnimation===n&&(this.submenuAnimation=void 0),e.hidePopover()}).catch(()=>{})}closeSubmenu(){if(clearTimeout(this.openSubmenuTimer),clearTimeout(this.closeSubmenuTimer),!this.openSubmenuKey)return;let e=this.openSubmenuKey,t=this.menuEntries.find(i=>this.entryKey(i)===e);if(t?.tagName==="LI"){let i=this.getSubmenuElements(e)?.submenu;this.submenuAnimation?.cancel(),this.submenuAnimation=void 0,i?.matches(":popover-open")&&this.playSubmenuCloseAnimation(i)}else t?.closeSubmenu(),this.openSubmenuKey=null}handleSubmenuToggle(e,t){let i=e,n=e.currentTarget;if(i.newState==="open"){this.notifySubmenuOpened(t.key);let o=n.parentElement;o&&this.positionSubmenu(o,n),this.updateComplete.then(()=>{let m=Array.from(n.querySelectorAll(":scope > li"));g(m,0)});return}this.notifySubmenuClosed(t.key)}closeSubmenuAndRefocus(e){this.closeSubmenu(),this.updateComplete.then(()=>{this.menuEl?.querySelector(`li[data-key="${CSS.escape(e.key)}"]`)?.focus()})}toggleSubmenu(e){this.openSubmenuKey===e.key?this.closeSubmenu():this.openSubmenu(e)}scheduleCloseSubmenu(e){clearTimeout(this.closeSubmenuTimer),this.closeSubmenuTimer=setTimeout(()=>{if(this.openSubmenuKey!==e)return;let t=this.getSubmenuElements(e)?.submenu;this.submenuAnimation?.cancel(),this.submenuAnimation=void 0,t?.matches(":popover-open")&&this.playSubmenuCloseAnimation(t)},150)}scheduleCloseTrackedSubmenu(){clearTimeout(this.closeSubmenuTimer),this.closeSubmenuTimer=setTimeout(()=>{this.closeOtherSubmenus(null)},150)}handleItemMouseEnter(e){if(clearTimeout(this.closeSubmenuTimer),!e.options?.length){this.openSubmenuKey&&this.scheduleCloseTrackedSubmenu();return}this.isOptionDisabled(e)||this.openSubmenuKey===e.key||(clearTimeout(this.openSubmenuTimer),this.openSubmenuTimer=setTimeout(()=>this.openSubmenu(e),150))}handleItemMouseLeave(e){clearTimeout(this.openSubmenuTimer),e.options?.length&&this.scheduleCloseSubmenu(e.key)}handleSubmenuMouseEnter(){clearTimeout(this.closeSubmenuTimer)}handleSubmenuMouseLeave(e){this.scheduleCloseSubmenu(e)}handleToggleClick(){this.open?this.closeMenu():this.openMenu()}selectOption(e){this.isOptionDisabled(e)||this.dispatchSelect(e.key)}handleItemClick(e){if(!this.isOptionDisabled(e)){if(e.options?.length){this.toggleSubmenu(e);return}this.selectOption(e)}}renderOptionContent(e){return p`
-      ${e.icon?p`<eun-icon
-            class="option-icon"
-            name=${e.icon}
-            size="16"
-          ></eun-icon>`:d}
-      <div class="option-text">
-        <span class="title">${e.label}</span>
-        ${e.description?p`<span class="description">${e.description}</span>`:d}
-      </div>
-    `}renderOption(e){let t=!!e.options?.length,i=t&&this.openSubmenuKey===e.key,n=this.isOptionDisabled(e);return p`
-      <li
-        role="menuitem"
-        tabindex=${n?d:"-1"}
-        data-key=${e.key}
-        class=${$({highlighted:i,active:!!e.active})}
-        aria-disabled=${n?"true":"false"}
-        aria-haspopup=${f(t?"menu":void 0)}
-        aria-expanded=${f(t?i?"true":"false":void 0)}
-        @click=${()=>this.handleItemClick(e)}
-        @keydown=${o=>E(o,this.menuEntries,{onSelect:()=>this.selectOption(e),onOpenSubmenu:()=>this.openSubmenu(e),onTabAway:()=>this.closeMenuOnTabAway()})}
-        @mouseenter=${()=>this.handleItemMouseEnter(e)}
-        @mouseleave=${()=>this.handleItemMouseLeave(e)}
-      >
-        ${this.renderOptionContent(e)}
-        ${t?p`<eun-icon
-              class="submenu-chevron"
-              name="chevron_right"
-              size="16"
-            ></eun-icon>`:d}
-        ${t?this.renderSubmenu(e):d}
-      </li>
-    `}renderSubmenu(e){let t=e.options??[];return p`
-      <ul
-        class="submenu"
-        role="menu"
-        popover="auto"
-        @toggle=${i=>this.handleSubmenuToggle(i,e)}
-        @mouseenter=${()=>this.handleSubmenuMouseEnter()}
-        @mouseleave=${()=>this.handleSubmenuMouseLeave(e.key)}
-      >
-        ${t.map(i=>p`
-            <li
-              role="menuitem"
-              tabindex=${this.isOptionDisabled(i)?d:"-1"}
-              aria-disabled=${this.isOptionDisabled(i)?"true":"false"}
-              @click=${()=>this.selectOption(i)}
-              @keydown=${n=>{let o=n.currentTarget.closest("ul"),m=Array.from(o?.querySelectorAll(":scope > li")??[]);E(n,m,{onSelect:()=>this.selectOption(i),onClose:()=>this.closeSubmenuAndRefocus(e),onTabAway:()=>this.closeMenuOnTabAway()})}}
-            >
-              ${this.renderOptionContent(i)}
-            </li>
-          `)}
-      </ul>
-    `}renderTriggerStartContent(){if(this.hasStartSlotContent)return p`<slot name="start" slot="start"></slot>`;let e=L(this.icon,this.severity);return e?p`<eun-icon slot="start" name=${e} size="16"></eun-icon>`:d}render(){return p`
-      <eun-button
-        id="trigger"
-        type="button"
-        size=${this.size}
-        variant=${f(this.variant)}
-        appearance=${this.appearance}
-        ?rounded=${this.rounded}
-        ?disabled=${this.disabled}
-        aria-haspopup="menu"
-        aria-expanded=${this.open}
-        aria-label=${f(this.ariaLabel??void 0)}
-        @click=${this.handleToggleClick}
-      >
-        ${this.renderTriggerStartContent()}
-        <slot>${this.label}</slot>
-      </eun-button>
-      <ul
-        id="menu"
-        role="menu"
-        popover="auto"
-        @toggle=${this.handlePopoverToggle}
-      >
-        ${this.options.map(e=>this.renderOption(e))}
-        <slot name="items"></slot>
-      </ul>
-    `}};s.styles=R,r([l()],s.prototype,"label",2),r([l()],s.prototype,"icon",2),r([l({reflect:!0})],s.prototype,"severity",2),r([l({type:Array,reflect:!0})],s.prototype,"options",2),r([l({type:Array,reflect:!0,attribute:"disabled-keys"})],s.prototype,"disabledKeys",2),r([l({type:Boolean,reflect:!0})],s.prototype,"disabled",2),r([l({reflect:!0})],s.prototype,"size",2),r([l({reflect:!0})],s.prototype,"variant",2),r([l({type:Boolean,reflect:!0})],s.prototype,"rounded",2),r([l({reflect:!0})],s.prototype,"appearance",2),r([l({reflect:!0})],s.prototype,"placement",2),r([l({type:Boolean,reflect:!0})],s.prototype,"open",2),r([k()],s.prototype,"openSubmenuKey",2),r([O({slot:"items"})],s.prototype,"itemsList",2),r([y("#trigger")],s.prototype,"triggerEl",2),r([y("#menu")],s.prototype,"menuEl",2),s=r([x(K)],s);export{K as a,s as b};