npm - @c80/ui - Versions diffs - 1.1.2 → 2.0.1 - Mend

@c80/ui 1.1.2 → 2.0.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.

Files changed (88) hide show

package/esm2022/lib/rating-display/rating-display.component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"rating-display.component.js","sourceRoot":"","sources":["../../../../../libs/ui/src/lib/rating-display/rating-display.component.ts","../../../../../libs/ui/src/lib/rating-display/rating-display.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACpF,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;;AAExC;;GAEG;~~AAaH~~,MAAM,OAAO,sBAAsB;IAC/B,MAAM,GAAG,KAAK,CAAS,CAAC,~~kDAAC~~,CAAC;IAC1B,IAAI,GAAG,KAAK,CAAS,GAAG,~~gDAAC~~,CAAC;IAC1B,OAAO,GAAG,KAAK,CAAS,CAAC,EAAE,~~mDAAC~~,CAAC;IAEV,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE;QACrC,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;QACzC,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC;IAC1C,CAAC,~~iDAAC~~,CAAC;wGARM,sBAAsB;4FAAtB,sBAAsB,~~qgBClBnC~~,iMAIM,~~wPDMQ~~,aAAa;;4FAQd,sBAAsB;~~kBAZlC~~,SAAS;+~~BAEI~~,oBAAoB,~~cAClB~~,~~IAAI,WACP,~~CAAC,aAAa,CAAC,mBAGP,uBAAuB,CAAC,MAAM,QACzC;wBACF,sBAAsB,EAAE,WAAW;qBACtC","sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\nimport { IconComponent } from '../icon';\n\n/*\n \n */\n@Component({\~~n // eslint-disable-next-line @angular-eslint/component-selector~~\n selector: 'c80-rating-display',\n ~~standalone: true,\n~~ imports: [IconComponent],\n templateUrl: './rating-display.component.html',\n styleUrl: './rating-display.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '[style.--spacing.px]': 'spacing()'\n }\n})\nexport class RatingDisplayComponent {\n rating = input<number>(0);\n size = input<number>(0.1);\n spacing = input<number>(-22);\n\n protected readonly stars = computed(() => {\n const rating = Math.round(this.rating());\n return Array.from({ length: rating });\n });\n}\n","<div class=\"rating-display\">\n @for (star of stars(); track $index) {\n <c80-icon icon=\"starFilled\" [size]=\"size()\" color=\"warn\" class=\"rating-display__star\" />\n }\n</div>"]}
1	+ {"version":3,"file":"rating-display.component.js","sourceRoot":"","sources":["../../../../../libs/ui/src/lib/rating-display/rating-display.component.ts","../../../../../libs/ui/src/lib/rating-display/rating-display.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACpF,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;;AAExC;;GAEG;AAWH,MAAM,OAAO,sBAAsB;IAC/B,MAAM,GAAG,KAAK,CAAS,CAAC,6EAAC,CAAC;IAC1B,IAAI,GAAG,KAAK,CAAS,GAAG,2EAAC,CAAC;IAC1B,OAAO,GAAG,KAAK,CAAS,CAAC,EAAE,8EAAC,CAAC;IAEV,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE;QACrC,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;QACzC,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC;IAC1C,CAAC,4EAAC,CAAC;wGARM,sBAAsB;4FAAtB,sBAAsB,qgBChBnC,iMAIM,wPDIQ,aAAa;;4FAQd,sBAAsB;kBAVlC,SAAS;+BACI,oBAAoB,WACrB,CAAC,aAAa,CAAC,mBAGP,uBAAuB,CAAC,MAAM,QACzC;wBACF,sBAAsB,EAAE,WAAW;qBACtC","sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\r\nimport { IconComponent } from '../icon';\r\n\r\n/*\r\n \r\n */\r\n@Component({\r\n selector: 'c80-rating-display',\r\n imports: [IconComponent],\r\n templateUrl: './rating-display.component.html',\r\n styleUrl: './rating-display.component.scss',\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n host: {\r\n '[style.--spacing.px]': 'spacing()'\r\n }\r\n})\r\nexport class RatingDisplayComponent {\r\n rating = input<number>(0);\r\n size = input<number>(0.1);\r\n spacing = input<number>(-22);\r\n\r\n protected readonly stars = computed(() => {\r\n const rating = Math.round(this.rating());\r\n return Array.from({ length: rating });\r\n });\r\n}\r\n","<div class=\"rating-display\">\n @for (star of stars(); track $index) {\n <c80-icon icon=\"starFilled\" [size]=\"size()\" color=\"warn\" class=\"rating-display__star\" />\n }\n</div>"]}

package/esm2022/lib/rating-stars/rating-stars.component.js CHANGED Viewed

