@coderundebug/ui-web/ui-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 t}from"./ui-tools.js";export class UiButton extends HTMLElement{static get formAssociated(){return!0}static get t(){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=UiButton.uiHtml,this.shadowRoot.adoptedStyleSheets=[UiButton.uiCssStyleSheet],this.o=this.attachInternals(),this.i=this.shadowRoot.querySelector("button"),this.u=this.u.bind(this),this.l=null}get disabled(){return!1!==this.hasAttribute("disabled")}set disabled(t){!0===t?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get oneClick(){return!1!==this.hasAttribute("one-click")}set oneClick(t){!0===t?this.setAttribute("one-click",""):this.removeAttribute("one-click")}attributeChangedCallback(t,o,i){"loading"===t&&this.h()}static get observedAttributes(){return["loading"]}formDisabledCallback(t){!0===t?this.i.setAttribute("disabled",""):this.i.removeAttribute("disabled")}connectedCallback(){this.i.addEventListener("click",this.u)}disconnectedCallback(){this.i.removeEventListener("click",this.u)}u(t){if(!0===this.hasAttribute("one-click")&&(this.click(),this.setAttribute("disabled",""),t.stopPropagation()),!0===this.hasAttribute("submit")){if(!this.o)return;if(!this.o.form)return;this.o.form.submit()}if(!0===this.hasAttribute("reset")){if(!this.o)return;if(!this.o.form)return;this.o.form.reset()}}h(){if(!1===this.hasAttribute("loading")){if(!this.l)return;return this.i.removeChild(this.l),void(this.l=null)}this.l=document.createElement("div"),this.l.innerHTML=UiButton.t,this.l.classList.add("loading"),this.i.appendChild(this.l)}}UiButton.uiCss=':host{display:inline-flex;justify-content:center;max-width:100%;--ui-button-background:var(--ui-button-default-background, var(--ui-default-background, hsl(0 0% 90% / 1)));--ui-button-foreground:var(--ui-button-default-foreground, var(--ui-default-foreground, hsl(0 0% 30% / 1)));--ui-button-font-size:var(--ui-button-normal-font-size, var(--ui-font-size-normal, 16px));--ui-button-padding:var(--ui-button-normal-padding, 8px 16px);--ui-button-pill-padding:var(--ui-button-normal-pill-padding, 8px 12px);--ui-button-icon-padding:var(--ui-button-normal-icon-padding, 4px 0);--ui-button-icon-size:var(--ui-button-normal-icon-size, 16px);--ui-button-gap:var(--ui-button-normal-gap, 8px);--ui-button-border-radius:var(--ui-button-border-normal-radius, var(--ui-border-radius-normal, 4px));}button{position:relative;cursor:pointer;display:flex;gap:var(--ui-button-gap);align-self:center;align-items:center;font-family:inherit;font-size:var(--ui-button-font-size);font-weight:var(--ui-button-font-weight, var(--ui-font-weight-bold, 600));line-height:150%;text-shadow:inherit;text-overflow:inherit;user-select:none;-webkit-user-select:none;border-radius:var(--ui-button-border-radius);border-style:none;border-width:0;border-color:unset;box-shadow:var(--ui-button-box-shadow, none);min-width:0;min-height:24px;padding:var(--ui-button-padding);box-sizing:content-box;--ui-icon-primary-color:var(--ui-button-foreground);background:var(--ui-button-background);color:var(--ui-button-foreground);transition:filter var(--ui-animation-duration-default, 200ms) ease-in-out;-webkit-tap-highlight-color:transparent;}.body{flex-shrink:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}:host([fill-width]) button{width:100%;justify-content:center;}:host([small]){--ui-button-font-size:var(--ui-button-small-font-size, var(--ui-font-size-small, 12px));--ui-button-padding:var(--ui-button-small-padding, 4px 8px);--ui-button-pill-padding:var(--ui-button-small-pill-padding, 4px 12px);--ui-button-icon-padding:var(--ui-button-small-icon-padding, 4px 0);--ui-button-icon-size:var(--ui-button-small-icon-size, 12px);--ui-button-border-radius:var(--ui-button-border-small-radius, var(--ui-border-radius-small, 3px));--ui-button-gap:var(--ui-button-small-gap, 4px);}:host([large]){--ui-button-font-size:var(--ui-button-large-font-size, var(--ui-font-size-large, 24px));--ui-button-padding:var(--ui-button-large-padding, 12px 24px);--ui-button-pill-padding:var(--ui-button-large-pill-padding, 12px 24px);--ui-button-icon-padding:var(--ui-button-large-icon-padding, 4px 0);--ui-button-icon-size:var(--ui-button-large-icon-size, 24px);--ui-button-border-radius:var(--ui-button-border-large-radius, var(--ui-border-radius-large, 6px));--ui-button-gap:var(--ui-button-large-gap, 12px);}:host([pill]) button{border-radius:10rem;padding:var(--ui-button-pill-padding);}slot[name="start"]::slotted(*), slot[name="end"]::slotted(*){padding:var(--ui-button-icon-padding);height:var(--ui-button-icon-size);width:var(--ui-button-icon-size);}:host([selected]){--ui-button-background:var(--ui-button-selected-background, var(--ui-selected-background, hsl(215 50% 90% / 1)));--ui-button-foreground:var(--ui-button-selected-foreground, var(--ui-selected-foreground, hsl(215 50% 30% / 1)));}:host([success]){--ui-button-background:var(--ui-button-success-background, var(--ui-success-background, hsl(104 50% 90% / 1)));--ui-button-foreground:var(--ui-button-success-foreground, var(--ui-success-foreground, hsl(104 50% 30% / 1)));}:host([warning]){--ui-button-background:var(--ui-button-warning-background, var(--ui-warning-background, hsl(45 50% 90% / 1)));--ui-button-foreground:var(--ui-button-warning-foreground, var(--ui-warning-foreground, hsl(45 50% 30% / 1)));}:host([danger]){--ui-button-background:var(--ui-button-danger-background, var(--ui-danger-background, hsl(0 50% 90% / 1)));--ui-button-foreground:var(--ui-button-danger-foreground, var(--ui-danger-foreground, hsl(0 50% 30% / 1)));}:host([info]){--ui-button-background:var(--ui-button-info-background, var(--ui-info-background, hsl(190 50% 90% / 1)));--ui-button-foreground:var(--ui-button-info-foreground, var(--ui-info-foreground, hsl(190 90% 30% / 1)));}:host([highlight]){--ui-button-background:var(--ui-button-highlight-background, var(--ui-highlight-background, hsl(302 50% 90% / 1)));--ui-button-foreground:var(--ui-button-highlight-foreground, var(--ui-highlight-foreground, hsl(302 50% 30% / 1)));}:host([invert]) button{background-color:var(--ui-button-foreground);color:var(--ui-button-background);--ui-icon-primary-color:var(--ui-button-background);}:host([outline]){& button{background-color:transparent;color:var(--ui-button-foreground);border-style:var(--ui-button-border-style, solid);border-width:var(--ui-button-border-width, var(--ui-border-width, 1px));border-color:var(--ui-button-border-color, var(--ui-button-foreground));}& button:not([disabled]):hover{background-color:var(--ui-button-foreground);color:var(--ui-button-background);--ui-icon-primary-color:var(--ui-button-background);}& button:not([disabled]):active, button:focus-visible{background-color:var(--ui-button-foreground);color:var(--ui-button-background);--ui-icon-primary-color:var(--ui-button-background);}} :host([blank]){& button{background-color:transparent;color:var(--ui-button-foreground);--ui-icon-primary-color:var(--ui-button-foreground);transition:background-color var(--ui-animation-duration-default, 200ms) ease-in-out;}& button:not([disabled]):hover{background-color:var(--ui-button-background);color:var(--ui-button-foreground);--ui-icon-primary-color:var(--ui-button-foreground);}& button:not([disabled]):active, button:focus-visible{background-color:var(--ui-button-background);color:var(--ui-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-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-button-icon-size) * 1.5);width:calc(var(--ui-button-icon-size) * 1.5);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-button-background);color:var(--ui-button-foreground);--ui-icon-primary-color:var(--ui-button-foreground);}} @media (prefers-reduced-motion){:host([loading]) .ring2{animation-duration:5s;}} ',UiButton.uiHtml='<button type="button"><slot name="start"></slot><div class="body"><slot></slot></div><slot name="end"></slot></button>',t.createUi(UiButton,"ui-button",import.meta.url);