@c80/ui 1.0.64 → 2.0.0
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/README.md +1 -1
- package/esm2022/index.js +3 -0
- package/esm2022/index.js.map +1 -1
- package/esm2022/lib/action-list/action-list.component.js +5 -5
- package/esm2022/lib/action-list/action-list.component.js.map +1 -1
- package/esm2022/lib/action-list/action-list.types.js +0 -1
- package/esm2022/lib/card-level/card-level.component.js +12 -12
- package/esm2022/lib/card-level/card-level.component.js.map +1 -1
- package/esm2022/lib/card-level/card-level.interface.js +0 -1
- package/esm2022/lib/error-notification/error-notification.component.js +5 -5
- package/esm2022/lib/error-notification/error-notification.component.js.map +1 -1
- package/esm2022/lib/error-notification/error-notification.types.js +0 -1
- package/esm2022/lib/header/header.component.js +7 -6
- package/esm2022/lib/header/header.component.js.map +1 -1
- package/esm2022/lib/header/header.types.js +0 -1
- package/esm2022/lib/icon/icon.component.js +26 -26
- package/esm2022/lib/icon/icon.component.js.map +1 -1
- package/esm2022/lib/icon/icon.definitions.js +3 -0
- package/esm2022/lib/icon/icon.definitions.js.map +1 -1
- package/esm2022/lib/icon/icon.types.js +0 -1
- package/esm2022/lib/icon/theme.service.js +23 -8
- package/esm2022/lib/icon/theme.service.js.map +1 -1
- package/esm2022/lib/info-list/info-list.component.js +4 -4
- package/esm2022/lib/info-list/info-list.component.js.map +1 -1
- package/esm2022/lib/info-list/info-list.types.js +0 -1
- package/esm2022/lib/info-message/index.js +3 -0
- package/esm2022/lib/info-message/index.js.map +1 -0
- package/esm2022/lib/info-message/info-message.component.js +25 -0
- package/esm2022/lib/info-message/info-message.component.js.map +1 -0
- package/esm2022/lib/info-message/info-message.types.js +1 -0
- package/esm2022/lib/info-message/info-message.types.js.map +1 -0
- package/esm2022/lib/input-field/input-field.component.js +11 -11
- package/esm2022/lib/input-field/input-field.component.js.map +1 -1
- package/esm2022/lib/input-search/c80-input-search.component.js +5 -5
- package/esm2022/lib/input-search/c80-input-search.component.js.map +1 -1
- package/esm2022/lib/legal-disclaimer/index.js +2 -0
- package/esm2022/lib/legal-disclaimer/index.js.map +1 -0
- package/esm2022/lib/legal-disclaimer/legal-disclaimer.component.js +21 -0
- package/esm2022/lib/legal-disclaimer/legal-disclaimer.component.js.map +1 -0
- package/esm2022/lib/modal/modal.component.js +12 -5
- package/esm2022/lib/modal/modal.component.js.map +1 -1
- package/esm2022/lib/modal/modal.service.js +22 -10
- package/esm2022/lib/modal/modal.service.js.map +1 -1
- package/esm2022/lib/modal/modal.types.js +0 -1
- package/esm2022/lib/modal/modal.types.js.map +1 -1
- package/esm2022/lib/navigation-card/index.js +3 -0
- package/esm2022/lib/navigation-card/index.js.map +1 -0
- package/esm2022/lib/navigation-card/navigation-card.component.js +18 -0
- package/esm2022/lib/navigation-card/navigation-card.component.js.map +1 -0
- package/esm2022/lib/navigation-card/navigation-card.types.js +1 -0
- package/esm2022/lib/navigation-card/navigation-card.types.js.map +1 -0
- package/esm2022/lib/profile-stats/profile-stats.component.js +4 -4
- package/esm2022/lib/profile-stats/profile-stats.component.js.map +1 -1
- package/esm2022/lib/profile-stats/profile-stats.types.js +0 -1
- package/esm2022/lib/rating-display/rating-display.component.js +7 -7
- package/esm2022/lib/rating-display/rating-display.component.js.map +1 -1
- package/esm2022/lib/rating-stars/rating-stars.component.js +8 -8
- package/esm2022/lib/rating-stars/rating-stars.component.js.map +1 -1
- package/esm2022/lib/select/select.component.js +17 -17
- package/esm2022/lib/select/select.component.js.map +1 -1
- package/esm2022/lib/select/select.types.js +0 -1
- package/esm2022/lib/snackbar/snackbar.component.js +6 -6
- package/esm2022/lib/snackbar/snackbar.component.js.map +1 -1
- package/esm2022/lib/snackbar/snackbar.service.js +3 -3
- package/esm2022/lib/snackbar/snackbar.types.js +0 -1
- package/esm2022/lib/spinner/spinner.component.js +7 -7
- package/esm2022/lib/spinner/spinner.component.js.map +1 -1
- package/esm2022/lib/stat-card/stat-card.component.js +5 -5
- package/esm2022/lib/stat-card/stat-card.component.js.map +1 -1
- package/esm2022/lib/stat-card/stat-card.types.js +0 -1
- package/esm2022/lib/tab/c80-tab.component.js +6 -6
- package/esm2022/lib/tab/c80-tab.component.js.map +1 -1
- package/esm2022/lib/tab/c80-tab.types.js +0 -1
- package/esm2022/lib/tab/directives/c80-tab-item.directive.js +3 -3
- package/esm2022/lib/tab/directives/c80-tab-label.directive.js +3 -3
- package/esm2022/lib/table/table-column-visibility.service.js +3 -3
- package/esm2022/lib/table/table-crud-state.service.js +7 -7
- package/esm2022/lib/table/table-crud-state.service.js.map +1 -1
- package/esm2022/lib/table/table-data-converter.service.js +3 -3
- package/esm2022/lib/table/table-data-utils.service.js +3 -3
- package/esm2022/lib/table/table-dto-mapper.service.js +32 -35
- package/esm2022/lib/table/table-dto-mapper.service.js.map +1 -1
- package/esm2022/lib/table/table-pagination.service.js +10 -10
- package/esm2022/lib/table/table-pagination.service.js.map +1 -1
- package/esm2022/lib/table/table-selection.service.js +22 -22
- package/esm2022/lib/table/table-selection.service.js.map +1 -1
- package/esm2022/lib/table/table.component.js +46 -30
- package/esm2022/lib/table/table.component.js.map +1 -1
- package/esm2022/lib/table/table.types.js +0 -1
- package/esm2022/lib/table/table.utils.js +4 -3
- package/esm2022/lib/table/table.utils.js.map +1 -1
- package/index.d.ts +3 -0
- package/lib/header/header.component.d.ts +2 -1
- package/lib/icon/theme.service.d.ts +34 -0
- package/lib/info-message/index.d.ts +2 -0
- package/lib/info-message/info-message.component.d.ts +17 -0
- package/lib/info-message/info-message.types.d.ts +5 -0
- package/lib/legal-disclaimer/index.d.ts +1 -0
- package/lib/legal-disclaimer/legal-disclaimer.component.d.ts +15 -0
- package/lib/modal/modal.component.d.ts +5 -0
- package/lib/modal/modal.service.d.ts +11 -2
- package/lib/modal/modal.types.d.ts +1 -0
- package/lib/navigation-card/index.d.ts +2 -0
- package/lib/navigation-card/navigation-card.component.d.ts +10 -0
- package/lib/navigation-card/navigation-card.types.d.ts +7 -0
- package/lib/table/table-dto-mapper.service.d.ts +12 -5
- package/lib/table/table-selection.service.d.ts +1 -1
- package/lib/table/table.component.d.ts +2 -1
- package/lib/table/table.utils.d.ts +2 -1
- package/package.json +4 -3
|
@@ -5,38 +5,38 @@ let uniqueIdCounter = 0;
|
|
|
5
5
|
*
|
|
6
6
|
*/
|
|
7
7
|
export class SelectComponent {
|
|
8
|
-
label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
8
|
+
label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
9
9
|
/* v8 ignore next */
|
|
10
|
-
placeholder = input('Seleccionar', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
|
|
10
|
+
placeholder = input('Seleccionar', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
11
11
|
/* v8 ignore next */
|
|
12
|
-
value = input(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
12
|
+
value = input(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
13
13
|
/* v8 ignore next */
|
|
14
|
-
options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
|
|
14
|
+
options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
|
|
15
15
|
/* v8 ignore next */
|
|
16
|
-
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
16
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
17
17
|
/* v8 ignore next */
|
|
18
|
-
loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
|
|
18
|
+
loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
|
|
19
19
|
/* v8 ignore next */
|
|
20
|
-
emptyMessage = input('No hay opciones disponibles', ...(ngDevMode ? [{ debugName: "emptyMessage" }] : []));
|
|
20
|
+
emptyMessage = input('No hay opciones disponibles', ...(ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []));
|
|
21
21
|
/* v8 ignore next */
|
|
22
|
-
maxHeight = input('300px', ...(ngDevMode ? [{ debugName: "maxHeight" }] : []));
|
|
22
|
+
maxHeight = input('300px', ...(ngDevMode ? [{ debugName: "maxHeight" }] : /* istanbul ignore next */ []));
|
|
23
23
|
/* v8 ignore next */
|
|
24
|
-
filterable = input(false, ...(ngDevMode ? [{ debugName: "filterable" }] : []));
|
|
24
|
+
filterable = input(false, ...(ngDevMode ? [{ debugName: "filterable" }] : /* istanbul ignore next */ []));
|
|
25
25
|
valueChange = output();
|
|
26
26
|
opened = output();
|
|
27
27
|
/* v8 ignore next */
|
|
28
|
-
isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
|
|
28
|
+
isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
|
|
29
29
|
/* v8 ignore next */
|
|
30
|
-
searchTerm = signal('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : []));
|
|
30
|
+
searchTerm = signal('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []));
|
|
31
31
|
controlId = `c80-select-${++uniqueIdCounter}`;
|
|
32
|
-
searchInput = viewChild('searchInput', ...(ngDevMode ? [{ debugName: "searchInput" }] : []));
|
|
32
|
+
searchInput = viewChild('searchInput', ...(ngDevMode ? [{ debugName: "searchInput" }] : /* istanbul ignore next */ []));
|
|
33
33
|
filteredOptions = computed(() => {
|
|
34
34
|
const term = this.normalizeString(this.searchTerm());
|
|
35
35
|
if (!term || !this.filterable()) {
|
|
36
36
|
return this.options();
|
|
37
37
|
}
|
|
38
38
|
return this.options().filter(opt => opt.label.toLowerCase().includes(term));
|
|
39
|
-
}, ...(ngDevMode ? [{ debugName: "filteredOptions" }] : []));
|
|
39
|
+
}, ...(ngDevMode ? [{ debugName: "filteredOptions" }] : /* istanbul ignore next */ []));
|
|
40
40
|
normalizeString(str) {
|
|
41
41
|
return str.toLowerCase().trim();
|
|
42
42
|
}
|
|
@@ -110,11 +110,11 @@ export class SelectComponent {
|
|
|
110
110
|
clearSearch() {
|
|
111
111
|
this.searchTerm.set('');
|
|
112
112
|
}
|
|
113
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
114
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
113
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
114
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SelectComponent, isStandalone: true, selector: "c80-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", opened: "opened" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"k-select\" [class.k-select--disabled]=\"disabled()\" [class.k-select--open]=\"isOpen()\">\r\n <button type=\"button\" class=\"k-select__control\" [attr.id]=\"controlId\" [attr.aria-label]=\"label()\" [attr.aria-expanded]=\"isOpen()\" [disabled]=\"disabled() || loading()\" (click)=\"toggleDropdown()\" (keydown.enter)=\"toggleDropdown()\"\r\n (keydown.space)=\"$event.preventDefault(); toggleDropdown()\">\r\n <span class=\"k-select__value\" [class.k-select__value--placeholder]=\"value() === null\">\r\n @if (loading()) {\r\n Cargando...\r\n } @else {\r\n {{ getSelectedLabel() }}\r\n }\r\n </span>\r\n <span class=\"k-select__arrow\" [class.k-select__arrow--up]=\"isOpen()\">\u25BC</span>\r\n </button>\r\n\r\n @if (isOpen()) {\r\n <div class=\"k-select__backdrop\" tabindex=\"-1\" (click)=\"closeDropdown()\" (keydown.escape)=\"closeDropdown()\"></div>\r\n <div class=\"k-select__dropdown\" [style.max-height]=\"maxHeight()\">\r\n @if (filterable()) {\r\n <div class=\"k-select__search\">\r\n <input type=\"text\" class=\"k-select__search-input\" [value]=\"searchTerm()\" (input)=\"onSearchChange($any($event.target).value)\" placeholder=\"Buscar...\" (click)=\"$event.stopPropagation()\" (keydown.escape)=\"closeDropdown()\" #searchInput />\r\n </div>\r\n }\r\n\r\n <button type=\"button\" class=\"k-select__option\" (click)=\"selectNull()\" (keydown.enter)=\"selectNull()\">\r\n -- {{ placeholder() }} --\r\n </button>\r\n\r\n @if (loading()) {\r\n <button type=\"button\" class=\"k-select__option k-select__option--disabled\" disabled>\r\n Cargando...\r\n </button>\r\n } @else if (filteredOptions().length === 0) {\r\n <button type=\"button\" class=\"k-select__option k-select__option--disabled\" disabled>\r\n {{ searchTerm() ? 'No se encontraron resultados' : emptyMessage() }}\r\n </button>\r\n } @else {\r\n @for (option of filteredOptions(); track option.value) {\r\n <button type=\"button\" class=\"k-select__option\" [class.k-select__option--selected]=\"option.value === value()\" [class.k-select__option--disabled]=\"option.disabled\" [disabled]=\"option.disabled\" (click)=\"selectOption(option)\"\r\n (keydown.enter)=\"selectOption(option)\">\r\n {{ option.label }}\r\n </button>\r\n }\r\n }\r\n </div>\r\n }\r\n</div>", styles: [".k-select{position:relative;width:100%;font-family:inherit}.k-select--disabled{opacity:.6;pointer-events:none}.k-select__control{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;min-height:40px;padding:8px 12px;border:1px solid var(--color-border-default);border-radius:4px;background-color:var(--color-bg-primary);cursor:pointer;transition:all .2s;text-align:left;outline:none}.k-select__control:hover:not(:disabled){border-color:var(--color-border-medium)}.k-select__control:disabled{cursor:not-allowed;opacity:.6}.k-select__control:focus{outline:none}.k-select--open .k-select__control{border-color:var(--color-border-medium)}.k-select__value{flex:1;font-size:.875rem;color:var(--color-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.k-select__value--placeholder{color:var(--color-text-muted)}.k-select__arrow{font-size:.5rem;color:var(--color-text-secondary);transition:transform .2s;margin-left:6px;flex-shrink:0}.k-select__arrow--up{transform:rotate(180deg)}.k-select__backdrop{position:fixed;inset:0;z-index:999;background-color:transparent}.k-select__dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;overflow-y:auto;background-color:var(--color-bg-primary);border:1px solid var(--color-border-default);border-radius:4px;box-shadow:var(--shadow-lg);z-index:1000;animation:fadeIn .15s ease-out}.k-select__search{position:sticky;top:0;padding:8px;background-color:var(--color-bg-primary);border-bottom:1px solid var(--color-border-default);z-index:1}.k-select__search-input{width:100%;padding:6px 10px;font-size:.875rem;border:1px solid var(--color-border-default);border-radius:4px;outline:none;transition:border-color .2s;background-color:var(--color-bg-primary);color:var(--color-text-primary)}.k-select__search-input:focus{border-color:var(--color-icon-primary)}.k-select__search-input::placeholder{color:var(--color-text-muted)}.k-select__option{width:100%;padding:8px 12px;font-size:.875rem;color:var(--color-text-primary);cursor:pointer;transition:background-color .15s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:none;background-color:transparent;text-align:left}.k-select__option:hover:not(.k-select__option--disabled):not(:disabled){background-color:var(--color-bg-hover)}.k-select__option--selected{background-color:var(--color-bg-tertiary);font-weight:500}.k-select__option--selected:hover:not(:disabled){background-color:var(--color-bg-hover)}.k-select__option--disabled{color:var(--color-text-muted);cursor:default}.k-select__option:disabled{cursor:not-allowed;opacity:.6}@keyframes fadeIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
115
115
|
}
|
|
116
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
116
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SelectComponent, decorators: [{
|
|
117
117
|
type: Component,
|
|
118
|
-
args: [{ selector: 'c80-select', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"k-select\" [class.k-select--disabled]=\"disabled()\" [class.k-select--open]=\"isOpen()\">\n <button type=\"button\" class=\"k-select__control\" [attr.id]=\"controlId\" [attr.aria-label]=\"label()\" [attr.aria-expanded]=\"isOpen()\" [disabled]=\"disabled() || loading()\" (click)=\"toggleDropdown()\" (keydown.enter)=\"toggleDropdown()\"\n (keydown.space)=\"$event.preventDefault(); toggleDropdown()\">\n <span class=\"k-select__value\" [class.k-select__value--placeholder]=\"value() === null\">\n @if (loading()) {\n Cargando...\n } @else {\n {{ getSelectedLabel() }}\n }\n </span>\n <span class=\"k-select__arrow\" [class.k-select__arrow--up]=\"isOpen()\">\u25BC</span>\n </button>\n\n @if (isOpen()) {\n <div class=\"k-select__backdrop\" tabindex=\"-1\" (click)=\"closeDropdown()\" (keydown.escape)=\"closeDropdown()\"></div>\n
|
|
118
|
+
args: [{ selector: 'c80-select', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"k-select\" [class.k-select--disabled]=\"disabled()\" [class.k-select--open]=\"isOpen()\">\r\n <button type=\"button\" class=\"k-select__control\" [attr.id]=\"controlId\" [attr.aria-label]=\"label()\" [attr.aria-expanded]=\"isOpen()\" [disabled]=\"disabled() || loading()\" (click)=\"toggleDropdown()\" (keydown.enter)=\"toggleDropdown()\"\r\n (keydown.space)=\"$event.preventDefault(); toggleDropdown()\">\r\n <span class=\"k-select__value\" [class.k-select__value--placeholder]=\"value() === null\">\r\n @if (loading()) {\r\n Cargando...\r\n } @else {\r\n {{ getSelectedLabel() }}\r\n }\r\n </span>\r\n <span class=\"k-select__arrow\" [class.k-select__arrow--up]=\"isOpen()\">\u25BC</span>\r\n </button>\r\n\r\n @if (isOpen()) {\r\n <div class=\"k-select__backdrop\" tabindex=\"-1\" (click)=\"closeDropdown()\" (keydown.escape)=\"closeDropdown()\"></div>\r\n <div class=\"k-select__dropdown\" [style.max-height]=\"maxHeight()\">\r\n @if (filterable()) {\r\n <div class=\"k-select__search\">\r\n <input type=\"text\" class=\"k-select__search-input\" [value]=\"searchTerm()\" (input)=\"onSearchChange($any($event.target).value)\" placeholder=\"Buscar...\" (click)=\"$event.stopPropagation()\" (keydown.escape)=\"closeDropdown()\" #searchInput />\r\n </div>\r\n }\r\n\r\n <button type=\"button\" class=\"k-select__option\" (click)=\"selectNull()\" (keydown.enter)=\"selectNull()\">\r\n -- {{ placeholder() }} --\r\n </button>\r\n\r\n @if (loading()) {\r\n <button type=\"button\" class=\"k-select__option k-select__option--disabled\" disabled>\r\n Cargando...\r\n </button>\r\n } @else if (filteredOptions().length === 0) {\r\n <button type=\"button\" class=\"k-select__option k-select__option--disabled\" disabled>\r\n {{ searchTerm() ? 'No se encontraron resultados' : emptyMessage() }}\r\n </button>\r\n } @else {\r\n @for (option of filteredOptions(); track option.value) {\r\n <button type=\"button\" class=\"k-select__option\" [class.k-select__option--selected]=\"option.value === value()\" [class.k-select__option--disabled]=\"option.disabled\" [disabled]=\"option.disabled\" (click)=\"selectOption(option)\"\r\n (keydown.enter)=\"selectOption(option)\">\r\n {{ option.label }}\r\n </button>\r\n }\r\n }\r\n </div>\r\n }\r\n</div>", styles: [".k-select{position:relative;width:100%;font-family:inherit}.k-select--disabled{opacity:.6;pointer-events:none}.k-select__control{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;min-height:40px;padding:8px 12px;border:1px solid var(--color-border-default);border-radius:4px;background-color:var(--color-bg-primary);cursor:pointer;transition:all .2s;text-align:left;outline:none}.k-select__control:hover:not(:disabled){border-color:var(--color-border-medium)}.k-select__control:disabled{cursor:not-allowed;opacity:.6}.k-select__control:focus{outline:none}.k-select--open .k-select__control{border-color:var(--color-border-medium)}.k-select__value{flex:1;font-size:.875rem;color:var(--color-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.k-select__value--placeholder{color:var(--color-text-muted)}.k-select__arrow{font-size:.5rem;color:var(--color-text-secondary);transition:transform .2s;margin-left:6px;flex-shrink:0}.k-select__arrow--up{transform:rotate(180deg)}.k-select__backdrop{position:fixed;inset:0;z-index:999;background-color:transparent}.k-select__dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;overflow-y:auto;background-color:var(--color-bg-primary);border:1px solid var(--color-border-default);border-radius:4px;box-shadow:var(--shadow-lg);z-index:1000;animation:fadeIn .15s ease-out}.k-select__search{position:sticky;top:0;padding:8px;background-color:var(--color-bg-primary);border-bottom:1px solid var(--color-border-default);z-index:1}.k-select__search-input{width:100%;padding:6px 10px;font-size:.875rem;border:1px solid var(--color-border-default);border-radius:4px;outline:none;transition:border-color .2s;background-color:var(--color-bg-primary);color:var(--color-text-primary)}.k-select__search-input:focus{border-color:var(--color-icon-primary)}.k-select__search-input::placeholder{color:var(--color-text-muted)}.k-select__option{width:100%;padding:8px 12px;font-size:.875rem;color:var(--color-text-primary);cursor:pointer;transition:background-color .15s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:none;background-color:transparent;text-align:left}.k-select__option:hover:not(.k-select__option--disabled):not(:disabled){background-color:var(--color-bg-hover)}.k-select__option--selected{background-color:var(--color-bg-tertiary);font-weight:500}.k-select__option--selected:hover:not(:disabled){background-color:var(--color-bg-hover)}.k-select__option--disabled{color:var(--color-text-muted);cursor:default}.k-select__option:disabled{cursor:not-allowed;opacity:.6}@keyframes fadeIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}\n"] }]
|
|
119
119
|
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], filterable: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterable", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], searchInput: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }] } });
|
|
120
120
|
//# sourceMappingURL=select.component.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select.component.js","sourceRoot":"","sources":["../../../../../libs/ui/src/lib/select/select.component.ts","../../../../../libs/ui/src/lib/select/select.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAmB,uBAAuB,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;;AAGhI,IAAI,eAAe,GAAG,CAAC,CAAC;AAExB;;GAEG;
|
|
1
|
+
{"version":3,"file":"select.component.js","sourceRoot":"","sources":["../../../../../libs/ui/src/lib/select/select.component.ts","../../../../../libs/ui/src/lib/select/select.component.html"],"names":[],"mappings":"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","sourcesContent":["import { type ElementRef, ChangeDetectionStrategy, Component, computed, input, output, signal, viewChild } from '@angular/core';\r\nimport type { SelectOption } from './select.types';\r\n\r\nlet uniqueIdCounter = 0;\r\n\r\n/**\r\n *\r\n */\r\n@Component({\r\n selector: 'c80-select',\r\n standalone: true,\r\n imports: [],\r\n templateUrl: './select.component.html',\r\n styleUrl: './select.component.scss',\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class SelectComponent<T = string> {\r\n readonly label = input.required<string>();\r\n /* v8 ignore next */\r\n readonly placeholder = input<string>('Seleccionar');\r\n /* v8 ignore next */\r\n readonly value = input<T | null>(null);\r\n /* v8 ignore next */\r\n readonly options = input<SelectOption<T>[]>([]);\r\n /* v8 ignore next */\r\n readonly disabled = input<boolean>(false);\r\n /* v8 ignore next */\r\n readonly loading = input<boolean>(false);\r\n /* v8 ignore next */\r\n readonly emptyMessage = input<string>('No hay opciones disponibles');\r\n /* v8 ignore next */\r\n readonly maxHeight = input<string>('300px');\r\n /* v8 ignore next */\r\n readonly filterable = input<boolean>(false);\r\n\r\n readonly valueChange = output<T | null>();\r\n readonly opened = output<void>();\r\n\r\n /* v8 ignore next */\r\n readonly isOpen = signal(false);\r\n /* v8 ignore next */\r\n readonly searchTerm = signal<string>('');\r\n readonly controlId = `c80-select-${++uniqueIdCounter}`;\r\n readonly searchInput = viewChild<ElementRef<HTMLInputElement>>('searchInput');\r\n\r\n readonly filteredOptions = computed(() => {\r\n const term = this.normalizeString(this.searchTerm());\r\n if (!term || !this.filterable()) {\r\n return this.options();\r\n }\r\n return this.options().filter(opt =>\r\n opt.label.toLowerCase().includes(term)\r\n );\r\n });\r\n\r\n normalizeString(str: string): string {\r\n return str.toLowerCase().trim();\r\n }\r\n\r\n /**\r\n *\r\n */\r\n toggleDropdown(): void {\r\n if (this.disabled() || this.loading()) {\r\n return;\r\n }\r\n\r\n const wasOpen = this.isOpen();\r\n this.isOpen.set(!wasOpen);\r\n\r\n if (wasOpen) {\r\n this.clearSearch();\r\n } else {\r\n this.opened.emit();\r\n if (this.filterable()) {\r\n /* v8 ignore next 2 */\r\n setTimeout(() => this.searchInput()?.nativeElement.focus(), 0);\r\n }\r\n }\r\n }\r\n\r\n /**\r\n *\r\n * @param option\r\n */\r\n selectOption(option: SelectOption<T>): void {\r\n if (option.disabled) {\r\n return;\r\n }\r\n\r\n this.valueChange.emit(option.value);\r\n this.isOpen.set(false);\r\n }\r\n\r\n /**\r\n *\r\n */\r\n selectNull(): void {\r\n this.valueChange.emit(null);\r\n this.isOpen.set(false);\r\n }\r\n\r\n /**\r\n *\r\n * @returns Etiqueta del valor seleccionado o placeholder\r\n */\r\n getSelectedLabel(): string {\r\n const currentValue = this.value();\r\n if (currentValue === null || currentValue === undefined) {\r\n return this.placeholder();\r\n }\r\n\r\n const selected = this.options().find(opt => opt.value === currentValue);\r\n return selected?.label ?? this.placeholder();\r\n }\r\n\r\n /**\r\n *\r\n */\r\n closeDropdown(): void {\r\n this.isOpen.set(false);\r\n this.clearSearch();\r\n }\r\n\r\n /**\r\n *\r\n * @param term\r\n */\r\n onSearchChange(term: string): void {\r\n this.searchTerm.set(term);\r\n }\r\n\r\n /**\r\n *\r\n */\r\n clearSearch(): void {\r\n this.searchTerm.set('');\r\n }\r\n}\r\n","<div class=\"k-select\" [class.k-select--disabled]=\"disabled()\" [class.k-select--open]=\"isOpen()\">\r\n <button type=\"button\" class=\"k-select__control\" [attr.id]=\"controlId\" [attr.aria-label]=\"label()\" [attr.aria-expanded]=\"isOpen()\" [disabled]=\"disabled() || loading()\" (click)=\"toggleDropdown()\" (keydown.enter)=\"toggleDropdown()\"\r\n (keydown.space)=\"$event.preventDefault(); toggleDropdown()\">\r\n <span class=\"k-select__value\" [class.k-select__value--placeholder]=\"value() === null\">\r\n @if (loading()) {\r\n Cargando...\r\n } @else {\r\n {{ getSelectedLabel() }}\r\n }\r\n </span>\r\n <span class=\"k-select__arrow\" [class.k-select__arrow--up]=\"isOpen()\">▼</span>\r\n </button>\r\n\r\n @if (isOpen()) {\r\n <div class=\"k-select__backdrop\" tabindex=\"-1\" (click)=\"closeDropdown()\" (keydown.escape)=\"closeDropdown()\"></div>\r\n <div class=\"k-select__dropdown\" [style.max-height]=\"maxHeight()\">\r\n @if (filterable()) {\r\n <div class=\"k-select__search\">\r\n <input type=\"text\" class=\"k-select__search-input\" [value]=\"searchTerm()\" (input)=\"onSearchChange($any($event.target).value)\" placeholder=\"Buscar...\" (click)=\"$event.stopPropagation()\" (keydown.escape)=\"closeDropdown()\" #searchInput />\r\n </div>\r\n }\r\n\r\n <button type=\"button\" class=\"k-select__option\" (click)=\"selectNull()\" (keydown.enter)=\"selectNull()\">\r\n -- {{ placeholder() }} --\r\n </button>\r\n\r\n @if (loading()) {\r\n <button type=\"button\" class=\"k-select__option k-select__option--disabled\" disabled>\r\n Cargando...\r\n </button>\r\n } @else if (filteredOptions().length === 0) {\r\n <button type=\"button\" class=\"k-select__option k-select__option--disabled\" disabled>\r\n {{ searchTerm() ? 'No se encontraron resultados' : emptyMessage() }}\r\n </button>\r\n } @else {\r\n @for (option of filteredOptions(); track option.value) {\r\n <button type=\"button\" class=\"k-select__option\" [class.k-select__option--selected]=\"option.value === value()\" [class.k-select__option--disabled]=\"option.disabled\" [disabled]=\"option.disabled\" (click)=\"selectOption(option)\"\r\n (keydown.enter)=\"selectOption(option)\">\r\n {{ option.label }}\r\n </button>\r\n }\r\n }\r\n </div>\r\n }\r\n</div>"]}
|
|
@@ -8,11 +8,11 @@ export class SnackbarComponent {
|
|
|
8
8
|
renderer = inject(Renderer2);
|
|
9
9
|
cdr = inject(ChangeDetectorRef);
|
|
10
10
|
/* v8 ignore next */
|
|
11
|
-
data = signal(null, ...(ngDevMode ? [{ debugName: "data" }] : []));
|
|
11
|
+
data = signal(null, ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
|
|
12
12
|
/* v8 ignore next */
|
|
13
|
-
visible = signal(false, ...(ngDevMode ? [{ debugName: "visible" }] : []));
|
|
13
|
+
visible = signal(false, ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
|
|
14
14
|
timerId;
|
|
15
|
-
panelClasses = computed(() => this.data()?.config.panelClass.join(' ') ?? '', ...(ngDevMode ? [{ debugName: "panelClasses" }] : []));
|
|
15
|
+
panelClasses = computed(() => this.data()?.config.panelClass.join(' ') ?? '', ...(ngDevMode ? [{ debugName: "panelClasses" }] : /* istanbul ignore next */ []));
|
|
16
16
|
/**
|
|
17
17
|
*
|
|
18
18
|
* @param data
|
|
@@ -66,10 +66,10 @@ export class SnackbarComponent {
|
|
|
66
66
|
this.renderer.setStyle(host, horizontalPosition, '1rem');
|
|
67
67
|
}
|
|
68
68
|
}
|
|
69
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
70
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
69
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SnackbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
70
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SnackbarComponent, isStandalone: true, selector: "c80-snackbar", ngImport: i0, template: "@if (visible() && data(); as snackData) {\n<div class=\"snackbar\" [class]=\"panelClasses()\">\n <span class=\"snackbar-message\">{{ snackData.message }}</span>\n @if (snackData.action) {\n <button class=\"snackbar-action\" type=\"button\" (click)=\"dismiss()\">\n {{ snackData.action }}\n </button>\n }\n</div>\n}", styles: [":host{position:fixed;z-index:9999;pointer-events:none}.snackbar{display:flex;align-items:center;gap:.75rem;padding:1rem 1.25rem;background:var(--color-bg-secondary);color:var(--color-text-primary);border:1px solid var(--color-border-default);border-radius:.5rem;box-shadow:var(--shadow-lg);pointer-events:auto;animation:slideIn .3s ease-out;min-width:20rem;max-width:35rem}.snackbar-message{flex:1;font-size:.875rem;line-height:1.5;font-weight:500}.snackbar-action{background:transparent;border:1px solid var(--color-border-default);color:var(--color-text-secondary);cursor:pointer;font-size:.75rem;font-weight:600;text-transform:uppercase;padding:.375rem .75rem;border-radius:.375rem;transition:all .2s ease;white-space:nowrap}.snackbar-action:hover{background-color:var(--color-bg-hover);border-color:var(--color-border-medium);color:var(--color-text-primary)}.snackbar-action:active{transform:scale(.98)}.notification-success{background:var(--color-bg-success-light);border-color:var(--color-border-success);color:var(--color-text-success)}.notification-success .snackbar-message{color:var(--color-text-success)}.notification-success .snackbar-action{color:var(--color-text-success);border-color:var(--color-border-success)}.notification-success .snackbar-action:hover{background-color:var(--color-bg-success);border-color:var(--color-border-success)}.notification-error{background:var(--color-bg-danger-light);border-color:var(--color-border-danger);color:var(--color-text-danger)}.notification-error .snackbar-message{color:var(--color-text-danger)}.notification-error .snackbar-action{color:var(--color-text-danger);border-color:var(--color-border-danger)}.notification-error .snackbar-action:hover{background-color:var(--color-bg-danger);border-color:var(--color-border-danger)}@keyframes slideIn{0%{opacity:0;transform:translateY(-1rem)}to{opacity:1;transform:translateY(0)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
71
71
|
}
|
|
72
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
72
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SnackbarComponent, decorators: [{
|
|
73
73
|
type: Component,
|
|
74
74
|
args: [{ selector: 'c80-snackbar', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (visible() && data(); as snackData) {\n<div class=\"snackbar\" [class]=\"panelClasses()\">\n <span class=\"snackbar-message\">{{ snackData.message }}</span>\n @if (snackData.action) {\n <button class=\"snackbar-action\" type=\"button\" (click)=\"dismiss()\">\n {{ snackData.action }}\n </button>\n }\n</div>\n}", styles: [":host{position:fixed;z-index:9999;pointer-events:none}.snackbar{display:flex;align-items:center;gap:.75rem;padding:1rem 1.25rem;background:var(--color-bg-secondary);color:var(--color-text-primary);border:1px solid var(--color-border-default);border-radius:.5rem;box-shadow:var(--shadow-lg);pointer-events:auto;animation:slideIn .3s ease-out;min-width:20rem;max-width:35rem}.snackbar-message{flex:1;font-size:.875rem;line-height:1.5;font-weight:500}.snackbar-action{background:transparent;border:1px solid var(--color-border-default);color:var(--color-text-secondary);cursor:pointer;font-size:.75rem;font-weight:600;text-transform:uppercase;padding:.375rem .75rem;border-radius:.375rem;transition:all .2s ease;white-space:nowrap}.snackbar-action:hover{background-color:var(--color-bg-hover);border-color:var(--color-border-medium);color:var(--color-text-primary)}.snackbar-action:active{transform:scale(.98)}.notification-success{background:var(--color-bg-success-light);border-color:var(--color-border-success);color:var(--color-text-success)}.notification-success .snackbar-message{color:var(--color-text-success)}.notification-success .snackbar-action{color:var(--color-text-success);border-color:var(--color-border-success)}.notification-success .snackbar-action:hover{background-color:var(--color-bg-success);border-color:var(--color-border-success)}.notification-error{background:var(--color-bg-danger-light);border-color:var(--color-border-danger);color:var(--color-text-danger)}.notification-error .snackbar-message{color:var(--color-text-danger)}.notification-error .snackbar-action{color:var(--color-text-danger);border-color:var(--color-border-danger)}.notification-error .snackbar-action:hover{background-color:var(--color-bg-danger);border-color:var(--color-border-danger)}@keyframes slideIn{0%{opacity:0;transform:translateY(-1rem)}to{opacity:1;transform:translateY(0)}}\n"] }]
|
|
75
75
|
}] });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"snackbar.component.js","sourceRoot":"","sources":["../../../../../libs/ui/src/lib/snackbar/snackbar.component.ts","../../../../../libs/ui/src/lib/snackbar/snackbar.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,SAAS,EAAE,uBAAuB,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;;AAGvI;;GAEG;
|
|
1
|
+
{"version":3,"file":"snackbar.component.js","sourceRoot":"","sources":["../../../../../libs/ui/src/lib/snackbar/snackbar.component.ts","../../../../../libs/ui/src/lib/snackbar/snackbar.component.html"],"names":[],"mappings":"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","sourcesContent":["import { Component, computed, signal, ElementRef, inject, Renderer2, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';\r\nimport type { SnackbarData } from './snackbar.types';\r\n\r\n/**\r\n *\r\n */\r\n@Component({\r\n selector: 'c80-snackbar',\r\n standalone: true,\r\n templateUrl: './snackbar.component.html',\r\n styleUrl: './snackbar.component.scss',\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class SnackbarComponent {\r\n private readonly elementRef = inject(ElementRef);\r\n private readonly renderer = inject(Renderer2);\r\n private readonly cdr = inject(ChangeDetectorRef);\r\n\r\n /* v8 ignore next */\r\n readonly data = signal<SnackbarData | null>(null);\r\n /* v8 ignore next */\r\n readonly visible = signal(false);\r\n\r\n private timerId?: ReturnType<typeof setTimeout>;\r\n\r\n readonly panelClasses = computed(() => this.data()?.config.panelClass.join(' ') ?? '');\r\n\r\n /**\r\n *\r\n * @param data\r\n */\r\n show(data: SnackbarData): void {\r\n this.clearTimer();\r\n this.data.set(data);\r\n this.applyPosition(data.config);\r\n this.visible.set(true);\r\n\r\n // Marcar para revisión de cambios con OnPush\r\n this.cdr.markForCheck();\r\n\r\n if (data.config.duration > 0) {\r\n this.timerId = setTimeout(() => this.dismiss(), data.config.duration);\r\n }\r\n }\r\n\r\n /**\r\n *\r\n */\r\n dismiss(): void {\r\n this.visible.set(false);\r\n this.clearTimer();\r\n\r\n // Marcar para revisión de cambios con OnPush\r\n this.cdr.markForCheck();\r\n }\r\n\r\n /**\r\n *\r\n */\r\n private clearTimer(): void {\r\n if (this.timerId !== undefined) {\r\n clearTimeout(this.timerId);\r\n this.timerId = undefined;\r\n }\r\n }\r\n\r\n /**\r\n *\r\n * @param config\r\n */\r\n private applyPosition(config: SnackbarData['config']): void {\r\n const host = this.elementRef.nativeElement;\r\n const { verticalPosition, horizontalPosition } = config;\r\n\r\n const positions = ['top', 'bottom', 'left', 'right', 'transform'];\r\n for (const pos of positions) {\r\n this.renderer.removeStyle(host, pos);\r\n }\r\n\r\n this.renderer.setStyle(host, verticalPosition, '1rem');\r\n\r\n if (horizontalPosition === 'center') {\r\n this.renderer.setStyle(host, 'left', '50%');\r\n this.renderer.setStyle(host, 'transform', 'translateX(-50%)');\r\n } else {\r\n this.renderer.setStyle(host, horizontalPosition, '1rem');\r\n }\r\n }\r\n}\r\n","@if (visible() && data(); as snackData) {\n<div class=\"snackbar\" [class]=\"panelClasses()\">\n <span class=\"snackbar-message\">{{ snackData.message }}</span>\n @if (snackData.action) {\n <button class=\"snackbar-action\" type=\"button\" (click)=\"dismiss()\">\n {{ snackData.action }}\n </button>\n }\n</div>\n}"]}
|
|
@@ -40,10 +40,10 @@ export class SnackbarService {
|
|
|
40
40
|
}
|
|
41
41
|
this.componentRef.instance.show(data);
|
|
42
42
|
}
|
|
43
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
44
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
43
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SnackbarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
44
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SnackbarService, providedIn: 'root' });
|
|
45
45
|
}
|
|
46
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
46
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SnackbarService, decorators: [{
|
|
47
47
|
type: Injectable,
|
|
48
48
|
args: [{
|
|
49
49
|
providedIn: 'root',
|
|
@@ -4,14 +4,14 @@ import * as i0 from "@angular/core";
|
|
|
4
4
|
*
|
|
5
5
|
*/
|
|
6
6
|
export class SpinnerComponent {
|
|
7
|
-
size = input(40, ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
8
|
-
borderWidth = input(3, ...(ngDevMode ? [{ debugName: "borderWidth" }] : []));
|
|
9
|
-
color = input('var(--color-primary)', ...(ngDevMode ? [{ debugName: "color" }] : []));
|
|
10
|
-
message = input('', ...(ngDevMode ? [{ debugName: "message" }] : []));
|
|
11
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
12
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
7
|
+
size = input(40, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
8
|
+
borderWidth = input(3, ...(ngDevMode ? [{ debugName: "borderWidth" }] : /* istanbul ignore next */ []));
|
|
9
|
+
color = input('var(--color-primary)', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
|
|
10
|
+
message = input('', ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
|
|
11
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
12
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SpinnerComponent, isStandalone: true, selector: "c80-spinner", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, borderWidth: { classPropertyName: "borderWidth", publicName: "borderWidth", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--size.px": "size()", "style.--border-width.px": "borderWidth()", "style.--border-top-color": "color()" } }, ngImport: i0, template: "<div class=\"spinner\">\n <div class=\"spinner__circle\"></div>\n @if (message()) {\n <p class=\"spinner__message\">{{ message() }}</p>\n }\n</div>", styles: [".spinner{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--spacing-md)}.spinner__circle{border:var(--border-width, 3px) solid var(--color-border);border-top-color:var(--border-top-color, var(--color-primary));width:var(--size, 40px);height:var(--size, 40px);border-radius:50%;animation:spin .8s linear infinite}.spinner__message{margin:0;color:var(--color-text-secondary);font-size:.875rem;text-align:center}@keyframes spin{to{transform:rotate(360deg)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
13
13
|
}
|
|
14
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
14
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SpinnerComponent, decorators: [{
|
|
15
15
|
type: Component,
|
|
16
16
|
args: [{ selector: 'c80-spinner', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
17
17
|
'[style.--size.px]': 'size()',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"spinner.component.js","sourceRoot":"","sources":["../../../../../libs/ui/src/lib/spinner/spinner.component.ts","../../../../../libs/ui/src/lib/spinner/spinner.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;;AAE1E;;GAEG;
|
|
1
|
+
{"version":3,"file":"spinner.component.js","sourceRoot":"","sources":["../../../../../libs/ui/src/lib/spinner/spinner.component.ts","../../../../../libs/ui/src/lib/spinner/spinner.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;;AAE1E;;GAEG;AAaH,MAAM,OAAO,gBAAgB;IAChB,IAAI,GAAG,KAAK,CAAS,EAAE,2EAAC,CAAC;IACzB,WAAW,GAAG,KAAK,CAAS,CAAC,kFAAC,CAAC;IAC/B,KAAK,GAAG,KAAK,CAAS,sBAAsB,4EAAC,CAAC;IAC9C,OAAO,GAAG,KAAK,CAAS,EAAE,8EAAC,CAAC;wGAJ5B,gBAAgB;4FAAhB,gBAAgB,ktBCjB7B,iKAKM;;4FDYO,gBAAgB;kBAZ5B,SAAS;+BACI,aAAa,WACd,EAAE,mBAGM,uBAAuB,CAAC,MAAM,QACzC;wBACF,mBAAmB,EAAE,QAAQ;wBAC7B,2BAA2B,EAAE,eAAe;wBAC5C,4BAA4B,EAAE,SAAS;qBAC1C","sourcesContent":["import { ChangeDetectionStrategy, Component, input } from '@angular/core';\r\n\r\n/**\r\n *\r\n */\r\n@Component({\r\n selector: 'c80-spinner',\r\n imports: [],\r\n templateUrl: './spinner.component.html',\r\n styleUrl: './spinner.component.scss',\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n host: {\r\n '[style.--size.px]': 'size()',\r\n '[style.--border-width.px]': 'borderWidth()',\r\n '[style.--border-top-color]': 'color()'\r\n }\r\n})\r\nexport class SpinnerComponent {\r\n readonly size = input<number>(40);\r\n readonly borderWidth = input<number>(3);\r\n readonly color = input<string>('var(--color-primary)');\r\n readonly message = input<string>('');\r\n}\r\n","<div class=\"spinner\">\n <div class=\"spinner__circle\"></div>\n @if (message()) {\n <p class=\"spinner__message\">{{ message() }}</p>\n }\n</div>"]}
|
|
@@ -6,12 +6,12 @@ import * as i0 from "@angular/core";
|
|
|
6
6
|
*/
|
|
7
7
|
export class StatCardComponent {
|
|
8
8
|
/* v8 ignore next */
|
|
9
|
-
cards = input([], ...(ngDevMode ? [{ debugName: "cards" }] : []));
|
|
10
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
11
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
9
|
+
cards = input([], ...(ngDevMode ? [{ debugName: "cards" }] : /* istanbul ignore next */ []));
|
|
10
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StatCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: StatCardComponent, isStandalone: true, selector: "c80-stat-card", inputs: { cards: { classPropertyName: "cards", publicName: "cards", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"stats-section py-4\">\r\n @for (card of cards(); track card.text) {\r\n <div class=\"stat-card\" [style.border-left-color]=\"card.color\">\r\n <div class=\"stat-card-content\">\r\n <div class=\"stat-content\">\r\n <c80-icon [icon]=\"card.icon\" [color]=\"'secondary'\" [size]=\"1.1\" />\r\n <div class=\"stat-info\">\r\n <div class=\"stat-number\">{{ card.count }}</div>\r\n <div class=\"stat-label\">{{ card.text }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n</div>", styles: [".stats-section{display:flex;flex-direction:row;flex-wrap:wrap;gap:16px}.stats-section .stat-card{flex:1;min-width:200px;box-shadow:var(--shadow-sm);transition:box-shadow .3s ease;border-left:4px solid transparent;background:var(--color-bg-primary);color:var(--color-text-primary);border-radius:4px;display:block;position:relative;padding:0;overflow:hidden}.stats-section .stat-card:hover{box-shadow:var(--shadow-md)}.stats-section .stat-card-content{display:block;padding:16px}.stat-content{display:flex;align-items:center;gap:12px}.stat-info .stat-number{font-size:24px;font-weight:700;line-height:1;margin-bottom:4px;color:var(--color-text-secondary)}.stat-info .stat-label{font-size:12px;color:var(--color-text-tertiary);text-transform:uppercase;letter-spacing:.5px}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "c80-icon", inputs: ["icon", "color", "customColor", "disabled", "size", "button", "border", "type", "textLeft", "textRight", "dark"], outputs: ["iconClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
12
12
|
}
|
|
13
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
13
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StatCardComponent, decorators: [{
|
|
14
14
|
type: Component,
|
|
15
|
-
args: [{ selector: 'c80-stat-card', standalone: true, imports: [IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"stats-section py-4\">\n @for (card of cards(); track card.text) {\n
|
|
15
|
+
args: [{ selector: 'c80-stat-card', standalone: true, imports: [IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"stats-section py-4\">\r\n @for (card of cards(); track card.text) {\r\n <div class=\"stat-card\" [style.border-left-color]=\"card.color\">\r\n <div class=\"stat-card-content\">\r\n <div class=\"stat-content\">\r\n <c80-icon [icon]=\"card.icon\" [color]=\"'secondary'\" [size]=\"1.1\" />\r\n <div class=\"stat-info\">\r\n <div class=\"stat-number\">{{ card.count }}</div>\r\n <div class=\"stat-label\">{{ card.text }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n</div>", styles: [".stats-section{display:flex;flex-direction:row;flex-wrap:wrap;gap:16px}.stats-section .stat-card{flex:1;min-width:200px;box-shadow:var(--shadow-sm);transition:box-shadow .3s ease;border-left:4px solid transparent;background:var(--color-bg-primary);color:var(--color-text-primary);border-radius:4px;display:block;position:relative;padding:0;overflow:hidden}.stats-section .stat-card:hover{box-shadow:var(--shadow-md)}.stats-section .stat-card-content{display:block;padding:16px}.stat-content{display:flex;align-items:center;gap:12px}.stat-info .stat-number{font-size:24px;font-weight:700;line-height:1;margin-bottom:4px;color:var(--color-text-secondary)}.stat-info .stat-label{font-size:12px;color:var(--color-text-tertiary);text-transform:uppercase;letter-spacing:.5px}\n"] }]
|
|
16
16
|
}], propDecorators: { cards: [{ type: i0.Input, args: [{ isSignal: true, alias: "cards", required: false }] }] } });
|
|
17
17
|
//# sourceMappingURL=stat-card.component.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stat-card.component.js","sourceRoot":"","sources":["../../../../../libs/ui/src/lib/stat-card/stat-card.component.ts","../../../../../libs/ui/src/lib/stat-card/stat-card.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAC1E,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;;AAGxC;;GAEG;
|
|
1
|
+
{"version":3,"file":"stat-card.component.js","sourceRoot":"","sources":["../../../../../libs/ui/src/lib/stat-card/stat-card.component.ts","../../../../../libs/ui/src/lib/stat-card/stat-card.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAC1E,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;;AAGxC;;GAEG;AASH,MAAM,OAAO,iBAAiB;IAC5B,oBAAoB;IACX,KAAK,GAAG,KAAK,CAAY,EAAE,4EAAC,CAAC;wGAF3B,iBAAiB;4FAAjB,iBAAiB,6MCf9B,4iBAcM,6zBDJM,aAAa;;4FAKZ,iBAAiB;kBAR7B,SAAS;+BACE,eAAe,cACb,IAAI,WACP,CAAC,aAAa,CAAC,mBAGP,uBAAuB,CAAC,MAAM","sourcesContent":["import { Component, input, ChangeDetectionStrategy } from '@angular/core';\r\nimport { IconComponent } from '../icon';\r\nimport type { CardDef } from './stat-card.types';\r\n\r\n/**\r\n *\r\n */\r\n@Component({\r\n selector: 'c80-stat-card',\r\n standalone: true,\r\n imports: [IconComponent],\r\n templateUrl: './stat-card.component.html',\r\n styleUrls: ['./stat-card.component.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class StatCardComponent {\r\n /* v8 ignore next */\r\n readonly cards = input<CardDef[]>([]);\r\n}\r\n","<div class=\"stats-section py-4\">\r\n @for (card of cards(); track card.text) {\r\n <div class=\"stat-card\" [style.border-left-color]=\"card.color\">\r\n <div class=\"stat-card-content\">\r\n <div class=\"stat-content\">\r\n <c80-icon [icon]=\"card.icon\" [color]=\"'secondary'\" [size]=\"1.1\" />\r\n <div class=\"stat-info\">\r\n <div class=\"stat-number\">{{ card.count }}</div>\r\n <div class=\"stat-label\">{{ card.text }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n</div>"]}
|
|
@@ -7,10 +7,10 @@ import * as i0 from "@angular/core";
|
|
|
7
7
|
*
|
|
8
8
|
*/
|
|
9
9
|
export class TabComponent {
|
|
10
|
-
tabs = contentChildren(C80TabItemDirective, ...(ngDevMode ? [{ debugName: "tabs" }] : []));
|
|
11
|
-
labels = contentChildren(C80TabLabelDirective, ...(ngDevMode ? [{ debugName: "labels" }] : []));
|
|
10
|
+
tabs = contentChildren(C80TabItemDirective, ...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
|
|
11
|
+
labels = contentChildren(C80TabLabelDirective, ...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
|
|
12
12
|
/* v8 ignore next */
|
|
13
|
-
selectedIndex = model(0, ...(ngDevMode ? [{ debugName: "selectedIndex" }] : []));
|
|
13
|
+
selectedIndex = model(0, ...(ngDevMode ? [{ debugName: "selectedIndex" }] : /* istanbul ignore next */ []));
|
|
14
14
|
selectedIndexChange = output();
|
|
15
15
|
/**
|
|
16
16
|
*
|
|
@@ -40,10 +40,10 @@ export class TabComponent {
|
|
|
40
40
|
const label = labelList[index];
|
|
41
41
|
return label?.template ?? null;
|
|
42
42
|
}
|
|
43
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
44
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
43
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
44
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TabComponent, isStandalone: true, selector: "c80-tab", inputs: { selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIndex: "selectedIndexChange", selectedIndexChange: "selectedIndexChange" }, queries: [{ propertyName: "tabs", predicate: C80TabItemDirective, isSignal: true }, { propertyName: "labels", predicate: C80TabLabelDirective, isSignal: true }], ngImport: i0, template: "<div class=\"c80-tab-container\">\n <div class=\"c80-tab-header\">\n <div class=\"c80-tab-labels\">\n @for (tab of tabs(); track $index) {\n <button type=\"button\" class=\"c80-tab-label\" [class.active]=\"selectedIndex() === $index\" (click)=\"onTabClick($index)\">\n @if (getTabLabel($index); as labelTemplate) {\n <ng-container *ngTemplateOutlet=\"labelTemplate\" />\n }\n </button>\n }\n </div>\n </div>\n\n <div class=\"c80-tab-body\">\n @for (tab of tabs(); track $index) {\n @if (selectedIndex() === $index) {\n <div class=\"c80-tab-content\">\n <ng-container *ngTemplateOutlet=\"getTabContent($index)\" />\n </div>\n }\n }\n </div>\n</div>", styles: [".c80-tab-container{display:flex;flex-direction:column;height:100%}.c80-tab-header{border-bottom:1px solid var(--color-border);background:transparent;margin-bottom:8px}.c80-tab-labels{display:flex;gap:0;width:100%;max-height:40px}.c80-tab-labels button{padding:10px}.c80-tab-label{flex:1;min-width:120px;padding:16px;background:transparent;border:none;border-bottom:1px solid transparent;cursor:pointer;opacity:.7;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;font-size:14px;font-weight:500;color:inherit}.c80-tab-label:hover{opacity:.9;background:rgba(var(--color-primary-rgb),.05)}.c80-tab-label.active{opacity:1;border-bottom-color:var(--color-primary);color:var(--color-primary)}.c80-tab-label:focus-visible{outline:none;outline-offset:-2px}.c80-tab-body{flex:1;overflow-y:auto;position:relative}.c80-tab-content{height:100%;animation:fadeIn .2s ease-in;padding:.2rem}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@media(max-width:768px){.c80-tab-label{min-width:80px;padding:12px 8px}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
45
45
|
}
|
|
46
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
46
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TabComponent, decorators: [{
|
|
47
47
|
type: Component,
|
|
48
48
|
args: [{ selector: 'c80-tab', standalone: true, imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"c80-tab-container\">\n <div class=\"c80-tab-header\">\n <div class=\"c80-tab-labels\">\n @for (tab of tabs(); track $index) {\n <button type=\"button\" class=\"c80-tab-label\" [class.active]=\"selectedIndex() === $index\" (click)=\"onTabClick($index)\">\n @if (getTabLabel($index); as labelTemplate) {\n <ng-container *ngTemplateOutlet=\"labelTemplate\" />\n }\n </button>\n }\n </div>\n </div>\n\n <div class=\"c80-tab-body\">\n @for (tab of tabs(); track $index) {\n @if (selectedIndex() === $index) {\n <div class=\"c80-tab-content\">\n <ng-container *ngTemplateOutlet=\"getTabContent($index)\" />\n </div>\n }\n }\n </div>\n</div>", styles: [".c80-tab-container{display:flex;flex-direction:column;height:100%}.c80-tab-header{border-bottom:1px solid var(--color-border);background:transparent;margin-bottom:8px}.c80-tab-labels{display:flex;gap:0;width:100%;max-height:40px}.c80-tab-labels button{padding:10px}.c80-tab-label{flex:1;min-width:120px;padding:16px;background:transparent;border:none;border-bottom:1px solid transparent;cursor:pointer;opacity:.7;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;font-size:14px;font-weight:500;color:inherit}.c80-tab-label:hover{opacity:.9;background:rgba(var(--color-primary-rgb),.05)}.c80-tab-label.active{opacity:1;border-bottom-color:var(--color-primary);color:var(--color-primary)}.c80-tab-label:focus-visible{outline:none;outline-offset:-2px}.c80-tab-body{flex:1;overflow-y:auto;position:relative}.c80-tab-content{height:100%;animation:fadeIn .2s ease-in;padding:.2rem}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@media(max-width:768px){.c80-tab-label{min-width:80px;padding:12px 8px}}\n"] }]
|
|
49
49
|
}], propDecorators: { tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => C80TabItemDirective), { isSignal: true }] }], labels: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => C80TabLabelDirective), { isSignal: true }] }], selectedIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIndex", required: false }] }, { type: i0.Output, args: ["selectedIndexChange"] }], selectedIndexChange: [{ type: i0.Output, args: ["selectedIndexChange"] }] } });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"c80-tab.component.js","sourceRoot":"","sources":["../../../../../libs/ui/src/lib/tab/c80-tab.component.ts","../../../../../libs/ui/src/lib/tab/c80-tab.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,uBAAuB,EAAE,eAAe,EAAoB,MAAM,eAAe,CAAC;AACrH,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AAC1E,OAAO,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAC;;AAE5E;;GAEG;
|
|
1
|
+
{"version":3,"file":"c80-tab.component.js","sourceRoot":"","sources":["../../../../../libs/ui/src/lib/tab/c80-tab.component.ts","../../../../../libs/ui/src/lib/tab/c80-tab.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,uBAAuB,EAAE,eAAe,EAAoB,MAAM,eAAe,CAAC;AACrH,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AAC1E,OAAO,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAC;;AAE5E;;GAEG;AASH,MAAM,OAAO,YAAY;IACd,IAAI,GAAG,eAAe,CAAsB,mBAAmB,2EAAC,CAAC;IACjE,MAAM,GAAG,eAAe,CAAuB,oBAAoB,6EAAC,CAAC;IAE9E,oBAAoB;IACX,aAAa,GAAG,KAAK,CAAS,CAAC,oFAAC,CAAC;IACjC,mBAAmB,GAAG,MAAM,EAAU,CAAC;IAEhD;;;OAGG;IACH,UAAU,CAAC,KAAa;QACtB,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;QAC9B,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACvC,CAAC;IAED;;;;OAIG;IACH,aAAa,CAAC,KAAa;QACzB,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;QAC5B,MAAM,GAAG,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC;QAC3B,OAAO,GAAG,EAAE,OAAO,IAAI,IAAI,CAAC;IAC9B,CAAC;IAED;;;;OAIG;IACH,WAAW,CAAC,KAAa;QACvB,MAAM,SAAS,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;QAChC,MAAM,KAAK,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC;QAC/B,OAAO,KAAK,EAAE,QAAQ,IAAI,IAAI,CAAC;IACjC,CAAC;wGArCU,YAAY;4FAAZ,YAAY,mVAC8B,mBAAmB,yDAChB,oBAAoB,6CClB9E,mtBAsBM,glCDXM,gBAAgB;;4FAKf,YAAY;kBARxB,SAAS;+BACE,SAAS,cACP,IAAI,WACP,CAAC,gBAAgB,CAAC,mBAGV,uBAAuB,CAAC,MAAM;4FAGM,mBAAmB,2FAChB,oBAAoB","sourcesContent":["import { Component, output, model, ChangeDetectionStrategy, contentChildren, type TemplateRef } from '@angular/core';\r\nimport { NgTemplateOutlet } from '@angular/common';\r\nimport { C80TabItemDirective } from './directives/c80-tab-item.directive';\r\nimport { C80TabLabelDirective } from './directives/c80-tab-label.directive';\r\n\r\n/**\r\n *\r\n */\r\n@Component({\r\n selector: 'c80-tab',\r\n standalone: true,\r\n imports: [NgTemplateOutlet],\r\n templateUrl: './c80-tab.component.html',\r\n styleUrl: './c80-tab.component.scss',\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class TabComponent {\r\n readonly tabs = contentChildren<C80TabItemDirective>(C80TabItemDirective);\r\n readonly labels = contentChildren<C80TabLabelDirective>(C80TabLabelDirective);\r\n\r\n /* v8 ignore next */\r\n readonly selectedIndex = model<number>(0);\r\n readonly selectedIndexChange = output<number>();\r\n\r\n /**\r\n *\r\n * @param index\r\n */\r\n onTabClick(index: number): void {\r\n this.selectedIndex.set(index);\r\n this.selectedIndexChange.emit(index);\r\n }\r\n\r\n /**\r\n *\r\n * @param index\r\n * @returns Template del contenido del tab o null\r\n */\r\n getTabContent(index: number): TemplateRef<unknown> | null {\r\n const tabList = this.tabs();\r\n const tab = tabList[index];\r\n return tab?.content ?? null;\r\n }\r\n\r\n /**\r\n *\r\n * @param index\r\n * @returns Template de la etiqueta del tab o null\r\n */\r\n getTabLabel(index: number): TemplateRef<unknown> | null {\r\n const labelList = this.labels();\r\n const label = labelList[index];\r\n return label?.template ?? null;\r\n }\r\n}\r\n","<div class=\"c80-tab-container\">\n <div class=\"c80-tab-header\">\n <div class=\"c80-tab-labels\">\n @for (tab of tabs(); track $index) {\n <button type=\"button\" class=\"c80-tab-label\" [class.active]=\"selectedIndex() === $index\" (click)=\"onTabClick($index)\">\n @if (getTabLabel($index); as labelTemplate) {\n <ng-container *ngTemplateOutlet=\"labelTemplate\" />\n }\n </button>\n }\n </div>\n </div>\n\n <div class=\"c80-tab-body\">\n @for (tab of tabs(); track $index) {\n @if (selectedIndex() === $index) {\n <div class=\"c80-tab-content\">\n <ng-container *ngTemplateOutlet=\"getTabContent($index)\" />\n </div>\n }\n }\n </div>\n</div>"]}
|
|
@@ -5,10 +5,10 @@ import * as i0 from "@angular/core";
|
|
|
5
5
|
*/
|
|
6
6
|
export class C80TabItemDirective {
|
|
7
7
|
content = inject((TemplateRef));
|
|
8
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
9
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
8
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: C80TabItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
9
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: C80TabItemDirective, isStandalone: true, selector: "[tabItem]", ngImport: i0 });
|
|
10
10
|
}
|
|
11
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
11
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: C80TabItemDirective, decorators: [{
|
|
12
12
|
type: Directive,
|
|
13
13
|
args: [{
|
|
14
14
|
// eslint-disable-next-line @angular-eslint/directive-selector
|
|
@@ -5,10 +5,10 @@ import * as i0 from "@angular/core";
|
|
|
5
5
|
*/
|
|
6
6
|
export class C80TabLabelDirective {
|
|
7
7
|
template = inject((TemplateRef));
|
|
8
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
9
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
8
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: C80TabLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
9
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: C80TabLabelDirective, isStandalone: true, selector: "[tabLabel]", ngImport: i0 });
|
|
10
10
|
}
|
|
11
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
11
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: C80TabLabelDirective, decorators: [{
|
|
12
12
|
type: Directive,
|
|
13
13
|
args: [{
|
|
14
14
|
// eslint-disable-next-line @angular-eslint/directive-selector
|
|
@@ -86,10 +86,10 @@ export class TableColumnVisibilityService {
|
|
|
86
86
|
return this.dataConverter.isValueEmpty(value);
|
|
87
87
|
});
|
|
88
88
|
}
|
|
89
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
90
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
89
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TableColumnVisibilityService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
90
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TableColumnVisibilityService, providedIn: 'root' });
|
|
91
91
|
}
|
|
92
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
92
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TableColumnVisibilityService, decorators: [{
|
|
93
93
|
type: Injectable,
|
|
94
94
|
args: [{
|
|
95
95
|
providedIn: 'root'
|
|
@@ -47,10 +47,10 @@ export class TableCrudStateService {
|
|
|
47
47
|
* @returns Objeto con signals y métodos para gestión CRUD
|
|
48
48
|
*/
|
|
49
49
|
createCrudState() {
|
|
50
|
-
const creating = signal(false, ...(ngDevMode ? [{ debugName: "creating" }] : []));
|
|
51
|
-
const newRow = signal(null, ...(ngDevMode ? [{ debugName: "newRow" }] : []));
|
|
52
|
-
const editing = signal(null, ...(ngDevMode ? [{ debugName: "editing" }] : []));
|
|
53
|
-
const editRow = signal(null, ...(ngDevMode ? [{ debugName: "editRow" }] : []));
|
|
50
|
+
const creating = signal(false, ...(ngDevMode ? [{ debugName: "creating" }] : /* istanbul ignore next */ []));
|
|
51
|
+
const newRow = signal(null, ...(ngDevMode ? [{ debugName: "newRow" }] : /* istanbul ignore next */ []));
|
|
52
|
+
const editing = signal(null, ...(ngDevMode ? [{ debugName: "editing" }] : /* istanbul ignore next */ []));
|
|
53
|
+
const editRow = signal(null, ...(ngDevMode ? [{ debugName: "editRow" }] : /* istanbul ignore next */ []));
|
|
54
54
|
return {
|
|
55
55
|
creating: creating.asReadonly(),
|
|
56
56
|
newRow: newRow.asReadonly(),
|
|
@@ -103,10 +103,10 @@ export class TableCrudStateService {
|
|
|
103
103
|
}
|
|
104
104
|
}
|
|
105
105
|
}
|
|
106
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
107
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
106
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TableCrudStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
107
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TableCrudStateService, providedIn: 'root' });
|
|
108
108
|
}
|
|
109
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
109
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TableCrudStateService, decorators: [{
|
|
110
110
|
type: Injectable,
|
|
111
111
|
args: [{
|
|
112
112
|
providedIn: 'root'
|