@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
1 lines • 32.8 kB
JavaScript
var __awaiter=this&&this.__awaiter||function(t,e,a,o){function r(t){return t instanceof a?t:new a((function(e){e(t)}))}return new(a||(a=Promise))((function(a,n){function c(t){try{l(o.next(t))}catch(e){n(e)}}function i(t){try{l(o["throw"](t))}catch(e){n(e)}}function l(t){t.done?a(t.value):r(t.value).then(c,i)}l((o=o.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var a={label:0,sent:function(){if(n[0]&1)throw n[1];return n[1]},trys:[],ops:[]},o,r,n,c;return c={next:i(0),throw:i(1),return:i(2)},typeof Symbol==="function"&&(c[Symbol.iterator]=function(){return this}),c;function i(t){return function(e){return l([t,e])}}function l(c){if(o)throw new TypeError("Generator is already executing.");while(a)try{if(o=1,r&&(n=c[0]&2?r["return"]:c[0]?r["throw"]||((n=r["return"])&&n.call(r),0):r.next)&&!(n=n.call(r,c[1])).done)return n;if(r=0,n)c=[c[0]&2,n.value];switch(c[0]){case 0:case 1:n=c;break;case 4:a.label++;return{value:c[1],done:false};case 5:a.label++;r=c[1];c=[0];continue;case 7:c=a.ops.pop();a.trys.pop();continue;default:if(!(n=a.trys,n=n.length>0&&n[n.length-1])&&(c[0]===6||c[0]===2)){a=0;continue}if(c[0]===3&&(!n||c[1]>n[0]&&c[1]<n[3])){a.label=c[1];break}if(c[0]===6&&a.label<n[1]){a.label=n[1];n=c;break}if(n&&a.label<n[2]){a.label=n[2];a.ops.push(c);break}if(n[2])a.ops.pop();a.trys.pop();continue}c=e.call(t,a)}catch(i){c=[6,i];r=0}finally{o=n=0}if(c[0]&5)throw c[1];return{value:c[0]?c[1]:void 0,done:true}}};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";var CSS={buttonLoader:"calcite-button--loader",content:"content",contentSlotted:"content--slotted",icon:"icon",iconStart:"icon--start",iconEnd:"icon--end"};var TEXT={loading:"Loading"};var 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}";var CalciteButton=function(){function t(t){var e=this;registerInstance(this,t);this.alignment="center";this.appearance="solid";this.color="blue";this.intlLoading=TEXT.loading;this.loading=false;this.round=false;this.scale="m";this.splitChild=false;this.width="auto";this.childElType="button";this.hasContent=false;this.handleClick=function(t){if(e.childElType==="button"&&e.type!=="button"){var a=e.el.getAttribute("form");var o=a?document.getElementsByName(""+a)[0]:e.el.closest("form");if(o){var r=o.onsubmit;switch(e.type){case"submit":if(r){r()}else if(o.checkValidity()){o.submit()}else{o.reportValidity()}break;case"reset":o.reset();break}}t.preventDefault()}}}t.prototype.connectedCallback=function(){this.childElType=this.href?"a":"button";this.setupTextContentObserver()};t.prototype.disconnectedCallback=function(){this.observer.disconnect()};t.prototype.componentWillLoad=function(){{this.updateHasContent();if(this.childElType==="button"&&!this.type){this.type="submit"}}};t.prototype.render=function(){var t,e,a;var o=this;var r=getElementDir(this.el);var n=this.childElType;var c=h("div",{class:CSS.buttonLoader},h("calcite-loader",{active:true,inline:true,label:this.intlLoading}));var i=this.scale==="l"?"m":"s";var l=h("calcite-icon",{class:(t={},t[CSS.icon]=true,t[CSS.iconStart]=true,t),flipRtl:this.iconFlipRtl==="start"||this.iconFlipRtl==="both",icon:this.iconStart,scale:i});var s=h("calcite-icon",{class:(e={},e[CSS.icon]=true,e[CSS.iconEnd]=true,e),flipRtl:this.iconFlipRtl==="end"||this.iconFlipRtl==="both",icon:this.iconEnd,scale:i});var p=h("span",{class:CSS.content},h("slot",null));return h(n,{"aria-label":this.label,class:(a={},a[CSS_UTILITY.rtl]=r==="rtl",a[CSS.contentSlotted]=this.hasContent,a),disabled:this.disabled,href:this.childElType==="a"&&this.href,name:this.childElType==="button"&&this.name,onClick:this.handleClick,ref:function(t){return o.childEl=t},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?c:null,this.iconStart?l:null,this.hasContent?p:null,this.iconEnd?s:null)};t.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.childEl.focus();return[2]}))}))};t.prototype.updateHasContent=function(){var t,e;var a=this.el.textContent.trim().length>0||this.el.childNodes.length>0;this.hasContent=this.el.childNodes.length===1&&((t=this.el.childNodes[0])===null||t===void 0?void 0:t.nodeName)==="#text"?((e=this.el.textContent)===null||e===void 0?void 0:e.trim().length)>0:a};t.prototype.setupTextContentObserver=function(){var t=this;{this.observer=new MutationObserver((function(){t.updateHasContent()}));this.observer.observe(this.el,{childList:true,subtree:true})}};Object.defineProperty(t.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});return t}();CalciteButton.style=calciteButtonCss;export{CalciteButton as calcite_button};