codexly-ui 0.0.28 → 0.0.30
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 +412 -308
- package/fesm2022/codexly-ui.mjs.map +1 -1
- package/index.d.ts +34 -24
- package/package.json +1 -1
package/fesm2022/codexly-ui.mjs
CHANGED
|
@@ -4,13 +4,14 @@ import { isPlatformBrowser, CurrencyPipe, NgTemplateOutlet, DecimalPipe, NgStyle
|
|
|
4
4
|
import * as i1 from '@angular/forms';
|
|
5
5
|
import { NG_VALUE_ACCESSOR, FormsModule, NgControl, FormControl, ReactiveFormsModule, FormGroup, Validators } from '@angular/forms';
|
|
6
6
|
import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
7
|
-
import { startWith, debounceTime, distinctUntilChanged, switchMap, of, catchError } from 'rxjs';
|
|
7
|
+
import { startWith, map, debounceTime, distinctUntilChanged, switchMap, of, catchError } from 'rxjs';
|
|
8
8
|
import * as i1$1 from '@angular/cdk/overlay';
|
|
9
9
|
import { ScrollStrategyOptions, OverlayModule, Overlay, OverlayConfig } from '@angular/cdk/overlay';
|
|
10
10
|
import { Chart, LineController, BarController, PieController, DoughnutController, RadarController, PolarAreaController, CategoryScale, LinearScale, RadialLinearScale, BarElement, LineElement, PointElement, ArcElement, Filler, Tooltip, Legend } from 'chart.js';
|
|
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]',
|
|
@@ -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',
|
|
@@ -4042,7 +4043,7 @@ class ClxSelectComponent {
|
|
|
4042
4043
|
_overlayWidthPx = signal(0, ...(ngDevMode ? [{ debugName: "_overlayWidthPx" }] : []));
|
|
4043
4044
|
// ── Search control (drives clx-input inside the panel) ─────────────────────
|
|
4044
4045
|
_searchControl = new FormControl('');
|
|
4045
|
-
_searchQuery
|
|
4046
|
+
_searchQuery;
|
|
4046
4047
|
// ── Async state ─────────────────────────────────────────────────────────────
|
|
4047
4048
|
_asyncOptions = signal([], ...(ngDevMode ? [{ debugName: "_asyncOptions" }] : []));
|
|
4048
4049
|
_asyncLoading = signal(false, ...(ngDevMode ? [{ debugName: "_asyncLoading" }] : []));
|
|
@@ -4056,6 +4057,7 @@ class ClxSelectComponent {
|
|
|
4056
4057
|
_sso = inject(ScrollStrategyOptions);
|
|
4057
4058
|
_scrollStrategy = this._sso.reposition();
|
|
4058
4059
|
constructor() {
|
|
4060
|
+
this._searchQuery = toSignal(this._searchControl.valueChanges.pipe(startWith(''), map(v => v ?? '')), { initialValue: '' });
|
|
4059
4061
|
if (this._ngControl)
|
|
4060
4062
|
this._ngControl.valueAccessor = this;
|
|
4061
4063
|
// Async autocomplete: debounce + switchMap sobre el search control
|
|
@@ -4224,8 +4226,8 @@ class ClxSelectComponent {
|
|
|
4224
4226
|
setDisabledState(disabled) {
|
|
4225
4227
|
this._cvaDisabled.set(disabled);
|
|
4226
4228
|
}
|
|
4227
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
4228
|
-
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: `
|
|
4229
4231
|
@if (label()) {
|
|
4230
4232
|
<span [id]="_labelId" [class]="_labelClass()">{{ label() }}</span>
|
|
4231
4233
|
}
|
|
@@ -4366,7 +4368,7 @@ class ClxSelectComponent {
|
|
|
4366
4368
|
}
|
|
4367
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 });
|
|
4368
4370
|
}
|
|
4369
|
-
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: [{
|
|
4370
4372
|
type: Component,
|
|
4371
4373
|
args: [{
|
|
4372
4374
|
selector: 'clx-select',
|
|
@@ -4608,8 +4610,8 @@ class ClxFilterPanelComponent {
|
|
|
4608
4610
|
const t = resolveColor(this.color());
|
|
4609
4611
|
return `text-xs px-1.5 py-0.5 rounded-full font-medium ${t.bgSubtle} ${t.textSubtle}`;
|
|
4610
4612
|
}
|
|
4611
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
4612
|
-
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: `
|
|
4613
4615
|
<!-- Header -->
|
|
4614
4616
|
<div class="flex items-center justify-between px-4 py-3 border-b border-slate-100">
|
|
4615
4617
|
<div class="flex items-center gap-2">
|
|
@@ -4737,7 +4739,7 @@ class ClxFilterPanelComponent {
|
|
|
4737
4739
|
}
|
|
4738
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 });
|
|
4739
4741
|
}
|
|
4740
|
-
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: [{
|
|
4741
4743
|
type: Component,
|
|
4742
4744
|
args: [{
|
|
4743
4745
|
selector: 'clx-filter-panel',
|
|
@@ -5012,8 +5014,8 @@ class ClxAlertComponent {
|
|
|
5012
5014
|
this._timerHandle = null;
|
|
5013
5015
|
}
|
|
5014
5016
|
}
|
|
5015
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
5016
|
-
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: `
|
|
5017
5019
|
<!-- Dialog card -->
|
|
5018
5020
|
<div
|
|
5019
5021
|
#card
|
|
@@ -5083,7 +5085,7 @@ class ClxAlertComponent {
|
|
|
5083
5085
|
</div>
|
|
5084
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 });
|
|
5085
5087
|
}
|
|
5086
|
-
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: [{
|
|
5087
5089
|
type: Component,
|
|
5088
5090
|
args: [{ selector: 'clx-alert', standalone: true, imports: [ClxIconComponent, ClxButtonComponent, NgStyle], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: `
|
|
5089
5091
|
<!-- Dialog card -->
|
|
@@ -5201,8 +5203,8 @@ class ClxDrawerComponent {
|
|
|
5201
5203
|
_close() {
|
|
5202
5204
|
this._modalRef?.close();
|
|
5203
5205
|
}
|
|
5204
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
5205
|
-
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: `
|
|
5206
5208
|
<!-- Header -->
|
|
5207
5209
|
<div class="flex items-center gap-3 px-6 py-4 border-b border-slate-100 shrink-0">
|
|
5208
5210
|
<div class="flex-1 min-w-0">
|
|
@@ -5257,7 +5259,7 @@ class ClxDrawerComponent {
|
|
|
5257
5259
|
</div>
|
|
5258
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 });
|
|
5259
5261
|
}
|
|
5260
|
-
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: [{
|
|
5261
5263
|
type: Component,
|
|
5262
5264
|
args: [{
|
|
5263
5265
|
selector: 'clx-drawer',
|
|
@@ -5343,8 +5345,8 @@ class ClxModalComponent {
|
|
|
5343
5345
|
_close() {
|
|
5344
5346
|
this._modalRef?.close();
|
|
5345
5347
|
}
|
|
5346
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
5347
|
-
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: `
|
|
5348
5350
|
<!-- Header -->
|
|
5349
5351
|
<div class="flex items-center gap-3 px-6 py-4 border-b border-slate-100 shrink-0">
|
|
5350
5352
|
<div class="flex-1 min-w-0">
|
|
@@ -5399,7 +5401,7 @@ class ClxModalComponent {
|
|
|
5399
5401
|
</div>
|
|
5400
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 });
|
|
5401
5403
|
}
|
|
5402
|
-
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: [{
|
|
5403
5405
|
type: Component,
|
|
5404
5406
|
args: [{
|
|
5405
5407
|
selector: 'clx-modal',
|
|
@@ -5627,8 +5629,8 @@ class ClxPaginationComponent {
|
|
|
5627
5629
|
this.currentPage.set(clamped);
|
|
5628
5630
|
this.pageChange.emit({ page: clamped, pageSize: this.pageSize() });
|
|
5629
5631
|
}
|
|
5630
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
5631
|
-
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: `
|
|
5632
5634
|
<div [class]="_wrapClass()">
|
|
5633
5635
|
|
|
5634
5636
|
<!-- ── Info: "1 - 5 de 25 registros" ─────────────────────────────────── -->
|
|
@@ -5728,7 +5730,7 @@ class ClxPaginationComponent {
|
|
|
5728
5730
|
</div>
|
|
5729
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 });
|
|
5730
5732
|
}
|
|
5731
|
-
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: [{
|
|
5732
5734
|
type: Component,
|
|
5733
5735
|
args: [{
|
|
5734
5736
|
selector: 'clx-pagination',
|
|
@@ -6065,8 +6067,8 @@ class ClxToastComponent {
|
|
|
6065
6067
|
this._timerHandle = null;
|
|
6066
6068
|
}
|
|
6067
6069
|
}
|
|
6068
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
6069
|
-
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: `
|
|
6070
6072
|
<!-- Toast card -->
|
|
6071
6073
|
<div
|
|
6072
6074
|
#card
|
|
@@ -6133,7 +6135,7 @@ class ClxToastComponent {
|
|
|
6133
6135
|
</div>
|
|
6134
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 });
|
|
6135
6137
|
}
|
|
6136
|
-
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: [{
|
|
6137
6139
|
type: Component,
|
|
6138
6140
|
args: [{ selector: 'clx-toast', standalone: true, imports: [ClxIconComponent, ClxButtonComponent, NgStyle], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: `
|
|
6139
6141
|
<!-- Toast card -->
|
|
@@ -6216,8 +6218,8 @@ class ClxToastContainerComponent {
|
|
|
6216
6218
|
}
|
|
6217
6219
|
this.entries.update(list => list.filter(e => e.id !== id));
|
|
6218
6220
|
}
|
|
6219
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
6220
|
-
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: `
|
|
6221
6223
|
<div
|
|
6222
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!"
|
|
6223
6225
|
[class]="_positionClass()"
|
|
@@ -6233,7 +6235,7 @@ class ClxToastContainerComponent {
|
|
|
6233
6235
|
</div>
|
|
6234
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 });
|
|
6235
6237
|
}
|
|
6236
|
-
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: [{
|
|
6237
6239
|
type: Component,
|
|
6238
6240
|
args: [{ selector: 'clx-toast-container', standalone: true, imports: [ClxToastComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: `
|
|
6239
6241
|
<div
|
|
@@ -6263,28 +6265,28 @@ const CARD_PADDING_MAP = {
|
|
|
6263
6265
|
};
|
|
6264
6266
|
|
|
6265
6267
|
class ClxCardHeaderDirective {
|
|
6266
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
6267
|
-
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 });
|
|
6268
6270
|
}
|
|
6269
|
-
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: [{
|
|
6270
6272
|
type: Directive,
|
|
6271
6273
|
args: [{ selector: '[clxCardHeader]', standalone: true }]
|
|
6272
6274
|
}] });
|
|
6273
6275
|
|
|
6274
6276
|
class ClxCardBodyDirective {
|
|
6275
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
6276
|
-
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 });
|
|
6277
6279
|
}
|
|
6278
|
-
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: [{
|
|
6279
6281
|
type: Directive,
|
|
6280
6282
|
args: [{ selector: '[clxCardBody]', standalone: true }]
|
|
6281
6283
|
}] });
|
|
6282
6284
|
|
|
6283
6285
|
class ClxCardFooterDirective {
|
|
6284
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
6285
|
-
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 });
|
|
6286
6288
|
}
|
|
6287
|
-
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: [{
|
|
6288
6290
|
type: Directive,
|
|
6289
6291
|
args: [{ selector: '[clxCardFooter]', standalone: true }]
|
|
6290
6292
|
}] });
|
|
@@ -6320,8 +6322,8 @@ class ClxCardComponent {
|
|
|
6320
6322
|
}
|
|
6321
6323
|
return `flex flex-col rounded-xl overflow-hidden w-full ${variantClass} ${hover}`.trim();
|
|
6322
6324
|
}, ...(ngDevMode ? [{ debugName: "_hostClass" }] : []));
|
|
6323
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
6324
|
-
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: `
|
|
6325
6327
|
@if (_hasHeader()) {
|
|
6326
6328
|
<div class="clx-card-header flex items-center justify-between gap-3 px-5 py-4 border-b border-slate-100">
|
|
6327
6329
|
<ng-content select="[clxCardHeader]" />
|
|
@@ -6342,7 +6344,7 @@ class ClxCardComponent {
|
|
|
6342
6344
|
}
|
|
6343
6345
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
6344
6346
|
}
|
|
6345
|
-
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: [{
|
|
6346
6348
|
type: Component,
|
|
6347
6349
|
args: [{
|
|
6348
6350
|
selector: 'clx-card',
|
|
@@ -6448,8 +6450,8 @@ class ClxStepperComponent {
|
|
|
6448
6450
|
return `font-medium text-red-500 ${size}`;
|
|
6449
6451
|
return `font-normal text-slate-400 ${size}`;
|
|
6450
6452
|
}
|
|
6451
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
6452
|
-
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: `
|
|
6453
6455
|
@for (step of steps(); track $index; let last = $last; let i = $index) {
|
|
6454
6456
|
|
|
6455
6457
|
<!-- Step -->
|
|
@@ -6496,7 +6498,7 @@ class ClxStepperComponent {
|
|
|
6496
6498
|
}
|
|
6497
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 });
|
|
6498
6500
|
}
|
|
6499
|
-
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: [{
|
|
6500
6502
|
type: Component,
|
|
6501
6503
|
args: [{
|
|
6502
6504
|
selector: 'clx-stepper',
|
|
@@ -6620,8 +6622,8 @@ class ClxAvatarComponent {
|
|
|
6620
6622
|
const color = this._colorClass();
|
|
6621
6623
|
return `${base} ${size} ${shape} ${color}`.trim();
|
|
6622
6624
|
}, ...(ngDevMode ? [{ debugName: "_hostClass" }] : []));
|
|
6623
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
6624
|
-
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: `
|
|
6625
6627
|
@switch (_contentType()) {
|
|
6626
6628
|
@case ('image') {
|
|
6627
6629
|
<img [src]="src()" [alt]="alt()" class="w-full h-full object-cover" />
|
|
@@ -6635,7 +6637,7 @@ class ClxAvatarComponent {
|
|
|
6635
6637
|
}
|
|
6636
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 });
|
|
6637
6639
|
}
|
|
6638
|
-
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: [{
|
|
6639
6641
|
type: Component,
|
|
6640
6642
|
args: [{
|
|
6641
6643
|
selector: 'clx-avatar',
|
|
@@ -6697,8 +6699,8 @@ class ClxTimelineComponent {
|
|
|
6697
6699
|
const px = this.sizeTokens().item.split(' ')[0];
|
|
6698
6700
|
return `flex items-center justify-between ${px} py-3 border-b ${resolveColor(this.color()).borderLight}`;
|
|
6699
6701
|
}, ...(ngDevMode ? [{ debugName: "_headerClass" }] : []));
|
|
6700
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
6701
|
-
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: [
|
|
6702
6704
|
{ provide: CLX_TIMELINE_CONTEXT, useExisting: forwardRef(() => ClxTimelineComponent) },
|
|
6703
6705
|
], ngImport: i0, template: `
|
|
6704
6706
|
@if (label()) {
|
|
@@ -6714,7 +6716,7 @@ class ClxTimelineComponent {
|
|
|
6714
6716
|
<ng-content />
|
|
6715
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 });
|
|
6716
6718
|
}
|
|
6717
|
-
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: [{
|
|
6718
6720
|
type: Component,
|
|
6719
6721
|
args: [{
|
|
6720
6722
|
selector: 'clx-timeline',
|
|
@@ -6769,8 +6771,8 @@ class ClxTimelineItemComponent {
|
|
|
6769
6771
|
const lineStyle = TIMELINE_LINE_STYLE[this._ctx.lineStyle()];
|
|
6770
6772
|
return `flex-1 w-0 mt-1 ${lineStyle}`.trim();
|
|
6771
6773
|
}, ...(ngDevMode ? [{ debugName: "_lineClass" }] : []));
|
|
6772
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
6773
|
-
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: `
|
|
6774
6776
|
<div class="flex flex-col items-center shrink-0">
|
|
6775
6777
|
<div [class]="_dotClass()">
|
|
6776
6778
|
<span clx-icon [name]="icon()" [size]="_ctx.sizeTokens().iconSize" [class]="_iconClass()"></span>
|
|
@@ -6796,7 +6798,7 @@ class ClxTimelineItemComponent {
|
|
|
6796
6798
|
</div>
|
|
6797
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 });
|
|
6798
6800
|
}
|
|
6799
|
-
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: [{
|
|
6800
6802
|
type: Component,
|
|
6801
6803
|
args: [{
|
|
6802
6804
|
selector: 'clx-timeline-item',
|
|
@@ -6984,8 +6986,8 @@ class ClxChartComponent {
|
|
|
6984
6986
|
ngOnDestroy() {
|
|
6985
6987
|
this._chart?.destroy();
|
|
6986
6988
|
}
|
|
6987
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
6988
|
-
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: `
|
|
6989
6991
|
<div class="clx-chart-container" [style.height]="_hostHeight()" [class.clx-loading]="loading()">
|
|
6990
6992
|
<canvas #canvas role="img" [attr.aria-label]="ariaLabel() || 'Chart'"></canvas>
|
|
6991
6993
|
|
|
@@ -6997,7 +6999,7 @@ class ClxChartComponent {
|
|
|
6997
6999
|
</div>
|
|
6998
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 });
|
|
6999
7001
|
}
|
|
7000
|
-
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: [{
|
|
7001
7003
|
type: Component,
|
|
7002
7004
|
args: [{ selector: 'clx-chart', standalone: true, template: `
|
|
7003
7005
|
<div class="clx-chart-container" [style.height]="_hostHeight()" [class.clx-loading]="loading()">
|
|
@@ -7361,8 +7363,8 @@ class ClxColorPickerComponent {
|
|
|
7361
7363
|
registerOnChange(fn) { this._onChange = fn; }
|
|
7362
7364
|
registerOnTouched(fn) { this._onTouched = fn; }
|
|
7363
7365
|
setDisabledState(disabled) { this._cvaDisabled.set(disabled); }
|
|
7364
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
7365
|
-
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: `
|
|
7366
7368
|
@if (label()) {
|
|
7367
7369
|
<label [id]="_labelId" [class]="_labelClass()">{{ label() }}</label>
|
|
7368
7370
|
}
|
|
@@ -7523,7 +7525,7 @@ class ClxColorPickerComponent {
|
|
|
7523
7525
|
}
|
|
7524
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 });
|
|
7525
7527
|
}
|
|
7526
|
-
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: [{
|
|
7527
7529
|
type: Component,
|
|
7528
7530
|
args: [{
|
|
7529
7531
|
selector: 'clx-colorpicker',
|
|
@@ -7920,8 +7922,8 @@ class ClxDatepickerComponent {
|
|
|
7920
7922
|
registerOnChange(fn) { this._onChange = fn; }
|
|
7921
7923
|
registerOnTouched(fn) { this._onTouched = fn; }
|
|
7922
7924
|
setDisabledState(disabled) { this._cvaDisabled.set(disabled); }
|
|
7923
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
7924
|
-
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: `
|
|
7925
7927
|
@if (label()) {
|
|
7926
7928
|
<label [class]="_labelClass()">{{ label() }}</label>
|
|
7927
7929
|
}
|
|
@@ -8014,7 +8016,7 @@ class ClxDatepickerComponent {
|
|
|
8014
8016
|
}
|
|
8015
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 });
|
|
8016
8018
|
}
|
|
8017
|
-
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: [{
|
|
8018
8020
|
type: Component,
|
|
8019
8021
|
args: [{
|
|
8020
8022
|
selector: 'clx-datepicker',
|
|
@@ -8430,8 +8432,8 @@ class ClxDateRangePickerComponent {
|
|
|
8430
8432
|
registerOnChange(fn) { this._onChange = fn; }
|
|
8431
8433
|
registerOnTouched(fn) { this._onTouched = fn; }
|
|
8432
8434
|
setDisabledState(disabled) { this._cvaDisabled.set(disabled); }
|
|
8433
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
8434
|
-
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: `
|
|
8435
8437
|
@if (label()) {
|
|
8436
8438
|
<label [class]="_labelClass()">{{ label() }}</label>
|
|
8437
8439
|
}
|
|
@@ -8581,7 +8583,7 @@ class ClxDateRangePickerComponent {
|
|
|
8581
8583
|
}
|
|
8582
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 });
|
|
8583
8585
|
}
|
|
8584
|
-
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: [{
|
|
8585
8587
|
type: Component,
|
|
8586
8588
|
args: [{
|
|
8587
8589
|
selector: 'clx-date-range-picker',
|
|
@@ -8765,8 +8767,8 @@ class ClxEditorLinkModalComponent {
|
|
|
8765
8767
|
_cancel() {
|
|
8766
8768
|
this._modalRef?.close(undefined);
|
|
8767
8769
|
}
|
|
8768
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
8769
|
-
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: `
|
|
8770
8772
|
<clx-modal
|
|
8771
8773
|
size="sm"
|
|
8772
8774
|
[confirmButton]="{ text: 'Insertar', color: 'indigo' }"
|
|
@@ -8799,7 +8801,7 @@ class ClxEditorLinkModalComponent {
|
|
|
8799
8801
|
</clx-modal>
|
|
8800
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 });
|
|
8801
8803
|
}
|
|
8802
|
-
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: [{
|
|
8803
8805
|
type: Component,
|
|
8804
8806
|
args: [{
|
|
8805
8807
|
selector: 'clx-editor-link-modal',
|
|
@@ -8897,10 +8899,10 @@ class ClxModalWrapperComponent {
|
|
|
8897
8899
|
_panel() {
|
|
8898
8900
|
return this._el.nativeElement.firstElementChild;
|
|
8899
8901
|
}
|
|
8900
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
8901
|
-
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 });
|
|
8902
8904
|
}
|
|
8903
|
-
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: [{
|
|
8904
8906
|
type: Component,
|
|
8905
8907
|
args: [{
|
|
8906
8908
|
selector: 'clx-modal-wrapper',
|
|
@@ -8987,10 +8989,10 @@ class ClxModalService {
|
|
|
8987
8989
|
_focusTrap.focusInitialElementWhenReady();
|
|
8988
8990
|
return modalRef;
|
|
8989
8991
|
}
|
|
8990
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
8991
|
-
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' });
|
|
8992
8994
|
}
|
|
8993
|
-
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: [{
|
|
8994
8996
|
type: Injectable,
|
|
8995
8997
|
args: [{ providedIn: 'root' }]
|
|
8996
8998
|
}] });
|
|
@@ -9362,8 +9364,8 @@ class ClxEditorComponent {
|
|
|
9362
9364
|
this._cvaDisabled.set(disabled);
|
|
9363
9365
|
this._cdr.markForCheck();
|
|
9364
9366
|
}
|
|
9365
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
9366
|
-
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: [
|
|
9367
9369
|
{
|
|
9368
9370
|
provide: NG_VALUE_ACCESSOR,
|
|
9369
9371
|
useExisting: forwardRef(() => ClxEditorComponent),
|
|
@@ -9543,7 +9545,7 @@ class ClxEditorComponent {
|
|
|
9543
9545
|
}
|
|
9544
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 });
|
|
9545
9547
|
}
|
|
9546
|
-
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: [{
|
|
9547
9549
|
type: Component,
|
|
9548
9550
|
args: [{ selector: 'clx-editor', standalone: true, imports: [ClxIconComponent, ClxButtonComponent, ClxSelectComponent, ReactiveFormsModule], providers: [
|
|
9549
9551
|
{
|
|
@@ -9788,8 +9790,8 @@ class ClxSwitchComponent {
|
|
|
9788
9790
|
_handleBlur() {
|
|
9789
9791
|
this._onTouched();
|
|
9790
9792
|
}
|
|
9791
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
9792
|
-
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: [
|
|
9793
9795
|
{
|
|
9794
9796
|
provide: NG_VALUE_ACCESSOR,
|
|
9795
9797
|
useExisting: forwardRef(() => ClxSwitchComponent),
|
|
@@ -9812,7 +9814,7 @@ class ClxSwitchComponent {
|
|
|
9812
9814
|
}
|
|
9813
9815
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
9814
9816
|
}
|
|
9815
|
-
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: [{
|
|
9816
9818
|
type: Component,
|
|
9817
9819
|
args: [{
|
|
9818
9820
|
selector: 'label[clx-switch]',
|
|
@@ -9992,8 +9994,8 @@ class ClxTextareaComponent {
|
|
|
9992
9994
|
_handleBlur() {
|
|
9993
9995
|
this._onTouched();
|
|
9994
9996
|
}
|
|
9995
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
9996
|
-
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: [
|
|
9997
9999
|
{
|
|
9998
10000
|
provide: NG_VALUE_ACCESSOR,
|
|
9999
10001
|
useExisting: forwardRef(() => ClxTextareaComponent),
|
|
@@ -10054,7 +10056,7 @@ class ClxTextareaComponent {
|
|
|
10054
10056
|
}
|
|
10055
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 });
|
|
10056
10058
|
}
|
|
10057
|
-
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: [{
|
|
10058
10060
|
type: Component,
|
|
10059
10061
|
args: [{
|
|
10060
10062
|
selector: 'clx-textarea',
|
|
@@ -10361,8 +10363,8 @@ class ClxUploadComponent {
|
|
|
10361
10363
|
return `${(bytes / 1_024).toFixed(1)} KB`;
|
|
10362
10364
|
return `${(bytes / 1_048_576).toFixed(1)} MB`;
|
|
10363
10365
|
}
|
|
10364
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
10365
|
-
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: `
|
|
10366
10368
|
<!-- Hidden file input -->
|
|
10367
10369
|
<input
|
|
10368
10370
|
#fileInput
|
|
@@ -10438,7 +10440,7 @@ class ClxUploadComponent {
|
|
|
10438
10440
|
}
|
|
10439
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 });
|
|
10440
10442
|
}
|
|
10441
|
-
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: [{
|
|
10442
10444
|
type: Component,
|
|
10443
10445
|
args: [{
|
|
10444
10446
|
selector: 'clx-upload',
|
|
@@ -10535,10 +10537,10 @@ class ClxStepComponent {
|
|
|
10535
10537
|
isValid = input(true, ...(ngDevMode ? [{ debugName: "isValid" }] : []));
|
|
10536
10538
|
/** Exposed so the parent wizard can toggle visibility imperatively */
|
|
10537
10539
|
nativeEl = inject((ElementRef)).nativeElement;
|
|
10538
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
10539
|
-
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 });
|
|
10540
10542
|
}
|
|
10541
|
-
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: [{
|
|
10542
10544
|
type: Component,
|
|
10543
10545
|
args: [{
|
|
10544
10546
|
selector: 'clx-step',
|
|
@@ -10665,8 +10667,8 @@ class ClxWizardComponent {
|
|
|
10665
10667
|
return `${base} bg-red-500 text-white ${ptr}`;
|
|
10666
10668
|
return `${base} border-2 border-slate-200 text-slate-400 bg-white ${ptr}`;
|
|
10667
10669
|
}
|
|
10668
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
10669
|
-
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: `
|
|
10670
10672
|
<div [class]="_rootClass()">
|
|
10671
10673
|
|
|
10672
10674
|
<!-- ══ HORIZONTAL: clx-tabs indicator ═══════════════════════════════ -->
|
|
@@ -10769,7 +10771,7 @@ class ClxWizardComponent {
|
|
|
10769
10771
|
</div>
|
|
10770
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 });
|
|
10771
10773
|
}
|
|
10772
|
-
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: [{
|
|
10773
10775
|
type: Component,
|
|
10774
10776
|
args: [{ selector: 'clx-wizard', standalone: true, imports: [ClxButtonComponent, ClxIconComponent, ClxTabsComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: `
|
|
10775
10777
|
<div [class]="_rootClass()">
|
|
@@ -10962,8 +10964,8 @@ class ClxAppLayoutComponent {
|
|
|
10962
10964
|
toggleSidebar() { this._sidebarOpen.update(v => !v); }
|
|
10963
10965
|
openSidebar() { this._sidebarOpen.set(true); }
|
|
10964
10966
|
closeSidebar() { this._sidebarOpen.set(false); }
|
|
10965
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
10966
|
-
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: `
|
|
10967
10969
|
<!-- Mobile backdrop -->
|
|
10968
10970
|
@if (_showBackdrop()) {
|
|
10969
10971
|
<div
|
|
@@ -11019,7 +11021,7 @@ class ClxAppLayoutComponent {
|
|
|
11019
11021
|
</div>
|
|
11020
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 });
|
|
11021
11023
|
}
|
|
11022
|
-
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: [{
|
|
11023
11025
|
type: Component,
|
|
11024
11026
|
args: [{
|
|
11025
11027
|
selector: 'clx-app-layout',
|
|
@@ -11091,8 +11093,8 @@ class ClxBrandComponent {
|
|
|
11091
11093
|
name = input.required(...(ngDevMode ? [{ debugName: "name" }] : []));
|
|
11092
11094
|
description = input('', ...(ngDevMode ? [{ debugName: "description" }] : []));
|
|
11093
11095
|
collapsed = input(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : []));
|
|
11094
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
11095
|
-
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: `
|
|
11096
11098
|
<div [class]="collapsed() ? 'flex items-center justify-center py-4' : 'flex items-center gap-3 px-4 py-4'">
|
|
11097
11099
|
<img [src]="logo()" [alt]="name()" class="h-8 w-8 shrink-0 object-contain" />
|
|
11098
11100
|
@if (!collapsed()) {
|
|
@@ -11106,7 +11108,7 @@ class ClxBrandComponent {
|
|
|
11106
11108
|
</div>
|
|
11107
11109
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
11108
11110
|
}
|
|
11109
|
-
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: [{
|
|
11110
11112
|
type: Component,
|
|
11111
11113
|
args: [{
|
|
11112
11114
|
selector: 'clx-brand',
|
|
@@ -11138,7 +11140,7 @@ const NAV_ITEM_IDLE = 'text-slate-400';
|
|
|
11138
11140
|
// ── Children container ─────────────────────────────────────────────────────────
|
|
11139
11141
|
const NAV_CHILDREN_WRAPPER = 'grid transition-all duration-300 ease-in-out';
|
|
11140
11142
|
const NAV_CHILDREN_INNER = 'overflow-hidden';
|
|
11141
|
-
const NAV_CHILDREN_LIST = 'ml-6
|
|
11143
|
+
const NAV_CHILDREN_LIST = 'ml-6 py-1 space-y-0.5';
|
|
11142
11144
|
|
|
11143
11145
|
class ClxMenuItemComponent {
|
|
11144
11146
|
label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
@@ -11147,6 +11149,8 @@ class ClxMenuItemComponent {
|
|
|
11147
11149
|
color = input('indigo', ...(ngDevMode ? [{ debugName: "color" }] : []));
|
|
11148
11150
|
nested = input(false, ...(ngDevMode ? [{ debugName: "nested" }] : []));
|
|
11149
11151
|
collapsed = input(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : []));
|
|
11152
|
+
routerLink = input('', ...(ngDevMode ? [{ debugName: "routerLink" }] : []));
|
|
11153
|
+
routerLinkActiveOptions = input({ exact: false }, ...(ngDevMode ? [{ debugName: "routerLinkActiveOptions" }] : []));
|
|
11150
11154
|
itemClick = output();
|
|
11151
11155
|
_inheritedColor = signal(null, ...(ngDevMode ? [{ debugName: "_inheritedColor" }] : []));
|
|
11152
11156
|
_resolvedColor = computed(() => this._inheritedColor() ?? this.color(), ...(ngDevMode ? [{ debugName: "_resolvedColor" }] : []));
|
|
@@ -11168,47 +11172,81 @@ class ClxMenuItemComponent {
|
|
|
11168
11172
|
}
|
|
11169
11173
|
return `${NAV_ITEM_BASE} ${this._geom()} ${t.textSubtle} font-semibold border-l-2 ${t.borderLight} !pl-[22px] ${t.hoverBgMuted}`;
|
|
11170
11174
|
}, ...(ngDevMode ? [{ debugName: "_activeCls" }] : []));
|
|
11171
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
11172
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
11173
|
-
|
|
11174
|
-
|
|
11175
|
-
|
|
11176
|
-
|
|
11177
|
-
|
|
11178
|
-
|
|
11179
|
-
|
|
11180
|
-
|
|
11181
|
-
|
|
11182
|
-
|
|
11183
|
-
|
|
11184
|
-
|
|
11185
|
-
|
|
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 });
|
|
11186
11207
|
}
|
|
11187
|
-
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: [{
|
|
11188
11209
|
type: Component,
|
|
11189
11210
|
args: [{
|
|
11190
11211
|
selector: 'clx-menu-item',
|
|
11191
11212
|
standalone: true,
|
|
11192
|
-
imports: [ClxIconComponent],
|
|
11213
|
+
imports: [ClxIconComponent, RouterLink, RouterLinkActive],
|
|
11193
11214
|
template: `
|
|
11194
|
-
|
|
11195
|
-
|
|
11196
|
-
|
|
11197
|
-
|
|
11198
|
-
|
|
11199
|
-
|
|
11200
|
-
|
|
11201
|
-
|
|
11202
|
-
|
|
11203
|
-
|
|
11204
|
-
|
|
11205
|
-
|
|
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
|
+
}
|
|
11206
11244
|
`,
|
|
11207
11245
|
encapsulation: ViewEncapsulation.None,
|
|
11208
11246
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
11209
11247
|
host: { class: 'block' },
|
|
11210
11248
|
}]
|
|
11211
|
-
}], 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"] }] } });
|
|
11212
11250
|
|
|
11213
11251
|
class ClxMenuComponent {
|
|
11214
11252
|
label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
@@ -11216,7 +11254,10 @@ class ClxMenuComponent {
|
|
|
11216
11254
|
color = input('indigo', ...(ngDevMode ? [{ debugName: "color" }] : []));
|
|
11217
11255
|
collapsed = input(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : []));
|
|
11218
11256
|
active = input(false, ...(ngDevMode ? [{ debugName: "active" }] : []));
|
|
11257
|
+
routerLink = input('', ...(ngDevMode ? [{ debugName: "routerLink" }] : []));
|
|
11258
|
+
routerLinkActiveOptions = input({ exact: false }, ...(ngDevMode ? [{ debugName: "routerLinkActiveOptions" }] : []));
|
|
11219
11259
|
_isExpanded = signal(false, ...(ngDevMode ? [{ debugName: "_isExpanded" }] : []));
|
|
11260
|
+
_rla;
|
|
11220
11261
|
_childItems;
|
|
11221
11262
|
_destroyRef = inject(DestroyRef);
|
|
11222
11263
|
constructor() {
|
|
@@ -11225,18 +11266,28 @@ class ClxMenuComponent {
|
|
|
11225
11266
|
effect(() => { if (this.collapsed())
|
|
11226
11267
|
this._isExpanded.set(false); });
|
|
11227
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
|
+
}
|
|
11228
11279
|
_iconCls = computed(() => resolveColor(this.color()).textSubtle, ...(ngDevMode ? [{ debugName: "_iconCls" }] : []));
|
|
11229
|
-
_buttonCls
|
|
11280
|
+
_buttonCls(isActive) {
|
|
11230
11281
|
const geom = this.collapsed() ? 'w-full py-3 px-0 justify-center' : NAV_ITEM_L1;
|
|
11231
11282
|
const base = `${NAV_ITEM_BASE} ${geom}`;
|
|
11232
11283
|
const t = resolveColor(this.color());
|
|
11233
|
-
if (
|
|
11284
|
+
if (isActive) {
|
|
11234
11285
|
if (this.collapsed())
|
|
11235
11286
|
return `${base} ${t.textSubtle} font-semibold`;
|
|
11236
11287
|
return `${base} ${t.textSubtle} font-semibold border-l-2 ${t.borderLight} !pl-[22px]`;
|
|
11237
11288
|
}
|
|
11238
11289
|
return `${base} ${NAV_ITEM_IDLE} ${t.hoverBgMuted}`;
|
|
11239
|
-
}
|
|
11290
|
+
}
|
|
11240
11291
|
NAV_CHILDREN_WRAPPER = NAV_CHILDREN_WRAPPER;
|
|
11241
11292
|
NAV_CHILDREN_INNER = NAV_CHILDREN_INNER;
|
|
11242
11293
|
NAV_CHILDREN_LIST = NAV_CHILDREN_LIST;
|
|
@@ -11253,27 +11304,52 @@ class ClxMenuComponent {
|
|
|
11253
11304
|
_toggle() {
|
|
11254
11305
|
this._isExpanded.update(v => !v);
|
|
11255
11306
|
}
|
|
11256
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
11257
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
11258
|
-
|
|
11259
|
-
|
|
11260
|
-
|
|
11261
|
-
|
|
11262
|
-
|
|
11263
|
-
|
|
11264
|
-
|
|
11265
|
-
|
|
11266
|
-
|
|
11267
|
-
|
|
11268
|
-
|
|
11269
|
-
|
|
11270
|
-
|
|
11271
|
-
|
|
11272
|
-
|
|
11273
|
-
|
|
11274
|
-
|
|
11275
|
-
|
|
11276
|
-
|
|
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
|
+
}
|
|
11277
11353
|
|
|
11278
11354
|
<div
|
|
11279
11355
|
[class]="NAV_CHILDREN_WRAPPER"
|
|
@@ -11284,34 +11360,59 @@ class ClxMenuComponent {
|
|
|
11284
11360
|
</div>
|
|
11285
11361
|
</div>
|
|
11286
11362
|
</div>
|
|
11287
|
-
`, 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 });
|
|
11288
11364
|
}
|
|
11289
|
-
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: [{
|
|
11290
11366
|
type: Component,
|
|
11291
11367
|
args: [{
|
|
11292
11368
|
selector: 'clx-menu',
|
|
11293
11369
|
standalone: true,
|
|
11294
|
-
imports: [ClxIconComponent],
|
|
11370
|
+
imports: [ClxIconComponent, RouterLink, RouterLinkActive],
|
|
11295
11371
|
template: `
|
|
11296
|
-
|
|
11297
|
-
|
|
11298
|
-
|
|
11299
|
-
|
|
11300
|
-
|
|
11301
|
-
|
|
11302
|
-
|
|
11303
|
-
|
|
11304
|
-
|
|
11305
|
-
|
|
11306
|
-
|
|
11307
|
-
|
|
11308
|
-
|
|
11309
|
-
|
|
11310
|
-
|
|
11311
|
-
|
|
11312
|
-
|
|
11313
|
-
|
|
11314
|
-
|
|
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
|
+
}
|
|
11315
11416
|
|
|
11316
11417
|
<div
|
|
11317
11418
|
[class]="NAV_CHILDREN_WRAPPER"
|
|
@@ -11327,7 +11428,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
|
|
|
11327
11428
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
11328
11429
|
host: { class: 'block' },
|
|
11329
11430
|
}]
|
|
11330
|
-
}], 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: [{
|
|
11331
11435
|
type: ContentChildren,
|
|
11332
11436
|
args: [ClxMenuItemComponent, { descendants: true }]
|
|
11333
11437
|
}] } });
|
|
@@ -11335,8 +11439,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
|
|
|
11335
11439
|
class ClxNavGroupComponent {
|
|
11336
11440
|
label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
11337
11441
|
collapsed = input(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : []));
|
|
11338
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
11339
|
-
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: `
|
|
11340
11444
|
@if (!collapsed()) {
|
|
11341
11445
|
<span class="block px-6 pt-5 pb-1 text-[10px] font-bold uppercase tracking-widest text-slate-500 select-none">{{ label() }}</span>
|
|
11342
11446
|
} @else {
|
|
@@ -11346,7 +11450,7 @@ class ClxNavGroupComponent {
|
|
|
11346
11450
|
}
|
|
11347
11451
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
11348
11452
|
}
|
|
11349
|
-
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: [{
|
|
11350
11454
|
type: Component,
|
|
11351
11455
|
args: [{
|
|
11352
11456
|
selector: 'clx-nav-group',
|
|
@@ -11390,10 +11494,10 @@ class ClxHeaderCellDirective {
|
|
|
11390
11494
|
constructor(templateRef) {
|
|
11391
11495
|
this.templateRef = templateRef;
|
|
11392
11496
|
}
|
|
11393
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
11394
|
-
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 });
|
|
11395
11499
|
}
|
|
11396
|
-
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: [{
|
|
11397
11501
|
type: Directive,
|
|
11398
11502
|
args: [{
|
|
11399
11503
|
selector: 'ng-template[clxHeaderCell]',
|
|
@@ -11410,10 +11514,10 @@ class ClxCellDirective {
|
|
|
11410
11514
|
static ngTemplateContextGuard(_dir, _ctx) {
|
|
11411
11515
|
return true;
|
|
11412
11516
|
}
|
|
11413
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
11414
|
-
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 });
|
|
11415
11519
|
}
|
|
11416
|
-
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: [{
|
|
11417
11521
|
type: Directive,
|
|
11418
11522
|
args: [{
|
|
11419
11523
|
selector: 'ng-template[clxCell]',
|
|
@@ -11425,10 +11529,10 @@ class ClxColumnDefDirective {
|
|
|
11425
11529
|
name;
|
|
11426
11530
|
headerCell = contentChild((ClxHeaderCellDirective), ...(ngDevMode ? [{ debugName: "headerCell" }] : []));
|
|
11427
11531
|
cell = contentChild((ClxCellDirective), ...(ngDevMode ? [{ debugName: "cell" }] : []));
|
|
11428
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
11429
|
-
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 });
|
|
11430
11534
|
}
|
|
11431
|
-
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: [{
|
|
11432
11536
|
type: Directive,
|
|
11433
11537
|
args: [{
|
|
11434
11538
|
selector: '[clxColumn]',
|
|
@@ -11472,8 +11576,8 @@ class ClxPageEmptyComponent {
|
|
|
11472
11576
|
_ctaCls() {
|
|
11473
11577
|
return this.size() === 'sm' ? 'mt-3' : 'mt-5';
|
|
11474
11578
|
}
|
|
11475
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
11476
|
-
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: `
|
|
11477
11581
|
<div [class]="_iconWrap()">
|
|
11478
11582
|
<span clx-icon [name]="icon()" [size]="_iconSize()" class="text-slate-300"></span>
|
|
11479
11583
|
</div>
|
|
@@ -11497,7 +11601,7 @@ class ClxPageEmptyComponent {
|
|
|
11497
11601
|
}
|
|
11498
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 });
|
|
11499
11603
|
}
|
|
11500
|
-
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: [{
|
|
11501
11605
|
type: Component,
|
|
11502
11606
|
args: [{
|
|
11503
11607
|
selector: 'clx-page-empty',
|
|
@@ -11675,8 +11779,8 @@ class ClxTableComponent {
|
|
|
11675
11779
|
}
|
|
11676
11780
|
this.selectionChange.emit({ selected: this.selectedItems(), allSelected: false });
|
|
11677
11781
|
}
|
|
11678
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
11679
|
-
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: `
|
|
11680
11784
|
<!-- ── Toolbar: búsqueda ──────────────────────────────────────────────── -->
|
|
11681
11785
|
@if (searchable() && !loading()) {
|
|
11682
11786
|
<div class="mb-3 max-w-80 min-w-40">
|
|
@@ -11813,7 +11917,7 @@ class ClxTableComponent {
|
|
|
11813
11917
|
}
|
|
11814
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 });
|
|
11815
11919
|
}
|
|
11816
|
-
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: [{
|
|
11817
11921
|
type: Component,
|
|
11818
11922
|
args: [{
|
|
11819
11923
|
selector: 'clx-table',
|
|
@@ -12066,8 +12170,8 @@ class ClxWishlistComponent {
|
|
|
12066
12170
|
handleCheckoutAll() {
|
|
12067
12171
|
this.onCheckoutAll.emit(this._filtered());
|
|
12068
12172
|
}
|
|
12069
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
12070
|
-
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: `
|
|
12071
12175
|
<div class="flex flex-col gap-6">
|
|
12072
12176
|
|
|
12073
12177
|
<!-- ── Top Bar ──────────────────────────────────────────────────────── -->
|
|
@@ -12249,7 +12353,7 @@ class ClxWishlistComponent {
|
|
|
12249
12353
|
</div>
|
|
12250
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 });
|
|
12251
12355
|
}
|
|
12252
|
-
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: [{
|
|
12253
12357
|
type: Component,
|
|
12254
12358
|
args: [{
|
|
12255
12359
|
selector: 'clx-wishlist',
|
|
@@ -12489,8 +12593,8 @@ class ClxCartComponent {
|
|
|
12489
12593
|
this._couponCode = '';
|
|
12490
12594
|
this.coupon.set(null);
|
|
12491
12595
|
}
|
|
12492
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
12493
|
-
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: `
|
|
12494
12598
|
<!-- ── Loading ─────────────────────────────────────────────────────────────── -->
|
|
12495
12599
|
@if (loading()) {
|
|
12496
12600
|
|
|
@@ -12751,7 +12855,7 @@ class ClxCartComponent {
|
|
|
12751
12855
|
}
|
|
12752
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 });
|
|
12753
12857
|
}
|
|
12754
|
-
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: [{
|
|
12755
12859
|
type: Component,
|
|
12756
12860
|
args: [{
|
|
12757
12861
|
selector: 'clx-cart',
|
|
@@ -13036,8 +13140,8 @@ class ClxCartSummaryDrawer {
|
|
|
13036
13140
|
_ref = inject(CLX_MODAL_REF);
|
|
13037
13141
|
_confirm() { this._ref.close(true); }
|
|
13038
13142
|
_cancel() { this._ref.close(false); }
|
|
13039
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
13040
|
-
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: `
|
|
13041
13145
|
<clx-drawer
|
|
13042
13146
|
size="md"
|
|
13043
13147
|
[confirmButton]="{ text: 'Proceder al pago', color: data.color, variant: 'solid' }"
|
|
@@ -13118,7 +13222,7 @@ class ClxCartSummaryDrawer {
|
|
|
13118
13222
|
</clx-drawer>
|
|
13119
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 });
|
|
13120
13224
|
}
|
|
13121
|
-
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: [{
|
|
13122
13226
|
type: Component,
|
|
13123
13227
|
args: [{
|
|
13124
13228
|
selector: 'clx-cart-summary-drawer',
|
|
@@ -13342,10 +13446,10 @@ class ClxAnimateDirective {
|
|
|
13342
13446
|
this._unbindTrigger();
|
|
13343
13447
|
this.service.stop(this.nativeElement);
|
|
13344
13448
|
}
|
|
13345
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
13346
|
-
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 });
|
|
13347
13451
|
}
|
|
13348
|
-
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: [{
|
|
13349
13453
|
type: Directive,
|
|
13350
13454
|
args: [{
|
|
13351
13455
|
selector: '[clxAnimate]',
|
|
@@ -13387,10 +13491,10 @@ class ClxAnimateGroupDirective {
|
|
|
13387
13491
|
this._pendingTimers.forEach(id => clearTimeout(id));
|
|
13388
13492
|
this._pendingTimers = [];
|
|
13389
13493
|
}
|
|
13390
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
13391
|
-
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 });
|
|
13392
13496
|
}
|
|
13393
|
-
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: [{
|
|
13394
13498
|
type: Directive,
|
|
13395
13499
|
args: [{
|
|
13396
13500
|
selector: '[clxAnimateGroup]',
|
|
@@ -13478,10 +13582,10 @@ class ClxAlertService {
|
|
|
13478
13582
|
...opts,
|
|
13479
13583
|
});
|
|
13480
13584
|
}
|
|
13481
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
13482
|
-
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' });
|
|
13483
13587
|
}
|
|
13484
|
-
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: [{
|
|
13485
13589
|
type: Injectable,
|
|
13486
13590
|
args: [{ providedIn: 'root' }]
|
|
13487
13591
|
}] });
|
|
@@ -13546,10 +13650,10 @@ class ClxDrawerService {
|
|
|
13546
13650
|
_focusTrap.focusInitialElementWhenReady();
|
|
13547
13651
|
return drawerRef;
|
|
13548
13652
|
}
|
|
13549
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
13550
|
-
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' });
|
|
13551
13655
|
}
|
|
13552
|
-
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: [{
|
|
13553
13657
|
type: Injectable,
|
|
13554
13658
|
args: [{ providedIn: 'root' }]
|
|
13555
13659
|
}] });
|
|
@@ -13616,10 +13720,10 @@ class ClxToastService {
|
|
|
13616
13720
|
_uid() {
|
|
13617
13721
|
return `toast-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
|
|
13618
13722
|
}
|
|
13619
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
13620
|
-
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' });
|
|
13621
13725
|
}
|
|
13622
|
-
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: [{
|
|
13623
13727
|
type: Injectable,
|
|
13624
13728
|
args: [{ providedIn: 'root' }]
|
|
13625
13729
|
}] });
|
|
@@ -13669,8 +13773,8 @@ class ClxProgressBarComponent {
|
|
|
13669
13773
|
cls += ' clx-pb-striped';
|
|
13670
13774
|
return cls;
|
|
13671
13775
|
}, ...(ngDevMode ? [{ debugName: "_fillCls" }] : []));
|
|
13672
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
13673
|
-
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: `
|
|
13674
13778
|
@if (label() || showValue()) {
|
|
13675
13779
|
<div class="flex items-center justify-between gap-2">
|
|
13676
13780
|
@if (label()) {
|
|
@@ -13703,7 +13807,7 @@ class ClxProgressBarComponent {
|
|
|
13703
13807
|
</div>
|
|
13704
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 });
|
|
13705
13809
|
}
|
|
13706
|
-
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: [{
|
|
13707
13811
|
type: Component,
|
|
13708
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: `
|
|
13709
13813
|
@if (label() || showValue()) {
|
|
@@ -13744,8 +13848,8 @@ class ClxPageNotFoundComponent {
|
|
|
13744
13848
|
description = input('La ruta que buscas no existe o fue movida.', ...(ngDevMode ? [{ debugName: "description" }] : []));
|
|
13745
13849
|
backLabel = input('Volver al inicio', ...(ngDevMode ? [{ debugName: "backLabel" }] : []));
|
|
13746
13850
|
back = output();
|
|
13747
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
13748
|
-
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: `
|
|
13749
13853
|
<div class="w-20 h-20 rounded-2xl bg-indigo-50 flex items-center justify-center mb-6">
|
|
13750
13854
|
<span clx-icon name="search_off" size="xl" class="text-indigo-400"></span>
|
|
13751
13855
|
</div>
|
|
@@ -13766,7 +13870,7 @@ class ClxPageNotFoundComponent {
|
|
|
13766
13870
|
}
|
|
13767
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 });
|
|
13768
13872
|
}
|
|
13769
|
-
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: [{
|
|
13770
13874
|
type: Component,
|
|
13771
13875
|
args: [{
|
|
13772
13876
|
selector: 'clx-page-not-found',
|
|
@@ -13806,8 +13910,8 @@ class ClxPageUnauthorizedComponent {
|
|
|
13806
13910
|
backLabel = input('Volver', ...(ngDevMode ? [{ debugName: "backLabel" }] : []));
|
|
13807
13911
|
login = output();
|
|
13808
13912
|
back = output();
|
|
13809
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
13810
|
-
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: `
|
|
13811
13915
|
<div class="w-20 h-20 rounded-2xl bg-amber-50 flex items-center justify-center mb-6">
|
|
13812
13916
|
<span clx-icon name="lock" size="xl" class="text-amber-400"></span>
|
|
13813
13917
|
</div>
|
|
@@ -13840,7 +13944,7 @@ class ClxPageUnauthorizedComponent {
|
|
|
13840
13944
|
</div>
|
|
13841
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 });
|
|
13842
13946
|
}
|
|
13843
|
-
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: [{
|
|
13844
13948
|
type: Component,
|
|
13845
13949
|
args: [{
|
|
13846
13950
|
selector: 'clx-page-unauthorized',
|
|
@@ -13892,8 +13996,8 @@ class ClxPageServerErrorComponent {
|
|
|
13892
13996
|
errorId = input('', ...(ngDevMode ? [{ debugName: "errorId" }] : []));
|
|
13893
13997
|
retry = output();
|
|
13894
13998
|
back = output();
|
|
13895
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
13896
|
-
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: `
|
|
13897
14001
|
<div class="w-20 h-20 rounded-2xl bg-red-50 flex items-center justify-center mb-6">
|
|
13898
14002
|
<span clx-icon name="error_outline" size="xl" class="text-red-400"></span>
|
|
13899
14003
|
</div>
|
|
@@ -13930,7 +14034,7 @@ class ClxPageServerErrorComponent {
|
|
|
13930
14034
|
</div>
|
|
13931
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 });
|
|
13932
14036
|
}
|
|
13933
|
-
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: [{
|
|
13934
14038
|
type: Component,
|
|
13935
14039
|
args: [{
|
|
13936
14040
|
selector: 'clx-page-server-error',
|