@coderundebug/ui-web/ui-alert.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 r}from"./ui-tools.js";export class UiAlert extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.innerHTML=UiAlert.uiHtml,this.shadowRoot.adoptedStyleSheets=[UiAlert.uiCssStyleSheet],this.i=this.shadowRoot.getElementById("close"),this.o=this.o.bind(this)}connectedCallback(){this.i.addEventListener("click",this.o)}disconnectedCallback(){this.i.removeEventListener("click",this.l)}o(){this.remove();const r=new CustomEvent("closed");this.dispatchEvent(r)}}UiAlert.uiCss=':host{--ui-alert-background:var(--ui-alert-default-background, var(--ui-default-background, hsl(0 0% 90% / 1)));--ui-alert-foreground:var(--ui-alert-default-foreground, var(--ui-default-foreground, hsl(0 0% 30% / 1)));--ui-alert-font-size:var(--ui-alert-normal-font-size, var(--ui-font-size-normal, 16px));--ui-alert-padding:var(--ui-alert-normal-padding, 12px);--ui-alert-icon-size:var(--ui-alert-normal-icon-size, 24px);--ui-alert-gap:var(--ui-alert-normal-gap, 12px);--ui-alert-border-radius:var(--ui-alert-border-normal-radius, var(--ui-border-radius-normal, 4px));display:flex;flex-direction:column;gap:var(--ui-alert-gap);box-sizing:border-box;padding:var(--ui-alert-padding);border-radius:var(--ui-alert-border-radius);border-style:none;border-width:var(--ui-alert-border-width, var(--ui-border-width, 1px));box-shadow:var(--ui-alert-box-shadow, none);--ui-icon-primary-color:var(--ui-alert-foreground);background:var(--ui-alert-background);color:var(--ui-alert-foreground);}.header{display:flex;gap:var(--ui-alert-gap);align-items:center;font-size:var(--ui-alert-font-size, var(--ui-font-size-normal, 16px));text-align:start;}.header-body{flex-grow:1;}:host([small]){--ui-alert-font-size:var(--ui-alert-small-font-size, var(--ui-font-size-small, 12px));--ui-alert-padding:var(--ui-alert-small-padding, 8px);--ui-alert-icon-size:var(--ui-alert-small-icon-size, 16px);--ui-alert-border-radius:var(--ui-alert-border-small-radius, var(--ui-border-radius-small, 3px));--ui-alert-gap:var(--ui-alert-small-gap, 8px);}:host([large]){--ui-alert-font-size:var(--ui-alert-large-font-size, var(--ui-font-size-large, 24px));--ui-alert-padding:var(--ui-alert-large-padding, 18px);--ui-alert-icon-size:var(--ui-alert-large-icon-size, 36px);--ui-alert-border-radius:var(--ui-alert-border-large-radius, var(--ui-border-radius-large, 6px));--ui-alert-gap:var(--ui-alert-large-gap, 18px);}:host([outline]){border-style:var(--ui-alert-border-style, var(--ui-border-style, solid));border-color:var(--ui-alert-border-color, var(--ui-alert-foreground));}slot[name="icon"]::slotted(*){height:var(--ui-alert-icon-size);width:var(--ui-alert-icon-size);}:host([selected]){--ui-alert-background:var(--ui-alert-selected-background, var(--ui-selected-background, hsl(215 50% 90% / 1)));--ui-alert-foreground:var(--ui-alert-selected-foreground, var(--ui-selected-foreground, hsl(215 50% 30% / 1)));}:host([success]){--ui-alert-background:var(--ui-alert-success-background, var(--ui-success-background, hsl(104 50% 90% / 1)));--ui-alert-foreground:var(--ui-alert-success-foreground, var(--ui-success-foreground, hsl(104 50% 30% / 1)));}:host([warning]){--ui-alert-background:var(--ui-alert-warning-background, var(--ui-warning-background, hsl(45 50% 90% / 1)));--ui-alert-foreground:var(--ui-alert-warning-foreground, var(--ui-warning-foreground, hsl(45 50% 30% / 1)));}:host([danger]){--ui-alert-background:var(--ui-alert-danger-background, var(--ui-danger-background, hsl(0 50% 90% / 1)));--ui-alert-foreground:var(--ui-alert-danger-foreground, var(--ui-danger-foreground, hsl(0 50% 30% / 1)));}:host([info]){--ui-alert-background:var(--ui-alert-info-background, var(--ui-info-background, hsl(190 50% 90% / 1)));--ui-alert-foreground:var(--ui-alert-info-foreground, var(--ui-info-foreground, hsl(190 90% 30% / 1)));}:host([highlight]){--ui-alert-background:var(--ui-alert-highlight-background, var(--ui-highlight-background, hsl(302 50% 90% / 1)));--ui-alert-foreground:var(--ui-alert-highlight-foreground, var(--ui-highlight-foreground, hsl(302 50% 30% / 1)));}:host([invert]){background-color:var(--ui-alert-foreground);color:var(--ui-alert-background);--ui-icon-primary-color:var(--ui-alert-background);}::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);}} ',UiAlert.uiHtml='<div class="header"><slot name="icon"></slot><div class="header-body"><slot></slot></div><slot name="extra"></slot><slot id="close" name="close"></slot></div><slot name="content"></slot>',r.createUi(UiAlert,"ui-alert",import.meta.url);