@coderundebug/ui-web/ui-menu-button.js

A collection of UI web components that can be used in any web project.

/* By Stephen Paul Hassall (web: https://coderundebug.com) */
import{UiTools as e}from"./ui-tools.js";export class UiMenuButton extends HTMLElement{static get formAssociated(){return!0}constructor(){super(),this.attachShadow({mode:"open",delegatesFocus:!0}),this.shadowRoot.innerHTML=UiMenuButton.uiHtml,this.shadowRoot.adoptedStyleSheets=[UiMenuButton.uiCssStyleSheet],this.attachInternals&&(this.t=this.attachInternals()),this.o=this.shadowRoot.querySelector("button"),this.i=this.i.bind(this)}connectedCallback(){this.u(),this.addEventListener("click",this.i)}disconnectedCallback(){this.removeEventListener("click",this.i)}get disabled(){return!1!==this.hasAttribute("disabled")}set disabled(e){!0===e?this.setAttribute("disabled",""):this.removeAttribute("disabled")}attributeChangedCallback(e,n,t){"indent"===e&&this.l()}static get observedAttributes(){return["indent"]}formDisabledCallback(e){!0===e?this.o.setAttribute("disabled",""):this.o.removeAttribute("disabled")}l(){if(!1===this.hasAttribute("indent"))this.o.removeAttribute("style");else{let e=this.getAttribute("indent");e||(e=1);const n=parseInt(e);if(n<1||n>20)return;this.o.setAttribute("style","--ui-menu-indent: "+e.toString()+";")}}i(){if(!0===this.h())return;const e=this.p();e&&!0!==this.hasAttribute("keep-open")&&e.close()}h(){let e=this;for(;;){if("ui-popup"===e.tagName.toLowerCase())return!1;if(!0===e.hasAttribute("slot")&&"trigger"===e.getAttribute("slot"))return!0;if(e=e.parentElement,null===e)break}return!1}u(){const e=this.closest("ui-popup-menu, ui-side-menu, ui-content-menu, ui-header-menu");this.o.classList.remove("inside-popup-menu"),this.o.classList.remove("inside-side-menu"),this.o.classList.remove("inside-content-menu"),this.o.classList.remove("inside-header-menu"),e&&("UI-POPUP-MENU"===e.tagName&&this.o.classList.add("inside-popup-menu"),"UI-SIDE-MENU"===e.tagName&&this.o.classList.add("inside-side-menu"),"UI-CONTENT-MENU"===e.tagName&&this.o.classList.add("inside-content-menu"),"UI-HEADER-MENU"===e.tagName&&this.o.classList.add("inside-header-menu"))}p(){let e=null,n=this.parentElement;for(;"ui-popup"===n.tagName.toLowerCase()&&(e=n),n=n.parentElement,null!==n;);return e}}UiMenuButton.uiCss='button{display:flex;gap:8px;align-items:center;height:100%;width:100%;font-family:inherit;font-size:var(--ui-font-size-normal, 16px);font-weight:var(--ui-font-weight-normal, normal);line-height:150%;text-shadow:inherit;text-overflow:inherit;user-select:none;-webkit-user-select:none;white-space:nowrap;background-color:var(--ui-background, hsl(0 0% 97% / 1));color:var(--ui-foreground, hsl(0 0% 18% / 1));--ui-icon-primary-color:var(--ui-foreground, hsl(0 0% 18% / 1));border:none;box-sizing:border-box;padding:4px 8px;transition:filter var(--ui-animation-duration-quick, 100ms) ease-in-out;-webkit-tap-highlight-color:transparent;}button > *{pointer-events:none;}slot[name="start"]::slotted(*:not(ui-lozenge):not(ui-button):not(ui-icon-button)), slot[name="end"]::slotted(*:not(ui-lozenge):not(ui-button):not(ui-icon-button)){height:16px;width:16px;}button.inside-side-menu{gap:var(--ui-menu-side-gap, 8px);background-color:var(--ui-menu-side-background, var(--ui-background, hsl(0 0% 97% / 1)));font-size:var(--ui-menu-side-font-size, var(--ui-font-size-normal, 16px));font-weight:var(--ui-menu-side-font-weight, var(--ui-font-weight-normal, normal));border-inline-start-style:solid;border-inline-start-width:var(--ui-menu-side-bar-width, 4px);border-inline-start-color:var(--ui-menu-side-bar-color, transparent);padding:var(--ui-menu-side-padding, 4px 8px);& slot[name="start"]::slotted(*:not(ui-lozenge):not(ui-button):not(ui-icon-button)), slot[name="end"]::slotted(*:not(ui-lozenge):not(ui-button):not(ui-icon-button)){height:var(--ui-menu-side-icon-size, 16px);width:var(--ui-menu-side-icon-size, 16px);}} button.inside-side-menu:not([disabled]){color:var(--ui-menu-side-foreground, var(--ui-foreground, hsl(0 0% 18% / 1)));--ui-icon-primary-color:var(--ui-menu-side-foreground, var(--ui-foreground, hsl(0 0% 18% / 1)));}button.inside-content-menu{gap:var(--ui-menu-content-gap, 8px);background-color:var(--ui-menu-content-background, var(--ui-background, hsl(0 0% 97% / 1)));font-size:var(--ui-menu-content-font-size, var(--ui-font-size-small, 12px));font-weight:var(--ui-menu-content-font-weight, var(--ui-font-weight-normal, normal));border-inline-start-style:solid;border-inline-start-width:var(--ui-menu-content-bar-width, 2px);border-inline-start-color:var(--ui-menu-content-bar-color, var(--ui-midground, hsl(0 0% 90% / 1)));padding:var(--ui-menu-content-padding, 4px 8px);& slot[name="start"]::slotted(*:not(ui-lozenge):not(ui-button):not(ui-icon-button)), slot[name="end"]::slotted(*:not(ui-lozenge):not(ui-button):not(ui-icon-button)){height:var(--ui-menu-content-icon-size, 16px);width:var(--ui-menu-content-icon-size, 16px);}} button.inside-content-menu:not([disabled]){color:var(--ui-menu-content-foreground, var(--ui-foreground, hsl(0 0% 18% / 1)));--ui-icon-primary-color:var(--ui-menu-content-foreground, var(--ui-foreground, hsl(0 0% 18% / 1)));}button.inside-popup-menu{gap:var(--ui-menu-popup-gap, 8px);background-color:var(--ui-menu-popup-background, var(--ui-module-background, hsl(0 0% 97% / 1)));font-size:var(--ui-menu-popup-font-size, var(--ui-font-size-normal, 16px));font-weight:var(--ui-menu-popup-font-weight, var(--ui-font-weight-normal, normal));border-inline-start-style:solid;border-inline-start-width:var(--ui-menu-popup-bar-width, 0);border-inline-start-color:var(--ui-menu-popup-bar-color, transparent);padding:var(--ui-menu-popup-padding, 4px 8px);& slot[name="start"]::slotted(*:not(ui-lozenge):not(ui-button):not(ui-icon-button)), slot[name="end"]::slotted(*:not(ui-lozenge):not(ui-button):not(ui-icon-button)){height:var(--ui-menu-popup-icon-size, 16px);width:var(--ui-menu-popup-icon-size, 16px);}} button.inside-popup-menu:not([disabled]){color:var(--ui-menu-popup-foreground, var(--ui-module-foreground, hsl(0 0% 18% / 1)));--ui-icon-primary-color:var(--ui-menu-popup-foreground, var(--ui-module-foreground, hsl(0 0% 18% / 1)));}button.inside-header-menu{gap:var(--ui-menu-header-gap, 8px);background-color:var(--ui-menu-header-background, var(--ui-background, hsl(0 0% 97% / 1)));font-size:var(--ui-menu-header-font-size, var(--ui-font-size-normal, 16px));font-weight:var(--ui-menu-header-font-weight, var(--ui-font-weight-normal, normal));border-inline-start-style:none;padding:var(--ui-menu-header-padding, 4px 8px);& slot[name="start"]::slotted(*:not(ui-lozenge):not(ui-button):not(ui-icon-button)), slot[name="end"]::slotted(*:not(ui-lozenge):not(ui-button):not(ui-icon-button)){height:var(--ui-menu-header-icon-size, 16px);width:var(--ui-menu-header-icon-size, 16px);}} button.inside-header-menu:not([disabled]){color:var(--ui-menu-header-foreground, var(--ui-foreground, hsl(0 0% 18% / 1)));--ui-icon-primary-color:var(--ui-menu-header-foreground, var(--ui-foreground, hsl(0 0% 18% / 1)));}:host([selected]) button{background-color:var(--ui-menu-selected-background, var(--ui-selected-background, hsl(215 50% 90% / 1)));color:var(--ui-menu-selected-foreground, var(--ui-selected-foreground, hsl(215 50% 30% / 1)));--ui-icon-primary-color:var(--ui-menu-selected-foreground, var(--ui-selected-foreground, hsl(215 50% 30% / 1)));border-color:var(--ui-menu-selected-bar-color, var(--ui-selected-foreground, hsl(215 50% 30% / 1)));}:host([indent]) button{padding-inline-start:calc(var(--ui-menu-indent-width, 24px) * var(--ui-menu-indent, 1));}.body{flex-grow:1;text-align:start;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}slot[name="start"]::slotted(*), slot[name="end"]::slotted(*){flex-grow:0;height:16px;}button[disabled]{color:var( --ui-menu-disabled-foreground, color-mix( in srgb-linear, var(--ui-foreground, hsl(0 0% 18% / 1)) 50%, var(--ui-background, hsl(0 0% 97% / 1)) 50% ) );--ui-icon-primary-color:var( --ui-menu-disabled-foreground, color-mix( in srgb-linear, var(--ui-foreground, hsl(0 0% 18% / 1)) 50%, var(--ui-background, hsl(0 0% 97% / 1)) 50% ) );}button:focus-visible{outline-offset:-3px;outline-style:solid;outline-width:3px;outline-color:var(--ui-foreground, hsl(0 0% 18% / 1));}:host([selected]) button:focus-visible{outline-color:var(--ui-selected-foreground, hsl(215 50% 30% / 1));}::slotted(*:not(:defined)){display:none;}@media (hover:hover){button:not([disabled]):hover{cursor:pointer;filter:brightness(85%);}button[disabled]:hover{cursor:not-allowed;filter:brightness(75%);}} :host(:not([disabled])) button:active{filter:brightness(65%);}@media (forced-colors:active) or (prefers-contrast:more){button{border:none;}} ',UiMenuButton.uiHtml='<button type="button"><slot name="start"></slot><div class="body"><slot></slot></div><slot name="end"></slot></button>',e.createUi(UiMenuButton,"ui-menu-button",import.meta.url);