codexly-ui 0.10.76 → 0.10.78
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 +112 -102
- package/fesm2022/codexly-ui.mjs.map +1 -1
- package/package.json +1 -1
package/fesm2022/codexly-ui.mjs
CHANGED
|
@@ -925,14 +925,16 @@ class ClxButtonComponent {
|
|
|
925
925
|
const shapeClass = s === 'rounded'
|
|
926
926
|
? resolveRadius(this._themeSvc.config().borderRadius)
|
|
927
927
|
: BUTTON_SHAPE_FIXED[s];
|
|
928
|
-
|
|
928
|
+
// The host no longer needs to toggle overflow-hidden/-visible for the badge — the ripple has
|
|
929
|
+
// its own clipped container (.clx-ripple-clip) independent of the host's overflow, so the host
|
|
930
|
+
// can stay overflow-visible unconditionally without ripple waves escaping the button shape.
|
|
929
931
|
// If the consumer already positions the button (absolute/fixed/sticky), don't force
|
|
930
932
|
// `relative` — same-specificity utility classes are resolved by CSS source order, not
|
|
931
933
|
// template order, so `relative` from the base class can silently win over a consumer's
|
|
932
934
|
// `absolute`, leaving the button positioned in-flow instead of where it was placed.
|
|
933
935
|
const isPositioned = /(^|\s)(absolute|fixed|sticky)(\s|$)/.test(this._consumerClass);
|
|
934
936
|
const base = (isPositioned ? BUTTON_BASE_CLASS.replace(/^relative\s/, '') : BUTTON_BASE_CLASS)
|
|
935
|
-
.replace('overflow-hidden',
|
|
937
|
+
.replace('overflow-hidden', 'overflow-visible');
|
|
936
938
|
const consumer = this._consumerClass ? ` ${this._consumerClass}` : '';
|
|
937
939
|
return `${base} ${colorClass} ${sizeClass} ${shapeClass}${this.block() ? ' w-full' : ''}${consumer}`.trimEnd();
|
|
938
940
|
}, ...(ngDevMode ? [{ debugName: "_hostClass" }] : /* istanbul ignore next */ []));
|
|
@@ -958,20 +960,22 @@ class ClxButtonComponent {
|
|
|
958
960
|
@if (icon() && iconPosition() === 'right' && !loading()) {
|
|
959
961
|
<span clx-icon [name]="icon()!" [size]="_iconSize()"></span>
|
|
960
962
|
}
|
|
961
|
-
|
|
962
|
-
|
|
963
|
-
|
|
964
|
-
|
|
965
|
-
|
|
966
|
-
|
|
967
|
-
|
|
968
|
-
|
|
969
|
-
|
|
970
|
-
|
|
963
|
+
<span class="clx-ripple-clip">
|
|
964
|
+
@for (r of _ripples(); track r.id) {
|
|
965
|
+
<span
|
|
966
|
+
class="clx-ripple-wave"
|
|
967
|
+
[style.background-color]="_rippleColor()"
|
|
968
|
+
[style.width.px]="r.diameter"
|
|
969
|
+
[style.height.px]="r.diameter"
|
|
970
|
+
[style.left.px]="r.x - r.diameter / 2"
|
|
971
|
+
[style.top.px]="r.y - r.diameter / 2"
|
|
972
|
+
></span>
|
|
973
|
+
}
|
|
974
|
+
</span>
|
|
971
975
|
@if (badge() !== undefined && badge() !== null) {
|
|
972
976
|
<span [class]="_badgeClass()">{{ badge() }}</span>
|
|
973
977
|
}
|
|
974
|
-
`, 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 });
|
|
978
|
+
`, isInline: true, styles: ["@keyframes clx-ripple-anim{to{transform:scale(4);opacity:0}}.clx-ripple-clip{position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none}.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 });
|
|
975
979
|
}
|
|
976
980
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxButtonComponent, decorators: [{
|
|
977
981
|
type: Component,
|
|
@@ -986,16 +990,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
|
|
|
986
990
|
@if (icon() && iconPosition() === 'right' && !loading()) {
|
|
987
991
|
<span clx-icon [name]="icon()!" [size]="_iconSize()"></span>
|
|
988
992
|
}
|
|
989
|
-
|
|
990
|
-
|
|
991
|
-
|
|
992
|
-
|
|
993
|
-
|
|
994
|
-
|
|
995
|
-
|
|
996
|
-
|
|
997
|
-
|
|
998
|
-
|
|
993
|
+
<span class="clx-ripple-clip">
|
|
994
|
+
@for (r of _ripples(); track r.id) {
|
|
995
|
+
<span
|
|
996
|
+
class="clx-ripple-wave"
|
|
997
|
+
[style.background-color]="_rippleColor()"
|
|
998
|
+
[style.width.px]="r.diameter"
|
|
999
|
+
[style.height.px]="r.diameter"
|
|
1000
|
+
[style.left.px]="r.x - r.diameter / 2"
|
|
1001
|
+
[style.top.px]="r.y - r.diameter / 2"
|
|
1002
|
+
></span>
|
|
1003
|
+
}
|
|
1004
|
+
</span>
|
|
999
1005
|
@if (badge() !== undefined && badge() !== null) {
|
|
1000
1006
|
<span [class]="_badgeClass()">{{ badge() }}</span>
|
|
1001
1007
|
}
|
|
@@ -1006,7 +1012,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
|
|
|
1006
1012
|
'[attr.disabled]': '_inactive() ? true : null',
|
|
1007
1013
|
'[attr.aria-busy]': 'loading()',
|
|
1008
1014
|
'(click)': '_onRipple($event)',
|
|
1009
|
-
}, 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"] }]
|
|
1015
|
+
}, styles: ["@keyframes clx-ripple-anim{to{transform:scale(4);opacity:0}}.clx-ripple-clip{position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none}.clx-ripple-wave{position:absolute;border-radius:50%;transform:scale(0);animation:clx-ripple-anim .6s linear;pointer-events:none}\n"] }]
|
|
1010
1016
|
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], textColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "textColor", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], block: [{ type: i0.Input, args: [{ isSignal: true, alias: "block", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPosition", required: false }] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], badgeColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeColor", required: false }] }] } });
|
|
1011
1017
|
|
|
1012
1018
|
class ClxButtonGroupComponent {
|
|
@@ -14771,48 +14777,50 @@ class ClxWishlistComponent {
|
|
|
14771
14777
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", 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", onBrowseCatalog: "onBrowseCatalog" }, ngImport: i0, template: `
|
|
14772
14778
|
<div class="flex flex-col gap-6">
|
|
14773
14779
|
|
|
14774
|
-
|
|
14775
|
-
|
|
14776
|
-
<div class="flex-
|
|
14777
|
-
<
|
|
14778
|
-
|
|
14779
|
-
|
|
14780
|
-
|
|
14781
|
-
|
|
14782
|
-
|
|
14783
|
-
|
|
14784
|
-
|
|
14785
|
-
|
|
14786
|
-
|
|
14787
|
-
|
|
14788
|
-
<
|
|
14789
|
-
|
|
14790
|
-
|
|
14791
|
-
|
|
14792
|
-
|
|
14793
|
-
|
|
14794
|
-
|
|
14795
|
-
|
|
14780
|
+
@if (loading() || items().length > 0) {
|
|
14781
|
+
<!-- ── Top Bar ──────────────────────────────────────────────────────── -->
|
|
14782
|
+
<div class="flex flex-col sm:flex-row sm:items-center gap-3">
|
|
14783
|
+
<div class="flex-1 min-w-0">
|
|
14784
|
+
<clx-input
|
|
14785
|
+
type="search"
|
|
14786
|
+
placeholder="Search Here"
|
|
14787
|
+
prefixIcon="search"
|
|
14788
|
+
size="md"
|
|
14789
|
+
[color]="color()"
|
|
14790
|
+
[(ngModel)]="_searchModel"
|
|
14791
|
+
(ngModelChange)="handleSearch($event)"
|
|
14792
|
+
/>
|
|
14793
|
+
</div>
|
|
14794
|
+
<div class="w-full sm:w-52 shrink-0">
|
|
14795
|
+
<clx-select
|
|
14796
|
+
placeholder="Sort By"
|
|
14797
|
+
[options]="sortOptions()"
|
|
14798
|
+
[activeColor]="color()"
|
|
14799
|
+
size="md"
|
|
14800
|
+
[(ngModel)]="_sortModel"
|
|
14801
|
+
(ngModelChange)="handleSort($event)"
|
|
14802
|
+
/>
|
|
14803
|
+
</div>
|
|
14796
14804
|
</div>
|
|
14797
|
-
</div>
|
|
14798
14805
|
|
|
14799
|
-
|
|
14800
|
-
|
|
14801
|
-
|
|
14802
|
-
|
|
14803
|
-
|
|
14806
|
+
<!-- ── Info Bar ─────────────────────────────────────────────────────── -->
|
|
14807
|
+
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
|
|
14808
|
+
<div class="flex items-center gap-2">
|
|
14809
|
+
<h2 class="text-base font-semibold text-clx-text-label">Productos</h2>
|
|
14810
|
+
<span clx-badge variant="light" [color]="color()" size="sm">{{ _totalItems() }}</span>
|
|
14811
|
+
</div>
|
|
14812
|
+
<button
|
|
14813
|
+
clx-button
|
|
14814
|
+
type="button"
|
|
14815
|
+
variant="light"
|
|
14816
|
+
[color]="color()"
|
|
14817
|
+
icon="arrow_forward"
|
|
14818
|
+
iconPosition="right"
|
|
14819
|
+
[disabled]="_totalItems() === 0"
|
|
14820
|
+
(click)="handleCheckoutAll()"
|
|
14821
|
+
>Agregar todo al carrito</button>
|
|
14804
14822
|
</div>
|
|
14805
|
-
|
|
14806
|
-
clx-button
|
|
14807
|
-
type="button"
|
|
14808
|
-
variant="light"
|
|
14809
|
-
[color]="color()"
|
|
14810
|
-
icon="arrow_forward"
|
|
14811
|
-
iconPosition="right"
|
|
14812
|
-
[disabled]="_totalItems() === 0"
|
|
14813
|
-
(click)="handleCheckoutAll()"
|
|
14814
|
-
>Agregar todo al carrito</button>
|
|
14815
|
-
</div>
|
|
14823
|
+
}
|
|
14816
14824
|
|
|
14817
14825
|
<!-- ── List ─────────────────────────────────────────────────────────── -->
|
|
14818
14826
|
@if (loading()) {
|
|
@@ -14976,48 +14984,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
|
|
|
14976
14984
|
template: `
|
|
14977
14985
|
<div class="flex flex-col gap-6">
|
|
14978
14986
|
|
|
14979
|
-
|
|
14980
|
-
|
|
14981
|
-
<div class="flex-
|
|
14982
|
-
<
|
|
14983
|
-
|
|
14984
|
-
|
|
14985
|
-
|
|
14986
|
-
|
|
14987
|
-
|
|
14988
|
-
|
|
14989
|
-
|
|
14990
|
-
|
|
14991
|
-
|
|
14992
|
-
|
|
14993
|
-
<
|
|
14994
|
-
|
|
14995
|
-
|
|
14996
|
-
|
|
14997
|
-
|
|
14998
|
-
|
|
14999
|
-
|
|
15000
|
-
|
|
14987
|
+
@if (loading() || items().length > 0) {
|
|
14988
|
+
<!-- ── Top Bar ──────────────────────────────────────────────────────── -->
|
|
14989
|
+
<div class="flex flex-col sm:flex-row sm:items-center gap-3">
|
|
14990
|
+
<div class="flex-1 min-w-0">
|
|
14991
|
+
<clx-input
|
|
14992
|
+
type="search"
|
|
14993
|
+
placeholder="Search Here"
|
|
14994
|
+
prefixIcon="search"
|
|
14995
|
+
size="md"
|
|
14996
|
+
[color]="color()"
|
|
14997
|
+
[(ngModel)]="_searchModel"
|
|
14998
|
+
(ngModelChange)="handleSearch($event)"
|
|
14999
|
+
/>
|
|
15000
|
+
</div>
|
|
15001
|
+
<div class="w-full sm:w-52 shrink-0">
|
|
15002
|
+
<clx-select
|
|
15003
|
+
placeholder="Sort By"
|
|
15004
|
+
[options]="sortOptions()"
|
|
15005
|
+
[activeColor]="color()"
|
|
15006
|
+
size="md"
|
|
15007
|
+
[(ngModel)]="_sortModel"
|
|
15008
|
+
(ngModelChange)="handleSort($event)"
|
|
15009
|
+
/>
|
|
15010
|
+
</div>
|
|
15001
15011
|
</div>
|
|
15002
|
-
</div>
|
|
15003
15012
|
|
|
15004
|
-
|
|
15005
|
-
|
|
15006
|
-
|
|
15007
|
-
|
|
15008
|
-
|
|
15013
|
+
<!-- ── Info Bar ─────────────────────────────────────────────────────── -->
|
|
15014
|
+
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
|
|
15015
|
+
<div class="flex items-center gap-2">
|
|
15016
|
+
<h2 class="text-base font-semibold text-clx-text-label">Productos</h2>
|
|
15017
|
+
<span clx-badge variant="light" [color]="color()" size="sm">{{ _totalItems() }}</span>
|
|
15018
|
+
</div>
|
|
15019
|
+
<button
|
|
15020
|
+
clx-button
|
|
15021
|
+
type="button"
|
|
15022
|
+
variant="light"
|
|
15023
|
+
[color]="color()"
|
|
15024
|
+
icon="arrow_forward"
|
|
15025
|
+
iconPosition="right"
|
|
15026
|
+
[disabled]="_totalItems() === 0"
|
|
15027
|
+
(click)="handleCheckoutAll()"
|
|
15028
|
+
>Agregar todo al carrito</button>
|
|
15009
15029
|
</div>
|
|
15010
|
-
|
|
15011
|
-
clx-button
|
|
15012
|
-
type="button"
|
|
15013
|
-
variant="light"
|
|
15014
|
-
[color]="color()"
|
|
15015
|
-
icon="arrow_forward"
|
|
15016
|
-
iconPosition="right"
|
|
15017
|
-
[disabled]="_totalItems() === 0"
|
|
15018
|
-
(click)="handleCheckoutAll()"
|
|
15019
|
-
>Agregar todo al carrito</button>
|
|
15020
|
-
</div>
|
|
15030
|
+
}
|
|
15021
15031
|
|
|
15022
15032
|
<!-- ── List ─────────────────────────────────────────────────────────── -->
|
|
15023
15033
|
@if (loading()) {
|