@@ -5,15 +5,14 @@ import * as i0 from "@angular/core";
  *
  */
 export class RatingStarsComponent {
-    rating = input(0, ...(ngDevMode ? [{ debugName: "rating" }] : []));
-    showLabel = input(false, ...(ngDevMode ? [{ debugName: "showLabel" }] : []));
-    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
+    rating = input(0, ...(ngDevMode ? [{ debugName: "rating" }] : /* istanbul ignore next */ []));
+    showLabel = input(false, ...(ngDevMode ? [{ debugName: "showLabel" }] : /* istanbul ignore next */ []));
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
     ratingChange = output();
-    currentRating = computed(() => this.rating(), ...(ngDevMode ? [{ debugName: "currentRating" }] : []));
     stars = computed(() => {
-        const rating = this.currentRating();
+        const rating = this.rating();
         return Array.from({ length: 5 }, (_, i) => i < rating);
-    }, ...(ngDevMode ? [{ debugName: "stars" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "stars" }] : /* istanbul ignore next */ []));
     /**
      *
      * @param rating
@@ -23,11 +22,11 @@ export class RatingStarsComponent {
             return;
         this.ratingChange.emit(rating);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: RatingStarsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: RatingStarsComponent, isStandalone: true, selector: "c80-rating-stars", inputs: { rating: { classPropertyName: "rating", publicName: "rating", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ratingChange: "ratingChange" }, ngImport: i0, template: "<div class=\"rating-stars\">\n    @for (star of stars(); track $index) {\n    <c80-icon button [icon]=\"star ? 'starFilled' : 'star'\" [size]=\"1.5\" [color]=\"star ? 'warn' : undefined\" (iconClick)=\"onStarClick($index + 1)\" class=\"rating-stars__star\" [class.rating-stars__star--filled]=\"star\"\n        [class.rating-stars__star--empty]=\"!star\" [title]=\"($index + 1) + ' estrella' + ($index > 0 ? 's' : '')\" />\n    }\n    @if (showLabel()) {\n    <span class=\"rating-stars__label\">{{ currentRating() }}/5</span>\n    }\n</div>", styles: [".rating-stars{display:flex;align-items:center;gap:var(--spacing-xs)}.rating-stars__star{cursor:pointer;transition:transform .2s ease;-webkit-user-select:none;user-select:none}.rating-stars__star:hover{transform:scale(1.2)}.rating-stars__star:active{transform:scale(.9)}.rating-stars__star--empty{opacity:.3}.rating-stars__label{margin-left:var(--spacing-sm);font-size:.875rem;color:var(--color-text-secondary)}@media(max-width:768px){.rating-stars{gap:var(--spacing-xs)}.rating-stars__star:hover{transform:scale(1.15)}}\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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: RatingStarsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: RatingStarsComponent, isStandalone: true, selector: "c80-rating-stars", inputs: { rating: { classPropertyName: "rating", publicName: "rating", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ratingChange: "ratingChange" }, ngImport: i0, template: "<div class=\"rating-stars\">\n    @for (star of stars(); track $index) {\n    <c80-icon button [icon]=\"star ? 'starFilled' : 'star'\" [size]=\"1.5\" [color]=\"star ? 'warn' : undefined\" (iconClick)=\"onStarClick($index + 1)\" class=\"rating-stars__star\" [class.rating-stars__star--filled]=\"star\"\n        [class.rating-stars__star--empty]=\"!star\" [title]=\"($index + 1) + ' estrella' + ($index > 0 ? 's' : '')\" />\n    }\n    @if (showLabel()) {\n    <span class=\"rating-stars__label\">{{ rating() }}/5</span>\n    }\n</div>", styles: [".rating-stars{display:flex;align-items:center;gap:var(--spacing-xs)}.rating-stars__star{cursor:pointer;transition:transform .2s ease;-webkit-user-select:none;user-select:none}.rating-stars__star:hover{transform:scale(1.2)}.rating-stars__star:active{transform:scale(.9)}.rating-stars__star--empty{opacity:.3}.rating-stars__label{margin-left:var(--spacing-sm);font-size:.875rem;color:var(--color-text-secondary)}@media(max-width:768px){.rating-stars{gap:var(--spacing-xs)}.rating-stars__star:hover{transform:scale(1.15)}}\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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: RatingStarsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: RatingStarsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c80-rating-stars', standalone: true, imports: [IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"rating-stars\">\n    @for (star of stars(); track $index) {\n    <c80-icon button [icon]=\"star ? 'starFilled' : 'star'\" [size]=\"1.5\" [color]=\"star ? 'warn' : undefined\" (iconClick)=\"onStarClick($index + 1)\" class=\"rating-stars__star\" [class.rating-stars__star--filled]=\"star\"\n        [class.rating-stars__star--empty]=\"!star\" [title]=\"($index + 1) + ' estrella' + ($index > 0 ? 's' : '')\" />\n    }\n    @if (showLabel()) {\n    <span class=\"rating-stars__label\">{{ currentRating() }}/5</span>\n    }\n</div>", styles: [".rating-stars{display:flex;align-items:center;gap:var(--spacing-xs)}.rating-stars__star{cursor:pointer;transition:transform .2s ease;-webkit-user-select:none;user-select:none}.rating-stars__star:hover{transform:scale(1.2)}.rating-stars__star:active{transform:scale(.9)}.rating-stars__star--empty{opacity:.3}.rating-stars__label{margin-left:var(--spacing-sm);font-size:.875rem;color:var(--color-text-secondary)}@media(max-width:768px){.rating-stars{gap:var(--spacing-xs)}.rating-stars__star:hover{transform:scale(1.15)}}\n"] }]
+            args: [{ selector: 'c80-rating-stars', imports: [IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"rating-stars\">\n    @for (star of stars(); track $index) {\n    <c80-icon button [icon]=\"star ? 'starFilled' : 'star'\" [size]=\"1.5\" [color]=\"star ? 'warn' : undefined\" (iconClick)=\"onStarClick($index + 1)\" class=\"rating-stars__star\" [class.rating-stars__star--filled]=\"star\"\n        [class.rating-stars__star--empty]=\"!star\" [title]=\"($index + 1) + ' estrella' + ($index > 0 ? 's' : '')\" />\n    }\n    @if (showLabel()) {\n    <span class=\"rating-stars__label\">{{ rating() }}/5</span>\n    }\n</div>", styles: [".rating-stars{display:flex;align-items:center;gap:var(--spacing-xs)}.rating-stars__star{cursor:pointer;transition:transform .2s ease;-webkit-user-select:none;user-select:none}.rating-stars__star:hover{transform:scale(1.2)}.rating-stars__star:active{transform:scale(.9)}.rating-stars__star--empty{opacity:.3}.rating-stars__label{margin-left:var(--spacing-sm);font-size:.875rem;color:var(--color-text-secondary)}@media(max-width:768px){.rating-stars{gap:var(--spacing-xs)}.rating-stars__star:hover{transform:scale(1.15)}}\n"] }]
         }], propDecorators: { rating: [{ type: i0.Input, args: [{ isSignal: true, alias: "rating", required: false }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], ratingChange: [{ type: i0.Output, args: ["ratingChange"] }] } });
 //# sourceMappingURL=rating-stars.component.js.map

package/esm2022/lib/rating-stars/rating-stars.component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"rating-stars.component.js","sourceRoot":"","sources":["../../../../../libs/ui/src/lib/rating-stars/rating-stars.component.ts","../../../../../libs/ui/src/lib/rating-stars/rating-stars.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAC5F,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;;AAExC;;GAEG;~~AAUH~~,MAAM,OAAO,oBAAoB;IAC7B,MAAM,GAAG,KAAK,CAAS,CAAC,~~kDAAC~~,CAAC;IAC1B,SAAS,GAAG,KAAK,CAAU,KAAK,~~qDAAC~~,CAAC;IAClC,QAAQ,GAAG,KAAK,CAAU,KAAK,~~oDAAC,~~CAAC;IAEjC,YAAY,GAAG,MAAM,EAAU,CAAC;IAEb,~~aAAa,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,yDAAC,CAAC;IAE9C,~~KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE;QACrC,MAAM,MAAM,GAAG,IAAI,CAAC,~~aAAa~~,EAAE,CAAC;~~QACpC~~,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC;IAC3D,CAAC,~~iDAAC~~,CAAC;IAEH;;;OAGG;IACO,WAAW,CAAC,MAAc;QAChC,IAAI,IAAI,CAAC,QAAQ,EAAE;YAAE,OAAO;QAC5B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IACnC,CAAC;~~wGArBQ~~,oBAAoB;4FAApB,oBAAoB,~~mgBCfjC~~,~~8hBAQM~~,~~mkBDEQ~~,aAAa;;4FAKd,oBAAoB;~~kBAThC~~,SAAS;+~~BAEI~~,kBAAkB,~~cAChB~~,~~IAAI,WACP,~~CAAC,aAAa,CAAC,mBAGP,uBAAuB,CAAC,MAAM","sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input, output } from '@angular/core';\nimport { IconComponent } from '../icon';\n\n/*\n \n /\n@Component({\~~n // eslint-disable-next-line @angular-eslint/component-selector~~\n selector: 'c80-rating-stars',\n ~~standalone: true,\n~~ imports: [IconComponent],\n templateUrl: './rating-stars.component.html',\n styleUrl: './rating-stars.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class RatingStarsComponent {\n rating = input<number>(0);\n showLabel = input<boolean>(false);\n readonly = input<boolean>(false);\n\n ratingChange = output<number>();\n\n ~~protected readonly currentRating = computed(() => this.rating());\n~~\n protected readonly stars = computed(() => {\n const rating = this.~~currentRating~~();\n return Array.from({ length: 5 }, (_, i) => i < rating);\n });\n\n /\n \n * @param rating\n */\n protected onStarClick(rating: number): void {\n if (this.readonly()) return;\n this.ratingChange.emit(rating);\n }\n}\n","<div class=\"rating-stars\">\n @for (star of stars(); track $index) {\n <c80-icon button [icon]=\"star ? 'starFilled' : 'star'\" [size]=\"1.5\" [color]=\"star ? 'warn' : undefined\" (iconClick)=\"onStarClick($index + 1)\" class=\"rating-stars__star\" [class.rating-stars__star--filled]=\"star\"\n [class.rating-stars__star--empty]=\"!star\" [title]=\"($index + 1) + ' estrella' + ($index > 0 ? 's' : '')\" />\n }\n @if (showLabel()) {\n <span class=\"rating-stars__label\">{{ ~~currentRating~~() }}/5</span>\n }\n</div>"]}
1	+ {"version":3,"file":"rating-stars.component.js","sourceRoot":"","sources":["../../../../../libs/ui/src/lib/rating-stars/rating-stars.component.ts","../../../../../libs/ui/src/lib/rating-stars/rating-stars.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAC5F,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;;AAExC;;GAEG;AAQH,MAAM,OAAO,oBAAoB;IAC7B,MAAM,GAAG,KAAK,CAAS,CAAC,6EAAC,CAAC;IAC1B,SAAS,GAAG,KAAK,CAAU,KAAK,gFAAC,CAAC;IAClC,QAAQ,GAAG,KAAK,CAAU,KAAK,+EAAC,CAAC;IAEjC,YAAY,GAAG,MAAM,EAAU,CAAC;IAEb,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE;QACrC,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;QAC7B,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC;IAC3D,CAAC,4EAAC,CAAC;IAEH;;;OAGG;IACO,WAAW,CAAC,MAAc;QAChC,IAAI,IAAI,CAAC,QAAQ,EAAE;YAAE,OAAO;QAC5B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IACnC,CAAC;wGAnBQ,oBAAoB;4FAApB,oBAAoB,mgBCbjC,uhBAQM,mkBDAQ,aAAa;;4FAKd,oBAAoB;kBAPhC,SAAS;+BACI,kBAAkB,WACnB,CAAC,aAAa,CAAC,mBAGP,uBAAuB,CAAC,MAAM","sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input, output } from '@angular/core';\r\nimport { IconComponent } from '../icon';\r\n\r\n/*\r\n \r\n /\r\n@Component({\r\n selector: 'c80-rating-stars',\r\n imports: [IconComponent],\r\n templateUrl: './rating-stars.component.html',\r\n styleUrl: './rating-stars.component.scss',\r\n changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class RatingStarsComponent {\r\n rating = input<number>(0);\r\n showLabel = input<boolean>(false);\r\n readonly = input<boolean>(false);\r\n\r\n ratingChange = output<number>();\r\n\r\n protected readonly stars = computed(() => {\r\n const rating = this.rating();\r\n return Array.from({ length: 5 }, (_, i) => i < rating);\r\n });\r\n\r\n /\r\n \r\n * @param rating\r\n */\r\n protected onStarClick(rating: number): void {\r\n if (this.readonly()) return;\r\n this.ratingChange.emit(rating);\r\n }\r\n}\r\n","<div class=\"rating-stars\">\n @for (star of stars(); track $index) {\n <c80-icon button [icon]=\"star ? 'starFilled' : 'star'\" [size]=\"1.5\" [color]=\"star ? 'warn' : undefined\" (iconClick)=\"onStarClick($index + 1)\" class=\"rating-stars__star\" [class.rating-stars__star--filled]=\"star\"\n [class.rating-stars__star--empty]=\"!star\" [title]=\"($index + 1) + ' estrella' + ($index > 0 ? 's' : '')\" />\n }\n @if (showLabel()) {\n <span class=\"rating-stars__label\">{{ rating() }}/5</span>\n }\n</div>"]}

