@ganpatiinfo/gids-core-web 3.0.0 → 4.0.0
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/css/index.css +901 -0
- package/dist/css/index.css.map +1 -1
- package/dist/custom-elements.json +90 -0
- package/dist/gids-field.d.ts +11 -0
- package/dist/gids-field.js +1 -0
- package/dist/gids-icon.js +1 -1
- package/dist/gids-input.d.ts +11 -0
- package/dist/gids-input.js +1 -0
- package/dist/gids-notification.d.ts +11 -0
- package/dist/gids-notification.js +1 -0
- package/dist/gids-overlay-provider.d.ts +11 -0
- package/dist/gids-overlay-provider.js +1 -0
- package/dist/gids-password-field.d.ts +11 -0
- package/dist/gids-password-field.js +1 -0
- package/dist/gids-snackbar.d.ts +11 -0
- package/dist/gids-snackbar.js +1 -0
- package/dist/gids-text-field.d.ts +11 -0
- package/dist/gids-text-field.js +1 -0
- package/dist/gids-toggle-button.js +1 -1
- package/dist/index.js +1 -1
- package/dist/p-B2zUuNXz.js +1 -0
- package/dist/p-CVtNa0cL.js +1 -0
- package/dist/p-CWdkmFbc.js +1 -0
- package/dist/p-D4xtPT_U.js +1 -0
- package/dist/p-DijVkS9b.js +1 -0
- package/dist/p-DybsMR13.js +1 -0
- package/dist/p-RqpjvEHh.js +1 -0
- package/dist/p-ibikYq-w.js +1 -0
- package/dist/p-veoOgDXg.js +1 -0
- package/dist/types/components/html/GidsDismissButton/GidsDismissButton.d.ts +6 -0
- package/dist/types/components/html/GidsHeading/GidsHeading.d.ts +6 -0
- package/dist/types/components/html/GidsLogo/GidsLogo.d.ts +9 -0
- package/dist/types/components/html/GidsRequirementsMeter/GidsRequirementsMeter.d.ts +4 -0
- package/dist/types/components/html/GidsSearchBar/GidsSearchBar.d.ts +10 -0
- package/dist/types/components/html/GidsSegmentedControl/GidsSegmentedControl.d.ts +6 -0
- package/dist/types/components/html/GidsSegmentedTabItem/GidsSegmentedTabItem.d.ts +6 -0
- package/dist/types/components/html/GidsStatusTag/GidsStatusTag.d.ts +5 -0
- package/dist/types/components/html/GidsStepper/GidsStepper.d.ts +7 -0
- package/dist/types/components/html/GidsStrengthMeter/GidsStrengthMeter.d.ts +5 -0
- package/dist/types/components/html/GidsTopNavigation/GidsTopNavigation.d.ts +8 -0
- package/dist/types/components/html/_GidsNotificationContainer/GidsNotificationContainer.d.ts +7 -0
- package/dist/types/components/html/_GidsRequirementsMeterLabel/GidsRequirementsMeterLabel.d.ts +4 -0
- package/dist/types/components/html/_GidsSnackbarContainer/GidsSnackbarContainer.d.ts +6 -0
- package/dist/types/components/webComponents/GidsField/GidsField.d.ts +54 -0
- package/dist/types/components/webComponents/GidsInput/GidsInput.d.ts +27 -0
- package/dist/types/components/webComponents/GidsNotification/GidsNotification.d.ts +17 -0
- package/dist/types/components/webComponents/GidsOverlayProvider/GidsOverlayProvider.d.ts +23 -0
- package/dist/types/components/webComponents/GidsOverlayProvider/GidsOverlayProviderUtils.d.ts +8 -0
- package/dist/types/components/webComponents/GidsPasswordField/GidsPasswordField.d.ts +49 -0
- package/dist/types/components/webComponents/GidsSnackbar/GidsSnackbar.d.ts +15 -0
- package/dist/types/components/webComponents/GidsTextField/GidsTextField.d.ts +39 -0
- package/dist/types/components.d.ts +437 -4
- package/dist-bundled/es/gids-field.js +6 -0
- package/dist-bundled/es/gids-icon.js +16 -200
- package/dist-bundled/es/gids-input.js +6 -0
- package/dist-bundled/es/gids-notification.js +31 -0
- package/dist-bundled/es/gids-overlay-provider.js +209 -0
- package/dist-bundled/es/gids-password-field.js +221 -0
- package/dist-bundled/es/gids-snackbar.js +31 -0
- package/dist-bundled/es/gids-text-field.js +78 -0
- package/dist-bundled/es/gids-toggle-button.js +14 -55
- package/dist-bundled/es/index.js +8 -7
- package/dist-bundled/es/p-B2zUuNXz-BLBgQDu7.js +45 -0
- package/dist-bundled/es/p-CVtNa0cL-sSVeJsR3.js +15 -0
- package/dist-bundled/es/p-CWdkmFbc-D89ZE8Mi.js +24 -0
- package/dist-bundled/es/p-D4xtPT_U-04HkZiXU.js +181 -0
- package/dist-bundled/es/p-DijVkS9b-CtFkEtlE.js +35 -0
- package/dist-bundled/es/p-DybsMR13-DpmsG3Q1.js +31 -0
- package/dist-bundled/es/p-RqpjvEHh-BGGYsIBf.js +74 -0
- package/dist-bundled/es/p-ibikYq-w-BsGxk8ro.js +635 -0
- package/dist-bundled/es/p-veoOgDXg-DElc87c0.js +192 -0
- package/dist-bundled/umd/gids-field.umd.js +5 -0
- package/dist-bundled/umd/gids-icon.umd.js +5 -1
- package/dist-bundled/umd/gids-input.umd.js +5 -0
- package/dist-bundled/umd/gids-notification.umd.js +5 -0
- package/dist-bundled/umd/gids-overlay-provider.umd.js +5 -0
- package/dist-bundled/umd/gids-password-field.umd.js +5 -0
- package/dist-bundled/umd/gids-snackbar.umd.js +5 -0
- package/dist-bundled/umd/gids-text-field.umd.js +5 -0
- package/dist-bundled/umd/gids-toggle-button.umd.js +6 -2
- package/dist-bundled/umd/index.umd.js +5 -1
- package/dist-bundled/umd-complete/gids-core-web.umd.js +6 -2
- package/package.json +65 -9
- package/dist/p-CgujYzVX.js +0 -1
- package/dist-bundled/es/p-CgujYzVX-xo1axnk6.js +0 -465
|
@@ -1,200 +1,16 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
const
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
"announcement",
|
|
8
|
-
"approval",
|
|
9
|
-
"archive",
|
|
10
|
-
"audio",
|
|
11
|
-
"backward",
|
|
12
|
-
"banking",
|
|
13
|
-
"battery",
|
|
14
|
-
"bluetooth",
|
|
15
|
-
"bookmark",
|
|
16
|
-
"bulb",
|
|
17
|
-
"calendar",
|
|
18
|
-
"camera",
|
|
19
|
-
"card",
|
|
20
|
-
"cart",
|
|
21
|
-
"chart",
|
|
22
|
-
"chat",
|
|
23
|
-
"cloud",
|
|
24
|
-
"code",
|
|
25
|
-
"compass",
|
|
26
|
-
"desktop",
|
|
27
|
-
"email",
|
|
28
|
-
"emergency",
|
|
29
|
-
"exchange",
|
|
30
|
-
"finance",
|
|
31
|
-
"fingerprint",
|
|
32
|
-
"flag",
|
|
33
|
-
"folder",
|
|
34
|
-
"forward",
|
|
35
|
-
"gift",
|
|
36
|
-
"globe",
|
|
37
|
-
"goals",
|
|
38
|
-
"happy",
|
|
39
|
-
"hashtag",
|
|
40
|
-
"headphones",
|
|
41
|
-
"history",
|
|
42
|
-
"image",
|
|
43
|
-
"insurance",
|
|
44
|
-
"investment",
|
|
45
|
-
"key",
|
|
46
|
-
"link",
|
|
47
|
-
"list",
|
|
48
|
-
"location",
|
|
49
|
-
"lock",
|
|
50
|
-
"map",
|
|
51
|
-
"maximise",
|
|
52
|
-
"microphone",
|
|
53
|
-
"minimise",
|
|
54
|
-
"mobile",
|
|
55
|
-
"moon",
|
|
56
|
-
"network",
|
|
57
|
-
"neutral",
|
|
58
|
-
"new",
|
|
59
|
-
"new-chat",
|
|
60
|
-
"pause",
|
|
61
|
-
"percent",
|
|
62
|
-
"placeholder",
|
|
63
|
-
"play",
|
|
64
|
-
"power",
|
|
65
|
-
"rain",
|
|
66
|
-
"refresh",
|
|
67
|
-
"repeat",
|
|
68
|
-
"sad",
|
|
69
|
-
"save",
|
|
70
|
-
"savings",
|
|
71
|
-
"shield",
|
|
72
|
-
"shuffle",
|
|
73
|
-
"side-navigation",
|
|
74
|
-
"snow",
|
|
75
|
-
"speaker",
|
|
76
|
-
"stop",
|
|
77
|
-
"sun",
|
|
78
|
-
"tablet",
|
|
79
|
-
"temperature",
|
|
80
|
-
"thumbs-down",
|
|
81
|
-
"thumbs-up",
|
|
82
|
-
"travel",
|
|
83
|
-
"trend-down",
|
|
84
|
-
"trend-up",
|
|
85
|
-
"unlock",
|
|
86
|
-
"upset",
|
|
87
|
-
"verified",
|
|
88
|
-
"very-happy",
|
|
89
|
-
"video",
|
|
90
|
-
"volume-down",
|
|
91
|
-
"volume-max",
|
|
92
|
-
"volume-min",
|
|
93
|
-
"volume-mute",
|
|
94
|
-
"volume-up",
|
|
95
|
-
"wallet",
|
|
96
|
-
"wealth",
|
|
97
|
-
"wi-fi",
|
|
98
|
-
"wind"
|
|
99
|
-
],
|
|
100
|
-
"icons-core.svg": [
|
|
101
|
-
"arrow-down",
|
|
102
|
-
"arrow-left",
|
|
103
|
-
"arrow-right",
|
|
104
|
-
"arrow-up",
|
|
105
|
-
"attachment",
|
|
106
|
-
"checkmark",
|
|
107
|
-
"chevron-down",
|
|
108
|
-
"chevron-horizontal",
|
|
109
|
-
"chevron-left",
|
|
110
|
-
"chevron-right",
|
|
111
|
-
"chevron-up",
|
|
112
|
-
"chevron-vertical",
|
|
113
|
-
"copy",
|
|
114
|
-
"cross",
|
|
115
|
-
"danger",
|
|
116
|
-
"dashboard",
|
|
117
|
-
"delete",
|
|
118
|
-
"document",
|
|
119
|
-
"download",
|
|
120
|
-
"drag",
|
|
121
|
-
"edit",
|
|
122
|
-
"external",
|
|
123
|
-
"eye",
|
|
124
|
-
"filter",
|
|
125
|
-
"grid",
|
|
126
|
-
"hide",
|
|
127
|
-
"home",
|
|
128
|
-
"information",
|
|
129
|
-
"log-in",
|
|
130
|
-
"log-out",
|
|
131
|
-
"menu",
|
|
132
|
-
"minus",
|
|
133
|
-
"more",
|
|
134
|
-
"notifications",
|
|
135
|
-
"options",
|
|
136
|
-
"phone",
|
|
137
|
-
"plus",
|
|
138
|
-
"positive",
|
|
139
|
-
"printer",
|
|
140
|
-
"question",
|
|
141
|
-
"search",
|
|
142
|
-
"select",
|
|
143
|
-
"select-all",
|
|
144
|
-
"send",
|
|
145
|
-
"settings",
|
|
146
|
-
"share",
|
|
147
|
-
"star",
|
|
148
|
-
"time",
|
|
149
|
-
"upload",
|
|
150
|
-
"user",
|
|
151
|
-
"users",
|
|
152
|
-
"warning"
|
|
153
|
-
]
|
|
154
|
-
}, m = /* @__PURE__ */ new Map();
|
|
155
|
-
for (const e in g)
|
|
156
|
-
for (const t of g[e])
|
|
157
|
-
m.set(t, e);
|
|
158
|
-
function C(e) {
|
|
159
|
-
return m.get(e);
|
|
160
|
-
}
|
|
161
|
-
function u(e, t = "regular", i) {
|
|
162
|
-
const s = C(e);
|
|
163
|
-
let n = s ?? "";
|
|
164
|
-
return i && s && (n = i(s) ?? s), `${n}#${e}${t === "filled" ? "--filled" : ""}`;
|
|
165
|
-
}
|
|
166
|
-
const P = ({ size: e }, t) => G("gids-icon", {
|
|
167
|
-
"gids-icon--xs": e === "xs",
|
|
168
|
-
"gids-icon--sm": e === "sm",
|
|
169
|
-
"gids-icon--md": e === "md",
|
|
170
|
-
"gids-icon--lg": e === "lg"
|
|
171
|
-
}, t), $ = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
172
|
-
__proto__: null,
|
|
173
|
-
getGidsIconClassNames: P
|
|
174
|
-
}, Symbol.toStringTag, { value: "Module" }));
|
|
175
|
-
let A = 0;
|
|
176
|
-
const N = (e, t = "gids") => e || `${t}-${A++}`, { getGidsIconClassNames: M } = $, j = ({ name: e, size: t, appearance: i, alt: s, class: n, titleId: v, src: w, ...b }) => {
|
|
177
|
-
const r = N(v);
|
|
178
|
-
let o = w;
|
|
179
|
-
return o === void 0 && z() && (o = u(e, i, h)), a("svg", { ref: (y) => {
|
|
180
|
-
o === void 0 && E((() => {
|
|
181
|
-
(function(c, I, k) {
|
|
182
|
-
if (!c) return;
|
|
183
|
-
const d = document.createElementNS("http://www.w3.org/2000/svg", "use");
|
|
184
|
-
d.setAttribute("href", u(I, k, h)), c.appendChild(d);
|
|
185
|
-
})(y, e, i);
|
|
186
|
-
}));
|
|
187
|
-
}, width: "16", height: "16", class: M({ size: t }, n), role: "img", "aria-hidden": s === "" ? "true" : void 0, "aria-labelledby": s === "" ? void 0 : r, ...b }, s !== "" && a("title", { id: r }, s || e), o !== void 0 ? a("use", { href: o }) : null);
|
|
188
|
-
}, p = S(class extends x {
|
|
189
|
-
constructor(e) {
|
|
190
|
-
super(), e !== !1 && this.__registerHost(), this.__attachShadow();
|
|
1
|
+
import { C as o, H as t, f as d, R as a } from "./p-ibikYq-w-BsGxk8ro.js";
|
|
2
|
+
import { i as n } from "./p-B2zUuNXz-BLBgQDu7.js";
|
|
3
|
+
import { d as c } from "./p-veoOgDXg-DElc87c0.js";
|
|
4
|
+
const e = o(class extends d {
|
|
5
|
+
constructor(i) {
|
|
6
|
+
super(), i !== !1 && this.__registerHost(), this.__attachShadow();
|
|
191
7
|
}
|
|
192
8
|
connectedCallback() {
|
|
193
|
-
const
|
|
194
|
-
|
|
9
|
+
const i = n();
|
|
10
|
+
i !== void 0 && this._el.shadowRoot?.adoptedStyleSheets.push(i);
|
|
195
11
|
}
|
|
196
12
|
render() {
|
|
197
|
-
return a(
|
|
13
|
+
return a(c, { key: "b3a3cfcc04ab9526dd924d24df2ad992a2018ffc", name: this.name, size: this.size, appearance: this.appearance, alt: this.alt, titleId: this.titleId });
|
|
198
14
|
}
|
|
199
15
|
get _el() {
|
|
200
16
|
return this;
|
|
@@ -203,14 +19,14 @@ const N = (e, t = "gids") => e || `${t}-${A++}`, { getGidsIconClassNames: M } =
|
|
|
203
19
|
return ".gids-icon{fill:var(--gidsIcon-color, var(--gids-color-icon-default));width:auto;height:var(--gidsIcon-height, 100%)}.gids-icon--xs{--gidsIcon-height:var(--gids-size-120)}.gids-icon--sm{--gidsIcon-height:var(--gids-size-160)}.gids-icon--md{--gidsIcon-height:var(--gids-size-240)}.gids-icon--lg{--gidsIcon-height:var(--gids-size-320)}";
|
|
204
20
|
}
|
|
205
21
|
}, [1, "gids-icon", { name: [1], size: [1], appearance: [1], alt: [1], titleId: [1, "title-id"] }]);
|
|
206
|
-
function
|
|
207
|
-
typeof customElements < "u" && ["gids-icon"].forEach(((
|
|
208
|
-
|
|
22
|
+
function s() {
|
|
23
|
+
typeof customElements < "u" && ["gids-icon"].forEach(((i) => {
|
|
24
|
+
i === "gids-icon" && (customElements.get(t(i)) || customElements.define(t(i), e));
|
|
209
25
|
}));
|
|
210
26
|
}
|
|
211
|
-
|
|
212
|
-
const
|
|
27
|
+
s();
|
|
28
|
+
const l = e, m = s;
|
|
213
29
|
export {
|
|
214
|
-
|
|
215
|
-
|
|
30
|
+
l as GidsIcon,
|
|
31
|
+
m as defineCustomElement
|
|
216
32
|
};
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { C as e, f as s, H as i } from "./p-ibikYq-w-BsGxk8ro.js";
|
|
2
|
+
import { e as a } from "./p-CVtNa0cL-sSVeJsR3.js";
|
|
3
|
+
const o = e(class extends s {
|
|
4
|
+
constructor(t) {
|
|
5
|
+
super(), t !== !1 && this.__registerHost(), this.__attachShadow(), this.pronunciation = "standard", this.appearance = "default", this.show = !1, this.position = "top-right";
|
|
6
|
+
}
|
|
7
|
+
async showNotification() {
|
|
8
|
+
const t = a(this._el);
|
|
9
|
+
t && this.show && t.queueComponent({ notificationTitle: this.notificationTitle, message: this.message, pronunciation: this.pronunciation, appearance: this.appearance, buttonLabel: this.buttonLabel, onButtonClick: this.onButtonClick, position: this.position, componentName: "notification", timerInMs: this.timerInMs }), this.onQueueNotification && this.onQueueNotification(), this.show = !1;
|
|
10
|
+
}
|
|
11
|
+
render() {
|
|
12
|
+
return null;
|
|
13
|
+
}
|
|
14
|
+
get _el() {
|
|
15
|
+
return this;
|
|
16
|
+
}
|
|
17
|
+
static get watchers() {
|
|
18
|
+
return { show: [{ showNotification: 0 }] };
|
|
19
|
+
}
|
|
20
|
+
}, [1, "gids-notification", { notificationTitle: [513, "notification-title"], message: [513], pronunciation: [513], appearance: [513], show: [516], onQueueNotification: [16], buttonLabel: [513, "button-label"], position: [513], timerInMs: [514, "timer-in-ms"], onButtonClick: [16] }, void 0, { show: [{ showNotification: 0 }] }]);
|
|
21
|
+
function n() {
|
|
22
|
+
typeof customElements < "u" && ["gids-notification"].forEach(((t) => {
|
|
23
|
+
t === "gids-notification" && (customElements.get(i(t)) || customElements.define(i(t), o));
|
|
24
|
+
}));
|
|
25
|
+
}
|
|
26
|
+
n();
|
|
27
|
+
const r = o, u = n;
|
|
28
|
+
export {
|
|
29
|
+
r as GidsNotification,
|
|
30
|
+
u as defineCustomElement
|
|
31
|
+
};
|
|
@@ -0,0 +1,209 @@
|
|
|
1
|
+
import { C as k, f as y, R as o, L as w, H as f } from "./p-ibikYq-w-BsGxk8ro.js";
|
|
2
|
+
import { i as x } from "./p-B2zUuNXz-BLBgQDu7.js";
|
|
3
|
+
import { e as N, n as g } from "./p-CVtNa0cL-sSVeJsR3.js";
|
|
4
|
+
import { d as p } from "./p-veoOgDXg-DElc87c0.js";
|
|
5
|
+
import { a as u } from "./p-CWdkmFbc-D89ZE8Mi.js";
|
|
6
|
+
import { c as h } from "./clsx-OuTLNxxd.js";
|
|
7
|
+
const Q = ({ appearance: t }, e) => h("gids-snackbar-container", {
|
|
8
|
+
// 'gids-snackbar-container--appearance-default': appearance === 'default' // its a default
|
|
9
|
+
"gids-snackbar-container--appearance-information": t === "information",
|
|
10
|
+
"gids-snackbar-container--appearance-success": t === "success",
|
|
11
|
+
"gids-snackbar-container--appearance-warning": t === "warning",
|
|
12
|
+
"gids-snackbar-container--appearance-error": t === "error"
|
|
13
|
+
}, e), S = (t) => {
|
|
14
|
+
if (t)
|
|
15
|
+
switch (t) {
|
|
16
|
+
case "information":
|
|
17
|
+
return "information";
|
|
18
|
+
case "warning":
|
|
19
|
+
return "warning";
|
|
20
|
+
case "error":
|
|
21
|
+
return "danger";
|
|
22
|
+
case "success":
|
|
23
|
+
return "positive";
|
|
24
|
+
default:
|
|
25
|
+
return;
|
|
26
|
+
}
|
|
27
|
+
}, j = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
28
|
+
__proto__: null,
|
|
29
|
+
getGidsSnackbarContainerClassNames: Q,
|
|
30
|
+
getSnackbarContainerIconNames: S
|
|
31
|
+
}, Symbol.toStringTag, { value: "Module" })), b = (t) => {
|
|
32
|
+
switch (t) {
|
|
33
|
+
case "bottom-left":
|
|
34
|
+
return "component-enter-bottom-left";
|
|
35
|
+
case "bottom-right":
|
|
36
|
+
return "component-enter-bottom-right";
|
|
37
|
+
case "middle-left":
|
|
38
|
+
return "component-enter-middle-left";
|
|
39
|
+
case "middle-right":
|
|
40
|
+
return "component-enter-middle-right";
|
|
41
|
+
case "top-center":
|
|
42
|
+
return "component-enter-top-center";
|
|
43
|
+
case "top-left":
|
|
44
|
+
return "component-enter-top-left";
|
|
45
|
+
case "top-right":
|
|
46
|
+
return "component-enter-top-right";
|
|
47
|
+
default:
|
|
48
|
+
return "component-enter-bottom-center";
|
|
49
|
+
}
|
|
50
|
+
}, v = (t) => {
|
|
51
|
+
switch (t) {
|
|
52
|
+
case "bottom-left":
|
|
53
|
+
return "component-exit-bottom-left";
|
|
54
|
+
case "bottom-right":
|
|
55
|
+
return "component-exit-bottom-right";
|
|
56
|
+
case "middle-left":
|
|
57
|
+
return "component-exit-middle-left";
|
|
58
|
+
case "middle-right":
|
|
59
|
+
return "component-exit-middle-right";
|
|
60
|
+
case "top-center":
|
|
61
|
+
return "component-exit-top-center";
|
|
62
|
+
case "top-left":
|
|
63
|
+
return "component-exit-top-left";
|
|
64
|
+
case "top-right":
|
|
65
|
+
return "component-exit-top-right";
|
|
66
|
+
default:
|
|
67
|
+
return "component-exit-bottom-center";
|
|
68
|
+
}
|
|
69
|
+
}, P = ({ position: t, id: e, exitingComponents: n }) => n.includes(e) ? v(t) : b(t), M = ({ position: t }) => {
|
|
70
|
+
switch (t) {
|
|
71
|
+
case "bottom-left":
|
|
72
|
+
return "common-component-stack component-stack-bottom-left";
|
|
73
|
+
case "bottom-right":
|
|
74
|
+
return "common-component-stack component-stack-bottom-right";
|
|
75
|
+
case "middle-left":
|
|
76
|
+
return "common-component-stack component-stack-middle-left";
|
|
77
|
+
case "middle-right":
|
|
78
|
+
return "common-component-stack component-stack-middle-right";
|
|
79
|
+
case "top-center":
|
|
80
|
+
return "common-component-stack component-stack-top-center";
|
|
81
|
+
case "top-left":
|
|
82
|
+
return "common-component-stack component-stack-top-left";
|
|
83
|
+
case "top-right":
|
|
84
|
+
return "common-component-stack component-stack-top-right";
|
|
85
|
+
default:
|
|
86
|
+
return "common-component-stack component-stack-bottom-center";
|
|
87
|
+
}
|
|
88
|
+
}, O = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
89
|
+
__proto__: null,
|
|
90
|
+
getComponentClasses: P,
|
|
91
|
+
getComponentEntryClasses: b,
|
|
92
|
+
getComponentExitClasses: v,
|
|
93
|
+
getComponentStackClasses: M
|
|
94
|
+
}, Symbol.toStringTag, { value: "Module" })), T = ({ appearance: t }, e) => h("gids-notification-container", {
|
|
95
|
+
// 'gids-notification-container--appearance-default': appearance === 'default' // its a default
|
|
96
|
+
"gids-notification-container--appearance-information": t === "information",
|
|
97
|
+
"gids-notification-container--appearance-success": t === "success",
|
|
98
|
+
"gids-notification-container--appearance-warning": t === "warning",
|
|
99
|
+
"gids-notification-container--appearance-error": t === "error"
|
|
100
|
+
}, e), I = (t) => {
|
|
101
|
+
if (t)
|
|
102
|
+
switch (t) {
|
|
103
|
+
case "information":
|
|
104
|
+
return "information";
|
|
105
|
+
case "warning":
|
|
106
|
+
return "warning";
|
|
107
|
+
case "error":
|
|
108
|
+
return "danger";
|
|
109
|
+
case "success":
|
|
110
|
+
return "positive";
|
|
111
|
+
default:
|
|
112
|
+
return;
|
|
113
|
+
}
|
|
114
|
+
}, q = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
115
|
+
__proto__: null,
|
|
116
|
+
getGidsNotificationContainerClassNames: T,
|
|
117
|
+
getNotificationContainerIconNames: I
|
|
118
|
+
}, Symbol.toStringTag, { value: "Module" })), { getGidsSnackbarContainerClassNames: z, getSnackbarContainerIconNames: L } = j, R = ({ appearance: t = "default", children: e, button: n, class: i, ...a }) => {
|
|
119
|
+
const r = L(t);
|
|
120
|
+
return o("div", { ...a, class: z({ appearance: t }, i) }, o("div", { class: "gids-snackbar-container__content" }, t !== "default" && r != null ? o(p, { name: r, alt: "", appearance: "filled", size: "md", class: "gids-snackbar-container__icon" }) : null, typeof e == "string" ? o("p", null, e) : e), n);
|
|
121
|
+
}, { getGidsNotificationContainerClassNames: X, getNotificationContainerIconNames: Y } = q, E = ({ notificationTitle: t, children: e, button: n, appearance: i = "default", pronunciation: a = "standard", onCloseNotificationClick: r, class: s, ...m }) => {
|
|
122
|
+
const c = Y(i);
|
|
123
|
+
return o("div", { class: X({ appearance: i }, s), ...m }, i !== "default" && c ? o("div", { class: "gids-notification-container__leading-icon-wrapper" }, o(p, { size: "md", name: c, alt: "", appearance: "filled" })) : null, o("div", { class: "gids-notification-container__content-wrapper" }, o("div", { class: "gids-notification-container__top-content" }, o("div", { class: "gids-notification-container__text-content" }, t != null && t !== "" ? o("span", { class: "gids-notification-container__title" }, t) : null, e ? typeof e == "string" ? o("p", null, e) : e : null), a === "standard" ? o("div", { class: "gids-notification-container__cross-btn-wrapper" }, o(u, { size: "sm", appearance: "subtle", width: "intrinsic", leadingIcon: o(p, { name: "cross", size: "md", appearance: "regular" }), onClick: r })) : null), n ? o("div", { class: "gids-notification-container__bottom-content" }, n) : null));
|
|
124
|
+
}, { getComponentClasses: B, getComponentStackClasses: G } = O, _ = k(class extends y {
|
|
125
|
+
constructor(t) {
|
|
126
|
+
super(), t !== !1 && this.__registerHost(), this.__attachShadow(), this._parentOverlayProvider = null, this._componentQueue = [], this._allowedComponentQueue = [], this._exitingComponents = [], this._renderSnackbar = (e, n) => {
|
|
127
|
+
const { id: i, message: a, appearance: r, buttonLabel: s, onButtonClick: m } = e;
|
|
128
|
+
return console.log("_renderSnackbar_called"), o(R, { key: i, class: n, children: a, appearance: r, button: s != null && s !== "" ? o(u, { appearance: "subtle", onClick: m }, s) : void 0 });
|
|
129
|
+
}, this._renderNotification = (e, n) => {
|
|
130
|
+
const { id: i, notificationTitle: a, message: r, pronunciation: s, appearance: m, buttonLabel: c, onButtonClick: l, timerInMs: d } = e;
|
|
131
|
+
return o(E, { key: i, class: n, notificationTitle: a, children: r, pronunciation: s, appearance: m, onCloseNotificationClick: () => this.removeComponent(e, d || 0, !0), button: c != null && c !== "" ? o(u, { appearance: "default", size: "sm", onClick: l }, c) : void 0 });
|
|
132
|
+
}, this._renderComponent = (e) => {
|
|
133
|
+
const { componentName: n, position: i = "bottom-center", id: a } = e, r = B({ position: i, id: a, exitingComponents: this._exitingComponents });
|
|
134
|
+
return console.log("_renderComponent_called", n), n == null || n === "snackbar" ? this._renderSnackbar(e, r) : n === "notification" ? this._renderNotification(e, r) : null;
|
|
135
|
+
};
|
|
136
|
+
}
|
|
137
|
+
connectedCallback() {
|
|
138
|
+
const t = x();
|
|
139
|
+
t !== void 0 && this._el.shadowRoot?.adoptedStyleSheets.push(t), this._parentOverlayProvider = N(this._el);
|
|
140
|
+
}
|
|
141
|
+
_isRoot() {
|
|
142
|
+
return this._parentOverlayProvider === null;
|
|
143
|
+
}
|
|
144
|
+
async getRootOverlayProvider() {
|
|
145
|
+
return this._isRoot() ? this._el : this._parentOverlayProvider;
|
|
146
|
+
}
|
|
147
|
+
autoHide(t) {
|
|
148
|
+
return new Promise(((e) => {
|
|
149
|
+
const n = setTimeout((() => (clearTimeout(n), e({ isTimeout: !0 }))), t);
|
|
150
|
+
}));
|
|
151
|
+
}
|
|
152
|
+
async _queueSnackbar(t) {
|
|
153
|
+
const { appearance: e, message: n, buttonLabel: i, onButtonClick: a, position: r, componentName: s, ...m } = t, c = { id: "" + (Date.now() + Math.random()), message: n, appearance: e, buttonLabel: i, onButtonClick: a, position: r, componentName: s, ...m };
|
|
154
|
+
console.log("component_1", c), this._componentQueue = [...this._componentQueue, c], this.processSingleComponentQueue();
|
|
155
|
+
}
|
|
156
|
+
async _queueNotification(t) {
|
|
157
|
+
const { appearance: e, notificationTitle: n, pronunciation: i, message: a, buttonLabel: r, onButtonClick: s, position: m, componentName: c, ...l } = t, d = { id: "" + (Date.now() + Math.random()), notificationTitle: n, message: a, pronunciation: i, appearance: e, buttonLabel: r, onButtonClick: s, position: m, componentName: c, ...l };
|
|
158
|
+
this._componentQueue = [...this._componentQueue, d], this.processMultiComponentQueue();
|
|
159
|
+
}
|
|
160
|
+
async queueComponent(t) {
|
|
161
|
+
if (await this._isRoot()) {
|
|
162
|
+
const { componentName: e } = t;
|
|
163
|
+
e != null && e !== "snackbar" || this._queueSnackbar(t), e === "notification" && this._queueNotification(t);
|
|
164
|
+
} else (await this.getRootOverlayProvider()).queueComponent(t);
|
|
165
|
+
}
|
|
166
|
+
async removeComponent(t, e, n) {
|
|
167
|
+
return n || await this.autoHide(e), this._exitingComponents = [...this._exitingComponents, t.id], new Promise(((i) => {
|
|
168
|
+
setTimeout((() => {
|
|
169
|
+
this._componentQueue = this._componentQueue.filter(((a) => a.id !== t.id)), this._exitingComponents = this._exitingComponents.filter(((a) => a !== t.id)), this._allowedComponentQueue = [], i();
|
|
170
|
+
}), 500);
|
|
171
|
+
}));
|
|
172
|
+
}
|
|
173
|
+
async processSingleComponentQueue() {
|
|
174
|
+
if (this._componentQueue.length === 0) return;
|
|
175
|
+
const t = this._componentQueue[0];
|
|
176
|
+
if (!t) return;
|
|
177
|
+
this._allowedComponentQueue = [t], await new Promise(((n) => requestAnimationFrame((() => n()))));
|
|
178
|
+
const e = g({ componentName: t?.componentName ?? "snackbar", timerInMs: t?.timerInMs ?? 0 });
|
|
179
|
+
await this.removeComponent(t, e, !1), this.processSingleComponentQueue();
|
|
180
|
+
}
|
|
181
|
+
async processMultiComponentQueue() {
|
|
182
|
+
const t = this._componentQueue;
|
|
183
|
+
t.length !== 0 && (this._allowedComponentQueue = t, await new Promise(((e) => requestAnimationFrame((() => e())))), this._allowedComponentQueue.map((async (e) => {
|
|
184
|
+
const n = g({ componentName: e?.componentName ?? "snackbar", timerInMs: e?.timerInMs ?? 0 });
|
|
185
|
+
await this.removeComponent(e, n, !1);
|
|
186
|
+
})), this.processMultiComponentQueue());
|
|
187
|
+
}
|
|
188
|
+
render() {
|
|
189
|
+
const t = this._allowedComponentQueue[0]?.position || "bottom-center";
|
|
190
|
+
return o(w, { key: "41dc60790fe64bf9e0daa2da5fd6c39f30d8ceac" }, o("slot", { key: "a480a4344336cbbf75ac3bc771c9416d27d9d742" }), this._isRoot() ? o("div", { class: G({ position: t }) }, [...this._allowedComponentQueue].reverse().map(((e) => this._renderComponent(e)))) : null);
|
|
191
|
+
}
|
|
192
|
+
get _el() {
|
|
193
|
+
return this;
|
|
194
|
+
}
|
|
195
|
+
static get style() {
|
|
196
|
+
return ".common-component-stack{display:flex;flex-direction:column;position:fixed;gap:var(--gids-gap-200);min-width:var(--gids-width-2-xs);max-width:var(--gids-width-md);width:100%}.component-stack-bottom-left{justify-self:left;bottom:var(--gids-padding-vertical-edge-to-element-250);left:var(--gids-padding-vertical-edge-to-element-250)}.component-stack-bottom-right{justify-self:right;bottom:var(--gids-padding-vertical-edge-to-element-250);right:var(--gids-padding-vertical-edge-to-element-250)}.component-stack-middle-left{top:50%;justify-self:left;align-self:center;left:var(--gids-padding-vertical-edge-to-element-250)}.component-stack-middle-right{top:50%;justify-self:right;align-self:center;right:var(--gids-padding-vertical-edge-to-element-250)}.component-stack-top-center{justify-self:center;top:var(--gids-padding-vertical-edge-to-element-250)}.component-stack-top-left{justify-self:left;top:var(--gids-padding-vertical-edge-to-element-250);left:var(--gids-padding-vertical-edge-to-element-250)}.component-stack-top-right{justify-self:right;top:var(--gids-padding-vertical-edge-to-element-250);right:var(--gids-padding-vertical-edge-to-element-250)}.component-stack-bottom-center{justify-self:center;bottom:var(--gids-padding-vertical-edge-to-element-250)}.component-enter-bottom-left{animation-name:left-to-right-visible;animation-duration:0.3s;animation-fill-mode:forwards}.component-enter-bottom-right{animation-name:right-to-left-visible;animation-duration:0.3s;animation-fill-mode:forwards}.component-enter-middle-left{animation-name:left-to-right-visible;animation-duration:0.3s;animation-fill-mode:forwards}.component-enter-middle-right{animation-name:right-to-left-visible;animation-duration:0.3s;animation-fill-mode:forwards}.component-enter-top-center{animation-name:slide-up-invisible;animation-duration:0.3s;animation-fill-mode:forwards}.component-enter-top-left{animation-name:left-to-right-visible;animation-duration:0.3s;animation-fill-mode:forwards}.component-enter-top-right{animation-name:right-to-left-visible;animation-duration:0.3s;animation-fill-mode:forwards}.component-enter-bottom-center{animation-name:slide-up-visible;animation-duration:0.3s;animation-fill-mode:forwards}.component-exit-bottom-left{animation-name:right-to-left-invisible;animation-duration:0.3s;animation-fill-mode:forwards}.component-exit-bottom-right{animation-name:left-to-right-invisible;animation-duration:0.3s;animation-fill-mode:forwards}.component-exit-middle-left{animation-name:right-to-left-invisible;animation-duration:0.3s;animation-fill-mode:forwards}.component-exit-middle-right{animation-name:left-to-right-invisible;animation-duration:0.3s;animation-fill-mode:forwards}.component-exit-top-center{animation-name:slide-down-visible;animation-duration:0.3s;animation-fill-mode:forwards}.component-exit-top-left{animation-name:right-to-left-invisible;animation-duration:0.3s;animation-fill-mode:forwards}.component-exit-top-right{animation-name:left-to-right-invisible;animation-duration:0.3s;animation-fill-mode:forwards}.component-exit-bottom-center{animation-name:slide-down-invisible;animation-duration:0.3s;animation-fill-mode:forwards}@keyframes slide-up-visible{0%{opacity:0;transform:translateY(100%)}100%{opacity:1;transform:translateY(0)}}@keyframes slide-down-invisible{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(100%)}}@keyframes slide-up-invisible{0%{opacity:0;transform:translateY(-100%)}100%{opacity:1;transform:translateY(0)}}@keyframes slide-down-visible{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-100%)}}@keyframes left-to-right-visible{0%{opacity:0;transform:translateX(-100%)}100%{opacity:1;transform:translateX(0)}}@keyframes right-to-left-invisible{0%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(-100%)}}@keyframes right-to-left-visible{0%{opacity:0;transform:translateX(100%)}100%{opacity:1;transform:translateX(0)}}@keyframes left-to-right-invisible{0%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(100%)}}";
|
|
197
|
+
}
|
|
198
|
+
}, [257, "gids-overlay-provider", { _componentQueue: [32], _allowedComponentQueue: [32], _exitingComponents: [32], queueComponent: [64] }]);
|
|
199
|
+
function C() {
|
|
200
|
+
typeof customElements < "u" && ["gids-overlay-provider"].forEach(((t) => {
|
|
201
|
+
t === "gids-overlay-provider" && (customElements.get(f(t)) || customElements.define(f(t), _));
|
|
202
|
+
}));
|
|
203
|
+
}
|
|
204
|
+
C();
|
|
205
|
+
const K = _, U = C;
|
|
206
|
+
export {
|
|
207
|
+
K as GidsOverlayProvider,
|
|
208
|
+
U as defineCustomElement
|
|
209
|
+
};
|