@coderundebug/ui-web/ui-icon-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 o}from"./ui-tools.js";export class UiIconButton extends HTMLElement{static get formAssociated(){return!0}static get o(){return'\n        <div class="ring1">\n            <svg viewBox="0 0 16 16">\n                <circle cx="8" cy="8" r="6" />\n            </svg>    \n        </div>\n        <div class="ring2">\n            <svg viewBox="0 0 16 16">\n                <path d="m 3.7573592,3.7573594 a 6,6 0 0 1 8.4852818,0"></path>\n            </svg>    \n        </div>\n        '}constructor(){super(),this.attachShadow({mode:"open",delegatesFocus:!0}),this.shadowRoot.innerHTML=UiIconButton.uiHtml,this.shadowRoot.adoptedStyleSheets=[UiIconButton.uiCssStyleSheet],this.i=this.attachInternals(),this.t=this.shadowRoot.querySelector("button"),this.u=this.u.bind(this),this.l=null}get disabled(){return!1!==this.hasAttribute("disabled")}set disabled(o){!0===o?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get oneClick(){return!1!==this.hasAttribute("one-click")}set oneClick(o){!0===o?this.setAttribute("one-click",""):this.removeAttribute("one-click")}attributeChangedCallback(o,i,n){"loading"===o&&this.h()}static get observedAttributes(){return["loading"]}formDisabledCallback(o){!0===o?this.t.setAttribute("disabled",""):this.t.removeAttribute("disabled")}connectedCallback(){this.t.addEventListener("click",this.u)}disconnectedCallback(){this.t.removeEventListener("click",this.u)}u(o){if(!0===this.hasAttribute("one-click")&&(this.click(),this.setAttribute("disabled",""),o.stopPropagation()),!0===this.hasAttribute("submit")){if(!this.i)return;if(!this.i.form)return;this.i.form.submit()}if(!0===this.hasAttribute("reset")){if(!this.i)return;if(!this.i.form)return;this.i.form.reset()}}h(){if(!1===this.hasAttribute("loading")){if(!this.l)return;return this.t.removeChild(this.l),void(this.l=null)}this.l=document.createElement("div"),this.l.innerHTML=UiIconButton.o,this.l.classList.add("loading"),this.t.appendChild(this.l)}}UiIconButton.uiCss=":host{display:inline-block;width:fit-content;--ui-icon-button-background:var(--ui-icon-button-default-background, var(--ui-default-background, hsl(0 0% 90% / 1)));--ui-icon-button-foreground:var(--ui-icon-button-default-foreground, var(--ui-default-foreground, hsl(0 0% 30% / 1)));--ui-icon-button-padding:var(--ui-icon-button-normal-padding, 6px);--ui-icon-button-circle-padding:var(--ui-icon-button-normal-circle-padding, 8px);--ui-icon-button-icon-size:var(--ui-icon-button-normal-icon-size, 24px);--ui-icon-button-border-radius:var(--ui-icon-button-border-normal-radius, var(--ui-border-radius-normal, 4px));}button{position:relative;cursor:pointer;display:inline-grid;align-items:center;justify-items:center;border-radius:var(--ui-icon-button-border-radius);border-style:none;border-width:0;border-color:unset;box-shadow:var(--ui-icon-button-box-shadow, none);min-height:var(--ui-icon-button-icon-size);min-width:var(--ui-icon-button-icon-size);padding:var(--ui-icon-button-padding);box-sizing:content-box;--ui-icon-primary-color:var(--ui-icon-button-foreground);background-color:var(--ui-icon-button-background);transition:filter var(--ui-animation-duration-default, 200ms) ease-in-out;-webkit-tap-highlight-color:transparent;}.body{height:100%;width:100%;}:host([small]){--ui-icon-button-padding:var(--ui-icon-button-small-padding, 4px);--ui-icon-button-circle-padding:var(--ui-icon-button-small-circle-padding, 6px);--ui-icon-button-icon-size:var(--ui-icon-button-small-icon-size, 16px);--ui-icon-button-border-radius:var(--ui-icon-button-border-small-radius, var(--ui-border-radius-small, 3px));}:host([large]){--ui-icon-button-padding:var(--ui-icon-button-large-padding, 8px);--ui-icon-button-circle-padding:var(--ui-icon-button-large-circle-padding, 10px);--ui-icon-button-icon-size:var(--ui-icon-button-large-icon-size, 32px);--ui-icon-button-border-radius:var(--ui-icon-button-border-large-radius, var(--ui-border-radius-large, 6px));}:host([circle]) button{border-radius:10rem;padding:var(--ui-icon-button-circle-padding);}slot::slotted(*){height:var(--ui-icon-button-icon-size);width:var(--ui-icon-button-icon-size);}slot::slotted(img), slot::slotted(svg){display:block;}:host([selected]){--ui-icon-button-background:var(--ui-icon-button-selected-background, var(--ui-selected-background, hsl(215 50% 90% / 1)));--ui-icon-button-foreground:var(--ui-icon-button-selected-foreground, var(--ui-selected-foreground, hsl(215 50% 30% / 1)));}:host([success]){--ui-icon-button-background:var(--ui-icon-button-success-background, var(--ui-success-background, hsl(104 50% 90% / 1)));--ui-icon-button-foreground:var(--ui-icon-button-success-foreground, var(--ui-success-foreground, hsl(104 50% 30% / 1)));}:host([warning]){--ui-icon-button-background:var(--ui-icon-button-warning-background, var(--ui-warning-background, hsl(45 50% 90% / 1)));--ui-icon-button-foreground:var(--ui-icon-button-warning-foreground, var(--ui-warning-foreground, hsl(45 50% 30% / 1)));}:host([danger]){--ui-icon-button-background:var(--ui-icon-button-danger-background, var(--ui-danger-background, hsl(0 50% 90% / 1)));--ui-icon-button-foreground:var(--ui-icon-button-danger-foreground, var(--ui-danger-foreground, hsl(0 50% 30% / 1)));}:host([info]){--ui-icon-button-background:var(--ui-icon-button-info-background, var(--ui-info-background, hsl(190 50% 90% / 1)));--ui-icon-button-foreground:var(--ui-icon-button-info-foreground, var(--ui-info-foreground, hsl(190 90% 30% / 1)));}:host([highlight]){--ui-icon-button-background:var(--ui-icon-button-highlight-background, var(--ui-highlight-background, hsl(302 50% 90% / 1)));--ui-icon-button-foreground:var(--ui-icon-button-highlight-foreground, var(--ui-highlight-foreground, hsl(302 50% 30% / 1)));}:host([invert]) button{background-color:var(--ui-icon-button-foreground);color:var(--ui-icon-button-background);--ui-icon-primary-color:var(--ui-icon-button-background);}:host([outline]){& button{background-color:transparent;color:var(--ui-icon-button-foreground);border-style:var(--ui-icon-button-border-style, solid);border-width:var(--ui-icon-button-border-width, var(--ui-border-width, 1px));border-color:var(--ui-icon-button-border-color, var(--ui-icon-button-foreground));}& button:not([disabled]):hover{background-color:var(--ui-icon-button-foreground);color:var(--ui-icon-button-background);--ui-icon-primary-color:var(--ui-icon-button-background);}& button:not([disabled]):active, button:focus-visible{background-color:var(--ui-icon-button-foreground);color:var(--ui-icon-button-background);--ui-icon-primary-color:var(--ui-icon-button-background);}} :host([blank]){& button{background-color:transparent;color:var(--ui-icon-button-foreground);transition:background-color var(--ui-animation-duration-default, 200ms) ease-in-out;}& button:not([disabled]):hover{background-color:var(--ui-icon-button-background);color:var(--ui-icon-button-foreground);--ui-icon-primary-color:var(--ui-icon-button-foreground);}& button:not([disabled]):active, button:focus-visible{background-color:var(--ui-icon-button-background);color:var(--ui-icon-button-foreground);}} button[disabled]{cursor:not-allowed;}:host(:not([loading])) button[disabled]{filter:brightness(75%);}button:focus-visible{outline-offset:2px;outline-style:solid;outline-width:2px;outline-color:var(--ui-icon-button-foreground);}:host(:not([loading])) .loading{display:none;}:host([loading]){& .loading{display:grid;grid-template-columns:1fr;grid-template-rows:1fr;position:absolute;inset:0;height:100%;}& ::slotted(*), .body{opacity:0;}& .ring1, .ring2{grid-column:1;grid-row:1;height:calc(var(--ui-icon-button-icon-size) * 1.25);width:calc(var(--ui-icon-button-icon-size) * 1.25);align-self:center;justify-self:center;}& .ring1 > svg, .ring2 > svg{display:block;height:100%;min-width:8px;min-height:8px;stroke-width:2;stroke:var(--ui-icon-primary-color);stroke-linecap:round;fill:none;}& .ring1 > svg{opacity:0.5;}& .ring2{animation-name:spin;animation-duration:750ms;animation-iteration-count:infinite;animation-timing-function:linear;}& button:hover{cursor:progress;}} @keyframes spin{0%{transform:rotate(0deg);}50%{transform:rotate(270deg);}100%{transform:rotate(360deg);}} :host(:not([blank]):not([outline]):not([loading])) button:not([disabled]):hover{filter:brightness(85%);}:host(:not([blank]):not([outline]):not([loading])) button:not([disabled]):active, :host(:not([loading])) button:not([disabled]):active{filter:brightness(65%);}::slotted(*:not(:defined)){display:none;}@media (forced-colors:active) or (prefers-contrast:more){button, :host([outline]) button{border-style:solid;border-width:2px;border-color:var(--ui-button-foreground);box-shadow:none;}button:focus-visible{outline-width:3px;}:host([invert]) button, :host([outline]) button:not([disabled]):hover{background-color:var(--ui-icon-button-background);color:var(--ui-icon-button-foreground);--ui-icon-primary-color:var(--ui-icon-button-foreground);}} @media (prefers-reduced-motion){:host([loading]) .ring2{animation-duration:5s;}} ",UiIconButton.uiHtml='<button type="button"><div class="body"><slot></slot></div></button>',o.createUi(UiIconButton,"ui-icon-button",import.meta.url);