package/esm2022/lib/select/select.component.js CHANGED Viewed

@@ -5,38 +5,28 @@ let uniqueIdCounter = 0;
  *
  */
 export class SelectComponent {
-    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
-    /* v8 ignore next */
-    placeholder = input('Seleccionar', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
-    /* v8 ignore next */
-    value = input(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
-    /* v8 ignore next */
-    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
-    /* v8 ignore next */
-    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
-    /* v8 ignore next */
-    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
-    /* v8 ignore next */
-    emptyMessage = input('No hay opciones disponibles', ...(ngDevMode ? [{ debugName: "emptyMessage" }] : []));
-    /* v8 ignore next */
-    maxHeight = input('300px', ...(ngDevMode ? [{ debugName: "maxHeight" }] : []));
-    /* v8 ignore next */
-    filterable = input(false, ...(ngDevMode ? [{ debugName: "filterable" }] : []));
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    placeholder = input('Seleccionar', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    value = input(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    emptyMessage = input('No hay opciones disponibles', ...(ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []));
+    maxHeight = input('300px', ...(ngDevMode ? [{ debugName: "maxHeight" }] : /* istanbul ignore next */ []));
+    filterable = input(false, ...(ngDevMode ? [{ debugName: "filterable" }] : /* istanbul ignore next */ []));
     valueChange = output();
     opened = output();
-    /* v8 ignore next */
-    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
-    /* v8 ignore next */
-    searchTerm = signal('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : []));
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    searchTerm = signal('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []));
     controlId = `c80-select-${++uniqueIdCounter}`;
-    searchInput = viewChild('searchInput', ...(ngDevMode ? [{ debugName: "searchInput" }] : []));
+    searchInput = viewChild('searchInput', ...(ngDevMode ? [{ debugName: "searchInput" }] : /* istanbul ignore next */ []));
     filteredOptions = computed(() => {
         const term = this.normalizeString(this.searchTerm());
         if (!term || !this.filterable()) {
             return this.options();
         }
         return this.options().filter(opt => opt.label.toLowerCase().includes(term));
-    }, ...(ngDevMode ? [{ debugName: "filteredOptions" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "filteredOptions" }] : /* istanbul ignore next */ []));
     normalizeString(str) {
         return str.toLowerCase().trim();
     }
@@ -55,7 +45,6 @@ export class SelectComponent {
         else {
             this.opened.emit();
             if (this.filterable()) {
-                /* v8 ignore next 2 */
                 setTimeout(() => this.searchInput()?.nativeElement.focus(), 0);
             }
         }
@@ -110,11 +99,11 @@ export class SelectComponent {
     clearSearch() {
         this.searchTerm.set('');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", 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()\">\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  <!-- eslint-disable-next-line @angular-eslint/template/no-inline-styles -->\n  <div class=\"k-select__dropdown\" [style.max-height]=\"maxHeight()\">\n    @if (filterable()) {\n    <div class=\"k-select__search\">\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 />\n    </div>\n    }\n\n    <button type=\"button\" class=\"k-select__option\" (click)=\"selectNull()\" (keydown.enter)=\"selectNull()\">\n      -- {{ placeholder() }} --\n    </button>\n\n    @if (loading()) {\n    <button type=\"button\" class=\"k-select__option k-select__option--disabled\" disabled>\n      Cargando...\n    </button>\n    } @else if (filteredOptions().length === 0) {\n    <button type=\"button\" class=\"k-select__option k-select__option--disabled\" disabled>\n      {{ searchTerm() ? 'No se encontraron resultados' : emptyMessage() }}\n    </button>\n    } @else {\n    @for (option of filteredOptions(); track option.value) {\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)\"\n      (keydown.enter)=\"selectOption(option)\">\n      {{ option.label }}\n    </button>\n    }\n    }\n  </div>\n  }\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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: SelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
-            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  <!-- eslint-disable-next-line @angular-eslint/template/no-inline-styles -->\n  <div class=\"k-select__dropdown\" [style.max-height]=\"maxHeight()\">\n    @if (filterable()) {\n    <div class=\"k-select__search\">\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 />\n    </div>\n    }\n\n    <button type=\"button\" class=\"k-select__option\" (click)=\"selectNull()\" (keydown.enter)=\"selectNull()\">\n      -- {{ placeholder() }} --\n    </button>\n\n    @if (loading()) {\n    <button type=\"button\" class=\"k-select__option k-select__option--disabled\" disabled>\n      Cargando...\n    </button>\n    } @else if (filteredOptions().length === 0) {\n    <button type=\"button\" class=\"k-select__option k-select__option--disabled\" disabled>\n      {{ searchTerm() ? 'No se encontraron resultados' : emptyMessage() }}\n    </button>\n    } @else {\n    @for (option of filteredOptions(); track option.value) {\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)\"\n      (keydown.enter)=\"selectOption(option)\">\n      {{ option.label }}\n    </button>\n    }\n    }\n  </div>\n  }\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"] }]
+            args: [{ selector: 'c80-select', 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"] }]
         }], 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 }] }] } });
 //# sourceMappingURL=select.component.js.map

