@xosue-utils/helpers 0.2.0 → 0.2.1
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.
|
@@ -136,10 +136,10 @@ class SmartPaginationComponent {
|
|
|
136
136
|
ngOnDestroy() {
|
|
137
137
|
this.queryParamsSub.unsubscribe();
|
|
138
138
|
}
|
|
139
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
140
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
139
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SmartPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
140
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: SmartPaginationComponent, isStandalone: true, selector: "smart-pagination", inputs: { resetOnChanges: "resetOnChanges", paramName: "paramName", emptyLabel: "emptyLabel", singlePageLabel: "singlePageLabel", data: "data" }, ngImport: i0, template: "@if (paginationData() && paginationData().total === 0) {\r\n <p class=\"NonResults\">{{ emptyLabel }}</p>\r\n} @else if (paginationData() && paginationData().last_page > 1) {\r\n <nav class=\"pagination\" aria-label=\"Paginaci\u00F3n\">\r\n @if (currentPage() > 1) {\r\n <button type=\"button\" (click)=\"goToPage(currentPage() - 1)\" aria-label=\"Anterior\">\r\n <lucide-icon name=\"chevron-left\" [size]=\"16\"></lucide-icon>\r\n </button>\r\n }\r\n\r\n @for (p of pagesToDisplay(); track $index) {\r\n @if (isPage(p)) {\r\n <a\r\n [class.active]=\"p === currentPage()\"\r\n [href]=\"generateHref(p)\"\r\n (click)=\"goToPage(p); $event.preventDefault()\"\r\n >\r\n {{ p }}\r\n </a>\r\n } @else {\r\n <span class=\"ellipsis\">\u2026</span>\r\n }\r\n }\r\n\r\n @if (currentPage() < lastPage()) {\r\n <button type=\"button\" (click)=\"goToPage(currentPage() + 1)\" aria-label=\"Siguiente\">\r\n <lucide-icon name=\"chevron-right\" [size]=\"16\"></lucide-icon>\r\n </button>\r\n }\r\n </nav>\r\n} @else {\r\n <p class=\"UniquePage\">{{ singlePageLabel }}</p>\r\n}\r\n", styles: [":host{width:max-content;height:32px;display:flex}.pagination{width:max-content;max-width:280px;height:32px;display:flex;align-items:center;gap:4px;background-color:var(--surface-2, var(--surface));border-radius:var(--radius-lg, 12px);padding:2px;border:1px solid var(--border)}.pagination a,.pagination button{min-width:28px;height:28px;padding:2px 8px;font-size:.8125rem;font-weight:500;cursor:pointer;border:none;background-color:transparent;color:var(--text-muted);border-radius:var(--radius-md, 8px);display:flex;justify-content:center;align-items:center;text-decoration:none;transition:background-color .15s ease,color .15s ease,transform .1s ease}.pagination a:hover,.pagination button:hover{background-color:color-mix(in srgb,var(--surface) 80%,var(--border));color:var(--text-base)}.pagination a:active,.pagination button:active{transform:scale(.98)}.pagination a.active,.pagination button.active{background-color:var(--surface);color:var(--text-base);font-weight:700;box-shadow:0 1px 2px color-mix(in srgb,var(--text-base) 12%,transparent)}.pagination .ellipsis{display:flex;align-items:center;justify-content:center;width:max-content;padding:0 2px;color:var(--text-muted)}.NonResults,.UniquePage{width:max-content;max-width:280px;height:32px;display:flex;align-items:center;gap:4px;background-color:var(--surface-2, var(--surface));border-radius:var(--radius-lg, 12px);padding:4px 8px;border:1px solid var(--border);color:var(--text-muted);margin:0;font-size:.8125rem}\n"], dependencies: [{ kind: "component", type: LucideIconComponent, selector: "lucide-icon", inputs: ["name", "size", "spin", "filled"] }, { kind: "ngmodule", type: CommonModule }] });
|
|
141
141
|
}
|
|
142
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
142
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SmartPaginationComponent, decorators: [{
|
|
143
143
|
type: Component,
|
|
144
144
|
args: [{ selector: 'smart-pagination', standalone: true, imports: [LucideIconComponent, CommonModule], template: "@if (paginationData() && paginationData().total === 0) {\r\n <p class=\"NonResults\">{{ emptyLabel }}</p>\r\n} @else if (paginationData() && paginationData().last_page > 1) {\r\n <nav class=\"pagination\" aria-label=\"Paginaci\u00F3n\">\r\n @if (currentPage() > 1) {\r\n <button type=\"button\" (click)=\"goToPage(currentPage() - 1)\" aria-label=\"Anterior\">\r\n <lucide-icon name=\"chevron-left\" [size]=\"16\"></lucide-icon>\r\n </button>\r\n }\r\n\r\n @for (p of pagesToDisplay(); track $index) {\r\n @if (isPage(p)) {\r\n <a\r\n [class.active]=\"p === currentPage()\"\r\n [href]=\"generateHref(p)\"\r\n (click)=\"goToPage(p); $event.preventDefault()\"\r\n >\r\n {{ p }}\r\n </a>\r\n } @else {\r\n <span class=\"ellipsis\">\u2026</span>\r\n }\r\n }\r\n\r\n @if (currentPage() < lastPage()) {\r\n <button type=\"button\" (click)=\"goToPage(currentPage() + 1)\" aria-label=\"Siguiente\">\r\n <lucide-icon name=\"chevron-right\" [size]=\"16\"></lucide-icon>\r\n </button>\r\n }\r\n </nav>\r\n} @else {\r\n <p class=\"UniquePage\">{{ singlePageLabel }}</p>\r\n}\r\n", styles: [":host{width:max-content;height:32px;display:flex}.pagination{width:max-content;max-width:280px;height:32px;display:flex;align-items:center;gap:4px;background-color:var(--surface-2, var(--surface));border-radius:var(--radius-lg, 12px);padding:2px;border:1px solid var(--border)}.pagination a,.pagination button{min-width:28px;height:28px;padding:2px 8px;font-size:.8125rem;font-weight:500;cursor:pointer;border:none;background-color:transparent;color:var(--text-muted);border-radius:var(--radius-md, 8px);display:flex;justify-content:center;align-items:center;text-decoration:none;transition:background-color .15s ease,color .15s ease,transform .1s ease}.pagination a:hover,.pagination button:hover{background-color:color-mix(in srgb,var(--surface) 80%,var(--border));color:var(--text-base)}.pagination a:active,.pagination button:active{transform:scale(.98)}.pagination a.active,.pagination button.active{background-color:var(--surface);color:var(--text-base);font-weight:700;box-shadow:0 1px 2px color-mix(in srgb,var(--text-base) 12%,transparent)}.pagination .ellipsis{display:flex;align-items:center;justify-content:center;width:max-content;padding:0 2px;color:var(--text-muted)}.NonResults,.UniquePage{width:max-content;max-width:280px;height:32px;display:flex;align-items:center;gap:4px;background-color:var(--surface-2, var(--surface));border-radius:var(--radius-lg, 12px);padding:4px 8px;border:1px solid var(--border);color:var(--text-muted);margin:0;font-size:.8125rem}\n"] }]
|
|
145
145
|
}], propDecorators: { resetOnChanges: [{
|
|
@@ -163,8 +163,8 @@ class EmptyStateComponent {
|
|
|
163
163
|
secondaryLabel = input(null);
|
|
164
164
|
primary = output();
|
|
165
165
|
secondary = output();
|
|
166
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
167
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
166
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: EmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
167
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: EmptyStateComponent, isStandalone: true, selector: "empty-state", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, primaryLabel: { classPropertyName: "primaryLabel", publicName: "primaryLabel", isSignal: true, isRequired: false, transformFunction: null }, primaryIcon: { classPropertyName: "primaryIcon", publicName: "primaryIcon", isSignal: true, isRequired: false, transformFunction: null }, secondaryLabel: { classPropertyName: "secondaryLabel", publicName: "secondaryLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { primary: "primary", secondary: "secondary" }, ngImport: i0, template: `
|
|
168
168
|
<div class="EmptyState">
|
|
169
169
|
@if (icon()) {
|
|
170
170
|
<div class="EmptyState__Icon">
|
|
@@ -199,7 +199,7 @@ class EmptyStateComponent {
|
|
|
199
199
|
</div>
|
|
200
200
|
`, isInline: true, styles: [":host{display:block;width:100%}.EmptyState{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px;text-align:center;border-radius:var(--radius-xl, 16px);background:var(--surface-2, var(--surface));border:1px solid var(--border)}.EmptyState__Icon{display:flex;color:var(--text-muted)}.EmptyState__Icon lucide-icon{--lucide-stroke: var(--text-muted)}.EmptyState__Title{margin:0;font-size:1rem;font-weight:600;color:var(--text-base)}.EmptyState__Message{margin:0;max-width:28rem;font-size:.875rem;line-height:1.45;color:var(--text-muted)}.EmptyState__Actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px;margin-top:4px}\n"], dependencies: [{ kind: "component", type: LucideIconComponent, selector: "lucide-icon", inputs: ["name", "size", "spin", "filled"] }, { kind: "component", type: TextBtnComponent, selector: "text-btn", inputs: ["label", "icon", "iconPosition", "iconSpin", "layout", "variant", "color", "rounded", "size", "ripple", "disabled", "buttonType", "href", "routerLink", "fit", "width", "textColor", "bgColor", "borderColor", "title"], outputs: ["clicked"] }] });
|
|
201
201
|
}
|
|
202
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
202
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: EmptyStateComponent, decorators: [{
|
|
203
203
|
type: Component,
|
|
204
204
|
args: [{ selector: 'empty-state', standalone: true, imports: [LucideIconComponent, TextBtnComponent], template: `
|
|
205
205
|
<div class="EmptyState">
|
|
@@ -243,8 +243,8 @@ class LoadErrorComponent {
|
|
|
243
243
|
icon = input('triangle-alert');
|
|
244
244
|
retryLabel = input('Reintentar');
|
|
245
245
|
retry = output();
|
|
246
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
247
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
246
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: LoadErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
247
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: LoadErrorComponent, isStandalone: true, selector: "load-error", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, retryLabel: { classPropertyName: "retryLabel", publicName: "retryLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { retry: "retry" }, ngImport: i0, template: `
|
|
248
248
|
<div class="LoadError">
|
|
249
249
|
<div class="LoadError__Icon">
|
|
250
250
|
<lucide-icon [name]="icon()" [size]="36"></lucide-icon>
|
|
@@ -265,7 +265,7 @@ class LoadErrorComponent {
|
|
|
265
265
|
</div>
|
|
266
266
|
`, isInline: true, styles: [":host{display:block;width:100%}.LoadError{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px;text-align:center;border-radius:var(--radius-xl, 16px);background:color-mix(in srgb,var(--error-bg, var(--surface)) 70%,var(--surface));border:1px solid var(--error-border, var(--border))}.LoadError__Icon{display:flex}.LoadError__Icon lucide-icon{--lucide-stroke: var(--error-text, var(--text-base))}.LoadError__Title{margin:0;font-size:1rem;font-weight:600;color:var(--text-base)}.LoadError__Message{margin:0;max-width:28rem;font-size:.875rem;line-height:1.45;color:var(--text-muted)}.LoadError__Actions{display:flex;margin-top:4px}\n"], dependencies: [{ kind: "component", type: LucideIconComponent, selector: "lucide-icon", inputs: ["name", "size", "spin", "filled"] }, { kind: "component", type: TextBtnComponent, selector: "text-btn", inputs: ["label", "icon", "iconPosition", "iconSpin", "layout", "variant", "color", "rounded", "size", "ripple", "disabled", "buttonType", "href", "routerLink", "fit", "width", "textColor", "bgColor", "borderColor", "title"], outputs: ["clicked"] }] });
|
|
267
267
|
}
|
|
268
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
268
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: LoadErrorComponent, decorators: [{
|
|
269
269
|
type: Component,
|
|
270
270
|
args: [{ selector: 'load-error', standalone: true, imports: [LucideIconComponent, TextBtnComponent], template: `
|
|
271
271
|
<div class="LoadError">
|
|
@@ -293,8 +293,8 @@ class SectionHeaderComponent {
|
|
|
293
293
|
title = input.required();
|
|
294
294
|
subtitle = input(null);
|
|
295
295
|
eyebrow = input(null);
|
|
296
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
297
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
296
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SectionHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
297
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: SectionHeaderComponent, isStandalone: true, selector: "section-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, eyebrow: { classPropertyName: "eyebrow", publicName: "eyebrow", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
|
|
298
298
|
<header class="SectionHeader">
|
|
299
299
|
<div class="SectionHeader__Text">
|
|
300
300
|
@if (eyebrow()) {
|
|
@@ -311,7 +311,7 @@ class SectionHeaderComponent {
|
|
|
311
311
|
</header>
|
|
312
312
|
`, isInline: true, styles: [":host{display:block;width:100%}.SectionHeader{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;width:100%}.SectionHeader__Text{display:flex;flex-direction:column;gap:4px;min-width:0}.SectionHeader__Eyebrow{margin:0;font-size:.7rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted)}.SectionHeader__Title{margin:0;font-size:1.125rem;font-weight:600;color:var(--text-base);line-height:1.25}.SectionHeader__Subtitle{margin:0;font-size:.875rem;color:var(--text-muted);line-height:1.4}.SectionHeader__Actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:4px;flex-shrink:0}\n"] });
|
|
313
313
|
}
|
|
314
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
314
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SectionHeaderComponent, decorators: [{
|
|
315
315
|
type: Component,
|
|
316
316
|
args: [{ selector: 'section-header', standalone: true, template: `
|
|
317
317
|
<header class="SectionHeader">
|
|
@@ -334,8 +334,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
|
|
|
334
334
|
class KeyValueListComponent {
|
|
335
335
|
items = input([]);
|
|
336
336
|
emptyValue = input('—');
|
|
337
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
338
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
337
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: KeyValueListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
338
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: KeyValueListComponent, isStandalone: true, selector: "key-value-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, emptyValue: { classPropertyName: "emptyValue", publicName: "emptyValue", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
|
|
339
339
|
<dl class="KvList">
|
|
340
340
|
@for (item of items(); track item.label + '-' + $index) {
|
|
341
341
|
<div class="KvList__Row">
|
|
@@ -346,7 +346,7 @@ class KeyValueListComponent {
|
|
|
346
346
|
</dl>
|
|
347
347
|
`, isInline: true, styles: [":host{display:block;width:100%}.KvList{margin:0;display:flex;flex-direction:column;gap:0;border:1px solid var(--border);border-radius:var(--radius-lg, 12px);overflow:hidden;background:var(--surface)}.KvList__Row{display:grid;grid-template-columns:minmax(6rem,40%) 1fr;gap:8px;padding:8px 12px;border-bottom:1px solid var(--border)}.KvList__Row:last-child{border-bottom:none}.KvList__Label{margin:0;font-size:.8125rem;color:var(--text-muted);font-weight:500}.KvList__Value{margin:0;font-size:.875rem;color:var(--text-base);word-break:break-word}\n"] });
|
|
348
348
|
}
|
|
349
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
349
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: KeyValueListComponent, decorators: [{
|
|
350
350
|
type: Component,
|
|
351
351
|
args: [{ selector: 'key-value-list', standalone: true, template: `
|
|
352
352
|
<dl class="KvList">
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xosue-utils/helpers",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.1",
|
|
4
4
|
"description": "Angular standalone helper UI (pagination, empty-state, load-error, section-header, key-value) with Cupertino aesthetic.",
|
|
5
5
|
"license": "UNLICENSED",
|
|
6
6
|
"private": false,
|
|
@@ -17,9 +17,9 @@
|
|
|
17
17
|
"xosue-utils"
|
|
18
18
|
],
|
|
19
19
|
"peerDependencies": {
|
|
20
|
-
"@angular/common": ">=19.0.0 <
|
|
21
|
-
"@angular/core": ">=19.0.0 <
|
|
22
|
-
"@angular/router": ">=19.0.0 <
|
|
20
|
+
"@angular/common": ">=19.0.0 <22.0.0",
|
|
21
|
+
"@angular/core": ">=19.0.0 <22.0.0",
|
|
22
|
+
"@angular/router": ">=19.0.0 <22.0.0",
|
|
23
23
|
"@lucide/angular": ">=0.500.0 <2.0.0",
|
|
24
24
|
"@xosue-utils/actions": ">=0.2.0 <1.0.0",
|
|
25
25
|
"rxjs": ">=7.8.0 <8.0.0"
|
|
Binary file
|