@coderundebug/ui-web/ui-menu-header.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 UiMenuHeader extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.innerHTML=UiMenuHeader.uiHtml,this.shadowRoot.adoptedStyleSheets=[UiMenuHeader.uiCssStyleSheet],this.i=this.shadowRoot.getElementById("base")}connectedCallback(){this.o()}o(){const e=this.closest("ui-popup-menu, ui-side-menu, ui-content-menu, ui-header-menu");this.i.classList.remove("inside-popup-menu"),this.i.classList.remove("inside-side-menu"),this.i.classList.remove("inside-content-menu"),this.i.classList.remove("inside-header-menu"),e&&("UI-POPUP-MENU"===e.tagName&&this.i.classList.add("inside-popup-menu"),"UI-SIDE-MENU"===e.tagName&&this.i.classList.add("inside-side-menu"),"UI-CONTENT-MENU"===e.tagName&&this.i.classList.add("inside-content-menu"),"UI-HEADER-MENU"===e.tagName&&this.i.classList.add("inside-header-menu"))}}UiMenuHeader.uiCss=" #base{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;padding:4px 8px;}#base.inside-side-menu{background-color:var(--ui-menu-side-background, var(--ui-background, hsl(0 0% 97% / 1)));font-size:var(--ui-menu-header-side-font-size, var(--ui-font-size-small, 12px));font-weight:var(--ui-menu-header-side-font-weight, var(--ui-font-weight-bold, 600));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-header-side-padding, 4px 8px);}#base.inside-content-menu{background-color:var(--ui-menu-content-background, var(--ui-background, hsl(0 0% 97% / 1)));font-size:var(--ui-menu-header-content-font-size, var(--ui-font-size-small, 12px));font-weight:var(--ui-menu-header-content-font-weight, var(--ui-font-weight-bold, 600));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-header-content-padding, 4px 8px);}#base.inside-popup-menu{background-color:var(--ui-menu-popup-background, var(--ui-module-background, hsl(0 0% 97% / 1)));font-size:var(--ui-menu-header-popup-font-size, var(--ui-font-size-small, 12px));font-weight:var(--ui-menu-header-popup-font-weight, var(--ui-font-weight-bold, 600));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-header-popup-padding, 4px 8px);}#base.inside-header-menu{display:grid;align-items:center;box-sizing:border-box;background-color:var(--ui-menu-header-background, var(--ui-background, hsl(0 0% 97% / 1)));font-size:var(--ui-menu-header-header-font-size, var(--ui-font-size-small, 12px));font-weight:var(--ui-menu-header-header-font-weight, var(--ui-font-weight-bold, 600));border-inline-start-style:none;height:100%;padding:var(--ui-menu-header-header-padding, 4px 8px);}",UiMenuHeader.uiHtml='<div id="base"><slot></slot></div>',e.createUi(UiMenuHeader,"ui-menu-header",import.meta.url);