@edmicro/olkit 1.0.1
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/README.md +298 -0
- package/fesm2022/edmicro-olkit.mjs +945 -0
- package/fesm2022/edmicro-olkit.mjs.map +1 -0
- package/olkit.css +2 -0
- package/package.json +44 -0
- package/types/edmicro-olkit.d.ts +220 -0
- package/types/edmicro-olkit.d.ts.map +1 -0
- package/version.txt +2 -0
|
@@ -0,0 +1,945 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { input, output, computed, ChangeDetectionStrategy, Component, model, inject, forwardRef, contentChildren, HostListener, ElementRef, signal, effect } from '@angular/core';
|
|
3
|
+
import { CommonModule } from '@angular/common';
|
|
4
|
+
|
|
5
|
+
class ButtonComponent {
|
|
6
|
+
color = input('brand', /* @ts-ignore */
|
|
7
|
+
...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
|
|
8
|
+
size = input('md', /* @ts-ignore */
|
|
9
|
+
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
10
|
+
pill = input(false, /* @ts-ignore */
|
|
11
|
+
...(ngDevMode ? [{ debugName: "pill" }] : /* istanbul ignore next */ []));
|
|
12
|
+
outline = input(false, /* @ts-ignore */
|
|
13
|
+
...(ngDevMode ? [{ debugName: "outline" }] : /* istanbul ignore next */ []));
|
|
14
|
+
iconOnly = input(false, /* @ts-ignore */
|
|
15
|
+
...(ngDevMode ? [{ debugName: "iconOnly" }] : /* istanbul ignore next */ []));
|
|
16
|
+
loading = input(false, /* @ts-ignore */
|
|
17
|
+
...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
|
|
18
|
+
disabled = input(false, /* @ts-ignore */
|
|
19
|
+
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
20
|
+
type = input('button', /* @ts-ignore */
|
|
21
|
+
...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
|
|
22
|
+
btnClick = output();
|
|
23
|
+
buttonClasses = computed(() => {
|
|
24
|
+
const c = this.color();
|
|
25
|
+
const s = this.size();
|
|
26
|
+
const isPill = this.pill();
|
|
27
|
+
const isOutline = this.outline();
|
|
28
|
+
const isIconOnly = this.iconOnly();
|
|
29
|
+
const isDisabled = this.disabled() || this.loading();
|
|
30
|
+
const classes = [
|
|
31
|
+
'inline-flex',
|
|
32
|
+
'items-center',
|
|
33
|
+
'justify-center',
|
|
34
|
+
'gap-1.5',
|
|
35
|
+
'font-medium',
|
|
36
|
+
'text-center',
|
|
37
|
+
'whitespace-nowrap',
|
|
38
|
+
'shrink-0',
|
|
39
|
+
'leading-none',
|
|
40
|
+
'transition-all',
|
|
41
|
+
'duration-150',
|
|
42
|
+
'focus:outline-none',
|
|
43
|
+
'focus:ring-2',
|
|
44
|
+
'select-none',
|
|
45
|
+
'shadow-xs',
|
|
46
|
+
'cursor-pointer',
|
|
47
|
+
];
|
|
48
|
+
// Corner radius (Figma standard 12px = rounded-xl, Pill = rounded-full)
|
|
49
|
+
if (isPill) {
|
|
50
|
+
classes.push('rounded-full');
|
|
51
|
+
}
|
|
52
|
+
else {
|
|
53
|
+
classes.push('rounded-xl');
|
|
54
|
+
}
|
|
55
|
+
// Sizes (Matching Figma Dimensions: xs=32px, sm=36px, md=40px, lg=44px, xl=48px)
|
|
56
|
+
if (isIconOnly) {
|
|
57
|
+
switch (s) {
|
|
58
|
+
case 'xs':
|
|
59
|
+
classes.push('w-8', 'h-8', 'p-1.5', 'text-xs');
|
|
60
|
+
break;
|
|
61
|
+
case 'sm':
|
|
62
|
+
classes.push('w-9', 'h-9', 'p-2', 'text-sm');
|
|
63
|
+
break;
|
|
64
|
+
case 'lg':
|
|
65
|
+
classes.push('w-11', 'h-11', 'p-2.5', 'text-base');
|
|
66
|
+
break;
|
|
67
|
+
case 'xl':
|
|
68
|
+
classes.push('w-12', 'h-12', 'p-3', 'text-base');
|
|
69
|
+
break;
|
|
70
|
+
case 'md':
|
|
71
|
+
default:
|
|
72
|
+
classes.push('w-10', 'h-10', 'p-2', 'text-sm');
|
|
73
|
+
break;
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
else {
|
|
77
|
+
switch (s) {
|
|
78
|
+
case 'xs':
|
|
79
|
+
classes.push('px-3.5', 'py-1.5', 'text-xs', 'h-8');
|
|
80
|
+
break;
|
|
81
|
+
case 'sm':
|
|
82
|
+
classes.push('px-4', 'py-2', 'text-sm', 'h-9');
|
|
83
|
+
break;
|
|
84
|
+
case 'lg':
|
|
85
|
+
classes.push('px-5', 'py-2.5', 'text-base', 'h-11');
|
|
86
|
+
break;
|
|
87
|
+
case 'xl':
|
|
88
|
+
classes.push('px-6', 'py-3', 'text-base', 'h-12');
|
|
89
|
+
break;
|
|
90
|
+
case 'md':
|
|
91
|
+
default:
|
|
92
|
+
classes.push('px-4.5', 'py-2.5', 'text-sm', 'h-10');
|
|
93
|
+
break;
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
// Disabled state (Figma exact match: #F3F4F6 bg, #99A1AF text)
|
|
97
|
+
if (isDisabled) {
|
|
98
|
+
classes.push('bg-[#F3F4F6]', 'text-[#99A1AF]', 'border-transparent', 'shadow-none', 'cursor-not-allowed', 'pointer-events-none', 'dark:bg-slate-800', 'dark:text-slate-500');
|
|
99
|
+
return classes.join(' ');
|
|
100
|
+
}
|
|
101
|
+
// Colors & Outline Modes (Matching Figma Ôn Luyện Design System)
|
|
102
|
+
if (isOutline) {
|
|
103
|
+
switch (c) {
|
|
104
|
+
case 'green':
|
|
105
|
+
case 'success':
|
|
106
|
+
classes.push('text-[#007A55]', 'border', 'border-[#007A55]', 'hover:bg-[#007A55]', 'hover:text-white', 'active:bg-[#006045]', 'focus:ring-emerald-300', 'dark:border-emerald-500', 'dark:text-emerald-400', 'dark:hover:bg-emerald-600', 'dark:hover:text-white');
|
|
107
|
+
break;
|
|
108
|
+
case 'red':
|
|
109
|
+
case 'danger':
|
|
110
|
+
classes.push('text-[#C70036]', 'border', 'border-[#C70036]', 'hover:bg-[#C70036]', 'hover:text-white', 'active:bg-[#A50036]', 'focus:ring-rose-300', 'dark:border-rose-500', 'dark:text-rose-400', 'dark:hover:bg-rose-600', 'dark:hover:text-white');
|
|
111
|
+
break;
|
|
112
|
+
case 'yellow':
|
|
113
|
+
case 'warning':
|
|
114
|
+
classes.push('text-[#FF5A1F]', 'border', 'border-[#FF5A1F]', 'hover:bg-[#FF5A1F]', 'hover:text-white', 'active:bg-[#D03801]', 'focus:ring-orange-300', 'dark:border-orange-500', 'dark:text-orange-400', 'dark:hover:bg-orange-600', 'dark:hover:text-white');
|
|
115
|
+
break;
|
|
116
|
+
case 'purple':
|
|
117
|
+
classes.push('text-purple-700', 'border', 'border-purple-600', 'hover:bg-purple-600', 'hover:text-white', 'focus:ring-purple-300', 'dark:border-purple-400', 'dark:text-purple-400', 'dark:hover:bg-purple-600', 'dark:hover:text-white');
|
|
118
|
+
break;
|
|
119
|
+
case 'dark':
|
|
120
|
+
classes.push('text-[#1E2939]', 'border', 'border-[#1E2939]', 'hover:bg-[#1E2939]', 'hover:text-white', 'focus:ring-slate-400', 'dark:border-slate-600', 'dark:text-slate-200', 'dark:hover:bg-slate-700', 'dark:hover:text-white');
|
|
121
|
+
break;
|
|
122
|
+
case 'alternative':
|
|
123
|
+
case 'secondary':
|
|
124
|
+
case 'light':
|
|
125
|
+
classes.push('text-[#1E2939]', 'bg-white', 'border', 'border-[#E5E7EB]', 'hover:bg-[#F3F4F6]', 'active:bg-[#E5E7EB]', 'focus:ring-slate-200', 'dark:bg-slate-900', 'dark:border-slate-700', 'dark:text-slate-200', 'dark:hover:bg-slate-800');
|
|
126
|
+
break;
|
|
127
|
+
case 'brand':
|
|
128
|
+
case 'primary':
|
|
129
|
+
case 'default':
|
|
130
|
+
default:
|
|
131
|
+
classes.push('text-brand-700', 'border', 'border-brand-700', 'hover:bg-brand-700', 'hover:text-white', 'active:bg-brand-800', 'focus:ring-brand-200', 'dark:border-brand-400', 'dark:text-brand-400', 'dark:hover:bg-brand-700', 'dark:hover:text-white');
|
|
132
|
+
break;
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
else {
|
|
136
|
+
// Solid variants
|
|
137
|
+
switch (c) {
|
|
138
|
+
case 'ghost':
|
|
139
|
+
classes.push('text-[#4A5565]', 'bg-transparent', 'hover:bg-[#F3F4F6]', 'active:bg-[#E5E7EB]', 'focus:ring-slate-200', 'dark:text-slate-300', 'dark:hover:bg-slate-800');
|
|
140
|
+
break;
|
|
141
|
+
case 'tertiary':
|
|
142
|
+
case 'alternative':
|
|
143
|
+
case 'secondary':
|
|
144
|
+
// White Button in Figma (border #E5E7EB, text #1E2939, hover #F3F4F6, active #E5E7EB)
|
|
145
|
+
classes.push('text-[#1E2939]', 'bg-white', 'border', 'border-[#E5E7EB]', 'hover:bg-[#F3F4F6]', 'active:bg-[#E5E7EB]', 'focus:ring-slate-200', 'dark:bg-slate-900', 'dark:text-slate-100', 'dark:border-slate-700', 'dark:hover:bg-slate-800');
|
|
146
|
+
break;
|
|
147
|
+
case 'light':
|
|
148
|
+
classes.push('text-slate-900', 'bg-slate-100', 'hover:bg-slate-200', 'active:bg-slate-300', 'focus:ring-slate-200', 'dark:bg-slate-800', 'dark:text-white', 'dark:hover:bg-slate-700');
|
|
149
|
+
break;
|
|
150
|
+
case 'dark':
|
|
151
|
+
classes.push('text-white', 'bg-[#1E2939]', 'hover:bg-[#101828]', 'active:bg-[#0B111A]', 'focus:ring-slate-500', 'dark:bg-slate-800', 'dark:hover:bg-slate-700');
|
|
152
|
+
break;
|
|
153
|
+
case 'green':
|
|
154
|
+
case 'success':
|
|
155
|
+
// Figma Green: #007A55, hover #006045, active #004D37
|
|
156
|
+
classes.push('text-white', 'bg-[#007A55]', 'hover:bg-[#006045]', 'active:bg-[#004D37]', 'focus:ring-emerald-300', 'dark:bg-emerald-600', 'dark:hover:bg-emerald-700');
|
|
157
|
+
break;
|
|
158
|
+
case 'red':
|
|
159
|
+
case 'danger':
|
|
160
|
+
// Figma Crimson Red: #C70036, hover #A50036, active #85002C
|
|
161
|
+
classes.push('text-white', 'bg-[#C70036]', 'hover:bg-[#A50036]', 'active:bg-[#85002C]', 'focus:ring-rose-300', 'dark:bg-rose-600', 'dark:hover:bg-rose-700');
|
|
162
|
+
break;
|
|
163
|
+
case 'yellow':
|
|
164
|
+
case 'warning':
|
|
165
|
+
// Figma Orange: #FF5A1F, hover #D03801, active #B43403
|
|
166
|
+
classes.push('text-white', 'bg-[#FF5A1F]', 'hover:bg-[#D03801]', 'active:bg-[#B43403]', 'focus:ring-orange-300', 'dark:bg-orange-600', 'dark:hover:bg-orange-700');
|
|
167
|
+
break;
|
|
168
|
+
case 'purple':
|
|
169
|
+
classes.push('text-white', 'bg-purple-600', 'hover:bg-purple-700', 'active:bg-purple-800', 'focus:ring-purple-300', 'dark:bg-purple-600', 'dark:hover:bg-purple-700');
|
|
170
|
+
break;
|
|
171
|
+
case 'brand':
|
|
172
|
+
case 'primary':
|
|
173
|
+
case 'default':
|
|
174
|
+
default:
|
|
175
|
+
// Figma Brand Primary (Onluyen - Prime / Brand 700: #2B4182, hover 800: #203165, active 900: #152147)
|
|
176
|
+
classes.push('text-white', 'bg-brand-700', 'hover:bg-brand-800', 'active:bg-brand-900', 'focus:ring-brand-200', 'dark:bg-brand-700', 'dark:hover:bg-brand-800');
|
|
177
|
+
break;
|
|
178
|
+
}
|
|
179
|
+
}
|
|
180
|
+
return classes.join(' ');
|
|
181
|
+
}, /* @ts-ignore */
|
|
182
|
+
...(ngDevMode ? [{ debugName: "buttonClasses" }] : /* istanbul ignore next */ []));
|
|
183
|
+
handleClick(event) {
|
|
184
|
+
if (!this.disabled() && !this.loading()) {
|
|
185
|
+
this.btnClick.emit(event);
|
|
186
|
+
}
|
|
187
|
+
}
|
|
188
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
189
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: ButtonComponent, isStandalone: true, selector: "ol-button", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, pill: { classPropertyName: "pill", publicName: "pill", isSignal: true, isRequired: false, transformFunction: null }, outline: { classPropertyName: "outline", publicName: "outline", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { btnClick: "btnClick" }, host: { classAttribute: "inline-flex shrink-0" }, ngImport: i0, template: "<button\n [type]=\"type()\"\n [disabled]=\"disabled() || loading()\"\n (click)=\"handleClick($event)\"\n [class]=\"buttonClasses()\"\n>\n @if (loading()) {\n <svg class=\"animate-spin w-4 h-4 shrink-0\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n </svg>\n }\n\n <ng-content select=\"[leftIcon]\" />\n <ng-content select=\"[logo]\" />\n <ng-content />\n <ng-content select=\"[rightIcon]\" />\n</button>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
190
|
+
}
|
|
191
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
192
|
+
type: Component,
|
|
193
|
+
args: [{ selector: 'ol-button', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
194
|
+
class: 'inline-flex shrink-0',
|
|
195
|
+
}, template: "<button\n [type]=\"type()\"\n [disabled]=\"disabled() || loading()\"\n (click)=\"handleClick($event)\"\n [class]=\"buttonClasses()\"\n>\n @if (loading()) {\n <svg class=\"animate-spin w-4 h-4 shrink-0\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n </svg>\n }\n\n <ng-content select=\"[leftIcon]\" />\n <ng-content select=\"[logo]\" />\n <ng-content />\n <ng-content select=\"[rightIcon]\" />\n</button>\n" }]
|
|
196
|
+
}], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], pill: [{ type: i0.Input, args: [{ isSignal: true, alias: "pill", required: false }] }], outline: [{ type: i0.Input, args: [{ isSignal: true, alias: "outline", required: false }] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], btnClick: [{ type: i0.Output, args: ["btnClick"] }] } });
|
|
197
|
+
|
|
198
|
+
class DownloadAppButtonComponent {
|
|
199
|
+
store = input('appstore', /* @ts-ignore */
|
|
200
|
+
...(ngDevMode ? [{ debugName: "store" }] : /* istanbul ignore next */ []));
|
|
201
|
+
theme = input('auto', /* @ts-ignore */
|
|
202
|
+
...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
|
|
203
|
+
href = input('#', /* @ts-ignore */
|
|
204
|
+
...(ngDevMode ? [{ debugName: "href" }] : /* istanbul ignore next */ []));
|
|
205
|
+
target = input('_blank', /* @ts-ignore */
|
|
206
|
+
...(ngDevMode ? [{ debugName: "target" }] : /* istanbul ignore next */ []));
|
|
207
|
+
btnClick = output();
|
|
208
|
+
buttonClasses = computed(() => {
|
|
209
|
+
const t = this.theme();
|
|
210
|
+
const classes = [
|
|
211
|
+
'inline-flex',
|
|
212
|
+
'items-center',
|
|
213
|
+
'gap-3.5',
|
|
214
|
+
'px-5',
|
|
215
|
+
'py-3',
|
|
216
|
+
'rounded-2xl',
|
|
217
|
+
'border',
|
|
218
|
+
'transition-all',
|
|
219
|
+
'duration-150',
|
|
220
|
+
'cursor-pointer',
|
|
221
|
+
'select-none',
|
|
222
|
+
'shadow-xs',
|
|
223
|
+
'focus:outline-none',
|
|
224
|
+
'focus:ring-2',
|
|
225
|
+
];
|
|
226
|
+
if (t === 'dark') {
|
|
227
|
+
classes.push('bg-[#1E293B]', 'border-[#1E293B]', 'text-white', 'hover:bg-[#0F172A]', 'focus:ring-slate-500');
|
|
228
|
+
}
|
|
229
|
+
else if (t === 'light') {
|
|
230
|
+
classes.push('bg-white', 'border-slate-200', 'text-slate-900', 'hover:bg-slate-50', 'focus:ring-slate-200');
|
|
231
|
+
}
|
|
232
|
+
else {
|
|
233
|
+
// auto mode: responsive to Tailwind dark mode class
|
|
234
|
+
classes.push('bg-white', 'border-slate-200', 'text-slate-900', 'hover:bg-slate-50', 'focus:ring-slate-200', 'dark:bg-[#1E293B]', 'dark:border-[#1E293B]', 'dark:text-white', 'dark:hover:bg-[#0F172A]', 'dark:focus:ring-slate-500');
|
|
235
|
+
}
|
|
236
|
+
return classes.join(' ');
|
|
237
|
+
}, /* @ts-ignore */
|
|
238
|
+
...(ngDevMode ? [{ debugName: "buttonClasses" }] : /* istanbul ignore next */ []));
|
|
239
|
+
handleClick(event) {
|
|
240
|
+
this.btnClick.emit(event);
|
|
241
|
+
}
|
|
242
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: DownloadAppButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
243
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: DownloadAppButtonComponent, isStandalone: true, selector: "ol-download-app-button", inputs: { store: { classPropertyName: "store", publicName: "store", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { btnClick: "btnClick" }, host: { classAttribute: "inline-block" }, ngImport: i0, template: "<a\n [href]=\"href()\"\n [target]=\"target()\"\n (click)=\"handleClick($event)\"\n [class]=\"buttonClasses()\"\n>\n @if (store() === 'appstore') {\n <!-- Apple Logo (Monochrome matching Figma) -->\n <svg class=\"w-7 h-7 shrink-0 fill-current\" viewBox=\"0 0 24 24\">\n <path d=\"M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M15.97 6.85c.62-.75 1.04-1.8 0.92-2.85-.9.04-1.98.6-2.61 1.34-.55.63-1.03 1.67-.9 2.68 1 .08 2.01-.5 2.59-1.17z\"/>\n </svg>\n <div class=\"flex flex-col items-start leading-none\">\n <span class=\"text-xs font-medium tracking-tight opacity-75 mb-1\">Download on the</span>\n <span class=\"text-base font-bold tracking-tight\">AppStore</span>\n </div>\n } @else {\n <!-- Google Play Logo (Monochrome matching Figma) -->\n <svg class=\"w-7 h-7 shrink-0 fill-current\" viewBox=\"0 0 24 24\">\n <path d=\"M3.609 1.814L13.792 12 3.61 22.186a2.03 2.03 0 0 1-.61-1.46V3.274c0-.573.228-1.096.61-1.46z\"/>\n <path d=\"M17.433 8.358L5.342.923C4.81.6 4.18.57 3.609 1.814l10.183 10.186 3.641-3.642z\"/>\n <path d=\"M17.433 15.642l-3.641-3.642L3.609 22.186c.571 1.244 1.2.1214 1.733.891l12.091-7.435z\"/>\n <path d=\"M21.144 10.638l-3.711-2.28-3.641 3.642 3.641 3.642 3.711-2.28a1.597 1.597 0 0 0 0-2.724z\"/>\n </svg>\n <div class=\"flex flex-col items-start leading-none\">\n <span class=\"text-xs font-medium tracking-tight opacity-75 mb-1\">Download on the</span>\n <span class=\"text-base font-bold tracking-tight\">Google Play</span>\n </div>\n }\n</a>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
244
|
+
}
|
|
245
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: DownloadAppButtonComponent, decorators: [{
|
|
246
|
+
type: Component,
|
|
247
|
+
args: [{ selector: 'ol-download-app-button', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
248
|
+
class: 'inline-block',
|
|
249
|
+
}, template: "<a\n [href]=\"href()\"\n [target]=\"target()\"\n (click)=\"handleClick($event)\"\n [class]=\"buttonClasses()\"\n>\n @if (store() === 'appstore') {\n <!-- Apple Logo (Monochrome matching Figma) -->\n <svg class=\"w-7 h-7 shrink-0 fill-current\" viewBox=\"0 0 24 24\">\n <path d=\"M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M15.97 6.85c.62-.75 1.04-1.8 0.92-2.85-.9.04-1.98.6-2.61 1.34-.55.63-1.03 1.67-.9 2.68 1 .08 2.01-.5 2.59-1.17z\"/>\n </svg>\n <div class=\"flex flex-col items-start leading-none\">\n <span class=\"text-xs font-medium tracking-tight opacity-75 mb-1\">Download on the</span>\n <span class=\"text-base font-bold tracking-tight\">AppStore</span>\n </div>\n } @else {\n <!-- Google Play Logo (Monochrome matching Figma) -->\n <svg class=\"w-7 h-7 shrink-0 fill-current\" viewBox=\"0 0 24 24\">\n <path d=\"M3.609 1.814L13.792 12 3.61 22.186a2.03 2.03 0 0 1-.61-1.46V3.274c0-.573.228-1.096.61-1.46z\"/>\n <path d=\"M17.433 8.358L5.342.923C4.81.6 4.18.57 3.609 1.814l10.183 10.186 3.641-3.642z\"/>\n <path d=\"M17.433 15.642l-3.641-3.642L3.609 22.186c.571 1.244 1.2.1214 1.733.891l12.091-7.435z\"/>\n <path d=\"M21.144 10.638l-3.711-2.28-3.641 3.642 3.641 3.642 3.711-2.28a1.597 1.597 0 0 0 0-2.724z\"/>\n </svg>\n <div class=\"flex flex-col items-start leading-none\">\n <span class=\"text-xs font-medium tracking-tight opacity-75 mb-1\">Download on the</span>\n <span class=\"text-base font-bold tracking-tight\">Google Play</span>\n </div>\n }\n</a>\n" }]
|
|
250
|
+
}], propDecorators: { store: [{ type: i0.Input, args: [{ isSignal: true, alias: "store", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], btnClick: [{ type: i0.Output, args: ["btnClick"] }] } });
|
|
251
|
+
|
|
252
|
+
class AlertComponent {
|
|
253
|
+
color = input('info', /* @ts-ignore */
|
|
254
|
+
...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
|
|
255
|
+
variant = input('default', /* @ts-ignore */
|
|
256
|
+
...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
257
|
+
title = input(/* @ts-ignore */
|
|
258
|
+
...(ngDevMode ? [undefined, { debugName: "title" }] : /* istanbul ignore next */ []));
|
|
259
|
+
badge = input(/* @ts-ignore */
|
|
260
|
+
...(ngDevMode ? [undefined, { debugName: "badge" }] : /* istanbul ignore next */ []));
|
|
261
|
+
icon = input(true, /* @ts-ignore */
|
|
262
|
+
...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
263
|
+
dismissible = input(false, /* @ts-ignore */
|
|
264
|
+
...(ngDevMode ? [{ debugName: "dismissible" }] : /* istanbul ignore next */ []));
|
|
265
|
+
rounded = input(true, /* @ts-ignore */
|
|
266
|
+
...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
|
|
267
|
+
border = input(true, /* @ts-ignore */
|
|
268
|
+
...(ngDevMode ? [{ debugName: "border" }] : /* istanbul ignore next */ []));
|
|
269
|
+
isVisible = model(true, /* @ts-ignore */
|
|
270
|
+
...(ngDevMode ? [{ debugName: "isVisible" }] : /* istanbul ignore next */ []));
|
|
271
|
+
dismissed = output();
|
|
272
|
+
containerClasses = computed(() => {
|
|
273
|
+
const c = this.color();
|
|
274
|
+
const v = this.variant();
|
|
275
|
+
const isBorder = this.border();
|
|
276
|
+
const isRounded = this.rounded();
|
|
277
|
+
const classes = ['relative', 'transition-all', 'duration-200'];
|
|
278
|
+
// Border and Corner radius
|
|
279
|
+
if (v === 'small') {
|
|
280
|
+
classes.push('inline-flex', 'items-center', 'p-1', 'pe-4', 'text-sm', 'rounded-full', isBorder ? 'border' : '');
|
|
281
|
+
}
|
|
282
|
+
else if (v === 'border-top') {
|
|
283
|
+
classes.push('flex', 'flex-col', 'p-4', 'border-t-4', isRounded ? 'rounded-b-xl rounded-t-none' : '');
|
|
284
|
+
}
|
|
285
|
+
else if (v === 'complex') {
|
|
286
|
+
classes.push('flex', 'flex-col', 'gap-3', 'p-4', isBorder ? 'border' : '', isRounded ? 'rounded-xl' : '');
|
|
287
|
+
}
|
|
288
|
+
else {
|
|
289
|
+
// default
|
|
290
|
+
classes.push('flex', 'items-center', 'gap-3', 'p-4', isBorder ? 'border' : '', isRounded ? 'rounded-xl' : '');
|
|
291
|
+
}
|
|
292
|
+
// Color theme mappings (Using Ôn Luyện Design System tokens)
|
|
293
|
+
switch (c) {
|
|
294
|
+
case 'info':
|
|
295
|
+
classes.push('bg-brand-50', 'text-brand-900', 'border-brand-200', 'dark:bg-slate-800', 'dark:text-brand-300', 'dark:border-brand-700');
|
|
296
|
+
break;
|
|
297
|
+
case 'danger':
|
|
298
|
+
classes.push('bg-red-50', 'text-red-900', 'border-red-200', 'dark:bg-slate-800', 'dark:text-red-300', 'dark:border-red-700');
|
|
299
|
+
break;
|
|
300
|
+
case 'success':
|
|
301
|
+
classes.push('bg-green-50', 'text-green-900', 'border-green-200', 'dark:bg-slate-800', 'dark:text-green-300', 'dark:border-green-700');
|
|
302
|
+
break;
|
|
303
|
+
case 'warning':
|
|
304
|
+
classes.push('bg-orange-50', 'text-orange-900', 'border-orange-200', 'dark:bg-slate-800', 'dark:text-orange-300', 'dark:border-orange-700');
|
|
305
|
+
break;
|
|
306
|
+
case 'dark':
|
|
307
|
+
default:
|
|
308
|
+
classes.push('bg-gray-50', 'text-gray-900', 'border-gray-200', 'dark:bg-slate-800', 'dark:text-gray-200', 'dark:border-gray-700');
|
|
309
|
+
break;
|
|
310
|
+
}
|
|
311
|
+
return classes.filter(Boolean).join(' ');
|
|
312
|
+
}, /* @ts-ignore */
|
|
313
|
+
...(ngDevMode ? [{ debugName: "containerClasses" }] : /* istanbul ignore next */ []));
|
|
314
|
+
badgeClasses = computed(() => {
|
|
315
|
+
const c = this.color();
|
|
316
|
+
switch (c) {
|
|
317
|
+
case 'info':
|
|
318
|
+
return 'bg-brand-100 text-brand-700 dark:bg-brand-950 dark:text-brand-200';
|
|
319
|
+
case 'danger':
|
|
320
|
+
return 'bg-red-100 text-red-700 dark:bg-red-950 dark:text-red-200';
|
|
321
|
+
case 'success':
|
|
322
|
+
return 'bg-green-100 text-green-700 dark:bg-green-950 dark:text-green-200';
|
|
323
|
+
case 'warning':
|
|
324
|
+
return 'bg-orange-100 text-orange-700 dark:bg-orange-950 dark:text-orange-200';
|
|
325
|
+
case 'dark':
|
|
326
|
+
default:
|
|
327
|
+
return 'bg-gray-100 text-gray-900 dark:bg-gray-700 dark:text-gray-200';
|
|
328
|
+
}
|
|
329
|
+
}, /* @ts-ignore */
|
|
330
|
+
...(ngDevMode ? [{ debugName: "badgeClasses" }] : /* istanbul ignore next */ []));
|
|
331
|
+
closeButtonClasses = computed(() => {
|
|
332
|
+
const c = this.color();
|
|
333
|
+
const base = 'ms-auto inline-flex items-center justify-center p-1.5 rounded-lg focus:ring-2 cursor-pointer transition-colors duration-150';
|
|
334
|
+
switch (c) {
|
|
335
|
+
case 'info':
|
|
336
|
+
return `${base} text-brand-900 hover:bg-brand-200/50 focus:ring-brand-400 dark:text-brand-300 dark:hover:bg-brand-900/50`;
|
|
337
|
+
case 'danger':
|
|
338
|
+
return `${base} text-red-900 hover:bg-red-200/50 focus:ring-red-400 dark:text-red-300 dark:hover:bg-red-900/50`;
|
|
339
|
+
case 'success':
|
|
340
|
+
return `${base} text-green-900 hover:bg-green-200/50 focus:ring-green-400 dark:text-green-300 dark:hover:bg-green-900/50`;
|
|
341
|
+
case 'warning':
|
|
342
|
+
return `${base} text-orange-900 hover:bg-orange-200/50 focus:ring-orange-400 dark:text-orange-300 dark:hover:bg-orange-900/50`;
|
|
343
|
+
case 'dark':
|
|
344
|
+
default:
|
|
345
|
+
return `${base} text-gray-900 hover:bg-gray-200/70 focus:ring-gray-400 dark:text-gray-200 dark:hover:bg-gray-700`;
|
|
346
|
+
}
|
|
347
|
+
}, /* @ts-ignore */
|
|
348
|
+
...(ngDevMode ? [{ debugName: "closeButtonClasses" }] : /* istanbul ignore next */ []));
|
|
349
|
+
dismiss() {
|
|
350
|
+
this.isVisible.set(false);
|
|
351
|
+
this.dismissed.emit();
|
|
352
|
+
}
|
|
353
|
+
show() {
|
|
354
|
+
this.isVisible.set(true);
|
|
355
|
+
}
|
|
356
|
+
toggle() {
|
|
357
|
+
this.isVisible.update((v) => !v);
|
|
358
|
+
}
|
|
359
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
360
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: AlertComponent, isStandalone: true, selector: "ol-alert", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, border: { classPropertyName: "border", publicName: "border", isSignal: true, isRequired: false, transformFunction: null }, isVisible: { classPropertyName: "isVisible", publicName: "isVisible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isVisible: "isVisibleChange", dismissed: "dismissed" }, host: { classAttribute: "block w-full" }, ngImport: i0, template: "@if (isVisible()) {\n <div role=\"alert\" [class]=\"containerClasses()\">\n @if (variant() === 'small') {\n <!-- Small / Pill Badge Variant -->\n @if (badge()) {\n <span class=\"text-xs font-semibold px-2.5 py-1 rounded-full me-3 shrink-0\" [class]=\"badgeClasses()\">\n <ng-content select=\"[badge]\">{{ badge() }}</ng-content>\n </span>\n }\n <div class=\"text-sm font-medium flex-1 truncate\">\n <ng-content />\n </div>\n <svg class=\"w-4 h-4 ms-2 shrink-0\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M8.25 4.5l7.5 7.5-7.5 7.5\" />\n </svg>\n } @else if (variant() === 'complex') {\n <!-- Complex Alert with Header, Description and Actions -->\n <div class=\"flex items-center justify-between gap-3\">\n <div class=\"flex items-center gap-2.5\">\n @if (icon()) {\n <div class=\"shrink-0 inline-flex items-center\">\n <ng-content select=\"[icon]\" />\n @switch (color()) {\n @case ('info') {\n <svg class=\"w-5 h-5 shrink-0\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M10 11h2v5m-2 0h4m-2.592-8.5h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z\"/>\n </svg>\n }\n @case ('success') {\n <svg class=\"w-5 h-5 shrink-0\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8.5 11.5 11 14l4.5-4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z\"/>\n </svg>\n }\n @case ('danger') {\n <svg class=\"w-5 h-5 shrink-0\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 8v5m0 3h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z\"/>\n </svg>\n }\n @case ('warning') {\n <svg class=\"w-5 h-5 shrink-0\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 8v5m0 3h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z\"/>\n </svg>\n }\n @default {\n <svg class=\"w-5 h-5 shrink-0\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M10 11h2v5m-2 0h4m-2.592-8.5h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z\"/>\n </svg>\n }\n }\n </div>\n }\n @if (title()) {\n <h3 class=\"text-base font-semibold\">\n <ng-content select=\"[title]\">{{ title() }}</ng-content>\n </h3>\n }\n </div>\n\n @if (dismissible()) {\n <button\n type=\"button\"\n (click)=\"dismiss()\"\n [class]=\"closeButtonClasses()\"\n aria-label=\"Close\"\n >\n <span class=\"sr-only\">Close</span>\n <svg class=\"w-3.5 h-3.5\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 14 14\">\n <path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6\"/>\n </svg>\n </button>\n }\n </div>\n\n <!-- Alert Body -->\n <div class=\"text-sm font-normal leading-relaxed\">\n <ng-content />\n </div>\n\n <!-- Action Buttons Slot -->\n <div class=\"flex items-center gap-2 mt-1\">\n <ng-content select=\"[actions]\" />\n </div>\n } @else {\n <!-- Default & Border Top Variants -->\n <div class=\"flex items-center gap-3 w-full\">\n @if (icon()) {\n <div class=\"shrink-0 inline-flex items-center\">\n <ng-content select=\"[icon]\" />\n @switch (color()) {\n @case ('info') {\n <svg class=\"w-5 h-5 shrink-0\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M10 11h2v5m-2 0h4m-2.592-8.5h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z\"/>\n </svg>\n }\n @case ('success') {\n <svg class=\"w-5 h-5 shrink-0\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8.5 11.5 11 14l4.5-4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z\"/>\n </svg>\n }\n @case ('danger') {\n <svg class=\"w-5 h-5 shrink-0\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 8v5m0 3h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z\"/>\n </svg>\n }\n @case ('warning') {\n <svg class=\"w-5 h-5 shrink-0\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 8v5m0 3h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z\"/>\n </svg>\n }\n @default {\n <svg class=\"w-5 h-5 shrink-0\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M10 11h2v5m-2 0h4m-2.592-8.5h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z\"/>\n </svg>\n }\n }\n </div>\n }\n\n <div class=\"flex-1 text-sm font-medium\">\n @if (title()) {\n <span class=\"font-bold me-1\">{{ title() }}</span>\n }\n <ng-content />\n </div>\n\n @if (dismissible()) {\n <button\n type=\"button\"\n (click)=\"dismiss()\"\n [class]=\"closeButtonClasses()\"\n aria-label=\"Close\"\n >\n <span class=\"sr-only\">Close</span>\n <svg class=\"w-3.5 h-3.5\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 14 14\">\n <path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6\"/>\n </svg>\n </button>\n }\n </div>\n }\n </div>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
361
|
+
}
|
|
362
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: AlertComponent, decorators: [{
|
|
363
|
+
type: Component,
|
|
364
|
+
args: [{ selector: 'ol-alert', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
365
|
+
class: 'block w-full',
|
|
366
|
+
}, template: "@if (isVisible()) {\n <div role=\"alert\" [class]=\"containerClasses()\">\n @if (variant() === 'small') {\n <!-- Small / Pill Badge Variant -->\n @if (badge()) {\n <span class=\"text-xs font-semibold px-2.5 py-1 rounded-full me-3 shrink-0\" [class]=\"badgeClasses()\">\n <ng-content select=\"[badge]\">{{ badge() }}</ng-content>\n </span>\n }\n <div class=\"text-sm font-medium flex-1 truncate\">\n <ng-content />\n </div>\n <svg class=\"w-4 h-4 ms-2 shrink-0\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M8.25 4.5l7.5 7.5-7.5 7.5\" />\n </svg>\n } @else if (variant() === 'complex') {\n <!-- Complex Alert with Header, Description and Actions -->\n <div class=\"flex items-center justify-between gap-3\">\n <div class=\"flex items-center gap-2.5\">\n @if (icon()) {\n <div class=\"shrink-0 inline-flex items-center\">\n <ng-content select=\"[icon]\" />\n @switch (color()) {\n @case ('info') {\n <svg class=\"w-5 h-5 shrink-0\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M10 11h2v5m-2 0h4m-2.592-8.5h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z\"/>\n </svg>\n }\n @case ('success') {\n <svg class=\"w-5 h-5 shrink-0\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8.5 11.5 11 14l4.5-4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z\"/>\n </svg>\n }\n @case ('danger') {\n <svg class=\"w-5 h-5 shrink-0\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 8v5m0 3h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z\"/>\n </svg>\n }\n @case ('warning') {\n <svg class=\"w-5 h-5 shrink-0\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 8v5m0 3h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z\"/>\n </svg>\n }\n @default {\n <svg class=\"w-5 h-5 shrink-0\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M10 11h2v5m-2 0h4m-2.592-8.5h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z\"/>\n </svg>\n }\n }\n </div>\n }\n @if (title()) {\n <h3 class=\"text-base font-semibold\">\n <ng-content select=\"[title]\">{{ title() }}</ng-content>\n </h3>\n }\n </div>\n\n @if (dismissible()) {\n <button\n type=\"button\"\n (click)=\"dismiss()\"\n [class]=\"closeButtonClasses()\"\n aria-label=\"Close\"\n >\n <span class=\"sr-only\">Close</span>\n <svg class=\"w-3.5 h-3.5\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 14 14\">\n <path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6\"/>\n </svg>\n </button>\n }\n </div>\n\n <!-- Alert Body -->\n <div class=\"text-sm font-normal leading-relaxed\">\n <ng-content />\n </div>\n\n <!-- Action Buttons Slot -->\n <div class=\"flex items-center gap-2 mt-1\">\n <ng-content select=\"[actions]\" />\n </div>\n } @else {\n <!-- Default & Border Top Variants -->\n <div class=\"flex items-center gap-3 w-full\">\n @if (icon()) {\n <div class=\"shrink-0 inline-flex items-center\">\n <ng-content select=\"[icon]\" />\n @switch (color()) {\n @case ('info') {\n <svg class=\"w-5 h-5 shrink-0\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M10 11h2v5m-2 0h4m-2.592-8.5h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z\"/>\n </svg>\n }\n @case ('success') {\n <svg class=\"w-5 h-5 shrink-0\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8.5 11.5 11 14l4.5-4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z\"/>\n </svg>\n }\n @case ('danger') {\n <svg class=\"w-5 h-5 shrink-0\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 8v5m0 3h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z\"/>\n </svg>\n }\n @case ('warning') {\n <svg class=\"w-5 h-5 shrink-0\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 8v5m0 3h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z\"/>\n </svg>\n }\n @default {\n <svg class=\"w-5 h-5 shrink-0\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M10 11h2v5m-2 0h4m-2.592-8.5h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z\"/>\n </svg>\n }\n }\n </div>\n }\n\n <div class=\"flex-1 text-sm font-medium\">\n @if (title()) {\n <span class=\"font-bold me-1\">{{ title() }}</span>\n }\n <ng-content />\n </div>\n\n @if (dismissible()) {\n <button\n type=\"button\"\n (click)=\"dismiss()\"\n [class]=\"closeButtonClasses()\"\n aria-label=\"Close\"\n >\n <span class=\"sr-only\">Close</span>\n <svg class=\"w-3.5 h-3.5\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 14 14\">\n <path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6\"/>\n </svg>\n </button>\n }\n </div>\n }\n </div>\n}\n" }]
|
|
367
|
+
}], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], border: [{ type: i0.Input, args: [{ isSignal: true, alias: "border", required: false }] }], isVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "isVisible", required: false }] }, { type: i0.Output, args: ["isVisibleChange"] }], dismissed: [{ type: i0.Output, args: ["dismissed"] }] } });
|
|
368
|
+
|
|
369
|
+
let nextItemId = 0;
|
|
370
|
+
class AccordionItemComponent {
|
|
371
|
+
itemId = input(`ol-accordion-item-${++nextItemId}`, /* @ts-ignore */
|
|
372
|
+
...(ngDevMode ? [{ debugName: "itemId" }] : /* istanbul ignore next */ []));
|
|
373
|
+
title = input('', /* @ts-ignore */
|
|
374
|
+
...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
|
|
375
|
+
isOpen = model(false, /* @ts-ignore */
|
|
376
|
+
...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
|
|
377
|
+
opened = output();
|
|
378
|
+
closed = output();
|
|
379
|
+
parentAccordion = inject(forwardRef(() => AccordionComponent), { optional: true });
|
|
380
|
+
open() {
|
|
381
|
+
if (!this.isOpen()) {
|
|
382
|
+
this.isOpen.set(true);
|
|
383
|
+
this.opened.emit();
|
|
384
|
+
this.parentAccordion?.handleItemToggle(this);
|
|
385
|
+
}
|
|
386
|
+
}
|
|
387
|
+
close() {
|
|
388
|
+
if (this.isOpen()) {
|
|
389
|
+
this.isOpen.set(false);
|
|
390
|
+
this.closed.emit();
|
|
391
|
+
}
|
|
392
|
+
}
|
|
393
|
+
toggle() {
|
|
394
|
+
if (this.isOpen()) {
|
|
395
|
+
this.close();
|
|
396
|
+
}
|
|
397
|
+
else {
|
|
398
|
+
this.open();
|
|
399
|
+
}
|
|
400
|
+
}
|
|
401
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: AccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
402
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: AccordionItemComponent, isStandalone: true, selector: "ol-accordion-item", inputs: { itemId: { classPropertyName: "itemId", publicName: "itemId", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", opened: "opened", closed: "closed" }, host: { classAttribute: "block w-full" }, ngImport: i0, template: "<div class=\"border-b border-default last:border-b-0\">\n <button\n type=\"button\"\n (click)=\"toggle()\"\n class=\"flex items-center justify-between w-full p-5 font-medium rtl:text-right text-body hover:text-heading hover:bg-neutral-secondary-medium gap-3 transition-colors cursor-pointer\"\n [class.bg-neutral-secondary-medium]=\"isOpen()\"\n [class.text-heading]=\"isOpen()\"\n >\n <span class=\"flex items-center gap-2\">\n <ng-content select=\"[icon]\" />\n <span>{{ title() }}</span>\n </span>\n <svg\n class=\"w-5 h-5 shrink-0 transition-transform duration-200\"\n [class.rotate-180]=\"isOpen()\"\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n >\n <path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m5 15 7-7 7 7\"/>\n </svg>\n </button>\n @if (isOpen()) {\n <div class=\"p-4 md:p-5 border-t border-default text-body bg-neutral-primary\">\n <ng-content />\n </div>\n }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
403
|
+
}
|
|
404
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: AccordionItemComponent, decorators: [{
|
|
405
|
+
type: Component,
|
|
406
|
+
args: [{ selector: 'ol-accordion-item', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
407
|
+
class: 'block w-full',
|
|
408
|
+
}, template: "<div class=\"border-b border-default last:border-b-0\">\n <button\n type=\"button\"\n (click)=\"toggle()\"\n class=\"flex items-center justify-between w-full p-5 font-medium rtl:text-right text-body hover:text-heading hover:bg-neutral-secondary-medium gap-3 transition-colors cursor-pointer\"\n [class.bg-neutral-secondary-medium]=\"isOpen()\"\n [class.text-heading]=\"isOpen()\"\n >\n <span class=\"flex items-center gap-2\">\n <ng-content select=\"[icon]\" />\n <span>{{ title() }}</span>\n </span>\n <svg\n class=\"w-5 h-5 shrink-0 transition-transform duration-200\"\n [class.rotate-180]=\"isOpen()\"\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n >\n <path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m5 15 7-7 7 7\"/>\n </svg>\n </button>\n @if (isOpen()) {\n <div class=\"p-4 md:p-5 border-t border-default text-body bg-neutral-primary\">\n <ng-content />\n </div>\n }\n</div>\n" }]
|
|
409
|
+
}], propDecorators: { itemId: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemId", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }, { type: i0.Output, args: ["isOpenChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
|
|
410
|
+
|
|
411
|
+
class AccordionComponent {
|
|
412
|
+
flush = input(false, /* @ts-ignore */
|
|
413
|
+
...(ngDevMode ? [{ debugName: "flush" }] : /* istanbul ignore next */ []));
|
|
414
|
+
alwaysOpen = input(false, /* @ts-ignore */
|
|
415
|
+
...(ngDevMode ? [{ debugName: "alwaysOpen" }] : /* istanbul ignore next */ []));
|
|
416
|
+
items = contentChildren(AccordionItemComponent, /* @ts-ignore */
|
|
417
|
+
...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
|
|
418
|
+
/**
|
|
419
|
+
* Xử lý khi một item con được mở ra
|
|
420
|
+
*/
|
|
421
|
+
handleItemToggle(activeItem) {
|
|
422
|
+
if (!this.alwaysOpen() && activeItem.isOpen()) {
|
|
423
|
+
for (const item of this.items()) {
|
|
424
|
+
if (item !== activeItem && item.isOpen()) {
|
|
425
|
+
item.close();
|
|
426
|
+
}
|
|
427
|
+
}
|
|
428
|
+
}
|
|
429
|
+
}
|
|
430
|
+
getItem(indexOrId) {
|
|
431
|
+
const items = this.items();
|
|
432
|
+
if (typeof indexOrId === 'number') {
|
|
433
|
+
return items[indexOrId];
|
|
434
|
+
}
|
|
435
|
+
return items.find((item) => item.itemId() === indexOrId);
|
|
436
|
+
}
|
|
437
|
+
open(indexOrId) {
|
|
438
|
+
const item = this.getItem(indexOrId);
|
|
439
|
+
if (item) {
|
|
440
|
+
item.open();
|
|
441
|
+
}
|
|
442
|
+
}
|
|
443
|
+
close(indexOrId) {
|
|
444
|
+
const item = this.getItem(indexOrId);
|
|
445
|
+
if (item) {
|
|
446
|
+
item.close();
|
|
447
|
+
}
|
|
448
|
+
}
|
|
449
|
+
toggle(indexOrId) {
|
|
450
|
+
const item = this.getItem(indexOrId);
|
|
451
|
+
if (item) {
|
|
452
|
+
item.toggle();
|
|
453
|
+
}
|
|
454
|
+
}
|
|
455
|
+
openAll() {
|
|
456
|
+
for (const item of this.items()) {
|
|
457
|
+
item.open();
|
|
458
|
+
}
|
|
459
|
+
}
|
|
460
|
+
closeAll() {
|
|
461
|
+
for (const item of this.items()) {
|
|
462
|
+
item.close();
|
|
463
|
+
}
|
|
464
|
+
}
|
|
465
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
466
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.5", type: AccordionComponent, isStandalone: true, selector: "ol-accordion", inputs: { flush: { classPropertyName: "flush", publicName: "flush", isSignal: true, isRequired: false, transformFunction: null }, alwaysOpen: { classPropertyName: "alwaysOpen", publicName: "alwaysOpen", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block w-full" }, queries: [{ propertyName: "items", predicate: AccordionItemComponent, isSignal: true }], ngImport: i0, template: "<div class=\"overflow-hidden\" [class.rounded-base]=\"!flush()\" [class.border]=\"!flush()\" [class.border-default]=\"!flush()\" [class.shadow-xs]=\"!flush()\">\n <ng-content />\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
467
|
+
}
|
|
468
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: AccordionComponent, decorators: [{
|
|
469
|
+
type: Component,
|
|
470
|
+
args: [{ selector: 'ol-accordion', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
471
|
+
class: 'block w-full',
|
|
472
|
+
}, template: "<div class=\"overflow-hidden\" [class.rounded-base]=\"!flush()\" [class.border]=\"!flush()\" [class.border-default]=\"!flush()\" [class.shadow-xs]=\"!flush()\">\n <ng-content />\n</div>\n" }]
|
|
473
|
+
}], propDecorators: { flush: [{ type: i0.Input, args: [{ isSignal: true, alias: "flush", required: false }] }], alwaysOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "alwaysOpen", required: false }] }], items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => AccordionItemComponent), { isSignal: true }] }] } });
|
|
474
|
+
|
|
475
|
+
class ModalComponent {
|
|
476
|
+
isOpen = model(false, /* @ts-ignore */
|
|
477
|
+
...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
|
|
478
|
+
title = input('', /* @ts-ignore */
|
|
479
|
+
...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
|
|
480
|
+
size = input('md', /* @ts-ignore */
|
|
481
|
+
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
482
|
+
dismissible = input(true, /* @ts-ignore */
|
|
483
|
+
...(ngDevMode ? [{ debugName: "dismissible" }] : /* istanbul ignore next */ []));
|
|
484
|
+
backdrop = input('dynamic', /* @ts-ignore */
|
|
485
|
+
...(ngDevMode ? [{ debugName: "backdrop" }] : /* istanbul ignore next */ []));
|
|
486
|
+
placement = input('center', /* @ts-ignore */
|
|
487
|
+
...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
|
|
488
|
+
opened = output();
|
|
489
|
+
closed = output();
|
|
490
|
+
placementClasses = computed(() => {
|
|
491
|
+
switch (this.placement()) {
|
|
492
|
+
case 'top-left':
|
|
493
|
+
return 'items-start justify-start p-4';
|
|
494
|
+
case 'top-center':
|
|
495
|
+
return 'items-start justify-center p-4';
|
|
496
|
+
case 'top-right':
|
|
497
|
+
return 'items-start justify-end p-4';
|
|
498
|
+
case 'bottom-left':
|
|
499
|
+
return 'items-end justify-start p-4';
|
|
500
|
+
case 'bottom-center':
|
|
501
|
+
return 'items-end justify-center p-4';
|
|
502
|
+
case 'bottom-right':
|
|
503
|
+
return 'items-end justify-end p-4';
|
|
504
|
+
case 'center':
|
|
505
|
+
default:
|
|
506
|
+
return 'items-center justify-center p-4';
|
|
507
|
+
}
|
|
508
|
+
}, /* @ts-ignore */
|
|
509
|
+
...(ngDevMode ? [{ debugName: "placementClasses" }] : /* istanbul ignore next */ []));
|
|
510
|
+
sizeClasses = computed(() => {
|
|
511
|
+
switch (this.size()) {
|
|
512
|
+
case 'sm':
|
|
513
|
+
return 'max-w-md';
|
|
514
|
+
case 'lg':
|
|
515
|
+
return 'max-w-4xl';
|
|
516
|
+
case 'xl':
|
|
517
|
+
return 'max-w-6xl';
|
|
518
|
+
case '2xl':
|
|
519
|
+
return 'max-w-7xl';
|
|
520
|
+
case 'md':
|
|
521
|
+
default:
|
|
522
|
+
return 'max-w-2xl';
|
|
523
|
+
}
|
|
524
|
+
}, /* @ts-ignore */
|
|
525
|
+
...(ngDevMode ? [{ debugName: "sizeClasses" }] : /* istanbul ignore next */ []));
|
|
526
|
+
handleEscapeKey() {
|
|
527
|
+
if (this.isOpen() && this.dismissible()) {
|
|
528
|
+
this.hide();
|
|
529
|
+
}
|
|
530
|
+
}
|
|
531
|
+
onBackdropClick(event) {
|
|
532
|
+
if (event.target === event.currentTarget && this.backdrop() === 'dynamic' && this.dismissible()) {
|
|
533
|
+
this.hide();
|
|
534
|
+
}
|
|
535
|
+
}
|
|
536
|
+
show() {
|
|
537
|
+
if (!this.isOpen()) {
|
|
538
|
+
this.isOpen.set(true);
|
|
539
|
+
this.opened.emit();
|
|
540
|
+
}
|
|
541
|
+
}
|
|
542
|
+
hide() {
|
|
543
|
+
if (this.isOpen()) {
|
|
544
|
+
this.isOpen.set(false);
|
|
545
|
+
this.closed.emit();
|
|
546
|
+
}
|
|
547
|
+
}
|
|
548
|
+
toggle() {
|
|
549
|
+
if (this.isOpen()) {
|
|
550
|
+
this.hide();
|
|
551
|
+
}
|
|
552
|
+
else {
|
|
553
|
+
this.show();
|
|
554
|
+
}
|
|
555
|
+
}
|
|
556
|
+
isVisible() {
|
|
557
|
+
return this.isOpen();
|
|
558
|
+
}
|
|
559
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
560
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: ModalComponent, isStandalone: true, selector: "ol-modal", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, backdrop: { classPropertyName: "backdrop", publicName: "backdrop", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", opened: "opened", closed: "closed" }, host: { listeners: { "window:keydown.escape": "handleEscapeKey()" } }, ngImport: i0, template: "@if (isOpen()) {\n <div\n role=\"dialog\"\n aria-modal=\"true\"\n (click)=\"onBackdropClick($event)\"\n class=\"fixed inset-0 z-50 overflow-y-auto overflow-x-hidden flex w-full h-full bg-slate-900/60 dark:bg-slate-950/80 backdrop-blur-xs transition-opacity duration-200\"\n [class]=\"placementClasses()\"\n >\n <div\n class=\"relative w-full max-h-full transition-all duration-200 animate-in fade-in zoom-in-95\"\n [class]=\"sizeClasses()\"\n >\n <div class=\"relative bg-white dark:bg-slate-900 rounded-2xl shadow-2xl border border-slate-200/80 dark:border-slate-800 overflow-hidden\">\n @if (title() || dismissible()) {\n <div class=\"flex items-center justify-between p-5 border-b border-slate-100 dark:border-slate-800\">\n <h3 class=\"text-xl font-bold text-heading\">\n {{ title() }}\n </h3>\n @if (dismissible()) {\n <button\n type=\"button\"\n (click)=\"hide()\"\n class=\"text-slate-400 hover:text-heading hover:bg-slate-100 dark:hover:bg-slate-800 rounded-xl text-sm w-9 h-9 ms-auto inline-flex justify-center items-center cursor-pointer transition-colors\"\n aria-label=\"Close modal\"\n >\n <svg class=\"w-4 h-4\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 14 14\">\n <path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6\"/>\n </svg>\n </button>\n }\n </div>\n }\n\n <!-- Modal Body Content -->\n <div class=\"p-6 space-y-4 text-body leading-relaxed text-sm md:text-base\">\n <ng-content />\n </div>\n\n <!-- Modal Footer Actions Slot -->\n <div class=\"p-5 border-t border-slate-100 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-800/30 flex items-center justify-end gap-3\">\n <ng-content select=\"[footer]\">\n <button\n type=\"button\"\n (click)=\"hide()\"\n class=\"px-4 py-2 text-sm font-medium rounded-xl text-slate-700 bg-white border border-slate-300 hover:bg-slate-50 dark:bg-slate-800 dark:text-slate-300 dark:border-slate-700 dark:hover:bg-slate-700 cursor-pointer transition-colors\"\n >\n \u0110\u00F3ng\n </button>\n </ng-content>\n </div>\n </div>\n </div>\n </div>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
561
|
+
}
|
|
562
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: ModalComponent, decorators: [{
|
|
563
|
+
type: Component,
|
|
564
|
+
args: [{ selector: 'ol-modal', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isOpen()) {\n <div\n role=\"dialog\"\n aria-modal=\"true\"\n (click)=\"onBackdropClick($event)\"\n class=\"fixed inset-0 z-50 overflow-y-auto overflow-x-hidden flex w-full h-full bg-slate-900/60 dark:bg-slate-950/80 backdrop-blur-xs transition-opacity duration-200\"\n [class]=\"placementClasses()\"\n >\n <div\n class=\"relative w-full max-h-full transition-all duration-200 animate-in fade-in zoom-in-95\"\n [class]=\"sizeClasses()\"\n >\n <div class=\"relative bg-white dark:bg-slate-900 rounded-2xl shadow-2xl border border-slate-200/80 dark:border-slate-800 overflow-hidden\">\n @if (title() || dismissible()) {\n <div class=\"flex items-center justify-between p-5 border-b border-slate-100 dark:border-slate-800\">\n <h3 class=\"text-xl font-bold text-heading\">\n {{ title() }}\n </h3>\n @if (dismissible()) {\n <button\n type=\"button\"\n (click)=\"hide()\"\n class=\"text-slate-400 hover:text-heading hover:bg-slate-100 dark:hover:bg-slate-800 rounded-xl text-sm w-9 h-9 ms-auto inline-flex justify-center items-center cursor-pointer transition-colors\"\n aria-label=\"Close modal\"\n >\n <svg class=\"w-4 h-4\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 14 14\">\n <path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6\"/>\n </svg>\n </button>\n }\n </div>\n }\n\n <!-- Modal Body Content -->\n <div class=\"p-6 space-y-4 text-body leading-relaxed text-sm md:text-base\">\n <ng-content />\n </div>\n\n <!-- Modal Footer Actions Slot -->\n <div class=\"p-5 border-t border-slate-100 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-800/30 flex items-center justify-end gap-3\">\n <ng-content select=\"[footer]\">\n <button\n type=\"button\"\n (click)=\"hide()\"\n class=\"px-4 py-2 text-sm font-medium rounded-xl text-slate-700 bg-white border border-slate-300 hover:bg-slate-50 dark:bg-slate-800 dark:text-slate-300 dark:border-slate-700 dark:hover:bg-slate-700 cursor-pointer transition-colors\"\n >\n \u0110\u00F3ng\n </button>\n </ng-content>\n </div>\n </div>\n </div>\n </div>\n}\n" }]
|
|
565
|
+
}], propDecorators: { isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }, { type: i0.Output, args: ["isOpenChange"] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], backdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdrop", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], handleEscapeKey: [{
|
|
566
|
+
type: HostListener,
|
|
567
|
+
args: ['window:keydown.escape']
|
|
568
|
+
}] } });
|
|
569
|
+
|
|
570
|
+
let nextTabId = 0;
|
|
571
|
+
class TabItemComponent {
|
|
572
|
+
tabId = input(`ol-tab-${++nextTabId}`, /* @ts-ignore */
|
|
573
|
+
...(ngDevMode ? [{ debugName: "tabId" }] : /* istanbul ignore next */ []));
|
|
574
|
+
title = input('', /* @ts-ignore */
|
|
575
|
+
...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
|
|
576
|
+
disabled = input(false, /* @ts-ignore */
|
|
577
|
+
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
578
|
+
badge = input(/* @ts-ignore */
|
|
579
|
+
...(ngDevMode ? [undefined, { debugName: "badge" }] : /* istanbul ignore next */ []));
|
|
580
|
+
parentTabs = inject(forwardRef(() => TabsComponent), { optional: true });
|
|
581
|
+
isActive = computed(() => {
|
|
582
|
+
if (!this.parentTabs)
|
|
583
|
+
return false;
|
|
584
|
+
const active = this.parentTabs.activeTab();
|
|
585
|
+
if (typeof active === 'number') {
|
|
586
|
+
const items = this.parentTabs.items();
|
|
587
|
+
return items[active] === this;
|
|
588
|
+
}
|
|
589
|
+
return active === this.tabId();
|
|
590
|
+
}, /* @ts-ignore */
|
|
591
|
+
...(ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []));
|
|
592
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: TabItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
593
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: TabItemComponent, isStandalone: true, selector: "ol-tab-item", inputs: { tabId: { classPropertyName: "tabId", publicName: "tabId", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block w-full" }, ngImport: i0, template: "@if (isActive()) {\n <div role=\"tabpanel\" class=\"animate-in fade-in duration-200\">\n <ng-content />\n </div>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
594
|
+
}
|
|
595
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: TabItemComponent, decorators: [{
|
|
596
|
+
type: Component,
|
|
597
|
+
args: [{ selector: 'ol-tab-item', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
598
|
+
class: 'block w-full',
|
|
599
|
+
}, template: "@if (isActive()) {\n <div role=\"tabpanel\" class=\"animate-in fade-in duration-200\">\n <ng-content />\n </div>\n}\n" }]
|
|
600
|
+
}], propDecorators: { tabId: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabId", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }] } });
|
|
601
|
+
|
|
602
|
+
class TabsComponent {
|
|
603
|
+
activeTab = model(0, /* @ts-ignore */
|
|
604
|
+
...(ngDevMode ? [{ debugName: "activeTab" }] : /* istanbul ignore next */ []));
|
|
605
|
+
variant = input('underline', /* @ts-ignore */
|
|
606
|
+
...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
607
|
+
tabChange = output();
|
|
608
|
+
items = contentChildren(TabItemComponent, /* @ts-ignore */
|
|
609
|
+
...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
|
|
610
|
+
currentIndex = computed(() => {
|
|
611
|
+
const val = this.activeTab();
|
|
612
|
+
const items = this.items();
|
|
613
|
+
if (typeof val === 'number') {
|
|
614
|
+
return val;
|
|
615
|
+
}
|
|
616
|
+
const found = items.findIndex((item) => item.tabId() === val);
|
|
617
|
+
return found >= 0 ? found : 0;
|
|
618
|
+
}, /* @ts-ignore */
|
|
619
|
+
...(ngDevMode ? [{ debugName: "currentIndex" }] : /* istanbul ignore next */ []));
|
|
620
|
+
selectTab(indexOrId) {
|
|
621
|
+
const items = this.items();
|
|
622
|
+
let idx = 0;
|
|
623
|
+
if (typeof indexOrId === 'number') {
|
|
624
|
+
idx = Math.max(0, Math.min(indexOrId, items.length - 1));
|
|
625
|
+
this.activeTab.set(idx);
|
|
626
|
+
}
|
|
627
|
+
else {
|
|
628
|
+
const found = items.findIndex((item) => item.tabId() === indexOrId);
|
|
629
|
+
if (found >= 0) {
|
|
630
|
+
idx = found;
|
|
631
|
+
this.activeTab.set(indexOrId);
|
|
632
|
+
}
|
|
633
|
+
}
|
|
634
|
+
const item = items[idx];
|
|
635
|
+
if (item) {
|
|
636
|
+
this.tabChange.emit({
|
|
637
|
+
index: idx,
|
|
638
|
+
id: item.tabId(),
|
|
639
|
+
title: item.title(),
|
|
640
|
+
});
|
|
641
|
+
}
|
|
642
|
+
}
|
|
643
|
+
show(indexOrId) {
|
|
644
|
+
this.selectTab(indexOrId);
|
|
645
|
+
}
|
|
646
|
+
nextTab() {
|
|
647
|
+
const items = this.items();
|
|
648
|
+
if (items.length > 0) {
|
|
649
|
+
const next = (this.currentIndex() + 1) % items.length;
|
|
650
|
+
this.selectTab(next);
|
|
651
|
+
}
|
|
652
|
+
}
|
|
653
|
+
prevTab() {
|
|
654
|
+
const items = this.items();
|
|
655
|
+
if (items.length > 0) {
|
|
656
|
+
const prev = (this.currentIndex() - 1 + items.length) % items.length;
|
|
657
|
+
this.selectTab(prev);
|
|
658
|
+
}
|
|
659
|
+
}
|
|
660
|
+
getActiveTab() {
|
|
661
|
+
return this.items()[this.currentIndex()];
|
|
662
|
+
}
|
|
663
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
664
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: TabsComponent, isStandalone: true, selector: "ol-tabs", inputs: { activeTab: { classPropertyName: "activeTab", publicName: "activeTab", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeTab: "activeTabChange", tabChange: "tabChange" }, host: { classAttribute: "block w-full" }, queries: [{ propertyName: "items", predicate: TabItemComponent, isSignal: true }], ngImport: i0, template: "<div>\n <!-- Tab Headers Navigation -->\n <div\n class=\"text-sm font-medium text-center\"\n [class.border-b]=\"variant() === 'underline'\"\n [class.border-slate-200]=\"variant() === 'underline'\"\n [class.dark:border-slate-800]=\"variant() === 'underline'\"\n >\n <ul class=\"flex flex-wrap -mb-px gap-2\" role=\"tablist\">\n @if (items().length > 0) {\n @for (item of items(); track item.tabId(); let i = $index) {\n <li role=\"presentation\">\n <button\n type=\"button\"\n role=\"tab\"\n [disabled]=\"item.disabled()\"\n (click)=\"selectTab(i)\"\n class=\"inline-flex items-center gap-2 px-4 py-3 font-semibold transition-all duration-150 cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed\"\n [class.text-brand-600]=\"item.isActive() && variant() === 'underline'\"\n [class.border-b-2]=\"item.isActive() && variant() === 'underline'\"\n [class.border-brand-600]=\"item.isActive() && variant() === 'underline'\"\n [class.dark:text-brand-400]=\"item.isActive() && variant() === 'underline'\"\n [class.dark:border-brand-400]=\"item.isActive() && variant() === 'underline'\"\n [class.text-slate-500]=\"!item.isActive() && variant() === 'underline'\"\n [class.hover:text-heading]=\"!item.isActive() && variant() === 'underline'\"\n [class.hover:border-slate-300]=\"!item.isActive() && variant() === 'underline'\"\n [class.border-transparent]=\"!item.isActive() && variant() === 'underline'\"\n [class.bg-brand-600]=\"item.isActive() && variant() === 'pills'\"\n [class.text-white]=\"item.isActive() && variant() === 'pills'\"\n [class.rounded-xl]=\"variant() === 'pills'\"\n [class.bg-slate-100]=\"!item.isActive() && variant() === 'pills'\"\n [class.dark:bg-slate-800]=\"!item.isActive() && variant() === 'pills'\"\n [class.text-slate-600]=\"!item.isActive() && variant() === 'pills'\"\n [class.dark:text-slate-300]=\"!item.isActive() && variant() === 'pills'\"\n [class.hover:bg-slate-200]=\"!item.isActive() && variant() === 'pills'\"\n [class.dark:hover:bg-slate-700]=\"!item.isActive() && variant() === 'pills'\"\n >\n <span>{{ item.title() }}</span>\n @if (item.badge()) {\n <span\n class=\"px-2 py-0.5 text-xs font-bold rounded-full\"\n [class.bg-brand-100]=\"!item.isActive()\"\n [class.text-brand-700]=\"!item.isActive()\"\n [class.dark:bg-brand-950]=\"!item.isActive()\"\n [class.dark:text-brand-300]=\"!item.isActive()\"\n [class.bg-white/20]=\"item.isActive()\"\n [class.text-white]=\"item.isActive()\"\n >\n {{ item.badge() }}\n </span>\n }\n </button>\n </li>\n }\n } @else {\n <ng-content select=\"[tab-headers]\" />\n }\n </ul>\n </div>\n\n <!-- Tab Contents Area -->\n <div class=\"py-4\">\n <ng-content />\n </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
665
|
+
}
|
|
666
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: TabsComponent, decorators: [{
|
|
667
|
+
type: Component,
|
|
668
|
+
args: [{ selector: 'ol-tabs', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
669
|
+
class: 'block w-full',
|
|
670
|
+
}, template: "<div>\n <!-- Tab Headers Navigation -->\n <div\n class=\"text-sm font-medium text-center\"\n [class.border-b]=\"variant() === 'underline'\"\n [class.border-slate-200]=\"variant() === 'underline'\"\n [class.dark:border-slate-800]=\"variant() === 'underline'\"\n >\n <ul class=\"flex flex-wrap -mb-px gap-2\" role=\"tablist\">\n @if (items().length > 0) {\n @for (item of items(); track item.tabId(); let i = $index) {\n <li role=\"presentation\">\n <button\n type=\"button\"\n role=\"tab\"\n [disabled]=\"item.disabled()\"\n (click)=\"selectTab(i)\"\n class=\"inline-flex items-center gap-2 px-4 py-3 font-semibold transition-all duration-150 cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed\"\n [class.text-brand-600]=\"item.isActive() && variant() === 'underline'\"\n [class.border-b-2]=\"item.isActive() && variant() === 'underline'\"\n [class.border-brand-600]=\"item.isActive() && variant() === 'underline'\"\n [class.dark:text-brand-400]=\"item.isActive() && variant() === 'underline'\"\n [class.dark:border-brand-400]=\"item.isActive() && variant() === 'underline'\"\n [class.text-slate-500]=\"!item.isActive() && variant() === 'underline'\"\n [class.hover:text-heading]=\"!item.isActive() && variant() === 'underline'\"\n [class.hover:border-slate-300]=\"!item.isActive() && variant() === 'underline'\"\n [class.border-transparent]=\"!item.isActive() && variant() === 'underline'\"\n [class.bg-brand-600]=\"item.isActive() && variant() === 'pills'\"\n [class.text-white]=\"item.isActive() && variant() === 'pills'\"\n [class.rounded-xl]=\"variant() === 'pills'\"\n [class.bg-slate-100]=\"!item.isActive() && variant() === 'pills'\"\n [class.dark:bg-slate-800]=\"!item.isActive() && variant() === 'pills'\"\n [class.text-slate-600]=\"!item.isActive() && variant() === 'pills'\"\n [class.dark:text-slate-300]=\"!item.isActive() && variant() === 'pills'\"\n [class.hover:bg-slate-200]=\"!item.isActive() && variant() === 'pills'\"\n [class.dark:hover:bg-slate-700]=\"!item.isActive() && variant() === 'pills'\"\n >\n <span>{{ item.title() }}</span>\n @if (item.badge()) {\n <span\n class=\"px-2 py-0.5 text-xs font-bold rounded-full\"\n [class.bg-brand-100]=\"!item.isActive()\"\n [class.text-brand-700]=\"!item.isActive()\"\n [class.dark:bg-brand-950]=\"!item.isActive()\"\n [class.dark:text-brand-300]=\"!item.isActive()\"\n [class.bg-white/20]=\"item.isActive()\"\n [class.text-white]=\"item.isActive()\"\n >\n {{ item.badge() }}\n </span>\n }\n </button>\n </li>\n }\n } @else {\n <ng-content select=\"[tab-headers]\" />\n }\n </ul>\n </div>\n\n <!-- Tab Contents Area -->\n <div class=\"py-4\">\n <ng-content />\n </div>\n</div>\n" }]
|
|
671
|
+
}], propDecorators: { activeTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTab", required: false }] }, { type: i0.Output, args: ["activeTabChange"] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], tabChange: [{ type: i0.Output, args: ["tabChange"] }], items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TabItemComponent), { isSignal: true }] }] } });
|
|
672
|
+
|
|
673
|
+
class DropdownComponent {
|
|
674
|
+
elementRef = inject(ElementRef);
|
|
675
|
+
label = input('Dropdown button', /* @ts-ignore */
|
|
676
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
677
|
+
isOpen = model(false, /* @ts-ignore */
|
|
678
|
+
...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
|
|
679
|
+
placement = input('bottom-start', /* @ts-ignore */
|
|
680
|
+
...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
|
|
681
|
+
trigger = input('click', /* @ts-ignore */
|
|
682
|
+
...(ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []));
|
|
683
|
+
opened = output();
|
|
684
|
+
closed = output();
|
|
685
|
+
menuPlacementClasses = computed(() => {
|
|
686
|
+
switch (this.placement()) {
|
|
687
|
+
case 'top':
|
|
688
|
+
case 'top-start':
|
|
689
|
+
return 'bottom-full left-0 mb-2';
|
|
690
|
+
case 'top-end':
|
|
691
|
+
return 'bottom-full right-0 mb-2';
|
|
692
|
+
case 'left':
|
|
693
|
+
return 'right-full top-0 me-2';
|
|
694
|
+
case 'right':
|
|
695
|
+
return 'left-full top-0 ms-2';
|
|
696
|
+
case 'bottom-end':
|
|
697
|
+
return 'top-full right-0 mt-2';
|
|
698
|
+
case 'bottom':
|
|
699
|
+
case 'bottom-start':
|
|
700
|
+
default:
|
|
701
|
+
return 'top-full left-0 mt-2';
|
|
702
|
+
}
|
|
703
|
+
}, /* @ts-ignore */
|
|
704
|
+
...(ngDevMode ? [{ debugName: "menuPlacementClasses" }] : /* istanbul ignore next */ []));
|
|
705
|
+
onDocumentClick(event) {
|
|
706
|
+
if (!this.isOpen())
|
|
707
|
+
return;
|
|
708
|
+
if (!this.elementRef.nativeElement.contains(event.target)) {
|
|
709
|
+
this.hide();
|
|
710
|
+
}
|
|
711
|
+
}
|
|
712
|
+
onEscape() {
|
|
713
|
+
if (this.isOpen()) {
|
|
714
|
+
this.hide();
|
|
715
|
+
}
|
|
716
|
+
}
|
|
717
|
+
onMouseEnter() {
|
|
718
|
+
if (this.trigger() === 'hover') {
|
|
719
|
+
this.show();
|
|
720
|
+
}
|
|
721
|
+
}
|
|
722
|
+
onMouseLeave() {
|
|
723
|
+
if (this.trigger() === 'hover') {
|
|
724
|
+
this.hide();
|
|
725
|
+
}
|
|
726
|
+
}
|
|
727
|
+
show() {
|
|
728
|
+
if (!this.isOpen()) {
|
|
729
|
+
this.isOpen.set(true);
|
|
730
|
+
this.opened.emit();
|
|
731
|
+
}
|
|
732
|
+
}
|
|
733
|
+
hide() {
|
|
734
|
+
if (this.isOpen()) {
|
|
735
|
+
this.isOpen.set(false);
|
|
736
|
+
this.closed.emit();
|
|
737
|
+
}
|
|
738
|
+
}
|
|
739
|
+
toggle() {
|
|
740
|
+
if (this.isOpen()) {
|
|
741
|
+
this.hide();
|
|
742
|
+
}
|
|
743
|
+
else {
|
|
744
|
+
this.show();
|
|
745
|
+
}
|
|
746
|
+
}
|
|
747
|
+
isVisible() {
|
|
748
|
+
return this.isOpen();
|
|
749
|
+
}
|
|
750
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
751
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: DropdownComponent, isStandalone: true, selector: "ol-dropdown", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", opened: "opened", closed: "closed" }, host: { listeners: { "document:click": "onDocumentClick($event)", "window:keydown.escape": "onEscape()" }, classAttribute: "relative inline-block text-left" }, ngImport: i0, template: "<div (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\n <button\n type=\"button\"\n (click)=\"toggle()\"\n class=\"text-white bg-brand-600 hover:bg-brand-700 focus:ring-4 focus:outline-none focus:ring-brand-300 font-semibold rounded-xl text-sm px-5 py-2.5 text-center inline-flex items-center gap-2 cursor-pointer transition-colors shadow-xs\"\n >\n <span>{{ label() }}</span>\n <svg\n class=\"w-3 h-3 shrink-0 transition-transform duration-200\"\n [class.rotate-180]=\"isOpen()\"\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 10 6\"\n >\n <path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m1 1 4 4 4-4\"/>\n </svg>\n </button>\n\n @if (isOpen()) {\n <div\n class=\"z-50 absolute min-w-[12rem] bg-white dark:bg-slate-900 divide-y divide-slate-100 dark:divide-slate-800 rounded-xl shadow-xl border border-slate-200/80 dark:border-slate-800 animate-in fade-in zoom-in-95 duration-150\"\n [class]=\"menuPlacementClasses()\"\n >\n <ul class=\"py-2 text-sm text-slate-700 dark:text-slate-200\">\n <ng-content />\n </ul>\n </div>\n }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
752
|
+
}
|
|
753
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: DropdownComponent, decorators: [{
|
|
754
|
+
type: Component,
|
|
755
|
+
args: [{ selector: 'ol-dropdown', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
756
|
+
class: 'relative inline-block text-left',
|
|
757
|
+
}, template: "<div (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\n <button\n type=\"button\"\n (click)=\"toggle()\"\n class=\"text-white bg-brand-600 hover:bg-brand-700 focus:ring-4 focus:outline-none focus:ring-brand-300 font-semibold rounded-xl text-sm px-5 py-2.5 text-center inline-flex items-center gap-2 cursor-pointer transition-colors shadow-xs\"\n >\n <span>{{ label() }}</span>\n <svg\n class=\"w-3 h-3 shrink-0 transition-transform duration-200\"\n [class.rotate-180]=\"isOpen()\"\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 10 6\"\n >\n <path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m1 1 4 4 4-4\"/>\n </svg>\n </button>\n\n @if (isOpen()) {\n <div\n class=\"z-50 absolute min-w-[12rem] bg-white dark:bg-slate-900 divide-y divide-slate-100 dark:divide-slate-800 rounded-xl shadow-xl border border-slate-200/80 dark:border-slate-800 animate-in fade-in zoom-in-95 duration-150\"\n [class]=\"menuPlacementClasses()\"\n >\n <ul class=\"py-2 text-sm text-slate-700 dark:text-slate-200\">\n <ng-content />\n </ul>\n </div>\n }\n</div>\n" }]
|
|
758
|
+
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }, { type: i0.Output, args: ["isOpenChange"] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], trigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "trigger", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], onDocumentClick: [{
|
|
759
|
+
type: HostListener,
|
|
760
|
+
args: ['document:click', ['$event']]
|
|
761
|
+
}], onEscape: [{
|
|
762
|
+
type: HostListener,
|
|
763
|
+
args: ['window:keydown.escape']
|
|
764
|
+
}] } });
|
|
765
|
+
|
|
766
|
+
class DropdownItemComponent {
|
|
767
|
+
href = input(null, /* @ts-ignore */
|
|
768
|
+
...(ngDevMode ? [{ debugName: "href" }] : /* istanbul ignore next */ []));
|
|
769
|
+
itemClick = output();
|
|
770
|
+
handleClick(event) {
|
|
771
|
+
this.itemClick.emit(event);
|
|
772
|
+
}
|
|
773
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: DropdownItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
774
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: DropdownItemComponent, isStandalone: true, selector: "ol-dropdown-item", inputs: { href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: "<li>\n @if (href()) {\n <a [href]=\"href()\" class=\"block px-4 py-2 hover:bg-slate-100 dark:hover:bg-slate-800 text-slate-700 dark:text-slate-200 transition-colors font-medium\">\n <ng-content />\n </a>\n } @else {\n <button\n type=\"button\"\n (click)=\"handleClick($event)\"\n class=\"block w-full text-left px-4 py-2 hover:bg-slate-100 dark:hover:bg-slate-800 text-slate-700 dark:text-slate-200 transition-colors cursor-pointer font-medium\"\n >\n <ng-content />\n </button>\n }\n</li>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
775
|
+
}
|
|
776
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: DropdownItemComponent, decorators: [{
|
|
777
|
+
type: Component,
|
|
778
|
+
args: [{ selector: 'ol-dropdown-item', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<li>\n @if (href()) {\n <a [href]=\"href()\" class=\"block px-4 py-2 hover:bg-slate-100 dark:hover:bg-slate-800 text-slate-700 dark:text-slate-200 transition-colors font-medium\">\n <ng-content />\n </a>\n } @else {\n <button\n type=\"button\"\n (click)=\"handleClick($event)\"\n class=\"block w-full text-left px-4 py-2 hover:bg-slate-100 dark:hover:bg-slate-800 text-slate-700 dark:text-slate-200 transition-colors cursor-pointer font-medium\"\n >\n <ng-content />\n </button>\n }\n</li>\n" }]
|
|
779
|
+
}], propDecorators: { href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] } });
|
|
780
|
+
|
|
781
|
+
class TooltipComponent {
|
|
782
|
+
content = input('', /* @ts-ignore */
|
|
783
|
+
...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
|
|
784
|
+
placement = input('top', /* @ts-ignore */
|
|
785
|
+
...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
|
|
786
|
+
trigger = input('hover', /* @ts-ignore */
|
|
787
|
+
...(ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []));
|
|
788
|
+
theme = input('dark', /* @ts-ignore */
|
|
789
|
+
...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
|
|
790
|
+
isVisible = signal(false, /* @ts-ignore */
|
|
791
|
+
...(ngDevMode ? [{ debugName: "isVisible" }] : /* istanbul ignore next */ []));
|
|
792
|
+
opened = output();
|
|
793
|
+
closed = output();
|
|
794
|
+
tooltipPositionClasses = computed(() => {
|
|
795
|
+
switch (this.placement()) {
|
|
796
|
+
case 'bottom':
|
|
797
|
+
return 'top-full left-1/2 -translate-x-1/2 mt-2';
|
|
798
|
+
case 'left':
|
|
799
|
+
return 'right-full top-1/2 -translate-y-1/2 me-2';
|
|
800
|
+
case 'right':
|
|
801
|
+
return 'left-full top-1/2 -translate-y-1/2 ms-2';
|
|
802
|
+
case 'top':
|
|
803
|
+
default:
|
|
804
|
+
return 'bottom-full left-1/2 -translate-x-1/2 mb-2';
|
|
805
|
+
}
|
|
806
|
+
}, /* @ts-ignore */
|
|
807
|
+
...(ngDevMode ? [{ debugName: "tooltipPositionClasses" }] : /* istanbul ignore next */ []));
|
|
808
|
+
tooltipThemeClasses = computed(() => {
|
|
809
|
+
if (this.theme() === 'light') {
|
|
810
|
+
return 'bg-white text-slate-900 border border-slate-200 shadow-lg dark:bg-slate-800 dark:text-slate-100 dark:border-slate-700';
|
|
811
|
+
}
|
|
812
|
+
return 'bg-slate-900 text-white shadow-md dark:bg-slate-700';
|
|
813
|
+
}, /* @ts-ignore */
|
|
814
|
+
...(ngDevMode ? [{ debugName: "tooltipThemeClasses" }] : /* istanbul ignore next */ []));
|
|
815
|
+
onMouseEnter() {
|
|
816
|
+
if (this.trigger() === 'hover') {
|
|
817
|
+
this.show();
|
|
818
|
+
}
|
|
819
|
+
}
|
|
820
|
+
onMouseLeave() {
|
|
821
|
+
if (this.trigger() === 'hover') {
|
|
822
|
+
this.hide();
|
|
823
|
+
}
|
|
824
|
+
}
|
|
825
|
+
onClick() {
|
|
826
|
+
if (this.trigger() === 'click') {
|
|
827
|
+
this.toggle();
|
|
828
|
+
}
|
|
829
|
+
}
|
|
830
|
+
show() {
|
|
831
|
+
if (!this.isVisible()) {
|
|
832
|
+
this.isVisible.set(true);
|
|
833
|
+
this.opened.emit();
|
|
834
|
+
}
|
|
835
|
+
}
|
|
836
|
+
hide() {
|
|
837
|
+
if (this.isVisible()) {
|
|
838
|
+
this.isVisible.set(false);
|
|
839
|
+
this.closed.emit();
|
|
840
|
+
}
|
|
841
|
+
}
|
|
842
|
+
toggle() {
|
|
843
|
+
if (this.isVisible()) {
|
|
844
|
+
this.hide();
|
|
845
|
+
}
|
|
846
|
+
else {
|
|
847
|
+
this.show();
|
|
848
|
+
}
|
|
849
|
+
}
|
|
850
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
851
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: TooltipComponent, isStandalone: true, selector: "ol-tooltip", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed" }, host: { classAttribute: "relative inline-block" }, ngImport: i0, template: "<div\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n (click)=\"onClick()\"\n class=\"relative inline-block\"\n>\n <ng-content />\n\n @if (isVisible()) {\n <div\n role=\"tooltip\"\n class=\"absolute z-50 px-3 py-1.5 text-xs font-semibold rounded-lg whitespace-nowrap transition-all animate-in fade-in zoom-in-95 duration-150 pointer-events-none\"\n [class]=\"tooltipPositionClasses()\"\n [class]=\"tooltipThemeClasses()\"\n >\n {{ content() }}\n </div>\n }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
852
|
+
}
|
|
853
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: TooltipComponent, decorators: [{
|
|
854
|
+
type: Component,
|
|
855
|
+
args: [{ selector: 'ol-tooltip', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
856
|
+
class: 'relative inline-block',
|
|
857
|
+
}, template: "<div\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n (click)=\"onClick()\"\n class=\"relative inline-block\"\n>\n <ng-content />\n\n @if (isVisible()) {\n <div\n role=\"tooltip\"\n class=\"absolute z-50 px-3 py-1.5 text-xs font-semibold rounded-lg whitespace-nowrap transition-all animate-in fade-in zoom-in-95 duration-150 pointer-events-none\"\n [class]=\"tooltipPositionClasses()\"\n [class]=\"tooltipThemeClasses()\"\n >\n {{ content() }}\n </div>\n }\n</div>\n" }]
|
|
858
|
+
}], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], trigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "trigger", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
|
|
859
|
+
|
|
860
|
+
class ToastComponent {
|
|
861
|
+
type = input('default', /* @ts-ignore */
|
|
862
|
+
...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
|
|
863
|
+
dismissible = input(true, /* @ts-ignore */
|
|
864
|
+
...(ngDevMode ? [{ debugName: "dismissible" }] : /* istanbul ignore next */ []));
|
|
865
|
+
duration = input(0, /* @ts-ignore */
|
|
866
|
+
...(ngDevMode ? [{ debugName: "duration" }] : /* istanbul ignore next */ [])); // 0 = no auto-dismiss
|
|
867
|
+
isVisible = model(true, /* @ts-ignore */
|
|
868
|
+
...(ngDevMode ? [{ debugName: "isVisible" }] : /* istanbul ignore next */ []));
|
|
869
|
+
closed = output();
|
|
870
|
+
timerId = null;
|
|
871
|
+
constructor() {
|
|
872
|
+
effect(() => {
|
|
873
|
+
const dur = this.duration();
|
|
874
|
+
const visible = this.isVisible();
|
|
875
|
+
if (visible && dur > 0) {
|
|
876
|
+
this.clearTimer();
|
|
877
|
+
this.timerId = setTimeout(() => {
|
|
878
|
+
this.dismiss();
|
|
879
|
+
}, dur);
|
|
880
|
+
}
|
|
881
|
+
});
|
|
882
|
+
}
|
|
883
|
+
ngOnDestroy() {
|
|
884
|
+
this.clearTimer();
|
|
885
|
+
}
|
|
886
|
+
clearTimer() {
|
|
887
|
+
if (this.timerId) {
|
|
888
|
+
clearTimeout(this.timerId);
|
|
889
|
+
this.timerId = null;
|
|
890
|
+
}
|
|
891
|
+
}
|
|
892
|
+
iconContainerClasses = computed(() => {
|
|
893
|
+
switch (this.type()) {
|
|
894
|
+
case 'success':
|
|
895
|
+
return 'bg-emerald-100 text-emerald-600 dark:bg-emerald-950 dark:text-emerald-300';
|
|
896
|
+
case 'danger':
|
|
897
|
+
return 'bg-rose-100 text-rose-600 dark:bg-rose-950 dark:text-rose-300';
|
|
898
|
+
case 'warning':
|
|
899
|
+
return 'bg-amber-100 text-amber-600 dark:bg-amber-950 dark:text-amber-300';
|
|
900
|
+
case 'info':
|
|
901
|
+
return 'bg-brand-100 text-brand-600 dark:bg-brand-950 dark:text-brand-300';
|
|
902
|
+
case 'default':
|
|
903
|
+
default:
|
|
904
|
+
return 'bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-300';
|
|
905
|
+
}
|
|
906
|
+
}, /* @ts-ignore */
|
|
907
|
+
...(ngDevMode ? [{ debugName: "iconContainerClasses" }] : /* istanbul ignore next */ []));
|
|
908
|
+
dismiss() {
|
|
909
|
+
this.clearTimer();
|
|
910
|
+
this.isVisible.set(false);
|
|
911
|
+
this.closed.emit();
|
|
912
|
+
}
|
|
913
|
+
show() {
|
|
914
|
+
this.isVisible.set(true);
|
|
915
|
+
}
|
|
916
|
+
toggle() {
|
|
917
|
+
if (this.isVisible()) {
|
|
918
|
+
this.dismiss();
|
|
919
|
+
}
|
|
920
|
+
else {
|
|
921
|
+
this.show();
|
|
922
|
+
}
|
|
923
|
+
}
|
|
924
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
925
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: ToastComponent, isStandalone: true, selector: "ol-toast", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, isVisible: { classPropertyName: "isVisible", publicName: "isVisible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isVisible: "isVisibleChange", closed: "closed" }, host: { classAttribute: "block" }, ngImport: i0, template: "@if (isVisible()) {\n <div\n role=\"alert\"\n class=\"flex items-center w-full max-w-sm p-4 text-slate-700 dark:text-slate-200 bg-white dark:bg-slate-900 rounded-2xl shadow-xl border border-slate-200/80 dark:border-slate-800 animate-in fade-in slide-in-from-bottom-2 duration-200\"\n >\n @if (type() !== 'default') {\n <div class=\"inline-flex items-center justify-center shrink-0 w-8 h-8 rounded-xl me-3\" [class]=\"iconContainerClasses()\">\n @switch (type()) {\n @case ('success') {\n <svg class=\"w-4 h-4\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\" />\n </svg>\n }\n @case ('danger') {\n <svg class=\"w-4 h-4\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n </svg>\n }\n @case ('warning') {\n <svg class=\"w-4 h-4\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z\" />\n </svg>\n }\n @case ('info') {\n <svg class=\"w-4 h-4\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z\" />\n </svg>\n }\n }\n </div>\n }\n\n <!-- Toast Body -->\n <div class=\"text-sm font-medium flex-1\">\n <ng-content />\n </div>\n\n @if (dismissible()) {\n <button\n type=\"button\"\n (click)=\"dismiss()\"\n class=\"ms-auto -mx-1.5 -my-1.5 bg-transparent text-slate-400 hover:text-heading rounded-xl p-1.5 hover:bg-slate-100 dark:hover:bg-slate-800 inline-flex items-center justify-center h-8 w-8 cursor-pointer transition-colors\"\n aria-label=\"Close\"\n >\n <span class=\"sr-only\">Close</span>\n <svg class=\"w-3.5 h-3.5\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 14 14\">\n <path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6\"/>\n </svg>\n </button>\n }\n </div>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
926
|
+
}
|
|
927
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: ToastComponent, decorators: [{
|
|
928
|
+
type: Component,
|
|
929
|
+
args: [{ selector: 'ol-toast', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
930
|
+
class: 'block',
|
|
931
|
+
}, template: "@if (isVisible()) {\n <div\n role=\"alert\"\n class=\"flex items-center w-full max-w-sm p-4 text-slate-700 dark:text-slate-200 bg-white dark:bg-slate-900 rounded-2xl shadow-xl border border-slate-200/80 dark:border-slate-800 animate-in fade-in slide-in-from-bottom-2 duration-200\"\n >\n @if (type() !== 'default') {\n <div class=\"inline-flex items-center justify-center shrink-0 w-8 h-8 rounded-xl me-3\" [class]=\"iconContainerClasses()\">\n @switch (type()) {\n @case ('success') {\n <svg class=\"w-4 h-4\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\" />\n </svg>\n }\n @case ('danger') {\n <svg class=\"w-4 h-4\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n </svg>\n }\n @case ('warning') {\n <svg class=\"w-4 h-4\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z\" />\n </svg>\n }\n @case ('info') {\n <svg class=\"w-4 h-4\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z\" />\n </svg>\n }\n }\n </div>\n }\n\n <!-- Toast Body -->\n <div class=\"text-sm font-medium flex-1\">\n <ng-content />\n </div>\n\n @if (dismissible()) {\n <button\n type=\"button\"\n (click)=\"dismiss()\"\n class=\"ms-auto -mx-1.5 -my-1.5 bg-transparent text-slate-400 hover:text-heading rounded-xl p-1.5 hover:bg-slate-100 dark:hover:bg-slate-800 inline-flex items-center justify-center h-8 w-8 cursor-pointer transition-colors\"\n aria-label=\"Close\"\n >\n <span class=\"sr-only\">Close</span>\n <svg class=\"w-3.5 h-3.5\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 14 14\">\n <path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6\"/>\n </svg>\n </button>\n }\n </div>\n}\n" }]
|
|
932
|
+
}], ctorParameters: () => [], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], duration: [{ type: i0.Input, args: [{ isSignal: true, alias: "duration", required: false }] }], isVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "isVisible", required: false }] }, { type: i0.Output, args: ["isVisibleChange"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
|
|
933
|
+
|
|
934
|
+
/*
|
|
935
|
+
* Public API Surface of @edmicro/olkit
|
|
936
|
+
* Ôn Luyện Design System for Angular
|
|
937
|
+
*/
|
|
938
|
+
// Button Components & Types (Figma 2542:21012)
|
|
939
|
+
|
|
940
|
+
/**
|
|
941
|
+
* Generated bundle index. Do not edit.
|
|
942
|
+
*/
|
|
943
|
+
|
|
944
|
+
export { AccordionComponent, AccordionItemComponent, AlertComponent, ButtonComponent, DownloadAppButtonComponent, DropdownComponent, DropdownItemComponent, ModalComponent, TabItemComponent, TabsComponent, ToastComponent, TooltipComponent };
|
|
945
|
+
//# sourceMappingURL=edmicro-olkit.mjs.map
|