@wdcoders/ui-ng 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +64 -0
- package/fesm2022/wdcoders-ui-ng.mjs +718 -0
- package/fesm2022/wdcoders-ui-ng.mjs.map +1 -0
- package/package.json +28 -0
- package/types/wdcoders-ui-ng.d.ts +258 -0
|
@@ -0,0 +1,718 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { input, computed, Component, output, TemplateRef, ChangeDetectionStrategy, signal, Input, model, contentChildren, effect, Injectable, inject } from '@angular/core';
|
|
3
|
+
import * as i1 from '@angular/common';
|
|
4
|
+
import { CommonModule } from '@angular/common';
|
|
5
|
+
|
|
6
|
+
class SpinnerComponent {
|
|
7
|
+
size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
8
|
+
color = input('current', ...(ngDevMode ? [{ debugName: "color" }] : []));
|
|
9
|
+
classes = computed(() => {
|
|
10
|
+
let sizeClass = 'w-5 h-5';
|
|
11
|
+
switch (this.size()) {
|
|
12
|
+
case 'sm':
|
|
13
|
+
sizeClass = 'w-4 h-4';
|
|
14
|
+
break;
|
|
15
|
+
case 'md':
|
|
16
|
+
sizeClass = 'w-5 h-5';
|
|
17
|
+
break;
|
|
18
|
+
case 'lg':
|
|
19
|
+
sizeClass = 'w-8 h-8';
|
|
20
|
+
break;
|
|
21
|
+
}
|
|
22
|
+
let colorClass = 'text-current';
|
|
23
|
+
switch (this.color()) {
|
|
24
|
+
case 'primary':
|
|
25
|
+
colorClass = 'text-blue-600';
|
|
26
|
+
break;
|
|
27
|
+
case 'white':
|
|
28
|
+
colorClass = 'text-white';
|
|
29
|
+
break;
|
|
30
|
+
}
|
|
31
|
+
return `${sizeClass} ${colorClass} animate-spin`;
|
|
32
|
+
}, ...(ngDevMode ? [{ debugName: "classes" }] : []));
|
|
33
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
34
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.5", type: SpinnerComponent, isStandalone: true, selector: "wdc-spinner", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<svg [class]=\"classes()\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\r\n <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\r\n <path\r\n class=\"opacity-75\"\r\n fill=\"currentColor\"\r\n 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\"\r\n ></path>\r\n</svg>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
35
|
+
}
|
|
36
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: SpinnerComponent, decorators: [{
|
|
37
|
+
type: Component,
|
|
38
|
+
args: [{ selector: 'wdc-spinner', standalone: true, imports: [CommonModule], template: "<svg [class]=\"classes()\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\r\n <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\r\n <path\r\n class=\"opacity-75\"\r\n fill=\"currentColor\"\r\n 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\"\r\n ></path>\r\n</svg>\r\n" }]
|
|
39
|
+
}], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
|
|
40
|
+
|
|
41
|
+
class ButtonComponent {
|
|
42
|
+
variant = input('primary', ...(ngDevMode ? [{ debugName: "variant" }] : []));
|
|
43
|
+
size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
44
|
+
block = input(false, ...(ngDevMode ? [{ debugName: "block" }] : []));
|
|
45
|
+
outline = input(false, ...(ngDevMode ? [{ debugName: "outline" }] : []));
|
|
46
|
+
loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
|
|
47
|
+
rounded = input(false, ...(ngDevMode ? [{ debugName: "rounded" }] : []));
|
|
48
|
+
iconOnly = input(false, ...(ngDevMode ? [{ debugName: "iconOnly" }] : []));
|
|
49
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
50
|
+
type = input('button', ...(ngDevMode ? [{ debugName: "type" }] : []));
|
|
51
|
+
icon = input(undefined, ...(ngDevMode ? [{ debugName: "icon" }] : []));
|
|
52
|
+
clicked = output();
|
|
53
|
+
classes = computed(() => {
|
|
54
|
+
const baseClasses = 'inline-flex cursor-pointer items-center justify-center font-medium transition-all focus:outline-none disabled:opacity-50 disabled:pointer-events-none gap-2';
|
|
55
|
+
let sizeClasses = '';
|
|
56
|
+
if (this.variant() !== 'link') {
|
|
57
|
+
switch (this.size()) {
|
|
58
|
+
case 'sm':
|
|
59
|
+
sizeClasses = this.iconOnly() ? 'h-8 w-8 p-0 text-xs' : 'h-8 px-3 text-xs';
|
|
60
|
+
break;
|
|
61
|
+
case 'md':
|
|
62
|
+
sizeClasses = this.iconOnly() ? 'h-10 w-10 p-0 text-sm' : 'h-10 px-4 py-2 text-sm';
|
|
63
|
+
break;
|
|
64
|
+
case 'lg':
|
|
65
|
+
sizeClasses = this.iconOnly() ? 'h-12 w-12 p-0 text-lg' : 'h-12 px-6 text-lg';
|
|
66
|
+
break;
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
else {
|
|
70
|
+
switch (this.size()) {
|
|
71
|
+
case 'sm':
|
|
72
|
+
sizeClasses = 'text-xs';
|
|
73
|
+
break;
|
|
74
|
+
case 'md':
|
|
75
|
+
sizeClasses = 'text-sm';
|
|
76
|
+
break;
|
|
77
|
+
case 'lg':
|
|
78
|
+
sizeClasses = 'text-lg';
|
|
79
|
+
break;
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
const solidVariants = {
|
|
83
|
+
primary: 'bg-primary text-white hover:bg-primary-hover',
|
|
84
|
+
secondary: 'bg-secondary text-white hover:bg-secondary-hover',
|
|
85
|
+
danger: 'bg-danger text-white hover:bg-danger-hover',
|
|
86
|
+
success: 'bg-success text-white hover:bg-success-hover',
|
|
87
|
+
warning: 'bg-warning text-white hover:bg-warning-hover',
|
|
88
|
+
info: 'bg-info text-white hover:bg-info-hover',
|
|
89
|
+
light: 'bg-light text-slate-800 hover:bg-light-hover',
|
|
90
|
+
dark: 'bg-dark text-white hover:bg-dark-hover',
|
|
91
|
+
link: 'text-blue-600 underline-offset-4 hover:underline px-0 h-auto min-w-0',
|
|
92
|
+
};
|
|
93
|
+
const outlineVariants = {
|
|
94
|
+
primary: 'border border-primary text-primary hover:text-primary-light hover:bg-primary',
|
|
95
|
+
secondary: 'border border-secondary text-secondary hover:text-secondary-light hover:bg-secondary',
|
|
96
|
+
danger: 'border border-danger text-danger hover:text-danger-light hover:bg-danger',
|
|
97
|
+
success: 'border border-success text-success hover:text-success-light hover:bg-success',
|
|
98
|
+
warning: 'border border-warning text-warning hover:text-warning-light hover:bg-warning',
|
|
99
|
+
info: 'border border-info text-info hover:text-info-light hover:bg-info',
|
|
100
|
+
light: 'border border-slate-200 text-slate-700 hover:bg-light',
|
|
101
|
+
dark: 'border border-slate-800 text-slate-800 hover:text-dark-light hover:bg-dark',
|
|
102
|
+
link: 'text-primary underline-offset-4 hover:underline px-0 h-auto min-w-0',
|
|
103
|
+
};
|
|
104
|
+
// let variantClasses = '';
|
|
105
|
+
// switch (this.variant()) {
|
|
106
|
+
// case 'primary':
|
|
107
|
+
// variantClasses = 'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500';
|
|
108
|
+
// break;
|
|
109
|
+
// case 'secondary':
|
|
110
|
+
// variantClasses = 'bg-slate-600 text-white hover:bg-slate-700 focus:ring-slate-500';
|
|
111
|
+
// break;
|
|
112
|
+
// case 'danger':
|
|
113
|
+
// variantClasses = 'bg-red-600 text-white hover:bg-red-700 focus:ring-red-500';
|
|
114
|
+
// break;
|
|
115
|
+
// case 'success':
|
|
116
|
+
// variantClasses = 'bg-green-600 text-white hover:bg-green-700 focus:ring-green-500';
|
|
117
|
+
// break;
|
|
118
|
+
// case 'warning':
|
|
119
|
+
// variantClasses = 'bg-yellow-500 text-white hover:bg-yellow-600 focus:ring-yellow-500';
|
|
120
|
+
// break;
|
|
121
|
+
// case 'info':
|
|
122
|
+
// variantClasses = 'bg-cyan-500 text-white hover:bg-cyan-600 focus:ring-cyan-500';
|
|
123
|
+
// break;
|
|
124
|
+
// case 'link':
|
|
125
|
+
// variantClasses =
|
|
126
|
+
// 'text-blue-600 underline-offset-4 hover:underline focus:ring-blue-500 px-0 h-auto min-w-0';
|
|
127
|
+
// break;
|
|
128
|
+
// }
|
|
129
|
+
const variantClasses = this.outline()
|
|
130
|
+
? outlineVariants[this.variant()]
|
|
131
|
+
: solidVariants[this.variant()];
|
|
132
|
+
const roundedClass = this.rounded()
|
|
133
|
+
? 'rounded-full'
|
|
134
|
+
: this.variant() === 'link'
|
|
135
|
+
? ''
|
|
136
|
+
: 'rounded-lg';
|
|
137
|
+
return `${baseClasses} ${variantClasses} ${sizeClasses} ${roundedClass}`;
|
|
138
|
+
}, ...(ngDevMode ? [{ debugName: "classes" }] : []));
|
|
139
|
+
isIconString = computed(() => {
|
|
140
|
+
return typeof this.icon() === 'string';
|
|
141
|
+
}, ...(ngDevMode ? [{ debugName: "isIconString" }] : []));
|
|
142
|
+
iconTemplate = computed(() => {
|
|
143
|
+
const icon = this.icon();
|
|
144
|
+
return icon instanceof TemplateRef ? icon : null;
|
|
145
|
+
}, ...(ngDevMode ? [{ debugName: "iconTemplate" }] : []));
|
|
146
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
147
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: ButtonComponent, isStandalone: true, selector: "wdc-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, block: { classPropertyName: "block", publicName: "block", isSignal: true, isRequired: false, transformFunction: null }, outline: { classPropertyName: "outline", publicName: "outline", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", 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 }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<!-- <button [class]=\"classes()\" [disabled]=\"disabled() || loading()\">\r\n @if (loading()) {\r\n <wdc-spinner\r\n [size]=\"size() === 'lg' ? 'md' : 'sm'\"\r\n [color]=\"variant() === 'outline' || variant() === 'ghost' ? 'primary' : 'white'\"\r\n ></wdc-spinner>\r\n }\r\n @if (!loading() && icon()) {\r\n @if (isIconString()) {\r\n <span [innerHTML]=\"icon()\"></span>\r\n } @else {\r\n <ng-container *ngTemplateOutlet=\"iconTemplate()\"></ng-container>\r\n }\r\n }\r\n\r\n <ng-content></ng-content>\r\n</button> -->\r\n\r\n<button [class]=\"classes()\" [disabled]=\"disabled() || loading()\">\r\n @if (loading()) {\r\n <wdc-spinner\r\n [size]=\"size() === 'lg' ? 'md' : 'sm'\"\r\n [color]=\"outline() ? 'primary' : 'white'\"\r\n ></wdc-spinner>\r\n }\r\n @if (!loading() && icon()) {\r\n @if (isIconString()) {\r\n <span [innerHTML]=\"icon()\"></span>\r\n } @else {\r\n <ng-container *ngTemplateOutlet=\"iconTemplate()\"></ng-container>\r\n }\r\n }\r\n\r\n <ng-content></ng-content>\r\n</button>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SpinnerComponent, selector: "wdc-spinner", inputs: ["size", "color"] }] });
|
|
148
|
+
}
|
|
149
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
150
|
+
type: Component,
|
|
151
|
+
args: [{ selector: 'wdc-button', imports: [CommonModule, SpinnerComponent], template: "<!-- <button [class]=\"classes()\" [disabled]=\"disabled() || loading()\">\r\n @if (loading()) {\r\n <wdc-spinner\r\n [size]=\"size() === 'lg' ? 'md' : 'sm'\"\r\n [color]=\"variant() === 'outline' || variant() === 'ghost' ? 'primary' : 'white'\"\r\n ></wdc-spinner>\r\n }\r\n @if (!loading() && icon()) {\r\n @if (isIconString()) {\r\n <span [innerHTML]=\"icon()\"></span>\r\n } @else {\r\n <ng-container *ngTemplateOutlet=\"iconTemplate()\"></ng-container>\r\n }\r\n }\r\n\r\n <ng-content></ng-content>\r\n</button> -->\r\n\r\n<button [class]=\"classes()\" [disabled]=\"disabled() || loading()\">\r\n @if (loading()) {\r\n <wdc-spinner\r\n [size]=\"size() === 'lg' ? 'md' : 'sm'\"\r\n [color]=\"outline() ? 'primary' : 'white'\"\r\n ></wdc-spinner>\r\n }\r\n @if (!loading() && icon()) {\r\n @if (isIconString()) {\r\n <span [innerHTML]=\"icon()\"></span>\r\n } @else {\r\n <ng-container *ngTemplateOutlet=\"iconTemplate()\"></ng-container>\r\n }\r\n }\r\n\r\n <ng-content></ng-content>\r\n</button>\r\n" }]
|
|
152
|
+
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], block: [{ type: i0.Input, args: [{ isSignal: true, alias: "block", required: false }] }], outline: [{ type: i0.Input, args: [{ isSignal: true, alias: "outline", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
|
|
153
|
+
|
|
154
|
+
class IconsComponent {
|
|
155
|
+
name = input.required(...(ngDevMode ? [{ debugName: "name" }] : []));
|
|
156
|
+
class = input('', ...(ngDevMode ? [{ debugName: "class" }] : []));
|
|
157
|
+
size = input('16', ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
158
|
+
get sizeClass() {
|
|
159
|
+
switch (this.size()) {
|
|
160
|
+
case '10':
|
|
161
|
+
return 'icon-10';
|
|
162
|
+
case '12':
|
|
163
|
+
return 'icon-12';
|
|
164
|
+
case '14':
|
|
165
|
+
return 'icon-14';
|
|
166
|
+
case '16':
|
|
167
|
+
return 'icon-16';
|
|
168
|
+
case '18':
|
|
169
|
+
return 'icon-18';
|
|
170
|
+
case '20':
|
|
171
|
+
return 'icon-20';
|
|
172
|
+
case '22':
|
|
173
|
+
return 'icon-22';
|
|
174
|
+
case '24':
|
|
175
|
+
return 'icon-24';
|
|
176
|
+
case '40':
|
|
177
|
+
return 'icon-40';
|
|
178
|
+
case '48':
|
|
179
|
+
return 'icon-48';
|
|
180
|
+
case '56':
|
|
181
|
+
return 'icon-56';
|
|
182
|
+
default:
|
|
183
|
+
return 'w-8 h-8';
|
|
184
|
+
}
|
|
185
|
+
}
|
|
186
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: IconsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
187
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.5", type: IconsComponent, isStandalone: true, selector: "wdc-icons", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span class=\"flex\">\r\n <span [class]=\"`material-symbols-outlined ${class} ${sizeClass}`\">{{ name() }}</span>\r\n</span>\r\n", styles: ["span.icon-10{font-size:10px;font-variation-settings:\"OPSZ\" 10}span.icon-12{font-size:12px;font-variation-settings:\"OPSZ\" 12}span.icon-14{font-size:14px;font-variation-settings:\"OPSZ\" 14}span.icon-16{font-size:16px;font-variation-settings:\"OPSZ\" 16}span.icon-18{font-size:18px;font-variation-settings:\"OPSZ\" 18}span.icon-20{font-size:20px;font-variation-settings:\"OPSZ\" 20}span.icon-22{font-size:22px;font-variation-settings:\"OPSZ\" 22}span.icon-24{font-size:24px;font-variation-settings:\"OPSZ\" 24}span.icon-40{font-size:40px;font-variation-settings:\"OPSZ\" 40}span.icon-48{font-size:48px;font-variation-settings:\"OPSZ\" 48}span.icon-56{font-size:56px;font-variation-settings:\"OPSZ\" 56}\n"] });
|
|
188
|
+
}
|
|
189
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: IconsComponent, decorators: [{
|
|
190
|
+
type: Component,
|
|
191
|
+
args: [{ selector: 'wdc-icons', imports: [], template: "<span class=\"flex\">\r\n <span [class]=\"`material-symbols-outlined ${class} ${sizeClass}`\">{{ name() }}</span>\r\n</span>\r\n", styles: ["span.icon-10{font-size:10px;font-variation-settings:\"OPSZ\" 10}span.icon-12{font-size:12px;font-variation-settings:\"OPSZ\" 12}span.icon-14{font-size:14px;font-variation-settings:\"OPSZ\" 14}span.icon-16{font-size:16px;font-variation-settings:\"OPSZ\" 16}span.icon-18{font-size:18px;font-variation-settings:\"OPSZ\" 18}span.icon-20{font-size:20px;font-variation-settings:\"OPSZ\" 20}span.icon-22{font-size:22px;font-variation-settings:\"OPSZ\" 22}span.icon-24{font-size:24px;font-variation-settings:\"OPSZ\" 24}span.icon-40{font-size:40px;font-variation-settings:\"OPSZ\" 40}span.icon-48{font-size:48px;font-variation-settings:\"OPSZ\" 48}span.icon-56{font-size:56px;font-variation-settings:\"OPSZ\" 56}\n"] }]
|
|
192
|
+
}], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
|
|
193
|
+
|
|
194
|
+
class CardComponent {
|
|
195
|
+
title = input('', ...(ngDevMode ? [{ debugName: "title" }] : []));
|
|
196
|
+
subtitle = input('', ...(ngDevMode ? [{ debugName: "subtitle" }] : []));
|
|
197
|
+
footer = input(false, ...(ngDevMode ? [{ debugName: "footer" }] : []));
|
|
198
|
+
header = input(false, ...(ngDevMode ? [{ debugName: "header" }] : []));
|
|
199
|
+
noBodyPadding = input(false, ...(ngDevMode ? [{ debugName: "noBodyPadding" }] : []));
|
|
200
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
201
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: CardComponent, isStandalone: true, selector: "wdc-card", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, footer: { classPropertyName: "footer", publicName: "footer", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, noBodyPadding: { classPropertyName: "noBodyPadding", publicName: "noBodyPadding", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!-- <div class=\"bg-white rounded-xl shadow-sm border border-gray-100 flex flex-col h-full\">\r\n @if (title()) {\r\n <div\r\n class=\"px-6 py-4 border-b border-gray-50 flex justify-between items-center rounded-t-xl bg-white shrink-0\"\r\n >\r\n <div>\r\n <h3 class=\"text-lg font-semibold text-gray-800\">{{ title() }}</h3>\r\n @if (subtitle()) {\r\n <p class=\"text-sm text-gray-500 mt-1\">{{ subtitle() }}</p>\r\n }\r\n </div>\r\n <ng-content select=\"[header-actions]\"></ng-content>\r\n </div>\r\n }\r\n <div class=\"p-6 flex-1 min-h-0\">\r\n <ng-content select=\"[card-body]\"></ng-content>\r\n </div>\r\n @if (footer()) {\r\n <div class=\"px-6 py-4 border-t border-gray-50\">\r\n <ng-content select=\"[footer]\"></ng-content>\r\n </div>\r\n }\r\n</div> -->\r\n\r\n<div class=\"bg-white rounded-xl shadow-sm flex flex-col h-full\">\r\n @if (header()) {\r\n <div\r\n class=\"px-6 py-4 flex justify-between items-center border-b border-gray-100 rounded-t-xl bg-white shrink-0\"\r\n >\r\n @if (title()) {\r\n <div class=\"leading-none\">\r\n <h3 class=\"text-lg font-bold text-gray-800\">{{ title() }}</h3>\r\n @if (subtitle()) {\r\n <p class=\"text-sm text-gray-500\">{{ subtitle() }}</p>\r\n }\r\n </div>\r\n }\r\n <div class=\"\">\r\n @if (!title()) {\r\n <ng-content select=\"[card-header]\"></ng-content>\r\n }\r\n <ng-content select=\"[card-actions]\"></ng-content>\r\n </div>\r\n </div>\r\n }\r\n <div [class]=\"noBodyPadding() ? 'flex-1' : 'p-6 flex-1'\">\r\n <ng-content select=\"[card-body]\"></ng-content>\r\n </div>\r\n @if (footer()) {\r\n <div class=\"px-6 py-4 border-t border-gray-100\">\r\n <ng-content select=\"[card-footer]\"></ng-content>\r\n </div>\r\n }\r\n</div>\r\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
202
|
+
}
|
|
203
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: CardComponent, decorators: [{
|
|
204
|
+
type: Component,
|
|
205
|
+
args: [{ selector: 'wdc-card', imports: [], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- <div class=\"bg-white rounded-xl shadow-sm border border-gray-100 flex flex-col h-full\">\r\n @if (title()) {\r\n <div\r\n class=\"px-6 py-4 border-b border-gray-50 flex justify-between items-center rounded-t-xl bg-white shrink-0\"\r\n >\r\n <div>\r\n <h3 class=\"text-lg font-semibold text-gray-800\">{{ title() }}</h3>\r\n @if (subtitle()) {\r\n <p class=\"text-sm text-gray-500 mt-1\">{{ subtitle() }}</p>\r\n }\r\n </div>\r\n <ng-content select=\"[header-actions]\"></ng-content>\r\n </div>\r\n }\r\n <div class=\"p-6 flex-1 min-h-0\">\r\n <ng-content select=\"[card-body]\"></ng-content>\r\n </div>\r\n @if (footer()) {\r\n <div class=\"px-6 py-4 border-t border-gray-50\">\r\n <ng-content select=\"[footer]\"></ng-content>\r\n </div>\r\n }\r\n</div> -->\r\n\r\n<div class=\"bg-white rounded-xl shadow-sm flex flex-col h-full\">\r\n @if (header()) {\r\n <div\r\n class=\"px-6 py-4 flex justify-between items-center border-b border-gray-100 rounded-t-xl bg-white shrink-0\"\r\n >\r\n @if (title()) {\r\n <div class=\"leading-none\">\r\n <h3 class=\"text-lg font-bold text-gray-800\">{{ title() }}</h3>\r\n @if (subtitle()) {\r\n <p class=\"text-sm text-gray-500\">{{ subtitle() }}</p>\r\n }\r\n </div>\r\n }\r\n <div class=\"\">\r\n @if (!title()) {\r\n <ng-content select=\"[card-header]\"></ng-content>\r\n }\r\n <ng-content select=\"[card-actions]\"></ng-content>\r\n </div>\r\n </div>\r\n }\r\n <div [class]=\"noBodyPadding() ? 'flex-1' : 'p-6 flex-1'\">\r\n <ng-content select=\"[card-body]\"></ng-content>\r\n </div>\r\n @if (footer()) {\r\n <div class=\"px-6 py-4 border-t border-gray-100\">\r\n <ng-content select=\"[card-footer]\"></ng-content>\r\n </div>\r\n }\r\n</div>\r\n" }]
|
|
206
|
+
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], footer: [{ type: i0.Input, args: [{ isSignal: true, alias: "footer", required: false }] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], noBodyPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "noBodyPadding", required: false }] }] } });
|
|
207
|
+
|
|
208
|
+
class StatCardComponent {
|
|
209
|
+
label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
210
|
+
value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
211
|
+
trend = input(0, ...(ngDevMode ? [{ debugName: "trend" }] : []));
|
|
212
|
+
// trend > 0 is up, < 0 is down
|
|
213
|
+
trendLabel = input('', ...(ngDevMode ? [{ debugName: "trendLabel" }] : []));
|
|
214
|
+
iconName = input('chart_data', ...(ngDevMode ? [{ debugName: "iconName" }] : []));
|
|
215
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: StatCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
216
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: StatCardComponent, isStandalone: true, selector: "wdc-stat-card", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, trend: { classPropertyName: "trend", publicName: "trend", isSignal: true, isRequired: false, transformFunction: null }, trendLabel: { classPropertyName: "trendLabel", publicName: "trendLabel", isSignal: true, isRequired: false, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block h-full" }, ngImport: i0, template: "<div\n class=\"bg-white p-6 rounded-xl shadow-sm border border-gray-100 flex items-start justify-between h-full\"\n>\n <div class=\"flex flex-col w-full\">\n <div class=\"flex items-start justify-between\">\n <div>\n <p class=\"text-sm font-medium text-gray-500 mb-1\">{{ label() }}</p>\n <h4 class=\"text-2xl font-bold text-gray-900\">{{ value() }}</h4>\n </div>\n <div class=\"p-3 bg-indigo-50 rounded-lg text-indigo-600\">\n <wdc-icons [name]=\"iconName()\" size=\"22\"></wdc-icons>\n </div>\n </div>\n\n @if (trend() !== 0) {\n <div class=\"flex items-center mt-2 text-sm\">\n @if (trend() > 0) {\n <span\n class=\"text-emerald-600 bg-emerald-50 px-1.5 py-0.5 rounded flex items-center gap-1 font-medium\"\n >\n <svg class=\"w-3 h-3\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"2\"\n d=\"M13 7h8m0 0v8m0-8l-8 8-4-4-6 6\"\n ></path>\n </svg>\n {{ trend() }}%\n </span>\n } @else {\n <span\n class=\"text-rose-600 bg-rose-50 px-1.5 py-0.5 rounded flex items-center gap-1 font-medium\"\n >\n <svg class=\"w-3 h-3\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"2\"\n d=\"M13 17h8m0 0V9m0 8l-8-8-4 4-6-6\"\n ></path>\n </svg>\n {{ trend() }}%\n </span>\n }\n <span class=\"text-gray-400 ml-2\">{{ trendLabel() }}</span>\n </div>\n }\n </div>\n</div>\n", dependencies: [{ kind: "component", type: IconsComponent, selector: "wdc-icons", inputs: ["name", "class", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
217
|
+
}
|
|
218
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: StatCardComponent, decorators: [{
|
|
219
|
+
type: Component,
|
|
220
|
+
args: [{ selector: 'wdc-stat-card', imports: [IconsComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
221
|
+
class: 'block h-full',
|
|
222
|
+
}, template: "<div\n class=\"bg-white p-6 rounded-xl shadow-sm border border-gray-100 flex items-start justify-between h-full\"\n>\n <div class=\"flex flex-col w-full\">\n <div class=\"flex items-start justify-between\">\n <div>\n <p class=\"text-sm font-medium text-gray-500 mb-1\">{{ label() }}</p>\n <h4 class=\"text-2xl font-bold text-gray-900\">{{ value() }}</h4>\n </div>\n <div class=\"p-3 bg-indigo-50 rounded-lg text-indigo-600\">\n <wdc-icons [name]=\"iconName()\" size=\"22\"></wdc-icons>\n </div>\n </div>\n\n @if (trend() !== 0) {\n <div class=\"flex items-center mt-2 text-sm\">\n @if (trend() > 0) {\n <span\n class=\"text-emerald-600 bg-emerald-50 px-1.5 py-0.5 rounded flex items-center gap-1 font-medium\"\n >\n <svg class=\"w-3 h-3\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"2\"\n d=\"M13 7h8m0 0v8m0-8l-8 8-4-4-6 6\"\n ></path>\n </svg>\n {{ trend() }}%\n </span>\n } @else {\n <span\n class=\"text-rose-600 bg-rose-50 px-1.5 py-0.5 rounded flex items-center gap-1 font-medium\"\n >\n <svg class=\"w-3 h-3\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"2\"\n d=\"M13 17h8m0 0V9m0 8l-8-8-4 4-6-6\"\n ></path>\n </svg>\n {{ trend() }}%\n </span>\n }\n <span class=\"text-gray-400 ml-2\">{{ trendLabel() }}</span>\n </div>\n }\n </div>\n</div>\n" }]
|
|
223
|
+
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], trend: [{ type: i0.Input, args: [{ isSignal: true, alias: "trend", required: false }] }], trendLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "trendLabel", required: false }] }], iconName: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconName", required: false }] }] } });
|
|
224
|
+
|
|
225
|
+
class AvatarComponent {
|
|
226
|
+
src;
|
|
227
|
+
alt = '';
|
|
228
|
+
size = 'md';
|
|
229
|
+
shape = 'circle';
|
|
230
|
+
fallback = '';
|
|
231
|
+
imageError = signal(false, ...(ngDevMode ? [{ debugName: "imageError" }] : []));
|
|
232
|
+
get containerClasses() {
|
|
233
|
+
let sizeClass = 'w-10 h-10 text-sm';
|
|
234
|
+
switch (this.size) {
|
|
235
|
+
case 'sm':
|
|
236
|
+
sizeClass = 'w-8 h-8 text-xs';
|
|
237
|
+
break;
|
|
238
|
+
case 'md':
|
|
239
|
+
sizeClass = 'w-10 h-10 text-sm';
|
|
240
|
+
break;
|
|
241
|
+
case 'lg':
|
|
242
|
+
sizeClass = 'w-12 h-12 text-base';
|
|
243
|
+
break;
|
|
244
|
+
case 'xl':
|
|
245
|
+
sizeClass = 'w-16 h-16 text-lg';
|
|
246
|
+
break;
|
|
247
|
+
}
|
|
248
|
+
const shapeClass = this.shape === 'circle' ? 'rounded-full' : 'rounded-md';
|
|
249
|
+
return `relative flex items-center justify-center overflow-hidden bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-300 font-medium ${sizeClass} ${shapeClass}`;
|
|
250
|
+
}
|
|
251
|
+
handleError() {
|
|
252
|
+
this.imageError.set(true);
|
|
253
|
+
}
|
|
254
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
255
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.5", type: AvatarComponent, isStandalone: true, selector: "wdc-avatar", inputs: { src: "src", alt: "alt", size: "size", shape: "shape", fallback: "fallback" }, ngImport: i0, template: "<div [class]=\"containerClasses\">\r\n <img\r\n *ngIf=\"src && !imageError()\"\r\n [src]=\"src\"\r\n [alt]=\"alt\"\r\n class=\"h-full w-full object-cover\"\r\n (error)=\"handleError()\"\r\n />\r\n <span *ngIf=\"!src || imageError()\">{{ fallback }}</span>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
256
|
+
}
|
|
257
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: AvatarComponent, decorators: [{
|
|
258
|
+
type: Component,
|
|
259
|
+
args: [{ selector: 'wdc-avatar', imports: [CommonModule], template: "<div [class]=\"containerClasses\">\r\n <img\r\n *ngIf=\"src && !imageError()\"\r\n [src]=\"src\"\r\n [alt]=\"alt\"\r\n class=\"h-full w-full object-cover\"\r\n (error)=\"handleError()\"\r\n />\r\n <span *ngIf=\"!src || imageError()\">{{ fallback }}</span>\r\n</div>\r\n" }]
|
|
260
|
+
}], propDecorators: { src: [{
|
|
261
|
+
type: Input
|
|
262
|
+
}], alt: [{
|
|
263
|
+
type: Input
|
|
264
|
+
}], size: [{
|
|
265
|
+
type: Input
|
|
266
|
+
}], shape: [{
|
|
267
|
+
type: Input
|
|
268
|
+
}], fallback: [{
|
|
269
|
+
type: Input
|
|
270
|
+
}] } });
|
|
271
|
+
|
|
272
|
+
class BadgeComponent {
|
|
273
|
+
value = input(undefined, ...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
274
|
+
variant = input('primary', ...(ngDevMode ? [{ debugName: "variant" }] : []));
|
|
275
|
+
size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
276
|
+
rounded = input(false, ...(ngDevMode ? [{ debugName: "rounded" }] : []));
|
|
277
|
+
classes = computed(() => {
|
|
278
|
+
const base = 'inline-flex items-center justify-center font-medium transition-colors ring-1 ring-inset';
|
|
279
|
+
let variantClasses = '';
|
|
280
|
+
switch (this.variant()) {
|
|
281
|
+
case 'primary':
|
|
282
|
+
variantClasses =
|
|
283
|
+
'bg-blue-50 text-blue-700 ring-blue-700/10 dark:bg-blue-400/10 dark:text-blue-400 dark:ring-blue-400/30';
|
|
284
|
+
break;
|
|
285
|
+
case 'secondary':
|
|
286
|
+
variantClasses =
|
|
287
|
+
'bg-slate-50 text-slate-600 ring-slate-500/10 dark:bg-slate-400/10 dark:text-slate-400 dark:ring-slate-400/20';
|
|
288
|
+
break;
|
|
289
|
+
case 'success':
|
|
290
|
+
variantClasses =
|
|
291
|
+
'bg-green-50 text-green-700 ring-green-600/20 dark:bg-green-500/10 dark:text-green-400 dark:ring-green-500/20';
|
|
292
|
+
break;
|
|
293
|
+
case 'danger':
|
|
294
|
+
variantClasses =
|
|
295
|
+
'bg-red-50 text-red-700 ring-red-600/10 dark:bg-red-400/10 dark:text-red-400 dark:ring-red-400/20';
|
|
296
|
+
break;
|
|
297
|
+
case 'warning':
|
|
298
|
+
variantClasses =
|
|
299
|
+
'bg-yellow-50 text-yellow-800 ring-yellow-600/20 dark:bg-yellow-400/10 dark:text-yellow-500 dark:ring-yellow-400/20';
|
|
300
|
+
break;
|
|
301
|
+
case 'info':
|
|
302
|
+
variantClasses =
|
|
303
|
+
'bg-indigo-50 text-indigo-700 ring-indigo-700/10 dark:bg-indigo-400/10 dark:text-indigo-400 dark:ring-indigo-400/30';
|
|
304
|
+
break;
|
|
305
|
+
}
|
|
306
|
+
let sizeClasses = '';
|
|
307
|
+
switch (this.size()) {
|
|
308
|
+
case 'sm':
|
|
309
|
+
sizeClasses = 'text-xs px-2 py-1';
|
|
310
|
+
break;
|
|
311
|
+
case 'md':
|
|
312
|
+
sizeClasses = 'text-sm px-2.5 py-0.5';
|
|
313
|
+
break;
|
|
314
|
+
case 'lg':
|
|
315
|
+
sizeClasses = 'text-base px-3 py-1';
|
|
316
|
+
break;
|
|
317
|
+
}
|
|
318
|
+
const roundedClass = this.rounded() ? 'rounded-full' : 'rounded-md';
|
|
319
|
+
return `${base} ${variantClasses} ${sizeClasses} ${roundedClass}`;
|
|
320
|
+
}, ...(ngDevMode ? [{ debugName: "classes" }] : []));
|
|
321
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
322
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: BadgeComponent, isStandalone: true, selector: "wdc-badge", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span [class]=\"classes()\">\r\n <ng-content></ng-content>\r\n @if (value()) {\r\n <span>{{ value() }}</span>\r\n }\r\n</span>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
323
|
+
}
|
|
324
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BadgeComponent, decorators: [{
|
|
325
|
+
type: Component,
|
|
326
|
+
args: [{ selector: 'wdc-badge', imports: [CommonModule], template: "<span [class]=\"classes()\">\r\n <ng-content></ng-content>\r\n @if (value()) {\r\n <span>{{ value() }}</span>\r\n }\r\n</span>\r\n" }]
|
|
327
|
+
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }] } });
|
|
328
|
+
|
|
329
|
+
// import { trigger, transition, style, animate } from '@angular/animations';
|
|
330
|
+
class ModalComponent {
|
|
331
|
+
title = input('', ...(ngDevMode ? [{ debugName: "title" }] : []));
|
|
332
|
+
size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
333
|
+
isOpen = model(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
|
|
334
|
+
closeOnBackdropClick = input(true, ...(ngDevMode ? [{ debugName: "closeOnBackdropClick" }] : []));
|
|
335
|
+
onClose = output();
|
|
336
|
+
closeModal() {
|
|
337
|
+
this.isOpen.set(false);
|
|
338
|
+
this.onClose.emit();
|
|
339
|
+
}
|
|
340
|
+
onBackdropClick() {
|
|
341
|
+
if (this.closeOnBackdropClick()) {
|
|
342
|
+
this.closeModal();
|
|
343
|
+
}
|
|
344
|
+
}
|
|
345
|
+
sizeClasses = computed(() => {
|
|
346
|
+
switch (this.size()) {
|
|
347
|
+
case 'sm':
|
|
348
|
+
return 'sm:max-w-sm';
|
|
349
|
+
case 'md':
|
|
350
|
+
return 'sm:max-w-md';
|
|
351
|
+
case 'lg':
|
|
352
|
+
return 'sm:max-w-lg';
|
|
353
|
+
case 'xl':
|
|
354
|
+
return 'sm:max-w-xl';
|
|
355
|
+
case 'full':
|
|
356
|
+
return 'sm:max-w-full sm:m-4';
|
|
357
|
+
default:
|
|
358
|
+
return 'sm:max-w-md';
|
|
359
|
+
}
|
|
360
|
+
}, ...(ngDevMode ? [{ debugName: "sizeClasses" }] : []));
|
|
361
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
362
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: ModalComponent, isStandalone: true, selector: "wdc-modal", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", onClose: "onClose" }, ngImport: i0, template: "@if (isOpen()) {\r\n <div class=\"relative z-50\" aria-labelledby=\"modal-title\" role=\"dialog\" aria-modal=\"true\">\r\n <!-- Backdrop -->\r\n <div\r\n [@fadeAnimation]\r\n class=\"fixed inset-0 bg-slate-900/40 backdrop-blur-sm transition-opacity\"\r\n (click)=\"onBackdropClick()\"\r\n ></div>\r\n\r\n <!-- Panel -->\r\n <div class=\"fixed inset-0 z-10 overflow-y-auto w-screen overflow-x-hidden\">\r\n <div class=\"flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0\">\r\n <div\r\n [@modalAnimation]\r\n class=\"relative transform overflow-hidden rounded-lg bg-white dark:bg-slate-900 px-4 pb-4 pt-5 text-left shadow-xl sm:my-8 w-full sm:p-6\"\r\n [class]=\"sizeClasses()\"\r\n >\r\n <!-- Header -->\r\n @if (title()) {\r\n <div class=\"mb-4 sm:flex sm:items-start justify-between\">\r\n <h3\r\n class=\"text-lg font-semibold leading-6 text-slate-900 dark:text-white\"\r\n id=\"modal-title\"\r\n >\r\n {{ title() }}\r\n </h3>\r\n <button\r\n type=\"button\"\r\n class=\"rounded-md bg-white dark:bg-slate-900 text-slate-400 hover:text-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-slate-900\"\r\n (click)=\"closeModal()\"\r\n >\r\n <span class=\"sr-only\">Close</span>\r\n <svg\r\n class=\"h-6 w-6\"\r\n fill=\"none\"\r\n viewBox=\"0 0 24 24\"\r\n stroke-width=\"1.5\"\r\n stroke=\"currentColor\"\r\n aria-hidden=\"true\"\r\n >\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\r\n </svg>\r\n </button>\r\n </div>\r\n }\r\n\r\n <!-- Body -->\r\n <div class=\"mt-2\">\r\n <ng-content></ng-content>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n}\r\n" });
|
|
363
|
+
}
|
|
364
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: ModalComponent, decorators: [{
|
|
365
|
+
type: Component,
|
|
366
|
+
args: [{ selector: 'wdc-modal', imports: [], template: "@if (isOpen()) {\r\n <div class=\"relative z-50\" aria-labelledby=\"modal-title\" role=\"dialog\" aria-modal=\"true\">\r\n <!-- Backdrop -->\r\n <div\r\n [@fadeAnimation]\r\n class=\"fixed inset-0 bg-slate-900/40 backdrop-blur-sm transition-opacity\"\r\n (click)=\"onBackdropClick()\"\r\n ></div>\r\n\r\n <!-- Panel -->\r\n <div class=\"fixed inset-0 z-10 overflow-y-auto w-screen overflow-x-hidden\">\r\n <div class=\"flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0\">\r\n <div\r\n [@modalAnimation]\r\n class=\"relative transform overflow-hidden rounded-lg bg-white dark:bg-slate-900 px-4 pb-4 pt-5 text-left shadow-xl sm:my-8 w-full sm:p-6\"\r\n [class]=\"sizeClasses()\"\r\n >\r\n <!-- Header -->\r\n @if (title()) {\r\n <div class=\"mb-4 sm:flex sm:items-start justify-between\">\r\n <h3\r\n class=\"text-lg font-semibold leading-6 text-slate-900 dark:text-white\"\r\n id=\"modal-title\"\r\n >\r\n {{ title() }}\r\n </h3>\r\n <button\r\n type=\"button\"\r\n class=\"rounded-md bg-white dark:bg-slate-900 text-slate-400 hover:text-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-slate-900\"\r\n (click)=\"closeModal()\"\r\n >\r\n <span class=\"sr-only\">Close</span>\r\n <svg\r\n class=\"h-6 w-6\"\r\n fill=\"none\"\r\n viewBox=\"0 0 24 24\"\r\n stroke-width=\"1.5\"\r\n stroke=\"currentColor\"\r\n aria-hidden=\"true\"\r\n >\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\r\n </svg>\r\n </button>\r\n </div>\r\n }\r\n\r\n <!-- Body -->\r\n <div class=\"mt-2\">\r\n <ng-content></ng-content>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n}\r\n" }]
|
|
367
|
+
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }, { type: i0.Output, args: ["isOpenChange"] }], closeOnBackdropClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", required: false }] }], onClose: [{ type: i0.Output, args: ["onClose"] }] } });
|
|
368
|
+
|
|
369
|
+
class NavbarComponent {
|
|
370
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: NavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
371
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.5", type: NavbarComponent, isStandalone: true, selector: "wdc-navbar", ngImport: i0, template: "<p>navbar works!</p>\r\n" });
|
|
372
|
+
}
|
|
373
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: NavbarComponent, decorators: [{
|
|
374
|
+
type: Component,
|
|
375
|
+
args: [{ selector: 'wdc-navbar', imports: [], template: "<p>navbar works!</p>\r\n" }]
|
|
376
|
+
}] });
|
|
377
|
+
|
|
378
|
+
class ProgressBarComponent {
|
|
379
|
+
value = input(0, ...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
380
|
+
showValue = input(false, ...(ngDevMode ? [{ debugName: "showValue" }] : []));
|
|
381
|
+
variant = input('primary', ...(ngDevMode ? [{ debugName: "variant" }] : []));
|
|
382
|
+
colorClass = computed(() => {
|
|
383
|
+
switch (this.variant()) {
|
|
384
|
+
case 'primary':
|
|
385
|
+
return 'bg-blue-600 dark:bg-blue-500';
|
|
386
|
+
case 'success':
|
|
387
|
+
return 'bg-green-600 dark:bg-green-500';
|
|
388
|
+
case 'warning':
|
|
389
|
+
return 'bg-yellow-500 dark:bg-yellow-400';
|
|
390
|
+
case 'danger':
|
|
391
|
+
return 'bg-red-600 dark:bg-red-500';
|
|
392
|
+
case 'info':
|
|
393
|
+
return 'bg-cyan-500 dark:bg-cyan-400';
|
|
394
|
+
default:
|
|
395
|
+
return 'bg-blue-600 dark:bg-blue-500';
|
|
396
|
+
}
|
|
397
|
+
}, ...(ngDevMode ? [{ debugName: "colorClass" }] : []));
|
|
398
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
399
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: ProgressBarComponent, isStandalone: true, selector: "wdc-progress-bar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"w-full bg-slate-200 dark:bg-slate-700 rounded-full h-2.5 overflow-hidden\">\r\n <div\r\n class=\"h-2.5 rounded-full transition-all duration-300 ease-out\"\r\n [class]=\"colorClass()\"\r\n [style.width.%]=\"value()\"\r\n ></div>\r\n</div>\r\n@if (showValue()) {\r\n <div class=\"text-xs text-slate-500 dark:text-slate-400 mt-1 text-right\">{{ value() }}%</div>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
400
|
+
}
|
|
401
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: ProgressBarComponent, decorators: [{
|
|
402
|
+
type: Component,
|
|
403
|
+
args: [{ selector: 'wdc-progress-bar', imports: [CommonModule], template: "<div class=\"w-full bg-slate-200 dark:bg-slate-700 rounded-full h-2.5 overflow-hidden\">\r\n <div\r\n class=\"h-2.5 rounded-full transition-all duration-300 ease-out\"\r\n [class]=\"colorClass()\"\r\n [style.width.%]=\"value()\"\r\n ></div>\r\n</div>\r\n@if (showValue()) {\r\n <div class=\"text-xs text-slate-500 dark:text-slate-400 mt-1 text-right\">{{ value() }}%</div>\r\n}\r\n" }]
|
|
404
|
+
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
|
|
405
|
+
|
|
406
|
+
class TabComponent {
|
|
407
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
408
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
409
|
+
active = input(false, ...(ngDevMode ? [{ debugName: "active" }] : []));
|
|
410
|
+
headerTemplate = input(null, ...(ngDevMode ? [{ debugName: "headerTemplate" }] : []));
|
|
411
|
+
contentTemplate = input(null, ...(ngDevMode ? [{ debugName: "contentTemplate" }] : []));
|
|
412
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: TabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
413
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.5", type: TabComponent, isStandalone: true, selector: "wdc-tab", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, headerTemplate: { classPropertyName: "headerTemplate", publicName: "headerTemplate", isSignal: true, isRequired: false, transformFunction: null }, contentTemplate: { classPropertyName: "contentTemplate", publicName: "contentTemplate", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: ``, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
414
|
+
}
|
|
415
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: TabComponent, decorators: [{
|
|
416
|
+
type: Component,
|
|
417
|
+
args: [{
|
|
418
|
+
selector: 'wdc-tab',
|
|
419
|
+
standalone: true,
|
|
420
|
+
imports: [CommonModule],
|
|
421
|
+
template: ``,
|
|
422
|
+
}]
|
|
423
|
+
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], headerTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerTemplate", required: false }] }], contentTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentTemplate", required: false }] }] } });
|
|
424
|
+
|
|
425
|
+
class TabsComponent {
|
|
426
|
+
variant = input('underline', ...(ngDevMode ? [{ debugName: "variant" }] : []));
|
|
427
|
+
orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : []));
|
|
428
|
+
activeTab = signal(null, ...(ngDevMode ? [{ debugName: "activeTab" }] : []));
|
|
429
|
+
tabs = contentChildren(TabComponent, ...(ngDevMode ? [{ debugName: "tabs" }] : []));
|
|
430
|
+
constructor() {
|
|
431
|
+
effect(() => {
|
|
432
|
+
const allTabs = this.tabs();
|
|
433
|
+
if (allTabs.length === 0)
|
|
434
|
+
return;
|
|
435
|
+
``;
|
|
436
|
+
let activeTab = allTabs.find((tab) => tab.active());
|
|
437
|
+
this.activeTab.set(activeTab || allTabs[0]);
|
|
438
|
+
});
|
|
439
|
+
}
|
|
440
|
+
selectTab(tab) {
|
|
441
|
+
if (!tab.disabled())
|
|
442
|
+
this.activeTab.set(tab);
|
|
443
|
+
}
|
|
444
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
445
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: TabsComponent, isStandalone: true, selector: "wdc-tabs", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "tabs", predicate: TabComponent, isSignal: true }], ngImport: i0, template: "<!-- <div [class]=\"containerClasses\">\r\n <div role=\"tablist\" [class]=\"listClasses\">\r\n @for (tab of tabs(); track tab.label()) {\r\n <button\r\n type=\"button\"\r\n role=\"tab\"\r\n [attr.aria-selected]=\"tab.active()\"\r\n (click)=\"selectTab(tab)\"\r\n [disabled]=\"tab.disabled()\"\r\n [class]=\"getTabStyle(tab)\"\r\n [class.border-indigo-500]=\"activeTab() === tab.label()\"\r\n [class.text-indigo-600]=\"activeTab() === tab.label()\"\r\n [class.border-transparent]=\"activeTab() !== tab.label()\"\r\n [class.text-gray-500]=\"activeTab() !== tab.label()\"\r\n class=\"group flex items-center gap-2 px-4 py-2 text-sm font-medium transition-all duration-200 outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap\"\r\n >\r\n {{ tab.label() }}\r\n </button>\r\n }\r\n </div>\r\n\r\n <div class=\"flex-1 p-1\">\r\n <ng-content></ng-content>\r\n </div>\r\n</div> -->\r\n\r\n<div\r\n [class]=\"\r\n `w-full flex bg-white p-4 rounded-lg border border-gray-100 ${orientation() === 'vertical' ? 'flex-row gap-6' : 'flex-col'}`\r\n \"\r\n>\r\n <div\r\n [class]=\"\r\n `flex flex-shrink-0 border-gray-200 ${orientation() === 'vertical' ? 'border-r w-42 flex-col' : 'border-b'}`\r\n \"\r\n >\r\n <nav\r\n [class]=\"\r\n `flex ${orientation() === 'vertical' ? 'flex-col -mr-px flex-shrink-0' : '-mb-px space-x-8'}`\r\n \"\r\n >\r\n @for (item of tabs(); track $index; let i = $index) {\r\n <button\r\n (click)=\"selectTab(item)\"\r\n [class.border-indigo-500]=\"activeTab() === item\"\r\n [class.text-indigo-600]=\"activeTab() === item\"\r\n [class.border-transparent]=\"activeTab() !== item\"\r\n [class.text-gray-500]=\"activeTab() !== item\"\r\n [class.hover:text-gray-700]=\"activeTab() !== item\"\r\n [class.hover:border-gray-300]=\"activeTab() !== item\"\r\n [class]=\"\r\n `whitespace-nowrap flex cursor-pointer py-4 px-1 font-medium text-sm transition-all focus:outline-none ${\r\n orientation() === 'vertical' ? 'border-r-2' : 'border-b-2'\r\n }`\r\n \"\r\n >\r\n @if (item.headerTemplate()) {\r\n <ng-container *ngTemplateOutlet=\"item.headerTemplate()\"></ng-container>\r\n } @else {\r\n {{ item.label() }}\r\n }\r\n </button>\r\n }\r\n </nav>\r\n </div>\r\n\r\n @if (activeTab(); as active) {\r\n <div [class]=\"`${orientation() === 'vertical' ? 'flex-1 h-full overflow-y-auto' : 'mt-4'}`\">\r\n <ng-container *ngTemplateOutlet=\"active.contentTemplate()\"></ng-container>\r\n </div>\r\n }\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
446
|
+
}
|
|
447
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: TabsComponent, decorators: [{
|
|
448
|
+
type: Component,
|
|
449
|
+
args: [{ selector: 'wdc-tabs', imports: [CommonModule], template: "<!-- <div [class]=\"containerClasses\">\r\n <div role=\"tablist\" [class]=\"listClasses\">\r\n @for (tab of tabs(); track tab.label()) {\r\n <button\r\n type=\"button\"\r\n role=\"tab\"\r\n [attr.aria-selected]=\"tab.active()\"\r\n (click)=\"selectTab(tab)\"\r\n [disabled]=\"tab.disabled()\"\r\n [class]=\"getTabStyle(tab)\"\r\n [class.border-indigo-500]=\"activeTab() === tab.label()\"\r\n [class.text-indigo-600]=\"activeTab() === tab.label()\"\r\n [class.border-transparent]=\"activeTab() !== tab.label()\"\r\n [class.text-gray-500]=\"activeTab() !== tab.label()\"\r\n class=\"group flex items-center gap-2 px-4 py-2 text-sm font-medium transition-all duration-200 outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap\"\r\n >\r\n {{ tab.label() }}\r\n </button>\r\n }\r\n </div>\r\n\r\n <div class=\"flex-1 p-1\">\r\n <ng-content></ng-content>\r\n </div>\r\n</div> -->\r\n\r\n<div\r\n [class]=\"\r\n `w-full flex bg-white p-4 rounded-lg border border-gray-100 ${orientation() === 'vertical' ? 'flex-row gap-6' : 'flex-col'}`\r\n \"\r\n>\r\n <div\r\n [class]=\"\r\n `flex flex-shrink-0 border-gray-200 ${orientation() === 'vertical' ? 'border-r w-42 flex-col' : 'border-b'}`\r\n \"\r\n >\r\n <nav\r\n [class]=\"\r\n `flex ${orientation() === 'vertical' ? 'flex-col -mr-px flex-shrink-0' : '-mb-px space-x-8'}`\r\n \"\r\n >\r\n @for (item of tabs(); track $index; let i = $index) {\r\n <button\r\n (click)=\"selectTab(item)\"\r\n [class.border-indigo-500]=\"activeTab() === item\"\r\n [class.text-indigo-600]=\"activeTab() === item\"\r\n [class.border-transparent]=\"activeTab() !== item\"\r\n [class.text-gray-500]=\"activeTab() !== item\"\r\n [class.hover:text-gray-700]=\"activeTab() !== item\"\r\n [class.hover:border-gray-300]=\"activeTab() !== item\"\r\n [class]=\"\r\n `whitespace-nowrap flex cursor-pointer py-4 px-1 font-medium text-sm transition-all focus:outline-none ${\r\n orientation() === 'vertical' ? 'border-r-2' : 'border-b-2'\r\n }`\r\n \"\r\n >\r\n @if (item.headerTemplate()) {\r\n <ng-container *ngTemplateOutlet=\"item.headerTemplate()\"></ng-container>\r\n } @else {\r\n {{ item.label() }}\r\n }\r\n </button>\r\n }\r\n </nav>\r\n </div>\r\n\r\n @if (activeTab(); as active) {\r\n <div [class]=\"`${orientation() === 'vertical' ? 'flex-1 h-full overflow-y-auto' : 'mt-4'}`\">\r\n <ng-container *ngTemplateOutlet=\"active.contentTemplate()\"></ng-container>\r\n </div>\r\n }\r\n</div>\r\n" }]
|
|
450
|
+
}], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TabComponent), { isSignal: true }] }] } });
|
|
451
|
+
|
|
452
|
+
class ToastService {
|
|
453
|
+
toasts = signal([], ...(ngDevMode ? [{ debugName: "toasts" }] : []));
|
|
454
|
+
nextId = 0;
|
|
455
|
+
show(message, type = 'info', duration = 3000) {
|
|
456
|
+
const id = this.nextId++;
|
|
457
|
+
const toast = { id, message, type, duration };
|
|
458
|
+
this.toasts.update((current) => [...current, toast]);
|
|
459
|
+
if (duration > 0) {
|
|
460
|
+
setTimeout(() => {
|
|
461
|
+
this.remove(id);
|
|
462
|
+
}, duration);
|
|
463
|
+
}
|
|
464
|
+
}
|
|
465
|
+
remove(id) {
|
|
466
|
+
this.toasts.update((current) => current.filter((t) => t.id !== id));
|
|
467
|
+
}
|
|
468
|
+
success(message, duration) {
|
|
469
|
+
this.show(message, 'success', duration);
|
|
470
|
+
}
|
|
471
|
+
error(message, duration) {
|
|
472
|
+
this.show(message, 'error', duration);
|
|
473
|
+
}
|
|
474
|
+
warning(message, duration) {
|
|
475
|
+
this.show(message, 'warning', duration);
|
|
476
|
+
}
|
|
477
|
+
info(message, duration) {
|
|
478
|
+
this.show(message, 'info', duration);
|
|
479
|
+
}
|
|
480
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: ToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
481
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: ToastService, providedIn: 'root' });
|
|
482
|
+
}
|
|
483
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: ToastService, decorators: [{
|
|
484
|
+
type: Injectable,
|
|
485
|
+
args: [{
|
|
486
|
+
providedIn: 'root',
|
|
487
|
+
}]
|
|
488
|
+
}] });
|
|
489
|
+
|
|
490
|
+
class ToastComponent {
|
|
491
|
+
toastService;
|
|
492
|
+
constructor(toastService) {
|
|
493
|
+
this.toastService = toastService;
|
|
494
|
+
}
|
|
495
|
+
getIcon(type) {
|
|
496
|
+
switch (type) {
|
|
497
|
+
case 'success':
|
|
498
|
+
return 'check_circle';
|
|
499
|
+
case 'error':
|
|
500
|
+
return 'error';
|
|
501
|
+
case 'warning':
|
|
502
|
+
return 'warning';
|
|
503
|
+
case 'info':
|
|
504
|
+
return 'info';
|
|
505
|
+
}
|
|
506
|
+
}
|
|
507
|
+
getClasses(type) {
|
|
508
|
+
switch (type) {
|
|
509
|
+
case 'success':
|
|
510
|
+
return 'bg-green-50 text-green-800 border-green-200 dark:bg-green-900/30 dark:text-green-300 dark:border-green-800';
|
|
511
|
+
case 'error':
|
|
512
|
+
return 'bg-red-50 text-red-800 border-red-200 dark:bg-red-900/30 dark:text-red-300 dark:border-red-800';
|
|
513
|
+
case 'warning':
|
|
514
|
+
return 'bg-yellow-50 text-yellow-800 border-yellow-200 dark:bg-yellow-900/30 dark:text-yellow-300 dark:border-yellow-800';
|
|
515
|
+
case 'info':
|
|
516
|
+
return 'bg-blue-50 text-blue-800 border-blue-200 dark:bg-blue-900/30 dark:text-blue-300 dark:border-blue-800';
|
|
517
|
+
}
|
|
518
|
+
}
|
|
519
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: ToastComponent, deps: [{ token: ToastService }], target: i0.ɵɵFactoryTarget.Component });
|
|
520
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.5", type: ToastComponent, isStandalone: true, selector: "wdc-toast", ngImport: i0, template: "<div class=\"fixed top-4 right-4 z-[100] flex flex-col gap-2 pointer-events-none\">\r\n <div\r\n *ngFor=\"let toast of toastService.toasts()\"\r\n class=\"pointer-events-auto flex items-center w-full max-w-xs p-4 rounded-lg shadow-lg border animate-in slide-in-from-right fade-in duration-300\"\r\n [class]=\"getClasses(toast.type)\"\r\n role=\"alert\"\r\n >\r\n <div class=\"inline-flex items-center justify-center flex-shrink-0 w-8 h-8\">\r\n <span class=\"material-icons-outlined text-xl\">{{ getIcon(toast.type) }}</span>\r\n </div>\r\n <div class=\"ml-3 text-sm font-normal\">{{ toast.message }}</div>\r\n <button\r\n type=\"button\"\r\n class=\"ml-auto -mx-1.5 -my-1.5 rounded-lg focus:ring-2 p-1.5 hover:bg-black/5 dark:hover:bg-white/10 inline-flex items-center justify-center h-8 w-8 transition-colors\"\r\n aria-label=\"Close\"\r\n (click)=\"toastService.remove(toast.id)\"\r\n [class]=\"\r\n 'text-' +\r\n (toast.type === 'info'\r\n ? 'blue'\r\n : toast.type === 'error'\r\n ? 'red'\r\n : toast.type === 'success'\r\n ? 'green'\r\n : 'yellow') +\r\n '-500'\r\n \"\r\n >\r\n <span class=\"sr-only\">Close</span>\r\n <svg\r\n class=\"w-3 h-3\"\r\n aria-hidden=\"true\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n fill=\"none\"\r\n viewBox=\"0 0 14 14\"\r\n >\r\n <path\r\n stroke=\"currentColor\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n stroke-width=\"2\"\r\n d=\"m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6\"\r\n />\r\n </svg>\r\n </button>\r\n </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
521
|
+
}
|
|
522
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: ToastComponent, decorators: [{
|
|
523
|
+
type: Component,
|
|
524
|
+
args: [{ selector: 'wdc-toast', standalone: true, imports: [CommonModule], template: "<div class=\"fixed top-4 right-4 z-[100] flex flex-col gap-2 pointer-events-none\">\r\n <div\r\n *ngFor=\"let toast of toastService.toasts()\"\r\n class=\"pointer-events-auto flex items-center w-full max-w-xs p-4 rounded-lg shadow-lg border animate-in slide-in-from-right fade-in duration-300\"\r\n [class]=\"getClasses(toast.type)\"\r\n role=\"alert\"\r\n >\r\n <div class=\"inline-flex items-center justify-center flex-shrink-0 w-8 h-8\">\r\n <span class=\"material-icons-outlined text-xl\">{{ getIcon(toast.type) }}</span>\r\n </div>\r\n <div class=\"ml-3 text-sm font-normal\">{{ toast.message }}</div>\r\n <button\r\n type=\"button\"\r\n class=\"ml-auto -mx-1.5 -my-1.5 rounded-lg focus:ring-2 p-1.5 hover:bg-black/5 dark:hover:bg-white/10 inline-flex items-center justify-center h-8 w-8 transition-colors\"\r\n aria-label=\"Close\"\r\n (click)=\"toastService.remove(toast.id)\"\r\n [class]=\"\r\n 'text-' +\r\n (toast.type === 'info'\r\n ? 'blue'\r\n : toast.type === 'error'\r\n ? 'red'\r\n : toast.type === 'success'\r\n ? 'green'\r\n : 'yellow') +\r\n '-500'\r\n \"\r\n >\r\n <span class=\"sr-only\">Close</span>\r\n <svg\r\n class=\"w-3 h-3\"\r\n aria-hidden=\"true\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n fill=\"none\"\r\n viewBox=\"0 0 14 14\"\r\n >\r\n <path\r\n stroke=\"currentColor\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n stroke-width=\"2\"\r\n d=\"m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6\"\r\n />\r\n </svg>\r\n </button>\r\n </div>\r\n</div>\r\n" }]
|
|
525
|
+
}], ctorParameters: () => [{ type: ToastService }] });
|
|
526
|
+
|
|
527
|
+
class TableComponent {
|
|
528
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
529
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.5", type: TableComponent, isStandalone: true, selector: "wdc-table", ngImport: i0, template: "<p>table works!</p>\r\n" });
|
|
530
|
+
}
|
|
531
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: TableComponent, decorators: [{
|
|
532
|
+
type: Component,
|
|
533
|
+
args: [{ selector: 'wdc-table', imports: [], template: "<p>table works!</p>\r\n" }]
|
|
534
|
+
}] });
|
|
535
|
+
|
|
536
|
+
class ChartComponent {
|
|
537
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: ChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
538
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.5", type: ChartComponent, isStandalone: true, selector: "wdc-chart", ngImport: i0, template: "<p>chart works!</p>\r\n" });
|
|
539
|
+
}
|
|
540
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: ChartComponent, decorators: [{
|
|
541
|
+
type: Component,
|
|
542
|
+
args: [{ selector: 'wdc-chart', imports: [], template: "<p>chart works!</p>\r\n" }]
|
|
543
|
+
}] });
|
|
544
|
+
|
|
545
|
+
class UploadComponent {
|
|
546
|
+
accept = input('*/*', ...(ngDevMode ? [{ debugName: "accept" }] : []));
|
|
547
|
+
maxSize = input(10000000, ...(ngDevMode ? [{ debugName: "maxSize" }] : [])); // 10MB default
|
|
548
|
+
multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : []));
|
|
549
|
+
onSelect = output();
|
|
550
|
+
onUpload = output(); // If manual upload
|
|
551
|
+
files = signal([], ...(ngDevMode ? [{ debugName: "files" }] : []));
|
|
552
|
+
isDragging = signal(false, ...(ngDevMode ? [{ debugName: "isDragging" }] : []));
|
|
553
|
+
onDragOver(event) {
|
|
554
|
+
event.preventDefault();
|
|
555
|
+
event.stopPropagation();
|
|
556
|
+
this.isDragging.set(true);
|
|
557
|
+
}
|
|
558
|
+
onDragLeave(event) {
|
|
559
|
+
event.preventDefault();
|
|
560
|
+
event.stopPropagation();
|
|
561
|
+
this.isDragging.set(false);
|
|
562
|
+
}
|
|
563
|
+
onDrop(event) {
|
|
564
|
+
event.preventDefault();
|
|
565
|
+
event.stopPropagation();
|
|
566
|
+
this.isDragging.set(false);
|
|
567
|
+
if (event.dataTransfer?.files) {
|
|
568
|
+
this.handleFiles(Array.from(event.dataTransfer.files));
|
|
569
|
+
}
|
|
570
|
+
}
|
|
571
|
+
onFileSelect(event) {
|
|
572
|
+
if (event.target.files) {
|
|
573
|
+
this.handleFiles(Array.from(event.target.files));
|
|
574
|
+
}
|
|
575
|
+
}
|
|
576
|
+
handleFiles(newFiles) {
|
|
577
|
+
const validFiles = newFiles.filter((file) => {
|
|
578
|
+
// Check size
|
|
579
|
+
if (file.size > this.maxSize()) {
|
|
580
|
+
console.warn(`File ${file.name} exceeds max size`);
|
|
581
|
+
return false;
|
|
582
|
+
}
|
|
583
|
+
return true;
|
|
584
|
+
});
|
|
585
|
+
if (this.multiple()) {
|
|
586
|
+
this.files.update((current) => [...current, ...validFiles]);
|
|
587
|
+
}
|
|
588
|
+
else {
|
|
589
|
+
if (validFiles.length > 0) {
|
|
590
|
+
this.files.set([validFiles[0]]);
|
|
591
|
+
}
|
|
592
|
+
}
|
|
593
|
+
this.onSelect.emit(this.files());
|
|
594
|
+
}
|
|
595
|
+
removeFile(index, event) {
|
|
596
|
+
event.stopPropagation();
|
|
597
|
+
this.files.update((files) => files.filter((_, i) => i !== index));
|
|
598
|
+
this.onSelect.emit(this.files());
|
|
599
|
+
}
|
|
600
|
+
upload() {
|
|
601
|
+
this.onUpload.emit(this.files());
|
|
602
|
+
// Clear after upload? keeping for now.
|
|
603
|
+
}
|
|
604
|
+
formatBytes(bytes, decimals = 2) {
|
|
605
|
+
if (!+bytes)
|
|
606
|
+
return '0 Bytes';
|
|
607
|
+
const k = 1024;
|
|
608
|
+
const dm = decimals < 0 ? 0 : decimals;
|
|
609
|
+
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
|
|
610
|
+
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
|
611
|
+
return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
|
|
612
|
+
}
|
|
613
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: UploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
614
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: UploadComponent, isStandalone: true, selector: "wdc-upload", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelect: "onSelect", onUpload: "onUpload" }, ngImport: i0, template: "<div class=\"w-full\">\r\n <!-- Drop Zone -->\r\n <div\r\n class=\"border-2 border-dashed rounded-xl p-8 text-center transition-colors cursor-pointer flex flex-col items-center justify-center gap-4 bg-slate-50 dark:bg-slate-900/50\"\r\n [class.border-indigo-500]=\"isDragging()\"\r\n [class.bg-indigo-50]=\"isDragging()\"\r\n [class.dark:bg-indigo-500/10]=\"isDragging()\"\r\n [class.border-slate-300]=\"!isDragging()\"\r\n [class.dark:border-slate-700]=\"!isDragging()\"\r\n (dragover)=\"onDragOver($event)\"\r\n (dragleave)=\"onDragLeave($event)\"\r\n (drop)=\"onDrop($event)\"\r\n (click)=\"fileInput.click()\"\r\n >\r\n <input\r\n #fileInput\r\n type=\"file\"\r\n [accept]=\"accept()\"\r\n [multiple]=\"multiple()\"\r\n class=\"hidden\"\r\n (change)=\"onFileSelect($event)\"\r\n />\r\n\r\n <div\r\n class=\"h-12 w-12 rounded-full bg-slate-100 dark:bg-slate-800 flex items-center justify-center mb-2\"\r\n >\r\n <svg\r\n class=\"w-6 h-6 text-slate-500 dark:text-slate-400\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n >\r\n <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"></path>\r\n <polyline points=\"17 8 12 3 7 8\"></polyline>\r\n <line x1=\"12\" y1=\"3\" x2=\"12\" y2=\"15\"></line>\r\n </svg>\r\n </div>\r\n\r\n <div class=\"space-y-1\">\r\n <p class=\"text-sm font-medium text-slate-900 dark:text-white\">\r\n Drag & drop files here, or\r\n <span class=\"text-indigo-600 dark:text-indigo-400 hover:text-indigo-500\">browse</span>\r\n </p>\r\n <p class=\"text-xs text-slate-500 dark:text-slate-400\">\r\n Supports: {{ accept() === '*/*' ? 'All files' : accept() }} (Max\r\n {{ formatBytes(maxSize()) }})\r\n </p>\r\n </div>\r\n </div>\r\n\r\n <!-- File List -->\r\n @if (files().length > 0) {\r\n <div class=\"mt-4 space-y-2\">\r\n @for (file of files(); track file.name) {\r\n <div\r\n class=\"flex items-center justify-between p-3 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-lg shadow-sm\"\r\n >\r\n <div class=\"flex items-center gap-3 overflow-hidden\">\r\n <div\r\n class=\"h-10 w-10 flex-shrink-0 bg-indigo-50 dark:bg-indigo-500/10 rounded-lg flex items-center justify-center text-indigo-600 dark:text-indigo-400 font-bold text-xs uppercase\"\r\n >\r\n {{ file.name.split('.').pop() || 'FILE' }}\r\n </div>\r\n <div class=\"min-w-0\">\r\n <p class=\"text-sm font-medium text-slate-900 dark:text-white truncate\">\r\n {{ file.name }}\r\n </p>\r\n <p class=\"text-xs text-slate-500 dark:text-slate-400\">{{ formatBytes(file.size) }}</p>\r\n </div>\r\n </div>\r\n\r\n <button\r\n (click)=\"removeFile($index, $event)\"\r\n type=\"button\"\r\n class=\"p-1.5 text-slate-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-500/10 rounded-lg transition-colors\"\r\n >\r\n <svg\r\n class=\"w-5 h-5\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n >\r\n <path d=\"M18 6L6 18M6 6l12 12\"></path>\r\n </svg>\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
615
|
+
}
|
|
616
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: UploadComponent, decorators: [{
|
|
617
|
+
type: Component,
|
|
618
|
+
args: [{ selector: 'wdc-upload', imports: [CommonModule], template: "<div class=\"w-full\">\r\n <!-- Drop Zone -->\r\n <div\r\n class=\"border-2 border-dashed rounded-xl p-8 text-center transition-colors cursor-pointer flex flex-col items-center justify-center gap-4 bg-slate-50 dark:bg-slate-900/50\"\r\n [class.border-indigo-500]=\"isDragging()\"\r\n [class.bg-indigo-50]=\"isDragging()\"\r\n [class.dark:bg-indigo-500/10]=\"isDragging()\"\r\n [class.border-slate-300]=\"!isDragging()\"\r\n [class.dark:border-slate-700]=\"!isDragging()\"\r\n (dragover)=\"onDragOver($event)\"\r\n (dragleave)=\"onDragLeave($event)\"\r\n (drop)=\"onDrop($event)\"\r\n (click)=\"fileInput.click()\"\r\n >\r\n <input\r\n #fileInput\r\n type=\"file\"\r\n [accept]=\"accept()\"\r\n [multiple]=\"multiple()\"\r\n class=\"hidden\"\r\n (change)=\"onFileSelect($event)\"\r\n />\r\n\r\n <div\r\n class=\"h-12 w-12 rounded-full bg-slate-100 dark:bg-slate-800 flex items-center justify-center mb-2\"\r\n >\r\n <svg\r\n class=\"w-6 h-6 text-slate-500 dark:text-slate-400\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n >\r\n <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"></path>\r\n <polyline points=\"17 8 12 3 7 8\"></polyline>\r\n <line x1=\"12\" y1=\"3\" x2=\"12\" y2=\"15\"></line>\r\n </svg>\r\n </div>\r\n\r\n <div class=\"space-y-1\">\r\n <p class=\"text-sm font-medium text-slate-900 dark:text-white\">\r\n Drag & drop files here, or\r\n <span class=\"text-indigo-600 dark:text-indigo-400 hover:text-indigo-500\">browse</span>\r\n </p>\r\n <p class=\"text-xs text-slate-500 dark:text-slate-400\">\r\n Supports: {{ accept() === '*/*' ? 'All files' : accept() }} (Max\r\n {{ formatBytes(maxSize()) }})\r\n </p>\r\n </div>\r\n </div>\r\n\r\n <!-- File List -->\r\n @if (files().length > 0) {\r\n <div class=\"mt-4 space-y-2\">\r\n @for (file of files(); track file.name) {\r\n <div\r\n class=\"flex items-center justify-between p-3 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-lg shadow-sm\"\r\n >\r\n <div class=\"flex items-center gap-3 overflow-hidden\">\r\n <div\r\n class=\"h-10 w-10 flex-shrink-0 bg-indigo-50 dark:bg-indigo-500/10 rounded-lg flex items-center justify-center text-indigo-600 dark:text-indigo-400 font-bold text-xs uppercase\"\r\n >\r\n {{ file.name.split('.').pop() || 'FILE' }}\r\n </div>\r\n <div class=\"min-w-0\">\r\n <p class=\"text-sm font-medium text-slate-900 dark:text-white truncate\">\r\n {{ file.name }}\r\n </p>\r\n <p class=\"text-xs text-slate-500 dark:text-slate-400\">{{ formatBytes(file.size) }}</p>\r\n </div>\r\n </div>\r\n\r\n <button\r\n (click)=\"removeFile($index, $event)\"\r\n type=\"button\"\r\n class=\"p-1.5 text-slate-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-500/10 rounded-lg transition-colors\"\r\n >\r\n <svg\r\n class=\"w-5 h-5\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n >\r\n <path d=\"M18 6L6 18M6 6l12 12\"></path>\r\n </svg>\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n" }]
|
|
619
|
+
}], propDecorators: { accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], maxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSize", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], onSelect: [{ type: i0.Output, args: ["onSelect"] }], onUpload: [{ type: i0.Output, args: ["onUpload"] }] } });
|
|
620
|
+
|
|
621
|
+
class WizardComponent {
|
|
622
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: WizardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
623
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.5", type: WizardComponent, isStandalone: true, selector: "wdc-wizard", ngImport: i0, template: "<p>wizard works!</p>\r\n" });
|
|
624
|
+
}
|
|
625
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: WizardComponent, decorators: [{
|
|
626
|
+
type: Component,
|
|
627
|
+
args: [{ selector: 'wdc-wizard', imports: [], template: "<p>wizard works!</p>\r\n" }]
|
|
628
|
+
}] });
|
|
629
|
+
|
|
630
|
+
class DrawerComponent {
|
|
631
|
+
isOpen = model(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
|
|
632
|
+
position = input('right', ...(ngDevMode ? [{ debugName: "position" }] : []));
|
|
633
|
+
close() {
|
|
634
|
+
this.isOpen.set(false);
|
|
635
|
+
}
|
|
636
|
+
get transformParams() {
|
|
637
|
+
return {
|
|
638
|
+
value: this.isOpen(),
|
|
639
|
+
params: {
|
|
640
|
+
transform: this.position() === 'right' ? 'translateX(100%)' : 'translateX(-100%)',
|
|
641
|
+
},
|
|
642
|
+
};
|
|
643
|
+
}
|
|
644
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: DrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
645
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: DrawerComponent, isStandalone: true, selector: "wdc-drawer", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange" }, ngImport: i0, template: "@if (isOpen()) {\r\n <div class=\"relative z-50\" aria-labelledby=\"slide-over-title\" role=\"dialog\" aria-modal=\"true\">\r\n <!-- Backdrop -->\r\n <div\r\n [@fadeAnimation]\r\n class=\"fixed inset-0 bg-slate-900/40 backdrop-blur-sm transition-opacity\"\r\n (click)=\"close()\"\r\n ></div>\r\n\r\n <!-- Panel -->\r\n <div class=\"fixed inset-0 overflow-hidden pointer-events-none\">\r\n <div class=\"absolute inset-0 overflow-hidden\">\r\n <div\r\n class=\"pointer-events-auto fixed inset-y-0 flex max-w-full\"\r\n [class.right-0]=\"position() === 'right'\"\r\n [class.left-0]=\"position() === 'left'\"\r\n [class.pl-10]=\"position() === 'right'\"\r\n [class.sm:pl-16]=\"position() === 'right'\"\r\n [class.pr-10]=\"position() === 'left'\"\r\n [class.sm:pr-16]=\"position() === 'left'\"\r\n >\r\n <div\r\n [@drawerAnimation]=\"transformParams\"\r\n class=\"flex w-screen max-w-md flex-col overflow-y-scroll bg-white dark:bg-slate-900 py-6 shadow-2xl\"\r\n >\r\n <div class=\"px-4 sm:px-6 flex items-center justify-between\">\r\n <h2\r\n class=\"text-base font-semibold leading-6 text-slate-900 dark:text-white\"\r\n id=\"slide-over-title\"\r\n >\r\n <ng-content select=\"[header]\"></ng-content>\r\n </h2>\r\n <button\r\n type=\"button\"\r\n class=\"rounded-md text-slate-400 hover:text-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500\"\r\n (click)=\"close()\"\r\n >\r\n <span class=\"sr-only\">Close panel</span>\r\n <svg\r\n class=\"h-6 w-6\"\r\n fill=\"none\"\r\n viewBox=\"0 0 24 24\"\r\n stroke-width=\"1.5\"\r\n stroke=\"currentColor\"\r\n aria-hidden=\"true\"\r\n >\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\r\n </svg>\r\n </button>\r\n </div>\r\n <div class=\"relative mt-6 flex-1 px-4 sm:px-6 text-slate-600 dark:text-slate-400\">\r\n <ng-content></ng-content>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
646
|
+
}
|
|
647
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: DrawerComponent, decorators: [{
|
|
648
|
+
type: Component,
|
|
649
|
+
args: [{ selector: 'wdc-drawer', imports: [CommonModule], template: "@if (isOpen()) {\r\n <div class=\"relative z-50\" aria-labelledby=\"slide-over-title\" role=\"dialog\" aria-modal=\"true\">\r\n <!-- Backdrop -->\r\n <div\r\n [@fadeAnimation]\r\n class=\"fixed inset-0 bg-slate-900/40 backdrop-blur-sm transition-opacity\"\r\n (click)=\"close()\"\r\n ></div>\r\n\r\n <!-- Panel -->\r\n <div class=\"fixed inset-0 overflow-hidden pointer-events-none\">\r\n <div class=\"absolute inset-0 overflow-hidden\">\r\n <div\r\n class=\"pointer-events-auto fixed inset-y-0 flex max-w-full\"\r\n [class.right-0]=\"position() === 'right'\"\r\n [class.left-0]=\"position() === 'left'\"\r\n [class.pl-10]=\"position() === 'right'\"\r\n [class.sm:pl-16]=\"position() === 'right'\"\r\n [class.pr-10]=\"position() === 'left'\"\r\n [class.sm:pr-16]=\"position() === 'left'\"\r\n >\r\n <div\r\n [@drawerAnimation]=\"transformParams\"\r\n class=\"flex w-screen max-w-md flex-col overflow-y-scroll bg-white dark:bg-slate-900 py-6 shadow-2xl\"\r\n >\r\n <div class=\"px-4 sm:px-6 flex items-center justify-between\">\r\n <h2\r\n class=\"text-base font-semibold leading-6 text-slate-900 dark:text-white\"\r\n id=\"slide-over-title\"\r\n >\r\n <ng-content select=\"[header]\"></ng-content>\r\n </h2>\r\n <button\r\n type=\"button\"\r\n class=\"rounded-md text-slate-400 hover:text-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500\"\r\n (click)=\"close()\"\r\n >\r\n <span class=\"sr-only\">Close panel</span>\r\n <svg\r\n class=\"h-6 w-6\"\r\n fill=\"none\"\r\n viewBox=\"0 0 24 24\"\r\n stroke-width=\"1.5\"\r\n stroke=\"currentColor\"\r\n aria-hidden=\"true\"\r\n >\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\r\n </svg>\r\n </button>\r\n </div>\r\n <div class=\"relative mt-6 flex-1 px-4 sm:px-6 text-slate-600 dark:text-slate-400\">\r\n <ng-content></ng-content>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n}\r\n" }]
|
|
650
|
+
}], propDecorators: { isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }, { type: i0.Output, args: ["isOpenChange"] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }] } });
|
|
651
|
+
|
|
652
|
+
class CarouselComponent {
|
|
653
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: CarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
654
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.5", type: CarouselComponent, isStandalone: true, selector: "wdc-carousel", ngImport: i0, template: "<p>carousel works!</p>\r\n" });
|
|
655
|
+
}
|
|
656
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: CarouselComponent, decorators: [{
|
|
657
|
+
type: Component,
|
|
658
|
+
args: [{ selector: 'wdc-carousel', imports: [], template: "<p>carousel works!</p>\r\n" }]
|
|
659
|
+
}] });
|
|
660
|
+
|
|
661
|
+
class ConfirmService {
|
|
662
|
+
_state = signal(null, ...(ngDevMode ? [{ debugName: "_state" }] : []));
|
|
663
|
+
state = this._state.asReadonly();
|
|
664
|
+
confirm(confirmation) {
|
|
665
|
+
this._state.set(confirmation);
|
|
666
|
+
}
|
|
667
|
+
close() {
|
|
668
|
+
this._state.set(null);
|
|
669
|
+
}
|
|
670
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: ConfirmService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
671
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: ConfirmService, providedIn: 'root' });
|
|
672
|
+
}
|
|
673
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: ConfirmService, decorators: [{
|
|
674
|
+
type: Injectable,
|
|
675
|
+
args: [{
|
|
676
|
+
providedIn: 'root'
|
|
677
|
+
}]
|
|
678
|
+
}] });
|
|
679
|
+
|
|
680
|
+
class ConfirmDialogComponent {
|
|
681
|
+
confirmService = inject(ConfirmService);
|
|
682
|
+
state = this.confirmService.state;
|
|
683
|
+
onClose() {
|
|
684
|
+
this.confirmService.close();
|
|
685
|
+
}
|
|
686
|
+
onAccept() {
|
|
687
|
+
this.state()?.accept?.();
|
|
688
|
+
this.confirmService.close();
|
|
689
|
+
}
|
|
690
|
+
onReject() {
|
|
691
|
+
this.state()?.reject?.();
|
|
692
|
+
this.confirmService.close();
|
|
693
|
+
}
|
|
694
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: ConfirmDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
695
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: ConfirmDialogComponent, isStandalone: true, selector: "wdc-confirm-dialog", ngImport: i0, template: "<wdc-modal\r\n [isOpen]=\"!!state()\"\r\n (isOpenChange)=\"!$event && onClose()\"\r\n [title]=\"state()?.header || 'Confirmation'\"\r\n size=\"sm\"\r\n>\r\n <div class=\"flex items-start gap-4\">\r\n @if (state()?.icon) {\r\n <div class=\"flex-shrink-0 text-amber-500\">\r\n <i [class]=\"state()?.icon\" class=\"text-2xl\"></i>\r\n </div>\r\n }\r\n <div class=\"text-slate-600 dark:text-slate-400\">\r\n {{ state()?.message }}\r\n </div>\r\n </div>\r\n\r\n <div class=\"mt-6 flex justify-end gap-3\">\r\n <wdc-button variant=\"light\" (click)=\"onReject()\">\r\n {{ state()?.rejectLabel || 'Cancel' }}\r\n </wdc-button>\r\n <wdc-button (click)=\"onAccept()\">\r\n {{ state()?.acceptLabel || 'Confirm' }}\r\n </wdc-button>\r\n </div>\r\n</wdc-modal>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ButtonComponent, selector: "wdc-button", inputs: ["variant", "size", "block", "outline", "loading", "rounded", "iconOnly", "disabled", "type", "icon"], outputs: ["clicked"] }, { kind: "component", type: ModalComponent, selector: "wdc-modal", inputs: ["title", "size", "isOpen", "closeOnBackdropClick"], outputs: ["isOpenChange", "onClose"] }] });
|
|
696
|
+
}
|
|
697
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: ConfirmDialogComponent, decorators: [{
|
|
698
|
+
type: Component,
|
|
699
|
+
args: [{ selector: 'wdc-confirm-dialog', imports: [CommonModule, ButtonComponent, ModalComponent], template: "<wdc-modal\r\n [isOpen]=\"!!state()\"\r\n (isOpenChange)=\"!$event && onClose()\"\r\n [title]=\"state()?.header || 'Confirmation'\"\r\n size=\"sm\"\r\n>\r\n <div class=\"flex items-start gap-4\">\r\n @if (state()?.icon) {\r\n <div class=\"flex-shrink-0 text-amber-500\">\r\n <i [class]=\"state()?.icon\" class=\"text-2xl\"></i>\r\n </div>\r\n }\r\n <div class=\"text-slate-600 dark:text-slate-400\">\r\n {{ state()?.message }}\r\n </div>\r\n </div>\r\n\r\n <div class=\"mt-6 flex justify-end gap-3\">\r\n <wdc-button variant=\"light\" (click)=\"onReject()\">\r\n {{ state()?.rejectLabel || 'Cancel' }}\r\n </wdc-button>\r\n <wdc-button (click)=\"onAccept()\">\r\n {{ state()?.acceptLabel || 'Confirm' }}\r\n </wdc-button>\r\n </div>\r\n</wdc-modal>\r\n" }]
|
|
700
|
+
}] });
|
|
701
|
+
|
|
702
|
+
class PageLoaderComponent {
|
|
703
|
+
message = input('', ...(ngDevMode ? [{ debugName: "message" }] : []));
|
|
704
|
+
fullScreen = input(true, ...(ngDevMode ? [{ debugName: "fullScreen" }] : []));
|
|
705
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: PageLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
706
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: PageLoaderComponent, isStandalone: true, selector: "wdc-page-loader", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, fullScreen: { classPropertyName: "fullScreen", publicName: "fullScreen", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\r\n class=\"fixed inset-0 z-50 flex flex-col items-center justify-center bg-white/80 dark:bg-slate-900/80 backdrop-blur-md transition-all duration-300\"\r\n [class.absolute]=\"!fullScreen()\"\r\n [class.fixed]=\"fullScreen()\"\r\n>\r\n <wdc-spinner size=\"lg\" color=\"primary\"></wdc-spinner>\r\n @if (message()) {\r\n <p class=\"mt-4 text-sm font-medium text-slate-600 dark:text-slate-400 animate-pulse\">\r\n {{ message() }}\r\n </p>\r\n }\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: SpinnerComponent, selector: "wdc-spinner", inputs: ["size", "color"] }] });
|
|
707
|
+
}
|
|
708
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: PageLoaderComponent, decorators: [{
|
|
709
|
+
type: Component,
|
|
710
|
+
args: [{ selector: 'wdc-page-loader', imports: [CommonModule, SpinnerComponent], template: "<div\r\n class=\"fixed inset-0 z-50 flex flex-col items-center justify-center bg-white/80 dark:bg-slate-900/80 backdrop-blur-md transition-all duration-300\"\r\n [class.absolute]=\"!fullScreen()\"\r\n [class.fixed]=\"fullScreen()\"\r\n>\r\n <wdc-spinner size=\"lg\" color=\"primary\"></wdc-spinner>\r\n @if (message()) {\r\n <p class=\"mt-4 text-sm font-medium text-slate-600 dark:text-slate-400 animate-pulse\">\r\n {{ message() }}\r\n </p>\r\n }\r\n</div>\r\n" }]
|
|
711
|
+
}], propDecorators: { message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], fullScreen: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullScreen", required: false }] }] } });
|
|
712
|
+
|
|
713
|
+
/**
|
|
714
|
+
* Generated bundle index. Do not edit.
|
|
715
|
+
*/
|
|
716
|
+
|
|
717
|
+
export { AvatarComponent, BadgeComponent, ButtonComponent, CardComponent, CarouselComponent, ChartComponent, ConfirmDialogComponent, ConfirmService, DrawerComponent, IconsComponent, ModalComponent, NavbarComponent, PageLoaderComponent, ProgressBarComponent, SpinnerComponent, StatCardComponent, TabComponent, TableComponent, TabsComponent, ToastComponent, ToastService, UploadComponent, WizardComponent };
|
|
718
|
+
//# sourceMappingURL=wdcoders-ui-ng.mjs.map
|