@coderundebug/ui-web/ui-lozenge.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 UiLozenge extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.innerHTML=UiLozenge.uiHtml,this.shadowRoot.adoptedStyleSheets=[UiLozenge.uiCssStyleSheet]}}UiLozenge.uiCss=':host{display:inline-flex;align-items:center;--ui-lozenge-background:var(--ui-lozenge-default-background, var(--ui-default-background, hsl(0 0% 90% / 1)));--ui-lozenge-foreground:var(--ui-lozenge-default-foreground, var(--ui-default-foreground, hsl(0 0% 30% / 1)));--ui-lozenge-font-size:var(--ui-lozenge-small-font-size, var(--ui-font-size-small, 12px));--ui-lozenge-padding:var(--ui-lozenge-small-padding, 0 4px);--ui-lozenge-icon-padding:var(--ui-lozenge-small-icon-padding, 4px 0);--ui-lozenge-icon-size:var(--ui-lozenge-small-icon-size, 12px);--ui-lozenge-gap:var(--ui-lozenge-small-gap, 4px);--ui-lozenge-border-radius:var(--ui-lozenge-border-small-radius, var(--ui-border-radius-small, 3px));font-size:var(--ui-lozenge-font-size);font-weight:var(--ui-lozenge-font-weight, var(--ui-font-weight-bold, 600));line-height:150%;white-space:nowrap;max-width:var(--ui-lozenge-max-width, 100%);box-sizing:border-box;padding:var(--ui-lozenge-padding);gap:var(--ui-lozenge-gap);border-radius:var(--ui-lozenge-border-radius);border-style:none;border-width:var(--ui-lozenge-border-width);box-shadow:var(--ui-lozenge-box-shadow, none);--ui-icon-primary-color:var(--ui-lozenge-foreground);background:var(--ui-lozenge-background);color:var(--ui-lozenge-foreground);}.body{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}:host([normal]){--ui-lozenge-font-size:var(--ui-lozenge-normal-font-size, var(--ui-font-size-normal, 16px));--ui-lozenge-padding:var(--ui-lozenge-normal-padding, 0 6px);--ui-lozenge-icon-padding:var(--ui-lozenge-normal-icon-padding, 4px 0);--ui-lozenge-icon-size:var(--ui-lozenge-normal-icon-size, 16px);--ui-lozenge-border-radius:var(--ui-lozenge-border-normal-radius, var(--ui-border-radius-normal, 4px));--ui-lozenge-gap:var(--ui-lozenge-normal-gap, 6px);}:host([large]){--ui-lozenge-font-size:var(--ui-lozenge-large-font-size, var(--ui-font-size-large, 24px));--ui-lozenge-padding:var(--ui-lozenge-large-padding, 0 8px);--ui-lozenge-icon-padding:var(--ui-lozenge-large-icon-padding, 4px 0);--ui-lozenge-icon-size:var(--ui-lozenge-large-icon-size, 24px);--ui-lozenge-border-radius:var(--ui-lozenge-border-large-radius, var(--ui-border-radius-large, 6px));--ui-lozenge-gap:var(--ui-lozenge-large-gap, 8px);}slot[name="start"]::slotted(*), slot[name="end"]::slotted(*){padding:var(--ui-lozenge-icon-padding);height:var(--ui-lozenge-icon-size);width:var(--ui-lozenge-icon-size);}:host([selected]){--ui-lozenge-background:var(--ui-lozenge-selected-background, var(--ui-selected-background, hsl(215 50% 90% / 1)));--ui-lozenge-foreground:var(--ui-lozenge-selected-foreground, var(--ui-selected-foreground, hsl(215 50% 30% / 1)));}:host([success]){--ui-lozenge-background:var(--ui-lozenge-success-background, var(--ui-success-background, hsl(104 50% 90% / 1)));--ui-lozenge-foreground:var(--ui-lozenge-success-foreground, var(--ui-success-foreground, hsl(104 50% 30% / 1)));}:host([warning]){--ui-lozenge-background:var(--ui-lozenge-warning-background, var(--ui-warning-background, hsl(45 50% 90% / 1)));--ui-lozenge-foreground:var(--ui-lozenge-warning-foreground, var(--ui-warning-foreground, hsl(45 50% 30% / 1)));}:host([danger]){--ui-lozenge-background:var(--ui-lozenge-danger-background, var(--ui-danger-background, hsl(0 50% 90% / 1)));--ui-lozenge-foreground:var(--ui-lozenge-danger-foreground, var(--ui-danger-foreground, hsl(0 50% 30% / 1)));}:host([info]){--ui-lozenge-background:var(--ui-lozenge-info-background, var(--ui-info-background, hsl(190 50% 90% / 1)));--ui-lozenge-foreground:var(--ui-lozenge-info-foreground, var(--ui-info-foreground, hsl(190 90% 30% / 1)));}:host([highlight]){--ui-lozenge-background:var(--ui-lozenge-highlight-background, var(--ui-highlight-background, hsl(302 50% 90% / 1)));--ui-lozenge-foreground:var(--ui-lozenge-highlight-foreground, var(--ui-highlight-foreground, hsl(302 50% 30% / 1)));}:host([invert]){background-color:var(--ui-lozenge-foreground);color:var(--ui-lozenge-background);--ui-icon-primary-color:var(--ui-lozenge-background);}:host([outline]){background-color:transparent;color:var(--ui-lozenge-foreground);border-style:var(--ui-lozenge-border-style, solid);border-width:var(--ui-lozenge-border-width, var(--ui-border-width, 1px));border-color:var(--ui-lozenge-border-color, var(--ui-lozenge-foreground));}::slotted(*:not(:defined)){display:none;}@media (forced-colors:active) or (prefers-contrast:more){:host{border-style:var(--ui-border-style, solid);border-width:var(--ui-border-width, 1px);}} ',UiLozenge.uiHtml='<slot name="start"></slot><div class="body"><slot></slot></div><slot name="end"></slot>',e.createUi(UiLozenge,"ui-lozenge",import.meta.url);