@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
144 lines (139 loc) • 33.9 kB
JavaScript
import { r as registerInstance, h, g as getElement } from './index-aa8afca4.js';
import { g as getElementDir, C as CSS_UTILITY } from './dom-466af3c7.js';
import './guid-09142681.js';
const CSS = {
buttonLoader: "calcite-button--loader",
content: "content",
contentSlotted: "content--slotted",
icon: "icon",
iconStart: "icon--start",
iconEnd: "icon--end"
};
const TEXT = {
loading: "Loading"
};
const calciteButtonCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-popper-transition:150ms ease-in-out}:host([hidden]){display:none}:host{display:inline-block;width:auto;vertical-align:middle}:host([round]){border-radius:50px}:host([round]) a,:host([round]) button{border-radius:50px}:host button,:host a{outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out}:host button:focus,:host a:focus{outline:2px solid var(--calcite-ui-brand);outline-offset:2px}:host button,:host a{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:0.375rem 1rem;text-decoration:none;width:100%;height:100%;border-radius:0;border:none;-webkit-user-select:none;-ms-user-select:none;-moz-user-select:none;user-select:none;font-family:inherit;-webkit-appearance:none;cursor:pointer;text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:background-color 0.15s ease-in-out, border 0.15s ease-in-out, outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out, -webkit-box-shadow 0.15s ease-in-out;transition:background-color 0.15s ease-in-out, border 0.15s ease-in-out, outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out, -webkit-box-shadow 0.15s ease-in-out;transition:background-color 0.15s ease-in-out, border 0.15s ease-in-out, box-shadow 0.15s ease-in-out, outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;transition:background-color 0.15s ease-in-out, border 0.15s ease-in-out, box-shadow 0.15s ease-in-out, outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out, -webkit-box-shadow 0.15s ease-in-out}:host button:hover,:host a:hover{text-decoration:none}.content{display:-ms-flexbox;display:flex;-ms-flex-preferred-size:auto;flex-basis:auto;margin-left:0.5rem;margin-right:0.5rem}:host(:not([icon-start])) .content{margin-left:unset}:host(:not([icon-end])) .content{margin-right:unset}:host([icon-start]:not([icon-end])) .calcite--rtl .content{margin-left:unset;margin-right:0.5rem}:host([icon-end]:not([icon-start])) .calcite--rtl .content{margin-right:unset;margin-left:0.5rem}:host([width=auto]){width:auto}:host([width=half]){width:50%}:host([width=full]){width:100%}:host([alignment=center]:not([width=auto])) a,:host([alignment=center]:not([width=auto])) button{-ms-flex-pack:center;justify-content:center}:host([alignment=start]:not([width=auto])) a,:host([alignment=start]:not([width=auto])) button{-ms-flex-pack:start;justify-content:flex-start}:host([alignment=end]:not([width=auto])) a,:host([alignment=end]:not([width=auto])) button{-ms-flex-pack:end;justify-content:flex-end}:host([alignment*=space-between]:not([width=auto])) a,:host([alignment*=space-between]:not([width=auto])) button{-ms-flex-pack:justify;justify-content:space-between}:host([alignment=icon-start-space-between]:not([width=auto])) .icon--start{margin-right:auto}:host([alignment=icon-start-space-between]:not([width=auto])) a,:host([alignment=icon-start-space-between]:not([width=auto])) button{text-align:unset}:host([alignment=icon-end-space-between]:not([width=auto])) .icon--end{margin-left:auto}:host([alignment=icon-end-space-between]:not([width=auto])) a,:host([alignment=icon-end-space-between]:not([width=auto])) button{text-align:unset}:host([alignment=icon-start-space-between]:not([width=auto])) .calcite--rtl .icon--start{margin-right:unset;margin-left:auto}:host([alignment=icon-end-space-between]:not([width=auto])) .calcite--rtl .icon--end{margin-left:unset;margin-right:auto}:host([alignment=center]) a:not(.content--slotted) .icon--start+.icon--end,:host([alignment=center]) button:not(.content--slotted) .icon--start+.icon--end{margin-left:0.5rem}:host([alignment=center]) .calcite--rtl a:not(.content--slotted) .icon--start+.icon--end,:host([alignment=center]) .calcite--rtl button:not(.content--slotted) .icon--start+.icon--end{margin-left:unset;margin-right:0.5rem}.icon{display:-ms-inline-flexbox;display:inline-flex;position:relative;margin:0;line-height:inherit;-webkit-transition:150ms ease-in-out;transition:150ms ease-in-out}:host([disabled]){pointer-events:none}:host([disabled]) button,:host([disabled]) a{pointer-events:none;opacity:var(--calcite-ui-opacity-disabled)}.calcite-button--loader{display:-ms-flexbox;display:flex;position:absolute;top:0;left:0;right:0;bottom:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.calcite-button--loader calcite-loader{margin:0}:host([loading]) button,:host([loading]) a{color:transparent !important;pointer-events:none}:host([loading]) button .calcite-button--icon,:host([loading]) a .calcite-button--icon{opacity:0}:host([appearance=solid][color=blue]) button,:host([appearance=solid][color=blue]) a{color:var(--calcite-ui-foreground-1);background-color:var(--calcite-ui-brand);border:1px solid transparent}:host([appearance=solid][color=blue]) button:hover,:host([appearance=solid][color=blue]) button:focus,:host([appearance=solid][color=blue]) a:hover,:host([appearance=solid][color=blue]) a:focus{background-color:var(--calcite-ui-brand-hover)}:host([appearance=solid][color=blue]) button:active,:host([appearance=solid][color=blue]) a:active{background-color:var(--calcite-ui-brand)}:host([appearance=solid][color=blue]) button .calcite-button--icon,:host([appearance=solid][color=blue]) a .calcite-button--icon{fill:var(--calcite-ui-foreground-1)}:host([appearance=solid][color=blue]) button calcite-loader,:host([appearance=solid][color=blue]) a calcite-loader{color:var(--calcite-ui-foreground-1)}:host([appearance=solid][color=red]) button,:host([appearance=solid][color=red]) a{color:var(--calcite-ui-foreground-1);background-color:var(--calcite-ui-danger);border:1px solid transparent}:host([appearance=solid][color=red]) button:hover,:host([appearance=solid][color=red]) button:focus,:host([appearance=solid][color=red]) a:hover,:host([appearance=solid][color=red]) a:focus{background-color:var(--calcite-ui-danger-hover)}:host([appearance=solid][color=red]) button:active,:host([appearance=solid][color=red]) a:active{background-color:var(--calcite-ui-danger)}:host([appearance=solid][color=red]) button .calcite-button--icon,:host([appearance=solid][color=red]) a .calcite-button--icon{fill:var(--calcite-ui-foreground-1)}:host([appearance=solid][color=red]) button calcite-loader,:host([appearance=solid][color=red]) a calcite-loader{color:var(--calcite-ui-foreground-1)}:host([appearance=solid][color=neutral]) button,:host([appearance=solid][color=neutral]) a{color:var(--calcite-ui-text-1);background-color:var(--calcite-ui-foreground-3);border:1px solid transparent}:host([appearance=solid][color=neutral]) button:hover,:host([appearance=solid][color=neutral]) button:focus,:host([appearance=solid][color=neutral]) a:hover,:host([appearance=solid][color=neutral]) a:focus{background-color:var(--calcite-ui-foreground-2)}:host([appearance=solid][color=neutral]) button:active,:host([appearance=solid][color=neutral]) a:active{background-color:var(--calcite-ui-foreground-3)}:host([appearance=solid][color=neutral]) button .calcite-button--icon,:host([appearance=solid][color=neutral]) a .calcite-button--icon{fill:var(--calcite-ui-text-1)}:host([appearance=solid][color=neutral]) button calcite-loader,:host([appearance=solid][color=neutral]) a calcite-loader{color:var(--calcite-ui-text-1)}:host([appearance=solid][color=inverse]) button,:host([appearance=solid][color=inverse]) a{color:#ffffff;background-color:var(--calcite-ui-inverse);border:1px solid transparent}:host([appearance=solid][color=inverse]) button:hover,:host([appearance=solid][color=inverse]) button:focus,:host([appearance=solid][color=inverse]) a:hover,:host([appearance=solid][color=inverse]) a:focus{background-color:var(--calcite-ui-inverse-hover)}:host([appearance=solid][color=inverse]) button:active,:host([appearance=solid][color=inverse]) a:active{background-color:var(--calcite-ui-inverse)}:host([appearance=solid][color=inverse]) button .calcite-button--icon,:host([appearance=solid][color=inverse]) a .calcite-button--icon{fill:#ffffff}:host([appearance=solid][color=inverse]) button calcite-loader,:host([appearance=solid][color=inverse]) a calcite-loader{color:#ffffff}:host([appearance=outline][color=blue]) button,:host([appearance=outline][color=blue]) a{color:var(--calcite-ui-brand);background-color:var(--calcite-ui-foreground-1);border:1px solid var(--calcite-ui-brand);-webkit-box-shadow:inset 0 0 0 1px transparent;box-shadow:inset 0 0 0 1px transparent}:host([appearance=outline][color=blue]) button:hover,:host([appearance=outline][color=blue]) a:hover{border-color:var(--calcite-ui-brand);-webkit-box-shadow:inset 0 0 0 1px var(--calcite-ui-brand);box-shadow:inset 0 0 0 1px var(--calcite-ui-brand)}:host([appearance=outline][color=blue]) button:active,:host([appearance=outline][color=blue]) button:focus,:host([appearance=outline][color=blue]) a:active,:host([appearance=outline][color=blue]) a:focus{color:var(--calcite-ui-brand-press);border-color:var(--calcite-ui-brand-press);-webkit-box-shadow:inset 0 0 0 2px var(--calcite-ui-brand-press);box-shadow:inset 0 0 0 2px var(--calcite-ui-brand-press)}:host([appearance=outline][color=blue]) button:active .calcite-button--icon,:host([appearance=outline][color=blue]) button:focus .calcite-button--icon,:host([appearance=outline][color=blue]) a:active .calcite-button--icon,:host([appearance=outline][color=blue]) a:focus .calcite-button--icon{fill:var(--calcite-ui-brand-press)}:host([appearance=outline][color=blue]) button .calcite-button--icon,:host([appearance=outline][color=blue]) a .calcite-button--icon{fill:var(--calcite-ui-brand)}:host([appearance=outline][color=blue]) button calcite-loader,:host([appearance=outline][color=blue]) a calcite-loader{color:var(--calcite-ui-brand)}:host([appearance=outline][color=red]) button,:host([appearance=outline][color=red]) a{color:var(--calcite-ui-danger);background-color:var(--calcite-ui-foreground-1);border:1px solid var(--calcite-ui-danger);-webkit-box-shadow:inset 0 0 0 1px transparent;box-shadow:inset 0 0 0 1px transparent}:host([appearance=outline][color=red]) button:hover,:host([appearance=outline][color=red]) a:hover{border-color:var(--calcite-ui-danger);-webkit-box-shadow:inset 0 0 0 1px var(--calcite-ui-danger);box-shadow:inset 0 0 0 1px var(--calcite-ui-danger)}:host([appearance=outline][color=red]) button:active,:host([appearance=outline][color=red]) button:focus,:host([appearance=outline][color=red]) a:active,:host([appearance=outline][color=red]) a:focus{color:var(--calcite-ui-danger-press);border-color:var(--calcite-ui-danger-press);-webkit-box-shadow:inset 0 0 0 2px var(--calcite-ui-danger-press);box-shadow:inset 0 0 0 2px var(--calcite-ui-danger-press)}:host([appearance=outline][color=red]) button:active .calcite-button--icon,:host([appearance=outline][color=red]) button:focus .calcite-button--icon,:host([appearance=outline][color=red]) a:active .calcite-button--icon,:host([appearance=outline][color=red]) a:focus .calcite-button--icon{fill:var(--calcite-ui-danger-press)}:host([appearance=outline][color=red]) button .calcite-button--icon,:host([appearance=outline][color=red]) a .calcite-button--icon{fill:var(--calcite-ui-danger)}:host([appearance=outline][color=red]) button calcite-loader,:host([appearance=outline][color=red]) a calcite-loader{color:var(--calcite-ui-danger)}:host([appearance=outline][color=neutral]) button,:host([appearance=outline][color=neutral]) a{color:var(--calcite-ui-text-1);background-color:var(--calcite-ui-foreground-1);border:1px solid var(--calcite-ui-foreground-3);-webkit-box-shadow:inset 0 0 0 1px transparent;box-shadow:inset 0 0 0 1px transparent}:host([appearance=outline][color=neutral]) button:hover,:host([appearance=outline][color=neutral]) a:hover{border-color:var(--calcite-ui-foreground-3);-webkit-box-shadow:inset 0 0 0 1px var(--calcite-ui-foreground-3);box-shadow:inset 0 0 0 1px var(--calcite-ui-foreground-3)}:host([appearance=outline][color=neutral]) button:active,:host([appearance=outline][color=neutral]) button:focus,:host([appearance=outline][color=neutral]) a:active,:host([appearance=outline][color=neutral]) a:focus{color:var(--calcite-ui-text-1);border-color:var(--calcite-ui-border-2);-webkit-box-shadow:inset 0 0 0 2px var(--calcite-ui-border-2);box-shadow:inset 0 0 0 2px var(--calcite-ui-border-2)}:host([appearance=outline][color=neutral]) button:active .calcite-button--icon,:host([appearance=outline][color=neutral]) button:focus .calcite-button--icon,:host([appearance=outline][color=neutral]) a:active .calcite-button--icon,:host([appearance=outline][color=neutral]) a:focus .calcite-button--icon{fill:var(--calcite-ui-text-1)}:host([appearance=outline][color=neutral]) button .calcite-button--icon,:host([appearance=outline][color=neutral]) a .calcite-button--icon{fill:var(--calcite-ui-text-1)}:host([appearance=outline][color=neutral]) button calcite-loader,:host([appearance=outline][color=neutral]) a calcite-loader{color:var(--calcite-ui-text-1)}:host([appearance=outline][color=inverse]) button,:host([appearance=outline][color=inverse]) a{color:var(--calcite-ui-text-1);background-color:var(--calcite-ui-foreground-1);border:1px solid var(--calcite-ui-inverse);-webkit-box-shadow:inset 0 0 0 1px transparent;box-shadow:inset 0 0 0 1px transparent}:host([appearance=outline][color=inverse]) button:hover,:host([appearance=outline][color=inverse]) a:hover{border-color:var(--calcite-ui-inverse);-webkit-box-shadow:inset 0 0 0 1px var(--calcite-ui-inverse);box-shadow:inset 0 0 0 1px var(--calcite-ui-inverse)}:host([appearance=outline][color=inverse]) button:active,:host([appearance=outline][color=inverse]) button:focus,:host([appearance=outline][color=inverse]) a:active,:host([appearance=outline][color=inverse]) a:focus{color:var(--calcite-ui-text-1);border-color:var(--calcite-ui-inverse-hover);-webkit-box-shadow:inset 0 0 0 2px var(--calcite-ui-inverse-hover);box-shadow:inset 0 0 0 2px var(--calcite-ui-inverse-hover)}:host([appearance=outline][color=inverse]) button:active .calcite-button--icon,:host([appearance=outline][color=inverse]) button:focus .calcite-button--icon,:host([appearance=outline][color=inverse]) a:active .calcite-button--icon,:host([appearance=outline][color=inverse]) a:focus .calcite-button--icon{fill:var(--calcite-ui-text-1)}:host([appearance=outline][color=inverse]) button .calcite-button--icon,:host([appearance=outline][color=inverse]) a .calcite-button--icon{fill:var(--calcite-ui-text-1)}:host([appearance=outline][color=inverse]) button calcite-loader,:host([appearance=outline][color=inverse]) a calcite-loader{color:var(--calcite-ui-text-1)}:host([appearance=clear][color=blue]) button,:host([appearance=clear][color=blue]) a{color:var(--calcite-ui-brand);background-color:transparent;border:1px solid var(--calcite-ui-brand);-webkit-box-shadow:inset 0 0 0 1px transparent;box-shadow:inset 0 0 0 1px transparent}:host([appearance=clear][color=blue]) button:hover,:host([appearance=clear][color=blue]) a:hover{border-color:var(--calcite-ui-brand);-webkit-box-shadow:inset 0 0 0 1px var(--calcite-ui-brand);box-shadow:inset 0 0 0 1px var(--calcite-ui-brand)}:host([appearance=clear][color=blue]) button:active,:host([appearance=clear][color=blue]) button:focus,:host([appearance=clear][color=blue]) a:active,:host([appearance=clear][color=blue]) a:focus{color:var(--calcite-ui-brand-press);border-color:var(--calcite-ui-brand-press);-webkit-box-shadow:inset 0 0 0 2px var(--calcite-ui-brand-press);box-shadow:inset 0 0 0 2px var(--calcite-ui-brand-press)}:host([appearance=clear][color=blue]) button:active .calcite-button--icon,:host([appearance=clear][color=blue]) button:focus .calcite-button--icon,:host([appearance=clear][color=blue]) a:active .calcite-button--icon,:host([appearance=clear][color=blue]) a:focus .calcite-button--icon{fill:var(--calcite-ui-brand-press)}:host([appearance=clear][color=blue]) button .calcite-button--icon,:host([appearance=clear][color=blue]) a .calcite-button--icon{fill:var(--calcite-ui-brand)}:host([appearance=clear][color=blue]) button calcite-loader,:host([appearance=clear][color=blue]) a calcite-loader{color:var(--calcite-ui-brand)}:host([appearance=clear][color=red]) button,:host([appearance=clear][color=red]) a{color:var(--calcite-ui-danger);background-color:transparent;border:1px solid var(--calcite-ui-danger);-webkit-box-shadow:inset 0 0 0 1px transparent;box-shadow:inset 0 0 0 1px transparent}:host([appearance=clear][color=red]) button:hover,:host([appearance=clear][color=red]) a:hover{border-color:var(--calcite-ui-danger);-webkit-box-shadow:inset 0 0 0 1px var(--calcite-ui-danger);box-shadow:inset 0 0 0 1px var(--calcite-ui-danger)}:host([appearance=clear][color=red]) button:active,:host([appearance=clear][color=red]) button:focus,:host([appearance=clear][color=red]) a:active,:host([appearance=clear][color=red]) a:focus{color:var(--calcite-ui-danger-press);border-color:var(--calcite-ui-danger-press);-webkit-box-shadow:inset 0 0 0 2px var(--calcite-ui-danger-press);box-shadow:inset 0 0 0 2px var(--calcite-ui-danger-press)}:host([appearance=clear][color=red]) button:active .calcite-button--icon,:host([appearance=clear][color=red]) button:focus .calcite-button--icon,:host([appearance=clear][color=red]) a:active .calcite-button--icon,:host([appearance=clear][color=red]) a:focus .calcite-button--icon{fill:var(--calcite-ui-danger-press)}:host([appearance=clear][color=red]) button .calcite-button--icon,:host([appearance=clear][color=red]) a .calcite-button--icon{fill:var(--calcite-ui-danger)}:host([appearance=clear][color=red]) button calcite-loader,:host([appearance=clear][color=red]) a calcite-loader{color:var(--calcite-ui-danger)}:host([appearance=clear][color=neutral]) button,:host([appearance=clear][color=neutral]) a{color:var(--calcite-ui-text-1);background-color:transparent;border:1px solid var(--calcite-ui-foreground-3);-webkit-box-shadow:inset 0 0 0 1px transparent;box-shadow:inset 0 0 0 1px transparent}:host([appearance=clear][color=neutral]) button:hover,:host([appearance=clear][color=neutral]) a:hover{border-color:var(--calcite-ui-foreground-3);-webkit-box-shadow:inset 0 0 0 1px var(--calcite-ui-foreground-3);box-shadow:inset 0 0 0 1px var(--calcite-ui-foreground-3)}:host([appearance=clear][color=neutral]) button:active,:host([appearance=clear][color=neutral]) button:focus,:host([appearance=clear][color=neutral]) a:active,:host([appearance=clear][color=neutral]) a:focus{color:var(--calcite-ui-text-1);border-color:var(--calcite-ui-border-2);-webkit-box-shadow:inset 0 0 0 2px var(--calcite-ui-border-2);box-shadow:inset 0 0 0 2px var(--calcite-ui-border-2)}:host([appearance=clear][color=neutral]) button:active .calcite-button--icon,:host([appearance=clear][color=neutral]) button:focus .calcite-button--icon,:host([appearance=clear][color=neutral]) a:active .calcite-button--icon,:host([appearance=clear][color=neutral]) a:focus .calcite-button--icon{fill:var(--calcite-ui-text-1)}:host([appearance=clear][color=neutral]) button .calcite-button--icon,:host([appearance=clear][color=neutral]) a .calcite-button--icon{fill:var(--calcite-ui-text-1)}:host([appearance=clear][color=neutral]) button calcite-loader,:host([appearance=clear][color=neutral]) a calcite-loader{color:var(--calcite-ui-text-1)}:host([appearance=clear][color=inverse]) button,:host([appearance=clear][color=inverse]) a{color:var(--calcite-ui-text-1);background-color:transparent;border:1px solid var(--calcite-ui-inverse);-webkit-box-shadow:inset 0 0 0 1px transparent;box-shadow:inset 0 0 0 1px transparent}:host([appearance=clear][color=inverse]) button:hover,:host([appearance=clear][color=inverse]) a:hover{border-color:var(--calcite-ui-inverse);-webkit-box-shadow:inset 0 0 0 1px var(--calcite-ui-inverse);box-shadow:inset 0 0 0 1px var(--calcite-ui-inverse)}:host([appearance=clear][color=inverse]) button:active,:host([appearance=clear][color=inverse]) button:focus,:host([appearance=clear][color=inverse]) a:active,:host([appearance=clear][color=inverse]) a:focus{color:var(--calcite-ui-text-1);border-color:var(--calcite-ui-inverse-hover);-webkit-box-shadow:inset 0 0 0 2px var(--calcite-ui-inverse-hover);box-shadow:inset 0 0 0 2px var(--calcite-ui-inverse-hover)}:host([appearance=clear][color=inverse]) button:active .calcite-button--icon,:host([appearance=clear][color=inverse]) button:focus .calcite-button--icon,:host([appearance=clear][color=inverse]) a:active .calcite-button--icon,:host([appearance=clear][color=inverse]) a:focus .calcite-button--icon{fill:var(--calcite-ui-text-1)}:host([appearance=clear][color=inverse]) button .calcite-button--icon,:host([appearance=clear][color=inverse]) a .calcite-button--icon{fill:var(--calcite-ui-text-1)}:host([appearance=clear][color=inverse]) button calcite-loader,:host([appearance=clear][color=inverse]) a calcite-loader{color:var(--calcite-ui-text-1)}:host([appearance=outline][split-child=primary]) button,:host([appearance=clear][split-child=primary]) button{border-right:0}:host([appearance=outline][split-child=secondary]) button .calcite--rtl,:host([appearance=clear][split-child=secondary]) button .calcite--rtl{border-right:0}:host([appearance=outline][split-child=secondary]) button,:host([appearance=clear][split-child=secondary]) button{border-left:0}:host([appearance=outline][split-child=primary]) button .calcite--rtl,:host([appearance=clear][split-child=primary]) button .calcite--rtl{border-left:0}:host([appearance=transparent][color=blue]) button,:host([appearance=transparent][color=blue]) a{color:var(--calcite-ui-text-link);background-color:transparent}:host([appearance=transparent][color=blue]) button:hover,:host([appearance=transparent][color=blue]) button:focus,:host([appearance=transparent][color=blue]) a:hover,:host([appearance=transparent][color=blue]) a:focus{background-color:var(--calcite-button-transparent-hover)}:host([appearance=transparent][color=blue]) button:active,:host([appearance=transparent][color=blue]) a:active{background-color:var(--calcite-button-transparent-press)}:host([appearance=transparent][color=blue]) button calcite-loader,:host([appearance=transparent][color=blue]) a calcite-loader{color:var(--calcite-ui-text-link)}:host([appearance=transparent][color=red]) button,:host([appearance=transparent][color=red]) a{color:var(--calcite-ui-danger-press);background-color:transparent}:host([appearance=transparent][color=red]) button:hover,:host([appearance=transparent][color=red]) button:focus,:host([appearance=transparent][color=red]) a:hover,:host([appearance=transparent][color=red]) a:focus{background-color:var(--calcite-button-transparent-hover)}:host([appearance=transparent][color=red]) button:active,:host([appearance=transparent][color=red]) a:active{background-color:var(--calcite-button-transparent-press)}:host([appearance=transparent][color=red]) button calcite-loader,:host([appearance=transparent][color=red]) a calcite-loader{color:var(--calcite-ui-danger-press)}:host([appearance=transparent][color=neutral]) button,:host([appearance=transparent][color=neutral]) a{color:var(--calcite-ui-text-1);background-color:transparent}:host([appearance=transparent][color=neutral]) button:hover,:host([appearance=transparent][color=neutral]) button:focus,:host([appearance=transparent][color=neutral]) a:hover,:host([appearance=transparent][color=neutral]) a:focus{background-color:var(--calcite-button-transparent-hover)}:host([appearance=transparent][color=neutral]) button:active,:host([appearance=transparent][color=neutral]) a:active{background-color:var(--calcite-button-transparent-press)}:host([appearance=transparent][color=neutral]) button calcite-loader,:host([appearance=transparent][color=neutral]) a calcite-loader{color:var(--calcite-ui-text-1)}:host([appearance=transparent][color=inverse]) button,:host([appearance=transparent][color=inverse]) a{color:var(--calcite-ui-foreground-1);background-color:transparent}:host([appearance=transparent][color=inverse]) button:hover,:host([appearance=transparent][color=inverse]) button:focus,:host([appearance=transparent][color=inverse]) a:hover,:host([appearance=transparent][color=inverse]) a:focus{background-color:var(--calcite-button-transparent-hover)}:host([appearance=transparent][color=inverse]) button:active,:host([appearance=transparent][color=inverse]) a:active{background-color:var(--calcite-button-transparent-press)}:host([appearance=transparent][color=inverse]) button calcite-loader,:host([appearance=transparent][color=inverse]) a calcite-loader{color:var(--calcite-ui-foreground-1)}:host([scale=s]:not([appearance=transparent])) button.content--slotted,:host([scale=s]:not([appearance=transparent])) a.content--slotted{padding:7px 12px;font-size:12px;line-height:1.33}:host([scale=s][appearance=transparent]) button.content--slotted,:host([scale=s][appearance=transparent]) a.content--slotted{padding:8px 12px;font-size:12px;line-height:1.33}:host([scale=m]:not([appearance=transparent])) button.content--slotted,:host([scale=m]:not([appearance=transparent])) a.content--slotted{padding:13px 20px;font-size:14px;line-height:1.15}:host([scale=m][appearance=transparent]) button.content--slotted,:host([scale=m][appearance=transparent]) a.content--slotted{padding:14px 20px;font-size:14px;line-height:1.15}:host([scale=l]:not([appearance=transparent])) button.content--slotted,:host([scale=l]:not([appearance=transparent])) a.content--slotted{padding:15px 24px;font-size:18px;line-height:1.2}:host([scale=l][appearance=transparent]) button.content--slotted,:host([scale=l][appearance=transparent]) a.content--slotted{padding:16px 24px;font-size:18px;line-height:1.2}:host([scale=s]) button:not(.content--slotted),:host([scale=s]) a:not(.content--slotted){height:32px;width:32px;font-size:12px}:host([scale=m]) button:not(.content--slotted),:host([scale=m]) a:not(.content--slotted){height:44px;width:44px;font-size:14px}:host([scale=l]) button:not(.content--slotted),:host([scale=l]) a:not(.content--slotted){height:56px;width:56px;font-size:18px}:host([scale=s][icon-start][icon-end]) button:not(.content--slotted),:host([scale=s][icon-start][icon-end]) a:not(.content--slotted){height:32px;width:48px;font-size:12px}:host([scale=m][icon-start][icon-end]) button:not(.content--slotted),:host([scale=m][icon-start][icon-end]) a:not(.content--slotted){height:44px;width:66px;font-size:14px}:host([scale=l][icon-start][icon-end]) button:not(.content--slotted),:host([scale=l][icon-start][icon-end]) a:not(.content--slotted){height:56px;width:84px;font-size:18px}";
const CalciteButton = class {
constructor(hostRef) {
registerInstance(this, hostRef);
//--------------------------------------------------------------------------
//
// Properties
//
//--------------------------------------------------------------------------
/** optionally specify alignment of button elements. */
this.alignment = "center";
/** specify the appearance style of the button, defaults to solid. */
this.appearance = "solid";
/** specify the color of the button, defaults to blue */
this.color = "blue";
/** string to override English loading text */
this.intlLoading = TEXT.loading;
/** optionally add a calcite-loader component to the button, disabling interaction. */
this.loading = false;
/** optionally add a round style to the button */
this.round = false;
/** specify the scale of the button, defaults to m */
this.scale = "m";
/** is the button a child of a calcite-split-button */
this.splitChild = false;
/** specify the width of the button, defaults to auto */
this.width = "auto";
/** the node type of the rendered child element */
this.childElType = "button";
/** determine if there is slotted content for styling purposes */
this.hasContent = false;
//--------------------------------------------------------------------------
//
// Private Methods
//
//--------------------------------------------------------------------------
// act on a requested or nearby form based on type
this.handleClick = (e) => {
// this.type refers to type attribute, not child element type
if (this.childElType === "button" && this.type !== "button") {
const requestedForm = this.el.getAttribute("form");
const targetForm = requestedForm
? document.getElementsByName(`${requestedForm}`)[0]
: this.el.closest("form");
if (targetForm) {
const targetFormSubmitFunction = targetForm.onsubmit;
switch (this.type) {
case "submit":
if (targetFormSubmitFunction) {
targetFormSubmitFunction();
}
else if (targetForm.checkValidity()) {
targetForm.submit();
}
else {
targetForm.reportValidity();
}
break;
case "reset":
targetForm.reset();
break;
}
}
e.preventDefault();
}
};
}
//--------------------------------------------------------------------------
//
// Lifecycle
//
//--------------------------------------------------------------------------
connectedCallback() {
this.childElType = this.href ? "a" : "button";
this.setupTextContentObserver();
}
disconnectedCallback() {
this.observer.disconnect();
}
componentWillLoad() {
{
this.updateHasContent();
if (this.childElType === "button" && !this.type) {
this.type = "submit";
}
}
}
render() {
const dir = getElementDir(this.el);
const Tag = this.childElType;
const loader = (h("div", { class: CSS.buttonLoader }, h("calcite-loader", { active: true, inline: true, label: this.intlLoading })));
const iconScale = this.scale === "l" ? "m" : "s";
const iconStartEl = (h("calcite-icon", { class: { [CSS.icon]: true, [CSS.iconStart]: true }, flipRtl: this.iconFlipRtl === "start" || this.iconFlipRtl === "both", icon: this.iconStart, scale: iconScale }));
const iconEndEl = (h("calcite-icon", { class: { [CSS.icon]: true, [CSS.iconEnd]: true }, flipRtl: this.iconFlipRtl === "end" || this.iconFlipRtl === "both", icon: this.iconEnd, scale: iconScale }));
const contentEl = (h("span", { class: CSS.content }, h("slot", null)));
return (h(Tag, { "aria-label": this.label, class: { [CSS_UTILITY.rtl]: dir === "rtl", [CSS.contentSlotted]: this.hasContent }, disabled: this.disabled, href: this.childElType === "a" && this.href, name: this.childElType === "button" && this.name, onClick: this.handleClick, ref: (el) => (this.childEl = el), rel: this.childElType === "a" && this.el.getAttribute("rel"), tabIndex: this.disabled ? -1 : null, target: this.childElType === "a" && this.el.getAttribute("target"), type: this.childElType === "button" && this.type }, this.loading ? loader : null, this.iconStart ? iconStartEl : null, this.hasContent ? contentEl : null, this.iconEnd ? iconEndEl : null));
}
//--------------------------------------------------------------------------
//
// Public Methods
//
//--------------------------------------------------------------------------
async setFocus() {
this.childEl.focus();
}
updateHasContent() {
var _a, _b;
const slottedContent = this.el.textContent.trim().length > 0 || this.el.childNodes.length > 0;
this.hasContent =
this.el.childNodes.length === 1 && ((_a = this.el.childNodes[0]) === null || _a === void 0 ? void 0 : _a.nodeName) === "#text"
? ((_b = this.el.textContent) === null || _b === void 0 ? void 0 : _b.trim().length) > 0
: slottedContent;
}
setupTextContentObserver() {
{
this.observer = new MutationObserver(() => {
this.updateHasContent();
});
this.observer.observe(this.el, { childList: true, subtree: true });
}
}
get el() { return getElement(this); }
};
CalciteButton.style = calciteButtonCss;
export { CalciteButton as calcite_button };