@coderundebug/ui-web/ui-menu-link.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 UiMenuLink extends HTMLElement{static get formAssociated(){return!0}constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.innerHTML=UiMenuLink.uiHtml,this.shadowRoot.adoptedStyleSheets=[UiMenuLink.uiCssStyleSheet],this.i=this.attachInternals(),this.o=this.shadowRoot.querySelector("a")}connectedCallback(){this.t()}get disabled(){return!1!==this.hasAttribute("disabled")}set disabled(e){!0===e?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get href(){return this.o.href}attributeChangedCallback(e,n,i){"indent"!==e?this.o.setAttribute(e,i):this.u()}static get observedAttributes(){return["indent","href","hreflang","download","ping","referrerpolicy","rel","target","type"]}formDisabledCallback(e){if(!0===e)this.o.removeAttribute("href");else{const e=this.getAttribute("href");this.o.setAttribute("href",e)}}u(){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()+";")}}t(){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"))}}UiMenuLink.uiCss=' a{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;}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;}a.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);}} :host(:not([disabled])) a.inside-side-menu{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)));}a.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);}} :host(:not([disabled])) a.inside-content-menu{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)));}a.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);}} :host(:not([disabled])) a.inside-popup-menu{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)));}a.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);}} :host(:not([disabled])) a.inside-header-menu{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]){& a, a:link, a:visited, a:active{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]) a{padding-inline-start:calc(var(--ui-menu-indent-width, 24px) * var(--ui-menu-indent, 1));}a:link, a:visited, a:active{text-decoration:none;}.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;}:host([disabled]) a{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% ) );}a:focus-visible{outline-offset:-3px;outline-style:solid;outline-width:3px;outline-color:var(--ui-foreground, hsl(0 0% 18% / 1));}:host([selected]) a:focus-visible{outline-color:var(--ui-selected-foreground, hsl(215 50% 30% / 1));}::slotted(*:not(:defined)){display:none;}@media (hover:hover){:host(:not([disabled])) a:hover{cursor:pointer;filter:brightness(85%);}:host(:not([disabled])) a:hover .body{text-decoration:var(--ui-menu-link-hover-decoration, underline);}:host([disabled]) a:hover{cursor:not-allowed;filter:brightness(75%);}} :host(:not([disabled])) a:active{filter:brightness(65%);}',UiMenuLink.uiHtml='<a><slot name="start"></slot><div class="body"><slot></slot></div><slot name="end"></slot></a>',e.createUi(UiMenuLink,"ui-menu-link",import.meta.url);