package/esm2022/lib/select/select.component.js.map CHANGED Viewed

	@@ -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;~~AAUH~~,MAAM,OAAO,eAAe;IACjB,KAAK,GAAG,KAAK,CAAC,QAAQ,~~gDAAU~~,CAAC;~~IAC1C~~,~~oBAAoB;IACX,~~WAAW,GAAG,KAAK,CAAS,aAAa,~~uDAAC~~,CAAC;~~IACpD~~,~~oBAAoB;IACX,~~KAAK,GAAG,KAAK,CAAW,IAAI,~~iDAAC~~,CAAC;~~IACvC~~,~~oBAAoB;IACX,~~OAAO,GAAG,KAAK,CAAoB,EAAE,~~mDAAC~~,CAAC;~~IAChD~~,~~oBAAoB;IACX,~~QAAQ,GAAG,KAAK,CAAU,KAAK,~~oDAAC,~~CAAC;~~IAC1C~~,~~oBAAoB;IACX,~~OAAO,GAAG,KAAK,CAAU,KAAK,~~mDAAC~~,CAAC;~~IACzC~~,~~oBAAoB;IACX,~~YAAY,GAAG,KAAK,CAAS,6BAA6B,~~wDAAC~~,CAAC;~~IACrE~~,~~oBAAoB;IACX,~~SAAS,GAAG,KAAK,CAAS,OAAO,~~qDAAC~~,CAAC;~~IAC5C~~,~~oBAAoB;IACX,~~UAAU,GAAG,KAAK,CAAU,KAAK,~~sDAAC~~,CAAC;IAEnC,WAAW,GAAG,MAAM,EAAY,CAAC;IACjC,MAAM,GAAG,MAAM,EAAQ,CAAC;~~IAEjC~~,~~oBAAoB;IACX,~~MAAM,GAAG,MAAM,CAAC,KAAK,~~kDAAC~~,CAAC;~~IAChC~~,~~oBAAoB;IACX,~~UAAU,GAAG,MAAM,CAAS,EAAE,~~sDAAC~~,CAAC;IAChC,SAAS,GAAG,cAAc,EAAE,eAAe,EAAE,CAAC;IAC9C,WAAW,GAAG,SAAS,CAA+B,aAAa,~~uDAAC~~,CAAC;IAErE,eAAe,GAAG,QAAQ,CAAC,GAAG,EAAE;QACvC,MAAM,IAAI,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC;QACrD,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,EAAE,CAAC;YAChC,OAAO,IAAI,CAAC,OAAO,EAAE,CAAC;QACxB,CAAC;QACD,OAAO,IAAI,CAAC,OAAO,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,CACjC,GAAG,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,CACvC,CAAC;IACJ,CAAC,~~2DAAC~~,CAAC;IAEH,eAAe,CAAC,GAAW;QACzB,OAAO,GAAG,CAAC,WAAW,EAAE,CAAC,IAAI,EAAE,CAAC;IAClC,CAAC;IAED;;OAEG;IACH,cAAc;QACZ,IAAI,IAAI,CAAC,QAAQ,EAAE,IAAI,IAAI,CAAC,OAAO,EAAE,EAAE,CAAC;YACtC,OAAO;QACT,CAAC;QAED,MAAM,OAAO,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;QAC9B,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC;QAE1B,IAAI,OAAO,EAAE,CAAC;YACZ,IAAI,CAAC,WAAW,EAAE,CAAC;QACrB,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;YACnB,IAAI,IAAI,CAAC,UAAU,EAAE,EAAE,CAAC;gBACtB,~~sBAAsB;gBACtB,~~UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,aAAa,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC;YACjE,CAAC;QACH,CAAC;IACH,CAAC;IAED;;;OAGG;IACH,YAAY,CAAC,MAAuB;QAClC,IAAI,MAAM,CAAC,QAAQ,EAAE,CAAC;YACpB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACpC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;IACzB,CAAC;IAED;;OAEG;IACH,UAAU;QACR,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC5B,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;IACzB,CAAC;IAED;;;OAGG;IACH,gBAAgB;QACd,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC;QAClC,IAAI,YAAY,KAAK,IAAI,IAAI,YAAY,KAAK,SAAS,EAAE,CAAC;YACxD,OAAO,IAAI,CAAC,WAAW,EAAE,CAAC;QAC5B,CAAC;QAED,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,KAAK,KAAK,YAAY,CAAC,CAAC;QACxE,OAAO,QAAQ,EAAE,KAAK,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;IAC/C,CAAC;IAED;;OAEG;IACH,aAAa;QACX,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;QACvB,IAAI,CAAC,WAAW,EAAE,CAAC;IACrB,CAAC;IAED;;;OAGG;IACH,cAAc,CAAC,IAAY;QACzB,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;IAC5B,CAAC;IAED;;OAEG;IACH,WAAW;QACT,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;IAC1B,CAAC;~~wGAzHU~~,eAAe;4FAAf,eAAe,~~u5CCjB5B~~,~~i0EA6CM~~;;~~4FD5BO~~,eAAe;~~kBAT3B~~,SAAS;+~~BAEE~~,YAAY,~~cACV~~,~~IAAI,WACP,~~EAAE,mBAGM,uBAAuB,CAAC,MAAM;~~whCA6BgB~~,aAAa","sourcesContent":["import { type ElementRef, ChangeDetectionStrategy, Component, computed, input, output, signal, viewChild } from '@angular/core';\nimport type { SelectOption } from './select.types';\n\nlet uniqueIdCounter = 0;\n\n/*\n \n /\n@Component({\~~n // eslint-disable-next-line @angular-eslint/component-selector~~\n selector: 'c80-select',\n ~~standalone: true,\n~~ imports: [],\n templateUrl: './select.component.html',\n styleUrl: './select.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SelectComponent<T = string> {\n readonly label = input.required<string>();\n ~~/ v8 ignore next /\n~~ readonly placeholder = input<string>('Seleccionar');\n ~~/ v8 ignore next /\n~~ readonly value = input<T \| null>(null);\n ~~/ v8 ignore next /\n~~ readonly options = input<SelectOption<T>[]>([]);\n ~~/ v8 ignore next /\n~~ readonly disabled = input<boolean>(false);\n ~~/ v8 ignore next /\n~~ readonly loading = input<boolean>(false);\n ~~/ v8 ignore next /\n~~ readonly emptyMessage = input<string>('No hay opciones disponibles');\n ~~/ v8 ignore next /\n~~ readonly maxHeight = input<string>('300px');\n ~~/ v8 ignore next /\n~~ readonly filterable = input<boolean>(false);\n\n readonly valueChange = output<T \| null>();\n readonly opened = output<void>();\n\n ~~/ v8 ignore next /\n~~ readonly isOpen = signal(false);\n ~~/ v8 ignore next /\n~~ readonly searchTerm = signal<string>('');\n readonly controlId = `c80-select-${++uniqueIdCounter}`;\n readonly searchInput = viewChild<ElementRef<HTMLInputElement>>('searchInput');\n\n readonly filteredOptions = computed(() => {\n const term = this.normalizeString(this.searchTerm());\n if (!term \|\| !this.filterable()) {\n return this.options();\n }\n return this.options().filter(opt =>\n opt.label.toLowerCase().includes(term)\n );\n });\n\n normalizeString(str: string): string {\n return str.toLowerCase().trim();\n }\n\n /\n \n /\n toggleDropdown(): void {\n if (this.disabled() \|\| this.loading()) {\n return;\n }\n\n const wasOpen = this.isOpen();\n this.isOpen.set(!wasOpen);\n\n if (wasOpen) {\n this.clearSearch();\n } else {\n this.opened.emit();\n if (this.filterable()) {\n ~~/ v8 ignore next 2 /\n~~ setTimeout(() => this.searchInput()?.nativeElement.focus(), 0);\n }\n }\n }\n\n /\n \n * @param option\n /\n selectOption(option: SelectOption<T>): void {\n if (option.disabled) {\n return;\n }\n\n this.valueChange.emit(option.value);\n this.isOpen.set(false);\n }\n\n /\n \n /\n selectNull(): void {\n this.valueChange.emit(null);\n this.isOpen.set(false);\n }\n\n /\n \n * @returns Etiqueta del valor seleccionado o placeholder\n /\n getSelectedLabel(): string {\n const currentValue = this.value();\n if (currentValue === null \|\| currentValue === undefined) {\n return this.placeholder();\n }\n\n const selected = this.options().find(opt => opt.value === currentValue);\n return selected?.label ?? this.placeholder();\n }\n\n /\n \n /\n closeDropdown(): void {\n this.isOpen.set(false);\n this.clearSearch();\n }\n\n /\n \n * @param term\n /\n onSearchChange(term: string): void {\n this.searchTerm.set(term);\n }\n\n /\n \n */\n clearSearch(): void {\n this.searchTerm.set('');\n }\n}\n","<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()\">▼</span>\n </button>\n\n @if (isOpen()) {\n <div class=\"k-select__backdrop\" tabindex=\"-1\" (click)=\"closeDropdown()\" (keydown.escape)=\"closeDropdown()\"></div>\n ~~<!-- eslint-disable-next-line @angular-eslint/template/no-inline-styles -->\n~~ <div class=\"k-select__dropdown\" [style.max-height]=\"maxHeight()\">\n @if (filterable()) {\n <div class=\"k-select__search\">\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 />\n </div>\n }\n\n <button type=\"button\" class=\"k-select__option\" (click)=\"selectNull()\" (keydown.enter)=\"selectNull()\">\n -- {{ placeholder() }} --\n </button>\n\n @if (loading()) {\n <button type=\"button\" class=\"k-select__option k-select__option--disabled\" disabled>\n Cargando...\n </button>\n } @else if (filteredOptions().length === 0) {\n <button type=\"button\" class=\"k-select__option k-select__option--disabled\" disabled>\n {{ searchTerm() ? 'No se encontraron resultados' : emptyMessage() }}\n </button>\n } @else {\n @for (option of filteredOptions(); track option.value) {\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)\"\n (keydown.enter)=\"selectOption(option)\">\n {{ option.label }}\n </button>\n }\n }\n </div>\n }\n</div>"]}
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 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 readonly placeholder = input<string>('Seleccionar');\r\n readonly value = input<T \| null>(null);\r\n readonly options = input<SelectOption<T>[]>([]);\r\n readonly disabled = input<boolean>(false);\r\n readonly loading = input<boolean>(false);\r\n readonly emptyMessage = input<string>('No hay opciones disponibles');\r\n readonly maxHeight = input<string>('300px');\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 readonly isOpen = signal(false);\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 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>"]}

