423 lines
786 KiB
JavaScript
423 lines
786 KiB
JavaScript
|
(()=>{"use strict";const se=globalThis;function ee(e){return(se.__Zone_symbol_prefix||"__zone_symbol__")+e}const me=Object.getOwnPropertyDescriptor,Se=Object.defineProperty,Oe=Object.getPrototypeOf,dt=Object.create,_t=Array.prototype.slice,Ne="addEventListener",Ze="removeEventListener",Le=ee(Ne),Ie=ee(Ze),ae="true",le="false",ye=ee("");function Me(e,r){return Zone.current.wrap(e,r)}function Ae(e,r,c,t,i){return Zone.current.scheduleMacroTask(e,r,c,t,i)}const j=ee,Pe=typeof window<"u",pe=Pe?window:void 0,$=Pe&&pe||globalThis;function je(e,r){for(let c=e.length-1;c>=0;c--)"function"==typeof e[c]&&(e[c]=Me(e[c],r+"_"+c));return e}function Be(e){return!e||!1!==e.writable&&!("function"==typeof e.get&&typeof e.set>"u")}const ze=typeof WorkerGlobalScope<"u"&&self instanceof WorkerGlobalScope,Re=!("nw"in $)&&typeof $.process<"u"&&"[object process]"===$.process.toString(),He=!Re&&!ze&&!(!Pe||!pe.HTMLElement),Ue=typeof $.process<"u"&&"[object process]"===$.process.toString()&&!ze&&!(!Pe||!pe.HTMLElement),Ce={},gt=j("enable_beforeunload"),We=function(e){if(!(e=e||$.event))return;let r=Ce[e.type];r||(r=Ce[e.type]=j("ON_PROPERTY"+e.type));const c=this||e.target||$,t=c[r];let i;return He&&c===pe&&"error"===e.type?(i=t&&t.call(this,e.message,e.filename,e.lineno,e.colno,e.error),!0===i&&e.preventDefault()):(i=t&&t.apply(this,arguments),"beforeunload"===e.type&&$[gt]&&"string"==typeof i?e.returnValue=i:null!=i&&!i&&e.preventDefault()),i};function qe(e,r,c){let t=me(e,r);if(!t&&c&&me(c,r)&&(t={enumerable:!0,configurable:!0}),!t||!t.configurable)return;const i=j("on"+r+"patched");if(e.hasOwnProperty(i)&&e[i])return;delete t.writable,delete t.value;const u=t.get,E=t.set,T=r.slice(2);let m=Ce[T];m||(m=Ce[T]=j("ON_PROPERTY"+T)),t.set=function(D){let d=this;!d&&e===$&&(d=$),d&&("function"==typeof d[m]&&d.removeEventListener(T,We),E?.call(d,null),d[m]=D,"function"==typeof D&&d.addEventListener(T,We,!1))},t.get=function(){let D=this;if(!D&&e===$&&(D=$),!D)return null;const d=D[m];if(d)return d;if(u){let R=u.call(this);if(R)return t.set.call(this,R),"function"==typeof D.removeAttribute&&D.removeAttribute(r),R}return null},Se(e,r,t),e[i]=!0}function Xe(e,r,c){if(r)for(let t=0;t<r.length;t++)qe(e,"on"+r[t],c);else{const t=[];for(const i in e)"on"==i.slice(0,2)&&t.push(i);for(let i=0;i<t.length;i++)qe(e,t[i],c)}}const ne=j("originalInstance");function ve(e){const r=$[e];if(!r)return;$[j(e)]=r,$[e]=function(){const i=je(arguments,e);switch(i.length){case 0:this[ne]=new r;break;case 1:this[ne]=new r(i[0]);break;case 2:this[ne]=new r(i[0],i[1]);break;case 3:this[ne]=new r(i[0],i[1],i[2]);break;case 4:this[ne]=new r(i[0],i[1],i[2],i[3]);break;default:throw new Error("Arg list too long.")}},fe($[e],r);const c=new r(function(){});let t;for(t in c)"XMLHttpRequest"===e&&"responseBlob"===t||function(i){"function"==typeof c[i]?$[e].prototype[i]=function(){return this[ne][i].apply(this[ne],arguments)}:Se($[e].prototype,i,{set:function(u){"function"==typeof u?(this[ne][i]=Me(u,e+"."+i),fe(this[ne][i],u)):this[ne][i]=u},get:function(){return this[ne][i]}})}(t);for(t in r)"prototype"!==t&&r.hasOwnProperty(t)&&($[e][t]=r[t])}function ue(e,r,c){let t=e;for(;t&&!t.hasOwnProperty(r);)t=Oe(t);!t&&e[r]&&(t=e);const i=j(r);let u=null;if(t&&(!(u=t[i])||!t.hasOwnProperty(i))&&(u=t[i]=t[r],Be(t&&me(t,r)))){const T=c(u,i,r);t[r]=function(){return T(this,arguments)},fe(t[r],u)}return u}function kt(e,r,c){let t=null;function i(u){const E=u.data;return E.args[E.cbIdx]=function(){u.invoke.apply(this,arguments)},t.apply(E.target,E.args),u}t=ue(e,r,u=>function(E,T){const m=c(E,T);return m.cbIdx>=0&&"function"==typeof T[m.cbIdx]?Ae(m.name,T[m.cbIdx],m,i):u.apply(E,T)})}function fe(e,r){e[j("OriginalDelegate")]=r}let Ye=!1,Ve=!1;function mt(){if(Ye)return Ve;Ye=!0;try{const e=pe.navigator.userAgent;(-1!==e.indexOf("MSIE ")||-1!==e.indexOf("Trident/")||-1!==e.indexOf("Edge/"))&&(Ve=!0)}catch{}return Ve}function $e(e){return"function"==typeof e}function Je(e){return"number"==typeof e}const yt={useG:!0},te={},Ke={},Qe=new RegExp("^"+ye+"(\\w+)(true|false)$"),et=j("propagationStopped"
|
||
|
|
<${t}
|
||
|
|
part="base"
|
||
|
|
class=${Ko({button:!0,caret:this.withCaret,disabled:this.disabled,loading:this.loading,rtl:"rtl"===this.localize.dir(),"has-label":this.hasSlotController.test("[default]"),"has-start":this.hasSlotController.test("start"),"has-end":this.hasSlotController.test("end"),"is-icon-button":this.isIconButton})}
|
||
|
|
?disabled=${on(e?void 0:this.disabled)}
|
||
|
|
type=${on(e?void 0:this.type)}
|
||
|
|
title=${this.title}
|
||
|
|
name=${on(e?void 0:this.name)}
|
||
|
|
value=${on(e?void 0:this.value)}
|
||
|
|
href=${on(e?this.href:void 0)}
|
||
|
|
target=${on(e?this.target:void 0)}
|
||
|
|
download=${on(e?this.download:void 0)}
|
||
|
|
rel=${on(e&&this.rel?this.rel:void 0)}
|
||
|
|
role=${on(e?void 0:"button")}
|
||
|
|
aria-disabled=${this.disabled?"true":"false"}
|
||
|
|
tabindex=${this.disabled?"-1":"0"}
|
||
|
|
@invalid=${this.isButton()?this.handleInvalid:null}
|
||
|
|
@click=${this.handleClick}
|
||
|
|
>
|
||
|
|
<slot name="start" part="start" class="start"></slot>
|
||
|
|
<slot part="label" class="label" @slotchange=${this.handleLabelSlotChange}></slot>
|
||
|
|
<slot name="end" part="end" class="end"></slot>
|
||
|
|
${this.withCaret?nD`
|
||
|
|
<wa-icon part="caret" class="caret" library="system" name="chevron-down" variant="solid"></wa-icon>
|
||
|
|
`:""}
|
||
|
|
${this.loading?nD`<wa-spinner part="spinner"></wa-spinner>`:""}
|
||
|
|
</${t}>
|
||
|
|
`}};wt.shadowRootOptions={...Gr.shadowRootOptions,delegatesFocus:!0},wt.css=["@layer wa-component {\n :host {\n display: inline-block;\n\n /* Workaround because Chrome doesn't like :host(:has()) below\n * https://issues.chromium.org/issues/40062355\n * Firefox doesn't like this nested rule, so both are needed */\n &:has(wa-badge) {\n position: relative;\n }\n }\n\n /* Apply relative positioning only when needed to position wa-badge\n * This avoids creating a new stacking context for every button */\n :host(:has(wa-badge)) {\n position: relative;\n }\n}\n\n.button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n text-decoration: none;\n user-select: none;\n -webkit-user-select: none;\n white-space: nowrap;\n vertical-align: middle;\n transition-property: background, border, box-shadow, color;\n transition-duration: var(--wa-transition-fast);\n transition-timing-function: var(--wa-transition-easing);\n cursor: pointer;\n padding: 0 var(--wa-form-control-padding-inline);\n font-family: inherit;\n font-size: inherit;\n font-weight: var(--wa-font-weight-action);\n line-height: calc(var(--wa-form-control-height) - var(--border-width) * 2);\n height: var(--wa-form-control-height);\n width: 100%;\n\n background-color: var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud));\n border-color: transparent;\n color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));\n border-radius: var(--wa-form-control-border-radius);\n border-style: var(--wa-border-style);\n border-width: var(--wa-border-width-s);\n}\n\n/* Appearance modifiers */\n:host([appearance='plain']) {\n .button {\n color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));\n background-color: transparent;\n border-color: transparent;\n }\n @media (hover: hover) {\n .button:not(.disabled):not(.loading):hover {\n color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));\n background-color: var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet));\n }\n }\n .button:not(.disabled):not(.loading):active {\n color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));\n background-color: color-mix(\n in oklab,\n var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet)),\n var(--wa-color-mix-active)\n );\n }\n}\n\n:host([appearance='outlined']) {\n .button {\n color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));\n background-color: transparent;\n border-color: var(--wa-color-border-loud, var(--wa-color-neutral-border-loud));\n }\n @media (hover: hover) {\n .button:not(.disabled):not(.loading):hover {\n color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));\n background-color: var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet));\n }\n }\n .button:not(.disabled):not(.loading):active {\n color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));\n background-color: color-mix(\n in oklab,\n var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet)),\n var(--wa-color-mix-active)\n );\n }\n}\n\n:host([appearance='filled']) {\n .button {\n color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));\n background-color: var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal));\n border-color: transparent;\n }\n @media (hover: hover) {\n .button:not(.disabled):not(.loading):hover {\n color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));\n background-color: color-mix(\n in oklab,\n var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal)),\n var(--wa-color-mix-hover)\n );\n }\n }\n .button:not(.disabled):not(.loading):active {\n color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));\n background-color: color-mix(\n in oklab,\n var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal)),\n var(--wa-color-mix-active)\n );\n }\n}\n\n:host([appearance='filled-outli
|
||
|
|
<svg
|
||
|
|
part="base"
|
||
|
|
role="progressbar"
|
||
|
|
aria-label=${this.localize.term("loading")}
|
||
|
|
fill="none"
|
||
|
|
viewBox="0 0 50 50"
|
||
|
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
|
>
|
||
|
|
<circle class="track" cx="25" cy="25" r="20" fill="none" stroke-width="5" />
|
||
|
|
<circle class="indicator" cx="25" cy="25" r="20" fill="none" stroke-width="5" />
|
||
|
|
</svg>
|
||
|
|
`}};return e.css=":host {\n --track-width: 2px;\n --track-color: var(--wa-color-neutral-fill-normal);\n --indicator-color: var(--wa-color-brand-fill-loud);\n --speed: 2s;\n\n /* Resizing a spinner element using anything but font-size will break the animation because the animation uses em units.\n Therefore, if a spinner is used in a flex container without `flex: none` applied, the spinner can grow/shrink and\n break the animation. The use of `flex: none` on the host element prevents this by always having the spinner sized\n according to its actual dimensions.\n */\n flex: none;\n display: inline-flex;\n width: 1em;\n height: 1em;\n}\n\nsvg {\n width: 100%;\n height: 100%;\n aspect-ratio: 1;\n animation: spin var(--speed) linear infinite;\n}\n\n.track {\n stroke: var(--track-color);\n}\n\n.indicator {\n stroke: var(--indicator-color);\n stroke-dasharray: 75, 100;\n stroke-dashoffset: -5;\n animation: dash 1.5s ease-in-out infinite;\n stroke-linecap: round;\n}\n\n@keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@keyframes dash {\n 0% {\n stroke-dasharray: 1, 150;\n stroke-dashoffset: 0;\n }\n 50% {\n stroke-dasharray: 90, 150;\n stroke-dashoffset: -35;\n }\n 100% {\n stroke-dasharray: 90, 150;\n stroke-dashoffset: -124;\n }\n}\n",e})();vN=B([ui("wa-spinner")],vN);var mG=class extends Event{constructor(){super("wa-load",{bubbles:!0,cancelable:!1,composed:!0})}};const _G={};var rD,CG=class extends Event{constructor(){super("wa-error",{bubbles:!0,cancelable:!1,composed:!0})}},yp=Symbol(),kv=Symbol(),iD=new Map,hi=(()=>{let e=class extends di{constructor(){var t;super(...arguments),t=this,this.svg=null,this.autoWidth=!1,this.swapOpacity=!1,this.label="",this.library="default",this.resolveIcon=function(){var n=(0,oe.A)(function*(r,i){let o;if(i?.spriteSheet){t.hasUpdated||(yield t.updateComplete),t.svg=At`<svg part="svg">
|
||
|
|
<use part="use" href="${r}"></use>
|
||
|
|
</svg>`,yield t.updateComplete;const a=t.shadowRoot.querySelector("[part='svg']");return"function"==typeof i.mutator&&i.mutator(a,t),t.svg}try{if(o=yield fetch(r,{mode:"cors"}),!o.ok)return 410===o.status?yp:kv}catch{return kv}try{const a=document.createElement("div");a.innerHTML=yield o.text();const u=a.firstElementChild;if("svg"!==u?.tagName?.toLowerCase())return yp;rD||(rD=new DOMParser);const y=rD.parseFromString(u.outerHTML,"text/html").body.querySelector("svg");return y?(y.part.add("svg"),document.adoptNode(y)):yp}catch{return yp}});return function(r,i){return n.apply(this,arguments)}}()}connectedCallback(){super.connectedCallback(),function BW(e){lp.push(e)}(this)}firstUpdated(t){super.firstUpdated(t),this.setIcon()}disconnectedCallback(){super.disconnectedCallback(),function VW(e){lp=lp.filter(t=>t!==e)}(this)}getIconSource(){const t=$E(this.library);return this.name&&t?{url:t.resolver(this.name,this.family||"classic",this.variant,this.autoWidth),fromLibrary:!0}:{url:this.src,fromLibrary:!1}}handleLabelChange(){"string"==typeof this.label&&this.label.length>0?(this.setAttribute("role","img"),this.setAttribute("aria-label",this.label),this.removeAttribute("aria-hidden")):(this.removeAttribute("role"),this.removeAttribute("aria-label"),this.setAttribute("aria-hidden","true"))}setIcon(){var t=this;return(0,oe.A)(function*(){const{url:n,fromLibrary:r}=t.getIconSource(),i=r?$E(t.library):void 0;if(!n)return void(t.svg=null);let o=iD.get(n);o||(o=t.resolveIcon(n,i),iD.set(n,o));const a=yield o;if(a===kv&&iD.delete(n),n===t.getIconSource().url){if((e=>void 0!==e?._$litType$)(a))return void(t.svg=a);switch(a){case kv:case yp:t.svg=null,t.dispatchEvent(new CG);break;default:t.svg=a.cloneNode(!0),i?.mutator?.(t.svg,t),t.dispatchEvent(new mG)}}})()}updated(t){super.updated(t);const n=$E(this.library),r=this.shadowRoot?.querySelector("svg");r&&n?.mutator?.(r,this)}render(){return this.hasUpdated?this.svg:At`<svg part="svg" fill="currentColor" width="16" height="16"></svg>`}};return e.css=":host {\n --primary-color: currentColor;\n --primary-opacity: 1;\n --secondary-color: currentColor;\n --secondary-opacity: 0.4;\n\n box-sizing: content-box;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n vertical-align: -0.125em;\n}\n\n/* Standard */\n:host(:not([auto-width])) {\n width: 1.25em;\n height: 1em;\n}\n\n/* Auto-width */\n:host([auto-width]) {\n width: auto;\n height: 1em;\n}\n\nsvg {\n height: 1em;\n fill: currentColor;\n overflow: visible;\n\n /* Duotone colors with path-specific opacity fallback */\n path[data-duotone-primary] {\n color: var(--primary-color);\n opacity: var(--path-opacity, var(--primary-opacity));\n }\n\n path[data-duotone-secondary] {\n color: var(--secondary-color);\n opacity: var(--path-opacity, var(--secondary-opacity));\n }\n}\n",e})();B([$i()],hi.prototype,"svg",2),B([W({reflect:!0})],hi.prototype,"name",2),B([W({reflect:!0})],hi.prototype,"family",2),B([W({reflect:!0})],hi.prototype,"variant",2),B([W({attribute:"auto-width",type:Boolean,reflect:!0})],hi.prototype,"autoWidth",2),B([W({attribute:"swap-opacity",type:Boolean,reflect:!0})],hi.prototype,"swapOpacity",2),B([W()],hi.prototype,"src",2),B([W()],hi.prototype,"label",2),B([W({reflect:!0})],hi.prototype,"library",2),B([Ir("label")],hi.prototype,"handleLabelChange",1),B([Ir(["family","name","library","variant","src","autoWidth","swapOpacity"])],hi.prototype,"setIcon",1),hi=B([ui("wa-icon")],hi);var nc=(()=>{let e=class extends di{constructor(){super(...arguments),this.hasSlotController=new mp(this,"footer","header","media"),this.appearance="outlined",this.withHeader=!1,this.withMedia=!1,this.withFooter=!1,this.orientation="vertical"}updated(){!this.withHeader&&this.hasSlotController.test("header")&&(this.withHeader=!0),!this.withMedia&&this.hasSlotController.test("media")&&(this.withMedia=!0),!this.withFooter&&this.hasSlotController.test("footer")&&(this.withFooter=!0)}render(){return"horizontal"===this.orientation?At`
|
||
|
|
<slot name="media" part="media" class="media"></slot>
|
||
|
|
<slot part="body" class="body"></slot>
|
||
|
|
<slot name="actions" part="actions" class="actions"></slot>
|
||
|
|
`:At`
|
||
|
|
<slot name="media" part="media" class="media"></slot>
|
||
|
|
|
||
|
|
${this.hasSlotController.test("header-actions")?At` <header part="header" class="header has-actions">
|
||
|
|
<slot name="header"></slot>
|
||
|
|
<slot name="header-actions"></slot>
|
||
|
|
</header>`:At` <header part="header" class="header">
|
||
|
|
<slot name="header"></slot>
|
||
|
|
</header>`}
|
||
|
|
|
||
|
|
<slot part="body" class="body"></slot>
|
||
|
|
${this.hasSlotController.test("footer-actions")?At` <footer part="footer" class="footer has-actions">
|
||
|
|
<slot name="footer"></slot>
|
||
|
|
<slot name="footer-actions"></slot>
|
||
|
|
</footer>`:At` <footer part="footer" class="footer">
|
||
|
|
<slot name="footer"></slot>
|
||
|
|
</footer>`}
|
||
|
|
`}};return e.css=[ad,":host {\n --spacing: var(--wa-space-l);\n\n /* Internal calculated properties */\n --inner-border-radius: calc(var(--wa-panel-border-radius) - var(--wa-panel-border-width));\n\n display: flex;\n flex-direction: column;\n background-color: var(--wa-color-surface-default);\n border-color: var(--wa-color-surface-border);\n border-radius: var(--wa-panel-border-radius);\n border-style: var(--wa-panel-border-style);\n box-shadow: var(--wa-shadow-s);\n border-width: var(--wa-panel-border-width);\n color: var(--wa-color-text-normal);\n}\n\n/* Appearance modifiers */\n:host([appearance~='plain']) {\n background-color: transparent;\n border-color: transparent;\n box-shadow: none;\n}\n\n:host([appearance~='outlined']) {\n background-color: var(--wa-color-surface-default);\n border-color: var(--wa-color-surface-border);\n}\n\n:host([appearance~='filled']) {\n background-color: var(--wa-color-neutral-fill-quiet);\n border-color: transparent;\n}\n\n:host([appearance~='filled'][appearance~='outlined']) {\n border-color: var(--wa-color-neutral-border-quiet);\n}\n\n:host([appearance~='accent']) {\n color: var(--wa-color-neutral-on-loud);\n background-color: var(--wa-color-neutral-fill-loud);\n border-color: transparent;\n}\n\n/* Take care of top and bottom radii */\n.media,\n:host(:not([with-media])) .header,\n:host(:not([with-media], [with-header])) .body {\n border-start-start-radius: var(--inner-border-radius);\n border-start-end-radius: var(--inner-border-radius);\n}\n\n:host(:not([with-footer])) .body,\n.footer {\n border-end-start-radius: var(--inner-border-radius);\n border-end-end-radius: var(--inner-border-radius);\n}\n\n.media {\n display: flex;\n overflow: hidden;\n\n &::slotted(*) {\n display: block;\n width: 100%;\n border-radius: 0 !important;\n }\n}\n\n/* Round all corners for plain appearance */\n:host([appearance='plain']) .media {\n border-radius: var(--inner-border-radius);\n\n &::slotted(*) {\n border-radius: inherit !important;\n }\n}\n\n.header {\n display: block;\n border-block-end-style: inherit;\n border-block-end-color: var(--wa-color-surface-border);\n border-block-end-width: var(--wa-panel-border-width);\n padding: calc(var(--spacing) / 2) var(--spacing);\n}\n\n.body {\n display: block;\n padding: var(--spacing);\n}\n\n.footer {\n display: block;\n border-block-start-style: inherit;\n border-block-start-color: var(--wa-color-surface-border);\n border-block-start-width: var(--wa-panel-border-width);\n padding: var(--spacing);\n}\n\n/* Push slots to sides when the action slots renders */\n.has-actions {\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\n:host(:not([with-header])) .header,\n:host(:not([with-footer])) .footer,\n:host(:not([with-media])) .media {\n display: none;\n}\n\n/* Orientation Styles */\n:host([orientation='horizontal']) {\n flex-direction: row;\n\n .media {\n border-start-start-radius: var(--inner-border-radius);\n border-end-start-radius: var(--inner-border-radius);\n border-start-end-radius: 0;\n\n &::slotted(*) {\n block-size: 100%;\n inline-size: 100%;\n object-fit: cover;\n }\n }\n}\n\n:host([orientation='horizontal']) ::slotted([slot='body']) {\n display: block;\n height: 100%;\n margin: 0;\n}\n\n:host([orientation='horizontal']) ::slotted([slot='actions']) {\n display: flex;\n align-items: center;\n padding: var(--spacing);\n}\n"],e})();B([W({reflect:!0})],nc.prototype,"appearance",2),B([W({attribute:"with-header",type:Boolean,reflect:!0})],nc.prototype,"withHeader",2),B([W({attribute:"with-media",type:Boolean,reflect:!0})],nc.prototype,"withMedia",2),B([W({attribute:"with-footer",type:Boolean,reflect:!0})],nc.prototype,"withFooter",2),B([W({reflect:!0})],nc.prototype,"orientation",2),nc=B([ui("wa-card")],nc);const xG=(e,t)=>t.name;function SG(e,t){1&e&&ai(0,"wa-spinner",9)}function MG(e,t){1&e&&(ai(0,"wa-icon",10),te(1," Uninstall "))}function TG(e,t){if(1&e){const n=Zo();He(0,"wa-button",8),ar("click",function(){Dt(n);const i=P
|
||
|
|
<slot name="anchor" @slotchange=${this.handleAnchorChange}></slot>
|
||
|
|
|
||
|
|
<span
|
||
|
|
part="hover-bridge"
|
||
|
|
class=${Ko({"popup-hover-bridge":!0,"popup-hover-bridge-visible":this.hoverBridge&&this.active})}
|
||
|
|
></span>
|
||
|
|
|
||
|
|
<div
|
||
|
|
popover="manual"
|
||
|
|
part="popup"
|
||
|
|
class=${Ko({popup:!0,"popup-active":this.active,"popup-fixed":!r0,"popup-has-arrow":this.arrow})}
|
||
|
|
>
|
||
|
|
<slot></slot>
|
||
|
|
${this.arrow?At`<div part="arrow" class="arrow" role="presentation"></div>`:""}
|
||
|
|
</div>
|
||
|
|
`}};return e.css=":host {\n --arrow-color: black;\n --arrow-size: var(--wa-tooltip-arrow-size);\n --show-duration: 100ms;\n --hide-duration: 100ms;\n\n /*\n * These properties are computed to account for the arrow's dimensions after being rotated 45\xba. The constant\n * 0.7071 is derived from sin(45), which is the diagonal size of the arrow's container after rotating.\n */\n --arrow-size-diagonal: calc(var(--arrow-size) * 0.7071);\n --arrow-padding-offset: calc(var(--arrow-size-diagonal) - var(--arrow-size));\n\n display: contents;\n}\n\n.popup {\n position: absolute;\n isolation: isolate;\n max-width: var(--auto-size-available-width, none);\n max-height: var(--auto-size-available-height, none);\n\n /* Clear UA styles for [popover] */\n :where(&) {\n inset: unset;\n padding: unset;\n margin: unset;\n width: unset;\n height: unset;\n color: unset;\n background: unset;\n border: unset;\n overflow: unset;\n }\n}\n\n.popup-fixed {\n position: fixed;\n}\n\n.popup:not(.popup-active) {\n display: none;\n}\n\n.arrow {\n position: absolute;\n width: calc(var(--arrow-size-diagonal) * 2);\n height: calc(var(--arrow-size-diagonal) * 2);\n rotate: 45deg;\n background: var(--arrow-color);\n z-index: 3;\n}\n\n:host([data-current-placement~='left']) .arrow {\n rotate: -45deg;\n}\n\n:host([data-current-placement~='right']) .arrow {\n rotate: 135deg;\n}\n\n:host([data-current-placement~='bottom']) .arrow {\n rotate: 225deg;\n}\n\n/* Hover bridge */\n.popup-hover-bridge:not(.popup-hover-bridge-visible) {\n display: none;\n}\n\n.popup-hover-bridge {\n position: fixed;\n z-index: 899;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n clip-path: polygon(\n var(--hover-bridge-top-left-x, 0) var(--hover-bridge-top-left-y, 0),\n var(--hover-bridge-top-right-x, 0) var(--hover-bridge-top-right-y, 0),\n var(--hover-bridge-bottom-right-x, 0) var(--hover-bridge-bottom-right-y, 0),\n var(--hover-bridge-bottom-left-x, 0) var(--hover-bridge-bottom-left-y, 0)\n );\n}\n\n/* Built-in animations */\n.show {\n animation: show var(--show-duration) ease;\n}\n\n.hide {\n animation: show var(--hide-duration) ease reverse;\n}\n\n@keyframes show {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n.show-with-scale {\n animation: show-with-scale var(--show-duration) ease;\n}\n\n.hide-with-scale {\n animation: show-with-scale var(--hide-duration) ease reverse;\n}\n\n@keyframes show-with-scale {\n from {\n opacity: 0;\n scale: 0.8;\n }\n to {\n opacity: 1;\n scale: 1;\n }\n}\n",e})();B([$n(".popup")],jt.prototype,"popup",2),B([$n(".arrow")],jt.prototype,"arrowEl",2),B([W()],jt.prototype,"anchor",2),B([W({type:Boolean,reflect:!0})],jt.prototype,"active",2),B([W({reflect:!0})],jt.prototype,"placement",2),B([W()],jt.prototype,"boundary",2),B([W({type:Number})],jt.prototype,"distance",2),B([W({type:Number})],jt.prototype,"skidding",2),B([W({type:Boolean})],jt.prototype,"arrow",2),B([W({attribute:"arrow-placement"})],jt.prototype,"arrowPlacement",2),B([W({attribute:"arrow-padding",type:Number})],jt.prototype,"arrowPadding",2),B([W({type:Boolean})],jt.prototype,"flip",2),B([W({attribute:"flip-fallback-placements",converter:{fromAttribute:e=>e.split(" ").map(t=>t.trim()).filter(t=>""!==t),toAttribute:e=>e.join(" ")}})],jt.prototype,"flipFallbackPlacements",2),B([W({attribute:"flip-fallback-strategy"})],jt.prototype,"flipFallbackStrategy",2),B([W({type:Object})],jt.prototype,"flipBoundary",2),B([W({attribute:"flip-padding",type:Number})],jt.prototype,"flipPadding",2),B([W({type:Boolean})],jt.prototype,"shift",2),B([W({type:Object})],jt.prototype,"shiftBoundary",2),B([W({attribute:"shift-padding",type:Number})],jt.prototype,"shiftPadding",2),B([W({attribute:"auto-size"})],jt.prototype,"autoSize",2),B([W()],jt.prototype,"sync",2),B([W({type:Object})],jt.prototype,"autoSizeBoundary",2),B([W({attribute:"auto-size-padding",type:Number})],jt.prototype,"autoSizePadding",2),B([W({attribute:"hover-bridge",type:Boolean})],jt.prototype,"hoverBridge",2),jt=B([ui
|
||
|
|
<wa-popup
|
||
|
|
part="base"
|
||
|
|
exportparts="
|
||
|
|
popup:base__popup,
|
||
|
|
arrow:base__arrow
|
||
|
|
"
|
||
|
|
class=${Ko({tooltip:!0,"tooltip-open":this.open})}
|
||
|
|
placement=${this.placement}
|
||
|
|
distance=${this.distance}
|
||
|
|
skidding=${this.skidding}
|
||
|
|
flip
|
||
|
|
shift
|
||
|
|
?arrow=${!this.withoutArrow}
|
||
|
|
hover-bridge
|
||
|
|
.anchor=${this.anchor}
|
||
|
|
>
|
||
|
|
<div part="body" class="body">
|
||
|
|
<slot></slot>
|
||
|
|
</div>
|
||
|
|
</wa-popup>
|
||
|
|
`}};return e.css=":host {\n --max-width: 30ch;\n\n /** These styles are added so we don't interfere in the DOM. */\n display: inline-block;\n position: absolute;\n\n /** Defaults for inherited CSS properties */\n color: var(--wa-tooltip-content-color);\n font-size: var(--wa-tooltip-font-size);\n line-height: var(--wa-tooltip-line-height);\n text-align: start;\n white-space: normal;\n}\n\n.tooltip {\n --arrow-size: var(--wa-tooltip-arrow-size);\n --arrow-color: var(--wa-tooltip-background-color);\n}\n\n.tooltip::part(popup) {\n z-index: 1000;\n}\n\n.tooltip[placement^='top']::part(popup) {\n transform-origin: bottom;\n}\n\n.tooltip[placement^='bottom']::part(popup) {\n transform-origin: top;\n}\n\n.tooltip[placement^='left']::part(popup) {\n transform-origin: right;\n}\n\n.tooltip[placement^='right']::part(popup) {\n transform-origin: left;\n}\n\n.body {\n display: block;\n width: max-content;\n max-width: var(--max-width);\n border-radius: var(--wa-tooltip-border-radius);\n background-color: var(--wa-tooltip-background-color);\n border: var(--wa-tooltip-border-width) var(--wa-tooltip-border-style) var(--wa-tooltip-border-color);\n padding: 0.25em 0.5em;\n user-select: none;\n -webkit-user-select: none;\n}\n\n.tooltip::part(arrow) {\n border-bottom: var(--wa-tooltip-border-width) var(--wa-tooltip-border-style) var(--wa-tooltip-border-color);\n border-right: var(--wa-tooltip-border-width) var(--wa-tooltip-border-style) var(--wa-tooltip-border-color);\n}\n",e.dependencies={"wa-popup":jt},e})();B([$n("slot:not([name])")],On.prototype,"defaultSlot",2),B([$n(".body")],On.prototype,"body",2),B([$n("wa-popup")],On.prototype,"popup",2),B([W()],On.prototype,"placement",2),B([W({type:Boolean,reflect:!0})],On.prototype,"disabled",2),B([W({type:Number})],On.prototype,"distance",2),B([W({type:Boolean,reflect:!0})],On.prototype,"open",2),B([W({type:Number})],On.prototype,"skidding",2),B([W({attribute:"show-delay",type:Number})],On.prototype,"showDelay",2),B([W({attribute:"hide-delay",type:Number})],On.prototype,"hideDelay",2),B([W()],On.prototype,"trigger",2),B([W({attribute:"without-arrow",type:Boolean,reflect:!0})],On.prototype,"withoutArrow",2),B([W()],On.prototype,"for",2),B([$i()],On.prototype,"anchor",2),B([Ir("open",{waitUntilFirstUpdate:!0})],On.prototype,"handleOpenChange",1),B([Ir("for")],On.prototype,"handleForChange",1),B([Ir(["distance","placement","skidding"])],On.prototype,"handleOptionsChange",1),B([Ir("disabled")],On.prototype,"handleDisabledChange",1),On=B([ui("wa-tooltip")],On);var n2=class extends Event{constructor(){super("wa-clear",{bubbles:!0,cancelable:!1,composed:!0})}},WD=":host {\n display: flex;\n flex-direction: column;\n}\n\n/* Label */\n:is([part~='form-control-label'], [part~='label']):has(*:not(:empty)) {\n display: inline-flex;\n color: var(--wa-form-control-label-color);\n font-weight: var(--wa-form-control-label-font-weight);\n line-height: var(--wa-form-control-label-line-height);\n margin-block-end: 0.5em;\n}\n\n:host([required]) :is([part~='form-control-label'], [part~='label'])::after {\n content: var(--wa-form-control-required-content);\n margin-inline-start: var(--wa-form-control-required-content-offset);\n color: var(--wa-form-control-required-content-color);\n}\n\n/* Help text */\n[part~='hint'] {\n display: block;\n color: var(--wa-form-control-hint-color);\n font-weight: var(--wa-form-control-hint-font-weight);\n line-height: var(--wa-form-control-hint-line-height);\n margin-block-start: 0.5em;\n font-size: var(--wa-font-size-smaller);\n line-height: var(--wa-form-control-label-line-height);\n\n &:not(.has-slotted) {\n display: none;\n }\n}\n";const GD=QE(class extends JE{constructor(e){if(super(e),3!==e.type&&1!==e.type&&4!==e.type)throw Error("The `live` directive is not allowed on child or event bindings");if(!(e=>void 0===e.strings)(e))throw Error("`live` bindings can only contain a single expression")}render(e){return e}update(e,[t]){if(t===Vi||t===hn)return t;const n=e.element,r=e.name;if(3===e.type){if(t===n[r])return Vi}else if(
|
||
|
|
<label part="form-control-label label" class="label" for="input" aria-hidden=${this.label||e?"false":"true"}>
|
||
|
|
<slot name="label">${this.label}</slot>
|
||
|
|
</label>
|
||
|
|
|
||
|
|
<div part="base" class="text-field">
|
||
|
|
<slot name="start" part="start" class="start"></slot>
|
||
|
|
|
||
|
|
<input
|
||
|
|
part="input"
|
||
|
|
id="input"
|
||
|
|
class="control"
|
||
|
|
type=${"password"===this.type&&this.passwordVisible?"text":this.type}
|
||
|
|
title=${this.title}
|
||
|
|
name=${on(this.name)}
|
||
|
|
?disabled=${this.disabled}
|
||
|
|
?readonly=${this.readonly}
|
||
|
|
?required=${this.required}
|
||
|
|
placeholder=${on(this.placeholder)}
|
||
|
|
minlength=${on(this.minlength)}
|
||
|
|
maxlength=${on(this.maxlength)}
|
||
|
|
min=${on(this.min)}
|
||
|
|
max=${on(this.max)}
|
||
|
|
step=${on(this.step)}
|
||
|
|
.value=${GD(this.value??"")}
|
||
|
|
autocapitalize=${on(this.autocapitalize)}
|
||
|
|
autocomplete=${on(this.autocomplete)}
|
||
|
|
autocorrect=${on(this.autocorrect)}
|
||
|
|
?autofocus=${this.autofocus}
|
||
|
|
spellcheck=${this.spellcheck}
|
||
|
|
pattern=${on(this.pattern)}
|
||
|
|
enterkeyhint=${on(this.enterkeyhint)}
|
||
|
|
inputmode=${on(this.inputmode)}
|
||
|
|
aria-describedby="hint"
|
||
|
|
@change=${this.handleChange}
|
||
|
|
@input=${this.handleInput}
|
||
|
|
@keydown=${this.handleKeyDown}
|
||
|
|
/>
|
||
|
|
|
||
|
|
${o?At`
|
||
|
|
<button
|
||
|
|
part="clear-button"
|
||
|
|
class="clear"
|
||
|
|
type="button"
|
||
|
|
aria-label=${this.localize.term("clearEntry")}
|
||
|
|
@click=${this.handleClearClick}
|
||
|
|
tabindex="-1"
|
||
|
|
>
|
||
|
|
<slot name="clear-icon">
|
||
|
|
<wa-icon name="circle-xmark" library="system" variant="regular"></wa-icon>
|
||
|
|
</slot>
|
||
|
|
</button>
|
||
|
|
`:""}
|
||
|
|
${this.passwordToggle&&!this.disabled?At`
|
||
|
|
<button
|
||
|
|
part="password-toggle-button"
|
||
|
|
class="password-toggle"
|
||
|
|
type="button"
|
||
|
|
aria-label=${this.localize.term(this.passwordVisible?"hidePassword":"showPassword")}
|
||
|
|
@click=${this.handlePasswordToggle}
|
||
|
|
tabindex="-1"
|
||
|
|
>
|
||
|
|
${this.passwordVisible?At`
|
||
|
|
<slot name="hide-password-icon">
|
||
|
|
<wa-icon name="eye-slash" library="system" variant="regular"></wa-icon>
|
||
|
|
</slot>
|
||
|
|
`:At`
|
||
|
|
<slot name="show-password-icon">
|
||
|
|
<wa-icon name="eye" library="system" variant="regular"></wa-icon>
|
||
|
|
</slot>
|
||
|
|
`}
|
||
|
|
</button>
|
||
|
|
`:""}
|
||
|
|
|
||
|
|
<slot name="end" part="end" class="end"></slot>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<slot
|
||
|
|
id="hint"
|
||
|
|
part="hint"
|
||
|
|
name="hint"
|
||
|
|
class=${Ko({"has-slotted":r})}
|
||
|
|
aria-hidden=${r?"false":"true"}
|
||
|
|
>${this.hint}</slot
|
||
|
|
>
|
||
|
|
`}};Je.css=[ad,WD,":host {\n border-width: 0;\n}\n\n.text-field {\n flex: auto;\n display: flex;\n align-items: stretch;\n justify-content: start;\n position: relative;\n transition: inherit;\n height: var(--wa-form-control-height);\n border-color: var(--wa-form-control-border-color);\n border-radius: var(--wa-form-control-border-radius);\n border-style: var(--wa-form-control-border-style);\n border-width: var(--wa-form-control-border-width);\n cursor: text;\n color: var(--wa-form-control-value-color);\n font-size: var(--wa-form-control-value-font-size);\n font-family: inherit;\n font-weight: var(--wa-form-control-value-font-weight);\n line-height: var(--wa-form-control-value-line-height);\n vertical-align: middle;\n width: 100%;\n transition:\n background-color var(--wa-transition-normal),\n border var(--wa-transition-normal),\n outline var(--wa-transition-fast);\n transition-timing-function: var(--wa-transition-easing);\n background-color: var(--wa-form-control-background-color);\n box-shadow: var(--box-shadow);\n padding: 0 var(--wa-form-control-padding-inline);\n\n &:focus-within {\n outline: var(--wa-focus-ring);\n outline-offset: var(--wa-focus-ring-offset);\n }\n\n /* Style disabled inputs */\n &:has(:disabled) {\n cursor: not-allowed;\n opacity: 0.5;\n }\n}\n\n/* Appearance modifiers */\n:host([appearance='outlined']) .text-field {\n background-color: var(--wa-form-control-background-color);\n border-color: var(--wa-form-control-border-color);\n}\n\n:host([appearance='filled']) .text-field {\n background-color: var(--wa-color-neutral-fill-quiet);\n border-color: var(--wa-color-neutral-fill-quiet);\n}\n\n:host([appearance='filled-outlined']) .text-field {\n background-color: var(--wa-color-neutral-fill-quiet);\n border-color: var(--wa-form-control-border-color);\n}\n\n:host([pill]) .text-field {\n border-radius: var(--wa-border-radius-pill) !important;\n}\n\n.text-field {\n /* Show autofill styles over the entire text field, not just the native <input> */\n &:has(:autofill),\n &:has(:-webkit-autofill) {\n background-color: var(--wa-color-brand-fill-quiet) !important;\n }\n\n input,\n textarea {\n /*\n Fixes an alignment issue with placeholders.\n https://github.com/shoelace-style/webawesome/issues/342\n */\n height: 100%;\n\n padding: 0;\n border: none;\n outline: none;\n box-shadow: none;\n margin: 0;\n cursor: inherit;\n -webkit-appearance: none;\n font: inherit;\n\n /* Turn off Safari's autofill styles */\n &:-webkit-autofill,\n &:-webkit-autofill:hover,\n &:-webkit-autofill:focus,\n &:-webkit-autofill:active {\n -webkit-background-clip: text;\n background-color: transparent;\n -webkit-text-fill-color: inherit;\n }\n }\n}\n\ninput {\n flex: 1 1 auto;\n min-width: 0;\n height: 100%;\n transition: inherit;\n\n /* prettier-ignore */\n background-color: rgb(118 118 118 / 0); /* ensures proper placeholder styles in webkit's date input */\n height: calc(var(--wa-form-control-height) - var(--border-width) * 2);\n padding-block: 0;\n color: inherit;\n\n &:autofill {\n &,\n &:hover,\n &:focus,\n &:active {\n box-shadow: none;\n caret-color: var(--wa-form-control-value-color);\n }\n }\n\n &::placeholder {\n color: var(--wa-form-control-placeholder-color);\n user-select: none;\n -webkit-user-select: none;\n }\n\n &::-webkit-search-decoration,\n &::-webkit-search-cancel-button,\n &::-webkit-search-results-button,\n &::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n\n &:focus {\n outline: none;\n }\n}\n\ntextarea {\n &:autofill {\n &,\n &:hover,\n &:focus,\n &:active {\n box-shadow: none;\n caret-color: var(--wa-form-control-value-color);\n }\n }\n\n &::placeholder {\n color: var(--wa-form-control-placeholder-color);\n user-select: none;\n -webkit-user-select: none;\n }\n}\n\n.start,\n.end {\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n curs
|
||
|
|
<wa-tag
|
||
|
|
part="tag"
|
||
|
|
exportparts="
|
||
|
|
base:tag__base,
|
||
|
|
content:tag__content,
|
||
|
|
remove-button:tag__remove-button,
|
||
|
|
remove-button__base:tag__remove-button__base
|
||
|
|
"
|
||
|
|
?pill=${this.pill}
|
||
|
|
size=${this.size}
|
||
|
|
with-remove
|
||
|
|
>
|
||
|
|
${t.label}
|
||
|
|
</wa-tag>
|
||
|
|
`,this.handleDocumentFocusIn=t=>{const n=t.composedPath();this&&!n.includes(this)&&this.hide()},this.handleDocumentKeyDown=t=>{const n=t.target,r=null!==n.closest('[part~="clear-button"]'),i=null!==n.closest("wa-button");if(!r&&!i){if("Escape"===t.key&&this.open&&(t.preventDefault(),t.stopPropagation(),this.hide(),this.displayInput.focus({preventScroll:!0})),"Enter"===t.key||" "===t.key&&""===this.typeToSelectString)return t.preventDefault(),t.stopImmediatePropagation(),this.open?void(this.currentOption&&!this.currentOption.disabled&&(this.valueHasChanged=!0,this.hasInteracted=!0,this.multiple?this.toggleOptionSelection(this.currentOption):this.setSelectedOptions(this.currentOption),this.updateComplete.then(()=>{this.dispatchEvent(new InputEvent("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}),this.multiple||(this.hide(),this.displayInput.focus({preventScroll:!0})))):void this.show();if(["ArrowUp","ArrowDown","Home","End"].includes(t.key)){const o=this.getAllOptions(),a=o.indexOf(this.currentOption);let u=Math.max(0,a);if(t.preventDefault(),!this.open&&(this.show(),this.currentOption))return;"ArrowDown"===t.key?(u=a+1,u>o.length-1&&(u=0)):"ArrowUp"===t.key?(u=a-1,u<0&&(u=o.length-1)):"Home"===t.key?u=0:"End"===t.key&&(u=o.length-1),this.setCurrentOption(o[u])}if(1===t.key?.length||"Backspace"===t.key){const o=this.getAllOptions();if(t.metaKey||t.ctrlKey||t.altKey)return;if(!this.open){if("Backspace"===t.key)return;this.show()}t.stopPropagation(),t.preventDefault(),clearTimeout(this.typeToSelectTimeout),this.typeToSelectTimeout=window.setTimeout(()=>this.typeToSelectString="",1e3),"Backspace"===t.key?this.typeToSelectString=this.typeToSelectString.slice(0,-1):this.typeToSelectString+=t.key.toLowerCase();for(const a of o)if(a.label.toLowerCase().startsWith(this.typeToSelectString)){this.setCurrentOption(a);break}}}},this.handleDocumentMouseDown=t=>{const n=t.composedPath();this&&!n.includes(this)&&this.hide()}}static get validators(){const t=[r2({validationElement:Object.assign(document.createElement("select"),{required:!0})})];return[...super.validators,...t]}get validationTarget(){return this.valueInput}set defaultValue(t){this._defaultValue=this.convertDefaultValue(t)}get defaultValue(){return this.convertDefaultValue(this._defaultValue)}convertDefaultValue(t){return!(this.multiple||this.hasAttribute("multiple"))&&Array.isArray(t)&&(t=t[0]),t}set value(t){let n=this.value;t instanceof FormData&&(t=t.getAll(this.name)),null!=t&&!Array.isArray(t)&&(t=[t]),this._value=t??null,this.value!==n&&(this.valueHasChanged=!0,this.requestUpdate("value",n))}get value(){let t=this._value??this.defaultValue??null;null!=t&&(t=Array.isArray(t)?t:[t]),this.optionValues=null==t?new Set(null):new Set(this.getAllOptions().filter(r=>!r.disabled).map(r=>r.value));let n=t;return null!=t&&(n=t.filter(r=>this.optionValues.has(r)),n=this.multiple?n:n[0],n=n??null),n}connectedCallback(){super.connectedCallback(),this.handleDefaultSlotChange(),this.open=!1}updateDefaultValue(){const n=this.getAllOptions().filter(r=>r.hasAttribute("selected")||r.defaultSelected);if(n.length>0){const r=n.map(i=>i.value);this._defaultValue=this.multiple?r:r[0]}this.hasAttribute("value")&&(this._defaultValue=this.getAttribute("value")||null)}addOpenListeners(){document.addEventListener("focusin",this.handleDocumentFocusIn),document.addEventListener("keydown",this.handleDocumentKeyDown),document.addEventListener("mousedown",this.handleDocumentMouseDown),this.getRootNode()!==document&&this.getRootNode().addEventListener("focusin",this.handleDocumentFocusIn)}removeOpenListeners(){document.removeEventListener("focusin",this.handleDocumentFocusIn),document.removeEventListener("keydown",this.handleDocumentKeyDown),document.removeEventListener("mousedown",this.handleDocumentMouseDown),this.getRootNode()!==document&&this.getRootNode().removeEventListener("focusin",this.handleDocumentFocusIn)}handleFocus(){this.displayInput.setSelectionRange(0,0)}handleLabelClick(){this.displayInput.focus()}handleComboboxClick(t){t.prev
|
||
|
|
<wa-tag
|
||
|
|
part="tag"
|
||
|
|
exportparts="
|
||
|
|
base:tag__base,
|
||
|
|
content:tag__content,
|
||
|
|
remove-button:tag__remove-button,
|
||
|
|
remove-button__base:tag__remove-button__base
|
||
|
|
"
|
||
|
|
>+${this.selectedOptions.length-n}</wa-tag
|
||
|
|
>
|
||
|
|
`:null})}updated(t){super.updated(t),t.has("value")&&this.customStates.set("blank",!this.value)}handleDisabledChange(){this.disabled&&this.open&&(this.open=!1)}handleValueChange(){const t=this.getAllOptions(),n=Array.isArray(this.value)?this.value:[this.value],r=t.filter(i=>n.includes(i.value));this.setSelectedOptions(r),this.updateValidity()}handleOpenChange(){var t=this;return(0,oe.A)(function*(){if(t.open&&!t.disabled){t.setCurrentOption(t.selectedOptions[0]||t.getFirstOption());const n=new UD;if(t.dispatchEvent(n),n.defaultPrevented)return void(t.open=!1);t.addOpenListeners(),t.listbox.hidden=!1,t.popup.active=!0,requestAnimationFrame(()=>{t.setCurrentOption(t.currentOption)}),yield o0(t.popup.popup,"show"),t.currentOption&&function iY(e,t,n="vertical",r="smooth"){const i=function tY(e,t){return{top:Math.round(e.getBoundingClientRect().top-t.getBoundingClientRect().top),left:Math.round(e.getBoundingClientRect().left-t.getBoundingClientRect().left)}}(e,t),o=i.top+t.scrollTop,a=i.left+t.scrollLeft,f=t.scrollLeft+t.offsetWidth,y=t.scrollTop,w=t.scrollTop+t.offsetHeight;("horizontal"===n||"both"===n)&&(a<t.scrollLeft?t.scrollTo({left:a,behavior:r}):a+e.clientWidth>f&&t.scrollTo({left:a-t.offsetWidth+e.clientWidth,behavior:r})),("vertical"===n||"both"===n)&&(o<y?t.scrollTo({top:o,behavior:r}):o+e.clientHeight>w&&t.scrollTo({top:o-t.offsetHeight+e.clientHeight,behavior:r}))}(t.currentOption,t.listbox,"vertical","auto"),t.dispatchEvent(new jD)}else{const n=new HD;if(t.dispatchEvent(n),n.defaultPrevented)return void(t.open=!1);t.removeOpenListeners(),yield o0(t.popup.popup,"hide"),t.listbox.hidden=!0,t.popup.active=!1,t.dispatchEvent(new $D)}})()}show(){var t=this;return(0,oe.A)(function*(){if(!t.open&&!t.disabled)return t.open=!0,vd(t,"wa-after-show");t.open=!1})()}hide(){var t=this;return(0,oe.A)(function*(){if(t.open&&!t.disabled)return t.open=!1,vd(t,"wa-after-hide");t.open=!1})()}focus(t){this.displayInput.focus(t)}blur(){this.displayInput.blur()}formResetCallback(){this.value=this.defaultValue,super.formResetCallback(),this.handleValueChange(),this.updateComplete.then(()=>{this.dispatchEvent(new InputEvent("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))})}render(){const t=this.hasUpdated?this.hasSlotController.test("label"):this.withLabel,n=this.hasUpdated?this.hasSlotController.test("hint"):this.withHint,r=!!this.label||!!t,i=!!this.hint||!!n,o=!!this.hasUpdated&&this.withClear&&!this.disabled&&this.value&&this.value.length>0,a=!(!this.placeholder||this.value&&0!==this.value.length);return At`
|
||
|
|
<div
|
||
|
|
part="form-control"
|
||
|
|
class=${Ko({"form-control":!0,"form-control-has-label":r})}
|
||
|
|
>
|
||
|
|
<label
|
||
|
|
id="label"
|
||
|
|
part="form-control-label label"
|
||
|
|
class="label"
|
||
|
|
aria-hidden=${r?"false":"true"}
|
||
|
|
@click=${this.handleLabelClick}
|
||
|
|
>
|
||
|
|
<slot name="label">${this.label}</slot>
|
||
|
|
</label>
|
||
|
|
|
||
|
|
<div part="form-control-input" class="form-control-input">
|
||
|
|
<wa-popup
|
||
|
|
class=${Ko({select:!0,open:this.open,disabled:this.disabled,enabled:!this.disabled,multiple:this.multiple,"placeholder-visible":a})}
|
||
|
|
placement=${this.placement}
|
||
|
|
flip
|
||
|
|
shift
|
||
|
|
sync="width"
|
||
|
|
auto-size="vertical"
|
||
|
|
auto-size-padding="10"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
part="combobox"
|
||
|
|
class="combobox"
|
||
|
|
slot="anchor"
|
||
|
|
@keydown=${this.handleComboboxKeyDown}
|
||
|
|
@mousedown=${this.handleComboboxMouseDown}
|
||
|
|
@click=${this.handleComboboxClick}
|
||
|
|
>
|
||
|
|
<slot part="start" name="start" class="start"></slot>
|
||
|
|
|
||
|
|
<input
|
||
|
|
part="display-input"
|
||
|
|
class="display-input"
|
||
|
|
type="text"
|
||
|
|
placeholder=${this.placeholder}
|
||
|
|
.disabled=${this.disabled}
|
||
|
|
.value=${this.displayLabel}
|
||
|
|
?required=${this.required}
|
||
|
|
autocomplete="off"
|
||
|
|
spellcheck="false"
|
||
|
|
autocapitalize="off"
|
||
|
|
readonly
|
||
|
|
aria-invalid=${!this.validity.valid}
|
||
|
|
aria-controls="listbox"
|
||
|
|
aria-expanded=${this.open?"true":"false"}
|
||
|
|
aria-haspopup="listbox"
|
||
|
|
aria-labelledby="label"
|
||
|
|
aria-disabled=${this.disabled?"true":"false"}
|
||
|
|
aria-describedby="hint"
|
||
|
|
role="combobox"
|
||
|
|
tabindex="0"
|
||
|
|
@focus=${this.handleFocus}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<!-- Tags need to wait for first hydration before populating otherwise it will create a hydration mismatch. -->
|
||
|
|
${this.multiple&&this.hasUpdated?At`<div part="tags" class="tags" @wa-remove=${this.handleTagRemove}>${this.tags}</div>`:""}
|
||
|
|
|
||
|
|
<input
|
||
|
|
class="value-input"
|
||
|
|
type="text"
|
||
|
|
?disabled=${this.disabled}
|
||
|
|
?required=${this.required}
|
||
|
|
.value=${Array.isArray(this.value)?this.value.join(", "):this.value}
|
||
|
|
tabindex="-1"
|
||
|
|
aria-hidden="true"
|
||
|
|
@focus=${()=>this.focus()}
|
||
|
|
/>
|
||
|
|
|
||
|
|
${o?At`
|
||
|
|
<button
|
||
|
|
part="clear-button"
|
||
|
|
type="button"
|
||
|
|
aria-label=${this.localize.term("clearEntry")}
|
||
|
|
@mousedown=${this.handleClearMouseDown}
|
||
|
|
@click=${this.handleClearClick}
|
||
|
|
tabindex="-1"
|
||
|
|
>
|
||
|
|
<slot name="clear-icon">
|
||
|
|
<wa-icon name="circle-xmark" library="system" variant="regular"></wa-icon>
|
||
|
|
</slot>
|
||
|
|
</button>
|
||
|
|
`:""}
|
||
|
|
|
||
|
|
<slot name="end" part="end" class="end"></slot>
|
||
|
|
|
||
|
|
<slot name="expand-icon" part="expand-icon" class="expand-icon">
|
||
|
|
<wa-icon library="system" name="chevron-down" variant="solid"></wa-icon>
|
||
|
|
</slot>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div
|
||
|
|
id="listbox"
|
||
|
|
role="listbox"
|
||
|
|
aria-expanded=${this.open?"true":"false"}
|
||
|
|
aria-multiselectable=${this.multiple?"true":"false"}
|
||
|
|
aria-labelledby="label"
|
||
|
|
part="listbox"
|
||
|
|
class="listbox"
|
||
|
|
tabindex="-1"
|
||
|
|
@mouseup=${this.handleOptionClick}
|
||
|
|
>
|
||
|
|
<slot @slotchange=${this.handleDefaultSlotChange}></slot>
|
||
|
|
</div>
|
||
|
|
</wa-popup>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<slot
|
||
|
|
id="hint"
|
||
|
|
name="hint"
|
||
|
|
part="hint"
|
||
|
|
class=${Ko({"has-slotted":i})}
|
||
|
|
aria-hidden=${i?"false":"true"}
|
||
|
|
>${this.hint}</slot
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
`}};return e.css=[":host {\n --tag-max-size: 10ch;\n --show-duration: 100ms;\n --hide-duration: 100ms;\n}\n\n/* Add ellipses to multi select options */\n:host wa-tag::part(content) {\n display: initial;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n max-width: var(--tag-max-size);\n}\n\n:host .disabled [part~='combobox'] {\n opacity: 0.5;\n cursor: not-allowed;\n outline: none;\n}\n\n:host .enabled:is(.open, :focus-within) [part~='combobox'] {\n outline: var(--wa-focus-ring);\n outline-offset: var(--wa-focus-ring-offset);\n}\n\n/** The popup */\n.select {\n flex: 1 1 auto;\n display: inline-flex;\n width: 100%;\n position: relative;\n vertical-align: middle;\n\n /* Pass through from select to the popup */\n --show-duration: inherit;\n --hide-duration: inherit;\n\n &::part(popup) {\n z-index: 900;\n }\n\n &[data-current-placement^='top']::part(popup) {\n transform-origin: bottom;\n }\n\n &[data-current-placement^='bottom']::part(popup) {\n transform-origin: top;\n }\n}\n\n/* Combobox */\n.combobox {\n flex: 1;\n display: flex;\n width: 100%;\n min-width: 0;\n align-items: center;\n justify-content: start;\n\n min-height: var(--wa-form-control-height);\n\n background-color: var(--wa-form-control-background-color);\n border-color: var(--wa-form-control-border-color);\n border-radius: var(--wa-form-control-border-radius);\n border-style: var(--wa-form-control-border-style);\n border-width: var(--wa-form-control-border-width);\n color: var(--wa-form-control-value-color);\n cursor: pointer;\n font-family: inherit;\n font-weight: var(--wa-form-control-value-font-weight);\n line-height: var(--wa-form-control-value-line-height);\n overflow: hidden;\n padding: 0 var(--wa-form-control-padding-inline);\n position: relative;\n vertical-align: middle;\n width: 100%;\n transition:\n background-color var(--wa-transition-normal),\n border var(--wa-transition-normal),\n outline var(--wa-transition-fast);\n transition-timing-function: var(--wa-transition-easing);\n\n :host([multiple]) .select:not(.placeholder-visible) & {\n padding-inline-start: 0;\n padding-block: calc(var(--wa-form-control-height) * 0.1 - var(--wa-form-control-border-width));\n }\n\n /* Pills */\n :host([pill]) & {\n border-radius: var(--wa-border-radius-pill);\n }\n}\n\n/* Appearance modifiers */\n:host([appearance='outlined']) .combobox {\n background-color: var(--wa-form-control-background-color);\n border-color: var(--wa-form-control-border-color);\n}\n\n:host([appearance='filled']) .combobox {\n background-color: var(--wa-color-neutral-fill-quiet);\n border-color: var(--wa-color-neutral-fill-quiet);\n}\n\n:host([appearance='filled-outlined']) .combobox {\n background-color: var(--wa-color-neutral-fill-quiet);\n border-color: var(--wa-form-control-border-color);\n}\n\n.display-input {\n position: relative;\n width: 100%;\n font: inherit;\n border: none;\n background: none;\n line-height: var(--wa-form-control-value-line-height);\n color: var(--wa-form-control-value-color);\n cursor: inherit;\n overflow: hidden;\n padding: 0;\n margin: 0;\n -webkit-appearance: none;\n\n &:focus {\n outline: none;\n }\n\n &::placeholder {\n color: var(--wa-form-control-placeholder-color);\n }\n}\n\n/* Visually hide the display input when multiple is enabled */\n:host([multiple]) .select:not(.placeholder-visible) .display-input {\n position: absolute;\n z-index: -1;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n opacity: 0;\n}\n\n.value-input {\n position: absolute;\n z-index: -1;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n opacity: 0;\n padding: 0;\n margin: 0;\n}\n\n.tags {\n display: flex;\n flex: 1;\n align-items: center;\n flex-wrap: wrap;\n margin-inline-start: 0.25em;\n gap: 0.25em;\n\n &::slotted(wa-tag) {\n cursor: pointer !important;\n }\n\n .disabled &,\n .disabled &::slotted(wa-tag) {\n cursor: not-allowed !important;\n }\n}\n\n/* Start and End */\n\n.start,\n.end {\n flex: 0;\n displa
|
||
|
|
<slot part="content" class="content"></slot>
|
||
|
|
|
||
|
|
${this.withRemove?At`
|
||
|
|
<wa-button
|
||
|
|
part="remove-button"
|
||
|
|
exportparts="base:remove-button__base"
|
||
|
|
class="remove"
|
||
|
|
appearance="plain"
|
||
|
|
@click=${this.handleRemoveClick}
|
||
|
|
tabindex="-1"
|
||
|
|
>
|
||
|
|
<wa-icon name="xmark" library="system" variant="solid" label=${this.localize.term("remove")}></wa-icon>
|
||
|
|
</wa-button>
|
||
|
|
`:""}
|
||
|
|
`}};return e.css=["@layer wa-component {\n :host {\n display: inline-flex;\n gap: 0.5em;\n border-radius: var(--wa-border-radius-m);\n align-items: center;\n background-color: var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet));\n border-color: var(--wa-color-border-normal, var(--wa-color-neutral-border-normal));\n border-style: var(--wa-border-style);\n border-width: var(--wa-border-width-s);\n color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));\n font-size: inherit;\n line-height: 1;\n white-space: nowrap;\n user-select: none;\n -webkit-user-select: none;\n height: calc(var(--wa-form-control-height) * 0.8);\n line-height: calc(var(--wa-form-control-height) - var(--wa-form-control-border-width) * 2);\n padding: 0 0.75em;\n }\n\n /* Appearance modifiers */\n :host([appearance='outlined']) {\n color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));\n background-color: transparent;\n border-color: var(--wa-color-border-loud, var(--wa-color-neutral-border-loud));\n }\n\n :host([appearance='filled']) {\n color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));\n background-color: var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet));\n border-color: transparent;\n }\n\n :host([appearance='filled-outlined']) {\n color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));\n background-color: var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet));\n border-color: var(--wa-color-border-normal, var(--wa-color-neutral-border-normal));\n }\n\n :host([appearance='accent']) {\n color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));\n background-color: var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud));\n border-color: transparent;\n }\n}\n\n.content {\n font-size: var(--wa-font-size-smaller);\n}\n\n[part='remove-button'] {\n color: inherit;\n line-height: 1;\n}\n\n[part='remove-button']::part(base) {\n padding: 0;\n height: 1em;\n width: 1em;\n}\n\n@media (hover: hover) {\n :host(:hover) > [part='remove-button']::part(base) {\n color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));\n }\n}\n\n:host(:active) > [part='remove-button']::part(base) {\n color: color-mix(in oklab, currentColor, var(--wa-color-mix-active));\n}\n\n/*\n * Pill modifier\n */\n:host([pill]) {\n border-radius: var(--wa-border-radius-pill);\n}\n",KE,ad],e})();function xp(e,t=0){if(!e||!globalThis.Node)return"";if("function"==typeof e[Symbol.iterator])return(Array.isArray(e)?e:[...e]).map(i=>xp(i,--t)).join("");let n=e;if(n.nodeType===Node.TEXT_NODE)return n.textContent??"";if(n.nodeType===Node.ELEMENT_NODE){let r=n;if(r.hasAttribute("slot")||r.matches("style, script"))return"";if(r instanceof HTMLSlotElement){let i=r.assignedNodes({flatten:!0});if(i.length>0)return xp(i,--t)}return t>-1?xp(r,--t):r.textContent??""}return n.hasChildNodes()?xp(n.childNodes,--t):""}B([W({reflect:!0})],sc.prototype,"variant",2),B([W({reflect:!0})],sc.prototype,"appearance",2),B([W({reflect:!0})],sc.prototype,"size",2),B([W({type:Boolean,reflect:!0})],sc.prototype,"pill",2),B([W({attribute:"with-remove",type:Boolean})],sc.prototype,"withRemove",2),sc=B([ui("wa-tag")],sc);var ns=(()=>{let e=class extends di{constructor(){super(...arguments),this.localize=new za(this),this.isInitialized=!1,this.current=!1,this.value="",this.disabled=!1,this.selected=!1,this.defaultSelected=!1,this._label="",this.defaultLabel="",this.handleHover=t=>{"mouseenter"===t.type?this.customStates.set("hover",!0):"mouseleave"===t.type&&this.customStates.set("hover",!1)}}set label(t){const n=this._label;this._label=t||"",this._label!==n&&this.requestUpdate("label",n)}get label(){return this._label?this._label:(this.defaultLabel||this.updateDefaultLabel(),this.defaultLabel)}connectedCallback(){super.connectedCallback(),this.setAttribute("role","option"),this.setAttribute("aria-selected","false"),this.addEventListener("mouseenter",this.handleHover),this.addEventListener("mouseleave",this.handleHover),
|
||
|
|
<wa-icon
|
||
|
|
part="checked-icon"
|
||
|
|
class="check"
|
||
|
|
name="check"
|
||
|
|
library="system"
|
||
|
|
variant="solid"
|
||
|
|
aria-hidden="true"
|
||
|
|
></wa-icon>
|
||
|
|
<slot part="start" name="start" class="start"></slot>
|
||
|
|
<slot part="label" class="label" @slotchange=${this.handleDefaultSlotChange}></slot>
|
||
|
|
<slot part="end" name="end" class="end"></slot>
|
||
|
|
`}};return e.css=":host {\n display: block;\n color: var(--wa-color-text-normal);\n -webkit-user-select: none;\n user-select: none;\n\n position: relative;\n display: flex;\n align-items: center;\n font: inherit;\n padding: 0.5em 1em 0.5em 0.25em;\n line-height: var(--wa-line-height-condensed);\n transition: fill var(--wa-transition-normal) var(--wa-transition-easing);\n cursor: pointer;\n}\n\n:host(:focus) {\n outline: none;\n}\n\n@media (hover: hover) {\n :host(:not([disabled], :state(current)):is(:state(hover), :hover)) {\n background-color: var(--wa-color-neutral-fill-normal);\n color: var(--wa-color-neutral-on-normal);\n }\n}\n\n:host(:state(current)),\n:host([disabled]:state(current)) {\n background-color: var(--wa-color-brand-fill-loud);\n color: var(--wa-color-brand-on-loud);\n opacity: 1;\n}\n\n:host([disabled]) {\n outline: none;\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.label {\n flex: 1 1 auto;\n display: inline-block;\n}\n\n.check {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: var(--wa-font-size-smaller);\n visibility: hidden;\n width: 2em;\n}\n\n:host(:state(selected)) .check {\n visibility: visible;\n}\n\n.start,\n.end {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n}\n\n.start::slotted(*) {\n margin-inline-end: 0.5em;\n}\n\n.end::slotted(*) {\n margin-inline-start: 0.5em;\n}\n\n@media (forced-colors: active) {\n :host(:hover:not([aria-disabled='true'])) {\n outline: dashed 1px SelectedItem;\n outline-offset: -1px;\n }\n}\n",e})();B([$n(".label")],ns.prototype,"defaultSlot",2),B([$i()],ns.prototype,"current",2),B([W({reflect:!0})],ns.prototype,"value",2),B([W({type:Boolean})],ns.prototype,"disabled",2),B([W({type:Boolean,attribute:!1})],ns.prototype,"selected",2),B([W({type:Boolean,attribute:"selected"})],ns.prototype,"defaultSelected",2),B([W()],ns.prototype,"label",1),B([$i()],ns.prototype,"defaultLabel",2),ns=B([ui("wa-option")],ns);var bd=(()=>{let e=class extends di{constructor(){super(...arguments),this.variant="brand",this.appearance="accent",this.pill=!1,this.attention="none"}render(){return At` <slot part="base" role="status"></slot>`}};return e.css=[KE,":host {\n --pulse-color: var(--wa-color-fill-loud, var(--wa-color-brand-fill-loud));\n\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 0.375em 0.625em;\n color: var(--wa-color-on-loud, var(--wa-color-brand-on-loud));\n font-size: max(var(--wa-font-size-2xs), 0.75em);\n font-weight: var(--wa-font-weight-semibold);\n line-height: 1;\n white-space: nowrap;\n background-color: var(--wa-color-fill-loud, var(--wa-color-brand-fill-loud));\n border-color: transparent;\n border-radius: var(--wa-border-radius-s);\n border-style: var(--wa-border-style);\n border-width: var(--wa-border-width-s);\n user-select: none;\n -webkit-user-select: none;\n cursor: inherit;\n}\n\n/* Appearance modifiers */\n:host([appearance='outlined']) {\n --pulse-color: var(--wa-color-border-loud, var(--wa-color-brand-border-loud));\n\n color: var(--wa-color-on-quiet, var(--wa-color-brand-on-quiet));\n background-color: transparent;\n border-color: var(--wa-color-border-loud, var(--wa-color-brand-border-loud));\n}\n\n:host([appearance='filled']) {\n --pulse-color: var(--wa-color-fill-normal, var(--wa-color-brand-fill-normal));\n\n color: var(--wa-color-on-normal, var(--wa-color-brand-on-normal));\n background-color: var(--wa-color-fill-normal, var(--wa-color-brand-fill-normal));\n border-color: transparent;\n}\n\n:host([appearance='filled-outlined']) {\n --pulse-color: var(--wa-color-border-normal, var(--wa-color-brand-border-normal));\n\n color: var(--wa-color-on-normal, var(--wa-color-brand-on-normal));\n background-color: var(--wa-color-fill-normal, var(--wa-color-brand-fill-normal));\n border-color: var(--wa-color-border-normal, var(--wa-color-brand-border-normal));\n}\n\n:host([appearance='accent']) {\n --pulse-color: var(--wa-color-fill-loud, var(--wa-color-brand-fill-loud));\n\n color:
|
||
|
|
<details part="base">
|
||
|
|
<summary
|
||
|
|
part="header"
|
||
|
|
role="button"
|
||
|
|
aria-expanded=${this.open?"true":"false"}
|
||
|
|
aria-controls="content"
|
||
|
|
aria-disabled=${this.disabled?"true":"false"}
|
||
|
|
tabindex=${this.disabled?"-1":"0"}
|
||
|
|
@click=${this.handleSummaryClick}
|
||
|
|
@keydown=${this.handleSummaryKeyDown}
|
||
|
|
>
|
||
|
|
<slot name="summary" part="summary">${this.summary}</slot>
|
||
|
|
|
||
|
|
<span part="icon">
|
||
|
|
<slot name="expand-icon">
|
||
|
|
<wa-icon library="system" variant="solid" name=${t?"chevron-left":"chevron-right"}></wa-icon>
|
||
|
|
</slot>
|
||
|
|
<slot name="collapse-icon">
|
||
|
|
<wa-icon library="system" variant="solid" name=${t?"chevron-left":"chevron-right"}></wa-icon>
|
||
|
|
</slot>
|
||
|
|
</span>
|
||
|
|
</summary>
|
||
|
|
|
||
|
|
<div
|
||
|
|
class=${Ko({body:!0,animating:this.isAnimating})}
|
||
|
|
role="region"
|
||
|
|
aria-labelledby="header"
|
||
|
|
>
|
||
|
|
<slot part="content" id="content" class="content"></slot>
|
||
|
|
</div>
|
||
|
|
</details>
|
||
|
|
`}};return e.css=":host {\n --spacing: var(--wa-space-m);\n --show-duration: 200ms;\n --hide-duration: 200ms;\n\n display: block;\n}\n\ndetails {\n display: block;\n overflow-anchor: none;\n border: var(--wa-panel-border-width) var(--wa-color-surface-border) var(--wa-panel-border-style);\n background-color: var(--wa-color-surface-default);\n border-radius: var(--wa-panel-border-radius);\n color: var(--wa-color-text-normal);\n\n /* Print styles */\n @media print {\n background: none;\n border: solid var(--wa-border-width-s) var(--wa-color-surface-border);\n\n summary {\n list-style: none;\n }\n }\n}\n\n/* Appearance modifiers */\n:host([appearance='plain']) details {\n background-color: transparent;\n border-color: transparent;\n border-radius: 0;\n}\n\n:host([appearance='outlined']) details {\n background-color: var(--wa-color-surface-default);\n border-color: var(--wa-color-surface-border);\n}\n\n:host([appearance='filled']) details {\n background-color: var(--wa-color-neutral-fill-quiet);\n border-color: transparent;\n}\n\n:host([appearance='filled-outlined']) details {\n background-color: var(--wa-color-neutral-fill-quiet);\n border-color: var(--wa-color-neutral-border-quiet);\n}\n\n:host([disabled]) details {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\nsummary {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--spacing);\n padding: var(--spacing); /* Add padding here */\n border-radius: calc(var(--wa-panel-border-radius) - var(--wa-panel-border-width));\n user-select: none;\n -webkit-user-select: none;\n cursor: pointer;\n\n &::marker,\n &::-webkit-details-marker {\n display: none;\n }\n\n &:focus {\n outline: none;\n }\n\n &:focus-visible {\n outline: var(--wa-focus-ring);\n outline-offset: calc(var(--wa-panel-border-width) + var(--wa-focus-ring-offset));\n }\n}\n\n:host([open]) summary {\n border-end-start-radius: 0;\n border-end-end-radius: 0;\n}\n\n/* 'Start' icon placement */\n:host([icon-placement='start']) summary {\n flex-direction: row-reverse;\n justify-content: start;\n}\n\n[part~='icon'] {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n color: var(--wa-color-text-quiet);\n transition: rotate var(--wa-transition-normal) var(--wa-transition-easing);\n}\n\n:host([open]) [part~='icon'] {\n rotate: 90deg;\n}\n\n:host([open]:dir(rtl)) [part~='icon'] {\n rotate: -90deg;\n}\n\n:host([open]) slot[name='expand-icon'],\n:host(:not([open])) slot[name='collapse-icon'] {\n display: none;\n}\n\n.body.animating {\n overflow: hidden;\n}\n\n.content {\n display: block;\n padding-block-start: var(--spacing);\n padding-inline: var(--spacing); /* Add horizontal padding */\n padding-block-end: var(--spacing); /* Add bottom padding */\n}\n",e})();B([$n("details")],qr.prototype,"details",2),B([$n("summary")],qr.prototype,"header",2),B([$n(".body")],qr.prototype,"body",2),B([$n(".expand-icon-slot")],qr.prototype,"expandIconSlot",2),B([$i()],qr.prototype,"isAnimating",2),B([W({type:Boolean,reflect:!0})],qr.prototype,"open",2),B([W()],qr.prototype,"summary",2),B([W({reflect:!0})],qr.prototype,"name",2),B([W({type:Boolean,reflect:!0})],qr.prototype,"disabled",2),B([W({reflect:!0})],qr.prototype,"appearance",2),B([W({attribute:"icon-placement",reflect:!0})],qr.prototype,"iconPlacement",2),B([Ir("open",{waitUntilFirstUpdate:!0})],qr.prototype,"handleOpenChange",1),qr=B([ui("wa-details")],qr);const hY=(e,t)=>t.id;function fY(e,t){if(1&e&&(se(0,"wa-card",1)(1,"div",3),Yn(2,"wa-icon",4),te(3," Error "),ce(),se(4,"p"),te(5),ce()()),2&e){const n=Pe();he(5),Pt(n.error())}}function pY(e,t){if(1&e){const n=Zo();se(0,"div",5)(1,"div",6)(2,"div",7)(3,"span",8),te(4),ce(),se(5,"span",9),te(6),ce()(),se(7,"div",10),te(8,"Current Hashrate"),ce(),se(9,"div",11),te(10),ce()(),se(11,"div",12)(12,"div",13),Yn(13,"wa-icon",14),se(14,"div",15),te(15),ce(),se(16,"div",16),te(17,"Accepted"),ce()(),se(18,"div",17),Yn(19,"wa-icon",18),se(20,"div",15),te(21),ce(),se(22,"div",16),te(23,"Rejected"),ce()(),se(24,"div",19),
|
||
|
|
<label part="base">
|
||
|
|
<span part="control">
|
||
|
|
<input
|
||
|
|
class="input"
|
||
|
|
type="checkbox"
|
||
|
|
title=${this.title}
|
||
|
|
name=${this.name}
|
||
|
|
value=${on(this._value)}
|
||
|
|
.indeterminate=${GD(this.indeterminate)}
|
||
|
|
.checked=${GD(this.checked)}
|
||
|
|
.disabled=${this.disabled}
|
||
|
|
.required=${this.required}
|
||
|
|
aria-checked=${this.checked?"true":"false"}
|
||
|
|
aria-describedby="hint"
|
||
|
|
@click=${this.handleClick}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<wa-icon part="${i}-icon icon" library="system" name=${r}></wa-icon>
|
||
|
|
</span>
|
||
|
|
|
||
|
|
<slot part="label"></slot>
|
||
|
|
</label>
|
||
|
|
|
||
|
|
<slot
|
||
|
|
id="hint"
|
||
|
|
part="hint"
|
||
|
|
name="hint"
|
||
|
|
aria-hidden=${t?"false":"true"}
|
||
|
|
class="${Ko({"has-slotted":t})}"
|
||
|
|
>
|
||
|
|
${this.hint}
|
||
|
|
</slot>
|
||
|
|
`}};jn.css=[WD,ad,":host {\n --checked-icon-color: var(--wa-color-brand-on-loud);\n --checked-icon-scale: 0.8;\n\n display: inline-flex;\n color: var(--wa-form-control-value-color);\n font-family: inherit;\n font-weight: var(--wa-form-control-value-font-weight);\n line-height: var(--wa-form-control-value-line-height);\n user-select: none;\n -webkit-user-select: none;\n}\n\n[part~='control'] {\n display: inline-flex;\n flex: 0 0 auto;\n position: relative;\n align-items: center;\n justify-content: center;\n width: var(--wa-form-control-toggle-size);\n height: var(--wa-form-control-toggle-size);\n border-color: var(--wa-form-control-border-color);\n border-radius: min(\n calc(var(--wa-form-control-toggle-size) * 0.375),\n var(--wa-border-radius-s)\n ); /* min prevents entirely circular checkbox */\n border-style: var(--wa-border-style);\n border-width: var(--wa-form-control-border-width);\n background-color: var(--wa-form-control-background-color);\n transition:\n background var(--wa-transition-normal),\n border-color var(--wa-transition-fast),\n box-shadow var(--wa-transition-fast),\n color var(--wa-transition-fast);\n transition-timing-function: var(--wa-transition-easing);\n\n margin-inline-end: 0.5em;\n}\n\n[part~='base'] {\n display: flex;\n align-items: flex-start;\n position: relative;\n color: currentColor;\n vertical-align: middle;\n cursor: pointer;\n}\n\n[part~='label'] {\n display: inline;\n}\n\n/* Checked */\n[part~='control']:has(:checked, :indeterminate) {\n color: var(--checked-icon-color);\n border-color: var(--wa-form-control-activated-color);\n background-color: var(--wa-form-control-activated-color);\n}\n\n/* Focus */\n[part~='control']:has(> input:focus-visible:not(:disabled)) {\n outline: var(--wa-focus-ring);\n outline-offset: var(--wa-focus-ring-offset);\n}\n\n/* Disabled */\n:host [part~='base']:has(input:disabled) {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\ninput {\n position: absolute;\n padding: 0;\n margin: 0;\n height: 100%;\n width: 100%;\n opacity: 0;\n pointer-events: none;\n}\n\n[part~='icon'] {\n display: flex;\n scale: var(--checked-icon-scale);\n\n /* Without this, Safari renders the icon slightly to the left */\n &::part(svg) {\n translate: 0.0009765625em;\n }\n\n input:not(:checked, :indeterminate) + & {\n visibility: hidden;\n }\n}\n\n:host([required]) [part~='label']::after {\n content: var(--wa-form-control-required-content);\n color: var(--wa-form-control-required-content-color);\n margin-inline-start: var(--wa-form-control-required-content-offset);\n}\n"],jn.shadowRootOptions={...Gr.shadowRootOptions,delegatesFocus:!0},B([$n('input[type="checkbox"]')],jn.prototype,"input",2),B([W()],jn.prototype,"title",2),B([W({reflect:!0})],jn.prototype,"name",2),B([W({reflect:!0})],jn.prototype,"value",1),B([W({reflect:!0})],jn.prototype,"size",2),B([W({type:Boolean})],jn.prototype,"disabled",2),B([W({type:Boolean,reflect:!0})],jn.prototype,"indeterminate",2),B([W({type:Boolean,attribute:!1})],jn.prototype,"checked",2),B([W({type:Boolean,reflect:!0,attribute:"checked"})],jn.prototype,"defaultChecked",2),B([W({reflect:!0})],jn.prototype,"form",2),B([W({type:Boolean,reflect:!0})],jn.prototype,"required",2),B([W()],jn.prototype,"hint",2),B([Ir("defaultChecked")],jn.prototype,"handleDefaultCheckedChange",1),B([Ir(["checked","indeterminate"])],jn.prototype,"handleStateChange",1),B([Ir("disabled")],jn.prototype,"handleDisabledChange",1),jn=B([ui("wa-checkbox")],jn);const GY=(e,t)=>t.name;function qY(e,t){if(1&e&&(se(0,"wa-card",1)(1,"p"),te(2),ce()()),2&e){const n=Pe();he(2),Pt(n.error)}}function YY(e,t){if(1&e&&(se(0,"wa-card",2)(1,"p"),te(2),ce()()),2&e){const n=Pe();he(2),Pt(n.success)}}function XY(e,t){if(1&e&&(se(0,"wa-option",5),te(1),ce()),2&e){const n=t.$implicit;Ni("value",n.name),he(),Pt(n.name)}}let ZY=(()=>{class e{minerService=Y(Zl);state=this.minerService.state;model={id:"",name:"",minerType:"",config:{pool:"",wallet:"",tls:!0,hugePages:!0}};error=null;success=null;onNameInput(n){this.model.name=n.t
|