@coderundebug/ui-web/ui-icon-link-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 UiIconLinkButton extends HTMLElement{static get formAssociated(){return!0}constructor(){super(),this.attachShadow({mode:"open",delegatesFocus:!0}),this.shadowRoot.innerHTML=UiIconLinkButton.uiHtml,this.shadowRoot.adoptedStyleSheets=[UiIconLinkButton.uiCssStyleSheet],this.o=this.attachInternals(),this.i=this.shadowRoot.querySelector("a")}get disabled(){return!1!==this.hasAttribute("disabled")}set disabled(o){if(!0===o)this.setAttribute("disabled",""),this.i.removeAttribute("href");else{this.removeAttribute("disabled");const o=this.getAttribute("href");this.i.setAttribute("href",o)}}get href(){return this.i.href}set href(o){o?(this.setAttribute("href",o),!1===this.hasAttribute("disabled")&&this.i.setAttribute("href",o)):(this.removeAttribute("href"),this.i.removeAttribute("href"))}attributeChangedCallback(o,i,n){this.i.setAttribute(o,n)}static get observedAttributes(){return["href","hreflang","download","ping","referrerpolicy","rel","target","type"]}formDisabledCallback(o){if(!0===o)this.i.removeAttribute("href");else{const o=this.getAttribute("href");this.i.setAttribute("href",o)}}}UiIconLinkButton.uiCss=":host{display:inline-block;width:fit-content;--ui-icon-link-button-background:var(--ui-icon-link-button-default-background, var(--ui-default-background, hsl(0 0% 90% / 1)));--ui-icon-link-button-foreground:var(--ui-icon-link-button-default-foreground, var(--ui-default-foreground, hsl(0 0% 30% / 1)));--ui-icon-link-button-padding:var(--ui-icon-link-button-normal-padding, 6px);--ui-icon-link-button-circle-padding:var(--ui-icon-link-button-normal-circle-padding, 8px);--ui-icon-link-button-icon-size:var(--ui-icon-link-button-normal-icon-size, 24px);--ui-icon-link-button-border-radius:var(--ui-icon-link-button-border-normal-radius, var(--ui-border-radius-normal, 4px));}a{position:relative;cursor:pointer;display:inline-grid;align-items:center;justify-items:center;border-radius:var(--ui-icon-link-button-border-radius);border-style:none;border-width:0;border-color:unset;box-shadow:var(--ui-icon-link-button-box-shadow, none);min-height:var(--ui-icon-link-button-icon-size);min-width:var(--ui-icon-link-button-icon-size);padding:var(--ui-icon-link-button-padding);box-sizing:content-box;--ui-icon-primary-color:var(--ui-icon-link-button-foreground);background-color:var(--ui-icon-link-button-background);transition:filter var(--ui-animation-duration-default, 200ms) ease-in-out;-webkit-tap-highlight-color:transparent;}a:link, a:visited, a:active, a:hover{text-decoration:none;}:host([small]){--ui-icon-link-button-padding:var(--ui-icon-link-button-small-padding, 4px);--ui-icon-link-button-circle-padding:var(--ui-icon-link-button-small-circle-padding, 6px);--ui-icon-link-button-icon-size:var(--ui-icon-link-button-small-icon-size, 16px);--ui-icon-link-button-border-radius:var(--ui-icon-link-button-border-small-radius, var(--ui-border-radius-small, 3px));}:host([large]){--ui-icon-link-button-padding:var(--ui-icon-link-button-large-padding, 8px);--ui-icon-link-button-circle-padding:var(--ui-icon-link-button-large-circle-padding, 10px);--ui-icon-link-button-icon-size:var(--ui-icon-link-button-large-icon-size, 32px);--ui-icon-link-button-border-radius:var(--ui-icon-link-button-border-large-radius, var(--ui-border-radius-large, 6px));}:host([circle]) a{border-radius:10rem;padding:var(--ui-icon-link-button-circle-padding);}slot::slotted(*){height:var(--ui-icon-link-button-icon-size);width:var(--ui-icon-link-button-icon-size);}slot::slotted(img), slot::slotted(svg){display:block;}:host([selected]){--ui-icon-link-button-background:var(--ui-icon-link-button-selected-background, var(--ui-selected-background, hsl(215 50% 90% / 1)));--ui-icon-link-button-foreground:var(--ui-icon-link-button-selected-foreground, var(--ui-selected-foreground, hsl(215 50% 30% / 1)));}:host([success]){--ui-icon-link-button-background:var(--ui-icon-link-button-success-background, var(--ui-success-background, hsl(104 50% 90% / 1)));--ui-icon-link-button-foreground:var(--ui-icon-link-button-success-foreground, var(--ui-success-foreground, hsl(104 50% 30% / 1)));}:host([warning]){--ui-icon-link-button-background:var(--ui-icon-link-button-warning-background, var(--ui-warning-background, hsl(45 50% 90% / 1)));--ui-icon-link-button-foreground:var(--ui-icon-link-button-warning-foreground, var(--ui-warning-foreground, hsl(45 50% 30% / 1)));}:host([danger]){--ui-icon-link-button-background:var(--ui-icon-link-button-danger-background, var(--ui-danger-background, hsl(0 50% 90% / 1)));--ui-icon-link-button-foreground:var(--ui-icon-link-button-danger-foreground, var(--ui-danger-foreground, hsl(0 50% 30% / 1)));}:host([info]){--ui-icon-link-button-background:var(--ui-icon-link-button-info-background, var(--ui-info-background, hsl(190 50% 90% / 1)));--ui-icon-link-button-foreground:var(--ui-icon-link-button-info-foreground, var(--ui-info-foreground, hsl(190 90% 30% / 1)));}:host([highlight]){--ui-icon-link-button-background:var(--ui-icon-link-button-highlight-background, var(--ui-highlight-background, hsl(302 50% 90% / 1)));--ui-icon-link-button-foreground:var(--ui-icon-link-button-highlight-foreground, var(--ui-highlight-foreground, hsl(302 50% 30% / 1)));}:host([invert]) a{background-color:var(--ui-icon-link-button-foreground);color:var(--ui-icon-link-button-background);--ui-icon-primary-color:var(--ui-icon-link-button-background);}:host([outline]){& a{background-color:transparent;color:var(--ui-icon-link-button-foreground);border-style:var(--ui-icon-link-button-border-style, solid);border-width:var(--ui-icon-link-button-border-width, var(--ui-border-width, 1px));border-color:var(--ui-icon-link-button-border-color, var(--ui-icon-link-button-foreground));}& a[href]:hover{background-color:var(--ui-icon-link-button-foreground);color:var(--ui-icon-link-button-background);--ui-icon-primary-color:var(--ui-icon-link-button-background);}& a[href]:active, a[href]:focus-visible{background-color:var(--ui-icon-link-button-foreground);color:var(--ui-icon-link-button-background);--ui-icon-primary-color:var(--ui-icon-link-button-background);}} :host([blank]){& a{background-color:transparent;color:var(--ui-icon-link-button-foreground);transition:background-color var(--ui-animation-duration-default, 200ms) ease-in-out;}& a[href]:hover{background-color:var(--ui-icon-link-button-background);color:var(--ui-icon-link-button-foreground);--ui-icon-primary-color:var(--ui-icon-link-button-foreground);}& a[href]:active, a[href]:focus-visible{background-color:var(--ui-icon-link-button-background);color:var(--ui-icon-link-button-foreground);}} :host([disabled]) a{cursor:not-allowed;filter:brightness(75%);}a:focus-visible{outline-offset:2px;outline-style:solid;outline-width:2px;outline-color:var(--ui-icon-link-button-foreground);}:host(:not([blank]):not([outline]):not([disabled])) a:hover{filter:brightness(85%);}:host(:not([blank]):not([outline])) a:not([disabled]):active, a:not([disabled]):active{filter:brightness(65%);}::slotted(*:not(:defined)){display:none;}@media (forced-colors:active) or (prefers-contrast:more){a, :host([outline]) a{border-style:solid;border-width:2px;border-color:var(--ui-button-foreground);box-shadow:none;}a:focus-visible{outline-width:3px;}:host([invert]) a, :host([outline]) a:not([disabled]):hover{background-color:var(--ui-icon-link-button-background);color:var(--ui-icon-link-button-foreground);--ui-icon-primary-color:var(--ui-icon-link-button-foreground);}}",UiIconLinkButton.uiHtml="<a><slot></slot></a>",o.createUi(UiIconLinkButton,"ui-icon-link-button",import.meta.url);