package/esm2022/lib/select/select.types.js CHANGED Viewed

	@@ -1,2 +1 @@
1	- export {};
2 1	//# sourceMappingURL=select.types.js.map

package/esm2022/lib/snackbar/snackbar.component.js CHANGED Viewed

@@ -7,12 +7,10 @@ export class SnackbarComponent {
     elementRef = inject(ElementRef);
     renderer = inject(Renderer2);
     cdr = inject(ChangeDetectorRef);
-    /* v8 ignore next */
-    data = signal(null, ...(ngDevMode ? [{ debugName: "data" }] : []));
-    /* v8 ignore next */
-    visible = signal(false, ...(ngDevMode ? [{ debugName: "visible" }] : []));
+    data = signal(null, ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    visible = signal(false, ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
     timerId;
-    panelClasses = computed(() => this.data()?.config.panelClass.join(' ') ?? '', ...(ngDevMode ? [{ debugName: "panelClasses" }] : []));
+    panelClasses = computed(() => this.data()?.config.panelClass.join(' ') ?? '', ...(ngDevMode ? [{ debugName: "panelClasses" }] : /* istanbul ignore next */ []));
     /**
      *
      * @param data
@@ -66,11 +64,11 @@ export class SnackbarComponent {
             this.renderer.setStyle(host, horizontalPosition, '1rem');
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: SnackbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SnackbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: SnackbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SnackbarComponent, decorators: [{
             type: Component,
-            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"] }]
+            args: [{ selector: 'c80-snackbar', 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"] }]
         }] });
 //# sourceMappingURL=snackbar.component.js.map

package/esm2022/lib/snackbar/snackbar.component.js.map CHANGED Viewed

	@@ -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;~~AASH~~,MAAM,OAAO,iBAAiB;IACX,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;IAChC,QAAQ,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;IAC7B,GAAG,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAC;~~IAEjD~~,~~oBAAoB;IACX,~~IAAI,GAAG,MAAM,CAAsB,IAAI,~~gDAAC~~,CAAC;~~IAClD~~,~~oBAAoB;IACX,~~OAAO,GAAG,MAAM,CAAC,KAAK,~~mDAAC~~,CAAC;IAEzB,OAAO,CAAiC;IAEvC,YAAY,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,~~wDAAC~~,CAAC;IAEvF;;;OAGG;IACH,IAAI,CAAC,IAAkB;QACrB,IAAI,CAAC,UAAU,EAAE,CAAC;QAClB,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QACpB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAChC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QAEvB,6CAA6C;QAC7C,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE,CAAC;QAExB,IAAI,IAAI,CAAC,MAAM,CAAC,QAAQ,GAAG,CAAC,EAAE,CAAC;YAC7B,IAAI,CAAC,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,EAAE,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;QACxE,CAAC;IACH,CAAC;IAED;;OAEG;IACH,OAAO;QACL,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;QACxB,IAAI,CAAC,UAAU,EAAE,CAAC;QAElB,6CAA6C;QAC7C,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE,CAAC;IAC1B,CAAC;IAED;;OAEG;IACK,UAAU;QAChB,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,EAAE,CAAC;YAC/B,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YAC3B,IAAI,CAAC,OAAO,GAAG,SAAS,CAAC;QAC3B,CAAC;IACH,CAAC;IAED;;;OAGG;IACK,aAAa,CAAC,MAA8B;QAClD,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC;QAC3C,MAAM,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,GAAG,MAAM,CAAC;QAExD,MAAM,SAAS,GAAG,CAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,CAAC,CAAC;QAClE,KAAK,MAAM,GAAG,IAAI,SAAS,EAAE,CAAC;YAC5B,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;QACvC,CAAC;QAED,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,EAAE,gBAAgB,EAAE,MAAM,CAAC,CAAC;QAEvD,IAAI,kBAAkB,KAAK,QAAQ,EAAE,CAAC;YACpC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC;YAC5C,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,EAAE,WAAW,EAAE,kBAAkB,CAAC,CAAC;QAChE,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,EAAE,kBAAkB,EAAE,MAAM,CAAC,CAAC;QAC3D,CAAC;IACH,CAAC;~~wGA1EU~~,iBAAiB;4FAAjB,iBAAiB,~~wECd9B~~,oUASC;;~~4FDKY~~,iBAAiB;~~kBAR7B~~,SAAS;+~~BAEE~~,cAAc,~~cACZ~~,~~IAAI,mBAGC,~~uBAAuB,CAAC,MAAM","sourcesContent":["import { Component, computed, signal, ElementRef, inject, Renderer2, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';\nimport type { SnackbarData } from './snackbar.types';\n\n/*\n \n /\n@Component({\~~n // eslint-disable-next-line @angular-eslint/component-selector~~\n selector: 'c80-snackbar',\n ~~standalone: true,\n~~ templateUrl: './snackbar.component.html',\n styleUrl: './snackbar.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SnackbarComponent {\n private readonly elementRef = inject(ElementRef);\n private readonly renderer = inject(Renderer2);\n private readonly cdr = inject(ChangeDetectorRef);\n\n ~~/ v8 ignore next /\n~~ readonly data = signal<SnackbarData \| null>(null);\n ~~/ v8 ignore next /\n~~ readonly visible = signal(false);\n\n private timerId?: ReturnType<typeof setTimeout>;\n\n readonly panelClasses = computed(() => this.data()?.config.panelClass.join(' ') ?? '');\n\n /\n \n * @param data\n /\n show(data: SnackbarData): void {\n this.clearTimer();\n this.data.set(data);\n this.applyPosition(data.config);\n this.visible.set(true);\n\n // Marcar para revisión de cambios con OnPush\n this.cdr.markForCheck();\n\n if (data.config.duration > 0) {\n this.timerId = setTimeout(() => this.dismiss(), data.config.duration);\n }\n }\n\n /\n \n /\n dismiss(): void {\n this.visible.set(false);\n this.clearTimer();\n\n // Marcar para revisión de cambios con OnPush\n this.cdr.markForCheck();\n }\n\n /\n \n /\n private clearTimer(): void {\n if (this.timerId !== undefined) {\n clearTimeout(this.timerId);\n this.timerId = undefined;\n }\n }\n\n /\n \n * @param config\n */\n private applyPosition(config: SnackbarData['config']): void {\n const host = this.elementRef.nativeElement;\n const { verticalPosition, horizontalPosition } = config;\n\n const positions = ['top', 'bottom', 'left', 'right', 'transform'];\n for (const pos of positions) {\n this.renderer.removeStyle(host, pos);\n }\n\n this.renderer.setStyle(host, verticalPosition, '1rem');\n\n if (horizontalPosition === 'center') {\n this.renderer.setStyle(host, 'left', '50%');\n this.renderer.setStyle(host, 'transform', 'translateX(-50%)');\n } else {\n this.renderer.setStyle(host, horizontalPosition, '1rem');\n }\n }\n}\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}"]}
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 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 readonly data = signal<SnackbarData \| null>(null);\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}"]}

