@duyluonganduin/acl-web-components 0.0.20 → 0.0.22
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/acl-web-components.cjs +1 -1
- package/dist/acl-web-components.d.ts +2 -2
- package/dist/acl-web-components.iife.js +2359 -0
- package/dist/acl-web-components.js +2 -2
- package/dist/{anduin-suggestion-CQiYXOwe.js → anduin-suggestion-CQz20-Zh.js} +209 -102
- package/dist/{anduin-suggestion-Ckob48Ua.cjs → anduin-suggestion-CYvS3luw.cjs} +180 -103
- package/dist/react.cjs +1 -1
- package/dist/react.d.ts +2 -2
- package/dist/react.js +2 -2
- package/dist/tailwind-preset.cjs +1 -1
- package/dist/tailwind-preset.js +1 -0
- package/dist/tailwind-theme.css +1 -0
- package/dist/tokens.css +1 -0
- package/package.json +4 -3
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
13
13
|
*/const E1=globalThis,$5=l=>l,Y1=E1.trustedTypes,A5=Y1?Y1.createPolicy("lit-html",{createHTML:l=>l}):void 0,Y5="$lit$",U=`lit$${Math.random().toFixed(9).slice(2)}$`,X5="?"+U,B4=`<${X5}>`,t1=document,$1=()=>t1.createComment(""),A1=l=>l===null||typeof l!="object"&&typeof l!="function",_2=Array.isArray,z4=l=>_2(l)||typeof(l==null?void 0:l[Symbol.iterator])=="function",c2=`[
|
|
14
14
|
\f\r]`,R1=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,B5=/-->/g,z5=/>/g,J=RegExp(`>|${c2}(?:([^\\s"'>=/]+)(${c2}*=${c2}*(?:[^
|
|
15
|
-
\f\r"'\`<>=]|("|')|))|$)`,"g"),
|
|
15
|
+
\f\r"'\`<>=]|("|')|))|$)`,"g"),S5=/'/g,O5=/"/g,K5=/^(?:script|style|textarea|title)$/i,J5=l=>(e,...t)=>({_$litType$:l,strings:e,values:t}),s=J5(1),f2=J5(2),o1=Symbol.for("lit-noChange"),c=Symbol.for("lit-nothing"),P5=new WeakMap,Q=t1.createTreeWalker(t1,129);function Q5(l,e){if(!_2(l)||!l.hasOwnProperty("raw"))throw Error("invalid template strings array");return A5!==void 0?A5.createHTML(e):e}const S4=(l,e)=>{const t=l.length-1,i=[];let o,n=e===2?"<svg>":e===3?"<math>":"",r=R1;for(let a=0;a<t;a++){const d=l[a];let p,u,g=-1,H=0;for(;H<d.length&&(r.lastIndex=H,u=r.exec(d),u!==null);)H=r.lastIndex,r===R1?u[1]==="!--"?r=B5:u[1]!==void 0?r=z5:u[2]!==void 0?(K5.test(u[2])&&(o=RegExp("</"+u[2],"g")),r=J):u[3]!==void 0&&(r=J):r===J?u[0]===">"?(r=o??R1,g=-1):u[1]===void 0?g=-2:(g=r.lastIndex-u[2].length,p=u[1],r=u[3]===void 0?J:u[3]==='"'?O5:S5):r===O5||r===S5?r=J:r===B5||r===z5?r=R1:(r=J,o=void 0);const f=r===J&&l[a+1].startsWith("/>")?" ":"";n+=r===R1?d+B4:g>=0?(i.push(p),d.slice(0,g)+Y5+d.slice(g)+U+f):d+U+(g===-2?a:f)}return[Q5(l,n+(l[t]||"<?>")+(e===2?"</svg>":e===3?"</math>":"")),i]};class B1{constructor({strings:e,_$litType$:t},i){let o;this.parts=[];let n=0,r=0;const a=e.length-1,d=this.parts,[p,u]=S4(e,t);if(this.el=B1.createElement(p,i),Q.currentNode=this.el.content,t===2||t===3){const g=this.el.content.firstChild;g.replaceWith(...g.childNodes)}for(;(o=Q.nextNode())!==null&&d.length<a;){if(o.nodeType===1){if(o.hasAttributes())for(const g of o.getAttributeNames())if(g.endsWith(Y5)){const H=u[r++],f=o.getAttribute(g).split(U),Z=/([.?@])?(.*)/.exec(H);d.push({type:1,index:n,name:Z[2],strings:f,ctor:Z[1]==="."?P4:Z[1]==="?"?F4:Z[1]==="@"?D4:a2}),o.removeAttribute(g)}else g.startsWith(U)&&(d.push({type:6,index:n}),o.removeAttribute(g));if(K5.test(o.tagName)){const g=o.textContent.split(U),H=g.length-1;if(H>0){o.textContent=Y1?Y1.emptyScript:"";for(let f=0;f<H;f++)o.append(g[f],$1()),Q.nextNode(),d.push({type:2,index:++n});o.append(g[H],$1())}}}else if(o.nodeType===8)if(o.data===X5)d.push({type:2,index:n});else{let g=-1;for(;(g=o.data.indexOf(U,g+1))!==-1;)d.push({type:7,index:n}),g+=U.length-1}n++}}static createElement(e,t){const i=t1.createElement("template");return i.innerHTML=e,i}}function g1(l,e,t=l,i){var r,a;if(e===o1)return e;let o=i!==void 0?(r=t._$Co)==null?void 0:r[i]:t._$Cl;const n=A1(e)?void 0:e._$litDirective$;return(o==null?void 0:o.constructor)!==n&&((a=o==null?void 0:o._$AO)==null||a.call(o,!1),n===void 0?o=void 0:(o=new n(l),o._$AT(l,t,i)),i!==void 0?(t._$Co??(t._$Co=[]))[i]=o:t._$Cl=o),o!==void 0&&(e=g1(l,o._$AS(l,e.values),o,i)),e}class O4{constructor(e,t){this._$AV=[],this._$AN=void 0,this._$AD=e,this._$AM=t}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(e){const{el:{content:t},parts:i}=this._$AD,o=((e==null?void 0:e.creationScope)??t1).importNode(t,!0);Q.currentNode=o;let n=Q.nextNode(),r=0,a=0,d=i[0];for(;d!==void 0;){if(r===d.index){let p;d.type===2?p=new I1(n,n.nextSibling,this,e):d.type===1?p=new d.ctor(n,d.name,d.strings,this,e):d.type===6&&(p=new I4(n,this,e)),this._$AV.push(p),d=i[++a]}r!==(d==null?void 0:d.index)&&(n=Q.nextNode(),r++)}return Q.currentNode=t1,o}p(e){let t=0;for(const i of this._$AV)i!==void 0&&(i.strings!==void 0?(i._$AI(e,i,t),t+=i.strings.length-2):i._$AI(e[t])),t++}}class I1{get _$AU(){var e;return((e=this._$AM)==null?void 0:e._$AU)??this._$Cv}constructor(e,t,i,o){this.type=2,this._$AH=c,this._$AN=void 0,this._$AA=e,this._$AB=t,this._$AM=i,this.options=o,this._$Cv=(o==null?void 0:o.isConnected)??!0}get parentNode(){let e=this._$AA.parentNode;const t=this._$AM;return t!==void 0&&(e==null?void 0:e.nodeType)===11&&(e=t.parentNode),e}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(e,t=this){e=g1(this,e,t),A1(e)?e===c||e==null||e===""?(this._$AH!==c&&this._$AR(),this._$AH=c):e!==this._$AH&&e!==o1&&this._(e):e._$litType$!==void 0?this.$(e):e.nodeType!==void 0?this.T(e):z4(e)?this.k(e):this._(e)}O(e){return this._$AA.parentNode.insertBefore(e,this._$AB)}T(e){this._$AH!==e&&(this._$AR(),this._$AH=this.O(e))}_(e){this._$AH!==c&&A1(this._$AH)?this._$AA.nextSibling.data=e:this.T(t1.createTextNode(e)),this._$AH=e}$(e){var n;const{values:t,_$litType$:i}=e,o=typeof i=="number"?this._$AC(e):(i.el===void 0&&(i.el=B1.createElement(Q5(i.h,i.h[0]),this.options)),i);if(((n=this._$AH)==null?void 0:n._$AD)===o)this._$AH.p(t);else{const r=new O4(o,this),a=r.u(this.options);r.p(t),this.T(a),this._$AH=r}}_$AC(e){let t=P5.get(e.strings);return t===void 0&&P5.set(e.strings,t=new B1(e)),t}k(e){_2(this._$AH)||(this._$AH=[],this._$AR());const t=this._$AH;let i,o=0;for(const n of e)o===t.length?t.push(i=new I1(this.O($1()),this.O($1()),this,this.options)):i=t[o],i._$AI(n),o++;o<t.length&&(this._$AR(i&&i._$AB.nextSibling,o),t.length=o)}_$AR(e=this._$AA.nextSibling,t){var i;for((i=this._$AP)==null?void 0:i.call(this,!1,!0,t);e!==this._$AB;){const o=$5(e).nextSibling;$5(e).remove(),e=o}}setConnected(e){var t;this._$AM===void 0&&(this._$Cv=e,(t=this._$AP)==null||t.call(this,e))}}class a2{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(e,t,i,o,n){this.type=1,this._$AH=c,this._$AN=void 0,this.element=e,this.name=t,this._$AM=o,this.options=n,i.length>2||i[0]!==""||i[1]!==""?(this._$AH=Array(i.length-1).fill(new String),this.strings=i):this._$AH=c}_$AI(e,t=this,i,o){const n=this.strings;let r=!1;if(n===void 0)e=g1(this,e,t,0),r=!A1(e)||e!==this._$AH&&e!==o1,r&&(this._$AH=e);else{const a=e;let d,p;for(e=n[0],d=0;d<n.length-1;d++)p=g1(this,a[i+d],t,d),p===o1&&(p=this._$AH[d]),r||(r=!A1(p)||p!==this._$AH[d]),p===c?e=c:e!==c&&(e+=(p??"")+n[d+1]),this._$AH[d]=p}r&&!o&&this.j(e)}j(e){e===c?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,e??"")}}class P4 extends a2{constructor(){super(...arguments),this.type=3}j(e){this.element[this.name]=e===c?void 0:e}}class F4 extends a2{constructor(){super(...arguments),this.type=4}j(e){this.element.toggleAttribute(this.name,!!e&&e!==c)}}class D4 extends a2{constructor(e,t,i,o,n){super(e,t,i,o,n),this.type=5}_$AI(e,t=this){if((e=g1(this,e,t,0)??c)===o1)return;const i=this._$AH,o=e===c&&i!==c||e.capture!==i.capture||e.once!==i.once||e.passive!==i.passive,n=e!==c&&(i===c||o);o&&this.element.removeEventListener(this.name,this,i),n&&this.element.addEventListener(this.name,this,e),this._$AH=e}handleEvent(e){var t;typeof this._$AH=="function"?this._$AH.call(((t=this.options)==null?void 0:t.host)??this.element,e):this._$AH.handleEvent(e)}}class I4{constructor(e,t,i){this.element=e,this.type=6,this._$AN=void 0,this._$AM=t,this.options=i}get _$AU(){return this._$AM._$AU}_$AI(e){g1(this,e)}}const p2=E1.litHtmlPolyfillSupport;p2==null||p2(B1,I1),(E1.litHtmlVersions??(E1.litHtmlVersions=[])).push("3.3.2");const T4=(l,e,t)=>{const i=(t==null?void 0:t.renderBefore)??e;let o=i._$litPart$;if(o===void 0){const n=(t==null?void 0:t.renderBefore)??null;i._$litPart$=o=new I1(e.insertBefore($1(),n),n,void 0,t??{})}return o._$AI(l),o};/**
|
|
16
16
|
* @license
|
|
17
17
|
* Copyright 2017 Google LLC
|
|
18
18
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
@@ -253,7 +253,7 @@
|
|
|
253
253
|
.callout--success { background-color: var(--color-semantic-success-4); color: var(--color-semantic-gray-0); }
|
|
254
254
|
.callout--danger { background-color: var(--color-semantic-danger-4); color: var(--color-semantic-gray-0); }
|
|
255
255
|
.callout--warning { background-color: var(--color-semantic-warning-3); color: var(--color-semantic-gray-8); }
|
|
256
|
-
`;let
|
|
256
|
+
`;let S1=N2;e3([C()],S1.prototype,"variant");customElements.get("anduin-callout")||customElements.define("anduin-callout",S1);var t3=Object.defineProperty,i4=(l,e,t,i)=>{for(var o=void 0,n=l.length-1,r;n>=0;n--)(r=l[n])&&(o=r(e,t,o)||o);return o&&t3(e,t,o),o};const U2=class U2 extends h{constructor(){super(...arguments),this.direction="horizontal",this.hasContent=!1}connectedCallback(){super.connectedCallback(),this.setAttribute("role","separator"),this.setAttribute("aria-orientation",this.direction==="vertical"?"vertical":"horizontal")}updated(e){e.has("direction")&&this.setAttribute("aria-orientation",this.direction==="vertical"?"vertical":"horizontal")}onSlotChange(e){const i=e.target.assignedNodes({flatten:!0});this.hasContent=i.some(o=>{var n;return((n=o.textContent)==null?void 0:n.trim())!==""})}render(){return this.direction==="vertical"?this.hasContent?s`
|
|
257
257
|
<div class="divider--vertical">
|
|
258
258
|
<div class="divider__line--vertical"></div>
|
|
259
259
|
<div><slot @slotchange=${this.onSlotChange}></slot></div>
|
|
@@ -280,7 +280,7 @@
|
|
|
280
280
|
.dot--primary { background-color: var(--color-semantic-primary-4); color: var(--color-semantic-gray-0); }
|
|
281
281
|
.dot--danger { background-color: var(--color-semantic-danger-4); color: var(--color-semantic-gray-0); }
|
|
282
282
|
.dot--warning { background-color: var(--color-semantic-warning-3); color: var(--color-semantic-gray-8); }
|
|
283
|
-
`;let
|
|
283
|
+
`;let O1=j2;i3([C()],O1.prototype,"variant");customElements.get("anduin-dot")||customElements.define("anduin-dot",O1);var l3=Object.defineProperty,l4=(l,e,t,i)=>{for(var o=void 0,n=l.length-1,r;n>=0;n--)(r=l[n])&&(o=r(e,t,o)||o);return o&&l3(e,t,o),o};const G2=class G2 extends h{constructor(){super(...arguments),this.percent="",this.height="medium"}render(){const e=this.height==="large"?8:3,t=this.percent===""||this.percent===null;let i="";const o=["progress__fill"];return t?o.push("progress__fill--indeterminate"):i=`width: ${Math.max(0,Math.min(1,parseFloat(this.percent)||0))*100}%;`,s`
|
|
284
284
|
<div class="progress" style="height: ${e}px;" part="progress">
|
|
285
285
|
<div class="${o.join(" ")}" style="${i}"></div>
|
|
286
286
|
<div class="progress__background"></div>
|
|
@@ -322,7 +322,7 @@
|
|
|
322
322
|
@keyframes skeleton-wave {
|
|
323
323
|
0% { transform: translateX(-100%); } 100% { transform: translateX(100%); }
|
|
324
324
|
}
|
|
325
|
-
`;let
|
|
325
|
+
`;let S=q2;w1([C()],S.prototype,"effect");w1([C()],S.prototype,"shape");w1([C()],S.prototype,"height");w1([C()],S.prototype,"width");w1([C({type:Number})],S.prototype,"duration");w1([C({attribute:"font-size"})],S.prototype,"fontSize");customElements.get("anduin-skeleton")||customElements.define("anduin-skeleton",S);var r3=Object.defineProperty,C3=(l,e,t,i)=>{for(var o=void 0,n=l.length-1,r;n>=0;n--)(r=l[n])&&(o=r(e,t,o)||o);return o&&r3(e,t,o),o};const W2=class W2 extends h{constructor(){super(...arguments),this.height="256px"}render(){return s`
|
|
326
326
|
<div class="loading-state" style="height: ${this.height};" part="loading-state">
|
|
327
327
|
<div class="loading-state__indicator">
|
|
328
328
|
<anduin-spinner size="large"></anduin-spinner>
|
|
@@ -604,7 +604,7 @@
|
|
|
604
604
|
font-size: 11px; line-height: 16px; font-weight: 590; letter-spacing: 0.066px;
|
|
605
605
|
color: var(--color-gray-7); white-space: nowrap;
|
|
606
606
|
}
|
|
607
|
-
`;let
|
|
607
|
+
`;let O=n5;k([C()],O.prototype,"value");k([C({attribute:"start-icon"})],O.prototype,"startIcon");k([C({type:Boolean})],O.prototype,"disabled");k([C({type:Boolean,attribute:"show-badge"})],O.prototype,"showBadge");k([C({attribute:"badge-count"})],O.prototype,"badgeCount");k([M()],O.prototype,"isActive");const r5=class r5 extends h{constructor(){super(...arguments),this.value="",this.isActive=!1}connectedCallback(){super.connectedCallback();const e=this.closest("anduin-tabs");e&&e.addEventListener(N1,t=>{const i=t;this.isActive=i.detail===this.value})}updated(e){e.has("isActive")&&this.toggleAttribute("active",this.isActive)}render(){return s`
|
|
608
608
|
<div class="tab-content" role="tabpanel" tabindex="0" part="tab-content">
|
|
609
609
|
<slot></slot>
|
|
610
610
|
</div>
|
|
@@ -612,7 +612,7 @@
|
|
|
612
612
|
:host { display: block; font-family: var(--font-sans); flex: var(--_tab-fill-flex, 0 0 auto); min-height: 0; }
|
|
613
613
|
:host(:not([active])) { display: none; }
|
|
614
614
|
.tab-content { width: 100%; height: var(--_tab-fill-height, auto); overflow-x: hidden; overflow-y: auto; }
|
|
615
|
-
`;let M1=r5;k([C()],M1.prototype,"value");k([M()],M1.prototype,"isActive");customElements.get("anduin-tabs")||customElements.define("anduin-tabs",i1);customElements.get("anduin-tabs-list")||customElements.define("anduin-tabs-list",m1);customElements.get("anduin-tab-trigger")||customElements.define("anduin-tab-trigger",
|
|
615
|
+
`;let M1=r5;k([C()],M1.prototype,"value");k([M()],M1.prototype,"isActive");customElements.get("anduin-tabs")||customElements.define("anduin-tabs",i1);customElements.get("anduin-tabs-list")||customElements.define("anduin-tabs-list",m1);customElements.get("anduin-tab-trigger")||customElements.define("anduin-tab-trigger",O);customElements.get("anduin-tab-content")||customElements.define("anduin-tab-content",M1);var u3=Object.defineProperty,$2=(l,e,t,i)=>{for(var o=void 0,n=l.length-1,r;n>=0;n--)(r=l[n])&&(o=r(e,t,o)||o);return o&&u3(e,t,o),o};const s4="anduin-tag-close:click",h3={gray:"tag--light-gray",primary:"tag--light-primary",success:"tag--light-success",warning:"tag--light-warning",danger:"tag--light-danger",boldGray:"tag--bold-gray",boldPrimary:"tag--bold-primary",boldSuccess:"tag--bold-success",boldWarning:"tag--bold-warning",boldDanger:"tag--bold-danger",customAqua:"tag--custom-aqua",customBlue:"tag--custom-blue",customBlueGreen:"tag--custom-blue-green",customGreen:"tag--custom-green",customHotPink:"tag--custom-hot-pink",customIndigo:"tag--custom-indigo",customMagenta:"tag--custom-magenta",customOrange:"tag--custom-orange",customPink:"tag--custom-pink",customPurple:"tag--custom-purple",customRed:"tag--custom-red",customYellow:"tag--custom-yellow",customYellowGreen:"tag--custom-yellow-green",customYellowOrange:"tag--custom-yellow-orange"},g3={gray:"tag__icon--light-gray",primary:"tag__icon--light-primary",success:"tag__icon--light-success",warning:"tag__icon--light-warning",danger:"tag__icon--light-danger",boldGray:"tag__icon--bold-gray",boldPrimary:"tag__icon--bold-primary",boldSuccess:"tag__icon--bold-success",boldWarning:"tag__icon--bold-warning",boldDanger:"tag__icon--bold-danger",customRed:"tag__icon--custom-red",customBlue:"tag__icon--custom-blue",customIndigo:"tag__icon--custom-indigo",customPurple:"tag__icon--custom-purple",customGreen:"tag__icon--custom-green",customHotPink:"tag__icon--custom-hot-pink",customAqua:"tag__icon--custom-aqua",customOrange:"tag__icon--custom-orange",customYellowOrange:"tag__icon--custom-yellow-orange",customYellow:"tag__icon--custom-yellow",customYellowGreen:"tag__icon--custom-yellow-green",customMagenta:"tag__icon--custom-magenta",customBlueGreen:"tag__icon--custom-blue-green",customPink:"tag__icon--custom-pink"},C5=class C5 extends h{constructor(){super(...arguments),this.variant="gray",this.icon="",this.disabled=!1}render(){const e=h3[this.variant]||"tag--light-gray",t=g3[this.variant]||"tag__icon--light-gray";return s`
|
|
616
616
|
<div class="tag ${e} ${this.disabled?"tag--disabled":""}" part="tag">
|
|
617
617
|
${this.icon?s`<anduin-icon name="${this.icon}" size="12" class="tag__icon ${t}"></anduin-icon>`:c}
|
|
618
618
|
<div class="tag__label"><slot></slot></div>
|
|
@@ -678,13 +678,13 @@
|
|
|
678
678
|
}
|
|
679
679
|
.tag-close__button:hover { opacity: 0.7; }
|
|
680
680
|
.tag-close__button:active { opacity: 0.5; }
|
|
681
|
-
`;let Q1=a5;customElements.get("anduin-tag")||customElements.define("anduin-tag",l1);customElements.get("anduin-tag-close")||customElements.define("anduin-tag-close",Q1);var v3=Object.defineProperty,d4=(l,e,t,i)=>{for(var o=void 0,n=l.length-1,r;n>=0;n--)(r=l[n])&&(o=r(e,t,o)||o);return o&&v3(e,t,o),o};const A2="anduin-tooltip:show",s2="anduin-tooltip:hide",B2="anduin-tooltip:trigger-mounted",z2="anduin-tooltip:content-popup-mounted",
|
|
681
|
+
`;let Q1=a5;customElements.get("anduin-tag")||customElements.define("anduin-tag",l1);customElements.get("anduin-tag-close")||customElements.define("anduin-tag-close",Q1);var v3=Object.defineProperty,d4=(l,e,t,i)=>{for(var o=void 0,n=l.length-1,r;n>=0;n--)(r=l[n])&&(o=r(e,t,o)||o);return o&&v3(e,t,o),o};const A2="anduin-tooltip:show",s2="anduin-tooltip:hide",B2="anduin-tooltip:trigger-mounted",z2="anduin-tooltip:content-popup-mounted",S2="anduin-tooltip:content-popup-unmounted",O2="anduin-tooltip:visibility-changed",f3=["top-start","top-center","top-end","right-start","right-center","right-end","bottom-start","bottom-center","bottom-end","left-start","left-center","left-end"];function D5(l,e,t,i,o){switch(i){case"top-start":return{left:l.left,top:l.top-t-o};case"top-center":return{left:l.left+l.width/2-e/2,top:l.top-t-o};case"top-end":return{left:l.left+l.width-e,top:l.top-t-o};case"right-start":return{left:l.right+o,top:l.top};case"right-center":return{left:l.right+o,top:l.top+l.height/2-t/2};case"right-end":return{left:l.right+o,top:l.top+l.height-t};case"bottom-start":return{left:l.left,top:l.bottom+o};case"bottom-center":return{left:l.left+l.width/2-e/2,top:l.bottom+o};case"bottom-end":return{left:l.left+l.width-e,top:l.bottom+o};case"left-start":return{left:l.left-e-o,top:l.top};case"left-center":return{left:l.left-e-o,top:l.top+l.height/2-t/2};case"left-end":return{left:l.left-e-o,top:l.top+l.height-t};default:return{left:0,top:0}}}function I5(l,e){return e.right>=l.left&&e.left<=l.right&&e.top<=l.bottom&&e.bottom>=l.top}function T5(l,e){const t=Math.max(l.left,e.left),i=Math.max(l.top,e.top),o=Math.min(l.right,e.right),n=Math.min(l.bottom,e.bottom);return o<t||n<i?0:(o-t)*(n-i)}function H3(l,e,t,i=8){const o=window.innerWidth,n=window.innerHeight,r={left:0,top:0,right:o,bottom:n},a=e.width,d=e.height;if(!I5({left:l.left,top:l.top,right:l.right,bottom:l.bottom},r))return null;const p=D5(l,a,d,t,i),u=f3.map(f=>({p:f,off:D5(l,a,d,f,i)})).filter(({off:f})=>I5({left:f.left,top:f.top,right:f.left+a,bottom:f.top+d},r));if(u.length===0)return{placement:t,left:Math.round(Math.min(Math.max(p.left,0),o-a)),top:Math.round(Math.min(Math.max(p.top,0),n-d))};u.sort((f,Z)=>{const N={left:f.off.left,top:f.off.top,right:f.off.left+a,bottom:f.off.top+d},w={left:Z.off.left,top:Z.off.top,right:Z.off.left+a,bottom:Z.off.top+d},F=T5(N,r),K=T5(w,r);if(K!==F)return K-F;const U1=Math.abs(f.off.left-p.left)+Math.abs(f.off.top-p.top),j1=Math.abs(Z.off.left-p.left)+Math.abs(Z.off.top-p.top);return U1-j1});const{p:g,off:H}=u[0];return{placement:g,left:Math.round(Math.min(Math.max(H.left,0),o-a)),top:Math.round(Math.min(Math.max(H.top,0),n-d))}}function V2(l){return l.split("-")[0]||"top"}function V3(l,e,t){let i=!1,o=t.length-1;for(let n=0;n<t.length;n++){const r=t[n][0],a=t[n][1],d=t[o][0],p=t[o][1];a>e!=p>e&&l<(d-r)*(e-a)/(p-a)+r&&(i=!i),o=n}return i}const s5=class s5 extends h{constructor(){super(...arguments),this.disabled=!1,this.placement="top-center",this.triggerElement=null,this.contentPopupElement=null,this.containingBlockLeft=0,this.containingBlockTop=0,this.rafId=0,this.prevTriggerTop=NaN,this.prevTriggerLeft=NaN,this.isVisible=!1}connectedCallback(){super.connectedCallback(),this.addEventListener(B2,e=>{e.stopPropagation(),this.triggerElement=e.detail,this.maybeStartPositionLoop()}),this.addEventListener(z2,e=>{e.stopPropagation(),this.contentPopupElement=e.detail,this.computeContainingBlockOffset(this.contentPopupElement),this.maybeStartPositionLoop()}),this.addEventListener(S2,e=>{e.stopPropagation(),this.stopPositionLoop(),this.contentPopupElement=null}),this.addEventListener(A2,e=>{e.stopPropagation(),!this.disabled&&(this.isVisible=!0,this.broadcastVisibilityChanged(`show:${this.placement}`))}),this.addEventListener(s2,e=>{e.stopPropagation(),this.isVisible=!1,this.stopPositionLoop(),this.broadcastVisibilityChanged("hide")})}updated(e){e.has("disabled")&&this.disabled&&this.isVisible&&(this.isVisible=!1,this.stopPositionLoop(),this.broadcastVisibilityChanged("hide"))}disconnectedCallback(){super.disconnectedCallback(),this.stopPositionLoop(),this.triggerElement=null,this.contentPopupElement=null}maybeStartPositionLoop(){this.isVisible&&this.triggerElement&&this.contentPopupElement&&this.startPositionLoop()}startPositionLoop(){this.stopPositionLoop(),this.prevTriggerTop=NaN,this.prevTriggerLeft=NaN;const e=this.triggerElement,t=this.contentPopupElement,i=this.placement,o=()=>{const n=e.getBoundingClientRect();(n.top!==this.prevTriggerTop||n.left!==this.prevTriggerLeft)&&(this.prevTriggerTop=n.top,this.prevTriggerLeft=n.left,this.positionPopup(t,e,i)),this.rafId=requestAnimationFrame(o)};this.rafId=requestAnimationFrame(o)}stopPositionLoop(){this.rafId&&(cancelAnimationFrame(this.rafId),this.rafId=0),this.prevTriggerTop=NaN,this.prevTriggerLeft=NaN}computeContainingBlockOffset(e){const t=e,i=t.style.transform;t.style.transform="none";const o=e.getBoundingClientRect();this.containingBlockLeft=o.left,this.containingBlockTop=o.top,t.style.transform=i}positionPopup(e,t,i){const o=t.getBoundingClientRect(),n=e.getBoundingClientRect(),r=H3(o,n,i,8);if(r){const a=e;a.style.transform=`translate(${r.left-this.containingBlockLeft}px, ${r.top-this.containingBlockTop}px)`;const d=V2(r.placement),p=V2(i);if(d!==p){const u=e.querySelector(".tooltip-arrow");u&&(u.classList.remove(`tooltip-arrow--${p}`),u.classList.add(`tooltip-arrow--${d}`))}}}broadcastVisibilityChanged(e){this.dispatchEvent(new CustomEvent(O2,{detail:e,bubbles:!1,composed:!1}))}render(){return s`<div class="tooltip-root" part="tooltip"><slot></slot></div>`}};s5.styles=v`
|
|
682
682
|
:host { display: inline-block; position: relative; max-width: 100%; font-family: var(--font-sans); }
|
|
683
683
|
.tooltip-root { display: inline-block; position: relative; max-width: 100%; }
|
|
684
684
|
`;let y1=s5;d4([C({type:Boolean})],y1.prototype,"disabled");d4([C()],y1.prototype,"placement");const d5=class d5 extends h{firstUpdated(){requestAnimationFrame(()=>{this.dispatchEvent(new CustomEvent(B2,{detail:this,bubbles:!0,composed:!0}))}),this.addEventListener("pointerenter",()=>{this.dispatchEvent(new CustomEvent(A2,{bubbles:!0,composed:!0}))}),this.addEventListener("click",()=>{this.dispatchEvent(new CustomEvent(s2,{bubbles:!0,composed:!0}))})}render(){return s`<span class="tooltip-trigger" part="tooltip-trigger"><slot></slot></span>`}};d5.styles=v`
|
|
685
685
|
:host { display: inline-block; max-width: 100%; font-family: var(--font-sans); }
|
|
686
686
|
.tooltip-trigger { display: flex; align-items: center; max-width: 100%; }
|
|
687
|
-
`;let e2=d5;const c5=class c5 extends h{constructor(){super(...arguments),this.graceArea=null,this.triggerEl=null,this.popupEl=null,this.handlePointerMove=e=>{var n,r;if(!this.graceArea)return;const t=e.target,i=((n=this.triggerEl)==null?void 0:n.contains(t))??!1,o=((r=this.popupEl)==null?void 0:r.contains(t))??!1;i||o?this.graceArea=null:V3(e.clientX,e.clientY,this.graceArea)||(this.graceArea=null,this.dispatchEvent(new CustomEvent(s2,{bubbles:!0,composed:!0})))},this.handleTriggerLeave=e=>{this.triggerEl&&this.popupEl&&this.createGraceArea(this.triggerEl,this.popupEl,e)},this.handleContentLeave=e=>{this.triggerEl&&this.popupEl&&this.createGraceArea(this.popupEl,this.triggerEl,e)}}connectedCallback(){super.connectedCallback();const e=this.closest("anduin-tooltip");e&&e.addEventListener(
|
|
687
|
+
`;let e2=d5;const c5=class c5 extends h{constructor(){super(...arguments),this.graceArea=null,this.triggerEl=null,this.popupEl=null,this.handlePointerMove=e=>{var n,r;if(!this.graceArea)return;const t=e.target,i=((n=this.triggerEl)==null?void 0:n.contains(t))??!1,o=((r=this.popupEl)==null?void 0:r.contains(t))??!1;i||o?this.graceArea=null:V3(e.clientX,e.clientY,this.graceArea)||(this.graceArea=null,this.dispatchEvent(new CustomEvent(s2,{bubbles:!0,composed:!0})))},this.handleTriggerLeave=e=>{this.triggerEl&&this.popupEl&&this.createGraceArea(this.triggerEl,this.popupEl,e)},this.handleContentLeave=e=>{this.triggerEl&&this.popupEl&&this.createGraceArea(this.popupEl,this.triggerEl,e)}}connectedCallback(){super.connectedCallback();const e=this.closest("anduin-tooltip");e&&e.addEventListener(O2,t=>{const i=t.detail;i.startsWith("show:")?this.showPopup(i.slice(5)):this.hidePopup()})}disconnectedCallback(){super.disconnectedCallback(),this.hidePopup()}createGraceArea(e,t,i){const o=t.getBoundingClientRect(),n=i.clientX,r=i.clientY;this.graceArea=[[n,r],[o.left,o.top],[o.right,o.top],[o.right,o.bottom],[o.left,o.bottom]]}setupGraceAreaListeners(e,t){this.cleanupGraceAreaListeners(),this.triggerEl=e,this.popupEl=t,e.addEventListener("pointerleave",this.handleTriggerLeave),t.addEventListener("pointerleave",this.handleContentLeave),document.addEventListener("pointermove",this.handlePointerMove)}cleanupGraceAreaListeners(){this.triggerEl&&this.triggerEl.removeEventListener("pointerleave",this.handleTriggerLeave),this.popupEl&&this.popupEl.removeEventListener("pointerleave",this.handleContentLeave),document.removeEventListener("pointermove",this.handlePointerMove),this.graceArea=null,this.triggerEl=null,this.popupEl=null}showPopup(e){this.hidePopup();const t=V2(e),i=document.createElement("div");i.className="tooltip-popup",i.setAttribute("role","tooltip");const o=document.createElement("div");o.className=`tooltip-arrow tooltip-arrow--${t}`;const n=document.createElement("div");n.className="tooltip-body",n.appendChild(document.createElement("slot")),i.appendChild(o),i.appendChild(n);const r=this.shadowRoot.querySelector(".tooltip-content-wrapper");r&&r.appendChild(i),this.popupEl=i;const a=this.closest("anduin-tooltip");if(a){const d=a.querySelector("anduin-tooltip-trigger");d&&this.setupGraceAreaListeners(d,i)}this.dispatchEvent(new CustomEvent(z2,{detail:i,bubbles:!0,composed:!0}))}hidePopup(){this.popupEl&&(this.popupEl.remove(),this.popupEl=null,this.dispatchEvent(new CustomEvent(S2,{bubbles:!0,composed:!0}))),this.cleanupGraceAreaListeners()}render(){return s`<div class="tooltip-content-wrapper"></div>`}};c5.styles=v`
|
|
688
688
|
:host {
|
|
689
689
|
display: contents;
|
|
690
690
|
--tooltip-bg: var(--anduin-tooltip-content-background, var(--color-gray-9));
|
|
@@ -967,26 +967,35 @@
|
|
|
967
967
|
anduin-icon { color: var(--color-gray-7); }
|
|
968
968
|
.menu-item--danger anduin-icon { color: var(--color-danger-4); }
|
|
969
969
|
`;let n1=f5;s1([C()],n1.prototype,"icon");s1([C()],n1.prototype,"variant");s1([C({type:Boolean})],n1.prototype,"disabled");customElements.get("anduin-menu")||customElements.define("anduin-menu",q);customElements.get("anduin-menu-item")||customElements.define("anduin-menu-item",n1);var y3=Object.defineProperty,d1=(l,e,t,i)=>{for(var o=void 0,n=l.length-1,r;n>=0;n--)(r=l[n])&&(o=r(e,t,o)||o);return o&&y3(e,t,o),o};const h1="anduin-close",p4="anduin-after-close",h2=300,g2=200,N5=250;var G;const Y=(G=class extends h{constructor(){super(...arguments),this.open=!1,this.heading="",this.hideHeader=!1,this.hideFooter=!1,this.maxWidth="480",this.fullscreen=!1,this._leaving=!1,this.onAnduinClose=e=>{e.target!==this&&e.stopPropagation()}}updated(e){if(e.has("maxWidth")){const t=this.maxWidth,i=G._PRESETS.has(t)?`${t}px`:t;this.style.setProperty("--_modal-width",i)}e.has("open")&&(this.open?(this._leaving=!1,this.classList.add("is-shown")):this.classList.contains("is-shown")&&(this._leaving=!0,setTimeout(()=>{this._leaving=!1,this.classList.remove("is-shown"),this.dispatchEvent(new CustomEvent(p4,{bubbles:!0,composed:!0}))},Math.max(g2,N5))))}dispatch(e){this.dispatchEvent(new CustomEvent(e,{bubbles:!0,composed:!0}))}onOverlayClick(){this.dispatch(h1)}onClose(){this.dispatch(h1)}connectedCallback(){super.connectedCallback(),this.addEventListener(h1,this.onAnduinClose)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener(h1,this.onAnduinClose)}render(){const e=this._leaving,t=this.fullscreen;return s`
|
|
970
|
-
<div
|
|
970
|
+
<div
|
|
971
|
+
class=${`overlay${e?" is-leaving":""}`}
|
|
972
|
+
@click=${this.onOverlayClick}
|
|
973
|
+
></div>
|
|
971
974
|
<div class=${`modal-wrapper${t?" modal-wrapper--fullscreen":""}`}>
|
|
972
|
-
<div
|
|
973
|
-
${
|
|
974
|
-
|
|
975
|
-
|
|
976
|
-
|
|
977
|
-
|
|
978
|
-
|
|
979
|
-
|
|
980
|
-
|
|
981
|
-
|
|
982
|
-
|
|
983
|
-
|
|
984
|
-
|
|
985
|
-
|
|
986
|
-
|
|
987
|
-
|
|
988
|
-
|
|
989
|
-
|
|
975
|
+
<div
|
|
976
|
+
class=${`modal${t?" modal--fullscreen":""}${e?" is-leaving":""}`}
|
|
977
|
+
role="dialog"
|
|
978
|
+
aria-modal="true"
|
|
979
|
+
aria-labelledby="modal-title"
|
|
980
|
+
>
|
|
981
|
+
${this.hideHeader?c:s` <div class="header">
|
|
982
|
+
<div class="header-slot">
|
|
983
|
+
<slot name="header">
|
|
984
|
+
${this.heading?s`<span id="modal-title" class="title"
|
|
985
|
+
>${this.heading}</span
|
|
986
|
+
>`:c}
|
|
987
|
+
</slot>
|
|
988
|
+
</div>
|
|
989
|
+
<span class="header-sep"></span>
|
|
990
|
+
<anduin-button
|
|
991
|
+
appearance="plain"
|
|
992
|
+
variant="gray9"
|
|
993
|
+
size="medium"
|
|
994
|
+
label="Close"
|
|
995
|
+
start-icon="cross"
|
|
996
|
+
@click=${this.onClose}
|
|
997
|
+
></anduin-button>
|
|
998
|
+
</div>`}
|
|
990
999
|
<div class="body">
|
|
991
1000
|
<slot></slot>
|
|
992
1001
|
</div>
|
|
@@ -1005,38 +1014,72 @@
|
|
|
1005
1014
|
z-index: var(--z-modal, 1000);
|
|
1006
1015
|
}
|
|
1007
1016
|
@keyframes overlayIn {
|
|
1008
|
-
from {
|
|
1009
|
-
|
|
1017
|
+
from {
|
|
1018
|
+
opacity: 0;
|
|
1019
|
+
}
|
|
1020
|
+
to {
|
|
1021
|
+
opacity: 1;
|
|
1022
|
+
}
|
|
1010
1023
|
}
|
|
1011
1024
|
@keyframes overlayOut {
|
|
1012
|
-
from {
|
|
1013
|
-
|
|
1025
|
+
from {
|
|
1026
|
+
opacity: 1;
|
|
1027
|
+
}
|
|
1028
|
+
to {
|
|
1029
|
+
opacity: 0;
|
|
1030
|
+
}
|
|
1014
1031
|
}
|
|
1015
1032
|
@keyframes modalIn {
|
|
1016
|
-
from {
|
|
1017
|
-
|
|
1033
|
+
from {
|
|
1034
|
+
opacity: 0;
|
|
1035
|
+
transform: translateY(12px);
|
|
1036
|
+
}
|
|
1037
|
+
to {
|
|
1038
|
+
opacity: 1;
|
|
1039
|
+
transform: translateY(0);
|
|
1040
|
+
}
|
|
1018
1041
|
}
|
|
1019
1042
|
@keyframes modalOut {
|
|
1020
|
-
from {
|
|
1021
|
-
|
|
1043
|
+
from {
|
|
1044
|
+
opacity: 1;
|
|
1045
|
+
transform: translateY(0);
|
|
1046
|
+
}
|
|
1047
|
+
to {
|
|
1048
|
+
opacity: 0;
|
|
1049
|
+
transform: translateY(12px);
|
|
1050
|
+
}
|
|
1022
1051
|
}
|
|
1023
1052
|
@keyframes modalFullscreenIn {
|
|
1024
|
-
from {
|
|
1025
|
-
|
|
1053
|
+
from {
|
|
1054
|
+
opacity: 0;
|
|
1055
|
+
transform: translateY(24px);
|
|
1056
|
+
}
|
|
1057
|
+
to {
|
|
1058
|
+
opacity: 1;
|
|
1059
|
+
transform: translateY(0);
|
|
1060
|
+
}
|
|
1026
1061
|
}
|
|
1027
1062
|
@keyframes modalFullscreenOut {
|
|
1028
|
-
from {
|
|
1029
|
-
|
|
1063
|
+
from {
|
|
1064
|
+
opacity: 1;
|
|
1065
|
+
transform: translateY(0);
|
|
1066
|
+
}
|
|
1067
|
+
to {
|
|
1068
|
+
opacity: 0;
|
|
1069
|
+
transform: translateY(24px);
|
|
1070
|
+
}
|
|
1030
1071
|
}
|
|
1031
1072
|
.overlay {
|
|
1032
1073
|
position: absolute;
|
|
1033
1074
|
inset: 0;
|
|
1034
1075
|
background: rgba(50, 60, 77, 0.6);
|
|
1035
1076
|
cursor: default;
|
|
1036
|
-
animation: overlayIn ${h2}ms cubic-bezier(0.2, 0, 0, 1)
|
|
1077
|
+
animation: overlayIn ${h2}ms cubic-bezier(0.2, 0, 0, 1)
|
|
1078
|
+
forwards;
|
|
1037
1079
|
}
|
|
1038
1080
|
.overlay.is-leaving {
|
|
1039
|
-
animation: overlayOut ${N5}ms
|
|
1081
|
+
animation: overlayOut ${N5}ms
|
|
1082
|
+
cubic-bezier(0.3, 0, 0.8, 0.15) forwards;
|
|
1040
1083
|
}
|
|
1041
1084
|
.modal-wrapper {
|
|
1042
1085
|
position: absolute;
|
|
@@ -1057,12 +1100,16 @@
|
|
|
1057
1100
|
display: flex;
|
|
1058
1101
|
flex-direction: column;
|
|
1059
1102
|
max-height: calc(100vh - 64px);
|
|
1060
|
-
box-shadow:
|
|
1103
|
+
box-shadow:
|
|
1104
|
+
0 8px 24px 0 rgba(29, 41, 57, 0.12),
|
|
1105
|
+
0 2px 8px 0 rgba(29, 41, 57, 0.08);
|
|
1061
1106
|
flex-shrink: 0;
|
|
1062
|
-
animation: modalIn ${h2}ms cubic-bezier(0.05, 0.7, 0.1, 1)
|
|
1107
|
+
animation: modalIn ${h2}ms cubic-bezier(0.05, 0.7, 0.1, 1)
|
|
1108
|
+
forwards;
|
|
1063
1109
|
}
|
|
1064
1110
|
.modal.is-leaving {
|
|
1065
|
-
animation: modalOut ${g2}ms
|
|
1111
|
+
animation: modalOut ${g2}ms
|
|
1112
|
+
cubic-bezier(0.3, 0, 0.8, 0.15) forwards;
|
|
1066
1113
|
}
|
|
1067
1114
|
.modal-wrapper--fullscreen {
|
|
1068
1115
|
padding: 0;
|
|
@@ -1091,10 +1138,12 @@
|
|
|
1091
1138
|
max-height: 100%;
|
|
1092
1139
|
height: 100%;
|
|
1093
1140
|
box-shadow: none;
|
|
1094
|
-
animation: modalFullscreenIn ${h2}ms
|
|
1141
|
+
animation: modalFullscreenIn ${h2}ms
|
|
1142
|
+
cubic-bezier(0.05, 0.7, 0.1, 1) forwards;
|
|
1095
1143
|
}
|
|
1096
1144
|
.modal--fullscreen.is-leaving {
|
|
1097
|
-
animation: modalFullscreenOut ${g2}ms
|
|
1145
|
+
animation: modalFullscreenOut ${g2}ms
|
|
1146
|
+
cubic-bezier(0.3, 0, 0.8, 0.15) forwards;
|
|
1098
1147
|
}
|
|
1099
1148
|
.header {
|
|
1100
1149
|
flex-shrink: 0;
|
|
@@ -1102,15 +1151,19 @@
|
|
|
1102
1151
|
align-items: flex-start;
|
|
1103
1152
|
padding: 20px 28px;
|
|
1104
1153
|
}
|
|
1105
|
-
.header-slot {
|
|
1106
|
-
|
|
1154
|
+
.header-slot {
|
|
1155
|
+
flex: 1;
|
|
1156
|
+
min-width: 0;
|
|
1157
|
+
}
|
|
1158
|
+
.header-sep {
|
|
1159
|
+
display: none;
|
|
1160
|
+
}
|
|
1107
1161
|
.title {
|
|
1108
1162
|
flex: 1;
|
|
1109
1163
|
font-size: 20px;
|
|
1110
|
-
font-weight:
|
|
1164
|
+
font-weight: 600;
|
|
1111
1165
|
line-height: 32px;
|
|
1112
|
-
color: #323c4d;
|
|
1113
|
-
letter-spacing: -0.46px;
|
|
1166
|
+
color: var(--color-gray-8, #323c4d);
|
|
1114
1167
|
font-family: var(--font-sans);
|
|
1115
1168
|
margin: 0;
|
|
1116
1169
|
}
|
|
@@ -1461,7 +1514,7 @@
|
|
|
1461
1514
|
`:c}};b5.styles=v`
|
|
1462
1515
|
:host { display: inline-flex; align-items: center; justify-content: center; }
|
|
1463
1516
|
svg { display: block; }
|
|
1464
|
-
`;let Z1=b5;H4([C()],Z1.prototype,"type");H4([C({type:Number})],Z1.prototype,"size");customElements.get("anduin-file-icon")||customElements.define("anduin-file-icon",Z1);var z3=Object.defineProperty,p1=(l,e,t,i)=>{for(var o=void 0,n=l.length-1,r;n>=0;n--)(r=l[n])&&(o=r(e,t,o)||o);return o&&z3(e,t,o),o};const j5={gray:"info",primary:"infoCircleLine",success:"checkCircle",warning:"warning",danger:"error"},
|
|
1517
|
+
`;let Z1=b5;H4([C()],Z1.prototype,"type");H4([C({type:Number})],Z1.prototype,"size");customElements.get("anduin-file-icon")||customElements.define("anduin-file-icon",Z1);var z3=Object.defineProperty,p1=(l,e,t,i)=>{for(var o=void 0,n=l.length-1,r;n>=0;n--)(r=l[n])&&(o=r(e,t,o)||o);return o&&z3(e,t,o),o};const j5={gray:"info",primary:"infoCircleLine",success:"checkCircle",warning:"warning",danger:"error"},S3="anduin-toast:dismiss",m5=class m5 extends h{constructor(){super(...arguments),this.variant="gray",this.heading="",this.description="",this._dismissing=!1}dismiss(){var t;if(this._dismissing)return;this._dismissing=!0;const e=i=>{var o;i.propertyName==="opacity"&&((o=this._toastEl)==null||o.removeEventListener("transitionend",e),this.dispatchEvent(new CustomEvent(S3,{bubbles:!0,composed:!0})))};(t=this._toastEl)==null||t.addEventListener("transitionend",e)}_onClose(){this.dismiss()}render(){const e=j5[this.variant]??j5.gray;return s`
|
|
1465
1518
|
<div
|
|
1466
1519
|
class="toast toast--${this.variant} ${this._dismissing?"toast--dismissing":""}"
|
|
1467
1520
|
part="toast"
|
|
@@ -1480,7 +1533,7 @@
|
|
|
1480
1533
|
aria-label="Dismiss"
|
|
1481
1534
|
@click=${this._onClose}
|
|
1482
1535
|
>
|
|
1483
|
-
<anduin-icon name="
|
|
1536
|
+
<anduin-icon name="crossSmall" size="16"></anduin-icon>
|
|
1484
1537
|
</button>
|
|
1485
1538
|
</div>
|
|
1486
1539
|
`}};m5.styles=v`
|
|
@@ -1504,9 +1557,9 @@
|
|
|
1504
1557
|
.toast {
|
|
1505
1558
|
display: flex;
|
|
1506
1559
|
align-items: flex-start;
|
|
1507
|
-
gap:
|
|
1508
|
-
padding:
|
|
1509
|
-
border-radius:
|
|
1560
|
+
gap: 8px;
|
|
1561
|
+
padding: 4px;
|
|
1562
|
+
border-radius: 12px;
|
|
1510
1563
|
box-shadow: var(
|
|
1511
1564
|
--shadow-4,
|
|
1512
1565
|
0px 4px 8px rgba(29, 41, 57, 0.08),
|
|
@@ -1528,10 +1581,9 @@
|
|
|
1528
1581
|
transform: translateX(-12px) scale(0.97);
|
|
1529
1582
|
}
|
|
1530
1583
|
|
|
1531
|
-
/*
|
|
1584
|
+
/* Light surface for all variants */
|
|
1532
1585
|
.toast {
|
|
1533
|
-
background: var(--color-gray-
|
|
1534
|
-
border: 1px solid var(--color-gray-8, #1d2939);
|
|
1586
|
+
background: var(--color-gray-0, #ffffff);
|
|
1535
1587
|
}
|
|
1536
1588
|
|
|
1537
1589
|
.toast__icon {
|
|
@@ -1539,22 +1591,29 @@
|
|
|
1539
1591
|
display: flex;
|
|
1540
1592
|
align-items: center;
|
|
1541
1593
|
justify-content: center;
|
|
1542
|
-
|
|
1594
|
+
align-self: stretch;
|
|
1595
|
+
padding: 12px;
|
|
1596
|
+
border-radius: 8px;
|
|
1543
1597
|
}
|
|
1544
1598
|
.toast__icon--gray {
|
|
1545
|
-
color: var(--color-gray-
|
|
1599
|
+
color: var(--color-gray-6, #475467);
|
|
1600
|
+
background: var(--color-gray-2, #eaecf0);
|
|
1546
1601
|
}
|
|
1547
1602
|
.toast__icon--primary {
|
|
1548
|
-
color: var(--color-primary-
|
|
1603
|
+
color: var(--color-primary-4, #444ce7);
|
|
1604
|
+
background: var(--color-primary-1, #eef4ff);
|
|
1549
1605
|
}
|
|
1550
1606
|
.toast__icon--success {
|
|
1551
|
-
color: var(--color-success-
|
|
1607
|
+
color: var(--color-success-4, #17b26a);
|
|
1608
|
+
background: var(--color-success-1, #dcfae6);
|
|
1552
1609
|
}
|
|
1553
1610
|
.toast__icon--warning {
|
|
1554
|
-
color: var(--color-warning-
|
|
1611
|
+
color: var(--color-warning-4, #dc6803);
|
|
1612
|
+
background: var(--color-warning-1, #fef0c7);
|
|
1555
1613
|
}
|
|
1556
1614
|
.toast__icon--danger {
|
|
1557
|
-
color: var(--color-danger-
|
|
1615
|
+
color: var(--color-danger-4, #d92d20);
|
|
1616
|
+
background: var(--color-danger-1, #fee4e2);
|
|
1558
1617
|
}
|
|
1559
1618
|
|
|
1560
1619
|
.toast__body {
|
|
@@ -1562,20 +1621,23 @@
|
|
|
1562
1621
|
min-width: 0;
|
|
1563
1622
|
display: flex;
|
|
1564
1623
|
flex-direction: column;
|
|
1565
|
-
|
|
1624
|
+
padding-top: 2px;
|
|
1625
|
+
padding-bottom: 2px;
|
|
1626
|
+
align-self: stretch;
|
|
1627
|
+
justify-content: center;
|
|
1566
1628
|
}
|
|
1567
1629
|
|
|
1568
1630
|
.toast__title {
|
|
1569
1631
|
font-size: var(--text-13, 13px);
|
|
1570
1632
|
font-weight: 500;
|
|
1571
|
-
color: var(--color-gray-
|
|
1633
|
+
color: var(--color-gray-9, #101828);
|
|
1572
1634
|
line-height: 20px;
|
|
1573
1635
|
}
|
|
1574
1636
|
|
|
1575
1637
|
.toast__description {
|
|
1576
|
-
font-size: var(--text-
|
|
1638
|
+
font-size: var(--text-12, 12px);
|
|
1577
1639
|
font-weight: 400;
|
|
1578
|
-
color: var(--color-gray-
|
|
1640
|
+
color: var(--color-gray-7, #344054);
|
|
1579
1641
|
line-height: 20px;
|
|
1580
1642
|
}
|
|
1581
1643
|
|
|
@@ -1589,17 +1651,17 @@
|
|
|
1589
1651
|
background: none;
|
|
1590
1652
|
border: none;
|
|
1591
1653
|
cursor: pointer;
|
|
1592
|
-
border-radius:
|
|
1654
|
+
border-radius: 8px;
|
|
1593
1655
|
padding: 0;
|
|
1594
|
-
color: var(--color-gray-
|
|
1595
|
-
margin-top: -2px;
|
|
1656
|
+
color: var(--color-gray-6, #475467);
|
|
1596
1657
|
}
|
|
1658
|
+
|
|
1597
1659
|
.toast__close:hover {
|
|
1598
|
-
background: var(--color-gray-
|
|
1599
|
-
color: var(--color-gray-
|
|
1660
|
+
background: var(--color-gray-2, #eaecf0);
|
|
1661
|
+
color: var(--color-gray-9, #101828);
|
|
1600
1662
|
}
|
|
1601
1663
|
.toast__close:active {
|
|
1602
|
-
background: var(--color-gray-
|
|
1664
|
+
background: var(--color-gray-3, #d0d5dd);
|
|
1603
1665
|
}
|
|
1604
1666
|
`;let I=m5;p1([C()],I.prototype,"variant");p1([C()],I.prototype,"heading");p1([C()],I.prototype,"description");p1([M()],I.prototype,"_dismissing");p1([R(".toast")],I.prototype,"_toastEl");customElements.get("anduin-toast")||customElements.define("anduin-toast",I);const M5=class M5 extends h{constructor(){super(...arguments),this.position="bottom-left",this._toasts=[],this._nextId=0}show(e){const t=this._nextId++,i=e.position??this.position;this._toasts=[...this._toasts,{id:t,opts:{...e,position:i}}];const o=e.duration??4e3;return o>0&&setTimeout(()=>this._dismissById(t),o),t}dismiss(e){this._dismissById(e)}_dismissById(e){var i;const t=(i=this.shadowRoot)==null?void 0:i.querySelector(`anduin-toast[data-id="${e}"]`);t?t.dismiss():this._removeById(e)}_removeById(e){this._toasts=this._toasts.filter(t=>t.id!==e)}_onDismiss(e,t){e.stopPropagation(),this._removeById(t)}render(){return s`
|
|
1605
1667
|
<div class="toaster toaster--${this.position}" part="toaster">
|
|
@@ -1659,7 +1721,7 @@
|
|
|
1659
1721
|
right: 20px;
|
|
1660
1722
|
align-items: flex-end;
|
|
1661
1723
|
}
|
|
1662
|
-
`;let _1=M5;p1([C()],_1.prototype,"position");p1([M()],_1.prototype,"_toasts");customElements.get("anduin-toaster")||customElements.define("anduin-toaster",_1);const
|
|
1724
|
+
`;let _1=M5;p1([C()],_1.prototype,"position");p1([M()],_1.prototype,"_toasts");customElements.get("anduin-toaster")||customElements.define("anduin-toaster",_1);const O3={show(l){return P3(l.position).show(l)},success(l,e,t){return this.show({...t,variant:"success",heading:l,description:e})},danger(l,e,t){return this.show({...t,variant:"danger",heading:l,description:e})},warning(l,e,t){return this.show({...t,variant:"warning",heading:l,description:e})},primary(l,e,t){return this.show({...t,variant:"primary",heading:l,description:e})},gray(l,e,t){return this.show({...t,variant:"gray",heading:l,description:e})}},v2=new Map;function P3(l="bottom-left"){if(v2.has(l))return v2.get(l);const e=document.createElement("anduin-toaster");return e.position=l,document.body.appendChild(e),v2.set(l,e),e}var F3=Object.defineProperty,V4=(l,e,t,i)=>{for(var o=void 0,n=l.length-1,r;n>=0;n--)(r=l[n])&&(o=r(e,t,o)||o);return o&&F3(e,t,o),o};const L4="anduin-switcher:change",y5=class y5 extends h{constructor(){super(...arguments),this.checked=!1,this.disabled=!1}onChange(){this.checked=!this.checked,this.dispatchEvent(new CustomEvent(L4,{detail:this.checked,bubbles:!0,composed:!0}))}render(){return s`
|
|
1663
1725
|
<label class="${this.disabled?"is-disabled":""}">
|
|
1664
1726
|
<div class="track${this.checked?" track--checked":""}" part="track">
|
|
1665
1727
|
<input
|
|
@@ -1984,20 +2046,21 @@
|
|
|
1984
2046
|
@pointerup=${this._onResizeEnd}
|
|
1985
2047
|
@pointercancel=${this._onResizeEnd}
|
|
1986
2048
|
></div>
|
|
1987
|
-
${this.hideHeader?c:s`
|
|
1988
|
-
|
|
1989
|
-
|
|
1990
|
-
|
|
1991
|
-
|
|
1992
|
-
|
|
1993
|
-
|
|
1994
|
-
|
|
1995
|
-
|
|
1996
|
-
|
|
1997
|
-
|
|
1998
|
-
|
|
1999
|
-
|
|
2000
|
-
|
|
2049
|
+
${this.hideHeader?c:s` <div class="header">
|
|
2050
|
+
<slot name="header">
|
|
2051
|
+
${this.heading?s`<span id="drawer-title" class="title"
|
|
2052
|
+
>${this.heading}</span
|
|
2053
|
+
>`:c}
|
|
2054
|
+
</slot>
|
|
2055
|
+
<anduin-button
|
|
2056
|
+
appearance="plain"
|
|
2057
|
+
variant="gray9"
|
|
2058
|
+
size="medium"
|
|
2059
|
+
label="Close"
|
|
2060
|
+
start-icon="cross"
|
|
2061
|
+
@click=${this._onClose}
|
|
2062
|
+
></anduin-button>
|
|
2063
|
+
</div>`}
|
|
2001
2064
|
<div class="body">
|
|
2002
2065
|
<slot></slot>
|
|
2003
2066
|
</div>
|
|
@@ -2017,12 +2080,20 @@
|
|
|
2017
2080
|
pointer-events: none;
|
|
2018
2081
|
}
|
|
2019
2082
|
@keyframes drawerIn {
|
|
2020
|
-
from {
|
|
2021
|
-
|
|
2083
|
+
from {
|
|
2084
|
+
transform: translateX(100%);
|
|
2085
|
+
}
|
|
2086
|
+
to {
|
|
2087
|
+
transform: translateX(0);
|
|
2088
|
+
}
|
|
2022
2089
|
}
|
|
2023
2090
|
@keyframes drawerOut {
|
|
2024
|
-
from {
|
|
2025
|
-
|
|
2091
|
+
from {
|
|
2092
|
+
transform: translateX(0);
|
|
2093
|
+
}
|
|
2094
|
+
to {
|
|
2095
|
+
transform: translateX(100%);
|
|
2096
|
+
}
|
|
2026
2097
|
}
|
|
2027
2098
|
/* Transparent backdrop — only rendered when dismiss-on-outside-click is set */
|
|
2028
2099
|
.backdrop {
|
|
@@ -2039,14 +2110,18 @@
|
|
|
2039
2110
|
display: flex;
|
|
2040
2111
|
flex-direction: column;
|
|
2041
2112
|
background: #fff;
|
|
2042
|
-
box-shadow:
|
|
2043
|
-
|
|
2113
|
+
box-shadow:
|
|
2114
|
+
-8px 0 24px 0 rgba(29, 41, 57, 0.12),
|
|
2115
|
+
-2px 0 8px 0 rgba(29, 41, 57, 0.08);
|
|
2116
|
+
animation: drawerIn ${T3}ms cubic-bezier(0.05, 0.7, 0.1, 1)
|
|
2117
|
+
forwards;
|
|
2044
2118
|
min-width: 200px;
|
|
2045
2119
|
max-width: 90vw;
|
|
2046
2120
|
pointer-events: auto;
|
|
2047
2121
|
}
|
|
2048
2122
|
.drawer.is-leaving {
|
|
2049
|
-
animation: drawerOut ${G5}ms
|
|
2123
|
+
animation: drawerOut ${G5}ms
|
|
2124
|
+
cubic-bezier(0.3, 0, 0.8, 0.15) forwards;
|
|
2050
2125
|
}
|
|
2051
2126
|
@media (max-width: 640px) {
|
|
2052
2127
|
.drawer {
|
|
@@ -2058,7 +2133,9 @@
|
|
|
2058
2133
|
max-width: 100%;
|
|
2059
2134
|
min-width: unset;
|
|
2060
2135
|
}
|
|
2061
|
-
.resize-handle {
|
|
2136
|
+
.resize-handle {
|
|
2137
|
+
display: none;
|
|
2138
|
+
}
|
|
2062
2139
|
}
|
|
2063
2140
|
.resize-handle {
|
|
2064
2141
|
position: absolute;
|
|
@@ -2084,10 +2161,9 @@
|
|
|
2084
2161
|
.title {
|
|
2085
2162
|
flex: 1;
|
|
2086
2163
|
font-size: 16px;
|
|
2087
|
-
font-weight:
|
|
2164
|
+
font-weight: 600;
|
|
2088
2165
|
line-height: 24px;
|
|
2089
|
-
color: #323c4d;
|
|
2090
|
-
letter-spacing: -0.2px;
|
|
2166
|
+
color: var(--color-gray-8, #323c4d);
|
|
2091
2167
|
font-family: var(--font-sans);
|
|
2092
2168
|
margin: 0;
|
|
2093
2169
|
}
|
|
@@ -2095,7 +2171,8 @@
|
|
|
2095
2171
|
flex: 1;
|
|
2096
2172
|
overflow-y: auto;
|
|
2097
2173
|
min-height: 0;
|
|
2098
|
-
|
|
2174
|
+
|
|
2175
|
+
color: var(--color-gray-8, #323c4d);
|
|
2099
2176
|
}
|
|
2100
2177
|
.footer {
|
|
2101
2178
|
flex-shrink: 0;
|
|
@@ -2279,4 +2356,4 @@
|
|
|
2279
2356
|
color: var(--color-gray-5, #98a1b2);
|
|
2280
2357
|
text-align: center;
|
|
2281
2358
|
}
|
|
2282
|
-
`;let V=x5;m([C()],V.prototype,"value");m([C()],V.prototype,"size");m([C({type:Boolean})],V.prototype,"disabled");m([C({type:Boolean})],V.prototype,"readonly");m([C()],V.prototype,"placeholder");m([C()],V.prototype,"inputid");m([C()],V.prototype,"status");m([C({attribute:"start-icon"})],V.prototype,"startIcon");m([C({attribute:"end-icon"})],V.prototype,"endIcon");m([C({type:Boolean})],V.prototype,"clearable");m([C({attribute:!1})],V.prototype,"suggestions");m([C({type:Boolean})],V.prototype,"filter");m([C({type:Boolean,attribute:"hide-when-empty"})],V.prototype,"hideWhenEmpty");m([C({attribute:"empty-text"})],V.prototype,"emptyText");m([M()],V.prototype,"_open");m([M()],V.prototype,"_activeIndex");m([R("input")],V.prototype,"_inputEl");m([R(".panel")],V.prototype,"_panelEl");customElements.get("anduin-suggestion")||customElements.define("anduin-suggestion",V);exports.AnduinAvatar=B;exports.AnduinBadge=z1;exports.AnduinBadgeCount=H1;exports.AnduinButton=b;exports.AnduinCallout=
|
|
2359
|
+
`;let V=x5;m([C()],V.prototype,"value");m([C()],V.prototype,"size");m([C({type:Boolean})],V.prototype,"disabled");m([C({type:Boolean})],V.prototype,"readonly");m([C()],V.prototype,"placeholder");m([C()],V.prototype,"inputid");m([C()],V.prototype,"status");m([C({attribute:"start-icon"})],V.prototype,"startIcon");m([C({attribute:"end-icon"})],V.prototype,"endIcon");m([C({type:Boolean})],V.prototype,"clearable");m([C({attribute:!1})],V.prototype,"suggestions");m([C({type:Boolean})],V.prototype,"filter");m([C({type:Boolean,attribute:"hide-when-empty"})],V.prototype,"hideWhenEmpty");m([C({attribute:"empty-text"})],V.prototype,"emptyText");m([M()],V.prototype,"_open");m([M()],V.prototype,"_activeIndex");m([R("input")],V.prototype,"_inputEl");m([R(".panel")],V.prototype,"_panelEl");customElements.get("anduin-suggestion")||customElements.define("anduin-suggestion",V);exports.AnduinAvatar=B;exports.AnduinBadge=z1;exports.AnduinBadgeCount=H1;exports.AnduinButton=b;exports.AnduinCallout=S1;exports.AnduinCheckbox=D;exports.AnduinDivider=V1;exports.AnduinDot=O1;exports.AnduinDrawer=$;exports.AnduinDrawerClose=m4;exports.AnduinDropdown=L;exports.AnduinField=F1;exports.AnduinFieldDescription=X1;exports.AnduinFieldError=K1;exports.AnduinFieldGroup=J1;exports.AnduinFieldLabel=b1;exports.AnduinFileIcon=Z1;exports.AnduinIcon=f1;exports.AnduinInput=_;exports.AnduinLoadingState=P1;exports.AnduinMenu=q;exports.AnduinMenuItem=n1;exports.AnduinModal=u4;exports.AnduinModalClose=h4;exports.AnduinPopover=A;exports.AnduinPopoverClose=l2;exports.AnduinProgress=L1;exports.AnduinRadio=P;exports.AnduinRadioGroup=r1;exports.AnduinSkeleton=S;exports.AnduinSpinner=v1;exports.AnduinSuggestion=V;exports.AnduinSwitcher=x1;exports.AnduinTabContent=M1;exports.AnduinTabTrigger=O;exports.AnduinTabs=i1;exports.AnduinTabsList=m1;exports.AnduinTag=l1;exports.AnduinTagClose=Q1;exports.AnduinTextarea=E;exports.AnduinToast=I;exports.AnduinToaster=_1;exports.AnduinTooltip=y1;exports.AnduinTooltipContent=t2;exports.AnduinTooltipTrigger=e2;exports.AnduinWell=D1;exports.AnduinWellClose=o2;exports.BADGE_STYLES=x2;exports.CHECKBOX_CHANGE=n4;exports.DRAWER_AFTER_CLOSE_EVENT=b4;exports.DRAWER_CLOSE_EVENT=C2;exports.DROPDOWN_CHANGE=m2;exports.FIELD_LABEL_CLICK=k2;exports.FIELD_LABEL_CLICK_COORDINATED=C1;exports.FILE_ICONS=v4;exports.INPUT_CHANGE=H2;exports.INPUT_CLEAR=r4;exports.MENU_ITEM_CLICK=n2;exports.MODAL_AFTER_CLOSE_EVENT=p4;exports.MODAL_CLOSE_EVENT=h1;exports.POPOVER_CLOSE=i2;exports.RADIO_CHANGE=r2;exports.RADIO_GROUP_CHANGE=g4;exports.SUGGESTION_CHANGE=q1;exports.SUGGESTION_CLEAR=y4;exports.SUGGESTION_SELECT=M4;exports.SWITCHER_CHANGE=L4;exports.TAB_CHANGE=a4;exports.TAB_TRIGGER_CLICK=E2;exports.TAB_VALUE_CHANGED=N1;exports.TAG_CLOSE_CLICK=s4;exports.TEXTAREA_CHANGE=C4;exports.TOOLTIP_CONTENT_POPUP_MOUNTED=z2;exports.TOOLTIP_CONTENT_POPUP_UNMOUNTED=S2;exports.TOOLTIP_HIDE=s2;exports.TOOLTIP_SHOW=A2;exports.TOOLTIP_TRIGGER_MOUNTED=B2;exports.TOOLTIP_VISIBILITY_CHANGED=O2;exports.WELL_CLOSE_CLICK=c4;exports.getBadgeVariantClass=w2;exports.resolveFileIcon=f4;exports.toast=O3;
|