@duyluonganduin/acl-web-components 0.0.21 → 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 +137 -69
- package/dist/acl-web-components.js +1 -1
- package/dist/{anduin-suggestion-D6WMsEcg.js → anduin-suggestion-CQz20-Zh.js} +177 -79
- package/dist/{anduin-suggestion-DwPitfLM.cjs → anduin-suggestion-CYvS3luw.cjs} +137 -69
- package/dist/react.cjs +1 -1
- package/dist/react.d.ts +2 -2
- package/dist/react.js +2 -2
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("./anduin-suggestion-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("./anduin-suggestion-CYvS3luw.cjs"),i=':root{--color-gray-0: oklch(1 0 0);--color-gray-1: oklch(.9846 .0017 247.84);--color-gray-2: oklch(.9515 .0046 258.32);--color-gray-3: oklch(.9336 .0058 264.53);--color-gray-4: oklch(.8618 .0141 258.35);--color-gray-5: oklch(.7073 .0268 263.28);--color-gray-6: oklch(.6528 .0316 266.24);--color-gray-7: oklch(.5371 .0337 264.24);--color-gray-8: oklch(.3544 .0326 260.94);--color-gray-9: oklch(.2776 .0341 255.81);--color-danger-1: oklch(.9437 .0174 17.47);--color-danger-2: oklch(.8643 .0573 18.32);--color-danger-3: oklch(.712 .1517 21.64);--color-danger-4: oklch(.5948 .2165 26.91);--color-danger-5: oklch(.531 .2147 28.91);--color-primary-1: oklch(.9474 .0256 221.57);--color-primary-2: oklch(.8652 .066 236.86);--color-primary-3: oklch(.7219 .1335 240.15);--color-primary-4: oklch(.5679 .1784 254.76);--color-primary-5: oklch(.4682 .1548 255.23);--color-success-1: oklch(.9276 .0541 150.91);--color-success-2: oklch(.8592 .1078 149.75);--color-success-3: oklch(.6953 .1711 149.14);--color-success-4: oklch(.6149 .1634 148.21);--color-success-5: oklch(.5075 .136 146.46);--color-warning-1: oklch(.9549 .0496 88.08);--color-warning-2: oklch(.912 .0811 83.56);--color-warning-3: oklch(.8282 .1628 78.73);--color-warning-4: oklch(.7325 .1512 75.97);--color-warning-5: oklch(.5329 .1098 82);--color-semantic-gray-0: oklch(1 0 0);--color-semantic-gray-1: oklch(.9846 .0017 247.84);--color-semantic-gray-2: oklch(.9515 .0046 258.32);--color-semantic-gray-3: oklch(.9336 .0058 264.53);--color-semantic-gray-4: oklch(.8618 .0141 258.35);--color-semantic-gray-5: oklch(.7073 .0268 263.28);--color-semantic-gray-6: oklch(.6528 .0316 266.24);--color-semantic-gray-7: oklch(.5371 .0337 264.24);--color-semantic-gray-8: oklch(.3544 .0326 260.94);--color-semantic-gray-9: oklch(.2776 .0341 255.81);--color-semantic-danger-1: oklch(.9437 .0174 17.47);--color-semantic-danger-2: oklch(.8643 .0573 18.32);--color-semantic-danger-3: oklch(.712 .1517 21.64);--color-semantic-danger-4: oklch(.5948 .2165 26.91);--color-semantic-danger-5: oklch(.531 .2147 28.91);--color-semantic-primary-1: oklch(.9474 .0256 221.57);--color-semantic-primary-2: oklch(.8652 .066 236.86);--color-semantic-primary-3: oklch(.7219 .1335 240.15);--color-semantic-primary-4: oklch(.5679 .1784 254.76);--color-semantic-primary-5: oklch(.4682 .1548 255.23);--color-semantic-success-1: oklch(.9276 .0541 150.91);--color-semantic-success-2: oklch(.8592 .1078 149.75);--color-semantic-success-3: oklch(.6953 .1711 149.14);--color-semantic-success-4: oklch(.6149 .1634 148.21);--color-semantic-success-5: oklch(.5075 .136 146.46);--color-semantic-warning-1: oklch(.9549 .0496 88.08);--color-semantic-warning-2: oklch(.912 .0811 83.56);--color-semantic-warning-3: oklch(.8282 .1628 78.73);--color-semantic-warning-4: oklch(.7325 .1512 75.97);--color-semantic-warning-5: oklch(.5329 .1098 82);--color-white: var(--color-gray-0);--font-sans: system-ui, -apple-system, Roboto, Oxygen, Cantarell, Ubuntu, "Segoe UI", sans-serif;--font-mono: monospace;--text-9: 9px;--text-10: 10px;--text-11: 11px;--text-12: 12px;--text-13: 13px;--text-15: 15px;--text-17: 17px;--text-20: 20px;--text-23: 23px;--text-26: 26px;--text-30: 30px;--text-35: 35px;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--leading-16: 16px;--leading-20: 20px;--leading-24: 24px;--leading-28: 28px;--leading-32: 32px;--leading-40: 40px;--leading-44: 44px;--leading-r1p5: 1.5;--radius-0: 0;--radius-2: 2px;--radius-3: 3px;--radius-4: 4px;--radius-6: 6px;--radius-8: 8px;--radius-12: 12px;--radius-16: 16px;--radius-20: 20px;--radius-24: 24px;--radius-full: 9999px;--shadow-1: 0px 1px 2px rgba(29, 41, 57, .07);--shadow-2: 0px 1px 2px rgba(29, 41, 57, .04), 0px 2px 8px rgba(29, 41, 57, .08);--shadow-3: 0px 2px 8px rgba(29, 41, 57, .08), 0px 8px 24px rgba(29, 41, 57, .12);--shadow-4: 0px 4px 8px rgba(29, 41, 57, .08), 0px 16px 48px rgba(29, 41, 57, .16);--spacing-px: 1px;--spacing-0: 0;--spacing-2: 2px;--spacing-4: 4px;--spacing-6: 6px;--spacing-8: 8px;--spacing-12: 12px;--spacing-16: 16px;--spacing-20: 20px;--spacing-24: 24px;--spacing-28: 28px;--spacing-32: 32px;--spacing-40: 40px;--spacing-48: 48px;--spacing-56: 56px;--spacing-64: 64px;--spacing-128: 128px;--spacing-256: 256px;--z-0: 0;--z-1: 1;--z-2: 2;--z-3: 3;--z-4: 4;--z-5: 5;--z-999: 999;--z-9999: 9999}body{font-family:var(--font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:var(--text-13)}';if(typeof document<"u"&&!document.getElementById("acl-tokens")){const o=document.createElement("style");o.id="acl-tokens",o.textContent=i,document.head.appendChild(o)}exports.AnduinAvatar=n.AnduinAvatar;exports.AnduinBadge=n.AnduinBadge;exports.AnduinBadgeCount=n.AnduinBadgeCount;exports.AnduinButton=n.AnduinButton;exports.AnduinCallout=n.AnduinCallout;exports.AnduinCheckbox=n.AnduinCheckbox;exports.AnduinDivider=n.AnduinDivider;exports.AnduinDot=n.AnduinDot;exports.AnduinDrawer=n.AnduinDrawer;exports.AnduinDrawerClose=n.AnduinDrawerClose;exports.AnduinDropdown=n.AnduinDropdown;exports.AnduinField=n.AnduinField;exports.AnduinFieldDescription=n.AnduinFieldDescription;exports.AnduinFieldError=n.AnduinFieldError;exports.AnduinFieldGroup=n.AnduinFieldGroup;exports.AnduinFieldLabel=n.AnduinFieldLabel;exports.AnduinFileIcon=n.AnduinFileIcon;exports.AnduinIcon=n.AnduinIcon;exports.AnduinInput=n.AnduinInput;exports.AnduinLoadingState=n.AnduinLoadingState;exports.AnduinMenu=n.AnduinMenu;exports.AnduinMenuItem=n.AnduinMenuItem;exports.AnduinModal=n.AnduinModal;exports.AnduinModalClose=n.AnduinModalClose;exports.AnduinPopover=n.AnduinPopover;exports.AnduinPopoverClose=n.AnduinPopoverClose;exports.AnduinProgress=n.AnduinProgress;exports.AnduinRadio=n.AnduinRadio;exports.AnduinRadioGroup=n.AnduinRadioGroup;exports.AnduinSkeleton=n.AnduinSkeleton;exports.AnduinSpinner=n.AnduinSpinner;exports.AnduinSuggestion=n.AnduinSuggestion;exports.AnduinSwitcher=n.AnduinSwitcher;exports.AnduinTabContent=n.AnduinTabContent;exports.AnduinTabTrigger=n.AnduinTabTrigger;exports.AnduinTabs=n.AnduinTabs;exports.AnduinTabsList=n.AnduinTabsList;exports.AnduinTag=n.AnduinTag;exports.AnduinTagClose=n.AnduinTagClose;exports.AnduinTextarea=n.AnduinTextarea;exports.AnduinToast=n.AnduinToast;exports.AnduinToaster=n.AnduinToaster;exports.AnduinTooltip=n.AnduinTooltip;exports.AnduinTooltipContent=n.AnduinTooltipContent;exports.AnduinTooltipTrigger=n.AnduinTooltipTrigger;exports.AnduinWell=n.AnduinWell;exports.AnduinWellClose=n.AnduinWellClose;exports.BADGE_STYLES=n.BADGE_STYLES;exports.CHECKBOX_CHANGE=n.CHECKBOX_CHANGE;exports.DRAWER_AFTER_CLOSE_EVENT=n.DRAWER_AFTER_CLOSE_EVENT;exports.DRAWER_CLOSE_EVENT=n.DRAWER_CLOSE_EVENT;exports.DROPDOWN_CHANGE=n.DROPDOWN_CHANGE;exports.FIELD_LABEL_CLICK=n.FIELD_LABEL_CLICK;exports.FIELD_LABEL_CLICK_COORDINATED=n.FIELD_LABEL_CLICK_COORDINATED;exports.FILE_ICONS=n.FILE_ICONS;exports.INPUT_CHANGE=n.INPUT_CHANGE;exports.INPUT_CLEAR=n.INPUT_CLEAR;exports.MENU_ITEM_CLICK=n.MENU_ITEM_CLICK;exports.MODAL_AFTER_CLOSE_EVENT=n.MODAL_AFTER_CLOSE_EVENT;exports.MODAL_CLOSE_EVENT=n.MODAL_CLOSE_EVENT;exports.POPOVER_CLOSE=n.POPOVER_CLOSE;exports.RADIO_CHANGE=n.RADIO_CHANGE;exports.RADIO_GROUP_CHANGE=n.RADIO_GROUP_CHANGE;exports.SUGGESTION_CHANGE=n.SUGGESTION_CHANGE;exports.SUGGESTION_CLEAR=n.SUGGESTION_CLEAR;exports.SUGGESTION_SELECT=n.SUGGESTION_SELECT;exports.SWITCHER_CHANGE=n.SWITCHER_CHANGE;exports.TAB_CHANGE=n.TAB_CHANGE;exports.TAB_TRIGGER_CLICK=n.TAB_TRIGGER_CLICK;exports.TAB_VALUE_CHANGED=n.TAB_VALUE_CHANGED;exports.TAG_CLOSE_CLICK=n.TAG_CLOSE_CLICK;exports.TEXTAREA_CHANGE=n.TEXTAREA_CHANGE;exports.TOOLTIP_CONTENT_POPUP_MOUNTED=n.TOOLTIP_CONTENT_POPUP_MOUNTED;exports.TOOLTIP_CONTENT_POPUP_UNMOUNTED=n.TOOLTIP_CONTENT_POPUP_UNMOUNTED;exports.TOOLTIP_HIDE=n.TOOLTIP_HIDE;exports.TOOLTIP_SHOW=n.TOOLTIP_SHOW;exports.TOOLTIP_TRIGGER_MOUNTED=n.TOOLTIP_TRIGGER_MOUNTED;exports.TOOLTIP_VISIBILITY_CHANGED=n.TOOLTIP_VISIBILITY_CHANGED;exports.WELL_CLOSE_CLICK=n.WELL_CLOSE_CLICK;exports.getBadgeVariantClass=n.getBadgeVariantClass;exports.resolveFileIcon=n.resolveFileIcon;exports.toast=n.toast;
|
|
@@ -257,7 +257,7 @@ export declare class AnduinModal extends LitElement {
|
|
|
257
257
|
heading: string;
|
|
258
258
|
hideHeader: boolean;
|
|
259
259
|
hideFooter: boolean;
|
|
260
|
-
maxWidth:
|
|
260
|
+
maxWidth: "480" | "600" | "720" | "960" | "1160" | string;
|
|
261
261
|
fullscreen: boolean;
|
|
262
262
|
private _leaving;
|
|
263
263
|
private static readonly _PRESETS;
|
|
@@ -584,7 +584,7 @@ export declare const DRAWER_AFTER_CLOSE_EVENT = "anduin-after-close";
|
|
|
584
584
|
|
|
585
585
|
export declare const DRAWER_CLOSE_EVENT = "anduin-close";
|
|
586
586
|
|
|
587
|
-
export declare type DrawerWidth =
|
|
587
|
+
export declare type DrawerWidth = "320" | "360" | "400" | "640";
|
|
588
588
|
|
|
589
589
|
export declare const DROPDOWN_CHANGE = "anduin-dropdown:change";
|
|
590
590
|
|
|
@@ -967,26 +967,35 @@ var AclWebComponents=(function(c){"use strict";var Z4,X;const _4=':root{--color-
|
|
|
967
967
|
anduin-icon { color: var(--color-gray-7); }
|
|
968
968
|
.menu-item--danger anduin-icon { color: var(--color-danger-4); }
|
|
969
969
|
`;let a1=H5;C1([C()],a1.prototype,"icon"),C1([C()],a1.prototype,"variant"),C1([C({type:Boolean})],a1.prototype,"disabled"),customElements.get("anduin-menu")||customElements.define("anduin-menu",q),customElements.get("anduin-menu-item")||customElements.define("anduin-menu-item",a1);var _3=Object.defineProperty,s1=(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&&_3(e,t,o),o};const _1="anduin-close",a4="anduin-after-close",A2=300,B2=200,s4=250,W=(X=class extends g{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=X._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(a4,{bubbles:!0,composed:!0}))},Math.max(B2,s4))))}dispatch(e){this.dispatchEvent(new CustomEvent(e,{bubbles:!0,composed:!0}))}onOverlayClick(){this.dispatch(_1)}onClose(){this.dispatch(_1)}connectedCallback(){super.connectedCallback(),this.addEventListener(_1,this.onAnduinClose)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener(_1,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?p: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
|
+
>`:p}
|
|
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 @@ var AclWebComponents=(function(c){"use strict";var Z4,X;const _4=':root{--color-
|
|
|
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 ${A2}ms cubic-bezier(0.2, 0, 0, 1)
|
|
1077
|
+
animation: overlayIn ${A2}ms cubic-bezier(0.2, 0, 0, 1)
|
|
1078
|
+
forwards;
|
|
1037
1079
|
}
|
|
1038
1080
|
.overlay.is-leaving {
|
|
1039
|
-
animation: overlayOut ${s4}ms
|
|
1081
|
+
animation: overlayOut ${s4}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 @@ var AclWebComponents=(function(c){"use strict";var Z4,X;const _4=':root{--color-
|
|
|
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 ${A2}ms cubic-bezier(0.05, 0.7, 0.1, 1)
|
|
1107
|
+
animation: modalIn ${A2}ms cubic-bezier(0.05, 0.7, 0.1, 1)
|
|
1108
|
+
forwards;
|
|
1063
1109
|
}
|
|
1064
1110
|
.modal.is-leaving {
|
|
1065
|
-
animation: modalOut ${B2}ms
|
|
1111
|
+
animation: modalOut ${B2}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 @@ var AclWebComponents=(function(c){"use strict";var Z4,X;const _4=':root{--color-
|
|
|
1091
1138
|
max-height: 100%;
|
|
1092
1139
|
height: 100%;
|
|
1093
1140
|
box-shadow: none;
|
|
1094
|
-
animation: modalFullscreenIn ${A2}ms
|
|
1141
|
+
animation: modalFullscreenIn ${A2}ms
|
|
1142
|
+
cubic-bezier(0.05, 0.7, 0.1, 1) forwards;
|
|
1095
1143
|
}
|
|
1096
1144
|
.modal--fullscreen.is-leaving {
|
|
1097
|
-
animation: modalFullscreenOut ${B2}ms
|
|
1145
|
+
animation: modalFullscreenOut ${B2}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 @@ var AclWebComponents=(function(c){"use strict";var Z4,X;const _4=':root{--color-
|
|
|
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
|
}
|
|
@@ -1993,20 +2046,21 @@ var AclWebComponents=(function(c){"use strict";var Z4,X;const _4=':root{--color-
|
|
|
1993
2046
|
@pointerup=${this._onResizeEnd}
|
|
1994
2047
|
@pointercancel=${this._onResizeEnd}
|
|
1995
2048
|
></div>
|
|
1996
|
-
${this.hideHeader?p:s`
|
|
1997
|
-
|
|
1998
|
-
|
|
1999
|
-
|
|
2000
|
-
|
|
2001
|
-
|
|
2002
|
-
|
|
2003
|
-
|
|
2004
|
-
|
|
2005
|
-
|
|
2006
|
-
|
|
2007
|
-
|
|
2008
|
-
|
|
2009
|
-
|
|
2049
|
+
${this.hideHeader?p:s` <div class="header">
|
|
2050
|
+
<slot name="header">
|
|
2051
|
+
${this.heading?s`<span id="drawer-title" class="title"
|
|
2052
|
+
>${this.heading}</span
|
|
2053
|
+
>`:p}
|
|
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>`}
|
|
2010
2064
|
<div class="body">
|
|
2011
2065
|
<slot></slot>
|
|
2012
2066
|
</div>
|
|
@@ -2026,12 +2080,20 @@ var AclWebComponents=(function(c){"use strict";var Z4,X;const _4=':root{--color-
|
|
|
2026
2080
|
pointer-events: none;
|
|
2027
2081
|
}
|
|
2028
2082
|
@keyframes drawerIn {
|
|
2029
|
-
from {
|
|
2030
|
-
|
|
2083
|
+
from {
|
|
2084
|
+
transform: translateX(100%);
|
|
2085
|
+
}
|
|
2086
|
+
to {
|
|
2087
|
+
transform: translateX(0);
|
|
2088
|
+
}
|
|
2031
2089
|
}
|
|
2032
2090
|
@keyframes drawerOut {
|
|
2033
|
-
from {
|
|
2034
|
-
|
|
2091
|
+
from {
|
|
2092
|
+
transform: translateX(0);
|
|
2093
|
+
}
|
|
2094
|
+
to {
|
|
2095
|
+
transform: translateX(100%);
|
|
2096
|
+
}
|
|
2035
2097
|
}
|
|
2036
2098
|
/* Transparent backdrop — only rendered when dismiss-on-outside-click is set */
|
|
2037
2099
|
.backdrop {
|
|
@@ -2048,14 +2110,18 @@ var AclWebComponents=(function(c){"use strict";var Z4,X;const _4=':root{--color-
|
|
|
2048
2110
|
display: flex;
|
|
2049
2111
|
flex-direction: column;
|
|
2050
2112
|
background: #fff;
|
|
2051
|
-
box-shadow:
|
|
2052
|
-
|
|
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 ${U3}ms cubic-bezier(0.05, 0.7, 0.1, 1)
|
|
2117
|
+
forwards;
|
|
2053
2118
|
min-width: 200px;
|
|
2054
2119
|
max-width: 90vw;
|
|
2055
2120
|
pointer-events: auto;
|
|
2056
2121
|
}
|
|
2057
2122
|
.drawer.is-leaving {
|
|
2058
|
-
animation: drawerOut ${b4}ms
|
|
2123
|
+
animation: drawerOut ${b4}ms
|
|
2124
|
+
cubic-bezier(0.3, 0, 0.8, 0.15) forwards;
|
|
2059
2125
|
}
|
|
2060
2126
|
@media (max-width: 640px) {
|
|
2061
2127
|
.drawer {
|
|
@@ -2067,7 +2133,9 @@ var AclWebComponents=(function(c){"use strict";var Z4,X;const _4=':root{--color-
|
|
|
2067
2133
|
max-width: 100%;
|
|
2068
2134
|
min-width: unset;
|
|
2069
2135
|
}
|
|
2070
|
-
.resize-handle {
|
|
2136
|
+
.resize-handle {
|
|
2137
|
+
display: none;
|
|
2138
|
+
}
|
|
2071
2139
|
}
|
|
2072
2140
|
.resize-handle {
|
|
2073
2141
|
position: absolute;
|
|
@@ -2093,10 +2161,9 @@ var AclWebComponents=(function(c){"use strict";var Z4,X;const _4=':root{--color-
|
|
|
2093
2161
|
.title {
|
|
2094
2162
|
flex: 1;
|
|
2095
2163
|
font-size: 16px;
|
|
2096
|
-
font-weight:
|
|
2164
|
+
font-weight: 600;
|
|
2097
2165
|
line-height: 24px;
|
|
2098
|
-
color: #323c4d;
|
|
2099
|
-
letter-spacing: -0.2px;
|
|
2166
|
+
color: var(--color-gray-8, #323c4d);
|
|
2100
2167
|
font-family: var(--font-sans);
|
|
2101
2168
|
margin: 0;
|
|
2102
2169
|
}
|
|
@@ -2104,7 +2171,8 @@ var AclWebComponents=(function(c){"use strict";var Z4,X;const _4=':root{--color-
|
|
|
2104
2171
|
flex: 1;
|
|
2105
2172
|
overflow-y: auto;
|
|
2106
2173
|
min-height: 0;
|
|
2107
|
-
|
|
2174
|
+
|
|
2175
|
+
color: var(--color-gray-8, #323c4d);
|
|
2108
2176
|
}
|
|
2109
2177
|
.footer {
|
|
2110
2178
|
flex-shrink: 0;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { A as c, a as r, b as i, c as l, d as e, e as t, f as p, g as d, h as g, i as u, j as x, k as A, l as h, m as k, n as E, o as m, p as T, q as C, r as _, s as O, t as y, u as I, v as L, w as N, x as S, y as G, z as D, B as w, C as R, D as P, E as b, F as f, G as U, H, I as B, J as F, K as M, L as z, M as v, N as V, O as W, P as K, Q as X, R as Y, S as j, T as q, U as J, V as Q, W as Z, X as $, Y as aa, Z as oa, _ as na, $ as sa, a0 as ca, a1 as ra, a2 as ia, a3 as la, a4 as ea, a5 as ta, a6 as pa, a7 as da, a8 as ga, a9 as ua, aa as xa, ab as Aa, ac as ha, ad as ka, ae as Ea, af as ma, ag as Ta, ah as Ca, ai as _a, aj as Oa, ak as ya, al as Ia, am as La, an as Na, ao as Sa, ap as Ga, aq as Da, ar as wa } from "./anduin-suggestion-
|
|
1
|
+
import { A as c, a as r, b as i, c as l, d as e, e as t, f as p, g as d, h as g, i as u, j as x, k as A, l as h, m as k, n as E, o as m, p as T, q as C, r as _, s as O, t as y, u as I, v as L, w as N, x as S, y as G, z as D, B as w, C as R, D as P, E as b, F as f, G as U, H, I as B, J as F, K as M, L as z, M as v, N as V, O as W, P as K, Q as X, R as Y, S as j, T as q, U as J, V as Q, W as Z, X as $, Y as aa, Z as oa, _ as na, $ as sa, a0 as ca, a1 as ra, a2 as ia, a3 as la, a4 as ea, a5 as ta, a6 as pa, a7 as da, a8 as ga, a9 as ua, aa as xa, ab as Aa, ac as ha, ad as ka, ae as Ea, af as ma, ag as Ta, ah as Ca, ai as _a, aj as Oa, ak as ya, al as Ia, am as La, an as Na, ao as Sa, ap as Ga, aq as Da, ar as wa } from "./anduin-suggestion-CQz20-Zh.js";
|
|
2
2
|
const o = ':root{--color-gray-0: oklch(1 0 0);--color-gray-1: oklch(.9846 .0017 247.84);--color-gray-2: oklch(.9515 .0046 258.32);--color-gray-3: oklch(.9336 .0058 264.53);--color-gray-4: oklch(.8618 .0141 258.35);--color-gray-5: oklch(.7073 .0268 263.28);--color-gray-6: oklch(.6528 .0316 266.24);--color-gray-7: oklch(.5371 .0337 264.24);--color-gray-8: oklch(.3544 .0326 260.94);--color-gray-9: oklch(.2776 .0341 255.81);--color-danger-1: oklch(.9437 .0174 17.47);--color-danger-2: oklch(.8643 .0573 18.32);--color-danger-3: oklch(.712 .1517 21.64);--color-danger-4: oklch(.5948 .2165 26.91);--color-danger-5: oklch(.531 .2147 28.91);--color-primary-1: oklch(.9474 .0256 221.57);--color-primary-2: oklch(.8652 .066 236.86);--color-primary-3: oklch(.7219 .1335 240.15);--color-primary-4: oklch(.5679 .1784 254.76);--color-primary-5: oklch(.4682 .1548 255.23);--color-success-1: oklch(.9276 .0541 150.91);--color-success-2: oklch(.8592 .1078 149.75);--color-success-3: oklch(.6953 .1711 149.14);--color-success-4: oklch(.6149 .1634 148.21);--color-success-5: oklch(.5075 .136 146.46);--color-warning-1: oklch(.9549 .0496 88.08);--color-warning-2: oklch(.912 .0811 83.56);--color-warning-3: oklch(.8282 .1628 78.73);--color-warning-4: oklch(.7325 .1512 75.97);--color-warning-5: oklch(.5329 .1098 82);--color-semantic-gray-0: oklch(1 0 0);--color-semantic-gray-1: oklch(.9846 .0017 247.84);--color-semantic-gray-2: oklch(.9515 .0046 258.32);--color-semantic-gray-3: oklch(.9336 .0058 264.53);--color-semantic-gray-4: oklch(.8618 .0141 258.35);--color-semantic-gray-5: oklch(.7073 .0268 263.28);--color-semantic-gray-6: oklch(.6528 .0316 266.24);--color-semantic-gray-7: oklch(.5371 .0337 264.24);--color-semantic-gray-8: oklch(.3544 .0326 260.94);--color-semantic-gray-9: oklch(.2776 .0341 255.81);--color-semantic-danger-1: oklch(.9437 .0174 17.47);--color-semantic-danger-2: oklch(.8643 .0573 18.32);--color-semantic-danger-3: oklch(.712 .1517 21.64);--color-semantic-danger-4: oklch(.5948 .2165 26.91);--color-semantic-danger-5: oklch(.531 .2147 28.91);--color-semantic-primary-1: oklch(.9474 .0256 221.57);--color-semantic-primary-2: oklch(.8652 .066 236.86);--color-semantic-primary-3: oklch(.7219 .1335 240.15);--color-semantic-primary-4: oklch(.5679 .1784 254.76);--color-semantic-primary-5: oklch(.4682 .1548 255.23);--color-semantic-success-1: oklch(.9276 .0541 150.91);--color-semantic-success-2: oklch(.8592 .1078 149.75);--color-semantic-success-3: oklch(.6953 .1711 149.14);--color-semantic-success-4: oklch(.6149 .1634 148.21);--color-semantic-success-5: oklch(.5075 .136 146.46);--color-semantic-warning-1: oklch(.9549 .0496 88.08);--color-semantic-warning-2: oklch(.912 .0811 83.56);--color-semantic-warning-3: oklch(.8282 .1628 78.73);--color-semantic-warning-4: oklch(.7325 .1512 75.97);--color-semantic-warning-5: oklch(.5329 .1098 82);--color-white: var(--color-gray-0);--font-sans: system-ui, -apple-system, Roboto, Oxygen, Cantarell, Ubuntu, "Segoe UI", sans-serif;--font-mono: monospace;--text-9: 9px;--text-10: 10px;--text-11: 11px;--text-12: 12px;--text-13: 13px;--text-15: 15px;--text-17: 17px;--text-20: 20px;--text-23: 23px;--text-26: 26px;--text-30: 30px;--text-35: 35px;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--leading-16: 16px;--leading-20: 20px;--leading-24: 24px;--leading-28: 28px;--leading-32: 32px;--leading-40: 40px;--leading-44: 44px;--leading-r1p5: 1.5;--radius-0: 0;--radius-2: 2px;--radius-3: 3px;--radius-4: 4px;--radius-6: 6px;--radius-8: 8px;--radius-12: 12px;--radius-16: 16px;--radius-20: 20px;--radius-24: 24px;--radius-full: 9999px;--shadow-1: 0px 1px 2px rgba(29, 41, 57, .07);--shadow-2: 0px 1px 2px rgba(29, 41, 57, .04), 0px 2px 8px rgba(29, 41, 57, .08);--shadow-3: 0px 2px 8px rgba(29, 41, 57, .08), 0px 8px 24px rgba(29, 41, 57, .12);--shadow-4: 0px 4px 8px rgba(29, 41, 57, .08), 0px 16px 48px rgba(29, 41, 57, .16);--spacing-px: 1px;--spacing-0: 0;--spacing-2: 2px;--spacing-4: 4px;--spacing-6: 6px;--spacing-8: 8px;--spacing-12: 12px;--spacing-16: 16px;--spacing-20: 20px;--spacing-24: 24px;--spacing-28: 28px;--spacing-32: 32px;--spacing-40: 40px;--spacing-48: 48px;--spacing-56: 56px;--spacing-64: 64px;--spacing-128: 128px;--spacing-256: 256px;--z-0: 0;--z-1: 1;--z-2: 2;--z-3: 3;--z-4: 4;--z-5: 5;--z-999: 999;--z-9999: 9999}body{font-family:var(--font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:var(--text-13)}';
|
|
3
3
|
if (typeof document < "u" && !document.getElementById("acl-tokens")) {
|
|
4
4
|
const a = document.createElement("style");
|
|
@@ -3281,12 +3281,22 @@ const G = (j = class extends h {
|
|
|
3281
3281
|
const t = this.maxWidth, i = j._PRESETS.has(t) ? `${t}px` : t;
|
|
3282
3282
|
this.style.setProperty("--_modal-width", i);
|
|
3283
3283
|
}
|
|
3284
|
-
e.has("open") && (this.open ? (this._leaving = !1, this.classList.add("is-shown")) : this.classList.contains("is-shown") && (this._leaving = !0, setTimeout(
|
|
3285
|
-
|
|
3286
|
-
|
|
3284
|
+
e.has("open") && (this.open ? (this._leaving = !1, this.classList.add("is-shown")) : this.classList.contains("is-shown") && (this._leaving = !0, setTimeout(
|
|
3285
|
+
() => {
|
|
3286
|
+
this._leaving = !1, this.classList.remove("is-shown"), this.dispatchEvent(
|
|
3287
|
+
new CustomEvent(h3, {
|
|
3288
|
+
bubbles: !0,
|
|
3289
|
+
composed: !0
|
|
3290
|
+
})
|
|
3291
|
+
);
|
|
3292
|
+
},
|
|
3293
|
+
Math.max(t2, A5)
|
|
3294
|
+
)));
|
|
3287
3295
|
}
|
|
3288
3296
|
dispatch(e) {
|
|
3289
|
-
this.dispatchEvent(
|
|
3297
|
+
this.dispatchEvent(
|
|
3298
|
+
new CustomEvent(e, { bubbles: !0, composed: !0 })
|
|
3299
|
+
);
|
|
3290
3300
|
}
|
|
3291
3301
|
onOverlayClick() {
|
|
3292
3302
|
this.dispatch(f1);
|
|
@@ -3303,26 +3313,35 @@ const G = (j = class extends h {
|
|
|
3303
3313
|
render() {
|
|
3304
3314
|
const e = this._leaving, t = this.fullscreen;
|
|
3305
3315
|
return s`
|
|
3306
|
-
<div
|
|
3316
|
+
<div
|
|
3317
|
+
class=${`overlay${e ? " is-leaving" : ""}`}
|
|
3318
|
+
@click=${this.onOverlayClick}
|
|
3319
|
+
></div>
|
|
3307
3320
|
<div class=${`modal-wrapper${t ? " modal-wrapper--fullscreen" : ""}`}>
|
|
3308
|
-
<div
|
|
3309
|
-
${
|
|
3310
|
-
|
|
3311
|
-
|
|
3312
|
-
|
|
3313
|
-
|
|
3314
|
-
|
|
3315
|
-
|
|
3316
|
-
|
|
3317
|
-
|
|
3318
|
-
|
|
3319
|
-
|
|
3320
|
-
|
|
3321
|
-
|
|
3322
|
-
|
|
3323
|
-
|
|
3324
|
-
|
|
3325
|
-
|
|
3321
|
+
<div
|
|
3322
|
+
class=${`modal${t ? " modal--fullscreen" : ""}${e ? " is-leaving" : ""}`}
|
|
3323
|
+
role="dialog"
|
|
3324
|
+
aria-modal="true"
|
|
3325
|
+
aria-labelledby="modal-title"
|
|
3326
|
+
>
|
|
3327
|
+
${this.hideHeader ? c : s` <div class="header">
|
|
3328
|
+
<div class="header-slot">
|
|
3329
|
+
<slot name="header">
|
|
3330
|
+
${this.heading ? s`<span id="modal-title" class="title"
|
|
3331
|
+
>${this.heading}</span
|
|
3332
|
+
>` : c}
|
|
3333
|
+
</slot>
|
|
3334
|
+
</div>
|
|
3335
|
+
<span class="header-sep"></span>
|
|
3336
|
+
<anduin-button
|
|
3337
|
+
appearance="plain"
|
|
3338
|
+
variant="gray9"
|
|
3339
|
+
size="medium"
|
|
3340
|
+
label="Close"
|
|
3341
|
+
start-icon="cross"
|
|
3342
|
+
@click=${this.onClose}
|
|
3343
|
+
></anduin-button>
|
|
3344
|
+
</div>`}
|
|
3326
3345
|
<div class="body">
|
|
3327
3346
|
<slot></slot>
|
|
3328
3347
|
</div>
|
|
@@ -3343,38 +3362,72 @@ const G = (j = class extends h {
|
|
|
3343
3362
|
z-index: var(--z-modal, 1000);
|
|
3344
3363
|
}
|
|
3345
3364
|
@keyframes overlayIn {
|
|
3346
|
-
from {
|
|
3347
|
-
|
|
3365
|
+
from {
|
|
3366
|
+
opacity: 0;
|
|
3367
|
+
}
|
|
3368
|
+
to {
|
|
3369
|
+
opacity: 1;
|
|
3370
|
+
}
|
|
3348
3371
|
}
|
|
3349
3372
|
@keyframes overlayOut {
|
|
3350
|
-
from {
|
|
3351
|
-
|
|
3373
|
+
from {
|
|
3374
|
+
opacity: 1;
|
|
3375
|
+
}
|
|
3376
|
+
to {
|
|
3377
|
+
opacity: 0;
|
|
3378
|
+
}
|
|
3352
3379
|
}
|
|
3353
3380
|
@keyframes modalIn {
|
|
3354
|
-
from {
|
|
3355
|
-
|
|
3381
|
+
from {
|
|
3382
|
+
opacity: 0;
|
|
3383
|
+
transform: translateY(12px);
|
|
3384
|
+
}
|
|
3385
|
+
to {
|
|
3386
|
+
opacity: 1;
|
|
3387
|
+
transform: translateY(0);
|
|
3388
|
+
}
|
|
3356
3389
|
}
|
|
3357
3390
|
@keyframes modalOut {
|
|
3358
|
-
from {
|
|
3359
|
-
|
|
3391
|
+
from {
|
|
3392
|
+
opacity: 1;
|
|
3393
|
+
transform: translateY(0);
|
|
3394
|
+
}
|
|
3395
|
+
to {
|
|
3396
|
+
opacity: 0;
|
|
3397
|
+
transform: translateY(12px);
|
|
3398
|
+
}
|
|
3360
3399
|
}
|
|
3361
3400
|
@keyframes modalFullscreenIn {
|
|
3362
|
-
from {
|
|
3363
|
-
|
|
3401
|
+
from {
|
|
3402
|
+
opacity: 0;
|
|
3403
|
+
transform: translateY(24px);
|
|
3404
|
+
}
|
|
3405
|
+
to {
|
|
3406
|
+
opacity: 1;
|
|
3407
|
+
transform: translateY(0);
|
|
3408
|
+
}
|
|
3364
3409
|
}
|
|
3365
3410
|
@keyframes modalFullscreenOut {
|
|
3366
|
-
from {
|
|
3367
|
-
|
|
3411
|
+
from {
|
|
3412
|
+
opacity: 1;
|
|
3413
|
+
transform: translateY(0);
|
|
3414
|
+
}
|
|
3415
|
+
to {
|
|
3416
|
+
opacity: 0;
|
|
3417
|
+
transform: translateY(24px);
|
|
3418
|
+
}
|
|
3368
3419
|
}
|
|
3369
3420
|
.overlay {
|
|
3370
3421
|
position: absolute;
|
|
3371
3422
|
inset: 0;
|
|
3372
3423
|
background: rgba(50, 60, 77, 0.6);
|
|
3373
3424
|
cursor: default;
|
|
3374
|
-
animation: overlayIn ${e2}ms cubic-bezier(0.2, 0, 0, 1)
|
|
3425
|
+
animation: overlayIn ${e2}ms cubic-bezier(0.2, 0, 0, 1)
|
|
3426
|
+
forwards;
|
|
3375
3427
|
}
|
|
3376
3428
|
.overlay.is-leaving {
|
|
3377
|
-
animation: overlayOut ${A5}ms
|
|
3429
|
+
animation: overlayOut ${A5}ms
|
|
3430
|
+
cubic-bezier(0.3, 0, 0.8, 0.15) forwards;
|
|
3378
3431
|
}
|
|
3379
3432
|
.modal-wrapper {
|
|
3380
3433
|
position: absolute;
|
|
@@ -3395,12 +3448,16 @@ const G = (j = class extends h {
|
|
|
3395
3448
|
display: flex;
|
|
3396
3449
|
flex-direction: column;
|
|
3397
3450
|
max-height: calc(100vh - 64px);
|
|
3398
|
-
box-shadow:
|
|
3451
|
+
box-shadow:
|
|
3452
|
+
0 8px 24px 0 rgba(29, 41, 57, 0.12),
|
|
3453
|
+
0 2px 8px 0 rgba(29, 41, 57, 0.08);
|
|
3399
3454
|
flex-shrink: 0;
|
|
3400
|
-
animation: modalIn ${e2}ms cubic-bezier(0.05, 0.7, 0.1, 1)
|
|
3455
|
+
animation: modalIn ${e2}ms cubic-bezier(0.05, 0.7, 0.1, 1)
|
|
3456
|
+
forwards;
|
|
3401
3457
|
}
|
|
3402
3458
|
.modal.is-leaving {
|
|
3403
|
-
animation: modalOut ${t2}ms
|
|
3459
|
+
animation: modalOut ${t2}ms
|
|
3460
|
+
cubic-bezier(0.3, 0, 0.8, 0.15) forwards;
|
|
3404
3461
|
}
|
|
3405
3462
|
.modal-wrapper--fullscreen {
|
|
3406
3463
|
padding: 0;
|
|
@@ -3429,10 +3486,12 @@ const G = (j = class extends h {
|
|
|
3429
3486
|
max-height: 100%;
|
|
3430
3487
|
height: 100%;
|
|
3431
3488
|
box-shadow: none;
|
|
3432
|
-
animation: modalFullscreenIn ${e2}ms
|
|
3489
|
+
animation: modalFullscreenIn ${e2}ms
|
|
3490
|
+
cubic-bezier(0.05, 0.7, 0.1, 1) forwards;
|
|
3433
3491
|
}
|
|
3434
3492
|
.modal--fullscreen.is-leaving {
|
|
3435
|
-
animation: modalFullscreenOut ${t2}ms
|
|
3493
|
+
animation: modalFullscreenOut ${t2}ms
|
|
3494
|
+
cubic-bezier(0.3, 0, 0.8, 0.15) forwards;
|
|
3436
3495
|
}
|
|
3437
3496
|
.header {
|
|
3438
3497
|
flex-shrink: 0;
|
|
@@ -3440,15 +3499,19 @@ const G = (j = class extends h {
|
|
|
3440
3499
|
align-items: flex-start;
|
|
3441
3500
|
padding: 20px 28px;
|
|
3442
3501
|
}
|
|
3443
|
-
.header-slot {
|
|
3444
|
-
|
|
3502
|
+
.header-slot {
|
|
3503
|
+
flex: 1;
|
|
3504
|
+
min-width: 0;
|
|
3505
|
+
}
|
|
3506
|
+
.header-sep {
|
|
3507
|
+
display: none;
|
|
3508
|
+
}
|
|
3445
3509
|
.title {
|
|
3446
3510
|
flex: 1;
|
|
3447
3511
|
font-size: 20px;
|
|
3448
|
-
font-weight:
|
|
3512
|
+
font-weight: 600;
|
|
3449
3513
|
line-height: 32px;
|
|
3450
|
-
color: #323c4d;
|
|
3451
|
-
letter-spacing: -0.46px;
|
|
3514
|
+
color: var(--color-gray-8, #323c4d);
|
|
3452
3515
|
font-family: var(--font-sans);
|
|
3453
3516
|
margin: 0;
|
|
3454
3517
|
}
|
|
@@ -3473,7 +3536,13 @@ const G = (j = class extends h {
|
|
|
3473
3536
|
padding: 16px 24px;
|
|
3474
3537
|
border-top: 1px solid var(--color-gray-3, #e4e7ec);
|
|
3475
3538
|
}
|
|
3476
|
-
`, j._PRESETS = /* @__PURE__ */ new Set([
|
|
3539
|
+
`, j._PRESETS = /* @__PURE__ */ new Set([
|
|
3540
|
+
"480",
|
|
3541
|
+
"600",
|
|
3542
|
+
"720",
|
|
3543
|
+
"960",
|
|
3544
|
+
"1160"
|
|
3545
|
+
]), j);
|
|
3477
3546
|
r1([
|
|
3478
3547
|
C({ type: Boolean, reflect: !0 })
|
|
3479
3548
|
], G.prototype, "open");
|
|
@@ -3500,7 +3569,9 @@ customElements.get("anduin-modal") || customElements.define("anduin-modal", v3);
|
|
|
3500
3569
|
class g3 extends HTMLElement {
|
|
3501
3570
|
constructor() {
|
|
3502
3571
|
super(...arguments), this._onClick = () => {
|
|
3503
|
-
this.dispatchEvent(
|
|
3572
|
+
this.dispatchEvent(
|
|
3573
|
+
new CustomEvent(f1, { bubbles: !0, composed: !0 })
|
|
3574
|
+
);
|
|
3504
3575
|
};
|
|
3505
3576
|
}
|
|
3506
3577
|
connectedCallback() {
|
|
@@ -4966,7 +5037,10 @@ const V2 = "anduin-close", F3 = "anduin-after-close", P3 = 300, F5 = 250, O3 = /
|
|
|
4966
5037
|
}, this._onResizeMove = (e) => {
|
|
4967
5038
|
var r;
|
|
4968
5039
|
if (!this._resizing) return;
|
|
4969
|
-
const t = this._startX - e.clientX, i = Math.max(
|
|
5040
|
+
const t = this._startX - e.clientX, i = Math.max(
|
|
5041
|
+
200,
|
|
5042
|
+
Math.min(window.innerWidth * 0.9, this._startWidth + t)
|
|
5043
|
+
);
|
|
4970
5044
|
this._width = Math.round(i);
|
|
4971
5045
|
const o = (r = this.shadowRoot) == null ? void 0 : r.querySelector(".drawer");
|
|
4972
5046
|
o && (o.style.width = `${this._width}px`);
|
|
@@ -4979,11 +5053,18 @@ const V2 = "anduin-close", F3 = "anduin-after-close", P3 = 300, F5 = 250, O3 = /
|
|
|
4979
5053
|
}
|
|
4980
5054
|
updated(e) {
|
|
4981
5055
|
e.has("open") && (this.open ? (this._leaving = !1, this.classList.add("is-shown")) : this.classList.contains("is-shown") && (this._leaving = !0, setTimeout(() => {
|
|
4982
|
-
this._leaving = !1, this.classList.remove("is-shown"), this.dispatchEvent(
|
|
5056
|
+
this._leaving = !1, this.classList.remove("is-shown"), this.dispatchEvent(
|
|
5057
|
+
new CustomEvent(F3, {
|
|
5058
|
+
bubbles: !0,
|
|
5059
|
+
composed: !0
|
|
5060
|
+
})
|
|
5061
|
+
);
|
|
4983
5062
|
}, F5)));
|
|
4984
5063
|
}
|
|
4985
5064
|
_dispatch(e) {
|
|
4986
|
-
this.dispatchEvent(
|
|
5065
|
+
this.dispatchEvent(
|
|
5066
|
+
new CustomEvent(e, { bubbles: !0, composed: !0 })
|
|
5067
|
+
);
|
|
4987
5068
|
}
|
|
4988
5069
|
_onClose() {
|
|
4989
5070
|
this._dispatch(V2);
|
|
@@ -5009,20 +5090,21 @@ const V2 = "anduin-close", F3 = "anduin-after-close", P3 = 300, F5 = 250, O3 = /
|
|
|
5009
5090
|
@pointerup=${this._onResizeEnd}
|
|
5010
5091
|
@pointercancel=${this._onResizeEnd}
|
|
5011
5092
|
></div>
|
|
5012
|
-
${this.hideHeader ? c : s`
|
|
5013
|
-
|
|
5014
|
-
|
|
5015
|
-
|
|
5016
|
-
|
|
5017
|
-
|
|
5018
|
-
|
|
5019
|
-
|
|
5020
|
-
|
|
5021
|
-
|
|
5022
|
-
|
|
5023
|
-
|
|
5024
|
-
|
|
5025
|
-
|
|
5093
|
+
${this.hideHeader ? c : s` <div class="header">
|
|
5094
|
+
<slot name="header">
|
|
5095
|
+
${this.heading ? s`<span id="drawer-title" class="title"
|
|
5096
|
+
>${this.heading}</span
|
|
5097
|
+
>` : c}
|
|
5098
|
+
</slot>
|
|
5099
|
+
<anduin-button
|
|
5100
|
+
appearance="plain"
|
|
5101
|
+
variant="gray9"
|
|
5102
|
+
size="medium"
|
|
5103
|
+
label="Close"
|
|
5104
|
+
start-icon="cross"
|
|
5105
|
+
@click=${this._onClose}
|
|
5106
|
+
></anduin-button>
|
|
5107
|
+
</div>`}
|
|
5026
5108
|
<div class="body">
|
|
5027
5109
|
<slot></slot>
|
|
5028
5110
|
</div>
|
|
@@ -5045,12 +5127,20 @@ v5.styles = g`
|
|
|
5045
5127
|
pointer-events: none;
|
|
5046
5128
|
}
|
|
5047
5129
|
@keyframes drawerIn {
|
|
5048
|
-
from {
|
|
5049
|
-
|
|
5130
|
+
from {
|
|
5131
|
+
transform: translateX(100%);
|
|
5132
|
+
}
|
|
5133
|
+
to {
|
|
5134
|
+
transform: translateX(0);
|
|
5135
|
+
}
|
|
5050
5136
|
}
|
|
5051
5137
|
@keyframes drawerOut {
|
|
5052
|
-
from {
|
|
5053
|
-
|
|
5138
|
+
from {
|
|
5139
|
+
transform: translateX(0);
|
|
5140
|
+
}
|
|
5141
|
+
to {
|
|
5142
|
+
transform: translateX(100%);
|
|
5143
|
+
}
|
|
5054
5144
|
}
|
|
5055
5145
|
/* Transparent backdrop — only rendered when dismiss-on-outside-click is set */
|
|
5056
5146
|
.backdrop {
|
|
@@ -5067,14 +5157,18 @@ v5.styles = g`
|
|
|
5067
5157
|
display: flex;
|
|
5068
5158
|
flex-direction: column;
|
|
5069
5159
|
background: #fff;
|
|
5070
|
-
box-shadow:
|
|
5071
|
-
|
|
5160
|
+
box-shadow:
|
|
5161
|
+
-8px 0 24px 0 rgba(29, 41, 57, 0.12),
|
|
5162
|
+
-2px 0 8px 0 rgba(29, 41, 57, 0.08);
|
|
5163
|
+
animation: drawerIn ${P3}ms cubic-bezier(0.05, 0.7, 0.1, 1)
|
|
5164
|
+
forwards;
|
|
5072
5165
|
min-width: 200px;
|
|
5073
5166
|
max-width: 90vw;
|
|
5074
5167
|
pointer-events: auto;
|
|
5075
5168
|
}
|
|
5076
5169
|
.drawer.is-leaving {
|
|
5077
|
-
animation: drawerOut ${F5}ms
|
|
5170
|
+
animation: drawerOut ${F5}ms
|
|
5171
|
+
cubic-bezier(0.3, 0, 0.8, 0.15) forwards;
|
|
5078
5172
|
}
|
|
5079
5173
|
@media (max-width: 640px) {
|
|
5080
5174
|
.drawer {
|
|
@@ -5086,7 +5180,9 @@ v5.styles = g`
|
|
|
5086
5180
|
max-width: 100%;
|
|
5087
5181
|
min-width: unset;
|
|
5088
5182
|
}
|
|
5089
|
-
.resize-handle {
|
|
5183
|
+
.resize-handle {
|
|
5184
|
+
display: none;
|
|
5185
|
+
}
|
|
5090
5186
|
}
|
|
5091
5187
|
.resize-handle {
|
|
5092
5188
|
position: absolute;
|
|
@@ -5112,10 +5208,9 @@ v5.styles = g`
|
|
|
5112
5208
|
.title {
|
|
5113
5209
|
flex: 1;
|
|
5114
5210
|
font-size: 16px;
|
|
5115
|
-
font-weight:
|
|
5211
|
+
font-weight: 600;
|
|
5116
5212
|
line-height: 24px;
|
|
5117
|
-
color: #323c4d;
|
|
5118
|
-
letter-spacing: -0.2px;
|
|
5213
|
+
color: var(--color-gray-8, #323c4d);
|
|
5119
5214
|
font-family: var(--font-sans);
|
|
5120
5215
|
margin: 0;
|
|
5121
5216
|
}
|
|
@@ -5123,7 +5218,8 @@ v5.styles = g`
|
|
|
5123
5218
|
flex: 1;
|
|
5124
5219
|
overflow-y: auto;
|
|
5125
5220
|
min-height: 0;
|
|
5126
|
-
|
|
5221
|
+
|
|
5222
|
+
color: var(--color-gray-8, #323c4d);
|
|
5127
5223
|
}
|
|
5128
5224
|
.footer {
|
|
5129
5225
|
flex-shrink: 0;
|
|
@@ -5164,7 +5260,9 @@ customElements.get("anduin-drawer") || customElements.define("anduin-drawer", E)
|
|
|
5164
5260
|
class D3 extends HTMLElement {
|
|
5165
5261
|
constructor() {
|
|
5166
5262
|
super(...arguments), this._onClick = () => {
|
|
5167
|
-
this.dispatchEvent(
|
|
5263
|
+
this.dispatchEvent(
|
|
5264
|
+
new CustomEvent(V2, { bubbles: !0, composed: !0 })
|
|
5265
|
+
);
|
|
5168
5266
|
};
|
|
5169
5267
|
}
|
|
5170
5268
|
connectedCallback() {
|
|
@@ -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
|
}
|
|
@@ -1993,20 +2046,21 @@
|
|
|
1993
2046
|
@pointerup=${this._onResizeEnd}
|
|
1994
2047
|
@pointercancel=${this._onResizeEnd}
|
|
1995
2048
|
></div>
|
|
1996
|
-
${this.hideHeader?c:s`
|
|
1997
|
-
|
|
1998
|
-
|
|
1999
|
-
|
|
2000
|
-
|
|
2001
|
-
|
|
2002
|
-
|
|
2003
|
-
|
|
2004
|
-
|
|
2005
|
-
|
|
2006
|
-
|
|
2007
|
-
|
|
2008
|
-
|
|
2009
|
-
|
|
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>`}
|
|
2010
2064
|
<div class="body">
|
|
2011
2065
|
<slot></slot>
|
|
2012
2066
|
</div>
|
|
@@ -2026,12 +2080,20 @@
|
|
|
2026
2080
|
pointer-events: none;
|
|
2027
2081
|
}
|
|
2028
2082
|
@keyframes drawerIn {
|
|
2029
|
-
from {
|
|
2030
|
-
|
|
2083
|
+
from {
|
|
2084
|
+
transform: translateX(100%);
|
|
2085
|
+
}
|
|
2086
|
+
to {
|
|
2087
|
+
transform: translateX(0);
|
|
2088
|
+
}
|
|
2031
2089
|
}
|
|
2032
2090
|
@keyframes drawerOut {
|
|
2033
|
-
from {
|
|
2034
|
-
|
|
2091
|
+
from {
|
|
2092
|
+
transform: translateX(0);
|
|
2093
|
+
}
|
|
2094
|
+
to {
|
|
2095
|
+
transform: translateX(100%);
|
|
2096
|
+
}
|
|
2035
2097
|
}
|
|
2036
2098
|
/* Transparent backdrop — only rendered when dismiss-on-outside-click is set */
|
|
2037
2099
|
.backdrop {
|
|
@@ -2048,14 +2110,18 @@
|
|
|
2048
2110
|
display: flex;
|
|
2049
2111
|
flex-direction: column;
|
|
2050
2112
|
background: #fff;
|
|
2051
|
-
box-shadow:
|
|
2052
|
-
|
|
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;
|
|
2053
2118
|
min-width: 200px;
|
|
2054
2119
|
max-width: 90vw;
|
|
2055
2120
|
pointer-events: auto;
|
|
2056
2121
|
}
|
|
2057
2122
|
.drawer.is-leaving {
|
|
2058
|
-
animation: drawerOut ${G5}ms
|
|
2123
|
+
animation: drawerOut ${G5}ms
|
|
2124
|
+
cubic-bezier(0.3, 0, 0.8, 0.15) forwards;
|
|
2059
2125
|
}
|
|
2060
2126
|
@media (max-width: 640px) {
|
|
2061
2127
|
.drawer {
|
|
@@ -2067,7 +2133,9 @@
|
|
|
2067
2133
|
max-width: 100%;
|
|
2068
2134
|
min-width: unset;
|
|
2069
2135
|
}
|
|
2070
|
-
.resize-handle {
|
|
2136
|
+
.resize-handle {
|
|
2137
|
+
display: none;
|
|
2138
|
+
}
|
|
2071
2139
|
}
|
|
2072
2140
|
.resize-handle {
|
|
2073
2141
|
position: absolute;
|
|
@@ -2093,10 +2161,9 @@
|
|
|
2093
2161
|
.title {
|
|
2094
2162
|
flex: 1;
|
|
2095
2163
|
font-size: 16px;
|
|
2096
|
-
font-weight:
|
|
2164
|
+
font-weight: 600;
|
|
2097
2165
|
line-height: 24px;
|
|
2098
|
-
color: #323c4d;
|
|
2099
|
-
letter-spacing: -0.2px;
|
|
2166
|
+
color: var(--color-gray-8, #323c4d);
|
|
2100
2167
|
font-family: var(--font-sans);
|
|
2101
2168
|
margin: 0;
|
|
2102
2169
|
}
|
|
@@ -2104,7 +2171,8 @@
|
|
|
2104
2171
|
flex: 1;
|
|
2105
2172
|
overflow-y: auto;
|
|
2106
2173
|
min-height: 0;
|
|
2107
|
-
|
|
2174
|
+
|
|
2175
|
+
color: var(--color-gray-8, #323c4d);
|
|
2108
2176
|
}
|
|
2109
2177
|
.footer {
|
|
2110
2178
|
flex-shrink: 0;
|
package/dist/react.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react"),t=require("@lit/react"),e=require("./anduin-suggestion-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react"),t=require("@lit/react"),e=require("./anduin-suggestion-CYvS3luw.cjs"),a=t.createComponent({react:n,tagName:"anduin-spinner",elementClass:e.AnduinSpinner}),o=t.createComponent({react:n,tagName:"anduin-icon",elementClass:e.AnduinIcon}),s=t.createComponent({react:n,tagName:"anduin-badge",elementClass:e.AnduinBadge}),C=t.createComponent({react:n,tagName:"anduin-badge-count",elementClass:e.AnduinBadgeCount}),r=t.createComponent({react:n,tagName:"anduin-button",elementClass:e.AnduinButton}),l=t.createComponent({react:n,tagName:"anduin-callout",elementClass:e.AnduinCallout}),i=t.createComponent({react:n,tagName:"anduin-divider",elementClass:e.AnduinDivider}),c=t.createComponent({react:n,tagName:"anduin-dot",elementClass:e.AnduinDot}),d=t.createComponent({react:n,tagName:"anduin-progress",elementClass:e.AnduinProgress}),m=t.createComponent({react:n,tagName:"anduin-skeleton",elementClass:e.AnduinSkeleton}),u=t.createComponent({react:n,tagName:"anduin-loading-state",elementClass:e.AnduinLoadingState}),E=t.createComponent({react:n,tagName:"anduin-field",elementClass:e.AnduinField}),A=t.createComponent({react:n,tagName:"anduin-field-label",elementClass:e.AnduinFieldLabel}),g=t.createComponent({react:n,tagName:"anduin-field-description",elementClass:e.AnduinFieldDescription}),N=t.createComponent({react:n,tagName:"anduin-field-error",elementClass:e.AnduinFieldError}),T=t.createComponent({react:n,tagName:"anduin-field-group",elementClass:e.AnduinFieldGroup}),p=t.createComponent({react:n,tagName:"anduin-radio",elementClass:e.AnduinRadio,events:{onChange:e.RADIO_CHANGE}}),_=t.createComponent({react:n,tagName:"anduin-radio-group",elementClass:e.AnduinRadioGroup,events:{onChange:e.RADIO_GROUP_CHANGE}}),S=t.createComponent({react:n,tagName:"anduin-checkbox",elementClass:e.AnduinCheckbox,events:{onChange:e.CHECKBOX_CHANGE}}),G=t.createComponent({react:n,tagName:"anduin-input",elementClass:e.AnduinInput,events:{onChange:e.INPUT_CHANGE,onClear:e.INPUT_CLEAR}}),L=t.createComponent({react:n,tagName:"anduin-textarea",elementClass:e.AnduinTextarea,events:{onChange:e.TEXTAREA_CHANGE}}),O=t.createComponent({react:n,tagName:"anduin-popover",elementClass:e.AnduinPopover}),R=t.createComponent({react:n,tagName:"anduin-popover-close",elementClass:e.AnduinPopoverClose}),I=t.createComponent({react:n,tagName:"anduin-menu",elementClass:e.AnduinMenu}),D=t.createComponent({react:n,tagName:"anduin-menu-item",elementClass:e.AnduinMenuItem}),H=t.createComponent({react:n,tagName:"anduin-modal",elementClass:e.AnduinModal,events:{onClose:e.MODAL_CLOSE_EVENT,onAfterClose:e.MODAL_AFTER_CLOSE_EVENT}}),v=t.createComponent({react:n,tagName:"anduin-modal-close",elementClass:e.AnduinModalClose}),b=t.createComponent({react:n,tagName:"anduin-tabs",elementClass:e.AnduinTabs,events:{onChange:e.TAB_CHANGE}}),F=t.createComponent({react:n,tagName:"anduin-tabs-list",elementClass:e.AnduinTabsList}),M=t.createComponent({react:n,tagName:"anduin-tab-trigger",elementClass:e.AnduinTabTrigger}),P=t.createComponent({react:n,tagName:"anduin-tab-content",elementClass:e.AnduinTabContent}),W=t.createComponent({react:n,tagName:"anduin-tag",elementClass:e.AnduinTag}),U=t.createComponent({react:n,tagName:"anduin-tag-close",elementClass:e.AnduinTagClose,events:{onClick:e.TAG_CLOSE_CLICK}}),w=t.createComponent({react:n,tagName:"anduin-tooltip",elementClass:e.AnduinTooltip}),h=t.createComponent({react:n,tagName:"anduin-tooltip-trigger",elementClass:e.AnduinTooltipTrigger}),B=t.createComponent({react:n,tagName:"anduin-tooltip-content",elementClass:e.AnduinTooltipContent}),V=t.createComponent({react:n,tagName:"anduin-well",elementClass:e.AnduinWell}),K=t.createComponent({react:n,tagName:"anduin-well-close",elementClass:e.AnduinWellClose,events:{onClick:e.WELL_CLOSE_CLICK}}),k=t.createComponent({react:n,tagName:"anduin-avatar",elementClass:e.AnduinAvatar}),f=t.createComponent({react:n,tagName:"anduin-file-icon",elementClass:e.AnduinFileIcon}),x=t.createComponent({react:n,tagName:"anduin-toast",elementClass:e.AnduinToast}),X=t.createComponent({react:n,tagName:"anduin-toaster",elementClass:e.AnduinToaster}),q=t.createComponent({react:n,tagName:"anduin-dropdown",elementClass:e.AnduinDropdown,events:{onChange:e.DROPDOWN_CHANGE}}),y=t.createComponent({react:n,tagName:"anduin-drawer",elementClass:e.AnduinDrawer,events:{onClose:e.DRAWER_CLOSE_EVENT,onAfterClose:e.DRAWER_AFTER_CLOSE_EVENT}}),j=t.createComponent({react:n,tagName:"anduin-drawer-close",elementClass:e.AnduinDrawerClose}),z=t.createComponent({react:n,tagName:"anduin-switcher",elementClass:e.AnduinSwitcher,events:{onChange:e.SWITCHER_CHANGE}}),J=t.createComponent({react:n,tagName:"anduin-suggestion",elementClass:e.AnduinSuggestion,events:{onChange:e.SUGGESTION_CHANGE,onSelect:e.SUGGESTION_SELECT,onClear:e.SUGGESTION_CLEAR}});exports.CHECKBOX_CHANGE=e.CHECKBOX_CHANGE;exports.DRAWER_AFTER_CLOSE_EVENT=e.DRAWER_AFTER_CLOSE_EVENT;exports.DRAWER_CLOSE_EVENT=e.DRAWER_CLOSE_EVENT;exports.DROPDOWN_CHANGE=e.DROPDOWN_CHANGE;exports.INPUT_CHANGE=e.INPUT_CHANGE;exports.INPUT_CLEAR=e.INPUT_CLEAR;exports.MENU_ITEM_CLICK=e.MENU_ITEM_CLICK;exports.MODAL_AFTER_CLOSE_EVENT=e.MODAL_AFTER_CLOSE_EVENT;exports.MODAL_CLOSE_EVENT=e.MODAL_CLOSE_EVENT;exports.RADIO_CHANGE=e.RADIO_CHANGE;exports.RADIO_GROUP_CHANGE=e.RADIO_GROUP_CHANGE;exports.SUGGESTION_CHANGE=e.SUGGESTION_CHANGE;exports.SUGGESTION_CLEAR=e.SUGGESTION_CLEAR;exports.SUGGESTION_SELECT=e.SUGGESTION_SELECT;exports.SWITCHER_CHANGE=e.SWITCHER_CHANGE;exports.TAB_CHANGE=e.TAB_CHANGE;exports.TAG_CLOSE_CLICK=e.TAG_CLOSE_CLICK;exports.TEXTAREA_CHANGE=e.TEXTAREA_CHANGE;exports.WELL_CLOSE_CLICK=e.WELL_CLOSE_CLICK;exports.Avatar=k;exports.Badge=s;exports.BadgeCount=C;exports.Button=r;exports.Callout=l;exports.Checkbox=S;exports.Divider=i;exports.Dot=c;exports.Drawer=y;exports.DrawerClose=j;exports.Dropdown=q;exports.Field=E;exports.FieldDescription=g;exports.FieldError=N;exports.FieldGroup=T;exports.FieldLabel=A;exports.FileIcon=f;exports.Icon=o;exports.Input=G;exports.LoadingState=u;exports.Menu=I;exports.MenuItem=D;exports.Modal=H;exports.ModalClose=v;exports.Popover=O;exports.PopoverClose=R;exports.Progress=d;exports.Radio=p;exports.RadioGroup=_;exports.Skeleton=m;exports.Spinner=a;exports.Suggestion=J;exports.Switcher=z;exports.TabContent=P;exports.TabTrigger=M;exports.Tabs=b;exports.TabsList=F;exports.Tag=W;exports.TagClose=U;exports.Textarea=L;exports.Toast=x;exports.Toaster=X;exports.Tooltip=w;exports.TooltipContent=B;exports.TooltipTrigger=h;exports.Well=V;exports.WellClose=K;
|
package/dist/react.d.ts
CHANGED
|
@@ -258,7 +258,7 @@ declare class AnduinModal extends LitElement {
|
|
|
258
258
|
heading: string;
|
|
259
259
|
hideHeader: boolean;
|
|
260
260
|
hideFooter: boolean;
|
|
261
|
-
maxWidth:
|
|
261
|
+
maxWidth: "480" | "600" | "720" | "960" | "1160" | string;
|
|
262
262
|
fullscreen: boolean;
|
|
263
263
|
private _leaving;
|
|
264
264
|
private static readonly _PRESETS;
|
|
@@ -608,7 +608,7 @@ export declare const DRAWER_CLOSE_EVENT = "anduin-close";
|
|
|
608
608
|
|
|
609
609
|
export declare const DrawerClose: ReactWebComponent<AnduinDrawerClose, {}>;
|
|
610
610
|
|
|
611
|
-
declare type DrawerWidth =
|
|
611
|
+
declare type DrawerWidth = "320" | "360" | "400" | "640";
|
|
612
612
|
|
|
613
613
|
export declare const Dropdown: ReactWebComponent<AnduinDropdown, {
|
|
614
614
|
onChange: string;
|
package/dist/react.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import e from "react";
|
|
2
2
|
import { createComponent as a } from "@lit/react";
|
|
3
|
-
import { E as n, q as t, a as s, b as o, c as l, d as i, f as d, g as r, z as c, D as u, s as C, k as m, o as g, l as A, m as N, n as T, a7 as E, B as p, a8 as _, C as v, W as S, e as b, a2 as L, a1 as G, r as D, ah as I, N as R, x as O, y as h, t as w, u as F, a4 as f, a5 as M, v as H, w as P, ad as W, J as k, K as x, I as B, H as U, L as K, ag as V, M as X, Q as j, S as q, R as y, T as z, ao as J, U as Q, A as Y, p as Z, O as $, P as ee, Z as ae, j as ne, X as te, Y as se, h as oe, i as le, ac as ie, G as de, aa as re, ab as ce, a9 as ue, F as Ce } from "./anduin-suggestion-
|
|
4
|
-
import { a3 as ua } from "./anduin-suggestion-
|
|
3
|
+
import { E as n, q as t, a as s, b as o, c as l, d as i, f as d, g as r, z as c, D as u, s as C, k as m, o as g, l as A, m as N, n as T, a7 as E, B as p, a8 as _, C as v, W as S, e as b, a2 as L, a1 as G, r as D, ah as I, N as R, x as O, y as h, t as w, u as F, a4 as f, a5 as M, v as H, w as P, ad as W, J as k, K as x, I as B, H as U, L as K, ag as V, M as X, Q as j, S as q, R as y, T as z, ao as J, U as Q, A as Y, p as Z, O as $, P as ee, Z as ae, j as ne, X as te, Y as se, h as oe, i as le, ac as ie, G as de, aa as re, ab as ce, a9 as ue, F as Ce } from "./anduin-suggestion-CQz20-Zh.js";
|
|
4
|
+
import { a3 as ua } from "./anduin-suggestion-CQz20-Zh.js";
|
|
5
5
|
const Ne = a({ react: e, tagName: "anduin-spinner", elementClass: n }), Te = a({ react: e, tagName: "anduin-icon", elementClass: t }), Ee = a({ react: e, tagName: "anduin-badge", elementClass: s }), pe = a({ react: e, tagName: "anduin-badge-count", elementClass: o }), _e = a({ react: e, tagName: "anduin-button", elementClass: l }), ve = a({ react: e, tagName: "anduin-callout", elementClass: i }), Se = a({ react: e, tagName: "anduin-divider", elementClass: d }), be = a({ react: e, tagName: "anduin-dot", elementClass: r }), Le = a({ react: e, tagName: "anduin-progress", elementClass: c }), Ge = a({ react: e, tagName: "anduin-skeleton", elementClass: u }), De = a({ react: e, tagName: "anduin-loading-state", elementClass: C }), Ie = a({ react: e, tagName: "anduin-field", elementClass: m }), Re = a({ react: e, tagName: "anduin-field-label", elementClass: g }), Oe = a({ react: e, tagName: "anduin-field-description", elementClass: A }), he = a({ react: e, tagName: "anduin-field-error", elementClass: N }), we = a({ react: e, tagName: "anduin-field-group", elementClass: T }), Fe = a({
|
|
6
6
|
react: e,
|
|
7
7
|
tagName: "anduin-radio",
|