package/esm2022/lib/snackbar/snackbar.service.js CHANGED Viewed

@@ -40,10 +40,10 @@ export class SnackbarService {
         }
         this.componentRef.instance.show(data);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: SnackbarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: SnackbarService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SnackbarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SnackbarService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: SnackbarService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SnackbarService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',

package/esm2022/lib/snackbar/snackbar.types.js CHANGED Viewed

	@@ -1,2 +1 @@
1	- export {};
2 1	//# sourceMappingURL=snackbar.types.js.map

package/esm2022/lib/spinner/spinner.component.js CHANGED Viewed

@@ -4,14 +4,14 @@ import * as i0 from "@angular/core";
  *
  */
 export class SpinnerComponent {
-    size = input(40, ...(ngDevMode ? [{ debugName: "size" }] : []));
-    borderWidth = input(3, ...(ngDevMode ? [{ debugName: "borderWidth" }] : []));
-    color = input('var(--color-primary)', ...(ngDevMode ? [{ debugName: "color" }] : []));
-    message = input('', ...(ngDevMode ? [{ debugName: "message" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", 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 });
+    size = input(40, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    borderWidth = input(3, ...(ngDevMode ? [{ debugName: "borderWidth" }] : /* istanbul ignore next */ []));
+    color = input('var(--color-primary)', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    message = input('', ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: SpinnerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SpinnerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c80-spinner', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[style.--size.px]': 'size()',

package/esm2022/lib/spinner/spinner.component.js.map CHANGED Viewed

	@@ -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;~~AAcH~~,MAAM,OAAO,gBAAgB;IAChB,IAAI,GAAG,KAAK,CAAS,EAAE,~~gDAAC~~,CAAC;IACzB,WAAW,GAAG,KAAK,CAAS,CAAC,~~uDAAC~~,CAAC;IAC/B,KAAK,GAAG,KAAK,CAAS,sBAAsB,~~iDAAC~~,CAAC;IAC9C,OAAO,GAAG,KAAK,CAAS,EAAE,~~mDAAC~~,CAAC;wGAJ5B,gBAAgB;4FAAhB,gBAAgB,~~ktBClB7B~~,iKAKM;;~~4FDaO~~,gBAAgB;~~kBAb5B~~,SAAS;+~~BAEI~~,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';\n\n/*\n \n */\n@Component({\~~n // eslint-disable-next-line @angular-eslint/component-selector~~\n selector: 'c80-spinner',\n imports: [],\n templateUrl: './spinner.component.html',\n styleUrl: './spinner.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '[style.--size.px]': 'size()',\n '[style.--border-width.px]': 'borderWidth()',\n '[style.--border-top-color]': 'color()'\n }\n})\nexport class SpinnerComponent {\n readonly size = input<number>(40);\n readonly borderWidth = input<number>(3);\n readonly color = input<string>('var(--color-primary)');\n readonly message = input<string>('');\n}\n","<div class=\"spinner\">\n <div class=\"spinner__circle\"></div>\n @if (message()) {\n <p class=\"spinner__message\">{{ message() }}</p>\n }\n</div>"]}
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>"]}

package/esm2022/lib/stat-card/stat-card.component.js CHANGED Viewed

@@ -5,13 +5,12 @@ import * as i0 from "@angular/core";
  *
  */
 export class StatCardComponent {
-    /* v8 ignore next */
-    cards = input([], ...(ngDevMode ? [{ debugName: "cards" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: StatCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", 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\">\n  @for (card of cards(); track card.text) {\n  <!-- eslint-disable-next-line @angular-eslint/template/no-inline-styles -->\n  <div class=\"stat-card\" [style.border-left-color]=\"card.color\">\n    <div class=\"stat-card-content\">\n      <div class=\"stat-content\">\n        <c80-icon [icon]=\"card.icon\" [color]=\"'secondary'\" [size]=\"1.1\" />\n        <div class=\"stat-info\">\n          <div class=\"stat-number\">{{ card.count }}</div>\n          <div class=\"stat-label\">{{ card.text }}</div>\n        </div>\n      </div>\n    </div>\n  </div>\n  }\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 });
+    cards = input([], ...(ngDevMode ? [{ debugName: "cards" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StatCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: StatCardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StatCardComponent, decorators: [{
             type: Component,
-            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  <!-- eslint-disable-next-line @angular-eslint/template/no-inline-styles -->\n  <div class=\"stat-card\" [style.border-left-color]=\"card.color\">\n    <div class=\"stat-card-content\">\n      <div class=\"stat-content\">\n        <c80-icon [icon]=\"card.icon\" [color]=\"'secondary'\" [size]=\"1.1\" />\n        <div class=\"stat-info\">\n          <div class=\"stat-number\">{{ card.count }}</div>\n          <div class=\"stat-label\">{{ card.text }}</div>\n        </div>\n      </div>\n    </div>\n  </div>\n  }\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"] }]
+            args: [{ selector: 'c80-stat-card', 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"] }]
         }], propDecorators: { cards: [{ type: i0.Input, args: [{ isSignal: true, alias: "cards", required: false }] }] } });
 //# sourceMappingURL=stat-card.component.js.map

package/esm2022/lib/stat-card/stat-card.component.js.map CHANGED Viewed

	@@ -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;~~AAUH~~,MAAM,OAAO,iBAAiB;~~IAC5B~~,~~oBAAoB;IACX,~~KAAK,GAAG,KAAK,CAAY,EAAE,~~iDAAC~~,CAAC;~~wGAF3B~~,iBAAiB;4FAAjB,iBAAiB,~~6MChB9B,+lBAeM~~,~~6zBDJM~~,aAAa;;4FAKZ,iBAAiB;~~kBAT7B~~,SAAS;+~~BAEE~~,eAAe,~~cACb~~,~~IAAI,WACP,~~CAAC,aAAa,CAAC,mBAGP,uBAAuB,CAAC,MAAM","sourcesContent":["import { Component, input, ChangeDetectionStrategy } from '@angular/core';\nimport { IconComponent } from '../icon';\nimport type { CardDef } from './stat-card.types';\n\n/*\n \n /\n@Component({\~~n // eslint-disable-next-line @angular-eslint/component-selector~~\n selector: 'c80-stat-card',\n ~~standalone: true,\n~~ imports: [IconComponent],\n templateUrl: './stat-card.component.html',\n styleUrls: ['./stat-card.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class StatCardComponent {\n ~~/ v8 ignore next */\n~~ readonly cards = input<CardDef[]>([]);\n}\n","<div class=\"stats-section py-4\">\n @for (card of cards(); track card.text) {\n ~~<!-- eslint-disable-next-line @angular-eslint/template/no-inline-styles -->\n~~ <div class=\"stat-card\" [style.border-left-color]=\"card.color\">\n <div class=\"stat-card-content\">\n <div class=\"stat-content\">\n <c80-icon [icon]=\"card.icon\" [color]=\"'secondary'\" [size]=\"1.1\" />\n <div class=\"stat-info\">\n <div class=\"stat-number\">{{ card.count }}</div>\n <div class=\"stat-label\">{{ card.text }}</div>\n </div>\n </div>\n </div>\n </div>\n }\n</div>"]}
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;AAQH,MAAM,OAAO,iBAAiB;IACnB,KAAK,GAAG,KAAK,CAAY,EAAE,4EAAC,CAAC;wGAD3B,iBAAiB;4FAAjB,iBAAiB,6MCd9B,4iBAcM,6zBDLM,aAAa;;4FAKZ,iBAAiB;kBAP7B,SAAS;+BACE,eAAe,WAChB,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 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 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>"]}

package/esm2022/lib/stat-card/stat-card.types.js CHANGED Viewed

	@@ -1,2 +1 @@
1	- export {};
2 1	//# sourceMappingURL=stat-card.types.js.map

package/esm2022/lib/tab/c80-tab.component.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { Component, output, model, ChangeDetectionStrategy, contentChildren } from '@angular/core';
+import { Component, model, ChangeDetectionStrategy, contentChildren } from '@angular/core';
 import { NgTemplateOutlet } from '@angular/common';
 import { C80TabItemDirective } from './directives/c80-tab-item.directive';
 import { C80TabLabelDirective } from './directives/c80-tab-label.directive';
@@ -7,18 +7,15 @@ import * as i0 from "@angular/core";
  *
  */
 export class TabComponent {
-    tabs = contentChildren(C80TabItemDirective, ...(ngDevMode ? [{ debugName: "tabs" }] : []));
-    labels = contentChildren(C80TabLabelDirective, ...(ngDevMode ? [{ debugName: "labels" }] : []));
-    /* v8 ignore next */
-    selectedIndex = model(0, ...(ngDevMode ? [{ debugName: "selectedIndex" }] : []));
-    selectedIndexChange = output();
+    tabs = contentChildren(C80TabItemDirective, ...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
+    labels = contentChildren(C80TabLabelDirective, ...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
+    selectedIndex = model(0, ...(ngDevMode ? [{ debugName: "selectedIndex" }] : /* istanbul ignore next */ []));
     /**
      *
      * @param index
      */
     onTabClick(index) {
         this.selectedIndex.set(index);
-        this.selectedIndexChange.emit(index);
     }
     /**
      *
@@ -40,11 +37,11 @@ export class TabComponent {
         const label = labelList[index];
         return label?.template ?? null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: TabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    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" }, 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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: TabComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TabComponent, decorators: [{
             type: Component,
-            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"] }]
-        }], 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"] }] } });
+            args: [{ selector: 'c80-tab', 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"] }]
+        }], 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"] }] } });
 //# sourceMappingURL=c80-tab.component.js.map