@c80/ui 1.0.52 → 1.0.53
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/card-level/card-level.component.js +4 -3
- package/esm2022/lib/card-level/card-level.component.js.map +1 -1
- package/esm2022/lib/icon/icon.component.js +13 -3
- package/esm2022/lib/icon/icon.component.js.map +1 -1
- package/esm2022/lib/modal/modal.component.js +4 -3
- package/esm2022/lib/modal/modal.component.js.map +1 -1
- package/esm2022/lib/modal/modal.service.js +3 -3
- package/esm2022/lib/modal/modal.service.js.map +1 -1
- package/esm2022/lib/select/select.component.js +14 -3
- package/esm2022/lib/select/select.component.js.map +1 -1
- package/esm2022/lib/snackbar/index.js +1 -0
- package/esm2022/lib/snackbar/index.js.map +1 -1
- package/esm2022/lib/snackbar/snackbar.component.js +6 -4
- package/esm2022/lib/snackbar/snackbar.component.js.map +1 -1
- package/esm2022/lib/snackbar/snackbar.service.js +3 -3
- package/esm2022/lib/snackbar/snackbar.service.js.map +1 -1
- package/esm2022/lib/stat-card/stat-card.component.js +4 -3
- package/esm2022/lib/stat-card/stat-card.component.js.map +1 -1
- package/esm2022/lib/tab/c80-tab-item.directive.js +3 -3
- package/esm2022/lib/tab/c80-tab-item.directive.js.map +1 -1
- package/esm2022/lib/tab/c80-tab-label.directive.js +3 -3
- package/esm2022/lib/tab/c80-tab-label.directive.js.map +1 -1
- package/esm2022/lib/tab/c80-tab.component.js +5 -4
- package/esm2022/lib/tab/c80-tab.component.js.map +1 -1
- package/esm2022/lib/table/table-column-visibility.service.js +3 -3
- package/esm2022/lib/table/table-column-visibility.service.js.map +1 -1
- package/esm2022/lib/table/table-crud-state.service.js +3 -3
- package/esm2022/lib/table/table-crud-state.service.js.map +1 -1
- package/esm2022/lib/table/table-data-converter.service.js +3 -3
- package/esm2022/lib/table/table-data-converter.service.js.map +1 -1
- package/esm2022/lib/table/table-data-utils.service.js +3 -3
- package/esm2022/lib/table/table-data-utils.service.js.map +1 -1
- package/esm2022/lib/table/table-selection.service.js +3 -3
- package/esm2022/lib/table/table-selection.service.js.map +1 -1
- package/esm2022/lib/table/table.component.js +3 -3
- package/esm2022/lib/table/table.component.js.map +1 -1
- package/lib/snackbar/index.d.ts +1 -0
- package/package.json +1 -1
|
@@ -2,6 +2,7 @@ import { Component, input, computed, ChangeDetectionStrategy } from '@angular/co
|
|
|
2
2
|
import * as i0 from "@angular/core";
|
|
3
3
|
export class CardLevelComponent {
|
|
4
4
|
cardLevelData = input.required(...(ngDevMode ? [{ debugName: "cardLevelData" }] : []));
|
|
5
|
+
/* v8 ignore next */
|
|
5
6
|
size = input(1, ...(ngDevMode ? [{ debugName: "size" }] : [])); // Multiplicador del tamaño base (220px)
|
|
6
7
|
// ID único generado para el componente
|
|
7
8
|
generatedId = computed(() => {
|
|
@@ -44,10 +45,10 @@ export class CardLevelComponent {
|
|
|
44
45
|
}
|
|
45
46
|
return 'var(--color-success)';
|
|
46
47
|
}, ...(ngDevMode ? [{ debugName: "fillColor" }] : []));
|
|
47
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
48
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
48
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: CardLevelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
49
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: CardLevelComponent, isStandalone: true, selector: "c80-card-level", inputs: { cardLevelData: { classPropertyName: "cardLevelData", publicName: "cardLevelData", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/no-inline-styles -->\n<div class=\"card-level-container\" [style.width]=\"cardWidth()\">\n <label [for]=\"generatedId()\">\n <strong>{{ cardLevelData().label }}</strong>\n\n <span class=\"value-display\">\n @if (isBidirectional()) {\n <!-- Barra bidireccional desde el centro -->\n <div class=\"bidirectional-meter\">\n <div class=\"meter-track\">\n <div class=\"center-line\"></div>\n <div class=\"meter-fill\" [class.fill-left]=\"fillDirection() === 'left'\" [class.fill-right]=\"fillDirection() === 'right'\" [style.width.%]=\"bidirectionalFillPercent()\" [style.background]=\"fillColor()\">\n </div>\n </div>\n </div>\n } @else {\n <!-- Meter est\u00E1ndar para rangos unidireccionales -->\n <meter [id]=\"generatedId()\" [optimum]=\"cardLevelData().optimum\" [min]=\"cardLevelData().min\" [max]=\"cardLevelData().max\" [low]=\"cardLevelData().low\" [high]=\"cardLevelData().high\" [value]=\"cardLevelData().value\">\n </meter>\n }\n\n {{ cardLevelData().value }}{{ cardLevelData().unit }}\n </span>\n </label>\n</div>\n<!-- eslint-enable @angular-eslint/template/no-inline-styles -->", styles: [".card-level-container{background:#fff;border-radius:5px;padding:8px;margin:4px;box-shadow:0 4px 6px #0000001a,0 1px 3px #00000014;min-width:100px;flex:1}.card-level-container label{display:flex;flex-direction:column;margin:0}.card-level-container label strong{font-size:12px;font-weight:600;color:#2d3748;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}.card-level-container label .value-display{font-size:12px;font-weight:600;color:#1a202c;text-align:center;padding:0 5px;background:#4299e11a;border-radius:5px}.card-level-container label .bidirectional-meter{width:100%;margin-bottom:4px}.card-level-container label .bidirectional-meter .meter-track{position:relative;width:100%;height:10px;background:#e2e8f0;border-radius:12px;box-shadow:inset 0 2px 4px #0000001a;overflow:hidden}.card-level-container label .bidirectional-meter .meter-track .center-line{position:absolute;left:50%;top:0;bottom:0;width:4px;background:#4a5568;transform:translate(-50%);z-index:1}.card-level-container label .bidirectional-meter .meter-track .meter-fill{position:absolute;top:0;bottom:0;border-radius:5px}.card-level-container label .bidirectional-meter .meter-track .meter-fill.fill-right{left:50%}.card-level-container label .bidirectional-meter .meter-track .meter-fill.fill-left{right:50%}.card-level-container label meter{width:100%;border-radius:12px;border:none;background:#e2e8f0;margin-bottom:4px}.card-level-container label meter::-webkit-meter-bar{background:#e2e8f0;border-radius:12px;box-shadow:inset 0 2px 4px #0000001a}.card-level-container label meter::-webkit-meter-optimum-value{background:linear-gradient(90deg,#48bb78,#38a169);border-radius:12px}.card-level-container label meter::-webkit-meter-suboptimum-value{background:linear-gradient(90deg,#ed8936,#dd6b20);border-radius:12px}.card-level-container label meter::-webkit-meter-even-less-good-value{background:linear-gradient(90deg,#f56565,#e53e3e);border-radius:12px}.card-level-container label meter::-moz-meter-bar{background:linear-gradient(90deg,#48bb78,#38a169);border-radius:12px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
49
50
|
}
|
|
50
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
51
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: CardLevelComponent, decorators: [{
|
|
51
52
|
type: Component,
|
|
52
53
|
args: [{ selector: 'c80-card-level', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- eslint-disable @angular-eslint/template/no-inline-styles -->\n<div class=\"card-level-container\" [style.width]=\"cardWidth()\">\n <label [for]=\"generatedId()\">\n <strong>{{ cardLevelData().label }}</strong>\n\n <span class=\"value-display\">\n @if (isBidirectional()) {\n <!-- Barra bidireccional desde el centro -->\n <div class=\"bidirectional-meter\">\n <div class=\"meter-track\">\n <div class=\"center-line\"></div>\n <div class=\"meter-fill\" [class.fill-left]=\"fillDirection() === 'left'\" [class.fill-right]=\"fillDirection() === 'right'\" [style.width.%]=\"bidirectionalFillPercent()\" [style.background]=\"fillColor()\">\n </div>\n </div>\n </div>\n } @else {\n <!-- Meter est\u00E1ndar para rangos unidireccionales -->\n <meter [id]=\"generatedId()\" [optimum]=\"cardLevelData().optimum\" [min]=\"cardLevelData().min\" [max]=\"cardLevelData().max\" [low]=\"cardLevelData().low\" [high]=\"cardLevelData().high\" [value]=\"cardLevelData().value\">\n </meter>\n }\n\n {{ cardLevelData().value }}{{ cardLevelData().unit }}\n </span>\n </label>\n</div>\n<!-- eslint-enable @angular-eslint/template/no-inline-styles -->", styles: [".card-level-container{background:#fff;border-radius:5px;padding:8px;margin:4px;box-shadow:0 4px 6px #0000001a,0 1px 3px #00000014;min-width:100px;flex:1}.card-level-container label{display:flex;flex-direction:column;margin:0}.card-level-container label strong{font-size:12px;font-weight:600;color:#2d3748;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}.card-level-container label .value-display{font-size:12px;font-weight:600;color:#1a202c;text-align:center;padding:0 5px;background:#4299e11a;border-radius:5px}.card-level-container label .bidirectional-meter{width:100%;margin-bottom:4px}.card-level-container label .bidirectional-meter .meter-track{position:relative;width:100%;height:10px;background:#e2e8f0;border-radius:12px;box-shadow:inset 0 2px 4px #0000001a;overflow:hidden}.card-level-container label .bidirectional-meter .meter-track .center-line{position:absolute;left:50%;top:0;bottom:0;width:4px;background:#4a5568;transform:translate(-50%);z-index:1}.card-level-container label .bidirectional-meter .meter-track .meter-fill{position:absolute;top:0;bottom:0;border-radius:5px}.card-level-container label .bidirectional-meter .meter-track .meter-fill.fill-right{left:50%}.card-level-container label .bidirectional-meter .meter-track .meter-fill.fill-left{right:50%}.card-level-container label meter{width:100%;border-radius:12px;border:none;background:#e2e8f0;margin-bottom:4px}.card-level-container label meter::-webkit-meter-bar{background:#e2e8f0;border-radius:12px;box-shadow:inset 0 2px 4px #0000001a}.card-level-container label meter::-webkit-meter-optimum-value{background:linear-gradient(90deg,#48bb78,#38a169);border-radius:12px}.card-level-container label meter::-webkit-meter-suboptimum-value{background:linear-gradient(90deg,#ed8936,#dd6b20);border-radius:12px}.card-level-container label meter::-webkit-meter-even-less-good-value{background:linear-gradient(90deg,#f56565,#e53e3e);border-radius:12px}.card-level-container label meter::-moz-meter-bar{background:linear-gradient(90deg,#48bb78,#38a169);border-radius:12px}\n"] }]
|
|
53
54
|
}], propDecorators: { cardLevelData: [{ type: i0.Input, args: [{ isSignal: true, alias: "cardLevelData", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"card-level.component.js","sourceRoot":"","sources":["../../../../../libs/ui/src/lib/card-level/card-level.component.ts","../../../../../libs/ui/src/lib/card-level/card-level.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;;AAYpF,MAAM,OAAO,kBAAkB;IAC7B,aAAa,GAAG,KAAK,CAAC,QAAQ,wDAAiB,CAAC;IAChD,IAAI,GAAG,KAAK,CAAS,CAAC,gDAAC,CAAC,CAAC,wCAAwC;IAEjE,uCAAuC;IAC9B,WAAW,GAAG,QAAQ,CAAC,GAAG,EAAE;QACnC,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;QAC/E,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,KAAK,CAAC,CAAC;QACpD,OAAO,GAAG,KAAK,IAAI,SAAS,EAAE,CAAC;IACjC,CAAC,uDAAC,CAAC;IAEH,6BAA6B;IACpB,SAAS,GAAG,QAAQ,CAAC,GAAG,EAAE;QACjC,MAAM,SAAS,GAAG,GAAG,CAAC;QACtB,MAAM,eAAe,GAAG,SAAS,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;QAChD,OAAO,GAAG,eAAe,IAAI,CAAC;IAChC,CAAC,qDAAC,CAAC;IAEH,oEAAoE;IACpE,eAAe,GAAG,QAAQ,CAAC,GAAG,EAAE;QAC9B,MAAM,IAAI,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;QAClC,OAAO,IAAI,CAAC,GAAG,GAAG,CAAC,IAAI,IAAI,CAAC,GAAG,GAAG,CAAC,CAAC;IACtC,CAAC,2DAAC,CAAC;IAEH,4DAA4D;IAC5D,wBAAwB,GAAG,QAAQ,CAAC,GAAG,EAAE;QACvC,MAAM,IAAI,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;QAClC,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC;QACvC,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,GAAG,UAAU,CAAC,GAAG,GAAG,CAAC;IACjD,CAAC,oEAAC,CAAC;IAEH,+CAA+C;IAC/C,aAAa,GAAG,QAAQ,CAAC,GAAG,EAAE;QAC5B,OAAO,IAAI,CAAC,aAAa,EAAE,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC;IAC5D,CAAC,yDAAC,CAAC;IAEH,kCAAkC;IAClC,SAAS,GAAG,QAAQ,CAAC,GAAG,EAAE;QACxB,MAAM,IAAI,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;QAClC,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACtC,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACpC,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAElC,IAAI,QAAQ,IAAI,OAAO,EAAE,CAAC;YACxB,OAAO,qBAAqB,CAAC;QAC/B,CAAC;QACD,IAAI,QAAQ,IAAI,MAAM,EAAE,CAAC;YACvB,OAAO,sBAAsB,CAAC;QAChC,CAAC;QACD,OAAO,sBAAsB,CAAC;IAChC,CAAC,qDAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"card-level.component.js","sourceRoot":"","sources":["../../../../../libs/ui/src/lib/card-level/card-level.component.ts","../../../../../libs/ui/src/lib/card-level/card-level.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;;AAYpF,MAAM,OAAO,kBAAkB;IAC7B,aAAa,GAAG,KAAK,CAAC,QAAQ,wDAAiB,CAAC;IAChD,oBAAoB;IACpB,IAAI,GAAG,KAAK,CAAS,CAAC,gDAAC,CAAC,CAAC,wCAAwC;IAEjE,uCAAuC;IAC9B,WAAW,GAAG,QAAQ,CAAC,GAAG,EAAE;QACnC,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;QAC/E,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,KAAK,CAAC,CAAC;QACpD,OAAO,GAAG,KAAK,IAAI,SAAS,EAAE,CAAC;IACjC,CAAC,uDAAC,CAAC;IAEH,6BAA6B;IACpB,SAAS,GAAG,QAAQ,CAAC,GAAG,EAAE;QACjC,MAAM,SAAS,GAAG,GAAG,CAAC;QACtB,MAAM,eAAe,GAAG,SAAS,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;QAChD,OAAO,GAAG,eAAe,IAAI,CAAC;IAChC,CAAC,qDAAC,CAAC;IAEH,oEAAoE;IACpE,eAAe,GAAG,QAAQ,CAAC,GAAG,EAAE;QAC9B,MAAM,IAAI,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;QAClC,OAAO,IAAI,CAAC,GAAG,GAAG,CAAC,IAAI,IAAI,CAAC,GAAG,GAAG,CAAC,CAAC;IACtC,CAAC,2DAAC,CAAC;IAEH,4DAA4D;IAC5D,wBAAwB,GAAG,QAAQ,CAAC,GAAG,EAAE;QACvC,MAAM,IAAI,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;QAClC,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC;QACvC,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,GAAG,UAAU,CAAC,GAAG,GAAG,CAAC;IACjD,CAAC,oEAAC,CAAC;IAEH,+CAA+C;IAC/C,aAAa,GAAG,QAAQ,CAAC,GAAG,EAAE;QAC5B,OAAO,IAAI,CAAC,aAAa,EAAE,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC;IAC5D,CAAC,yDAAC,CAAC;IAEH,kCAAkC;IAClC,SAAS,GAAG,QAAQ,CAAC,GAAG,EAAE;QACxB,MAAM,IAAI,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;QAClC,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACtC,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACpC,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAElC,IAAI,QAAQ,IAAI,OAAO,EAAE,CAAC;YACxB,OAAO,qBAAqB,CAAC;QAC/B,CAAC;QACD,IAAI,QAAQ,IAAI,MAAM,EAAE,CAAC;YACvB,OAAO,sBAAsB,CAAC;QAChC,CAAC;QACD,OAAO,sBAAsB,CAAC;IAChC,CAAC,qDAAC,CAAC;wGAnDQ,kBAAkB;4FAAlB,kBAAkB,0VCZ/B,qtCAyBgE;;4FDbnD,kBAAkB;kBAT9B,SAAS;+BAEE,gBAAgB,cACd,IAAI,WACP,EAAE,mBAGM,uBAAuB,CAAC,MAAM","sourcesContent":["import { Component, input, computed, ChangeDetectionStrategy } from '@angular/core';\nimport type { CardLevelData } from './card-level.interface';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'c80-card-level',\n standalone: true,\n imports: [],\n templateUrl: './card-level.component.html',\n styleUrl: './card-level.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class CardLevelComponent {\n cardLevelData = input.required<CardLevelData>();\n /* v8 ignore next */\n size = input<number>(1); // Multiplicador del tamaño base (220px)\n\n // ID único generado para el componente\n readonly generatedId = computed(() => {\n const label = this.cardLevelData().label.toLowerCase().replaceAll(/\\s+/g, '-');\n const randomNum = Math.floor(Math.random() * 10000);\n return `${label}-${randomNum}`;\n });\n\n // Ancho calculado de la card\n readonly cardWidth = computed(() => {\n const baseWidth = 140;\n const calculatedWidth = baseWidth * this.size();\n return `${calculatedWidth}px`;\n });\n\n // Detecta si el rango es bidireccional (min negativo, max positivo)\n isBidirectional = computed(() => {\n const data = this.cardLevelData();\n return data.min < 0 && data.max > 0;\n });\n\n // Calcula el porcentaje de fill para barras bidireccionales\n bidirectionalFillPercent = computed(() => {\n const data = this.cardLevelData();\n const totalRange = data.max - data.min;\n return Math.abs(data.value / totalRange) * 100;\n });\n\n // Determina la dirección del fill (left/right)\n fillDirection = computed(() => {\n return this.cardLevelData().value >= 0 ? 'right' : 'left';\n });\n\n // Color según el valor y umbrales\n fillColor = computed(() => {\n const data = this.cardLevelData();\n const absValue = Math.abs(data.value);\n const absHigh = Math.abs(data.high);\n const absLow = Math.abs(data.low);\n\n if (absValue >= absHigh) {\n return 'var(--color-danger)';\n }\n if (absValue >= absLow) {\n return 'var(--color-warning)';\n }\n return 'var(--color-success)';\n });\n}\n","<!-- eslint-disable @angular-eslint/template/no-inline-styles -->\n<div class=\"card-level-container\" [style.width]=\"cardWidth()\">\n <label [for]=\"generatedId()\">\n <strong>{{ cardLevelData().label }}</strong>\n\n <span class=\"value-display\">\n @if (isBidirectional()) {\n <!-- Barra bidireccional desde el centro -->\n <div class=\"bidirectional-meter\">\n <div class=\"meter-track\">\n <div class=\"center-line\"></div>\n <div class=\"meter-fill\" [class.fill-left]=\"fillDirection() === 'left'\" [class.fill-right]=\"fillDirection() === 'right'\" [style.width.%]=\"bidirectionalFillPercent()\" [style.background]=\"fillColor()\">\n </div>\n </div>\n </div>\n } @else {\n <!-- Meter estándar para rangos unidireccionales -->\n <meter [id]=\"generatedId()\" [optimum]=\"cardLevelData().optimum\" [min]=\"cardLevelData().min\" [max]=\"cardLevelData().max\" [low]=\"cardLevelData().low\" [high]=\"cardLevelData().high\" [value]=\"cardLevelData().value\">\n </meter>\n }\n\n {{ cardLevelData().value }}{{ cardLevelData().unit }}\n </span>\n </label>\n</div>\n<!-- eslint-enable @angular-eslint/template/no-inline-styles -->"]}
|
|
@@ -4,15 +4,25 @@ import { BASE_ICON_SIZE, BASE_ICON_COLORS, DISABLED_COLOR, DEFAULT_ICON_COLOR, D
|
|
|
4
4
|
import { transformToBoolean } from './icon.utils';
|
|
5
5
|
import * as i0 from "@angular/core";
|
|
6
6
|
export class C80IconComponent {
|
|
7
|
+
/* v8 ignore next */
|
|
7
8
|
icon = input('check', ...(ngDevMode ? [{ debugName: "icon" }] : [])); // Tipo de icono a mostrar
|
|
9
|
+
/* v8 ignore next */
|
|
8
10
|
color = input('dark', ...(ngDevMode ? [{ debugName: "color" }] : [])); // Color del icono (primary, secondary, warn, success, dark)
|
|
11
|
+
/* v8 ignore next */
|
|
9
12
|
customColor = input(undefined, ...(ngDevMode ? [{ debugName: "customColor" }] : [])); // Color personalizado (sobrescribe color)
|
|
13
|
+
/* v8 ignore next */
|
|
10
14
|
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : [])); // Estado deshabilitado
|
|
15
|
+
/* v8 ignore next */
|
|
11
16
|
size = input(1, ...(ngDevMode ? [{ debugName: "size" }] : [])); // Multiplicador de tamaño (1 = 24px)
|
|
17
|
+
/* v8 ignore next */
|
|
12
18
|
button = input(false, ...(ngDevMode ? [{ debugName: "button", transform: transformToBoolean }] : [{ transform: transformToBoolean }])); // Renderiza como botón clickeable
|
|
19
|
+
/* v8 ignore next */
|
|
13
20
|
border = input(false, ...(ngDevMode ? [{ debugName: "border", transform: transformToBoolean }] : [{ transform: transformToBoolean }])); // Agrega borde al wrapper
|
|
21
|
+
/* v8 ignore next */
|
|
14
22
|
type = input('button', ...(ngDevMode ? [{ debugName: "type" }] : [])); // Tipo de botón (button, submit, reset)
|
|
23
|
+
/* v8 ignore next */
|
|
15
24
|
textLeft = input(undefined, ...(ngDevMode ? [{ debugName: "textLeft" }] : [])); // Texto a la izquierda del icono
|
|
25
|
+
/* v8 ignore next */
|
|
16
26
|
textRight = input(undefined, ...(ngDevMode ? [{ debugName: "textRight" }] : [])); // Texto a la derecha del icono
|
|
17
27
|
iconClick = output(); // Evento emitido al hacer click (solo si button=true)
|
|
18
28
|
iconSize = computed(() => BASE_ICON_SIZE * this.size(), ...(ngDevMode ? [{ debugName: "iconSize" }] : []));
|
|
@@ -38,10 +48,10 @@ export class C80IconComponent {
|
|
|
38
48
|
this.iconClick.emit(event);
|
|
39
49
|
}
|
|
40
50
|
}
|
|
41
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
42
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
51
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: C80IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
52
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: C80IconComponent, isStandalone: true, selector: "c80-icon", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, customColor: { classPropertyName: "customColor", publicName: "customColor", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, button: { classPropertyName: "button", publicName: "button", isSignal: true, isRequired: false, transformFunction: null }, border: { classPropertyName: "border", publicName: "border", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, textLeft: { classPropertyName: "textLeft", publicName: "textLeft", isSignal: true, isRequired: false, transformFunction: null }, textRight: { classPropertyName: "textRight", publicName: "textRight", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { iconClick: "iconClick" }, ngImport: i0, template: "<ng-template #svgContent>\n <!-- eslint-disable-next-line @angular-eslint/template/no-inline-styles -->\n <svg [attr.width]=\"iconSize()\" [attr.height]=\"iconSize()\" viewBox=\"0 0 24 24\" fill=\"none\" [style.opacity]=\"iconOpacity()\">\n @for (shape of additionalShapes(); track $index) {\n @if (shape.type === 'circle') {\n <circle [attr.cx]=\"shape['cx']\" [attr.cy]=\"shape['cy']\" [attr.r]=\"shape['r']\" [attr.stroke]=\"iconColor()\" stroke-width=\"1\" [attr.fill]=\"shape['fill'] === 'color' ? iconColor() : 'none'\" />\n } @else if (shape.type === 'rect') {\n <rect [attr.x]=\"shape['x']\" [attr.y]=\"shape['y']\" [attr.width]=\"shape['width']\" [attr.height]=\"shape['height']\" [attr.rx]=\"shape['rx']\" [attr.stroke]=\"iconColor()\" stroke-width=\"1\" fill=\"none\" />\n } @else if (shape.type === 'path') {\n <path [attr.d]=\"shape['d']\" [attr.stroke]=\"iconColor()\" stroke-width=\"1\" [attr.fill]=\"shape['fill'] === 'color' ? iconColor() : 'none'\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n }\n }\n <path [attr.d]=\"iconPath()\" [attr.stroke]=\"iconColor()\" [attr.fill]=\"icon() === 'delete' ? iconColor() : 'none'\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n</ng-template>\n\n<ng-template #textContent>\n @if (textLeft()) {\n <span class=\"icon-text ms-3\">{{ textLeft() }}</span>\n }\n <!-- eslint-disable-next-line @angular-eslint/template/no-inline-styles -->\n <span class=\"icon-content\" [style.width.px]=\"iconSize() + 8\" [style.height.px]=\"iconSize() + 8\">\n <ng-container *ngTemplateOutlet=\"svgContent\" />\n </span>\n @if (textRight()) {\n <span class=\"icon-text me-3\">{{ textRight() }}</span>\n }\n</ng-template>\n\n@if (button()) {\n<button [type]=\"type()\" [disabled]=\"disabled()\" class=\"icon-wrapper\" [class.icon-wrapper-border]=\"border()\" (click)=\"onButtonClick($event)\">\n <ng-container *ngTemplateOutlet=\"textContent\" />\n</button>\n} @else {\n<span class=\"icon-wrapper\" [class.icon-wrapper-border]=\"border()\">\n <ng-container *ngTemplateOutlet=\"textContent\" />\n</span>\n}", styles: [":host .icon-wrapper{display:inline-flex;align-items:center;gap:8px;background:transparent;padding:0;border:none;outline:none;cursor:pointer;transition:opacity .2s}:host button.icon-wrapper:focus-visible{outline:none;outline-offset:2px;border-radius:4px}:host button.icon-wrapper:disabled{opacity:.5;cursor:default}:host .icon-content{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;min-width:0;min-height:0;padding:4px;margin:0 4px;transition:background .2s;box-sizing:border-box}:host button.icon-wrapper:hover:not(:disabled) .icon-content{background:var(--color-bg-hover)}:host button.icon-wrapper:active:not(:disabled) .icon-content{background:var(--color-bg-tertiary)}:host .icon-text{font-size:14px;line-height:1;white-space:nowrap;-webkit-user-select:none;user-select:none;color:var(--color-text-primary)}:host .icon-wrapper-border{border:1px solid var(--color-border-default);border-radius:4px;padding:4px 8px}:host button.icon-wrapper-border:hover:not(:disabled){border-color:var(--color-border-medium)}:host button.icon-wrapper-border:disabled{border-color:var(--color-border-light)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
43
53
|
}
|
|
44
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
54
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: C80IconComponent, decorators: [{
|
|
45
55
|
type: Component,
|
|
46
56
|
args: [{ selector: 'c80-icon', standalone: true, imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #svgContent>\n <!-- eslint-disable-next-line @angular-eslint/template/no-inline-styles -->\n <svg [attr.width]=\"iconSize()\" [attr.height]=\"iconSize()\" viewBox=\"0 0 24 24\" fill=\"none\" [style.opacity]=\"iconOpacity()\">\n @for (shape of additionalShapes(); track $index) {\n @if (shape.type === 'circle') {\n <circle [attr.cx]=\"shape['cx']\" [attr.cy]=\"shape['cy']\" [attr.r]=\"shape['r']\" [attr.stroke]=\"iconColor()\" stroke-width=\"1\" [attr.fill]=\"shape['fill'] === 'color' ? iconColor() : 'none'\" />\n } @else if (shape.type === 'rect') {\n <rect [attr.x]=\"shape['x']\" [attr.y]=\"shape['y']\" [attr.width]=\"shape['width']\" [attr.height]=\"shape['height']\" [attr.rx]=\"shape['rx']\" [attr.stroke]=\"iconColor()\" stroke-width=\"1\" fill=\"none\" />\n } @else if (shape.type === 'path') {\n <path [attr.d]=\"shape['d']\" [attr.stroke]=\"iconColor()\" stroke-width=\"1\" [attr.fill]=\"shape['fill'] === 'color' ? iconColor() : 'none'\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n }\n }\n <path [attr.d]=\"iconPath()\" [attr.stroke]=\"iconColor()\" [attr.fill]=\"icon() === 'delete' ? iconColor() : 'none'\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n</ng-template>\n\n<ng-template #textContent>\n @if (textLeft()) {\n <span class=\"icon-text ms-3\">{{ textLeft() }}</span>\n }\n <!-- eslint-disable-next-line @angular-eslint/template/no-inline-styles -->\n <span class=\"icon-content\" [style.width.px]=\"iconSize() + 8\" [style.height.px]=\"iconSize() + 8\">\n <ng-container *ngTemplateOutlet=\"svgContent\" />\n </span>\n @if (textRight()) {\n <span class=\"icon-text me-3\">{{ textRight() }}</span>\n }\n</ng-template>\n\n@if (button()) {\n<button [type]=\"type()\" [disabled]=\"disabled()\" class=\"icon-wrapper\" [class.icon-wrapper-border]=\"border()\" (click)=\"onButtonClick($event)\">\n <ng-container *ngTemplateOutlet=\"textContent\" />\n</button>\n} @else {\n<span class=\"icon-wrapper\" [class.icon-wrapper-border]=\"border()\">\n <ng-container *ngTemplateOutlet=\"textContent\" />\n</span>\n}", styles: [":host .icon-wrapper{display:inline-flex;align-items:center;gap:8px;background:transparent;padding:0;border:none;outline:none;cursor:pointer;transition:opacity .2s}:host button.icon-wrapper:focus-visible{outline:none;outline-offset:2px;border-radius:4px}:host button.icon-wrapper:disabled{opacity:.5;cursor:default}:host .icon-content{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;min-width:0;min-height:0;padding:4px;margin:0 4px;transition:background .2s;box-sizing:border-box}:host button.icon-wrapper:hover:not(:disabled) .icon-content{background:var(--color-bg-hover)}:host button.icon-wrapper:active:not(:disabled) .icon-content{background:var(--color-bg-tertiary)}:host .icon-text{font-size:14px;line-height:1;white-space:nowrap;-webkit-user-select:none;user-select:none;color:var(--color-text-primary)}:host .icon-wrapper-border{border:1px solid var(--color-border-default);border-radius:4px;padding:4px 8px}:host button.icon-wrapper-border:hover:not(:disabled){border-color:var(--color-border-medium)}:host button.icon-wrapper-border:disabled{border-color:var(--color-border-light)}\n"] }]
|
|
47
57
|
}], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], customColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "customColor", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], button: [{ type: i0.Input, args: [{ isSignal: true, alias: "button", required: false }] }], border: [{ type: i0.Input, args: [{ isSignal: true, alias: "border", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], textLeft: [{ type: i0.Input, args: [{ isSignal: true, alias: "textLeft", required: false }] }], textRight: [{ type: i0.Input, args: [{ isSignal: true, alias: "textRight", required: false }] }], iconClick: [{ type: i0.Output, args: ["iconClick"] }] } });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icon.component.js","sourceRoot":"","sources":["../../../../../libs/ui/src/lib/icon/icon.component.ts","../../../../../libs/ui/src/lib/icon/icon.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAC5F,OAAO,EACL,cAAc,EACd,gBAAgB,EAChB,cAAc,EACd,kBAAkB,EAClB,gBAAgB,EAChB,sBAAsB,EACtB,eAAe,EACf,UAAU,EACV,sBAAsB,GACvB,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;;AAWlD,MAAM,OAAO,gBAAgB;
|
|
1
|
+
{"version":3,"file":"icon.component.js","sourceRoot":"","sources":["../../../../../libs/ui/src/lib/icon/icon.component.ts","../../../../../libs/ui/src/lib/icon/icon.component.html"],"names":[],"mappings":"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","sourcesContent":["import { NgTemplateOutlet } from '@angular/common';\nimport { Component, input, output, computed, ChangeDetectionStrategy } from '@angular/core';\nimport {\n BASE_ICON_SIZE,\n BASE_ICON_COLORS,\n DISABLED_COLOR,\n DEFAULT_ICON_COLOR,\n DISABLED_OPACITY,\n SECONDARY_WARN_OPACITY,\n DEFAULT_OPACITY,\n ICON_PATHS,\n ICON_ADDITIONAL_SHAPES,\n} from './icon.constants';\nimport type { IconType, ColorType, ButtonType } from './icon.types';\nimport { transformToBoolean } from './icon.utils';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'c80-icon',\n standalone: true,\n imports: [NgTemplateOutlet],\n templateUrl: './icon.component.html',\n styleUrls: ['./icon.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class C80IconComponent {\n /* v8 ignore next */\n readonly icon = input<IconType>('check'); // Tipo de icono a mostrar\n /* v8 ignore next */\n readonly color = input<ColorType>('dark'); // Color del icono (primary, secondary, warn, success, dark)\n /* v8 ignore next */\n readonly customColor = input<string | undefined>(undefined); // Color personalizado (sobrescribe color)\n /* v8 ignore next */\n readonly disabled = input(false); // Estado deshabilitado\n /* v8 ignore next */\n readonly size = input(1); // Multiplicador de tamaño (1 = 24px)\n /* v8 ignore next */\n readonly button = input(false, { transform: transformToBoolean }); // Renderiza como botón clickeable\n /* v8 ignore next */\n readonly border = input(false, { transform: transformToBoolean }); // Agrega borde al wrapper\n /* v8 ignore next */\n readonly type = input<ButtonType>('button'); // Tipo de botón (button, submit, reset)\n /* v8 ignore next */\n readonly textLeft = input<string | undefined>(undefined); // Texto a la izquierda del icono\n /* v8 ignore next */\n readonly textRight = input<string | undefined>(undefined); // Texto a la derecha del icono\n\n readonly iconClick = output<Event>(); // Evento emitido al hacer click (solo si button=true)\n\n readonly iconSize = computed(() => BASE_ICON_SIZE * this.size());\n\n readonly iconColor = computed(() => {\n if (this.disabled()) return DISABLED_COLOR;\n\n const custom = this.customColor();\n if (custom) return custom;\n\n return BASE_ICON_COLORS[this.color()] ?? DEFAULT_ICON_COLOR;\n });\n\n readonly iconOpacity = computed(() => {\n if (this.disabled()) return DISABLED_OPACITY;\n\n const hasCustomColor = this.customColor() !== undefined;\n const isSecondaryOrWarn = ['secondary', 'warn'].includes(this.color());\n\n return !hasCustomColor && isSecondaryOrWarn ? SECONDARY_WARN_OPACITY : DEFAULT_OPACITY;\n });\n\n readonly iconPath = computed(() => ICON_PATHS[this.icon()] ?? ICON_PATHS['default']);\n readonly additionalShapes = computed(() => ICON_ADDITIONAL_SHAPES[this.icon()] ?? []);\n\n onButtonClick(event: Event): void {\n if (!this.disabled()) {\n this.iconClick.emit(event);\n }\n }\n}\n","<ng-template #svgContent>\n <!-- eslint-disable-next-line @angular-eslint/template/no-inline-styles -->\n <svg [attr.width]=\"iconSize()\" [attr.height]=\"iconSize()\" viewBox=\"0 0 24 24\" fill=\"none\" [style.opacity]=\"iconOpacity()\">\n @for (shape of additionalShapes(); track $index) {\n @if (shape.type === 'circle') {\n <circle [attr.cx]=\"shape['cx']\" [attr.cy]=\"shape['cy']\" [attr.r]=\"shape['r']\" [attr.stroke]=\"iconColor()\" stroke-width=\"1\" [attr.fill]=\"shape['fill'] === 'color' ? iconColor() : 'none'\" />\n } @else if (shape.type === 'rect') {\n <rect [attr.x]=\"shape['x']\" [attr.y]=\"shape['y']\" [attr.width]=\"shape['width']\" [attr.height]=\"shape['height']\" [attr.rx]=\"shape['rx']\" [attr.stroke]=\"iconColor()\" stroke-width=\"1\" fill=\"none\" />\n } @else if (shape.type === 'path') {\n <path [attr.d]=\"shape['d']\" [attr.stroke]=\"iconColor()\" stroke-width=\"1\" [attr.fill]=\"shape['fill'] === 'color' ? iconColor() : 'none'\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n }\n }\n <path [attr.d]=\"iconPath()\" [attr.stroke]=\"iconColor()\" [attr.fill]=\"icon() === 'delete' ? iconColor() : 'none'\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n</ng-template>\n\n<ng-template #textContent>\n @if (textLeft()) {\n <span class=\"icon-text ms-3\">{{ textLeft() }}</span>\n }\n <!-- eslint-disable-next-line @angular-eslint/template/no-inline-styles -->\n <span class=\"icon-content\" [style.width.px]=\"iconSize() + 8\" [style.height.px]=\"iconSize() + 8\">\n <ng-container *ngTemplateOutlet=\"svgContent\" />\n </span>\n @if (textRight()) {\n <span class=\"icon-text me-3\">{{ textRight() }}</span>\n }\n</ng-template>\n\n@if (button()) {\n<button [type]=\"type()\" [disabled]=\"disabled()\" class=\"icon-wrapper\" [class.icon-wrapper-border]=\"border()\" (click)=\"onButtonClick($event)\">\n <ng-container *ngTemplateOutlet=\"textContent\" />\n</button>\n} @else {\n<span class=\"icon-wrapper\" [class.icon-wrapper-border]=\"border()\">\n <ng-container *ngTemplateOutlet=\"textContent\" />\n</span>\n}"]}
|
|
@@ -11,6 +11,7 @@ export class C80ModalComponent {
|
|
|
11
11
|
effect(() => {
|
|
12
12
|
if (this.isOpen()) {
|
|
13
13
|
// Auto-focus modal when opened for accessibility
|
|
14
|
+
/* v8 ignore next 8 */
|
|
14
15
|
setTimeout(() => {
|
|
15
16
|
const backdrop = document.querySelector('.modal-backdrop');
|
|
16
17
|
if (backdrop) {
|
|
@@ -76,10 +77,10 @@ export class C80ModalComponent {
|
|
|
76
77
|
getNoText() {
|
|
77
78
|
return this.config().noText ?? 'No';
|
|
78
79
|
}
|
|
79
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
80
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
80
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: C80ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
81
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: C80ModalComponent, isStandalone: true, selector: "c80-modal", ngImport: i0, template: "<!-- Modal Backdrop -->\n@if (isOpen()) {\n<div class=\"modal-backdrop\" [class.show]=\"isVisible()\" tabindex=\"-1\" (click)=\"onBackdropClick($event)\" (keydown.escape)=\"closeModal()\">\n\n <!-- Modal Container -->\n <dialog class=\"modal-container\" [class.show]=\"isVisible()\" [attr.aria-labelledby]=\"'modal-title'\" [open]=\"isVisible()\">\n\n <!-- Modal Header -->\n <div class=\"modal-header\">\n <h4 class=\"modal-title\" id=\"modal-title\">{{ config().title }}</h4>\n <c80-icon [button]=\"true\" icon=\"close\" (iconClick)=\"closeModal()\" title=\"Cerrar\" color=\"warn\" />\n </div>\n\n <!-- Modal Body -->\n <div class=\"modal-body\">\n <p class=\"modal-message\">{{ config().message }}</p>\n </div>\n\n <!-- Modal Footer -->\n <div class=\"modal-footer\">\n\n <!-- Info Modal - Solo OK -->\n @if (showOkButton()) {\n <c80-icon [button]=\"true\" icon=\"check\" textRight=\"OK\" color=\"dark\" (iconClick)=\"onConfirm()\" [border]=\"true\" />\n }\n\n <!-- Yes/No Modal -->\n @if (showYesNoButtons()) {\n <c80-icon [button]=\"true\" icon=\"check\" [textRight]=\"getYesText()\" color=\"dark\" (iconClick)=\"onYes()\" [border]=\"true\" />\n <c80-icon [button]=\"true\" icon=\"cancel\" [textRight]=\"getNoText()\" color=\"warn\" (iconClick)=\"onNo()\" [border]=\"true\" />\n }\n\n <!-- Confirm Modal -->\n @if (showConfirmButtons()) {\n <c80-icon [button]=\"true\" icon=\"check\" [textRight]=\"getConfirmText()\" color=\"dark\" (iconClick)=\"onConfirm()\" [border]=\"true\" />\n <c80-icon [button]=\"true\" icon=\"cancel\" [textRight]=\"getCancelText()\" color=\"warn\" (iconClick)=\"onCancel()\" [border]=\"true\" />\n }\n\n </div>\n </dialog>\n</div>\n}", styles: [".modal-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:1100;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease-in-out;outline:none}.modal-backdrop.show{opacity:1}.modal-container{background:var(--color-bg-primary);border-radius:8px;box-shadow:0 4px 20px #00000026;border:1px solid var(--color-border-default);max-width:400px;width:90%;max-height:90vh;overflow:hidden;transform:scale(.9) translateY(-10px);transition:all .15s ease-out;position:relative;padding:0}.modal-container.show{transform:scale(1) translateY(0)}.modal-container::backdrop{background:transparent}.modal-header{display:flex;align-items:center;gap:8px;padding:16px 20px 12px;border-bottom:1px solid var(--color-border-default);background:var(--color-bg-secondary)}.modal-header .modal-title{flex:1;margin:0;font-size:16px;font-weight:600;color:var(--color-text-primary);line-height:1.3}.modal-body{padding:16px 20px}.modal-body .modal-message{margin:0;font-size:14px;line-height:1.5;color:var(--color-text-primary);white-space:pre-line}.modal-footer{display:flex;justify-content:flex-end;gap:8px;padding:12px 20px 16px;background:var(--color-bg-secondary);border-top:1px solid var(--color-border-default)}@media(max-width:768px){.modal-container{width:95%;margin:10px}.modal-header{padding:12px 16px 8px}.modal-header .modal-title{font-size:15px}.modal-body{padding:12px 16px}.modal-body .modal-message{font-size:13px}.modal-footer{padding:8px 16px 12px;flex-direction:column}}\n"], dependencies: [{ kind: "component", type: C80IconComponent, selector: "c80-icon", inputs: ["icon", "color", "customColor", "disabled", "size", "button", "border", "type", "textLeft", "textRight"], outputs: ["iconClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
81
82
|
}
|
|
82
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
83
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: C80ModalComponent, decorators: [{
|
|
83
84
|
type: Component,
|
|
84
85
|
args: [{ selector: 'c80-modal', standalone: true, imports: [C80IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Modal Backdrop -->\n@if (isOpen()) {\n<div class=\"modal-backdrop\" [class.show]=\"isVisible()\" tabindex=\"-1\" (click)=\"onBackdropClick($event)\" (keydown.escape)=\"closeModal()\">\n\n <!-- Modal Container -->\n <dialog class=\"modal-container\" [class.show]=\"isVisible()\" [attr.aria-labelledby]=\"'modal-title'\" [open]=\"isVisible()\">\n\n <!-- Modal Header -->\n <div class=\"modal-header\">\n <h4 class=\"modal-title\" id=\"modal-title\">{{ config().title }}</h4>\n <c80-icon [button]=\"true\" icon=\"close\" (iconClick)=\"closeModal()\" title=\"Cerrar\" color=\"warn\" />\n </div>\n\n <!-- Modal Body -->\n <div class=\"modal-body\">\n <p class=\"modal-message\">{{ config().message }}</p>\n </div>\n\n <!-- Modal Footer -->\n <div class=\"modal-footer\">\n\n <!-- Info Modal - Solo OK -->\n @if (showOkButton()) {\n <c80-icon [button]=\"true\" icon=\"check\" textRight=\"OK\" color=\"dark\" (iconClick)=\"onConfirm()\" [border]=\"true\" />\n }\n\n <!-- Yes/No Modal -->\n @if (showYesNoButtons()) {\n <c80-icon [button]=\"true\" icon=\"check\" [textRight]=\"getYesText()\" color=\"dark\" (iconClick)=\"onYes()\" [border]=\"true\" />\n <c80-icon [button]=\"true\" icon=\"cancel\" [textRight]=\"getNoText()\" color=\"warn\" (iconClick)=\"onNo()\" [border]=\"true\" />\n }\n\n <!-- Confirm Modal -->\n @if (showConfirmButtons()) {\n <c80-icon [button]=\"true\" icon=\"check\" [textRight]=\"getConfirmText()\" color=\"dark\" (iconClick)=\"onConfirm()\" [border]=\"true\" />\n <c80-icon [button]=\"true\" icon=\"cancel\" [textRight]=\"getCancelText()\" color=\"warn\" (iconClick)=\"onCancel()\" [border]=\"true\" />\n }\n\n </div>\n </dialog>\n</div>\n}", styles: [".modal-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:1100;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease-in-out;outline:none}.modal-backdrop.show{opacity:1}.modal-container{background:var(--color-bg-primary);border-radius:8px;box-shadow:0 4px 20px #00000026;border:1px solid var(--color-border-default);max-width:400px;width:90%;max-height:90vh;overflow:hidden;transform:scale(.9) translateY(-10px);transition:all .15s ease-out;position:relative;padding:0}.modal-container.show{transform:scale(1) translateY(0)}.modal-container::backdrop{background:transparent}.modal-header{display:flex;align-items:center;gap:8px;padding:16px 20px 12px;border-bottom:1px solid var(--color-border-default);background:var(--color-bg-secondary)}.modal-header .modal-title{flex:1;margin:0;font-size:16px;font-weight:600;color:var(--color-text-primary);line-height:1.3}.modal-body{padding:16px 20px}.modal-body .modal-message{margin:0;font-size:14px;line-height:1.5;color:var(--color-text-primary);white-space:pre-line}.modal-footer{display:flex;justify-content:flex-end;gap:8px;padding:12px 20px 16px;background:var(--color-bg-secondary);border-top:1px solid var(--color-border-default)}@media(max-width:768px){.modal-container{width:95%;margin:10px}.modal-header{padding:12px 16px 8px}.modal-header .modal-title{font-size:15px}.modal-body{padding:12px 16px}.modal-body .modal-message{font-size:13px}.modal-footer{padding:8px 16px 12px;flex-direction:column}}\n"] }]
|
|
85
86
|
}], ctorParameters: () => [] });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modal.component.js","sourceRoot":"","sources":["../../../../../libs/ui/src/lib/modal/modal.component.ts","../../../../../libs/ui/src/lib/modal/modal.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAC7F,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;;AA6B7C,MAAM,OAAO,iBAAiB;IACX,YAAY,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC;IAE5C,MAAM,GAAG,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,MAAM,CAAC;IAC7C,MAAM,GAAG,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,MAAM,CAAC;IAC7C,SAAS,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,qDAAC,CAAC;IAEnD;QACE,MAAM,CAAC,GAAG,EAAE;YACV,IAAI,IAAI,CAAC,MAAM,EAAE,EAAE,CAAC;gBAClB,iDAAiD;gBACjD,UAAU,CAAC,GAAG,EAAE;oBACd,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CACrC,iBAAiB,CACH,CAAC;oBACjB,IAAI,QAAQ,EAAE,CAAC;wBACb,QAAQ,CAAC,KAAK,EAAE,CAAC;oBACnB,CAAC;gBACH,CAAC,EAAE,GAAG,CAAC,CAAC;YACV,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAED,SAAS;QACP,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;IACzE,CAAC;IAED,QAAQ;QACN,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,CAAC;IACzE,CAAC;IAED,KAAK;QACH,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;IACrE,CAAC;IAED,IAAI;QACF,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,CAAC;IACrE,CAAC;IAED,UAAU;QACR,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,CAAC;IACjC,CAAC;IAED,eAAe,CAAC,KAAY;QAC1B,IAAI,KAAK,CAAC,MAAM,KAAK,KAAK,CAAC,aAAa,EAAE,CAAC;YACzC,IAAI,CAAC,UAAU,EAAE,CAAC;QACpB,CAAC;IACH,CAAC;IAED,qBAAqB;QACnB,MAAM,WAAW,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;QAClC,QAAQ,WAAW,CAAC,IAAI,EAAE,CAAC;YACzB,KAAK,SAAS;gBACZ,OAAO,aAAa,CAAC;YACvB,KAAK,OAAO;gBACV,OAAO,YAAY,CAAC;YACtB,KAAK,SAAS,CAAC;YACf,KAAK,OAAO;gBACV,OAAO,aAAa,CAAC;YACvB;gBACE,OAAO,UAAU,CAAC;QACtB,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,OAAO,IAAI,CAAC,MAAM,EAAE,CAAC,IAAI,KAAK,OAAO,CAAC;IACxC,CAAC;IAED,kBAAkB;QAChB,MAAM,IAAI,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,IAAI,CAAC;QAChC,OAAO,IAAI,KAAK,SAAS,IAAI,IAAI,KAAK,SAAS,IAAI,IAAI,KAAK,OAAO,CAAC;IACtE,CAAC;IAED,YAAY;QACV,OAAO,IAAI,CAAC,MAAM,EAAE,CAAC,IAAI,KAAK,MAAM,CAAC;IACvC,CAAC;IAED,cAAc;QACZ,OAAO,IAAI,CAAC,MAAM,EAAE,CAAC,WAAW,IAAI,WAAW,CAAC;IAClD,CAAC;IAED,aAAa;QACX,OAAO,IAAI,CAAC,MAAM,EAAE,CAAC,UAAU,IAAI,UAAU,CAAC;IAChD,CAAC;IAED,UAAU;QACR,OAAO,IAAI,CAAC,MAAM,EAAE,CAAC,OAAO,IAAI,IAAI,CAAC;IACvC,CAAC;IAED,SAAS;QACP,OAAO,IAAI,CAAC,MAAM,EAAE,CAAC,MAAM,IAAI,IAAI,CAAC;IACtC,CAAC;
|
|
1
|
+
{"version":3,"file":"modal.component.js","sourceRoot":"","sources":["../../../../../libs/ui/src/lib/modal/modal.component.ts","../../../../../libs/ui/src/lib/modal/modal.component.html"],"names":[],"mappings":"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","sourcesContent":["import { Component, computed, effect, inject, ChangeDetectionStrategy } from '@angular/core';\nimport { ModalService } from './modal.service';\nimport { C80IconComponent } from './../icon';\n\nexport type ModalType = 'info' | 'confirm' | 'yesNo' | 'warning' | 'error';\n\nexport interface ModalConfig {\n title: string;\n message: string;\n type?: ModalType;\n confirmText?: string;\n cancelText?: string;\n yesText?: string;\n noText?: string;\n showCancel?: boolean;\n}\n\nexport interface ModalResult {\n action: 'confirm' | 'cancel' | 'yes' | 'no';\n confirmed: boolean;\n}\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'c80-modal',\n standalone: true,\n imports: [C80IconComponent],\n templateUrl: './modal.component.html',\n styleUrl: './modal.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class C80ModalComponent {\n private readonly modalService = inject(ModalService);\n\n readonly isOpen = this.modalService.modalState.isOpen;\n readonly config = this.modalService.modalState.config;\n readonly isVisible = computed(() => this.isOpen());\n\n constructor() {\n effect(() => {\n if (this.isOpen()) {\n // Auto-focus modal when opened for accessibility\n /* v8 ignore next 8 */\n setTimeout(() => {\n const backdrop = document.querySelector(\n '.modal-backdrop'\n ) as HTMLElement;\n if (backdrop) {\n backdrop.focus();\n }\n }, 100);\n }\n });\n }\n\n onConfirm() {\n this.modalService.handleResult({ action: 'confirm', confirmed: true });\n }\n\n onCancel() {\n this.modalService.handleResult({ action: 'cancel', confirmed: false });\n }\n\n onYes() {\n this.modalService.handleResult({ action: 'yes', confirmed: true });\n }\n\n onNo() {\n this.modalService.handleResult({ action: 'no', confirmed: false });\n }\n\n closeModal() {\n this.modalService.closeModal();\n }\n\n onBackdropClick(event: Event) {\n if (event.target === event.currentTarget) {\n this.closeModal();\n }\n }\n\n getPrimaryButtonClass(): string {\n const configValue = this.config();\n switch (configValue.type) {\n case 'warning':\n return 'btn-warning';\n case 'error':\n return 'btn-danger';\n case 'confirm':\n case 'yesNo':\n return 'btn-primary';\n default:\n return 'btn-info';\n }\n }\n\n showYesNoButtons(): boolean {\n return this.config().type === 'yesNo';\n }\n\n showConfirmButtons(): boolean {\n const type = this.config().type;\n return type === 'confirm' || type === 'warning' || type === 'error';\n }\n\n showOkButton(): boolean {\n return this.config().type === 'info';\n }\n\n getConfirmText(): string {\n return this.config().confirmText ?? 'Confirmar';\n }\n\n getCancelText(): string {\n return this.config().cancelText ?? 'Cancelar';\n }\n\n getYesText(): string {\n return this.config().yesText ?? 'Sí';\n }\n\n getNoText(): string {\n return this.config().noText ?? 'No';\n }\n}\n","<!-- Modal Backdrop -->\n@if (isOpen()) {\n<div class=\"modal-backdrop\" [class.show]=\"isVisible()\" tabindex=\"-1\" (click)=\"onBackdropClick($event)\" (keydown.escape)=\"closeModal()\">\n\n <!-- Modal Container -->\n <dialog class=\"modal-container\" [class.show]=\"isVisible()\" [attr.aria-labelledby]=\"'modal-title'\" [open]=\"isVisible()\">\n\n <!-- Modal Header -->\n <div class=\"modal-header\">\n <h4 class=\"modal-title\" id=\"modal-title\">{{ config().title }}</h4>\n <c80-icon [button]=\"true\" icon=\"close\" (iconClick)=\"closeModal()\" title=\"Cerrar\" color=\"warn\" />\n </div>\n\n <!-- Modal Body -->\n <div class=\"modal-body\">\n <p class=\"modal-message\">{{ config().message }}</p>\n </div>\n\n <!-- Modal Footer -->\n <div class=\"modal-footer\">\n\n <!-- Info Modal - Solo OK -->\n @if (showOkButton()) {\n <c80-icon [button]=\"true\" icon=\"check\" textRight=\"OK\" color=\"dark\" (iconClick)=\"onConfirm()\" [border]=\"true\" />\n }\n\n <!-- Yes/No Modal -->\n @if (showYesNoButtons()) {\n <c80-icon [button]=\"true\" icon=\"check\" [textRight]=\"getYesText()\" color=\"dark\" (iconClick)=\"onYes()\" [border]=\"true\" />\n <c80-icon [button]=\"true\" icon=\"cancel\" [textRight]=\"getNoText()\" color=\"warn\" (iconClick)=\"onNo()\" [border]=\"true\" />\n }\n\n <!-- Confirm Modal -->\n @if (showConfirmButtons()) {\n <c80-icon [button]=\"true\" icon=\"check\" [textRight]=\"getConfirmText()\" color=\"dark\" (iconClick)=\"onConfirm()\" [border]=\"true\" />\n <c80-icon [button]=\"true\" icon=\"cancel\" [textRight]=\"getCancelText()\" color=\"warn\" (iconClick)=\"onCancel()\" [border]=\"true\" />\n }\n\n </div>\n </dialog>\n</div>\n}"]}
|
|
@@ -71,10 +71,10 @@ export class ModalService {
|
|
|
71
71
|
closeModal() {
|
|
72
72
|
this.isOpen.set(false);
|
|
73
73
|
}
|
|
74
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
75
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.
|
|
74
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
75
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ModalService, providedIn: 'root' });
|
|
76
76
|
}
|
|
77
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
77
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ModalService, decorators: [{
|
|
78
78
|
type: Injectable,
|
|
79
79
|
args: [{
|
|
80
80
|
providedIn: 'root',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modal.service.js","sourceRoot":"","sources":["../../../../../libs/ui/src/lib/modal/modal.service.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"modal.service.js","sourceRoot":"","sources":["../../../../../libs/ui/src/lib/modal/modal.service.ts"],"names":[],"mappings":"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","sourcesContent":["import { Injectable, signal } from '@angular/core';\r\nimport type { ModalConfig, ModalResult } from './modal.component';\r\n\r\n@Injectable({\r\n providedIn: 'root',\r\n})\r\nexport class ModalService {\r\n private readonly isOpen = signal(false);\r\n private readonly config = signal<ModalConfig>({\r\n title: '',\r\n message: '',\r\n type: 'info',\r\n });\r\n\r\n private resolvePromise?: (result: ModalResult) => void;\r\n\r\n readonly modalState = {\r\n isOpen: this.isOpen.asReadonly(),\r\n config: this.config.asReadonly(),\r\n };\r\n\r\n async showModal(config: ModalConfig): Promise<ModalResult> {\r\n this.config.set(config);\r\n this.isOpen.set(true);\r\n\r\n return new Promise<ModalResult>((resolve) => {\r\n this.resolvePromise = resolve;\r\n });\r\n }\r\n\r\n async confirm(\r\n title: string,\r\n message: string,\r\n confirmText = 'Confirmar',\r\n cancelText = 'Cancelar'\r\n ): Promise<boolean> {\r\n return this.showModal({\r\n title,\r\n message,\r\n type: 'confirm',\r\n confirmText,\r\n cancelText,\r\n }).then((result) => result.confirmed);\r\n }\r\n\r\n async yesNo(\r\n title: string,\r\n message: string,\r\n yesText = 'Sí',\r\n noText = 'No'\r\n ): Promise<boolean> {\r\n return this.showModal({\r\n title,\r\n message,\r\n type: 'yesNo',\r\n yesText,\r\n noText,\r\n }).then((result) => result.action === 'yes');\r\n }\r\n\r\n async info(title: string, message: string): Promise<void> {\r\n return this.showModal({\r\n title,\r\n message,\r\n type: 'info',\r\n }).then(() => void 0);\r\n }\r\n\r\n async warning(\r\n title: string,\r\n message: string,\r\n confirmText = 'Entendido',\r\n cancelText = 'Cancelar'\r\n ): Promise<boolean> {\r\n return this.showModal({\r\n title,\r\n message,\r\n type: 'warning',\r\n confirmText,\r\n cancelText,\r\n }).then((result) => result.confirmed);\r\n }\r\n\r\n async error(\r\n title: string,\r\n message: string,\r\n confirmText = 'Entendido'\r\n ): Promise<void> {\r\n return this.showModal({\r\n title,\r\n message,\r\n type: 'error',\r\n confirmText,\r\n }).then(() => void 0);\r\n }\r\n\r\n handleResult(result: ModalResult) {\r\n if (this.resolvePromise) {\r\n this.resolvePromise(result);\r\n this.resolvePromise = undefined;\r\n }\r\n this.closeModal();\r\n }\r\n\r\n closeModal() {\r\n this.isOpen.set(false);\r\n }\r\n}\r\n"]}
|
|
@@ -3,17 +3,27 @@ import * as i0 from "@angular/core";
|
|
|
3
3
|
let uniqueIdCounter = 0;
|
|
4
4
|
export class SelectComponent {
|
|
5
5
|
label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
6
|
+
/* v8 ignore next */
|
|
6
7
|
placeholder = input('Seleccionar', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
|
|
8
|
+
/* v8 ignore next */
|
|
7
9
|
value = input(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
10
|
+
/* v8 ignore next */
|
|
8
11
|
options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
|
|
12
|
+
/* v8 ignore next */
|
|
9
13
|
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
14
|
+
/* v8 ignore next */
|
|
10
15
|
loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
|
|
16
|
+
/* v8 ignore next */
|
|
11
17
|
emptyMessage = input('No hay opciones disponibles', ...(ngDevMode ? [{ debugName: "emptyMessage" }] : []));
|
|
18
|
+
/* v8 ignore next */
|
|
12
19
|
maxHeight = input('300px', ...(ngDevMode ? [{ debugName: "maxHeight" }] : []));
|
|
20
|
+
/* v8 ignore next */
|
|
13
21
|
filterable = input(false, ...(ngDevMode ? [{ debugName: "filterable" }] : []));
|
|
14
22
|
valueChange = output();
|
|
15
23
|
opened = output();
|
|
24
|
+
/* v8 ignore next */
|
|
16
25
|
isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
|
|
26
|
+
/* v8 ignore next */
|
|
17
27
|
searchTerm = signal('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : []));
|
|
18
28
|
controlId = `c80-select-${++uniqueIdCounter}`;
|
|
19
29
|
searchInput = viewChild('searchInput', ...(ngDevMode ? [{ debugName: "searchInput" }] : []));
|
|
@@ -36,6 +46,7 @@ export class SelectComponent {
|
|
|
36
46
|
else {
|
|
37
47
|
this.opened.emit();
|
|
38
48
|
if (this.filterable()) {
|
|
49
|
+
/* v8 ignore next 2 */
|
|
39
50
|
setTimeout(() => this.searchInput()?.nativeElement.focus(), 0);
|
|
40
51
|
}
|
|
41
52
|
}
|
|
@@ -69,10 +80,10 @@ export class SelectComponent {
|
|
|
69
80
|
clearSearch() {
|
|
70
81
|
this.searchTerm.set('');
|
|
71
82
|
}
|
|
72
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
73
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
83
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
84
|
+
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 });
|
|
74
85
|
}
|
|
75
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
86
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: SelectComponent, decorators: [{
|
|
76
87
|
type: Component,
|
|
77
88
|
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"] }]
|
|
78
89
|
}], 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 }] }] } });
|
|
@@ -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;AAWxB,MAAM,OAAO,eAAe;IACjB,KAAK,GAAG,KAAK,CAAC,QAAQ,gDAAU,CAAC;
|
|
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';\nimport type { SelectOption } from './select.model';\n\nlet uniqueIdCounter = 0;\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.searchTerm().toLowerCase().trim();\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 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 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 selectNull(): void {\n this.valueChange.emit(null);\n this.isOpen.set(false);\n }\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 closeDropdown(): void {\n this.isOpen.set(false);\n this.clearSearch();\n }\n\n onSearchChange(term: string): void {\n this.searchTerm.set(term);\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 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../libs/ui/src/lib/snackbar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC","sourcesContent":["export { SnackbarService } from './snackbar.service';\nexport type { SnackbarConfig, SnackbarData } from './snackbar.model';\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../libs/ui/src/lib/snackbar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC","sourcesContent":["export { SnackbarComponent } from './snackbar.component';\nexport { SnackbarService } from './snackbar.service';\nexport type { SnackbarConfig, SnackbarData } from './snackbar.model';\n"]}
|
|
@@ -4,7 +4,9 @@ export class SnackbarComponent {
|
|
|
4
4
|
elementRef = inject(ElementRef);
|
|
5
5
|
renderer = inject(Renderer2);
|
|
6
6
|
cdr = inject(ChangeDetectorRef);
|
|
7
|
+
/* v8 ignore next */
|
|
7
8
|
data = signal(null, ...(ngDevMode ? [{ debugName: "data" }] : []));
|
|
9
|
+
/* v8 ignore next */
|
|
8
10
|
visible = signal(false, ...(ngDevMode ? [{ debugName: "visible" }] : []));
|
|
9
11
|
timerId;
|
|
10
12
|
panelClasses = computed(() => this.data()?.config.panelClass.join(' ') ?? '', ...(ngDevMode ? [{ debugName: "panelClasses" }] : []));
|
|
@@ -47,11 +49,11 @@ export class SnackbarComponent {
|
|
|
47
49
|
this.renderer.setStyle(host, horizontalPosition, '1rem');
|
|
48
50
|
}
|
|
49
51
|
}
|
|
50
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
51
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
52
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: SnackbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
53
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: SnackbarComponent, isStandalone: true, selector: "k-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:.875rem 1rem;background:var(--color-bg-snackbar);color:var(--color-text-primary);border-radius:.25rem;box-shadow:var(--shadow-lg);pointer-events:auto;animation:slideIn .3s ease-out;min-width:18rem;max-width:35rem}.snackbar-message{flex:1;font-size:.875rem}.snackbar-action{background:transparent;border:none;color:var(--color-text-link-light);cursor:pointer;font-size:.875rem;font-weight:500;text-transform:uppercase;padding:.25rem .5rem;border-radius:.25rem;transition:background-color .2s}.snackbar-action:hover{background-color:var(--color-bg-hover-overlay)}.notification-success{background:var(--color-icon-success)}.notification-success .snackbar-action{color:var(--color-text-inverse)}.notification-error{background:var(--color-icon-danger)}.notification-error .snackbar-action{color:var(--color-text-primary)}@keyframes slideIn{0%{opacity:0;transform:translateY(-1rem)}to{opacity:1;transform:translateY(0)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
52
54
|
}
|
|
53
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
55
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: SnackbarComponent, decorators: [{
|
|
54
56
|
type: Component,
|
|
55
|
-
args: [{ selector: 'k-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:.875rem 1rem;background:var(--color-bg-snackbar);color:var(--color-text-
|
|
57
|
+
args: [{ selector: 'k-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:.875rem 1rem;background:var(--color-bg-snackbar);color:var(--color-text-primary);border-radius:.25rem;box-shadow:var(--shadow-lg);pointer-events:auto;animation:slideIn .3s ease-out;min-width:18rem;max-width:35rem}.snackbar-message{flex:1;font-size:.875rem}.snackbar-action{background:transparent;border:none;color:var(--color-text-link-light);cursor:pointer;font-size:.875rem;font-weight:500;text-transform:uppercase;padding:.25rem .5rem;border-radius:.25rem;transition:background-color .2s}.snackbar-action:hover{background-color:var(--color-bg-hover-overlay)}.notification-success{background:var(--color-icon-success)}.notification-success .snackbar-action{color:var(--color-text-inverse)}.notification-error{background:var(--color-icon-danger)}.notification-error .snackbar-action{color:var(--color-text-primary)}@keyframes slideIn{0%{opacity:0;transform:translateY(-1rem)}to{opacity:1;transform:translateY(0)}}\n"] }]
|
|
56
58
|
}] });
|
|
57
59
|
//# sourceMappingURL=snackbar.component.js.map
|
|
@@ -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;;AAUvI,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;
|
|
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';\nimport type { SnackbarData } from './snackbar.model';\n\n@Component({\n selector: 'k-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 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 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 private clearTimer(): void {\n if (this.timerId !== undefined) {\n clearTimeout(this.timerId);\n this.timerId = undefined;\n }\n }\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}"]}
|