codexly-ui 0.0.29 → 0.0.31
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/fesm2022/codexly-ui.mjs +414 -311
- package/fesm2022/codexly-ui.mjs.map +1 -1
- package/index.d.ts +18 -8
- package/package.json +1 -1
package/fesm2022/codexly-ui.mjs
CHANGED
|
@@ -11,6 +11,7 @@ import { Chart, LineController, BarController, PieController, DoughnutController
|
|
|
11
11
|
import * as i1$2 from '@angular/cdk/portal';
|
|
12
12
|
import { PortalModule, ComponentPortal } from '@angular/cdk/portal';
|
|
13
13
|
import { FocusTrapFactory } from '@angular/cdk/a11y';
|
|
14
|
+
import { RouterLink, RouterLinkActive } from '@angular/router';
|
|
14
15
|
|
|
15
16
|
// ── Parse 'red' | 'red-500' → { color, shade } ───────────────────────────────
|
|
16
17
|
function parseColorInput(input) {
|
|
@@ -175,10 +176,10 @@ class ClxBadgeComponent {
|
|
|
175
176
|
colorClass = `border ${t.border} ${t.textSubtle} bg-transparent`;
|
|
176
177
|
return `inline-flex items-center justify-center leading-none ${colorClass} ${sizeClass} ${shapeClass} ${posClass}`.trim();
|
|
177
178
|
}, ...(ngDevMode ? [{ debugName: "_hostClass" }] : []));
|
|
178
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
179
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.
|
|
179
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
180
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.23", type: ClxBadgeComponent, isStandalone: true, selector: "span[clx-badge]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, positioned: { classPropertyName: "positioned", publicName: "positioned", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_hostClass()" } }, ngImport: i0, template: '<ng-content />', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
180
181
|
}
|
|
181
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
182
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxBadgeComponent, decorators: [{
|
|
182
183
|
type: Component,
|
|
183
184
|
args: [{
|
|
184
185
|
selector: 'span[clx-badge]',
|
|
@@ -221,10 +222,10 @@ class ClxIconComponent {
|
|
|
221
222
|
const opsz = ICON_SIZE_OPSZ[this.size()];
|
|
222
223
|
return `'FILL' ${this.fill() ? 1 : 0}, 'wght' 400, 'GRAD' 0, 'opsz' ${opsz}`;
|
|
223
224
|
}, ...(ngDevMode ? [{ debugName: "_fontVariation" }] : []));
|
|
224
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
225
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.
|
|
225
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
226
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.23", type: ClxIconComponent, isStandalone: true, selector: "span[clx-icon]", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_colorClass()", "textContent": "name()", "style.font-size": "_fontSize()", "style.font-variation-settings": "_fontVariation()" }, classAttribute: "material-symbols-outlined" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
226
227
|
}
|
|
227
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
228
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxIconComponent, decorators: [{
|
|
228
229
|
type: Component,
|
|
229
230
|
args: [{
|
|
230
231
|
selector: 'span[clx-icon]',
|
|
@@ -330,8 +331,8 @@ class ClxStatCardComponent {
|
|
|
330
331
|
d += ' Z';
|
|
331
332
|
return d;
|
|
332
333
|
}
|
|
333
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
334
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
334
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxStatCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
335
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", type: ClxStatCardComponent, isStandalone: true, selector: "clx-stat-card", inputs: { metric: { classPropertyName: "metric", publicName: "metric", isSignal: true, isRequired: true, transformFunction: null }, chartData: { classPropertyName: "chartData", publicName: "chartData", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_hostClass()" } }, ngImport: i0, template: `
|
|
335
336
|
@if (layout() === 'horizontal') {
|
|
336
337
|
<!-- Icon -->
|
|
337
338
|
<div class="shrink-0 w-12 h-12 rounded-xl flex items-center justify-center" [class]="_iconBg()">
|
|
@@ -423,7 +424,7 @@ class ClxStatCardComponent {
|
|
|
423
424
|
}
|
|
424
425
|
`, isInline: true, dependencies: [{ kind: "component", type: ClxBadgeComponent, selector: "span[clx-badge]", inputs: ["variant", "color", "size", "shape", "positioned"] }, { kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
425
426
|
}
|
|
426
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
427
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxStatCardComponent, decorators: [{
|
|
427
428
|
type: Component,
|
|
428
429
|
args: [{
|
|
429
430
|
selector: 'clx-stat-card',
|
|
@@ -623,8 +624,8 @@ class ClxSpinnerComponent {
|
|
|
623
624
|
return 'bg-current';
|
|
624
625
|
return resolveColor(this.color()).bg;
|
|
625
626
|
}, ...(ngDevMode ? [{ debugName: "_pulseColorClass" }] : []));
|
|
626
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
627
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
627
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
628
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", type: ClxSpinnerComponent, isStandalone: true, selector: "clx-spinner", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "inline-flex items-center justify-center" }, ngImport: i0, template: `
|
|
628
629
|
@switch (variant()) {
|
|
629
630
|
|
|
630
631
|
@case ('spinner') {
|
|
@@ -649,7 +650,7 @@ class ClxSpinnerComponent {
|
|
|
649
650
|
}
|
|
650
651
|
`, isInline: true, styles: ["@keyframes clx-dot-bounce{0%{transform:translateY(0);opacity:.4}to{transform:translateY(-40%);opacity:1}}.clx-dot-bounce{animation:clx-dot-bounce .6s ease-in-out infinite alternate}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
651
652
|
}
|
|
652
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
653
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxSpinnerComponent, decorators: [{
|
|
653
654
|
type: Component,
|
|
654
655
|
args: [{ selector: 'clx-spinner', standalone: true, template: `
|
|
655
656
|
@switch (variant()) {
|
|
@@ -756,8 +757,8 @@ class ClxButtonComponent {
|
|
|
756
757
|
this._ripples.update(rs => [...rs, { id, x: e.clientX - rect.left, y: e.clientY - rect.top, diameter }]);
|
|
757
758
|
setTimeout(() => this._ripples.update(rs => rs.filter(r => r.id !== id)), 650);
|
|
758
759
|
}
|
|
759
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
760
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
760
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
761
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", type: ClxButtonComponent, isStandalone: true, selector: "button[clx-button], a[clx-button]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", 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 }, block: { classPropertyName: "block", publicName: "block", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "_onRipple($event)" }, properties: { "class": "_hostClass()", "style.opacity": "_inactive() ? \"0.5\" : null", "style.cursor": "_inactive() ? \"not-allowed\" : \"pointer\"", "attr.disabled": "_inactive() ? true : null", "attr.aria-busy": "loading()" } }, ngImport: i0, template: `
|
|
761
762
|
@if (icon() && iconPosition() === 'left' && !loading()) {
|
|
762
763
|
<span clx-icon [name]="icon()!" [size]="_iconSize()"></span>
|
|
763
764
|
}
|
|
@@ -780,7 +781,7 @@ class ClxButtonComponent {
|
|
|
780
781
|
}
|
|
781
782
|
`, isInline: true, styles: ["@keyframes clx-ripple-anim{to{transform:scale(4);opacity:0}}.clx-ripple-wave{position:absolute;border-radius:50%;transform:scale(0);animation:clx-ripple-anim .6s linear;pointer-events:none}\n"], dependencies: [{ kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }, { kind: "component", type: ClxSpinnerComponent, selector: "clx-spinner", inputs: ["size", "color", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
782
783
|
}
|
|
783
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
784
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxButtonComponent, decorators: [{
|
|
784
785
|
type: Component,
|
|
785
786
|
args: [{ selector: 'button[clx-button], a[clx-button]', standalone: true, imports: [ClxIconComponent, ClxSpinnerComponent], template: `
|
|
786
787
|
@if (icon() && iconPosition() === 'left' && !loading()) {
|
|
@@ -852,10 +853,10 @@ class ClxSkeletonComponent {
|
|
|
852
853
|
}, ...(ngDevMode ? [{ debugName: "_hostClass" }] : []));
|
|
853
854
|
_hostWidth = computed(() => this.variant() === 'circular' ? null : this.width(), ...(ngDevMode ? [{ debugName: "_hostWidth" }] : []));
|
|
854
855
|
_hostHeight = computed(() => this.variant() === 'circular' ? null : this.height(), ...(ngDevMode ? [{ debugName: "_hostHeight" }] : []));
|
|
855
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
856
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.
|
|
856
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
857
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.23", type: ClxSkeletonComponent, isStandalone: true, selector: "clx-skeleton", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_hostClass()", "style.width": "_hostWidth()", "style.height": "_hostHeight()" } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
857
858
|
}
|
|
858
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
859
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxSkeletonComponent, decorators: [{
|
|
859
860
|
type: Component,
|
|
860
861
|
args: [{
|
|
861
862
|
selector: 'clx-skeleton',
|
|
@@ -1041,10 +1042,10 @@ class ClxAnimateService {
|
|
|
1041
1042
|
element.style.removeProperty('animation-fill-mode');
|
|
1042
1043
|
this._cleanups.delete(element);
|
|
1043
1044
|
}
|
|
1044
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1045
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.
|
|
1045
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxAnimateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1046
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxAnimateService, providedIn: 'root' });
|
|
1046
1047
|
}
|
|
1047
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1048
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxAnimateService, decorators: [{
|
|
1048
1049
|
type: Injectable,
|
|
1049
1050
|
args: [{ providedIn: 'root' }]
|
|
1050
1051
|
}], ctorParameters: () => [] });
|
|
@@ -1063,10 +1064,10 @@ class ClxTooltipComponent {
|
|
|
1063
1064
|
const t = resolveColor(this.color());
|
|
1064
1065
|
return `${t.text} rounded-lg shadow-xl ${t.bg} ${TOOLTIP_SIZE_MAP[this.size()]}`;
|
|
1065
1066
|
}, ...(ngDevMode ? [{ debugName: "_hostClass" }] : []));
|
|
1066
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1067
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.
|
|
1067
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1068
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.23", type: ClxTooltipComponent, isStandalone: true, selector: "clx-tooltip", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "tooltip" }, properties: { "class": "_hostClass()" } }, ngImport: i0, template: `<span class="whitespace-pre-wrap leading-snug">{{ text() }}</span>`, isInline: true, styles: ["clx-tooltip{position:absolute;display:inline-flex;align-items:center;justify-content:center;pointer-events:none;will-change:opacity,transform}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1068
1069
|
}
|
|
1069
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1070
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxTooltipComponent, decorators: [{
|
|
1070
1071
|
type: Component,
|
|
1071
1072
|
args: [{ selector: 'clx-tooltip', standalone: true, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
1072
1073
|
'role': 'tooltip',
|
|
@@ -1287,10 +1288,10 @@ class ClxTooltipDirective {
|
|
|
1287
1288
|
this._clearShow();
|
|
1288
1289
|
this._clearHide();
|
|
1289
1290
|
}
|
|
1290
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1291
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.
|
|
1291
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
1292
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.23", type: ClxTooltipDirective, isStandalone: true, selector: "[clxTooltip]", inputs: { clxTooltip: { classPropertyName: "clxTooltip", publicName: "clxTooltip", isSignal: true, isRequired: true, transformFunction: null }, clxTooltipPosition: { classPropertyName: "clxTooltipPosition", publicName: "clxTooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, clxTooltipColor: { classPropertyName: "clxTooltipColor", publicName: "clxTooltipColor", isSignal: true, isRequired: false, transformFunction: null }, clxTooltipSize: { classPropertyName: "clxTooltipSize", publicName: "clxTooltipSize", isSignal: true, isRequired: false, transformFunction: null }, clxTooltipDelay: { classPropertyName: "clxTooltipDelay", publicName: "clxTooltipDelay", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
|
|
1292
1293
|
}
|
|
1293
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1294
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxTooltipDirective, decorators: [{
|
|
1294
1295
|
type: Directive,
|
|
1295
1296
|
args: [{
|
|
1296
1297
|
selector: '[clxTooltip]',
|
|
@@ -1342,8 +1343,8 @@ class ClxProductComponent {
|
|
|
1342
1343
|
const color = this._disabled() ? 'text-slate-400' : 'text-slate-900';
|
|
1343
1344
|
return `${sz} font-bold ${color}`;
|
|
1344
1345
|
}, ...(ngDevMode ? [{ debugName: "_priceClass" }] : []));
|
|
1345
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1346
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
1346
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxProductComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1347
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", type: ClxProductComponent, isStandalone: true, selector: "clx-product", inputs: { product: { classPropertyName: "product", publicName: "product", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, priority: { classPropertyName: "priority", publicName: "priority", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, clxColor: { classPropertyName: "clxColor", publicName: "clxColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { addToCart: "addToCart", addToWishlist: "addToWishlist" }, ngImport: i0, template: `
|
|
1347
1348
|
@if (loading()) {
|
|
1348
1349
|
@if (_h()) {
|
|
1349
1350
|
<!-- Skeleton Horizontal -->
|
|
@@ -1470,7 +1471,7 @@ class ClxProductComponent {
|
|
|
1470
1471
|
}
|
|
1471
1472
|
`, isInline: true, dependencies: [{ kind: "component", type: ClxBadgeComponent, selector: "span[clx-badge]", inputs: ["variant", "color", "size", "shape", "positioned"] }, { kind: "component", type: ClxButtonComponent, selector: "button[clx-button], a[clx-button]", inputs: ["variant", "color", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly"] }, { kind: "component", type: ClxSkeletonComponent, selector: "clx-skeleton", inputs: ["variant", "size", "width", "height"] }, { kind: "directive", type: ClxTooltipDirective, selector: "[clxTooltip]", inputs: ["clxTooltip", "clxTooltipPosition", "clxTooltipColor", "clxTooltipSize", "clxTooltipDelay"] }, { kind: "pipe", type: CurrencyPipe, name: "currency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1472
1473
|
}
|
|
1473
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1474
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxProductComponent, decorators: [{
|
|
1474
1475
|
type: Component,
|
|
1475
1476
|
args: [{
|
|
1476
1477
|
selector: 'clx-product',
|
|
@@ -1618,8 +1619,8 @@ class ClxButtonGroupComponent {
|
|
|
1618
1619
|
const gap = this.attached() ? 'gap-0' : 'gap-2';
|
|
1619
1620
|
return `inline-flex items-center ${dir} ${gap}`;
|
|
1620
1621
|
}, ...(ngDevMode ? [{ debugName: "_groupClass" }] : []));
|
|
1621
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1622
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
1622
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1623
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", type: ClxButtonGroupComponent, isStandalone: true, selector: "clx-button-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, attached: { classPropertyName: "attached", publicName: "attached", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "flex flex-col gap-1.5" }, ngImport: i0, template: `
|
|
1623
1624
|
@if (label()) {
|
|
1624
1625
|
<span class="text-sm font-medium text-slate-700 leading-none">{{ label() }}</span>
|
|
1625
1626
|
}
|
|
@@ -1628,7 +1629,7 @@ class ClxButtonGroupComponent {
|
|
|
1628
1629
|
</div>
|
|
1629
1630
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1630
1631
|
}
|
|
1631
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1632
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxButtonGroupComponent, decorators: [{
|
|
1632
1633
|
type: Component,
|
|
1633
1634
|
args: [{
|
|
1634
1635
|
selector: 'clx-button-group',
|
|
@@ -1667,14 +1668,14 @@ class ClxRatingComponent {
|
|
|
1667
1668
|
return { idx: i, icon, fill };
|
|
1668
1669
|
});
|
|
1669
1670
|
}, ...(ngDevMode ? [{ debugName: "_stars" }] : []));
|
|
1670
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1671
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
1671
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxRatingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1672
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", type: ClxRatingComponent, isStandalone: true, selector: "clx-rating", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-label": "\"Rating: \" + value() + \" out of \" + max()" }, classAttribute: "inline-flex items-center gap-0.5" }, ngImport: i0, template: `
|
|
1672
1673
|
@for (star of _stars(); track star.idx) {
|
|
1673
1674
|
<span clx-icon [name]="star.icon" size="sm" [fill]="star.fill" [style.color]="_hexColor()"></span>
|
|
1674
1675
|
}
|
|
1675
1676
|
`, isInline: true, dependencies: [{ kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1676
1677
|
}
|
|
1677
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1678
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxRatingComponent, decorators: [{
|
|
1678
1679
|
type: Component,
|
|
1679
1680
|
args: [{
|
|
1680
1681
|
selector: 'clx-rating',
|
|
@@ -1699,10 +1700,10 @@ class ClxCarouselDirective {
|
|
|
1699
1700
|
constructor(templateRef) {
|
|
1700
1701
|
this.templateRef = templateRef;
|
|
1701
1702
|
}
|
|
1702
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1703
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.
|
|
1703
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxCarouselDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
1704
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.23", type: ClxCarouselDirective, isStandalone: true, selector: "[clxSlide]", ngImport: i0 });
|
|
1704
1705
|
}
|
|
1705
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1706
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxCarouselDirective, decorators: [{
|
|
1706
1707
|
type: Directive,
|
|
1707
1708
|
args: [{
|
|
1708
1709
|
selector: '[clxSlide]',
|
|
@@ -1729,7 +1730,7 @@ class ClxCarouselComponent {
|
|
|
1729
1730
|
_slides = contentChildren(ClxCarouselDirective, ...(ngDevMode ? [{ debugName: "_slides" }] : []));
|
|
1730
1731
|
_autoPlayTimer = null;
|
|
1731
1732
|
_touchStartX = 0;
|
|
1732
|
-
_zone = inject(NgZone);
|
|
1733
|
+
_zone = inject(NgZone, { optional: true }) ?? { run: (fn) => fn(), runOutsideAngular: (fn) => fn() };
|
|
1733
1734
|
_aspectClass = computed(() => CAROUSEL_ASPECT_RATIO_MAP[this.aspectRatio()] ?? '', ...(ngDevMode ? [{ debugName: "_aspectClass" }] : []));
|
|
1734
1735
|
_viewportClass = computed(() => {
|
|
1735
1736
|
const base = this._aspectClass();
|
|
@@ -1819,8 +1820,8 @@ class ClxCarouselComponent {
|
|
|
1819
1820
|
this._autoPlayTimer = null;
|
|
1820
1821
|
}
|
|
1821
1822
|
}
|
|
1822
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1823
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
1823
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxCarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1824
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", type: ClxCarouselComponent, isStandalone: true, selector: "clx-carousel", inputs: { clxColor: { classPropertyName: "clxColor", publicName: "clxColor", isSignal: true, isRequired: false, transformFunction: null }, autoPlay: { classPropertyName: "autoPlay", publicName: "autoPlay", isSignal: true, isRequired: false, transformFunction: null }, interval: { classPropertyName: "interval", publicName: "interval", isSignal: true, isRequired: false, transformFunction: null }, loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null }, aspectRatio: { classPropertyName: "aspectRatio", publicName: "aspectRatio", isSignal: true, isRequired: false, transformFunction: null }, transparent: { classPropertyName: "transparent", publicName: "transparent", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "_slides", predicate: ClxCarouselDirective, isSignal: true }], ngImport: i0, template: `
|
|
1824
1825
|
<!-- Viewport -->
|
|
1825
1826
|
<div class="relative w-full overflow-hidden rounded-2xl"
|
|
1826
1827
|
[class]="_viewportClass()"
|
|
@@ -1884,7 +1885,7 @@ class ClxCarouselComponent {
|
|
|
1884
1885
|
</div>
|
|
1885
1886
|
`, isInline: true, styles: ["clx-carousel{display:block;width:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ClxButtonComponent, selector: "button[clx-button], a[clx-button]", inputs: ["variant", "color", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly"] }, { kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1886
1887
|
}
|
|
1887
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1888
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxCarouselComponent, decorators: [{
|
|
1888
1889
|
type: Component,
|
|
1889
1890
|
args: [{ selector: 'clx-carousel', standalone: true, imports: [NgTemplateOutlet, ClxButtonComponent, ClxIconComponent], template: `
|
|
1890
1891
|
<!-- Viewport -->
|
|
@@ -1957,10 +1958,10 @@ class ClxTabDirective {
|
|
|
1957
1958
|
constructor(templateRef) {
|
|
1958
1959
|
this.templateRef = templateRef;
|
|
1959
1960
|
}
|
|
1960
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1961
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.
|
|
1961
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxTabDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
1962
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.23", type: ClxTabDirective, isStandalone: true, selector: "[clxTabPanel]", inputs: { clxTabPanel: { classPropertyName: "clxTabPanel", publicName: "clxTabPanel", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
|
|
1962
1963
|
}
|
|
1963
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1964
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxTabDirective, decorators: [{
|
|
1964
1965
|
type: Directive,
|
|
1965
1966
|
args: [{
|
|
1966
1967
|
selector: '[clxTabPanel]',
|
|
@@ -1974,8 +1975,8 @@ class ClxTabsComponent {
|
|
|
1974
1975
|
activeTab = model('', ...(ngDevMode ? [{ debugName: "activeTab" }] : []));
|
|
1975
1976
|
_panels = contentChildren(ClxTabDirective, ...(ngDevMode ? [{ debugName: "_panels" }] : []));
|
|
1976
1977
|
_underlineClass = computed(() => resolveColor(this.clxColor()).bg, ...(ngDevMode ? [{ debugName: "_underlineClass" }] : []));
|
|
1977
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1978
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
1978
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1979
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", type: ClxTabsComponent, isStandalone: true, selector: "clx-tabs", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, clxColor: { classPropertyName: "clxColor", publicName: "clxColor", isSignal: true, isRequired: false, transformFunction: null }, activeTab: { classPropertyName: "activeTab", publicName: "activeTab", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeTab: "activeTabChange" }, queries: [{ propertyName: "_panels", predicate: ClxTabDirective, isSignal: true }], ngImport: i0, template: `
|
|
1979
1980
|
<!-- Tab bar -->
|
|
1980
1981
|
<div class="flex flex-wrap items-end border-b border-slate-200 gap-3" role="tablist">
|
|
1981
1982
|
@for (tab of tabs(); track tab.id) {
|
|
@@ -2013,7 +2014,7 @@ class ClxTabsComponent {
|
|
|
2013
2014
|
</div>
|
|
2014
2015
|
`, isInline: true, styles: ["clx-tabs{display:block}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }, { kind: "component", type: ClxButtonComponent, selector: "button[clx-button], a[clx-button]", inputs: ["variant", "color", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
2015
2016
|
}
|
|
2016
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
2017
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxTabsComponent, decorators: [{
|
|
2017
2018
|
type: Component,
|
|
2018
2019
|
args: [{ selector: 'clx-tabs', standalone: true, imports: [NgTemplateOutlet, ClxIconComponent, ClxButtonComponent], template: `
|
|
2019
2020
|
<!-- Tab bar -->
|
|
@@ -2197,8 +2198,8 @@ class ClxNumberComponent {
|
|
|
2197
2198
|
this._value.set(v);
|
|
2198
2199
|
this._onChange(v);
|
|
2199
2200
|
}
|
|
2200
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
2201
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
2201
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2202
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", type: ClxNumberComponent, isStandalone: true, selector: "clx-number", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.opacity": "_disabled() ? \"0.6\" : null" }, classAttribute: "flex flex-col gap-1.5" }, providers: [
|
|
2202
2203
|
{
|
|
2203
2204
|
provide: NG_VALUE_ACCESSOR,
|
|
2204
2205
|
useExisting: forwardRef(() => ClxNumberComponent),
|
|
@@ -2309,7 +2310,7 @@ class ClxNumberComponent {
|
|
|
2309
2310
|
}
|
|
2310
2311
|
`, isInline: true, styles: [".clx-number-native::-webkit-inner-spin-button,.clx-number-native::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.clx-number-native{-moz-appearance:textfield;appearance:textfield}\n"], dependencies: [{ kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }, { kind: "component", type: ClxButtonComponent, selector: "button[clx-button], a[clx-button]", inputs: ["variant", "color", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
2311
2312
|
}
|
|
2312
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
2313
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxNumberComponent, decorators: [{
|
|
2313
2314
|
type: Component,
|
|
2314
2315
|
args: [{ selector: 'clx-number', standalone: true, imports: [ClxIconComponent, ClxButtonComponent], providers: [
|
|
2315
2316
|
{
|
|
@@ -2476,8 +2477,8 @@ class ClxListComponent {
|
|
|
2476
2477
|
return `flex items-center gap-2 px-4 py-3 border-b ${t.borderLight} text-sm font-semibold ${t.textSubtle}`;
|
|
2477
2478
|
}, ...(ngDevMode ? [{ debugName: "_headerClass" }] : []));
|
|
2478
2479
|
registerItem() { return ++this._itemCounter; }
|
|
2479
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
2480
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
2480
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2481
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", type: ClxListComponent, isStandalone: true, selector: "clx-list", inputs: { color: { classPropertyName: "color", publicName: "color", 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 }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, headerIcon: { classPropertyName: "headerIcon", publicName: "headerIcon", isSignal: true, isRequired: false, transformFunction: null }, numbered: { classPropertyName: "numbered", publicName: "numbered", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "list" }, properties: { "class": "_hostClass()" } }, providers: [
|
|
2481
2482
|
{ provide: CLX_LIST_CONTEXT, useExisting: forwardRef(() => ClxListComponent) },
|
|
2482
2483
|
], ngImport: i0, template: `
|
|
2483
2484
|
@if (label()) {
|
|
@@ -2491,7 +2492,7 @@ class ClxListComponent {
|
|
|
2491
2492
|
<ng-content />
|
|
2492
2493
|
`, isInline: true, dependencies: [{ kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
2493
2494
|
}
|
|
2494
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
2495
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxListComponent, decorators: [{
|
|
2495
2496
|
type: Component,
|
|
2496
2497
|
args: [{
|
|
2497
2498
|
selector: 'clx-list',
|
|
@@ -2551,8 +2552,8 @@ class ClxListItemComponent {
|
|
|
2551
2552
|
const { meta } = this._ctx.sizeTokens();
|
|
2552
2553
|
return `shrink-0 px-2 py-0.5 rounded-full font-medium ${t.bgSubtle} ${t.textSubtle} ${meta}`;
|
|
2553
2554
|
}, ...(ngDevMode ? [{ debugName: "_metaClass" }] : []));
|
|
2554
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
2555
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
2555
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2556
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", type: ClxListItemComponent, isStandalone: true, selector: "clx-list-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, sublabel: { classPropertyName: "sublabel", publicName: "sublabel", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, metaColor: { classPropertyName: "metaColor", publicName: "metaColor", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "listitem" }, properties: { "class": "_hostClass()", "attr.aria-disabled": "disabled() || null" } }, ngImport: i0, template: `
|
|
2556
2557
|
@if (_ctx.numbered()) {
|
|
2557
2558
|
<span [class]="_numberClass()">{{ _index }}</span>
|
|
2558
2559
|
} @else if (icon()) {
|
|
@@ -2581,7 +2582,7 @@ class ClxListItemComponent {
|
|
|
2581
2582
|
<ng-content />
|
|
2582
2583
|
`, isInline: true, dependencies: [{ kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
2583
2584
|
}
|
|
2584
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
2585
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxListItemComponent, decorators: [{
|
|
2585
2586
|
type: Component,
|
|
2586
2587
|
args: [{
|
|
2587
2588
|
selector: 'clx-list-item',
|
|
@@ -2698,10 +2699,10 @@ class ClxProductDetailComponent {
|
|
|
2698
2699
|
asColor(value) { return value; }
|
|
2699
2700
|
specsLeft(specs) { return specs.slice(0, Math.ceil(specs.length / 2)); }
|
|
2700
2701
|
specsRight(specs) { return specs.slice(Math.ceil(specs.length / 2)); }
|
|
2701
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
2702
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", type: ClxProductDetailComponent, isStandalone: true, selector: "clx-product-detail", inputs: { product: { classPropertyName: "product", publicName: "product", isSignal: true, isRequired: false, transformFunction: null }, clxColor: { classPropertyName: "clxColor", publicName: "clxColor", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, currency: { classPropertyName: "currency", publicName: "currency", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_carousel", first: true, predicate: ClxCarouselComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- \u2550\u2550 SKELETON \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n@if (loading()) {\n <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-8 p-6\">\n <div class=\"space-y-3\">\n <clx-skeleton variant=\"rectangular\" width=\"100%\" height=\"420px\" class=\"rounded-2xl\"></clx-skeleton>\n <div class=\"flex gap-2\">\n @for (t of [1,2,3,4]; track t) {\n <clx-skeleton variant=\"rectangular\" width=\"80px\" height=\"80px\" class=\"rounded-xl\"></clx-skeleton>\n }\n </div>\n </div>\n <div class=\"space-y-4 pt-2\">\n <clx-skeleton variant=\"text\" size=\"lg\" width=\"70%\"></clx-skeleton>\n <clx-skeleton variant=\"text\" size=\"sm\" width=\"40%\"></clx-skeleton>\n <clx-skeleton variant=\"text\" size=\"xl\" width=\"50%\"></clx-skeleton>\n <clx-skeleton variant=\"rectangular\" width=\"100%\" height=\"100px\" class=\"rounded-xl\"></clx-skeleton>\n <clx-skeleton variant=\"rectangular\" width=\"100%\" height=\"52px\" class=\"rounded-xl\"></clx-skeleton>\n <clx-skeleton variant=\"rectangular\" width=\"100%\" height=\"52px\" class=\"rounded-xl\"></clx-skeleton>\n </div>\n </div>\n}\n\n<!-- \u2550\u2550 CONTENT \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n@if (!loading() && product(); as p) {\n @let v = activeVariation();\n <div class=\"space-y-8\">\n\n <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-8 xl:items-start\">\n\n <!-- \u2500\u2500 Column 1: Image Gallery \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <div class=\"space-y-3\">\n <div class=\"relative\">\n <clx-carousel [clxColor]=\"clxColor()\" aspectRatio=\"4/3\" [loop]=\"true\">\n @for (img of v?.images ?? []; track img) {\n <ng-template clxSlide>\n <img [src]=\"img\" [alt]=\"p.product_name\" class=\"w-full h-full object-cover\" loading=\"lazy\" />\n </ng-template>\n }\n </clx-carousel>\n <div class=\"absolute top-3 right-3 z-10\">\n <button clx-button variant=\"solid\" [color]=\"clxColor()\" shape=\"circle\" size=\"md\"\n [iconOnly]=\"true\" clxTooltip=\"Add to Wishlist\" [clxTooltipColor]=\"clxColor()\" clxTooltipPosition=\"left\">\n <span clx-icon name=\"favorite_border\" size=\"sm\"></span>\n </button>\n </div>\n </div>\n <div class=\"flex flex-wrap gap-2\">\n @for (img of v?.images ?? []; track img; let i = $index) {\n <img [src]=\"img\" [alt]=\"p.product_name\"\n class=\"w-20 h-20 rounded-xl object-cover border-[3px] cursor-pointer shrink-0 transition-all\"\n [class]=\"_carousel()?.currentPageIndex() === i\n ? 'border-' + clxColor() + '-500 opacity-100'\n : 'border-transparent opacity-60 hover:opacity-90'\"\n loading=\"lazy\"\n (click)=\"_carousel()?.goTo(i)\" />\n }\n </div>\n </div>\n\n <!-- \u2500\u2500 Column 2: Purchase Info \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <div class=\"space-y-5\">\n\n <!-- Tags (st_products.tags) -->\n <div class=\"flex flex-wrap gap-2\">\n @for (tag of p.tags; track tag) {\n <span clx-badge variant=\"light\" [color]=\"clxColor()\" size=\"sm\" shape=\"pill\">{{ tag }}</span>\n }\n </div>\n\n <!-- Title -->\n <div>\n <p class=\"text-xs text-slate-400 uppercase tracking-wide font-medium\">{{ p.trademark }}</p>\n <h1 class=\"text-2xl font-bold text-slate-800 leading-tight mt-0.5\">{{ p.product_name }}</h1>\n @if (v?.description) {\n <p class=\"text-slate-500 text-sm mt-1\">{{ v!.description }}</p>\n }\n </div>\n\n <!-- Rating -->\n <div class=\"flex items-center gap-2\">\n <clx-rating [value]=\"p.rating\" [color]=\"clxColor()\"></clx-rating>\n <span class=\"text-sm font-semibold text-slate-700\">{{ p.rating | number:'1.1-1' }}</span>\n <span class=\"text-sm text-slate-400\">({{ p.review_count }} reviews)</span>\n </div>\n\n <!-- Price block -->\n <div class=\"py-4\">\n <div class=\"flex items-baseline gap-3\">\n <span class=\"text-4xl font-black text-slate-800\">\n {{ finalPrice() | currency:currency():'symbol':'1.0-0' }}\n </span>\n @if (p.has_discount && p.discount_price) {\n <span class=\"text-lg text-slate-400 line-through\">\n {{ p.discount_price | currency:currency():'symbol':'1.0-0' }}\n </span>\n <span clx-badge variant=\"solid\" [color]=\"clxColor()\" size=\"sm\" shape=\"pill\">\n -{{ discount() }}%\n </span>\n }\n </div>\n @if (v && !v.in_stock) {\n <p class=\"text-sm text-rose-500 font-medium mt-1\">Out of stock</p>\n }\n </div>\n\n <!-- Selectores de variaci\u00F3n (st_spec_types + st_spec_options) -->\n @for (specType of p.spec_types; track specType.id) {\n @if (specType.input_type === 'color') {\n <clx-button-group [label]=\"specType.name\" shape=\"circular\" [attached]=\"false\">\n @for (opt of specType.options; track opt.id) {\n <button clx-button\n [variant]=\"isSpecSelected(specType.id, opt.id) ? 'solid' : 'outline'\"\n [color]=\"asColor(opt.value)\"\n shape=\"circle\" size=\"xs\" [iconOnly]=\"true\"\n [disabled]=\"!isOptionAvailable(specType.id, opt.id)\"\n [clxTooltip]=\"opt.value\"\n [clxTooltipColor]=\"asColor(opt.value)\"\n clxTooltipPosition=\"top\"\n (click)=\"selectSpec(specType.id, opt.id)\">\n </button>\n }\n </clx-button-group>\n } @else {\n <clx-button-group [label]=\"specType.name\" shape=\"flat\" [attached]=\"false\">\n @for (opt of specType.options; track opt.id) {\n <button clx-button\n [variant]=\"isSpecSelected(specType.id, opt.id) ? 'solid' : 'outline'\"\n [color]=\"clxColor()\" size=\"sm\"\n [disabled]=\"!isOptionAvailable(specType.id, opt.id)\"\n (click)=\"selectSpec(specType.id, opt.id)\">\n {{ opt.value }}\n </button>\n }\n </clx-button-group>\n }\n }\n\n <!-- Quantity -->\n <clx-number label=\"Quantity:\" variant=\"stepper\" [color]=\"clxColor()\"\n [min]=\"1\" [max]=\"99\" [ngModel]=\"quantity()\" (ngModelChange)=\"quantity.set($event)\">\n </clx-number>\n\n <!-- CTA -->\n <div class=\"flex gap-3\">\n <button clx-button variant=\"solid\" [color]=\"clxColor()\" size=\"md\" [block]=\"true\" icon=\"bolt\"\n [disabled]=\"!v?.in_stock\">Buy Now</button>\n <button clx-button variant=\"light\" [color]=\"clxColor()\" size=\"md\" [block]=\"true\" icon=\"shopping_cart\"\n [disabled]=\"!v?.in_stock\">Add to Cart</button>\n </div>\n\n </div>\n </div>\n\n <!-- \u2500\u2500 Tabs \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <clx-tabs [tabs]=\"tabItems\" [clxColor]=\"clxColor()\" [(activeTab)]=\"activeTab\">\n\n <!-- Tab: Caracter\u00EDsticas generales (st_product_specs \u2014 ficha t\u00E9cnica global) -->\n <ng-template [clxTabPanel]=\"'general'\">\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-x-8\">\n <clx-list [color]=\"clxColor()\" variant=\"flush\" size=\"sm\">\n @for (spec of specsLeft(p.product_specs); track spec.id) {\n <clx-list-item [label]=\"spec.name + ':'\" [sublabel]=\"spec.value\" [icon]=\"spec.icon ?? ''\" />\n }\n </clx-list>\n <clx-list [color]=\"clxColor()\" variant=\"flush\" size=\"sm\">\n @for (spec of specsRight(p.product_specs); track spec.id) {\n <clx-list-item [label]=\"spec.name + ':'\" [sublabel]=\"spec.value\" [icon]=\"spec.icon ?? ''\" />\n }\n </clx-list>\n </div>\n </ng-template>\n\n <!-- Tab: Especificaciones (st_spec_types \u2014 specs de la variaci\u00F3n activa) -->\n <ng-template [clxTabPanel]=\"'specs'\">\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-x-8\">\n <clx-list [color]=\"clxColor()\" variant=\"flush\" size=\"sm\">\n @for (st of specsLeft(p.spec_types); track st.id) {\n <clx-list-item [label]=\"st.name + ':'\" [sublabel]=\"selectedOptionLabel(st)\" [icon]=\"st.icon ?? ''\" />\n }\n </clx-list>\n <clx-list [color]=\"clxColor()\" variant=\"flush\" size=\"sm\">\n @for (st of specsRight(p.spec_types); track st.id) {\n <clx-list-item [label]=\"st.name + ':'\" [sublabel]=\"selectedOptionLabel(st)\" [icon]=\"st.icon ?? ''\" />\n }\n </clx-list>\n </div>\n </ng-template>\n\n <!-- Tab: Descripci\u00F3n (st_product_descriptions) -->\n <ng-template [clxTabPanel]=\"'description'\">\n <div class=\"space-y-5 max-w-3xl\">\n @for (block of p.descriptions; track block.id) {\n <div>\n @if (block.title) {\n <h3 class=\"text-base font-semibold text-slate-800 mb-1\">{{ block.title }}</h3>\n }\n <p class=\"text-sm text-slate-500 leading-relaxed\">{{ block.body }}</p>\n </div>\n }\n </div>\n </ng-template>\n\n </clx-tabs>\n\n <!-- \u2500\u2500 Reviews \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <div class=\"grid grid-cols-1 xl:grid-cols-3 gap-8 border-t border-slate-200 pt-8\">\n\n <div class=\"space-y-3\">\n <h2 class=\"text-base font-bold text-slate-800\">Customer Reviews</h2>\n <div class=\"flex items-end gap-3\">\n <span class=\"text-5xl font-black text-slate-800\">{{ p.rating | number:'1.1-1' }}</span>\n <div class=\"pb-1 space-y-1\">\n <clx-rating [value]=\"p.rating\" [color]=\"clxColor()\"></clx-rating>\n <p class=\"text-xs text-slate-500\">{{ p.review_count }} verified ratings</p>\n </div>\n </div>\n <p class=\"text-sm font-semibold\" [class]=\"'text-' + clxColor() + '-600'\">Very Good</p>\n <div class=\"pt-2 space-y-2\">\n <button clx-button variant=\"solid\" [color]=\"clxColor()\" size=\"md\" [block]=\"true\" icon=\"rate_review\">\n Leave Us a Review\n </button>\n <button clx-button variant=\"light\" [color]=\"clxColor()\" size=\"md\" [block]=\"true\" icon=\"flag\">\n Report abuse\n </button>\n </div>\n </div>\n\n <div class=\"lg:col-span-2 space-y-4\">\n @for (review of p.reviews ?? []; track review.id) {\n <div class=\"rounded-2xl overflow-hidden shadow-sm\">\n <div class=\"flex items-center gap-3 px-4 py-3\">\n <div class=\"w-10 h-10 rounded-full bg-slate-100 flex items-center justify-center shrink-0\">\n <span class=\"text-sm font-bold text-slate-600\">\n {{ review.author_name.substring(0,1) }}{{ review.author_name.split(' ')[1]?.substring(0,1) ?? '' }}\n </span>\n </div>\n <div class=\"flex-1 min-w-0\">\n <p class=\"font-semibold text-sm text-slate-800 truncate\">{{ review.author_name }}</p>\n <p class=\"text-xs text-slate-400\">{{ review.created_at }}</p>\n </div>\n @if (review.is_verified) {\n <span clx-badge variant=\"light\" color=\"emerald\" size=\"sm\" shape=\"pill\">Verified</span>\n }\n </div>\n <div class=\"px-4 pb-4 space-y-2\">\n <div class=\"flex items-center gap-2\">\n <clx-rating [value]=\"review.rating\" [color]=\"clxColor()\"></clx-rating>\n @if (review.title) {\n <span class=\"text-sm font-semibold text-slate-700\">{{ review.title }}</span>\n }\n </div>\n @if (review.body) {\n <p class=\"text-sm text-slate-500\">{{ review.body }}</p>\n }\n <div class=\"flex items-center gap-3 pt-1\">\n <span class=\"text-xs text-slate-400\">Helpful?</span>\n <button clx-button variant=\"ghost\" color=\"slate\" size=\"xs\" icon=\"thumb_up\">{{ review.helpful }}</button>\n <button clx-button variant=\"ghost\" color=\"slate\" size=\"xs\" icon=\"thumb_down\">{{ review.not_helpful }}</button>\n </div>\n </div>\n </div>\n }\n </div>\n\n </div>\n\n </div>\n}\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ClxButtonComponent, selector: "button[clx-button], a[clx-button]", inputs: ["variant", "color", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly"] }, { kind: "component", type: ClxButtonGroupComponent, selector: "clx-button-group", inputs: ["label", "shape", "attached", "orientation"] }, { kind: "component", type: ClxBadgeComponent, selector: "span[clx-badge]", inputs: ["variant", "color", "size", "shape", "positioned"] }, { kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }, { kind: "component", type: ClxSkeletonComponent, selector: "clx-skeleton", inputs: ["variant", "size", "width", "height"] }, { kind: "component", type: ClxRatingComponent, selector: "clx-rating", inputs: ["value", "max", "color"] }, { kind: "component", type: ClxCarouselComponent, selector: "clx-carousel", inputs: ["clxColor", "autoPlay", "interval", "loop", "aspectRatio", "transparent"] }, { kind: "directive", type: ClxCarouselDirective, selector: "[clxSlide]" }, { kind: "component", type: ClxTabsComponent, selector: "clx-tabs", inputs: ["tabs", "clxColor", "activeTab"], outputs: ["activeTabChange"] }, { kind: "directive", type: ClxTabDirective, selector: "[clxTabPanel]", inputs: ["clxTabPanel"] }, { kind: "component", type: ClxNumberComponent, selector: "clx-number", inputs: ["variant", "size", "color", "label", "placeholder", "hint", "prefixIcon", "min", "max", "step", "value", "disabled"] }, { kind: "directive", type: ClxTooltipDirective, selector: "[clxTooltip]", inputs: ["clxTooltip", "clxTooltipPosition", "clxTooltipColor", "clxTooltipSize", "clxTooltipDelay"] }, { kind: "component", type: ClxListComponent, selector: "clx-list", inputs: ["color", "variant", "size", "label", "headerIcon", "numbered"] }, { kind: "component", type: ClxListItemComponent, selector: "clx-list-item", inputs: ["label", "sublabel", "icon", "meta", "metaColor", "disabled"] }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
2702
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxProductDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2703
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", type: ClxProductDetailComponent, isStandalone: true, selector: "clx-product-detail", inputs: { product: { classPropertyName: "product", publicName: "product", isSignal: true, isRequired: false, transformFunction: null }, clxColor: { classPropertyName: "clxColor", publicName: "clxColor", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, currency: { classPropertyName: "currency", publicName: "currency", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_carousel", first: true, predicate: ClxCarouselComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- \u2550\u2550 SKELETON \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n@if (loading()) {\n <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-8 p-6\">\n <div class=\"space-y-3\">\n <clx-skeleton variant=\"rectangular\" width=\"100%\" height=\"420px\" class=\"rounded-2xl\"></clx-skeleton>\n <div class=\"flex gap-2\">\n @for (t of [1,2,3,4]; track t) {\n <clx-skeleton variant=\"rectangular\" width=\"80px\" height=\"80px\" class=\"rounded-xl\"></clx-skeleton>\n }\n </div>\n </div>\n <div class=\"space-y-4 pt-2\">\n <clx-skeleton variant=\"text\" size=\"lg\" width=\"70%\"></clx-skeleton>\n <clx-skeleton variant=\"text\" size=\"sm\" width=\"40%\"></clx-skeleton>\n <clx-skeleton variant=\"text\" size=\"xl\" width=\"50%\"></clx-skeleton>\n <clx-skeleton variant=\"rectangular\" width=\"100%\" height=\"100px\" class=\"rounded-xl\"></clx-skeleton>\n <clx-skeleton variant=\"rectangular\" width=\"100%\" height=\"52px\" class=\"rounded-xl\"></clx-skeleton>\n <clx-skeleton variant=\"rectangular\" width=\"100%\" height=\"52px\" class=\"rounded-xl\"></clx-skeleton>\n </div>\n </div>\n}\n\n<!-- \u2550\u2550 CONTENT \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n@if (!loading() && product(); as p) {\n @let v = activeVariation();\n <div class=\"space-y-8\">\n\n <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-8 xl:items-start\">\n\n <!-- \u2500\u2500 Column 1: Image Gallery \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <div class=\"space-y-3\">\n <div class=\"relative\">\n <clx-carousel [clxColor]=\"clxColor()\" aspectRatio=\"4/3\" [loop]=\"true\">\n @for (img of v?.images ?? []; track img) {\n <ng-template clxSlide>\n <img [src]=\"img\" [alt]=\"p.product_name\" class=\"w-full h-full object-cover\" loading=\"lazy\" />\n </ng-template>\n }\n </clx-carousel>\n <div class=\"absolute top-3 right-3 z-10\">\n <button clx-button variant=\"solid\" [color]=\"clxColor()\" shape=\"circle\" size=\"md\"\n [iconOnly]=\"true\" clxTooltip=\"Add to Wishlist\" [clxTooltipColor]=\"clxColor()\" clxTooltipPosition=\"left\">\n <span clx-icon name=\"favorite_border\" size=\"sm\"></span>\n </button>\n </div>\n </div>\n <div class=\"flex flex-wrap gap-2\">\n @for (img of v?.images ?? []; track img; let i = $index) {\n <img [src]=\"img\" [alt]=\"p.product_name\"\n class=\"w-20 h-20 rounded-xl object-cover border-[3px] cursor-pointer shrink-0 transition-all\"\n [class]=\"_carousel()?.currentPageIndex() === i\n ? 'border-' + clxColor() + '-500 opacity-100'\n : 'border-transparent opacity-60 hover:opacity-90'\"\n loading=\"lazy\"\n (click)=\"_carousel()?.goTo(i)\" />\n }\n </div>\n </div>\n\n <!-- \u2500\u2500 Column 2: Purchase Info \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <div class=\"space-y-5\">\n\n <!-- Tags (st_products.tags) -->\n <div class=\"flex flex-wrap gap-2\">\n @for (tag of p.tags; track tag) {\n <span clx-badge variant=\"light\" [color]=\"clxColor()\" size=\"sm\" shape=\"pill\">{{ tag }}</span>\n }\n </div>\n\n <!-- Title -->\n <div>\n <p class=\"text-xs text-slate-400 uppercase tracking-wide font-medium\">{{ p.trademark }}</p>\n <h1 class=\"text-2xl font-bold text-slate-800 leading-tight mt-0.5\">{{ p.product_name }}</h1>\n @if (v?.description) {\n <p class=\"text-slate-500 text-sm mt-1\">{{ v!.description }}</p>\n }\n </div>\n\n <!-- Rating -->\n <div class=\"flex items-center gap-2\">\n <clx-rating [value]=\"p.rating\" [color]=\"clxColor()\"></clx-rating>\n <span class=\"text-sm font-semibold text-slate-700\">{{ p.rating | number:'1.1-1' }}</span>\n <span class=\"text-sm text-slate-400\">({{ p.review_count }} reviews)</span>\n </div>\n\n <!-- Price block -->\n <div class=\"py-4\">\n <div class=\"flex items-baseline gap-3\">\n <span class=\"text-4xl font-black text-slate-800\">\n {{ finalPrice() | currency:currency():'symbol':'1.0-0' }}\n </span>\n @if (p.has_discount && p.discount_price) {\n <span class=\"text-lg text-slate-400 line-through\">\n {{ p.discount_price | currency:currency():'symbol':'1.0-0' }}\n </span>\n <span clx-badge variant=\"solid\" [color]=\"clxColor()\" size=\"sm\" shape=\"pill\">\n -{{ discount() }}%\n </span>\n }\n </div>\n @if (v && !v.in_stock) {\n <p class=\"text-sm text-rose-500 font-medium mt-1\">Out of stock</p>\n }\n </div>\n\n <!-- Selectores de variaci\u00F3n (st_spec_types + st_spec_options) -->\n @for (specType of p.spec_types; track specType.id) {\n @if (specType.input_type === 'color') {\n <clx-button-group [label]=\"specType.name\" shape=\"circular\" [attached]=\"false\">\n @for (opt of specType.options; track opt.id) {\n <button clx-button\n [variant]=\"isSpecSelected(specType.id, opt.id) ? 'solid' : 'outline'\"\n [color]=\"asColor(opt.value)\"\n shape=\"circle\" size=\"xs\" [iconOnly]=\"true\"\n [disabled]=\"!isOptionAvailable(specType.id, opt.id)\"\n [clxTooltip]=\"opt.value\"\n [clxTooltipColor]=\"asColor(opt.value)\"\n clxTooltipPosition=\"top\"\n (click)=\"selectSpec(specType.id, opt.id)\">\n </button>\n }\n </clx-button-group>\n } @else {\n <clx-button-group [label]=\"specType.name\" shape=\"flat\" [attached]=\"false\">\n @for (opt of specType.options; track opt.id) {\n <button clx-button\n [variant]=\"isSpecSelected(specType.id, opt.id) ? 'solid' : 'outline'\"\n [color]=\"clxColor()\" size=\"sm\"\n [disabled]=\"!isOptionAvailable(specType.id, opt.id)\"\n (click)=\"selectSpec(specType.id, opt.id)\">\n {{ opt.value }}\n </button>\n }\n </clx-button-group>\n }\n }\n\n <!-- Quantity -->\n <clx-number label=\"Quantity:\" variant=\"stepper\" [color]=\"clxColor()\"\n [min]=\"1\" [max]=\"99\" [ngModel]=\"quantity()\" (ngModelChange)=\"quantity.set($event)\">\n </clx-number>\n\n <!-- CTA -->\n <div class=\"flex gap-3\">\n <button clx-button variant=\"solid\" [color]=\"clxColor()\" size=\"md\" [block]=\"true\" icon=\"bolt\"\n [disabled]=\"!v?.in_stock\">Buy Now</button>\n <button clx-button variant=\"light\" [color]=\"clxColor()\" size=\"md\" [block]=\"true\" icon=\"shopping_cart\"\n [disabled]=\"!v?.in_stock\">Add to Cart</button>\n </div>\n\n </div>\n </div>\n\n <!-- \u2500\u2500 Tabs \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <clx-tabs [tabs]=\"tabItems\" [clxColor]=\"clxColor()\" [(activeTab)]=\"activeTab\">\n\n <!-- Tab: Caracter\u00EDsticas generales (st_product_specs \u2014 ficha t\u00E9cnica global) -->\n <ng-template [clxTabPanel]=\"'general'\">\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-x-8\">\n <clx-list [color]=\"clxColor()\" variant=\"flush\" size=\"sm\">\n @for (spec of specsLeft(p.product_specs); track spec.id) {\n <clx-list-item [label]=\"spec.name + ':'\" [sublabel]=\"spec.value\" [icon]=\"spec.icon ?? ''\" />\n }\n </clx-list>\n <clx-list [color]=\"clxColor()\" variant=\"flush\" size=\"sm\">\n @for (spec of specsRight(p.product_specs); track spec.id) {\n <clx-list-item [label]=\"spec.name + ':'\" [sublabel]=\"spec.value\" [icon]=\"spec.icon ?? ''\" />\n }\n </clx-list>\n </div>\n </ng-template>\n\n <!-- Tab: Especificaciones (st_spec_types \u2014 specs de la variaci\u00F3n activa) -->\n <ng-template [clxTabPanel]=\"'specs'\">\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-x-8\">\n <clx-list [color]=\"clxColor()\" variant=\"flush\" size=\"sm\">\n @for (st of specsLeft(p.spec_types); track st.id) {\n <clx-list-item [label]=\"st.name + ':'\" [sublabel]=\"selectedOptionLabel(st)\" [icon]=\"st.icon ?? ''\" />\n }\n </clx-list>\n <clx-list [color]=\"clxColor()\" variant=\"flush\" size=\"sm\">\n @for (st of specsRight(p.spec_types); track st.id) {\n <clx-list-item [label]=\"st.name + ':'\" [sublabel]=\"selectedOptionLabel(st)\" [icon]=\"st.icon ?? ''\" />\n }\n </clx-list>\n </div>\n </ng-template>\n\n <!-- Tab: Descripci\u00F3n (st_product_descriptions) -->\n <ng-template [clxTabPanel]=\"'description'\">\n <div class=\"space-y-5 max-w-3xl\">\n @for (block of p.descriptions; track block.id) {\n <div>\n @if (block.title) {\n <h3 class=\"text-base font-semibold text-slate-800 mb-1\">{{ block.title }}</h3>\n }\n <p class=\"text-sm text-slate-500 leading-relaxed\">{{ block.body }}</p>\n </div>\n }\n </div>\n </ng-template>\n\n </clx-tabs>\n\n <!-- \u2500\u2500 Reviews \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <div class=\"grid grid-cols-1 xl:grid-cols-3 gap-8 border-t border-slate-200 pt-8\">\n\n <div class=\"space-y-3\">\n <h2 class=\"text-base font-bold text-slate-800\">Customer Reviews</h2>\n <div class=\"flex items-end gap-3\">\n <span class=\"text-5xl font-black text-slate-800\">{{ p.rating | number:'1.1-1' }}</span>\n <div class=\"pb-1 space-y-1\">\n <clx-rating [value]=\"p.rating\" [color]=\"clxColor()\"></clx-rating>\n <p class=\"text-xs text-slate-500\">{{ p.review_count }} verified ratings</p>\n </div>\n </div>\n <p class=\"text-sm font-semibold\" [class]=\"'text-' + clxColor() + '-600'\">Very Good</p>\n <div class=\"pt-2 space-y-2\">\n <button clx-button variant=\"solid\" [color]=\"clxColor()\" size=\"md\" [block]=\"true\" icon=\"rate_review\">\n Leave Us a Review\n </button>\n <button clx-button variant=\"light\" [color]=\"clxColor()\" size=\"md\" [block]=\"true\" icon=\"flag\">\n Report abuse\n </button>\n </div>\n </div>\n\n <div class=\"lg:col-span-2 space-y-4\">\n @for (review of p.reviews ?? []; track review.id) {\n <div class=\"rounded-2xl overflow-hidden shadow-sm\">\n <div class=\"flex items-center gap-3 px-4 py-3\">\n <div class=\"w-10 h-10 rounded-full bg-slate-100 flex items-center justify-center shrink-0\">\n <span class=\"text-sm font-bold text-slate-600\">\n {{ review.author_name.substring(0,1) }}{{ review.author_name.split(' ')[1]?.substring(0,1) ?? '' }}\n </span>\n </div>\n <div class=\"flex-1 min-w-0\">\n <p class=\"font-semibold text-sm text-slate-800 truncate\">{{ review.author_name }}</p>\n <p class=\"text-xs text-slate-400\">{{ review.created_at }}</p>\n </div>\n @if (review.is_verified) {\n <span clx-badge variant=\"light\" color=\"emerald\" size=\"sm\" shape=\"pill\">Verified</span>\n }\n </div>\n <div class=\"px-4 pb-4 space-y-2\">\n <div class=\"flex items-center gap-2\">\n <clx-rating [value]=\"review.rating\" [color]=\"clxColor()\"></clx-rating>\n @if (review.title) {\n <span class=\"text-sm font-semibold text-slate-700\">{{ review.title }}</span>\n }\n </div>\n @if (review.body) {\n <p class=\"text-sm text-slate-500\">{{ review.body }}</p>\n }\n <div class=\"flex items-center gap-3 pt-1\">\n <span class=\"text-xs text-slate-400\">Helpful?</span>\n <button clx-button variant=\"ghost\" color=\"slate\" size=\"xs\" icon=\"thumb_up\">{{ review.helpful }}</button>\n <button clx-button variant=\"ghost\" color=\"slate\" size=\"xs\" icon=\"thumb_down\">{{ review.not_helpful }}</button>\n </div>\n </div>\n </div>\n }\n </div>\n\n </div>\n\n </div>\n}\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ClxButtonComponent, selector: "button[clx-button], a[clx-button]", inputs: ["variant", "color", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly"] }, { kind: "component", type: ClxButtonGroupComponent, selector: "clx-button-group", inputs: ["label", "shape", "attached", "orientation"] }, { kind: "component", type: ClxBadgeComponent, selector: "span[clx-badge]", inputs: ["variant", "color", "size", "shape", "positioned"] }, { kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }, { kind: "component", type: ClxSkeletonComponent, selector: "clx-skeleton", inputs: ["variant", "size", "width", "height"] }, { kind: "component", type: ClxRatingComponent, selector: "clx-rating", inputs: ["value", "max", "color"] }, { kind: "component", type: ClxCarouselComponent, selector: "clx-carousel", inputs: ["clxColor", "autoPlay", "interval", "loop", "aspectRatio", "transparent"] }, { kind: "directive", type: ClxCarouselDirective, selector: "[clxSlide]" }, { kind: "component", type: ClxTabsComponent, selector: "clx-tabs", inputs: ["tabs", "clxColor", "activeTab"], outputs: ["activeTabChange"] }, { kind: "directive", type: ClxTabDirective, selector: "[clxTabPanel]", inputs: ["clxTabPanel"] }, { kind: "component", type: ClxNumberComponent, selector: "clx-number", inputs: ["variant", "size", "color", "label", "placeholder", "hint", "prefixIcon", "min", "max", "step", "value", "disabled"] }, { kind: "directive", type: ClxTooltipDirective, selector: "[clxTooltip]", inputs: ["clxTooltip", "clxTooltipPosition", "clxTooltipColor", "clxTooltipSize", "clxTooltipDelay"] }, { kind: "component", type: ClxListComponent, selector: "clx-list", inputs: ["color", "variant", "size", "label", "headerIcon", "numbered"] }, { kind: "component", type: ClxListItemComponent, selector: "clx-list-item", inputs: ["label", "sublabel", "icon", "meta", "metaColor", "disabled"] }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
2703
2704
|
}
|
|
2704
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
2705
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxProductDetailComponent, decorators: [{
|
|
2705
2706
|
type: Component,
|
|
2706
2707
|
args: [{ selector: 'clx-product-detail', standalone: true, imports: [
|
|
2707
2708
|
CurrencyPipe,
|
|
@@ -2802,8 +2803,8 @@ class ClxTreeComponent {
|
|
|
2802
2803
|
if (node.children?.length)
|
|
2803
2804
|
this._toggleExpand(node);
|
|
2804
2805
|
}
|
|
2805
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
2806
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
2806
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2807
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", type: ClxTreeComponent, isStandalone: true, selector: "clx-tree", inputs: { nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, multiSelect: { classPropertyName: "multiSelect", publicName: "multiSelect", isSignal: true, isRequired: false, transformFunction: null }, expandAll: { classPropertyName: "expandAll", publicName: "expandAll", isSignal: true, isRequired: false, transformFunction: null }, selectedIds: { classPropertyName: "selectedIds", publicName: "selectedIds", isSignal: true, isRequired: false, transformFunction: null }, expandedIds: { classPropertyName: "expandedIds", publicName: "expandedIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIds: "selectedIdsChange", expandedIds: "expandedIdsChange", selectChange: "selectChange", expandChange: "expandChange" }, host: { classAttribute: "block" }, ngImport: i0, template: `
|
|
2807
2808
|
<div role="tree" [class]="_rootClass()">
|
|
2808
2809
|
@for (node of nodes(); track node.id) {
|
|
2809
2810
|
<ng-container *ngTemplateOutlet="nodeTemplate; context: { $implicit: node, depth: 0 }"></ng-container>
|
|
@@ -2865,7 +2866,7 @@ class ClxTreeComponent {
|
|
|
2865
2866
|
</ng-template>
|
|
2866
2867
|
`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
2867
2868
|
}
|
|
2868
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
2869
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxTreeComponent, decorators: [{
|
|
2869
2870
|
type: Component,
|
|
2870
2871
|
args: [{
|
|
2871
2872
|
selector: 'clx-tree',
|
|
@@ -3008,8 +3009,8 @@ class ClxCheckboxComponent {
|
|
|
3008
3009
|
_handleBlur() {
|
|
3009
3010
|
this._onTouched();
|
|
3010
3011
|
}
|
|
3011
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
3012
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
3012
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3013
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", type: ClxCheckboxComponent, isStandalone: true, selector: "clx-checkbox", inputs: { color: { classPropertyName: "color", publicName: "color", 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 }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "checkbox" }, listeners: { "click": "_toggle()", "keydown.space": "_onSpace($event)" }, properties: { "style.cursor": "_disabled() ? \"not-allowed\" : \"pointer\"", "style.pointer-events": "_disabled() ? \"none\" : null", "attr.aria-checked": "_checked()", "attr.tabindex": "_disabled() ? -1 : 0" }, classAttribute: "inline-flex items-center gap-2 select-none" }, providers: [
|
|
3013
3014
|
{
|
|
3014
3015
|
provide: NG_VALUE_ACCESSOR,
|
|
3015
3016
|
useExisting: forwardRef(() => ClxCheckboxComponent),
|
|
@@ -3036,7 +3037,7 @@ class ClxCheckboxComponent {
|
|
|
3036
3037
|
}
|
|
3037
3038
|
`, isInline: true, dependencies: [{ kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
3038
3039
|
}
|
|
3039
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
3040
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxCheckboxComponent, decorators: [{
|
|
3040
3041
|
type: Component,
|
|
3041
3042
|
args: [{
|
|
3042
3043
|
selector: 'clx-checkbox',
|
|
@@ -3189,8 +3190,8 @@ class ClxSliderComponent {
|
|
|
3189
3190
|
setDisabledState(disabled) {
|
|
3190
3191
|
this._cvaDisabled.set(disabled);
|
|
3191
3192
|
}
|
|
3192
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
3193
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
3193
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3194
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", type: ClxSliderComponent, isStandalone: true, selector: "clx-slider", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, activeColor: { classPropertyName: "activeColor", publicName: "activeColor", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, showTooltip: { classPropertyName: "showTooltip", publicName: "showTooltip", isSignal: true, isRequired: false, transformFunction: null }, showMinMax: { classPropertyName: "showMinMax", publicName: "showMinMax", isSignal: true, isRequired: false, transformFunction: null }, marks: { classPropertyName: "marks", publicName: "marks", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.opacity-50": "_disabled()", "class.pointer-events-none": "_disabled()" }, classAttribute: "flex flex-col gap-1.5 w-full" }, viewQueries: [{ propertyName: "_rangeInput", first: true, predicate: ["rangeInput"], descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
3194
3195
|
<!-- Label -->
|
|
3195
3196
|
@if (label()) {
|
|
3196
3197
|
<span [class]="_sizeConfig().label + ' text-slate-700 leading-none'">{{ label() }}</span>
|
|
@@ -3283,7 +3284,7 @@ class ClxSliderComponent {
|
|
|
3283
3284
|
}
|
|
3284
3285
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
3285
3286
|
}
|
|
3286
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
3287
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxSliderComponent, decorators: [{
|
|
3287
3288
|
type: Component,
|
|
3288
3289
|
args: [{
|
|
3289
3290
|
selector: 'clx-slider',
|
|
@@ -3422,8 +3423,8 @@ class ClxRadioGroupComponent {
|
|
|
3422
3423
|
setDisabledState(disabled) {
|
|
3423
3424
|
this._cvaDisabled.set(disabled);
|
|
3424
3425
|
}
|
|
3425
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
3426
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.
|
|
3426
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxRadioGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3427
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.23", type: ClxRadioGroupComponent, isStandalone: true, selector: "clx-radio-group", inputs: { color: { classPropertyName: "color", publicName: "color", 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 }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "radiogroup" }, properties: { "class.flex-col": "direction() === \"vertical\"", "style.cursor": "isDisabled() ? \"not-allowed\" : null", "style.pointer-events": "isDisabled() ? \"none\" : null" }, classAttribute: "flex flex-wrap gap-4" }, providers: [
|
|
3427
3428
|
{
|
|
3428
3429
|
provide: NG_VALUE_ACCESSOR,
|
|
3429
3430
|
useExisting: forwardRef(() => ClxRadioGroupComponent),
|
|
@@ -3435,7 +3436,7 @@ class ClxRadioGroupComponent {
|
|
|
3435
3436
|
},
|
|
3436
3437
|
], ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
3437
3438
|
}
|
|
3438
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
3439
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxRadioGroupComponent, decorators: [{
|
|
3439
3440
|
type: Component,
|
|
3440
3441
|
args: [{
|
|
3441
3442
|
selector: 'clx-radio-group',
|
|
@@ -3521,8 +3522,8 @@ class ClxRadioComponent {
|
|
|
3521
3522
|
event.preventDefault();
|
|
3522
3523
|
this._select();
|
|
3523
3524
|
}
|
|
3524
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
3525
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
3525
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxRadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3526
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", type: ClxRadioComponent, isStandalone: true, selector: "clx-radio", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", 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 } }, host: { attributes: { "role": "radio" }, listeners: { "click": "_select()", "keydown.space": "_onSpace($event)" }, properties: { "attr.aria-checked": "_checked()", "attr.tabindex": "_isDisabled() ? -1 : 0" }, classAttribute: "inline-flex items-center gap-2 select-none cursor-pointer" }, ngImport: i0, template: `
|
|
3526
3527
|
<input
|
|
3527
3528
|
type="radio"
|
|
3528
3529
|
class="sr-only"
|
|
@@ -3540,7 +3541,7 @@ class ClxRadioComponent {
|
|
|
3540
3541
|
}
|
|
3541
3542
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
3542
3543
|
}
|
|
3543
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
3544
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxRadioComponent, decorators: [{
|
|
3544
3545
|
type: Component,
|
|
3545
3546
|
args: [{
|
|
3546
3547
|
selector: 'clx-radio',
|
|
@@ -3611,8 +3612,8 @@ class ClxTagComponent {
|
|
|
3611
3612
|
return `inline-flex items-center font-medium leading-none ${s.gap} ${s.text} ${s.pad} ${TAG_SHAPE_MAP[this.shape()]} ${this._colorClass()}`;
|
|
3612
3613
|
}, ...(ngDevMode ? [{ debugName: "_hostClass" }] : []));
|
|
3613
3614
|
_closeBtnColor = computed(() => this.variant() === 'solid' ? 'white' : this.color(), ...(ngDevMode ? [{ debugName: "_closeBtnColor" }] : []));
|
|
3614
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
3615
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.
|
|
3615
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxTagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3616
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.23", type: ClxTagComponent, isStandalone: true, selector: "span[clx-tag]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onRemove: "onRemove" }, host: { properties: { "class": "_hostClass()" } }, ngImport: i0, template: `
|
|
3616
3617
|
<ng-content />
|
|
3617
3618
|
<button
|
|
3618
3619
|
clx-button
|
|
@@ -3627,7 +3628,7 @@ class ClxTagComponent {
|
|
|
3627
3628
|
</button>
|
|
3628
3629
|
`, isInline: true, dependencies: [{ kind: "component", type: ClxButtonComponent, selector: "button[clx-button], a[clx-button]", inputs: ["variant", "color", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
3629
3630
|
}
|
|
3630
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
3631
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxTagComponent, decorators: [{
|
|
3631
3632
|
type: Component,
|
|
3632
3633
|
args: [{
|
|
3633
3634
|
selector: 'span[clx-tag]',
|
|
@@ -3829,8 +3830,8 @@ class ClxInputComponent {
|
|
|
3829
3830
|
_togglePassword() {
|
|
3830
3831
|
this._showPassword.update(v => !v);
|
|
3831
3832
|
}
|
|
3832
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
3833
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
3833
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3834
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", type: ClxInputComponent, isStandalone: true, selector: "clx-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, suffixIcon: { classPropertyName: "suffixIcon", publicName: "suffixIcon", isSignal: true, isRequired: false, transformFunction: null }, prefixText: { classPropertyName: "prefixText", publicName: "prefixText", isSignal: true, isRequired: false, transformFunction: null }, suffixText: { classPropertyName: "suffixText", publicName: "suffixText", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, statusMessage: { classPropertyName: "statusMessage", publicName: "statusMessage", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "flex flex-col gap-1.5" }, providers: [
|
|
3834
3835
|
{
|
|
3835
3836
|
provide: NG_VALUE_ACCESSOR,
|
|
3836
3837
|
useExisting: forwardRef(() => ClxInputComponent),
|
|
@@ -3916,7 +3917,7 @@ class ClxInputComponent {
|
|
|
3916
3917
|
}
|
|
3917
3918
|
`, isInline: true, dependencies: [{ kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }, { kind: "component", type: ClxButtonComponent, selector: "button[clx-button], a[clx-button]", inputs: ["variant", "color", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
3918
3919
|
}
|
|
3919
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
3920
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxInputComponent, decorators: [{
|
|
3920
3921
|
type: Component,
|
|
3921
3922
|
args: [{
|
|
3922
3923
|
selector: 'clx-input',
|
|
@@ -4225,8 +4226,8 @@ class ClxSelectComponent {
|
|
|
4225
4226
|
setDisabledState(disabled) {
|
|
4226
4227
|
this._cvaDisabled.set(disabled);
|
|
4227
4228
|
}
|
|
4228
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
4229
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
4229
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4230
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", type: ClxSelectComponent, isStandalone: true, selector: "clx-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, activeColor: { classPropertyName: "activeColor", publicName: "activeColor", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, async: { classPropertyName: "async", publicName: "async", isSignal: true, isRequired: false, transformFunction: null }, loadOptions: { classPropertyName: "loadOptions", publicName: "loadOptions", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null }, minChars: { classPropertyName: "minChars", publicName: "minChars", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown.escape": "onEscape()" }, classAttribute: "flex flex-col gap-1.5 w-full" }, ngImport: i0, template: `
|
|
4230
4231
|
@if (label()) {
|
|
4231
4232
|
<span [id]="_labelId" [class]="_labelClass()">{{ label() }}</span>
|
|
4232
4233
|
}
|
|
@@ -4367,7 +4368,7 @@ class ClxSelectComponent {
|
|
|
4367
4368
|
}
|
|
4368
4369
|
`, isInline: true, dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ClxTagComponent, selector: "span[clx-tag]", inputs: ["variant", "color", "size", "shape"], outputs: ["onRemove"] }, { kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }, { kind: "component", type: ClxButtonComponent, selector: "button[clx-button], a[clx-button]", inputs: ["variant", "color", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly"] }, { kind: "component", type: ClxInputComponent, selector: "clx-input", inputs: ["label", "placeholder", "type", "color", "hint", "prefixIcon", "suffixIcon", "prefixText", "suffixText", "status", "statusMessage", "size", "value", "disabled"] }, { kind: "component", type: ClxSpinnerComponent, selector: "clx-spinner", inputs: ["size", "color", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
4369
4370
|
}
|
|
4370
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
4371
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxSelectComponent, decorators: [{
|
|
4371
4372
|
type: Component,
|
|
4372
4373
|
args: [{
|
|
4373
4374
|
selector: 'clx-select',
|
|
@@ -4609,8 +4610,8 @@ class ClxFilterPanelComponent {
|
|
|
4609
4610
|
const t = resolveColor(this.color());
|
|
4610
4611
|
return `text-xs px-1.5 py-0.5 rounded-full font-medium ${t.bgSubtle} ${t.textSubtle}`;
|
|
4611
4612
|
}
|
|
4612
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
4613
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
4613
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxFilterPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4614
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", type: ClxFilterPanelComponent, isStandalone: true, selector: "clx-filter-panel", inputs: { fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, showApply: { classPropertyName: "showApply", publicName: "showApply", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { values: "valuesChange", filterChange: "filterChange", applyChange: "applyChange" }, host: { classAttribute: "flex flex-col bg-white border border-slate-200 rounded-xl overflow-hidden" }, ngImport: i0, template: `
|
|
4614
4615
|
<!-- Header -->
|
|
4615
4616
|
<div class="flex items-center justify-between px-4 py-3 border-b border-slate-100">
|
|
4616
4617
|
<div class="flex items-center gap-2">
|
|
@@ -4738,7 +4739,7 @@ class ClxFilterPanelComponent {
|
|
|
4738
4739
|
}
|
|
4739
4740
|
`, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }, { kind: "component", type: ClxButtonComponent, selector: "button[clx-button], a[clx-button]", inputs: ["variant", "color", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly"] }, { kind: "component", type: ClxCheckboxComponent, selector: "clx-checkbox", inputs: ["color", "variant", "size", "label", "value", "disabled"] }, { kind: "component", type: ClxSliderComponent, selector: "clx-slider", inputs: ["label", "hint", "errorMessage", "activeColor", "size", "min", "max", "step", "showTooltip", "showMinMax", "marks", "disabled"] }, { kind: "component", type: ClxRadioGroupComponent, selector: "clx-radio-group", inputs: ["color", "variant", "size", "direction", "disabled"] }, { kind: "component", type: ClxRadioComponent, selector: "clx-radio", inputs: ["value", "label", "color", "variant", "size"] }, { kind: "component", type: ClxSelectComponent, selector: "clx-select", inputs: ["label", "placeholder", "options", "multiple", "searchable", "searchPlaceholder", "activeColor", "size", "hint", "errorMessage", "disabled", "async", "loadOptions", "debounceMs", "minChars"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
4740
4741
|
}
|
|
4741
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
4742
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxFilterPanelComponent, decorators: [{
|
|
4742
4743
|
type: Component,
|
|
4743
4744
|
args: [{
|
|
4744
4745
|
selector: 'clx-filter-panel',
|
|
@@ -4934,7 +4935,7 @@ class ClxAlertComponent {
|
|
|
4934
4935
|
_resolve = inject(CLX_ALERT_RESOLVE);
|
|
4935
4936
|
_animate = inject(ClxAnimateService);
|
|
4936
4937
|
_el = inject((ElementRef));
|
|
4937
|
-
_zone = inject(NgZone);
|
|
4938
|
+
_zone = inject(NgZone, { optional: true }) ?? { run: (fn) => fn(), runOutsideAngular: (fn) => fn() };
|
|
4938
4939
|
// ─── Resolved options ─────────────────────────────────────────────────────
|
|
4939
4940
|
get _type() { return this._opts.type ?? 'info'; }
|
|
4940
4941
|
_icon = signal(ALERT_ICON_MAP[this._type], ...(ngDevMode ? [{ debugName: "_icon" }] : []));
|
|
@@ -5013,8 +5014,8 @@ class ClxAlertComponent {
|
|
|
5013
5014
|
this._timerHandle = null;
|
|
5014
5015
|
}
|
|
5015
5016
|
}
|
|
5016
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
5017
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
5017
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5018
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", type: ClxAlertComponent, isStandalone: true, selector: "clx-alert", ngImport: i0, template: `
|
|
5018
5019
|
<!-- Dialog card -->
|
|
5019
5020
|
<div
|
|
5020
5021
|
#card
|
|
@@ -5084,7 +5085,7 @@ class ClxAlertComponent {
|
|
|
5084
5085
|
</div>
|
|
5085
5086
|
`, isInline: true, styles: ["clx-alert{display:flex;align-items:center;justify-content:center;width:100%}.clx-alert-card{will-change:transform,opacity}\n"], dependencies: [{ kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }, { kind: "component", type: ClxButtonComponent, selector: "button[clx-button], a[clx-button]", inputs: ["variant", "color", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
5086
5087
|
}
|
|
5087
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
5088
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxAlertComponent, decorators: [{
|
|
5088
5089
|
type: Component,
|
|
5089
5090
|
args: [{ selector: 'clx-alert', standalone: true, imports: [ClxIconComponent, ClxButtonComponent, NgStyle], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: `
|
|
5090
5091
|
<!-- Dialog card -->
|
|
@@ -5202,8 +5203,8 @@ class ClxDrawerComponent {
|
|
|
5202
5203
|
_close() {
|
|
5203
5204
|
this._modalRef?.close();
|
|
5204
5205
|
}
|
|
5205
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
5206
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
5206
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5207
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", type: ClxDrawerComponent, isStandalone: true, selector: "clx-drawer", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, confirmButton: { classPropertyName: "confirmButton", publicName: "confirmButton", isSignal: true, isRequired: false, transformFunction: null }, cancelButton: { classPropertyName: "cancelButton", publicName: "cancelButton", isSignal: true, isRequired: false, transformFunction: null }, showCancelButton: { classPropertyName: "showCancelButton", publicName: "showCancelButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { confirmClick: "confirmClick", cancelClick: "cancelClick" }, host: { properties: { "class": "_hostClass()" } }, ngImport: i0, template: `
|
|
5207
5208
|
<!-- Header -->
|
|
5208
5209
|
<div class="flex items-center gap-3 px-6 py-4 border-b border-slate-100 shrink-0">
|
|
5209
5210
|
<div class="flex-1 min-w-0">
|
|
@@ -5258,7 +5259,7 @@ class ClxDrawerComponent {
|
|
|
5258
5259
|
</div>
|
|
5259
5260
|
`, isInline: true, dependencies: [{ kind: "component", type: ClxButtonComponent, selector: "button[clx-button], a[clx-button]", inputs: ["variant", "color", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
5260
5261
|
}
|
|
5261
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
5262
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxDrawerComponent, decorators: [{
|
|
5262
5263
|
type: Component,
|
|
5263
5264
|
args: [{
|
|
5264
5265
|
selector: 'clx-drawer',
|
|
@@ -5344,8 +5345,8 @@ class ClxModalComponent {
|
|
|
5344
5345
|
_close() {
|
|
5345
5346
|
this._modalRef?.close();
|
|
5346
5347
|
}
|
|
5347
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
5348
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
5348
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5349
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", type: ClxModalComponent, isStandalone: true, selector: "clx-modal", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, confirmButton: { classPropertyName: "confirmButton", publicName: "confirmButton", isSignal: true, isRequired: false, transformFunction: null }, cancelButton: { classPropertyName: "cancelButton", publicName: "cancelButton", isSignal: true, isRequired: false, transformFunction: null }, showCancelButton: { classPropertyName: "showCancelButton", publicName: "showCancelButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { confirmClick: "confirmClick", cancelClick: "cancelClick" }, host: { properties: { "class": "_hostClass()" } }, ngImport: i0, template: `
|
|
5349
5350
|
<!-- Header -->
|
|
5350
5351
|
<div class="flex items-center gap-3 px-6 py-4 border-b border-slate-100 shrink-0">
|
|
5351
5352
|
<div class="flex-1 min-w-0">
|
|
@@ -5400,7 +5401,7 @@ class ClxModalComponent {
|
|
|
5400
5401
|
</div>
|
|
5401
5402
|
`, isInline: true, dependencies: [{ kind: "component", type: ClxButtonComponent, selector: "button[clx-button], a[clx-button]", inputs: ["variant", "color", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
5402
5403
|
}
|
|
5403
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
5404
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxModalComponent, decorators: [{
|
|
5404
5405
|
type: Component,
|
|
5405
5406
|
args: [{
|
|
5406
5407
|
selector: 'clx-modal',
|
|
@@ -5628,8 +5629,8 @@ class ClxPaginationComponent {
|
|
|
5628
5629
|
this.currentPage.set(clamped);
|
|
5629
5630
|
this.pageChange.emit({ page: clamped, pageSize: this.pageSize() });
|
|
5630
5631
|
}
|
|
5631
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
5632
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
5632
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5633
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", type: ClxPaginationComponent, isStandalone: true, selector: "clx-pagination", inputs: { totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showPageSize: { classPropertyName: "showPageSize", publicName: "showPageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { currentPage: "currentPageChange", pageSize: "pageSizeChange", pageChange: "pageChange", sizeChange: "sizeChange" }, host: { classAttribute: "block" }, ngImport: i0, template: `
|
|
5633
5634
|
<div [class]="_wrapClass()">
|
|
5634
5635
|
|
|
5635
5636
|
<!-- ── Info: "1 - 5 de 25 registros" ─────────────────────────────────── -->
|
|
@@ -5729,7 +5730,7 @@ class ClxPaginationComponent {
|
|
|
5729
5730
|
</div>
|
|
5730
5731
|
`, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ClxButtonComponent, selector: "button[clx-button], a[clx-button]", inputs: ["variant", "color", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly"] }, { kind: "component", type: ClxSelectComponent, selector: "clx-select", inputs: ["label", "placeholder", "options", "multiple", "searchable", "searchPlaceholder", "activeColor", "size", "hint", "errorMessage", "disabled", "async", "loadOptions", "debounceMs", "minChars"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
5731
5732
|
}
|
|
5732
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
5733
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxPaginationComponent, decorators: [{
|
|
5733
5734
|
type: Component,
|
|
5734
5735
|
args: [{
|
|
5735
5736
|
selector: 'clx-pagination',
|
|
@@ -5982,7 +5983,7 @@ class ClxToastComponent {
|
|
|
5982
5983
|
dismiss = output();
|
|
5983
5984
|
_animate = inject(ClxAnimateService);
|
|
5984
5985
|
_el = inject((ElementRef));
|
|
5985
|
-
_zone = inject(NgZone);
|
|
5986
|
+
_zone = inject(NgZone, { optional: true }) ?? { run: (fn) => fn(), runOutsideAngular: (fn) => fn() };
|
|
5986
5987
|
// ─── Timer state ──────────────────────────────────────────────────────────
|
|
5987
5988
|
_progressPct = signal(100, ...(ngDevMode ? [{ debugName: "_progressPct" }] : []));
|
|
5988
5989
|
_timerHandle = null;
|
|
@@ -6066,8 +6067,8 @@ class ClxToastComponent {
|
|
|
6066
6067
|
this._timerHandle = null;
|
|
6067
6068
|
}
|
|
6068
6069
|
}
|
|
6069
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
6070
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
6070
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6071
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", type: ClxToastComponent, isStandalone: true, selector: "clx-toast", inputs: { entry: { classPropertyName: "entry", publicName: "entry", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { dismiss: "dismiss" }, ngImport: i0, template: `
|
|
6071
6072
|
<!-- Toast card -->
|
|
6072
6073
|
<div
|
|
6073
6074
|
#card
|
|
@@ -6134,7 +6135,7 @@ class ClxToastComponent {
|
|
|
6134
6135
|
</div>
|
|
6135
6136
|
`, isInline: true, styles: ["clx-toast{display:block;width:100%}.clx-toast-card{will-change:transform,opacity}\n"], dependencies: [{ kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }, { kind: "component", type: ClxButtonComponent, selector: "button[clx-button], a[clx-button]", inputs: ["variant", "color", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
6136
6137
|
}
|
|
6137
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
6138
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxToastComponent, decorators: [{
|
|
6138
6139
|
type: Component,
|
|
6139
6140
|
args: [{ selector: 'clx-toast', standalone: true, imports: [ClxIconComponent, ClxButtonComponent, NgStyle], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: `
|
|
6140
6141
|
<!-- Toast card -->
|
|
@@ -6217,8 +6218,8 @@ class ClxToastContainerComponent {
|
|
|
6217
6218
|
}
|
|
6218
6219
|
this.entries.update(list => list.filter(e => e.id !== id));
|
|
6219
6220
|
}
|
|
6220
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
6221
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
6221
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxToastContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6222
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", type: ClxToastContainerComponent, isStandalone: true, selector: "clx-toast-container", inputs: { entries: { classPropertyName: "entries", publicName: "entries", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { entries: "entriesChange", position: "positionChange" }, viewQueries: [{ propertyName: "toastRefs", predicate: ClxToastComponent, descendants: true }], ngImport: i0, template: `
|
|
6222
6223
|
<div
|
|
6223
6224
|
class="clx-toast-stack fixed z-9999 flex flex-col gap-2 w-full max-w-sm pointer-events-none sm:max-w-sm max-sm:max-w-full max-sm:left-0! max-sm:right-0! max-sm:translate-x-0! max-sm:px-3 max-sm:items-stretch!"
|
|
6224
6225
|
[class]="_positionClass()"
|
|
@@ -6234,7 +6235,7 @@ class ClxToastContainerComponent {
|
|
|
6234
6235
|
</div>
|
|
6235
6236
|
`, isInline: true, styles: ["clx-toast-container{display:contents}@media (max-width: 639px){.clx-toast-stack{left:0!important;right:0!important;transform:none!important;padding-left:.75rem;padding-right:.75rem;max-width:100%!important;align-items:stretch!important}}\n"], dependencies: [{ kind: "component", type: ClxToastComponent, selector: "clx-toast", inputs: ["entry"], outputs: ["dismiss"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
6236
6237
|
}
|
|
6237
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
6238
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxToastContainerComponent, decorators: [{
|
|
6238
6239
|
type: Component,
|
|
6239
6240
|
args: [{ selector: 'clx-toast-container', standalone: true, imports: [ClxToastComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: `
|
|
6240
6241
|
<div
|
|
@@ -6264,28 +6265,28 @@ const CARD_PADDING_MAP = {
|
|
|
6264
6265
|
};
|
|
6265
6266
|
|
|
6266
6267
|
class ClxCardHeaderDirective {
|
|
6267
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
6268
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.
|
|
6268
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxCardHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
6269
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.23", type: ClxCardHeaderDirective, isStandalone: true, selector: "[clxCardHeader]", ngImport: i0 });
|
|
6269
6270
|
}
|
|
6270
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
6271
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxCardHeaderDirective, decorators: [{
|
|
6271
6272
|
type: Directive,
|
|
6272
6273
|
args: [{ selector: '[clxCardHeader]', standalone: true }]
|
|
6273
6274
|
}] });
|
|
6274
6275
|
|
|
6275
6276
|
class ClxCardBodyDirective {
|
|
6276
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
6277
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.
|
|
6277
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxCardBodyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
6278
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.23", type: ClxCardBodyDirective, isStandalone: true, selector: "[clxCardBody]", ngImport: i0 });
|
|
6278
6279
|
}
|
|
6279
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
6280
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxCardBodyDirective, decorators: [{
|
|
6280
6281
|
type: Directive,
|
|
6281
6282
|
args: [{ selector: '[clxCardBody]', standalone: true }]
|
|
6282
6283
|
}] });
|
|
6283
6284
|
|
|
6284
6285
|
class ClxCardFooterDirective {
|
|
6285
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
6286
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.
|
|
6286
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxCardFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
6287
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.23", type: ClxCardFooterDirective, isStandalone: true, selector: "[clxCardFooter]", ngImport: i0 });
|
|
6287
6288
|
}
|
|
6288
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
6289
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxCardFooterDirective, decorators: [{
|
|
6289
6290
|
type: Directive,
|
|
6290
6291
|
args: [{ selector: '[clxCardFooter]', standalone: true }]
|
|
6291
6292
|
}] });
|
|
@@ -6321,8 +6322,8 @@ class ClxCardComponent {
|
|
|
6321
6322
|
}
|
|
6322
6323
|
return `flex flex-col rounded-xl overflow-hidden w-full ${variantClass} ${hover}`.trim();
|
|
6323
6324
|
}, ...(ngDevMode ? [{ debugName: "_hostClass" }] : []));
|
|
6324
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
6325
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
6325
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6326
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", type: ClxCardComponent, isStandalone: true, selector: "clx-card", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, hover: { classPropertyName: "hover", publicName: "hover", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_hostClass()" } }, queries: [{ propertyName: "_headerSlot", first: true, predicate: ClxCardHeaderDirective, descendants: true, isSignal: true }, { propertyName: "_bodySlot", first: true, predicate: ClxCardBodyDirective, descendants: true, isSignal: true }, { propertyName: "_footerSlot", first: true, predicate: ClxCardFooterDirective, descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
6326
6327
|
@if (_hasHeader()) {
|
|
6327
6328
|
<div class="clx-card-header flex items-center justify-between gap-3 px-5 py-4 border-b border-slate-100">
|
|
6328
6329
|
<ng-content select="[clxCardHeader]" />
|
|
@@ -6343,7 +6344,7 @@ class ClxCardComponent {
|
|
|
6343
6344
|
}
|
|
6344
6345
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
6345
6346
|
}
|
|
6346
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
6347
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxCardComponent, decorators: [{
|
|
6347
6348
|
type: Component,
|
|
6348
6349
|
args: [{
|
|
6349
6350
|
selector: 'clx-card',
|
|
@@ -6449,8 +6450,8 @@ class ClxStepperComponent {
|
|
|
6449
6450
|
return `font-medium text-red-500 ${size}`;
|
|
6450
6451
|
return `font-normal text-slate-400 ${size}`;
|
|
6451
6452
|
}
|
|
6452
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
6453
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
6453
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6454
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", type: ClxStepperComponent, isStandalone: true, selector: "clx-stepper", inputs: { steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_hostClass()" } }, ngImport: i0, template: `
|
|
6454
6455
|
@for (step of steps(); track $index; let last = $last; let i = $index) {
|
|
6455
6456
|
|
|
6456
6457
|
<!-- Step -->
|
|
@@ -6497,7 +6498,7 @@ class ClxStepperComponent {
|
|
|
6497
6498
|
}
|
|
6498
6499
|
`, isInline: true, dependencies: [{ kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
6499
6500
|
}
|
|
6500
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
6501
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxStepperComponent, decorators: [{
|
|
6501
6502
|
type: Component,
|
|
6502
6503
|
args: [{
|
|
6503
6504
|
selector: 'clx-stepper',
|
|
@@ -6621,8 +6622,8 @@ class ClxAvatarComponent {
|
|
|
6621
6622
|
const color = this._colorClass();
|
|
6622
6623
|
return `${base} ${size} ${shape} ${color}`.trim();
|
|
6623
6624
|
}, ...(ngDevMode ? [{ debugName: "_hostClass" }] : []));
|
|
6624
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
6625
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
6625
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6626
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", type: ClxAvatarComponent, isStandalone: true, selector: "clx-avatar", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, initials: { classPropertyName: "initials", publicName: "initials", isSignal: true, isRequired: false, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "img" }, properties: { "class": "_hostClass()", "attr.aria-label": "alt()" } }, ngImport: i0, template: `
|
|
6626
6627
|
@switch (_contentType()) {
|
|
6627
6628
|
@case ('image') {
|
|
6628
6629
|
<img [src]="src()" [alt]="alt()" class="w-full h-full object-cover" />
|
|
@@ -6636,7 +6637,7 @@ class ClxAvatarComponent {
|
|
|
6636
6637
|
}
|
|
6637
6638
|
`, isInline: true, dependencies: [{ kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
6638
6639
|
}
|
|
6639
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
6640
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxAvatarComponent, decorators: [{
|
|
6640
6641
|
type: Component,
|
|
6641
6642
|
args: [{
|
|
6642
6643
|
selector: 'clx-avatar',
|
|
@@ -6698,8 +6699,8 @@ class ClxTimelineComponent {
|
|
|
6698
6699
|
const px = this.sizeTokens().item.split(' ')[0];
|
|
6699
6700
|
return `flex items-center justify-between ${px} py-3 border-b ${resolveColor(this.color()).borderLight}`;
|
|
6700
6701
|
}, ...(ngDevMode ? [{ debugName: "_headerClass" }] : []));
|
|
6701
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
6702
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
6702
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxTimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6703
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", type: ClxTimelineComponent, isStandalone: true, selector: "clx-timeline", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, lineStyle: { classPropertyName: "lineStyle", publicName: "lineStyle", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, actionLabel: { classPropertyName: "actionLabel", publicName: "actionLabel", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "list" }, properties: { "class": "_hostClass()" } }, providers: [
|
|
6703
6704
|
{ provide: CLX_TIMELINE_CONTEXT, useExisting: forwardRef(() => ClxTimelineComponent) },
|
|
6704
6705
|
], ngImport: i0, template: `
|
|
6705
6706
|
@if (label()) {
|
|
@@ -6715,7 +6716,7 @@ class ClxTimelineComponent {
|
|
|
6715
6716
|
<ng-content />
|
|
6716
6717
|
`, isInline: true, dependencies: [{ kind: "component", type: ClxButtonComponent, selector: "button[clx-button], a[clx-button]", inputs: ["variant", "color", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
6717
6718
|
}
|
|
6718
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
6719
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxTimelineComponent, decorators: [{
|
|
6719
6720
|
type: Component,
|
|
6720
6721
|
args: [{
|
|
6721
6722
|
selector: 'clx-timeline',
|
|
@@ -6770,8 +6771,8 @@ class ClxTimelineItemComponent {
|
|
|
6770
6771
|
const lineStyle = TIMELINE_LINE_STYLE[this._ctx.lineStyle()];
|
|
6771
6772
|
return `flex-1 w-0 mt-1 ${lineStyle}`.trim();
|
|
6772
6773
|
}, ...(ngDevMode ? [{ debugName: "_lineClass" }] : []));
|
|
6773
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
6774
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
6774
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxTimelineItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6775
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", type: ClxTimelineItemComponent, isStandalone: true, selector: "clx-timeline-item", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, time: { classPropertyName: "time", publicName: "time", isSignal: true, isRequired: false, transformFunction: null }, last: { classPropertyName: "last", publicName: "last", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "listitem" }, properties: { "class": "_hostClass()" } }, ngImport: i0, template: `
|
|
6775
6776
|
<div class="flex flex-col items-center shrink-0">
|
|
6776
6777
|
<div [class]="_dotClass()">
|
|
6777
6778
|
<span clx-icon [name]="icon()" [size]="_ctx.sizeTokens().iconSize" [class]="_iconClass()"></span>
|
|
@@ -6797,7 +6798,7 @@ class ClxTimelineItemComponent {
|
|
|
6797
6798
|
</div>
|
|
6798
6799
|
`, isInline: true, dependencies: [{ kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
6799
6800
|
}
|
|
6800
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
6801
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxTimelineItemComponent, decorators: [{
|
|
6801
6802
|
type: Component,
|
|
6802
6803
|
args: [{
|
|
6803
6804
|
selector: 'clx-timeline-item',
|
|
@@ -6985,8 +6986,8 @@ class ClxChartComponent {
|
|
|
6985
6986
|
ngOnDestroy() {
|
|
6986
6987
|
this._chart?.destroy();
|
|
6987
6988
|
}
|
|
6988
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
6989
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
6989
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6990
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", type: ClxChartComponent, isStandalone: true, selector: "clx-chart", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true }], ngImport: i0, template: `
|
|
6990
6991
|
<div class="clx-chart-container" [style.height]="_hostHeight()" [class.clx-loading]="loading()">
|
|
6991
6992
|
<canvas #canvas role="img" [attr.aria-label]="ariaLabel() || 'Chart'"></canvas>
|
|
6992
6993
|
|
|
@@ -6998,7 +6999,7 @@ class ClxChartComponent {
|
|
|
6998
6999
|
</div>
|
|
6999
7000
|
`, isInline: true, styles: [":host{display:block;width:100%}.clx-chart-container{position:relative;width:100%}canvas{display:block;width:100%!important}.clx-chart-loader{position:absolute;inset:0;background:#fff9;display:flex;align-items:center;justify-content:center;z-index:10;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
7000
7001
|
}
|
|
7001
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
7002
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxChartComponent, decorators: [{
|
|
7002
7003
|
type: Component,
|
|
7003
7004
|
args: [{ selector: 'clx-chart', standalone: true, template: `
|
|
7004
7005
|
<div class="clx-chart-container" [style.height]="_hostHeight()" [class.clx-loading]="loading()">
|
|
@@ -7362,8 +7363,8 @@ class ClxColorPickerComponent {
|
|
|
7362
7363
|
registerOnChange(fn) { this._onChange = fn; }
|
|
7363
7364
|
registerOnTouched(fn) { this._onTouched = fn; }
|
|
7364
7365
|
setDisabledState(disabled) { this._cvaDisabled.set(disabled); }
|
|
7365
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
7366
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
7366
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7367
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", type: ClxColorPickerComponent, isStandalone: true, selector: "clx-colorpicker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, presets: { classPropertyName: "presets", publicName: "presets", isSignal: true, isRequired: false, transformFunction: null }, activeColor: { classPropertyName: "activeColor", publicName: "activeColor", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:pointermove": "_onDocPointerMove($event)", "document:pointerup": "_onDocPointerUp()", "keydown.escape": "onEscape()" }, classAttribute: "flex flex-col gap-1.5 w-full" }, ngImport: i0, template: `
|
|
7367
7368
|
@if (label()) {
|
|
7368
7369
|
<label [id]="_labelId" [class]="_labelClass()">{{ label() }}</label>
|
|
7369
7370
|
}
|
|
@@ -7524,7 +7525,7 @@ class ClxColorPickerComponent {
|
|
|
7524
7525
|
}
|
|
7525
7526
|
`, isInline: true, dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }, { kind: "component", type: ClxButtonComponent, selector: "button[clx-button], a[clx-button]", inputs: ["variant", "color", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
7526
7527
|
}
|
|
7527
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
7528
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxColorPickerComponent, decorators: [{
|
|
7528
7529
|
type: Component,
|
|
7529
7530
|
args: [{
|
|
7530
7531
|
selector: 'clx-colorpicker',
|
|
@@ -7921,8 +7922,8 @@ class ClxDatepickerComponent {
|
|
|
7921
7922
|
registerOnChange(fn) { this._onChange = fn; }
|
|
7922
7923
|
registerOnTouched(fn) { this._onTouched = fn; }
|
|
7923
7924
|
setDisabledState(disabled) { this._cvaDisabled.set(disabled); }
|
|
7924
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
7925
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
7925
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxDatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7926
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", type: ClxDatepickerComponent, isStandalone: true, selector: "clx-datepicker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, statusMessage: { classPropertyName: "statusMessage", publicName: "statusMessage", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown.escape": "onEscape()" }, classAttribute: "flex flex-col gap-1.5" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => ClxDatepickerComponent), multi: true }], viewQueries: [{ propertyName: "origin", first: true, predicate: ["origin"], descendants: true }], ngImport: i0, template: `
|
|
7926
7927
|
@if (label()) {
|
|
7927
7928
|
<label [class]="_labelClass()">{{ label() }}</label>
|
|
7928
7929
|
}
|
|
@@ -8015,7 +8016,7 @@ class ClxDatepickerComponent {
|
|
|
8015
8016
|
}
|
|
8016
8017
|
`, isInline: true, dependencies: [{ kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }, { kind: "component", type: ClxButtonComponent, selector: "button[clx-button], a[clx-button]", inputs: ["variant", "color", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
8017
8018
|
}
|
|
8018
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
8019
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxDatepickerComponent, decorators: [{
|
|
8019
8020
|
type: Component,
|
|
8020
8021
|
args: [{
|
|
8021
8022
|
selector: 'clx-datepicker',
|
|
@@ -8431,8 +8432,8 @@ class ClxDateRangePickerComponent {
|
|
|
8431
8432
|
registerOnChange(fn) { this._onChange = fn; }
|
|
8432
8433
|
registerOnTouched(fn) { this._onTouched = fn; }
|
|
8433
8434
|
setDisabledState(disabled) { this._cvaDisabled.set(disabled); }
|
|
8434
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
8435
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
8435
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxDateRangePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8436
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", type: ClxDateRangePickerComponent, isStandalone: true, selector: "clx-date-range-picker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, statusMessage: { classPropertyName: "statusMessage", publicName: "statusMessage", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown.escape": "onEscape()" }, classAttribute: "flex flex-col gap-1.5" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => ClxDateRangePickerComponent), multi: true }], ngImport: i0, template: `
|
|
8436
8437
|
@if (label()) {
|
|
8437
8438
|
<label [class]="_labelClass()">{{ label() }}</label>
|
|
8438
8439
|
}
|
|
@@ -8582,7 +8583,7 @@ class ClxDateRangePickerComponent {
|
|
|
8582
8583
|
}
|
|
8583
8584
|
`, isInline: true, dependencies: [{ kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }, { kind: "component", type: ClxButtonComponent, selector: "button[clx-button], a[clx-button]", inputs: ["variant", "color", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
8584
8585
|
}
|
|
8585
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
8586
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxDateRangePickerComponent, decorators: [{
|
|
8586
8587
|
type: Component,
|
|
8587
8588
|
args: [{
|
|
8588
8589
|
selector: 'clx-date-range-picker',
|
|
@@ -8766,8 +8767,8 @@ class ClxEditorLinkModalComponent {
|
|
|
8766
8767
|
_cancel() {
|
|
8767
8768
|
this._modalRef?.close(undefined);
|
|
8768
8769
|
}
|
|
8769
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
8770
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.
|
|
8770
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxEditorLinkModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8771
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.23", type: ClxEditorLinkModalComponent, isStandalone: true, selector: "clx-editor-link-modal", ngImport: i0, template: `
|
|
8771
8772
|
<clx-modal
|
|
8772
8773
|
size="sm"
|
|
8773
8774
|
[confirmButton]="{ text: 'Insertar', color: 'indigo' }"
|
|
@@ -8800,7 +8801,7 @@ class ClxEditorLinkModalComponent {
|
|
|
8800
8801
|
</clx-modal>
|
|
8801
8802
|
`, isInline: true, dependencies: [{ kind: "component", type: ClxModalComponent, selector: "clx-modal", inputs: ["size", "showClose", "confirmButton", "cancelButton", "showCancelButton"], outputs: ["confirmClick", "cancelClick"] }, { kind: "component", type: ClxInputComponent, selector: "clx-input", inputs: ["label", "placeholder", "type", "color", "hint", "prefixIcon", "suffixIcon", "prefixText", "suffixText", "status", "statusMessage", "size", "value", "disabled"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
8802
8803
|
}
|
|
8803
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
8804
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxEditorLinkModalComponent, decorators: [{
|
|
8804
8805
|
type: Component,
|
|
8805
8806
|
args: [{
|
|
8806
8807
|
selector: 'clx-editor-link-modal',
|
|
@@ -8898,10 +8899,10 @@ class ClxModalWrapperComponent {
|
|
|
8898
8899
|
_panel() {
|
|
8899
8900
|
return this._el.nativeElement.firstElementChild;
|
|
8900
8901
|
}
|
|
8901
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
8902
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.
|
|
8902
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxModalWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8903
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.23", type: ClxModalWrapperComponent, isStandalone: true, selector: "clx-modal-wrapper", inputs: { portal: { classPropertyName: "portal", publicName: "portal", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { portal: "portalChange" }, host: { styleAttribute: "display:contents" }, ngImport: i0, template: `<ng-container [cdkPortalOutlet]="portal()" />`, isInline: true, dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1$2.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
8903
8904
|
}
|
|
8904
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
8905
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxModalWrapperComponent, decorators: [{
|
|
8905
8906
|
type: Component,
|
|
8906
8907
|
args: [{
|
|
8907
8908
|
selector: 'clx-modal-wrapper',
|
|
@@ -8988,10 +8989,10 @@ class ClxModalService {
|
|
|
8988
8989
|
_focusTrap.focusInitialElementWhenReady();
|
|
8989
8990
|
return modalRef;
|
|
8990
8991
|
}
|
|
8991
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
8992
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.
|
|
8992
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
8993
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxModalService, providedIn: 'root' });
|
|
8993
8994
|
}
|
|
8994
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
8995
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxModalService, decorators: [{
|
|
8995
8996
|
type: Injectable,
|
|
8996
8997
|
args: [{ providedIn: 'root' }]
|
|
8997
8998
|
}] });
|
|
@@ -9064,7 +9065,7 @@ class ClxEditorComponent {
|
|
|
9064
9065
|
_sourceEl;
|
|
9065
9066
|
// ── Services ─────────────────────────────────────────────────────────────
|
|
9066
9067
|
_cdr = inject(ChangeDetectorRef);
|
|
9067
|
-
_zone = inject(NgZone);
|
|
9068
|
+
_zone = inject(NgZone, { optional: true }) ?? { run: (fn) => fn(), runOutsideAngular: (fn) => fn() };
|
|
9068
9069
|
_destroyRef = inject(DestroyRef);
|
|
9069
9070
|
_modal = inject(ClxModalService);
|
|
9070
9071
|
// ── Select options ────────────────────────────────────────────────────────
|
|
@@ -9363,8 +9364,8 @@ class ClxEditorComponent {
|
|
|
9363
9364
|
this._cvaDisabled.set(disabled);
|
|
9364
9365
|
this._cdr.markForCheck();
|
|
9365
9366
|
}
|
|
9366
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
9367
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
9367
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
9368
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", type: ClxEditorComponent, isStandalone: true, selector: "clx-editor", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, statusMessage: { classPropertyName: "statusMessage", publicName: "statusMessage", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "flex flex-col gap-1.5" }, providers: [
|
|
9368
9369
|
{
|
|
9369
9370
|
provide: NG_VALUE_ACCESSOR,
|
|
9370
9371
|
useExisting: forwardRef(() => ClxEditorComponent),
|
|
@@ -9544,7 +9545,7 @@ class ClxEditorComponent {
|
|
|
9544
9545
|
}
|
|
9545
9546
|
`, isInline: true, styles: [".clx-editor-body:empty:before{content:attr(data-placeholder);color:#9ca3af;pointer-events:none}.clx-editor-body:focus{outline:none}.clx-editor-body p{margin:0 0 .4em}.clx-editor-body p:last-child{margin-bottom:0}.clx-editor-body h1{font-size:1.5em;font-weight:700;margin:.5em 0}.clx-editor-body h2{font-size:1.25em;font-weight:600;margin:.5em 0}.clx-editor-body h3{font-size:1.1em;font-weight:600;margin:.5em 0}.clx-editor-body ul,.clx-editor-body ol{padding-left:1.5em;margin:.35em 0}.clx-editor-body li{margin:.1em 0}.clx-editor-body blockquote{border-left:3px solid #e2e8f0;padding-left:.75em;color:#64748b;margin:.4em 0}.clx-editor-body code{background:#f1f5f9;border-radius:3px;padding:.1em .3em;font-size:.875em;font-family:ui-monospace,monospace}.clx-editor-body a{color:#6366f1;text-decoration:underline}.clx-editor-body hr{border:none;border-top:1px solid #e2e8f0;margin:.6em 0}.clx-editor-color-btn{position:relative;overflow:hidden}.clx-editor-color-btn input[type=color]{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;border:none;padding:0}.clx-editor-toolbar-select clx-select .flex.flex-col{gap:0!important}.clx-editor-source{width:100%;resize:none;border:none;outline:none;background:#0f172a;color:#e2e8f0;font-family:ui-monospace,Cascadia Code,Fira Code,monospace;font-size:.8125rem;line-height:1.6;padding:1rem;tab-size:2}\n"], dependencies: [{ kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }, { kind: "component", type: ClxButtonComponent, selector: "button[clx-button], a[clx-button]", inputs: ["variant", "color", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly"] }, { kind: "component", type: ClxSelectComponent, selector: "clx-select", inputs: ["label", "placeholder", "options", "multiple", "searchable", "searchPlaceholder", "activeColor", "size", "hint", "errorMessage", "disabled", "async", "loadOptions", "debounceMs", "minChars"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
9546
9547
|
}
|
|
9547
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
9548
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxEditorComponent, decorators: [{
|
|
9548
9549
|
type: Component,
|
|
9549
9550
|
args: [{ selector: 'clx-editor', standalone: true, imports: [ClxIconComponent, ClxButtonComponent, ClxSelectComponent, ReactiveFormsModule], providers: [
|
|
9550
9551
|
{
|
|
@@ -9789,8 +9790,8 @@ class ClxSwitchComponent {
|
|
|
9789
9790
|
_handleBlur() {
|
|
9790
9791
|
this._onTouched();
|
|
9791
9792
|
}
|
|
9792
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
9793
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
9793
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxSwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
9794
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", type: ClxSwitchComponent, isStandalone: true, selector: "label[clx-switch]", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.opacity": "_disabled() ? \"0.5\" : null", "style.cursor": "_disabled() ? \"not-allowed\" : \"pointer\"", "style.pointer-events": "_disabled() ? \"none\" : null" }, classAttribute: "relative inline-flex items-center gap-2 select-none" }, providers: [
|
|
9794
9795
|
{
|
|
9795
9796
|
provide: NG_VALUE_ACCESSOR,
|
|
9796
9797
|
useExisting: forwardRef(() => ClxSwitchComponent),
|
|
@@ -9813,7 +9814,7 @@ class ClxSwitchComponent {
|
|
|
9813
9814
|
}
|
|
9814
9815
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
9815
9816
|
}
|
|
9816
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
9817
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxSwitchComponent, decorators: [{
|
|
9817
9818
|
type: Component,
|
|
9818
9819
|
args: [{
|
|
9819
9820
|
selector: 'label[clx-switch]',
|
|
@@ -9993,8 +9994,8 @@ class ClxTextareaComponent {
|
|
|
9993
9994
|
_handleBlur() {
|
|
9994
9995
|
this._onTouched();
|
|
9995
9996
|
}
|
|
9996
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
9997
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
9997
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxTextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
9998
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", type: ClxTextareaComponent, isStandalone: true, selector: "clx-textarea", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, statusMessage: { classPropertyName: "statusMessage", publicName: "statusMessage", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, suffixIcon: { classPropertyName: "suffixIcon", publicName: "suffixIcon", isSignal: true, isRequired: false, transformFunction: null }, resize: { classPropertyName: "resize", publicName: "resize", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "flex flex-col gap-1.5" }, providers: [
|
|
9998
9999
|
{
|
|
9999
10000
|
provide: NG_VALUE_ACCESSOR,
|
|
10000
10001
|
useExisting: forwardRef(() => ClxTextareaComponent),
|
|
@@ -10055,7 +10056,7 @@ class ClxTextareaComponent {
|
|
|
10055
10056
|
}
|
|
10056
10057
|
`, isInline: true, dependencies: [{ kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
10057
10058
|
}
|
|
10058
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
10059
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxTextareaComponent, decorators: [{
|
|
10059
10060
|
type: Component,
|
|
10060
10061
|
args: [{
|
|
10061
10062
|
selector: 'clx-textarea',
|
|
@@ -10362,8 +10363,8 @@ class ClxUploadComponent {
|
|
|
10362
10363
|
return `${(bytes / 1_024).toFixed(1)} KB`;
|
|
10363
10364
|
return `${(bytes / 1_048_576).toFixed(1)} MB`;
|
|
10364
10365
|
}
|
|
10365
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
10366
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
10366
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
10367
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", type: ClxUploadComponent, isStandalone: true, selector: "clx-upload", inputs: { multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onUploadError: "onUploadError", onUploadSuccess: "onUploadSuccess" }, host: { classAttribute: "block w-full" }, viewQueries: [{ propertyName: "_fileInput", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
10367
10368
|
<!-- Hidden file input -->
|
|
10368
10369
|
<input
|
|
10369
10370
|
#fileInput
|
|
@@ -10439,7 +10440,7 @@ class ClxUploadComponent {
|
|
|
10439
10440
|
}
|
|
10440
10441
|
`, isInline: true, dependencies: [{ kind: "component", type: ClxButtonComponent, selector: "button[clx-button], a[clx-button]", inputs: ["variant", "color", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly"] }, { kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
10441
10442
|
}
|
|
10442
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
10443
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxUploadComponent, decorators: [{
|
|
10443
10444
|
type: Component,
|
|
10444
10445
|
args: [{
|
|
10445
10446
|
selector: 'clx-upload',
|
|
@@ -10536,10 +10537,10 @@ class ClxStepComponent {
|
|
|
10536
10537
|
isValid = input(true, ...(ngDevMode ? [{ debugName: "isValid" }] : []));
|
|
10537
10538
|
/** Exposed so the parent wizard can toggle visibility imperatively */
|
|
10538
10539
|
nativeEl = inject((ElementRef)).nativeElement;
|
|
10539
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
10540
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.
|
|
10540
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
10541
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.23", type: ClxStepComponent, isStandalone: true, selector: "clx-step", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, isValid: { classPropertyName: "isValid", publicName: "isValid", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block w-full" }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
10541
10542
|
}
|
|
10542
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
10543
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxStepComponent, decorators: [{
|
|
10543
10544
|
type: Component,
|
|
10544
10545
|
args: [{
|
|
10545
10546
|
selector: 'clx-step',
|
|
@@ -10666,8 +10667,8 @@ class ClxWizardComponent {
|
|
|
10666
10667
|
return `${base} bg-red-500 text-white ${ptr}`;
|
|
10667
10668
|
return `${base} border-2 border-slate-200 text-slate-400 bg-white ${ptr}`;
|
|
10668
10669
|
}
|
|
10669
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
10670
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
10670
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxWizardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
10671
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", type: ClxWizardComponent, isStandalone: true, selector: "clx-wizard", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, prevLabel: { classPropertyName: "prevLabel", publicName: "prevLabel", isSignal: true, isRequired: false, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: false, transformFunction: null }, finishLabel: { classPropertyName: "finishLabel", publicName: "finishLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { stepChange: "stepChange", finish: "finish" }, queries: [{ propertyName: "_stepQuery", predicate: ClxStepComponent }], ngImport: i0, template: `
|
|
10671
10672
|
<div [class]="_rootClass()">
|
|
10672
10673
|
|
|
10673
10674
|
<!-- ══ HORIZONTAL: clx-tabs indicator ═══════════════════════════════ -->
|
|
@@ -10770,7 +10771,7 @@ class ClxWizardComponent {
|
|
|
10770
10771
|
</div>
|
|
10771
10772
|
`, isInline: true, styles: ["@keyframes clx-wizard-fade-slide{0%{opacity:0;transform:translate(10px)}to{opacity:1;transform:translate(0)}}.clx-wizard-step-enter{animation:clx-wizard-fade-slide .22s cubic-bezier(.4,0,.2,1) both}@keyframes clx-wizard-fill{0%{width:0%}to{width:100%}}.clx-wizard-connector-fill{animation:clx-wizard-fill .3s ease both}clx-step[data-active=false]{display:none}\n"], dependencies: [{ kind: "component", type: ClxButtonComponent, selector: "button[clx-button], a[clx-button]", inputs: ["variant", "color", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly"] }, { kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }, { kind: "component", type: ClxTabsComponent, selector: "clx-tabs", inputs: ["tabs", "clxColor", "activeTab"], outputs: ["activeTabChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
10772
10773
|
}
|
|
10773
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
10774
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxWizardComponent, decorators: [{
|
|
10774
10775
|
type: Component,
|
|
10775
10776
|
args: [{ selector: 'clx-wizard', standalone: true, imports: [ClxButtonComponent, ClxIconComponent, ClxTabsComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: `
|
|
10776
10777
|
<div [class]="_rootClass()">
|
|
@@ -10880,7 +10881,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
|
|
|
10880
10881
|
}] } });
|
|
10881
10882
|
|
|
10882
10883
|
class ClxAppLayoutComponent {
|
|
10883
|
-
_zone = inject(NgZone);
|
|
10884
|
+
_zone = inject(NgZone, { optional: true }) ?? { run: (fn) => fn(), runOutsideAngular: (fn) => fn() };
|
|
10884
10885
|
_document = inject(DOCUMENT);
|
|
10885
10886
|
activeColor = input('indigo', ...(ngDevMode ? [{ debugName: "activeColor" }] : []));
|
|
10886
10887
|
_sidebarOpen = signal(false, ...(ngDevMode ? [{ debugName: "_sidebarOpen" }] : []));
|
|
@@ -10963,8 +10964,8 @@ class ClxAppLayoutComponent {
|
|
|
10963
10964
|
toggleSidebar() { this._sidebarOpen.update(v => !v); }
|
|
10964
10965
|
openSidebar() { this._sidebarOpen.set(true); }
|
|
10965
10966
|
closeSidebar() { this._sidebarOpen.set(false); }
|
|
10966
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
10967
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
10967
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxAppLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
10968
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", type: ClxAppLayoutComponent, isStandalone: true, selector: "clx-app-layout", inputs: { activeColor: { classPropertyName: "activeColor", publicName: "activeColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsedChange: "collapsedChange", expandedChange: "expandedChange" }, host: { classAttribute: "flex h-screen overflow-hidden" }, ngImport: i0, template: `
|
|
10968
10969
|
<!-- Mobile backdrop -->
|
|
10969
10970
|
@if (_showBackdrop()) {
|
|
10970
10971
|
<div
|
|
@@ -11020,7 +11021,7 @@ class ClxAppLayoutComponent {
|
|
|
11020
11021
|
</div>
|
|
11021
11022
|
`, isInline: true, dependencies: [{ kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
11022
11023
|
}
|
|
11023
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
11024
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxAppLayoutComponent, decorators: [{
|
|
11024
11025
|
type: Component,
|
|
11025
11026
|
args: [{
|
|
11026
11027
|
selector: 'clx-app-layout',
|
|
@@ -11092,8 +11093,8 @@ class ClxBrandComponent {
|
|
|
11092
11093
|
name = input.required(...(ngDevMode ? [{ debugName: "name" }] : []));
|
|
11093
11094
|
description = input('', ...(ngDevMode ? [{ debugName: "description" }] : []));
|
|
11094
11095
|
collapsed = input(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : []));
|
|
11095
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
11096
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
11096
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxBrandComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11097
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", type: ClxBrandComponent, isStandalone: true, selector: "clx-brand", inputs: { logo: { classPropertyName: "logo", publicName: "logo", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, ngImport: i0, template: `
|
|
11097
11098
|
<div [class]="collapsed() ? 'flex items-center justify-center py-4' : 'flex items-center gap-3 px-4 py-4'">
|
|
11098
11099
|
<img [src]="logo()" [alt]="name()" class="h-8 w-8 shrink-0 object-contain" />
|
|
11099
11100
|
@if (!collapsed()) {
|
|
@@ -11107,7 +11108,7 @@ class ClxBrandComponent {
|
|
|
11107
11108
|
</div>
|
|
11108
11109
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
11109
11110
|
}
|
|
11110
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
11111
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxBrandComponent, decorators: [{
|
|
11111
11112
|
type: Component,
|
|
11112
11113
|
args: [{
|
|
11113
11114
|
selector: 'clx-brand',
|
|
@@ -11139,7 +11140,7 @@ const NAV_ITEM_IDLE = 'text-slate-400';
|
|
|
11139
11140
|
// ── Children container ─────────────────────────────────────────────────────────
|
|
11140
11141
|
const NAV_CHILDREN_WRAPPER = 'grid transition-all duration-300 ease-in-out';
|
|
11141
11142
|
const NAV_CHILDREN_INNER = 'overflow-hidden';
|
|
11142
|
-
const NAV_CHILDREN_LIST = 'ml-6
|
|
11143
|
+
const NAV_CHILDREN_LIST = 'ml-6 py-1 space-y-0.5';
|
|
11143
11144
|
|
|
11144
11145
|
class ClxMenuItemComponent {
|
|
11145
11146
|
label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
@@ -11148,6 +11149,8 @@ class ClxMenuItemComponent {
|
|
|
11148
11149
|
color = input('indigo', ...(ngDevMode ? [{ debugName: "color" }] : []));
|
|
11149
11150
|
nested = input(false, ...(ngDevMode ? [{ debugName: "nested" }] : []));
|
|
11150
11151
|
collapsed = input(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : []));
|
|
11152
|
+
routerLink = input('', ...(ngDevMode ? [{ debugName: "routerLink" }] : []));
|
|
11153
|
+
routerLinkActiveOptions = input({ exact: false }, ...(ngDevMode ? [{ debugName: "routerLinkActiveOptions" }] : []));
|
|
11151
11154
|
itemClick = output();
|
|
11152
11155
|
_inheritedColor = signal(null, ...(ngDevMode ? [{ debugName: "_inheritedColor" }] : []));
|
|
11153
11156
|
_resolvedColor = computed(() => this._inheritedColor() ?? this.color(), ...(ngDevMode ? [{ debugName: "_resolvedColor" }] : []));
|
|
@@ -11169,47 +11172,81 @@ class ClxMenuItemComponent {
|
|
|
11169
11172
|
}
|
|
11170
11173
|
return `${NAV_ITEM_BASE} ${this._geom()} ${t.textSubtle} font-semibold border-l-2 ${t.borderLight} !pl-[22px] ${t.hoverBgMuted}`;
|
|
11171
11174
|
}, ...(ngDevMode ? [{ debugName: "_activeCls" }] : []));
|
|
11172
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
11173
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
11174
|
-
|
|
11175
|
-
|
|
11176
|
-
|
|
11177
|
-
|
|
11178
|
-
|
|
11179
|
-
|
|
11180
|
-
|
|
11181
|
-
|
|
11182
|
-
|
|
11183
|
-
|
|
11184
|
-
|
|
11185
|
-
|
|
11186
|
-
|
|
11175
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11176
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", type: ClxMenuItemComponent, isStandalone: true, selector: "clx-menu-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, nested: { classPropertyName: "nested", publicName: "nested", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, routerLinkActiveOptions: { classPropertyName: "routerLinkActiveOptions", publicName: "routerLinkActiveOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, host: { classAttribute: "block" }, ngImport: i0, template: `
|
|
11177
|
+
@if (routerLink()) {
|
|
11178
|
+
<a
|
|
11179
|
+
[routerLink]="routerLink()"
|
|
11180
|
+
routerLinkActive
|
|
11181
|
+
#rla="routerLinkActive"
|
|
11182
|
+
[routerLinkActiveOptions]="routerLinkActiveOptions()"
|
|
11183
|
+
[class]="rla.isActive ? _activeCls() : _idleCls()"
|
|
11184
|
+
[title]="collapsed() ? label() : ''">
|
|
11185
|
+
@if (icon()) {
|
|
11186
|
+
<span clx-icon [name]="icon()" size="sm" [class]="rla.isActive || nested() ? _iconCls() : 'text-slate-500'"></span>
|
|
11187
|
+
}
|
|
11188
|
+
@if (!collapsed()) {
|
|
11189
|
+
<span class="flex-1 text-left truncate">{{ label() }}</span>
|
|
11190
|
+
}
|
|
11191
|
+
</a>
|
|
11192
|
+
} @else {
|
|
11193
|
+
<button
|
|
11194
|
+
type="button"
|
|
11195
|
+
[class]="active() ? _activeCls() : _idleCls()"
|
|
11196
|
+
[title]="collapsed() ? label() : ''"
|
|
11197
|
+
(click)="itemClick.emit()">
|
|
11198
|
+
@if (icon()) {
|
|
11199
|
+
<span clx-icon [name]="icon()" size="sm" [class]="active() || nested() ? _iconCls() : 'text-slate-500'"></span>
|
|
11200
|
+
}
|
|
11201
|
+
@if (!collapsed()) {
|
|
11202
|
+
<span class="flex-1 text-left truncate">{{ label() }}</span>
|
|
11203
|
+
}
|
|
11204
|
+
</button>
|
|
11205
|
+
}
|
|
11206
|
+
`, isInline: true, dependencies: [{ kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
11187
11207
|
}
|
|
11188
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
11208
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxMenuItemComponent, decorators: [{
|
|
11189
11209
|
type: Component,
|
|
11190
11210
|
args: [{
|
|
11191
11211
|
selector: 'clx-menu-item',
|
|
11192
11212
|
standalone: true,
|
|
11193
|
-
imports: [ClxIconComponent],
|
|
11213
|
+
imports: [ClxIconComponent, RouterLink, RouterLinkActive],
|
|
11194
11214
|
template: `
|
|
11195
|
-
|
|
11196
|
-
|
|
11197
|
-
|
|
11198
|
-
|
|
11199
|
-
|
|
11200
|
-
|
|
11201
|
-
|
|
11202
|
-
|
|
11203
|
-
|
|
11204
|
-
|
|
11205
|
-
|
|
11206
|
-
|
|
11215
|
+
@if (routerLink()) {
|
|
11216
|
+
<a
|
|
11217
|
+
[routerLink]="routerLink()"
|
|
11218
|
+
routerLinkActive
|
|
11219
|
+
#rla="routerLinkActive"
|
|
11220
|
+
[routerLinkActiveOptions]="routerLinkActiveOptions()"
|
|
11221
|
+
[class]="rla.isActive ? _activeCls() : _idleCls()"
|
|
11222
|
+
[title]="collapsed() ? label() : ''">
|
|
11223
|
+
@if (icon()) {
|
|
11224
|
+
<span clx-icon [name]="icon()" size="sm" [class]="rla.isActive || nested() ? _iconCls() : 'text-slate-500'"></span>
|
|
11225
|
+
}
|
|
11226
|
+
@if (!collapsed()) {
|
|
11227
|
+
<span class="flex-1 text-left truncate">{{ label() }}</span>
|
|
11228
|
+
}
|
|
11229
|
+
</a>
|
|
11230
|
+
} @else {
|
|
11231
|
+
<button
|
|
11232
|
+
type="button"
|
|
11233
|
+
[class]="active() ? _activeCls() : _idleCls()"
|
|
11234
|
+
[title]="collapsed() ? label() : ''"
|
|
11235
|
+
(click)="itemClick.emit()">
|
|
11236
|
+
@if (icon()) {
|
|
11237
|
+
<span clx-icon [name]="icon()" size="sm" [class]="active() || nested() ? _iconCls() : 'text-slate-500'"></span>
|
|
11238
|
+
}
|
|
11239
|
+
@if (!collapsed()) {
|
|
11240
|
+
<span class="flex-1 text-left truncate">{{ label() }}</span>
|
|
11241
|
+
}
|
|
11242
|
+
</button>
|
|
11243
|
+
}
|
|
11207
11244
|
`,
|
|
11208
11245
|
encapsulation: ViewEncapsulation.None,
|
|
11209
11246
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
11210
11247
|
host: { class: 'block' },
|
|
11211
11248
|
}]
|
|
11212
|
-
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], nested: [{ type: i0.Input, args: [{ isSignal: true, alias: "nested", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] } });
|
|
11249
|
+
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], nested: [{ type: i0.Input, args: [{ isSignal: true, alias: "nested", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], routerLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLink", required: false }] }], routerLinkActiveOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLinkActiveOptions", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] } });
|
|
11213
11250
|
|
|
11214
11251
|
class ClxMenuComponent {
|
|
11215
11252
|
label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
@@ -11217,7 +11254,10 @@ class ClxMenuComponent {
|
|
|
11217
11254
|
color = input('indigo', ...(ngDevMode ? [{ debugName: "color" }] : []));
|
|
11218
11255
|
collapsed = input(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : []));
|
|
11219
11256
|
active = input(false, ...(ngDevMode ? [{ debugName: "active" }] : []));
|
|
11257
|
+
routerLink = input('', ...(ngDevMode ? [{ debugName: "routerLink" }] : []));
|
|
11258
|
+
routerLinkActiveOptions = input({ exact: false }, ...(ngDevMode ? [{ debugName: "routerLinkActiveOptions" }] : []));
|
|
11220
11259
|
_isExpanded = signal(false, ...(ngDevMode ? [{ debugName: "_isExpanded" }] : []));
|
|
11260
|
+
_rla;
|
|
11221
11261
|
_childItems;
|
|
11222
11262
|
_destroyRef = inject(DestroyRef);
|
|
11223
11263
|
constructor() {
|
|
@@ -11226,18 +11266,28 @@ class ClxMenuComponent {
|
|
|
11226
11266
|
effect(() => { if (this.collapsed())
|
|
11227
11267
|
this._isExpanded.set(false); });
|
|
11228
11268
|
}
|
|
11269
|
+
ngAfterViewInit() {
|
|
11270
|
+
if (this._rla) {
|
|
11271
|
+
this._rla.isActiveChange
|
|
11272
|
+
.pipe(takeUntilDestroyed(this._destroyRef))
|
|
11273
|
+
.subscribe((isActive) => {
|
|
11274
|
+
if (isActive)
|
|
11275
|
+
this._isExpanded.set(true);
|
|
11276
|
+
});
|
|
11277
|
+
}
|
|
11278
|
+
}
|
|
11229
11279
|
_iconCls = computed(() => resolveColor(this.color()).textSubtle, ...(ngDevMode ? [{ debugName: "_iconCls" }] : []));
|
|
11230
|
-
_buttonCls
|
|
11280
|
+
_buttonCls(isActive) {
|
|
11231
11281
|
const geom = this.collapsed() ? 'w-full py-3 px-0 justify-center' : NAV_ITEM_L1;
|
|
11232
11282
|
const base = `${NAV_ITEM_BASE} ${geom}`;
|
|
11233
11283
|
const t = resolveColor(this.color());
|
|
11234
|
-
if (
|
|
11284
|
+
if (isActive) {
|
|
11235
11285
|
if (this.collapsed())
|
|
11236
11286
|
return `${base} ${t.textSubtle} font-semibold`;
|
|
11237
11287
|
return `${base} ${t.textSubtle} font-semibold border-l-2 ${t.borderLight} !pl-[22px]`;
|
|
11238
11288
|
}
|
|
11239
11289
|
return `${base} ${NAV_ITEM_IDLE} ${t.hoverBgMuted}`;
|
|
11240
|
-
}
|
|
11290
|
+
}
|
|
11241
11291
|
NAV_CHILDREN_WRAPPER = NAV_CHILDREN_WRAPPER;
|
|
11242
11292
|
NAV_CHILDREN_INNER = NAV_CHILDREN_INNER;
|
|
11243
11293
|
NAV_CHILDREN_LIST = NAV_CHILDREN_LIST;
|
|
@@ -11254,27 +11304,52 @@ class ClxMenuComponent {
|
|
|
11254
11304
|
_toggle() {
|
|
11255
11305
|
this._isExpanded.update(v => !v);
|
|
11256
11306
|
}
|
|
11257
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
11258
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
11259
|
-
|
|
11260
|
-
|
|
11261
|
-
|
|
11262
|
-
|
|
11263
|
-
|
|
11264
|
-
|
|
11265
|
-
|
|
11266
|
-
|
|
11267
|
-
|
|
11268
|
-
|
|
11269
|
-
|
|
11270
|
-
|
|
11271
|
-
|
|
11272
|
-
|
|
11273
|
-
|
|
11274
|
-
|
|
11275
|
-
|
|
11276
|
-
|
|
11277
|
-
|
|
11307
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11308
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", type: ClxMenuComponent, isStandalone: true, selector: "clx-menu", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, routerLinkActiveOptions: { classPropertyName: "routerLinkActiveOptions", publicName: "routerLinkActiveOptions", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, queries: [{ propertyName: "_childItems", predicate: ClxMenuItemComponent, descendants: true }], viewQueries: [{ propertyName: "_rla", first: true, predicate: RouterLinkActive, descendants: true }], ngImport: i0, template: `
|
|
11309
|
+
@if (routerLink()) {
|
|
11310
|
+
<a
|
|
11311
|
+
[routerLink]="routerLink()"
|
|
11312
|
+
routerLinkActive
|
|
11313
|
+
#rla="routerLinkActive"
|
|
11314
|
+
[routerLinkActiveOptions]="routerLinkActiveOptions()"
|
|
11315
|
+
[class]="_buttonCls(rla.isActive)"
|
|
11316
|
+
[title]="collapsed() ? label() : ''"
|
|
11317
|
+
(click)="$event.preventDefault(); !collapsed() && _toggle()">
|
|
11318
|
+
@if (icon()) {
|
|
11319
|
+
<span clx-icon [name]="icon()" size="sm" [class]="_iconCls()"></span>
|
|
11320
|
+
}
|
|
11321
|
+
@if (!collapsed()) {
|
|
11322
|
+
<span class="flex-1 text-left truncate">{{ label() }}</span>
|
|
11323
|
+
<span
|
|
11324
|
+
clx-icon
|
|
11325
|
+
name="expand_more"
|
|
11326
|
+
size="sm"
|
|
11327
|
+
class="shrink-0 transition-transform duration-300"
|
|
11328
|
+
[style.transform]="_isExpanded() ? 'rotate(180deg)' : 'rotate(0deg)'">
|
|
11329
|
+
</span>
|
|
11330
|
+
}
|
|
11331
|
+
</a>
|
|
11332
|
+
} @else {
|
|
11333
|
+
<button
|
|
11334
|
+
type="button"
|
|
11335
|
+
[class]="_buttonCls(active())"
|
|
11336
|
+
[title]="collapsed() ? label() : ''"
|
|
11337
|
+
(click)="!collapsed() && _toggle()">
|
|
11338
|
+
@if (icon()) {
|
|
11339
|
+
<span clx-icon [name]="icon()" size="sm" [class]="_iconCls()"></span>
|
|
11340
|
+
}
|
|
11341
|
+
@if (!collapsed()) {
|
|
11342
|
+
<span class="flex-1 text-left truncate">{{ label() }}</span>
|
|
11343
|
+
<span
|
|
11344
|
+
clx-icon
|
|
11345
|
+
name="expand_more"
|
|
11346
|
+
size="sm"
|
|
11347
|
+
class="shrink-0 transition-transform duration-300"
|
|
11348
|
+
[style.transform]="_isExpanded() ? 'rotate(180deg)' : 'rotate(0deg)'">
|
|
11349
|
+
</span>
|
|
11350
|
+
}
|
|
11351
|
+
</button>
|
|
11352
|
+
}
|
|
11278
11353
|
|
|
11279
11354
|
<div
|
|
11280
11355
|
[class]="NAV_CHILDREN_WRAPPER"
|
|
@@ -11285,34 +11360,59 @@ class ClxMenuComponent {
|
|
|
11285
11360
|
</div>
|
|
11286
11361
|
</div>
|
|
11287
11362
|
</div>
|
|
11288
|
-
`, isInline: true, dependencies: [{ kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
11363
|
+
`, isInline: true, dependencies: [{ kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
11289
11364
|
}
|
|
11290
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
11365
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxMenuComponent, decorators: [{
|
|
11291
11366
|
type: Component,
|
|
11292
11367
|
args: [{
|
|
11293
11368
|
selector: 'clx-menu',
|
|
11294
11369
|
standalone: true,
|
|
11295
|
-
imports: [ClxIconComponent],
|
|
11370
|
+
imports: [ClxIconComponent, RouterLink, RouterLinkActive],
|
|
11296
11371
|
template: `
|
|
11297
|
-
|
|
11298
|
-
|
|
11299
|
-
|
|
11300
|
-
|
|
11301
|
-
|
|
11302
|
-
|
|
11303
|
-
|
|
11304
|
-
|
|
11305
|
-
|
|
11306
|
-
|
|
11307
|
-
|
|
11308
|
-
|
|
11309
|
-
|
|
11310
|
-
|
|
11311
|
-
|
|
11312
|
-
|
|
11313
|
-
|
|
11314
|
-
|
|
11315
|
-
|
|
11372
|
+
@if (routerLink()) {
|
|
11373
|
+
<a
|
|
11374
|
+
[routerLink]="routerLink()"
|
|
11375
|
+
routerLinkActive
|
|
11376
|
+
#rla="routerLinkActive"
|
|
11377
|
+
[routerLinkActiveOptions]="routerLinkActiveOptions()"
|
|
11378
|
+
[class]="_buttonCls(rla.isActive)"
|
|
11379
|
+
[title]="collapsed() ? label() : ''"
|
|
11380
|
+
(click)="$event.preventDefault(); !collapsed() && _toggle()">
|
|
11381
|
+
@if (icon()) {
|
|
11382
|
+
<span clx-icon [name]="icon()" size="sm" [class]="_iconCls()"></span>
|
|
11383
|
+
}
|
|
11384
|
+
@if (!collapsed()) {
|
|
11385
|
+
<span class="flex-1 text-left truncate">{{ label() }}</span>
|
|
11386
|
+
<span
|
|
11387
|
+
clx-icon
|
|
11388
|
+
name="expand_more"
|
|
11389
|
+
size="sm"
|
|
11390
|
+
class="shrink-0 transition-transform duration-300"
|
|
11391
|
+
[style.transform]="_isExpanded() ? 'rotate(180deg)' : 'rotate(0deg)'">
|
|
11392
|
+
</span>
|
|
11393
|
+
}
|
|
11394
|
+
</a>
|
|
11395
|
+
} @else {
|
|
11396
|
+
<button
|
|
11397
|
+
type="button"
|
|
11398
|
+
[class]="_buttonCls(active())"
|
|
11399
|
+
[title]="collapsed() ? label() : ''"
|
|
11400
|
+
(click)="!collapsed() && _toggle()">
|
|
11401
|
+
@if (icon()) {
|
|
11402
|
+
<span clx-icon [name]="icon()" size="sm" [class]="_iconCls()"></span>
|
|
11403
|
+
}
|
|
11404
|
+
@if (!collapsed()) {
|
|
11405
|
+
<span class="flex-1 text-left truncate">{{ label() }}</span>
|
|
11406
|
+
<span
|
|
11407
|
+
clx-icon
|
|
11408
|
+
name="expand_more"
|
|
11409
|
+
size="sm"
|
|
11410
|
+
class="shrink-0 transition-transform duration-300"
|
|
11411
|
+
[style.transform]="_isExpanded() ? 'rotate(180deg)' : 'rotate(0deg)'">
|
|
11412
|
+
</span>
|
|
11413
|
+
}
|
|
11414
|
+
</button>
|
|
11415
|
+
}
|
|
11316
11416
|
|
|
11317
11417
|
<div
|
|
11318
11418
|
[class]="NAV_CHILDREN_WRAPPER"
|
|
@@ -11328,7 +11428,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
|
|
|
11328
11428
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
11329
11429
|
host: { class: 'block' },
|
|
11330
11430
|
}]
|
|
11331
|
-
}], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }],
|
|
11431
|
+
}], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], routerLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLink", required: false }] }], routerLinkActiveOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLinkActiveOptions", required: false }] }], _rla: [{
|
|
11432
|
+
type: ViewChild,
|
|
11433
|
+
args: [RouterLinkActive]
|
|
11434
|
+
}], _childItems: [{
|
|
11332
11435
|
type: ContentChildren,
|
|
11333
11436
|
args: [ClxMenuItemComponent, { descendants: true }]
|
|
11334
11437
|
}] } });
|
|
@@ -11336,8 +11439,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
|
|
|
11336
11439
|
class ClxNavGroupComponent {
|
|
11337
11440
|
label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
11338
11441
|
collapsed = input(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : []));
|
|
11339
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
11340
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
11442
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxNavGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11443
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", type: ClxNavGroupComponent, isStandalone: true, selector: "clx-nav-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, ngImport: i0, template: `
|
|
11341
11444
|
@if (!collapsed()) {
|
|
11342
11445
|
<span class="block px-6 pt-5 pb-1 text-[10px] font-bold uppercase tracking-widest text-slate-500 select-none">{{ label() }}</span>
|
|
11343
11446
|
} @else {
|
|
@@ -11347,7 +11450,7 @@ class ClxNavGroupComponent {
|
|
|
11347
11450
|
}
|
|
11348
11451
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
11349
11452
|
}
|
|
11350
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
11453
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxNavGroupComponent, decorators: [{
|
|
11351
11454
|
type: Component,
|
|
11352
11455
|
args: [{
|
|
11353
11456
|
selector: 'clx-nav-group',
|
|
@@ -11391,10 +11494,10 @@ class ClxHeaderCellDirective {
|
|
|
11391
11494
|
constructor(templateRef) {
|
|
11392
11495
|
this.templateRef = templateRef;
|
|
11393
11496
|
}
|
|
11394
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
11395
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.
|
|
11497
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxHeaderCellDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
11498
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.23", type: ClxHeaderCellDirective, isStandalone: true, selector: "ng-template[clxHeaderCell]", ngImport: i0 });
|
|
11396
11499
|
}
|
|
11397
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
11500
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxHeaderCellDirective, decorators: [{
|
|
11398
11501
|
type: Directive,
|
|
11399
11502
|
args: [{
|
|
11400
11503
|
selector: 'ng-template[clxHeaderCell]',
|
|
@@ -11411,10 +11514,10 @@ class ClxCellDirective {
|
|
|
11411
11514
|
static ngTemplateContextGuard(_dir, _ctx) {
|
|
11412
11515
|
return true;
|
|
11413
11516
|
}
|
|
11414
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
11415
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.
|
|
11517
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxCellDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
11518
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.23", type: ClxCellDirective, isStandalone: true, selector: "ng-template[clxCell]", ngImport: i0 });
|
|
11416
11519
|
}
|
|
11417
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
11520
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxCellDirective, decorators: [{
|
|
11418
11521
|
type: Directive,
|
|
11419
11522
|
args: [{
|
|
11420
11523
|
selector: 'ng-template[clxCell]',
|
|
@@ -11426,10 +11529,10 @@ class ClxColumnDefDirective {
|
|
|
11426
11529
|
name;
|
|
11427
11530
|
headerCell = contentChild((ClxHeaderCellDirective), ...(ngDevMode ? [{ debugName: "headerCell" }] : []));
|
|
11428
11531
|
cell = contentChild((ClxCellDirective), ...(ngDevMode ? [{ debugName: "cell" }] : []));
|
|
11429
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
11430
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.3.
|
|
11532
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxColumnDefDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
11533
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.3.23", type: ClxColumnDefDirective, isStandalone: true, selector: "[clxColumn]", inputs: { name: ["clxColumn", "name"] }, queries: [{ propertyName: "headerCell", first: true, predicate: (ClxHeaderCellDirective), descendants: true, isSignal: true }, { propertyName: "cell", first: true, predicate: (ClxCellDirective), descendants: true, isSignal: true }], ngImport: i0 });
|
|
11431
11534
|
}
|
|
11432
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
11535
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxColumnDefDirective, decorators: [{
|
|
11433
11536
|
type: Directive,
|
|
11434
11537
|
args: [{
|
|
11435
11538
|
selector: '[clxColumn]',
|
|
@@ -11473,8 +11576,8 @@ class ClxPageEmptyComponent {
|
|
|
11473
11576
|
_ctaCls() {
|
|
11474
11577
|
return this.size() === 'sm' ? 'mt-3' : 'mt-5';
|
|
11475
11578
|
}
|
|
11476
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
11477
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
11579
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxPageEmptyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11580
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", type: ClxPageEmptyComponent, isStandalone: true, selector: "clx-page-empty", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, ctaLabel: { classPropertyName: "ctaLabel", publicName: "ctaLabel", isSignal: true, isRequired: false, transformFunction: null }, ctaIcon: { classPropertyName: "ctaIcon", publicName: "ctaIcon", isSignal: true, isRequired: false, transformFunction: null }, ctaColor: { classPropertyName: "ctaColor", publicName: "ctaColor", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cta: "cta" }, host: { classAttribute: "flex flex-col items-center justify-center w-full px-6 text-center" }, ngImport: i0, template: `
|
|
11478
11581
|
<div [class]="_iconWrap()">
|
|
11479
11582
|
<span clx-icon [name]="icon()" [size]="_iconSize()" class="text-slate-300"></span>
|
|
11480
11583
|
</div>
|
|
@@ -11498,7 +11601,7 @@ class ClxPageEmptyComponent {
|
|
|
11498
11601
|
}
|
|
11499
11602
|
`, isInline: true, dependencies: [{ kind: "component", type: ClxButtonComponent, selector: "button[clx-button], a[clx-button]", inputs: ["variant", "color", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly"] }, { kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
11500
11603
|
}
|
|
11501
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
11604
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxPageEmptyComponent, decorators: [{
|
|
11502
11605
|
type: Component,
|
|
11503
11606
|
args: [{
|
|
11504
11607
|
selector: 'clx-page-empty',
|
|
@@ -11676,8 +11779,8 @@ class ClxTableComponent {
|
|
|
11676
11779
|
}
|
|
11677
11780
|
this.selectionChange.emit({ selected: this.selectedItems(), allSelected: false });
|
|
11678
11781
|
}
|
|
11679
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
11680
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
11782
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11783
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", type: ClxTableComponent, isStandalone: true, selector: "clx-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, emptyIcon: { classPropertyName: "emptyIcon", publicName: "emptyIcon", isSignal: true, isRequired: false, transformFunction: null }, emptyTitle: { classPropertyName: "emptyTitle", publicName: "emptyTitle", isSignal: true, isRequired: false, transformFunction: null }, emptyDescription: { classPropertyName: "emptyDescription", publicName: "emptyDescription", isSignal: true, isRequired: false, transformFunction: null }, sortKey: { classPropertyName: "sortKey", publicName: "sortKey", isSignal: true, isRequired: false, transformFunction: null }, sortDir: { classPropertyName: "sortDir", publicName: "sortDir", isSignal: true, isRequired: false, transformFunction: null }, pageIndex: { classPropertyName: "pageIndex", publicName: "pageIndex", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, _currentPage: { classPropertyName: "_currentPage", publicName: "_currentPage", isSignal: true, isRequired: false, transformFunction: null }, searchQuery: { classPropertyName: "searchQuery", publicName: "searchQuery", isSignal: true, isRequired: false, transformFunction: null }, selectedItems: { classPropertyName: "selectedItems", publicName: "selectedItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortKey: "sortKeyChange", sortDir: "sortDirChange", pageIndex: "pageIndexChange", pageSize: "pageSizeChange", _currentPage: "_currentPageChange", searchQuery: "searchQueryChange", selectedItems: "selectedItemsChange", sortChange: "sortChange", pageChange: "pageChange", selectionChange: "selectionChange" }, host: { classAttribute: "block" }, queries: [{ propertyName: "_columnDefs", predicate: ClxColumnDefDirective, isSignal: true }], ngImport: i0, template: `
|
|
11681
11784
|
<!-- ── Toolbar: búsqueda ──────────────────────────────────────────────── -->
|
|
11682
11785
|
@if (searchable() && !loading()) {
|
|
11683
11786
|
<div class="mb-3 max-w-80 min-w-40">
|
|
@@ -11814,7 +11917,7 @@ class ClxTableComponent {
|
|
|
11814
11917
|
}
|
|
11815
11918
|
`, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ClxCheckboxComponent, selector: "clx-checkbox", inputs: ["color", "variant", "size", "label", "value", "disabled"] }, { kind: "component", type: ClxInputComponent, selector: "clx-input", inputs: ["label", "placeholder", "type", "color", "hint", "prefixIcon", "suffixIcon", "prefixText", "suffixText", "status", "statusMessage", "size", "value", "disabled"] }, { kind: "component", type: ClxSkeletonComponent, selector: "clx-skeleton", inputs: ["variant", "size", "width", "height"] }, { kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }, { kind: "component", type: ClxPaginationComponent, selector: "clx-pagination", inputs: ["totalItems", "color", "size", "showPageSize", "pageSizeOptions", "currentPage", "pageSize"], outputs: ["currentPageChange", "pageSizeChange", "pageChange", "sizeChange"] }, { kind: "component", type: ClxPageEmptyComponent, selector: "clx-page-empty", inputs: ["icon", "title", "description", "ctaLabel", "ctaIcon", "ctaColor", "size"], outputs: ["cta"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
11816
11919
|
}
|
|
11817
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
11920
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxTableComponent, decorators: [{
|
|
11818
11921
|
type: Component,
|
|
11819
11922
|
args: [{
|
|
11820
11923
|
selector: 'clx-table',
|
|
@@ -12067,8 +12170,8 @@ class ClxWishlistComponent {
|
|
|
12067
12170
|
handleCheckoutAll() {
|
|
12068
12171
|
this.onCheckoutAll.emit(this._filtered());
|
|
12069
12172
|
}
|
|
12070
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
12071
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
12173
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxWishlistComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
12174
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", type: ClxWishlistComponent, isStandalone: true, selector: "clx-wishlist", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, sortOptions: { classPropertyName: "sortOptions", publicName: "sortOptions", isSignal: true, isRequired: false, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, sortValue: { classPropertyName: "sortValue", publicName: "sortValue", isSignal: true, isRequired: false, transformFunction: null }, searchValue: { classPropertyName: "searchValue", publicName: "searchValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { currentPage: "currentPageChange", pageSize: "pageSizeChange", sortValue: "sortValueChange", searchValue: "searchValueChange", onRemove: "onRemove", onAddToCart: "onAddToCart", onSearchChange: "onSearchChange", onSortChange: "onSortChange", onPageChange: "onPageChange", onCheckoutAll: "onCheckoutAll" }, ngImport: i0, template: `
|
|
12072
12175
|
<div class="flex flex-col gap-6">
|
|
12073
12176
|
|
|
12074
12177
|
<!-- ── Top Bar ──────────────────────────────────────────────────────── -->
|
|
@@ -12250,7 +12353,7 @@ class ClxWishlistComponent {
|
|
|
12250
12353
|
</div>
|
|
12251
12354
|
`, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ClxButtonComponent, selector: "button[clx-button], a[clx-button]", inputs: ["variant", "color", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly"] }, { kind: "component", type: ClxBadgeComponent, selector: "span[clx-badge]", inputs: ["variant", "color", "size", "shape", "positioned"] }, { kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }, { kind: "component", type: ClxSkeletonComponent, selector: "clx-skeleton", inputs: ["variant", "size", "width", "height"] }, { kind: "component", type: ClxPaginationComponent, selector: "clx-pagination", inputs: ["totalItems", "color", "size", "showPageSize", "pageSizeOptions", "currentPage", "pageSize"], outputs: ["currentPageChange", "pageSizeChange", "pageChange", "sizeChange"] }, { kind: "component", type: ClxInputComponent, selector: "clx-input", inputs: ["label", "placeholder", "type", "color", "hint", "prefixIcon", "suffixIcon", "prefixText", "suffixText", "status", "statusMessage", "size", "value", "disabled"] }, { kind: "component", type: ClxSelectComponent, selector: "clx-select", inputs: ["label", "placeholder", "options", "multiple", "searchable", "searchPlaceholder", "activeColor", "size", "hint", "errorMessage", "disabled", "async", "loadOptions", "debounceMs", "minChars"] }, { kind: "directive", type: ClxTooltipDirective, selector: "[clxTooltip]", inputs: ["clxTooltip", "clxTooltipPosition", "clxTooltipColor", "clxTooltipSize", "clxTooltipDelay"] }, { kind: "pipe", type: CurrencyPipe, name: "currency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
12252
12355
|
}
|
|
12253
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
12356
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxWishlistComponent, decorators: [{
|
|
12254
12357
|
type: Component,
|
|
12255
12358
|
args: [{
|
|
12256
12359
|
selector: 'clx-wishlist',
|
|
@@ -12490,8 +12593,8 @@ class ClxCartComponent {
|
|
|
12490
12593
|
this._couponCode = '';
|
|
12491
12594
|
this.coupon.set(null);
|
|
12492
12595
|
}
|
|
12493
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
12494
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
12596
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxCartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
12597
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", type: ClxCartComponent, isStandalone: true, selector: "clx-cart", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, coupon: { classPropertyName: "coupon", publicName: "coupon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { coupon: "couponChange", onRemove: "onRemove", onQuantityChange: "onQuantityChange", onClearCart: "onClearCart", onApplyCoupon: "onApplyCoupon", onCheckout: "onCheckout" }, ngImport: i0, template: `
|
|
12495
12598
|
<!-- ── Loading ─────────────────────────────────────────────────────────────── -->
|
|
12496
12599
|
@if (loading()) {
|
|
12497
12600
|
|
|
@@ -12752,7 +12855,7 @@ class ClxCartComponent {
|
|
|
12752
12855
|
}
|
|
12753
12856
|
`, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ClxButtonComponent, selector: "button[clx-button], a[clx-button]", inputs: ["variant", "color", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly"] }, { kind: "component", type: ClxBadgeComponent, selector: "span[clx-badge]", inputs: ["variant", "color", "size", "shape", "positioned"] }, { kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }, { kind: "component", type: ClxSkeletonComponent, selector: "clx-skeleton", inputs: ["variant", "size", "width", "height"] }, { kind: "component", type: ClxInputComponent, selector: "clx-input", inputs: ["label", "placeholder", "type", "color", "hint", "prefixIcon", "suffixIcon", "prefixText", "suffixText", "status", "statusMessage", "size", "value", "disabled"] }, { kind: "component", type: ClxRatingComponent, selector: "clx-rating", inputs: ["value", "max", "color"] }, { kind: "pipe", type: CurrencyPipe, name: "currency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
12754
12857
|
}
|
|
12755
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
12858
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxCartComponent, decorators: [{
|
|
12756
12859
|
type: Component,
|
|
12757
12860
|
args: [{
|
|
12758
12861
|
selector: 'clx-cart',
|
|
@@ -13037,8 +13140,8 @@ class ClxCartSummaryDrawer {
|
|
|
13037
13140
|
_ref = inject(CLX_MODAL_REF);
|
|
13038
13141
|
_confirm() { this._ref.close(true); }
|
|
13039
13142
|
_cancel() { this._ref.close(false); }
|
|
13040
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
13041
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
13143
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxCartSummaryDrawer, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
13144
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", type: ClxCartSummaryDrawer, isStandalone: true, selector: "clx-cart-summary-drawer", ngImport: i0, template: `
|
|
13042
13145
|
<clx-drawer
|
|
13043
13146
|
size="md"
|
|
13044
13147
|
[confirmButton]="{ text: 'Proceder al pago', color: data.color, variant: 'solid' }"
|
|
@@ -13119,7 +13222,7 @@ class ClxCartSummaryDrawer {
|
|
|
13119
13222
|
</clx-drawer>
|
|
13120
13223
|
`, isInline: true, dependencies: [{ kind: "component", type: ClxDrawerComponent, selector: "clx-drawer", inputs: ["size", "showClose", "confirmButton", "cancelButton", "showCancelButton"], outputs: ["confirmClick", "cancelClick"] }, { kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }, { kind: "pipe", type: CurrencyPipe, name: "currency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
13121
13224
|
}
|
|
13122
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
13225
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxCartSummaryDrawer, decorators: [{
|
|
13123
13226
|
type: Component,
|
|
13124
13227
|
args: [{
|
|
13125
13228
|
selector: 'clx-cart-summary-drawer',
|
|
@@ -13343,10 +13446,10 @@ class ClxAnimateDirective {
|
|
|
13343
13446
|
this._unbindTrigger();
|
|
13344
13447
|
this.service.stop(this.nativeElement);
|
|
13345
13448
|
}
|
|
13346
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
13347
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.
|
|
13449
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxAnimateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
13450
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.23", type: ClxAnimateDirective, isStandalone: true, selector: "[clxAnimate]", inputs: { clxAnimate: { classPropertyName: "clxAnimate", publicName: "clxAnimate", isSignal: true, isRequired: true, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null }, repeat: { classPropertyName: "repeat", publicName: "repeat", isSignal: true, isRequired: false, transformFunction: null }, easing: { classPropertyName: "easing", publicName: "easing", isSignal: true, isRequired: false, transformFunction: null }, fillMode: { classPropertyName: "fillMode", publicName: "fillMode", isSignal: true, isRequired: false, transformFunction: null }, once: { classPropertyName: "once", publicName: "once", isSignal: true, isRequired: false, transformFunction: null }, threshold: { classPropertyName: "threshold", publicName: "threshold", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { animationStart: "animationStart", animationEnd: "animationEnd" }, exportAs: ["clxAnimate"], usesOnChanges: true, ngImport: i0 });
|
|
13348
13451
|
}
|
|
13349
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
13452
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxAnimateDirective, decorators: [{
|
|
13350
13453
|
type: Directive,
|
|
13351
13454
|
args: [{
|
|
13352
13455
|
selector: '[clxAnimate]',
|
|
@@ -13388,10 +13491,10 @@ class ClxAnimateGroupDirective {
|
|
|
13388
13491
|
this._pendingTimers.forEach(id => clearTimeout(id));
|
|
13389
13492
|
this._pendingTimers = [];
|
|
13390
13493
|
}
|
|
13391
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
13392
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.
|
|
13494
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxAnimateGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
13495
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.23", type: ClxAnimateGroupDirective, isStandalone: true, selector: "[clxAnimateGroup]", inputs: { stagger: { classPropertyName: "stagger", publicName: "stagger", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "children", predicate: ClxAnimateDirective, descendants: true }], exportAs: ["clxAnimateGroup"], ngImport: i0 });
|
|
13393
13496
|
}
|
|
13394
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
13497
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxAnimateGroupDirective, decorators: [{
|
|
13395
13498
|
type: Directive,
|
|
13396
13499
|
args: [{
|
|
13397
13500
|
selector: '[clxAnimateGroup]',
|
|
@@ -13479,10 +13582,10 @@ class ClxAlertService {
|
|
|
13479
13582
|
...opts,
|
|
13480
13583
|
});
|
|
13481
13584
|
}
|
|
13482
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
13483
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.
|
|
13585
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxAlertService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
13586
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxAlertService, providedIn: 'root' });
|
|
13484
13587
|
}
|
|
13485
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
13588
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxAlertService, decorators: [{
|
|
13486
13589
|
type: Injectable,
|
|
13487
13590
|
args: [{ providedIn: 'root' }]
|
|
13488
13591
|
}] });
|
|
@@ -13547,10 +13650,10 @@ class ClxDrawerService {
|
|
|
13547
13650
|
_focusTrap.focusInitialElementWhenReady();
|
|
13548
13651
|
return drawerRef;
|
|
13549
13652
|
}
|
|
13550
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
13551
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.
|
|
13653
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxDrawerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
13654
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxDrawerService, providedIn: 'root' });
|
|
13552
13655
|
}
|
|
13553
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
13656
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxDrawerService, decorators: [{
|
|
13554
13657
|
type: Injectable,
|
|
13555
13658
|
args: [{ providedIn: 'root' }]
|
|
13556
13659
|
}] });
|
|
@@ -13617,10 +13720,10 @@ class ClxToastService {
|
|
|
13617
13720
|
_uid() {
|
|
13618
13721
|
return `toast-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
|
|
13619
13722
|
}
|
|
13620
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
13621
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.
|
|
13723
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
13724
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxToastService, providedIn: 'root' });
|
|
13622
13725
|
}
|
|
13623
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
13726
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxToastService, decorators: [{
|
|
13624
13727
|
type: Injectable,
|
|
13625
13728
|
args: [{ providedIn: 'root' }]
|
|
13626
13729
|
}] });
|
|
@@ -13670,8 +13773,8 @@ class ClxProgressBarComponent {
|
|
|
13670
13773
|
cls += ' clx-pb-striped';
|
|
13671
13774
|
return cls;
|
|
13672
13775
|
}, ...(ngDevMode ? [{ debugName: "_fillCls" }] : []));
|
|
13673
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
13674
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
13776
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
13777
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", type: ClxProgressBarComponent, isStandalone: true, selector: "clx-progress-bar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, valueFormat: { classPropertyName: "valueFormat", publicName: "valueFormat", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "flex flex-col gap-1.5 w-full" }, ngImport: i0, template: `
|
|
13675
13778
|
@if (label() || showValue()) {
|
|
13676
13779
|
<div class="flex items-center justify-between gap-2">
|
|
13677
13780
|
@if (label()) {
|
|
@@ -13704,7 +13807,7 @@ class ClxProgressBarComponent {
|
|
|
13704
13807
|
</div>
|
|
13705
13808
|
`, isInline: true, styles: ["@keyframes clx-pb-indeterminate{0%{transform:translate(-100%) scaleX(.4)}40%{transform:translate(0) scaleX(.4)}to{transform:translate(100%) scaleX(.4)}}.clx-pb-indeterminate{animation:clx-pb-indeterminate 1.4s ease-in-out infinite}@keyframes clx-pb-stripe{0%{background-position:1rem 0}to{background-position:0 0}}.clx-pb-striped{background-image:linear-gradient(45deg,rgba(255,255,255,.18) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.18) 50%,rgba(255,255,255,.18) 75%,transparent 75%,transparent);background-size:1rem 1rem;animation:clx-pb-stripe 1s linear infinite}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
13706
13809
|
}
|
|
13707
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
13810
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxProgressBarComponent, decorators: [{
|
|
13708
13811
|
type: Component,
|
|
13709
13812
|
args: [{ selector: 'clx-progress-bar', standalone: true, imports: [], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'flex flex-col gap-1.5 w-full' }, template: `
|
|
13710
13813
|
@if (label() || showValue()) {
|
|
@@ -13745,8 +13848,8 @@ class ClxPageNotFoundComponent {
|
|
|
13745
13848
|
description = input('La ruta que buscas no existe o fue movida.', ...(ngDevMode ? [{ debugName: "description" }] : []));
|
|
13746
13849
|
backLabel = input('Volver al inicio', ...(ngDevMode ? [{ debugName: "backLabel" }] : []));
|
|
13747
13850
|
back = output();
|
|
13748
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
13749
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
13851
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxPageNotFoundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
13852
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", type: ClxPageNotFoundComponent, isStandalone: true, selector: "clx-page-not-found", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, backLabel: { classPropertyName: "backLabel", publicName: "backLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { back: "back" }, host: { classAttribute: "flex flex-col items-center justify-center min-h-[60vh] px-6 text-center" }, ngImport: i0, template: `
|
|
13750
13853
|
<div class="w-20 h-20 rounded-2xl bg-indigo-50 flex items-center justify-center mb-6">
|
|
13751
13854
|
<span clx-icon name="search_off" size="xl" class="text-indigo-400"></span>
|
|
13752
13855
|
</div>
|
|
@@ -13767,7 +13870,7 @@ class ClxPageNotFoundComponent {
|
|
|
13767
13870
|
}
|
|
13768
13871
|
`, isInline: true, dependencies: [{ kind: "component", type: ClxButtonComponent, selector: "button[clx-button], a[clx-button]", inputs: ["variant", "color", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly"] }, { kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
13769
13872
|
}
|
|
13770
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
13873
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxPageNotFoundComponent, decorators: [{
|
|
13771
13874
|
type: Component,
|
|
13772
13875
|
args: [{
|
|
13773
13876
|
selector: 'clx-page-not-found',
|
|
@@ -13807,8 +13910,8 @@ class ClxPageUnauthorizedComponent {
|
|
|
13807
13910
|
backLabel = input('Volver', ...(ngDevMode ? [{ debugName: "backLabel" }] : []));
|
|
13808
13911
|
login = output();
|
|
13809
13912
|
back = output();
|
|
13810
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
13811
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
13913
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxPageUnauthorizedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
13914
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", type: ClxPageUnauthorizedComponent, isStandalone: true, selector: "clx-page-unauthorized", inputs: { code: { classPropertyName: "code", publicName: "code", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, loginLabel: { classPropertyName: "loginLabel", publicName: "loginLabel", isSignal: true, isRequired: false, transformFunction: null }, backLabel: { classPropertyName: "backLabel", publicName: "backLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { login: "login", back: "back" }, host: { classAttribute: "flex flex-col items-center justify-center min-h-[60vh] px-6 text-center" }, ngImport: i0, template: `
|
|
13812
13915
|
<div class="w-20 h-20 rounded-2xl bg-amber-50 flex items-center justify-center mb-6">
|
|
13813
13916
|
<span clx-icon name="lock" size="xl" class="text-amber-400"></span>
|
|
13814
13917
|
</div>
|
|
@@ -13841,7 +13944,7 @@ class ClxPageUnauthorizedComponent {
|
|
|
13841
13944
|
</div>
|
|
13842
13945
|
`, isInline: true, dependencies: [{ kind: "component", type: ClxButtonComponent, selector: "button[clx-button], a[clx-button]", inputs: ["variant", "color", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly"] }, { kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
13843
13946
|
}
|
|
13844
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
13947
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxPageUnauthorizedComponent, decorators: [{
|
|
13845
13948
|
type: Component,
|
|
13846
13949
|
args: [{
|
|
13847
13950
|
selector: 'clx-page-unauthorized',
|
|
@@ -13893,8 +13996,8 @@ class ClxPageServerErrorComponent {
|
|
|
13893
13996
|
errorId = input('', ...(ngDevMode ? [{ debugName: "errorId" }] : []));
|
|
13894
13997
|
retry = output();
|
|
13895
13998
|
back = output();
|
|
13896
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
13897
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
13999
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxPageServerErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
14000
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", type: ClxPageServerErrorComponent, isStandalone: true, selector: "clx-page-server-error", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, retryLabel: { classPropertyName: "retryLabel", publicName: "retryLabel", isSignal: true, isRequired: false, transformFunction: null }, backLabel: { classPropertyName: "backLabel", publicName: "backLabel", isSignal: true, isRequired: false, transformFunction: null }, errorId: { classPropertyName: "errorId", publicName: "errorId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { retry: "retry", back: "back" }, host: { classAttribute: "flex flex-col items-center justify-center min-h-[60vh] px-6 text-center" }, ngImport: i0, template: `
|
|
13898
14001
|
<div class="w-20 h-20 rounded-2xl bg-red-50 flex items-center justify-center mb-6">
|
|
13899
14002
|
<span clx-icon name="error_outline" size="xl" class="text-red-400"></span>
|
|
13900
14003
|
</div>
|
|
@@ -13931,7 +14034,7 @@ class ClxPageServerErrorComponent {
|
|
|
13931
14034
|
</div>
|
|
13932
14035
|
`, isInline: true, dependencies: [{ kind: "component", type: ClxButtonComponent, selector: "button[clx-button], a[clx-button]", inputs: ["variant", "color", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly"] }, { kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
13933
14036
|
}
|
|
13934
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
14037
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: ClxPageServerErrorComponent, decorators: [{
|
|
13935
14038
|
type: Component,
|
|
13936
14039
|
args: [{
|
|
13937
14040
|
selector: 'clx-page-server-error',
|