codexly-ui 0.10.56 → 0.10.57
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 +85 -78
- package/fesm2022/codexly-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/types/codexly-ui.d.ts +4 -1
package/fesm2022/codexly-ui.mjs
CHANGED
|
@@ -15073,6 +15073,9 @@ class ClxCartComponent {
|
|
|
15073
15073
|
items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
|
|
15074
15074
|
loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
|
|
15075
15075
|
color = input('indigo', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
|
|
15076
|
+
/** Hide the coupon block entirely when the host app has no coupon backend to back it —
|
|
15077
|
+
* showing a code input that always fails would read as broken, not "not built yet". */
|
|
15078
|
+
showCoupon = input(true, ...(ngDevMode ? [{ debugName: "showCoupon" }] : /* istanbul ignore next */ []));
|
|
15076
15079
|
coupon = model(null, ...(ngDevMode ? [{ debugName: "coupon" }] : /* istanbul ignore next */ []));
|
|
15077
15080
|
onRemove = output();
|
|
15078
15081
|
onQuantityChange = output();
|
|
@@ -15107,7 +15110,7 @@ class ClxCartComponent {
|
|
|
15107
15110
|
this.coupon.set(null);
|
|
15108
15111
|
}
|
|
15109
15112
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxCartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
15110
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", 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: `
|
|
15113
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", 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 }, showCoupon: { classPropertyName: "showCoupon", publicName: "showCoupon", 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: `
|
|
15111
15114
|
<!-- ── Loading ─────────────────────────────────────────────────────────────── -->
|
|
15112
15115
|
@if (loading()) {
|
|
15113
15116
|
|
|
@@ -15275,48 +15278,50 @@ class ClxCartComponent {
|
|
|
15275
15278
|
<h2 class="text-base font-semibold text-clx-text-label">Order Summary</h2>
|
|
15276
15279
|
|
|
15277
15280
|
<!-- Coupon -->
|
|
15278
|
-
|
|
15279
|
-
<
|
|
15280
|
-
|
|
15281
|
-
<div class="flex-
|
|
15282
|
-
<
|
|
15283
|
-
|
|
15284
|
-
|
|
15285
|
-
|
|
15286
|
-
|
|
15287
|
-
|
|
15288
|
-
|
|
15281
|
+
@if (showCoupon()) {
|
|
15282
|
+
<div class="space-y-2">
|
|
15283
|
+
<p class="text-xs font-medium text-clx-text-muted">¿Tienes un cupón de descuento?</p>
|
|
15284
|
+
<div class="flex gap-2">
|
|
15285
|
+
<div class="flex-1">
|
|
15286
|
+
<clx-input
|
|
15287
|
+
placeholder="Código de cupón"
|
|
15288
|
+
prefixIcon="confirmation_number"
|
|
15289
|
+
size="sm"
|
|
15290
|
+
[color]="color()"
|
|
15291
|
+
[(ngModel)]="_couponCode"
|
|
15292
|
+
[disabled]="!!coupon()?.valid" />
|
|
15293
|
+
</div>
|
|
15294
|
+
@if (coupon()?.valid) {
|
|
15295
|
+
<button
|
|
15296
|
+
clx-button type="button" variant="ghost" color="red" size="sm"
|
|
15297
|
+
icon="close" [iconOnly]="true" shape="circle"
|
|
15298
|
+
(click)="removeCoupon()">
|
|
15299
|
+
</button>
|
|
15300
|
+
} @else {
|
|
15301
|
+
<button
|
|
15302
|
+
clx-button type="button" [color]="color()" variant="solid" size="sm" shape="pill"
|
|
15303
|
+
[disabled]="!_couponCode.trim()"
|
|
15304
|
+
(click)="applyCoupon()">
|
|
15305
|
+
Aplicar
|
|
15306
|
+
</button>
|
|
15307
|
+
}
|
|
15289
15308
|
</div>
|
|
15290
|
-
@if (coupon()
|
|
15291
|
-
|
|
15292
|
-
|
|
15293
|
-
|
|
15294
|
-
|
|
15295
|
-
|
|
15296
|
-
|
|
15297
|
-
|
|
15298
|
-
|
|
15299
|
-
|
|
15300
|
-
(click)="applyCoupon()">
|
|
15301
|
-
Aplicar
|
|
15302
|
-
</button>
|
|
15309
|
+
@if (coupon()) {
|
|
15310
|
+
@if (coupon()!.valid) {
|
|
15311
|
+
<div class="flex items-center gap-1.5 text-emerald-600">
|
|
15312
|
+
<span clx-icon name="check_circle" size="sm"></span>
|
|
15313
|
+
<code class="text-xs font-bold">{{ coupon()!.code }}</code>
|
|
15314
|
+
<span class="text-xs">aplicado</span>
|
|
15315
|
+
</div>
|
|
15316
|
+
} @else {
|
|
15317
|
+
<p class="text-xs text-red-500">{{ coupon()!.message ?? 'Cupón inválido' }}</p>
|
|
15318
|
+
}
|
|
15303
15319
|
}
|
|
15304
15320
|
</div>
|
|
15305
|
-
@if (coupon()) {
|
|
15306
|
-
@if (coupon()!.valid) {
|
|
15307
|
-
<div class="flex items-center gap-1.5 text-emerald-600">
|
|
15308
|
-
<span clx-icon name="check_circle" size="sm"></span>
|
|
15309
|
-
<code class="text-xs font-bold">{{ coupon()!.code }}</code>
|
|
15310
|
-
<span class="text-xs">aplicado</span>
|
|
15311
|
-
</div>
|
|
15312
|
-
} @else {
|
|
15313
|
-
<p class="text-xs text-red-500">{{ coupon()!.message ?? 'Cupón inválido' }}</p>
|
|
15314
|
-
}
|
|
15315
|
-
}
|
|
15316
|
-
</div>
|
|
15317
15321
|
|
|
15318
|
-
|
|
15319
|
-
|
|
15322
|
+
<!-- Divider -->
|
|
15323
|
+
<div class="border-t border-clx-border-soft"></div>
|
|
15324
|
+
}
|
|
15320
15325
|
|
|
15321
15326
|
<!-- Totals -->
|
|
15322
15327
|
<dl class="flex flex-col gap-2.5 text-sm">
|
|
@@ -15553,48 +15558,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
|
|
|
15553
15558
|
<h2 class="text-base font-semibold text-clx-text-label">Order Summary</h2>
|
|
15554
15559
|
|
|
15555
15560
|
<!-- Coupon -->
|
|
15556
|
-
|
|
15557
|
-
<
|
|
15558
|
-
|
|
15559
|
-
<div class="flex-
|
|
15560
|
-
<
|
|
15561
|
-
|
|
15562
|
-
|
|
15563
|
-
|
|
15564
|
-
|
|
15565
|
-
|
|
15566
|
-
|
|
15561
|
+
@if (showCoupon()) {
|
|
15562
|
+
<div class="space-y-2">
|
|
15563
|
+
<p class="text-xs font-medium text-clx-text-muted">¿Tienes un cupón de descuento?</p>
|
|
15564
|
+
<div class="flex gap-2">
|
|
15565
|
+
<div class="flex-1">
|
|
15566
|
+
<clx-input
|
|
15567
|
+
placeholder="Código de cupón"
|
|
15568
|
+
prefixIcon="confirmation_number"
|
|
15569
|
+
size="sm"
|
|
15570
|
+
[color]="color()"
|
|
15571
|
+
[(ngModel)]="_couponCode"
|
|
15572
|
+
[disabled]="!!coupon()?.valid" />
|
|
15573
|
+
</div>
|
|
15574
|
+
@if (coupon()?.valid) {
|
|
15575
|
+
<button
|
|
15576
|
+
clx-button type="button" variant="ghost" color="red" size="sm"
|
|
15577
|
+
icon="close" [iconOnly]="true" shape="circle"
|
|
15578
|
+
(click)="removeCoupon()">
|
|
15579
|
+
</button>
|
|
15580
|
+
} @else {
|
|
15581
|
+
<button
|
|
15582
|
+
clx-button type="button" [color]="color()" variant="solid" size="sm" shape="pill"
|
|
15583
|
+
[disabled]="!_couponCode.trim()"
|
|
15584
|
+
(click)="applyCoupon()">
|
|
15585
|
+
Aplicar
|
|
15586
|
+
</button>
|
|
15587
|
+
}
|
|
15567
15588
|
</div>
|
|
15568
|
-
@if (coupon()
|
|
15569
|
-
|
|
15570
|
-
|
|
15571
|
-
|
|
15572
|
-
|
|
15573
|
-
|
|
15574
|
-
|
|
15575
|
-
|
|
15576
|
-
|
|
15577
|
-
|
|
15578
|
-
(click)="applyCoupon()">
|
|
15579
|
-
Aplicar
|
|
15580
|
-
</button>
|
|
15589
|
+
@if (coupon()) {
|
|
15590
|
+
@if (coupon()!.valid) {
|
|
15591
|
+
<div class="flex items-center gap-1.5 text-emerald-600">
|
|
15592
|
+
<span clx-icon name="check_circle" size="sm"></span>
|
|
15593
|
+
<code class="text-xs font-bold">{{ coupon()!.code }}</code>
|
|
15594
|
+
<span class="text-xs">aplicado</span>
|
|
15595
|
+
</div>
|
|
15596
|
+
} @else {
|
|
15597
|
+
<p class="text-xs text-red-500">{{ coupon()!.message ?? 'Cupón inválido' }}</p>
|
|
15598
|
+
}
|
|
15581
15599
|
}
|
|
15582
15600
|
</div>
|
|
15583
|
-
@if (coupon()) {
|
|
15584
|
-
@if (coupon()!.valid) {
|
|
15585
|
-
<div class="flex items-center gap-1.5 text-emerald-600">
|
|
15586
|
-
<span clx-icon name="check_circle" size="sm"></span>
|
|
15587
|
-
<code class="text-xs font-bold">{{ coupon()!.code }}</code>
|
|
15588
|
-
<span class="text-xs">aplicado</span>
|
|
15589
|
-
</div>
|
|
15590
|
-
} @else {
|
|
15591
|
-
<p class="text-xs text-red-500">{{ coupon()!.message ?? 'Cupón inválido' }}</p>
|
|
15592
|
-
}
|
|
15593
|
-
}
|
|
15594
|
-
</div>
|
|
15595
15601
|
|
|
15596
|
-
|
|
15597
|
-
|
|
15602
|
+
<!-- Divider -->
|
|
15603
|
+
<div class="border-t border-clx-border-soft"></div>
|
|
15604
|
+
}
|
|
15598
15605
|
|
|
15599
15606
|
<!-- Totals -->
|
|
15600
15607
|
<dl class="flex flex-col gap-2.5 text-sm">
|
|
@@ -15646,7 +15653,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
|
|
|
15646
15653
|
}
|
|
15647
15654
|
`,
|
|
15648
15655
|
}]
|
|
15649
|
-
}], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], coupon: [{ type: i0.Input, args: [{ isSignal: true, alias: "coupon", required: false }] }, { type: i0.Output, args: ["couponChange"] }], onRemove: [{ type: i0.Output, args: ["onRemove"] }], onQuantityChange: [{ type: i0.Output, args: ["onQuantityChange"] }], onClearCart: [{ type: i0.Output, args: ["onClearCart"] }], onApplyCoupon: [{ type: i0.Output, args: ["onApplyCoupon"] }], onCheckout: [{ type: i0.Output, args: ["onCheckout"] }] } });
|
|
15656
|
+
}], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], showCoupon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCoupon", required: false }] }], coupon: [{ type: i0.Input, args: [{ isSignal: true, alias: "coupon", required: false }] }, { type: i0.Output, args: ["couponChange"] }], onRemove: [{ type: i0.Output, args: ["onRemove"] }], onQuantityChange: [{ type: i0.Output, args: ["onQuantityChange"] }], onClearCart: [{ type: i0.Output, args: ["onClearCart"] }], onApplyCoupon: [{ type: i0.Output, args: ["onApplyCoupon"] }], onCheckout: [{ type: i0.Output, args: ["onCheckout"] }] } });
|
|
15650
15657
|
|
|
15651
15658
|
class ClxCartSummaryDrawer {
|
|
15652
15659
|
data = inject(CLX_MODAL_DATA);
|