@c80/ui 1.0.47 → 1.0.49
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/index.js +1 -0
- package/esm2022/index.js.map +1 -1
- package/esm2022/lib/card-level/card-level.component.js.map +1 -1
- package/esm2022/lib/modal/modal.component.js.map +1 -1
- package/esm2022/lib/select/index.js +3 -0
- package/esm2022/lib/select/index.js.map +1 -0
- package/esm2022/lib/select/select.component.js +80 -0
- package/esm2022/lib/select/select.component.js.map +1 -0
- package/esm2022/lib/select/select.model.js +2 -0
- package/esm2022/lib/select/select.model.js.map +1 -0
- package/esm2022/lib/stat-card/stat-card.component.js +2 -2
- package/esm2022/lib/stat-card/stat-card.component.js.map +1 -1
- package/index.d.ts +1 -0
- package/lib/icon/icon.component.d.ts +2 -2
- package/lib/select/index.d.ts +2 -0
- package/lib/select/select.component.d.ts +30 -0
- package/lib/select/select.model.d.ts +5 -0
- package/package.json +1 -1
package/esm2022/index.js
CHANGED
package/esm2022/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../libs/ui/src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,aAAa,CAAC","sourcesContent":["export * from './lib/table';\nexport * from './lib/icon';\nexport * from './lib/stat-card';\nexport * from './lib/card-level';\nexport * from './lib/modal';\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../libs/ui/src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC","sourcesContent":["export * from './lib/table';\nexport * from './lib/icon';\nexport * from './lib/stat-card';\nexport * from './lib/card-level';\nexport * from './lib/modal';\nexport * from './lib/select';\n"]}
|
|
@@ -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,MAAM,eAAe,CAAC;;AAW3D,MAAM,OAAO,kBAAkB;IAC7B,aAAa,GAAG,KAAK,CAAC,QAAQ,wDAAiB,CAAC;IAChD,IAAI,GAAG,KAAK,CAAS,CAAC,gDAAC,CAAC,CAAC,wCAAwC;IAEzD,YAAY,CAAU;IAE9B,IAAI,WAAW;QACb,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;YACvB,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;YAC/E,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,KAAK,CAAC,CAAC;YACpD,IAAI,CAAC,YAAY,GAAG,GAAG,KAAK,IAAI,SAAS,EAAE,CAAC;QAC9C,CAAC;QACD,OAAO,IAAI,CAAC,YAAY,CAAC;IAC3B,CAAC;IAED,IAAI,SAAS;QACX,MAAM,SAAS,GAAG,GAAG,CAAC;QACtB,MAAM,eAAe,GAAG,SAAS,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;QAChD,OAAO,GAAG,eAAe,IAAI,CAAC;IAChC,CAAC;IAED,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;uGArDQ,kBAAkB;2FAAlB,kBAAkB,0VCX/B,wnCAuBM;;2FDZO,kBAAkB;kBAR9B,SAAS;+BAEE,gBAAgB,cACd,IAAI,WACP,EAAE","sourcesContent":["import { Component, input, computed } from '@angular/core';\nimport { 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})\nexport class CardLevelComponent {\n cardLevelData = input.required<CardLevelData>();\n size = input<number>(1); // Multiplicador del tamaño base (220px)\n\n private _generatedId?: string;\n\n get generatedId(): string {\n if (!this._generatedId) {\n const label = this.cardLevelData().label.toLowerCase().replaceAll(/\\s+/g, '-');\n const randomNum = Math.floor(Math.random() * 10000);\n this._generatedId = `${label}-${randomNum}`;\n }\n return this._generatedId;\n }\n\n get cardWidth(): string {\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","<div class=\"card-level-container\" [style.width]=\"cardWidth\">\r\n <label [for]=\"generatedId\">\r\n <strong>{{ cardLevelData().label }}</strong>\r\n\r\n <span class=\"value-display\">\r\n @if (isBidirectional()) {\r\n <!-- Barra bidireccional desde el centro -->\r\n <div class=\"bidirectional-meter\">\r\n <div class=\"meter-track\">\r\n <div class=\"center-line\"></div>\r\n <div class=\"meter-fill\" [class.fill-left]=\"fillDirection() === 'left'\" [class.fill-right]=\"fillDirection() === 'right'\" [style.width.%]=\"bidirectionalFillPercent()\" [style.background]=\"fillColor()\">\r\n </div>\r\n </div>\r\n </div>\r\n } @else {\r\n <!-- Meter estándar para rangos unidireccionales -->\r\n <meter [id]=\"generatedId\" [optimum]=\"cardLevelData().optimum\" [min]=\"cardLevelData().min\" [max]=\"cardLevelData().max\" [low]=\"cardLevelData().low\" [high]=\"cardLevelData().high\" [value]=\"cardLevelData().value\">\r\n </meter>\r\n }\r\n\r\n {{ cardLevelData().value }}{{ cardLevelData().unit }}\r\n </span>\r\n </label>\r\n</div>"]}
|
|
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,MAAM,eAAe,CAAC;;AAW3D,MAAM,OAAO,kBAAkB;IAC7B,aAAa,GAAG,KAAK,CAAC,QAAQ,wDAAiB,CAAC;IAChD,IAAI,GAAG,KAAK,CAAS,CAAC,gDAAC,CAAC,CAAC,wCAAwC;IAEzD,YAAY,CAAU;IAE9B,IAAI,WAAW;QACb,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;YACvB,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;YAC/E,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,KAAK,CAAC,CAAC;YACpD,IAAI,CAAC,YAAY,GAAG,GAAG,KAAK,IAAI,SAAS,EAAE,CAAC;QAC9C,CAAC;QACD,OAAO,IAAI,CAAC,YAAY,CAAC;IAC3B,CAAC;IAED,IAAI,SAAS;QACX,MAAM,SAAS,GAAG,GAAG,CAAC;QACtB,MAAM,eAAe,GAAG,SAAS,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;QAChD,OAAO,GAAG,eAAe,IAAI,CAAC;IAChC,CAAC;IAED,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;uGArDQ,kBAAkB;2FAAlB,kBAAkB,0VCX/B,wnCAuBM;;2FDZO,kBAAkB;kBAR9B,SAAS;+BAEE,gBAAgB,cACd,IAAI,WACP,EAAE","sourcesContent":["import { Component, input, computed } from '@angular/core';\r\nimport { CardLevelData } from './card-level.interface';\r\n\r\n@Component({\r\n // eslint-disable-next-line @angular-eslint/component-selector\r\n selector: 'c80-card-level',\r\n standalone: true,\r\n imports: [],\r\n templateUrl: './card-level.component.html',\r\n styleUrl: './card-level.component.scss'\r\n})\r\nexport class CardLevelComponent {\r\n cardLevelData = input.required<CardLevelData>();\r\n size = input<number>(1); // Multiplicador del tamaño base (220px)\r\n\r\n private _generatedId?: string;\r\n\r\n get generatedId(): string {\r\n if (!this._generatedId) {\r\n const label = this.cardLevelData().label.toLowerCase().replaceAll(/\\s+/g, '-');\r\n const randomNum = Math.floor(Math.random() * 10000);\r\n this._generatedId = `${label}-${randomNum}`;\r\n }\r\n return this._generatedId;\r\n }\r\n\r\n get cardWidth(): string {\r\n const baseWidth = 140;\r\n const calculatedWidth = baseWidth * this.size();\r\n return `${calculatedWidth}px`;\r\n }\r\n\r\n // Detecta si el rango es bidireccional (min negativo, max positivo)\r\n isBidirectional = computed(() => {\r\n const data = this.cardLevelData();\r\n return data.min < 0 && data.max > 0;\r\n });\r\n\r\n // Calcula el porcentaje de fill para barras bidireccionales\r\n bidirectionalFillPercent = computed(() => {\r\n const data = this.cardLevelData();\r\n const totalRange = data.max - data.min;\r\n return Math.abs(data.value / totalRange) * 100;\r\n });\r\n\r\n // Determina la dirección del fill (left/right)\r\n fillDirection = computed(() => {\r\n return this.cardLevelData().value >= 0 ? 'right' : 'left';\r\n });\r\n\r\n // Color según el valor y umbrales\r\n fillColor = computed(() => {\r\n const data = this.cardLevelData();\r\n const absValue = Math.abs(data.value);\r\n const absHigh = Math.abs(data.high);\r\n const absLow = Math.abs(data.low);\r\n\r\n if (absValue >= absHigh) {\r\n return 'var(--color-danger)';\r\n }\r\n if (absValue >= absLow) {\r\n return 'var(--color-warning)';\r\n }\r\n return 'var(--color-success)';\r\n });\r\n}\r\n","<div class=\"card-level-container\" [style.width]=\"cardWidth\">\r\n <label [for]=\"generatedId\">\r\n <strong>{{ cardLevelData().label }}</strong>\r\n\r\n <span class=\"value-display\">\r\n @if (isBidirectional()) {\r\n <!-- Barra bidireccional desde el centro -->\r\n <div class=\"bidirectional-meter\">\r\n <div class=\"meter-track\">\r\n <div class=\"center-line\"></div>\r\n <div class=\"meter-fill\" [class.fill-left]=\"fillDirection() === 'left'\" [class.fill-right]=\"fillDirection() === 'right'\" [style.width.%]=\"bidirectionalFillPercent()\" [style.background]=\"fillColor()\">\r\n </div>\r\n </div>\r\n </div>\r\n } @else {\r\n <!-- Meter estándar para rangos unidireccionales -->\r\n <meter [id]=\"generatedId\" [optimum]=\"cardLevelData().optimum\" [min]=\"cardLevelData().min\" [max]=\"cardLevelData().max\" [low]=\"cardLevelData().low\" [high]=\"cardLevelData().high\" [value]=\"cardLevelData().value\">\r\n </meter>\r\n }\r\n\r\n {{ cardLevelData().value }}{{ cardLevelData().unit }}\r\n </span>\r\n </label>\r\n</div>"]}
|
|
@@ -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,MAAM,eAAe,CAAC;AACpE,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;;AA4B7C,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;uGA3FU,iBAAiB;2FAAjB,iBAAiB,qEC9B9B,20DAyCC,ssDDfW,gBAAgB;;2FAIf,iBAAiB;kBAR7B,SAAS;+BAEE,WAAW,cACT,IAAI,WACP,CAAC,gBAAgB,CAAC","sourcesContent":["import { Component, computed, effect, inject } 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})\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 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 -->\r\n@if (isOpen()) {\r\n<div class=\"modal-backdrop\" [class.show]=\"isVisible()\" tabindex=\"-1\" (click)=\"onBackdropClick($event)\" (keydown.escape)=\"closeModal()\">\r\n\r\n <!-- Modal Container -->\r\n <dialog class=\"modal-container\" [class.show]=\"isVisible()\" [attr.aria-labelledby]=\"'modal-title'\" [open]=\"isVisible()\">\r\n\r\n <!-- Modal Header -->\r\n <div class=\"modal-header\">\r\n <h4 class=\"modal-title\" id=\"modal-title\">{{ config().title }}</h4>\r\n <c80-icon [button]=\"true\" icon=\"close\" (iconClick)=\"closeModal()\" title=\"Cerrar\" />\r\n </div>\r\n\r\n <!-- Modal Body -->\r\n <div class=\"modal-body\">\r\n <p class=\"modal-message\">{{ config().message }}</p>\r\n </div>\r\n\r\n <!-- Modal Footer -->\r\n <div class=\"modal-footer\">\r\n\r\n <!-- Info Modal - Solo OK -->\r\n @if (showOkButton()) {\r\n <c80-icon [button]=\"true\" icon=\"check\" textRight=\"OK\" color=\"primary\" (iconClick)=\"onConfirm()\" [border]=\"true\" />\r\n }\r\n\r\n <!-- Yes/No Modal -->\r\n @if (showYesNoButtons()) {\r\n <c80-icon [button]=\"true\" icon=\"cancel\" [textRight]=\"getNoText()\" color=\"secondary\" (iconClick)=\"onNo()\" [border]=\"true\" />\r\n <c80-icon [button]=\"true\" icon=\"check\" [textRight]=\"getYesText()\" color=\"primary\" (iconClick)=\"onYes()\" [border]=\"true\" />\r\n }\r\n\r\n <!-- Confirm Modal -->\r\n @if (showConfirmButtons()) {\r\n <c80-icon [button]=\"true\" icon=\"cancel\" [textRight]=\"getCancelText()\" color=\"secondary\" (iconClick)=\"onCancel()\" [border]=\"true\" />\r\n <c80-icon [button]=\"true\" icon=\"check\" [textRight]=\"getConfirmText()\" color=\"primary\" (iconClick)=\"onConfirm()\" [border]=\"true\" />\r\n }\r\n\r\n </div>\r\n </dialog>\r\n</div>\r\n}"]}
|
|
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 } from '@angular/core';\r\nimport { ModalService } from './modal.service';\r\nimport { C80IconComponent } from './../icon';\r\n\r\nexport type ModalType = 'info' | 'confirm' | 'yesNo' | 'warning' | 'error';\r\n\r\nexport interface ModalConfig {\r\n title: string;\r\n message: string;\r\n type?: ModalType;\r\n confirmText?: string;\r\n cancelText?: string;\r\n yesText?: string;\r\n noText?: string;\r\n showCancel?: boolean;\r\n}\r\n\r\nexport interface ModalResult {\r\n action: 'confirm' | 'cancel' | 'yes' | 'no';\r\n confirmed: boolean;\r\n}\r\n\r\n@Component({\r\n // eslint-disable-next-line @angular-eslint/component-selector\r\n selector: 'c80-modal',\r\n standalone: true,\r\n imports: [C80IconComponent],\r\n templateUrl: './modal.component.html',\r\n styleUrl: './modal.component.scss',\r\n})\r\nexport class C80ModalComponent {\r\n private readonly modalService = inject(ModalService);\r\n\r\n readonly isOpen = this.modalService.modalState.isOpen;\r\n readonly config = this.modalService.modalState.config;\r\n readonly isVisible = computed(() => this.isOpen());\r\n\r\n constructor() {\r\n effect(() => {\r\n if (this.isOpen()) {\r\n // Auto-focus modal when opened for accessibility\r\n setTimeout(() => {\r\n const backdrop = document.querySelector(\r\n '.modal-backdrop'\r\n ) as HTMLElement;\r\n if (backdrop) {\r\n backdrop.focus();\r\n }\r\n }, 100);\r\n }\r\n });\r\n }\r\n\r\n onConfirm() {\r\n this.modalService.handleResult({ action: 'confirm', confirmed: true });\r\n }\r\n\r\n onCancel() {\r\n this.modalService.handleResult({ action: 'cancel', confirmed: false });\r\n }\r\n\r\n onYes() {\r\n this.modalService.handleResult({ action: 'yes', confirmed: true });\r\n }\r\n\r\n onNo() {\r\n this.modalService.handleResult({ action: 'no', confirmed: false });\r\n }\r\n\r\n closeModal() {\r\n this.modalService.closeModal();\r\n }\r\n\r\n onBackdropClick(event: Event) {\r\n if (event.target === event.currentTarget) {\r\n this.closeModal();\r\n }\r\n }\r\n\r\n getPrimaryButtonClass(): string {\r\n const configValue = this.config();\r\n switch (configValue.type) {\r\n case 'warning':\r\n return 'btn-warning';\r\n case 'error':\r\n return 'btn-danger';\r\n case 'confirm':\r\n case 'yesNo':\r\n return 'btn-primary';\r\n default:\r\n return 'btn-info';\r\n }\r\n }\r\n\r\n showYesNoButtons(): boolean {\r\n return this.config().type === 'yesNo';\r\n }\r\n\r\n showConfirmButtons(): boolean {\r\n const type = this.config().type;\r\n return type === 'confirm' || type === 'warning' || type === 'error';\r\n }\r\n\r\n showOkButton(): boolean {\r\n return this.config().type === 'info';\r\n }\r\n\r\n getConfirmText(): string {\r\n return this.config().confirmText || 'Confirmar';\r\n }\r\n\r\n getCancelText(): string {\r\n return this.config().cancelText || 'Cancelar';\r\n }\r\n\r\n getYesText(): string {\r\n return this.config().yesText || 'Sí';\r\n }\r\n\r\n getNoText(): string {\r\n return this.config().noText || 'No';\r\n }\r\n}\r\n","<!-- Modal Backdrop -->\r\n@if (isOpen()) {\r\n<div class=\"modal-backdrop\" [class.show]=\"isVisible()\" tabindex=\"-1\" (click)=\"onBackdropClick($event)\" (keydown.escape)=\"closeModal()\">\r\n\r\n <!-- Modal Container -->\r\n <dialog class=\"modal-container\" [class.show]=\"isVisible()\" [attr.aria-labelledby]=\"'modal-title'\" [open]=\"isVisible()\">\r\n\r\n <!-- Modal Header -->\r\n <div class=\"modal-header\">\r\n <h4 class=\"modal-title\" id=\"modal-title\">{{ config().title }}</h4>\r\n <c80-icon [button]=\"true\" icon=\"close\" (iconClick)=\"closeModal()\" title=\"Cerrar\" />\r\n </div>\r\n\r\n <!-- Modal Body -->\r\n <div class=\"modal-body\">\r\n <p class=\"modal-message\">{{ config().message }}</p>\r\n </div>\r\n\r\n <!-- Modal Footer -->\r\n <div class=\"modal-footer\">\r\n\r\n <!-- Info Modal - Solo OK -->\r\n @if (showOkButton()) {\r\n <c80-icon [button]=\"true\" icon=\"check\" textRight=\"OK\" color=\"primary\" (iconClick)=\"onConfirm()\" [border]=\"true\" />\r\n }\r\n\r\n <!-- Yes/No Modal -->\r\n @if (showYesNoButtons()) {\r\n <c80-icon [button]=\"true\" icon=\"cancel\" [textRight]=\"getNoText()\" color=\"secondary\" (iconClick)=\"onNo()\" [border]=\"true\" />\r\n <c80-icon [button]=\"true\" icon=\"check\" [textRight]=\"getYesText()\" color=\"primary\" (iconClick)=\"onYes()\" [border]=\"true\" />\r\n }\r\n\r\n <!-- Confirm Modal -->\r\n @if (showConfirmButtons()) {\r\n <c80-icon [button]=\"true\" icon=\"cancel\" [textRight]=\"getCancelText()\" color=\"secondary\" (iconClick)=\"onCancel()\" [border]=\"true\" />\r\n <c80-icon [button]=\"true\" icon=\"check\" [textRight]=\"getConfirmText()\" color=\"primary\" (iconClick)=\"onConfirm()\" [border]=\"true\" />\r\n }\r\n\r\n </div>\r\n </dialog>\r\n</div>\r\n}"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../libs/ui/src/lib/select/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC","sourcesContent":["export * from './select.model';\nexport * from './select.component';\n"]}
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
import { ChangeDetectionStrategy, Component, computed, input, output, signal, viewChild } from '@angular/core';
|
|
2
|
+
import { NgClass } from '@angular/common';
|
|
3
|
+
import * as i0 from "@angular/core";
|
|
4
|
+
let uniqueIdCounter = 0;
|
|
5
|
+
export class SelectComponent {
|
|
6
|
+
label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
7
|
+
placeholder = input('Seleccionar', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
|
|
8
|
+
value = input(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
9
|
+
options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
|
|
10
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
11
|
+
loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
|
|
12
|
+
emptyMessage = input('No hay opciones disponibles', ...(ngDevMode ? [{ debugName: "emptyMessage" }] : []));
|
|
13
|
+
maxHeight = input('300px', ...(ngDevMode ? [{ debugName: "maxHeight" }] : []));
|
|
14
|
+
filterable = input(false, ...(ngDevMode ? [{ debugName: "filterable" }] : []));
|
|
15
|
+
valueChange = output();
|
|
16
|
+
opened = output();
|
|
17
|
+
isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
|
|
18
|
+
searchTerm = signal('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : []));
|
|
19
|
+
controlId = `c80-select-${++uniqueIdCounter}`;
|
|
20
|
+
searchInput = viewChild('searchInput', ...(ngDevMode ? [{ debugName: "searchInput" }] : []));
|
|
21
|
+
filteredOptions = computed(() => {
|
|
22
|
+
const term = this.searchTerm().toLowerCase().trim();
|
|
23
|
+
if (!term || !this.filterable()) {
|
|
24
|
+
return this.options();
|
|
25
|
+
}
|
|
26
|
+
return this.options().filter(opt => opt.label.toLowerCase().includes(term));
|
|
27
|
+
}, ...(ngDevMode ? [{ debugName: "filteredOptions" }] : []));
|
|
28
|
+
toggleDropdown() {
|
|
29
|
+
if (this.disabled() || this.loading()) {
|
|
30
|
+
return;
|
|
31
|
+
}
|
|
32
|
+
const wasOpen = this.isOpen();
|
|
33
|
+
this.isOpen.set(!wasOpen);
|
|
34
|
+
if (wasOpen) {
|
|
35
|
+
this.clearSearch();
|
|
36
|
+
}
|
|
37
|
+
else {
|
|
38
|
+
this.opened.emit();
|
|
39
|
+
if (this.filterable()) {
|
|
40
|
+
setTimeout(() => this.searchInput()?.nativeElement.focus(), 0);
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
selectOption(option) {
|
|
45
|
+
if (option.disabled) {
|
|
46
|
+
return;
|
|
47
|
+
}
|
|
48
|
+
this.valueChange.emit(option.value);
|
|
49
|
+
this.isOpen.set(false);
|
|
50
|
+
}
|
|
51
|
+
selectNull() {
|
|
52
|
+
this.valueChange.emit(null);
|
|
53
|
+
this.isOpen.set(false);
|
|
54
|
+
}
|
|
55
|
+
getSelectedLabel() {
|
|
56
|
+
const currentValue = this.value();
|
|
57
|
+
if (currentValue === null || currentValue === undefined) {
|
|
58
|
+
return this.placeholder();
|
|
59
|
+
}
|
|
60
|
+
const selected = this.options().find(opt => opt.value === currentValue);
|
|
61
|
+
return selected?.label ?? this.placeholder();
|
|
62
|
+
}
|
|
63
|
+
closeDropdown() {
|
|
64
|
+
this.isOpen.set(false);
|
|
65
|
+
this.clearSearch();
|
|
66
|
+
}
|
|
67
|
+
onSearchChange(term) {
|
|
68
|
+
this.searchTerm.set(term);
|
|
69
|
+
}
|
|
70
|
+
clearSearch() {
|
|
71
|
+
this.searchTerm.set('');
|
|
72
|
+
}
|
|
73
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
74
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", 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\" [ngClass]=\"{ 'k-select--disabled': disabled(), '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\" [ngClass]=\"{ 'k-select__value--placeholder': value() === null }\">\n @if (loading()) {\n Cargando...\n } @else {\n {{ getSelectedLabel() }}\n }\n </span>\n <span class=\"k-select__arrow\" [ngClass]=\"{ '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 <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\" [ngClass]=\"{\n 'k-select__option--selected': option.value === value(),\n 'k-select__option--disabled': option.disabled\n }\" [disabled]=\"option.disabled\" (click)=\"selectOption(option)\" (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 rgba(0,0,0,.23);border-radius:4px;background-color:#fff;cursor:pointer;transition:all .2s;text-align:left}.k-select__control:hover:not(:disabled){border-color:#000000de}.k-select__control:disabled{cursor:not-allowed;opacity:.6}.k-select--open .k-select__control{border-color:#3f51b5;border-width:2px;padding:7px 11px}.k-select__value{flex:1;font-size:.875rem;color:#000000de;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.k-select__value--placeholder{color:#00000061}.k-select__arrow{font-size:.5rem;color:#0000008a;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:#fff;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;z-index:1000;animation:fadeIn .15s ease-out}.k-select__search{position:sticky;top:0;padding:8px;background-color:#fff;border-bottom:1px solid rgba(0,0,0,.12);z-index:1}.k-select__search-input{width:100%;padding:6px 10px;font-size:.875rem;border:1px solid rgba(0,0,0,.23);border-radius:4px;outline:none;transition:border-color .2s}.k-select__search-input:focus{border-color:#3f51b5}.k-select__search-input::placeholder{color:#00000061}.k-select__option{width:100%;padding:8px 12px;font-size:.875rem;color:#000000de;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:#0000000a}.k-select__option--selected{background-color:#3f51b51f;font-weight:500}.k-select__option--selected:hover:not(:disabled){background-color:#3f51b529}.k-select__option--disabled{color:#00000061;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"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
75
|
+
}
|
|
76
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: SelectComponent, decorators: [{
|
|
77
|
+
type: Component,
|
|
78
|
+
args: [{ selector: 'c80-select', standalone: true, imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"k-select\" [ngClass]=\"{ 'k-select--disabled': disabled(), '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\" [ngClass]=\"{ 'k-select__value--placeholder': value() === null }\">\n @if (loading()) {\n Cargando...\n } @else {\n {{ getSelectedLabel() }}\n }\n </span>\n <span class=\"k-select__arrow\" [ngClass]=\"{ '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 <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\" [ngClass]=\"{\n 'k-select__option--selected': option.value === value(),\n 'k-select__option--disabled': option.disabled\n }\" [disabled]=\"option.disabled\" (click)=\"selectOption(option)\" (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 rgba(0,0,0,.23);border-radius:4px;background-color:#fff;cursor:pointer;transition:all .2s;text-align:left}.k-select__control:hover:not(:disabled){border-color:#000000de}.k-select__control:disabled{cursor:not-allowed;opacity:.6}.k-select--open .k-select__control{border-color:#3f51b5;border-width:2px;padding:7px 11px}.k-select__value{flex:1;font-size:.875rem;color:#000000de;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.k-select__value--placeholder{color:#00000061}.k-select__arrow{font-size:.5rem;color:#0000008a;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:#fff;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;z-index:1000;animation:fadeIn .15s ease-out}.k-select__search{position:sticky;top:0;padding:8px;background-color:#fff;border-bottom:1px solid rgba(0,0,0,.12);z-index:1}.k-select__search-input{width:100%;padding:6px 10px;font-size:.875rem;border:1px solid rgba(0,0,0,.23);border-radius:4px;outline:none;transition:border-color .2s}.k-select__search-input:focus{border-color:#3f51b5}.k-select__search-input::placeholder{color:#00000061}.k-select__option{width:100%;padding:8px 12px;font-size:.875rem;color:#000000de;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:#0000000a}.k-select__option--selected{background-color:#3f51b51f;font-weight:500}.k-select__option--selected:hover:not(:disabled){background-color:#3f51b529}.k-select__option--disabled{color:#00000061;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"] }]
|
|
79
|
+
}], 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 }] }] } });
|
|
80
|
+
//# sourceMappingURL=select.component.js.map
|
|
@@ -0,0 +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":"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","sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input, output, signal, viewChild, ElementRef } from '@angular/core';\nimport { NgClass } from '@angular/common';\nimport { 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: [NgClass],\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 readonly placeholder = input<string>('Seleccionar');\n readonly value = input<T | null>(null);\n readonly options = input<SelectOption<T>[]>([]);\n readonly disabled = input<boolean>(false);\n readonly loading = input<boolean>(false);\n readonly emptyMessage = input<string>('No hay opciones disponibles');\n readonly maxHeight = input<string>('300px');\n readonly filterable = input<boolean>(false);\n\n readonly valueChange = output<T | null>();\n readonly opened = output<void>();\n\n readonly isOpen = signal(false);\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 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\" [ngClass]=\"{ 'k-select--disabled': disabled(), '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\" [ngClass]=\"{ 'k-select__value--placeholder': value() === null }\">\n @if (loading()) {\n Cargando...\n } @else {\n {{ getSelectedLabel() }}\n }\n </span>\n <span class=\"k-select__arrow\" [ngClass]=\"{ '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 <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\" [ngClass]=\"{\n 'k-select__option--selected': option.value === value(),\n 'k-select__option--disabled': option.disabled\n }\" [disabled]=\"option.disabled\" (click)=\"selectOption(option)\" (keydown.enter)=\"selectOption(option)\">\n {{ option.label }}\n </button>\n }\n }\n </div>\n }\n</div>"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"select.model.js","sourceRoot":"","sources":["../../../../../libs/ui/src/lib/select/select.model.ts"],"names":[],"mappings":"","sourcesContent":["export interface SelectOption<T = string> {\n value: T;\n label: string;\n disabled?: boolean;\n}\n"]}
|
|
@@ -4,10 +4,10 @@ import * as i0 from "@angular/core";
|
|
|
4
4
|
export class C80StatCardComponent {
|
|
5
5
|
cards = input([], ...(ngDevMode ? [{ debugName: "cards" }] : []));
|
|
6
6
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: C80StatCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: C80StatCardComponent, 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\">\
|
|
7
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: C80StatCardComponent, 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 <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\"></c80-icon>\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:0 2px 8px #0000001a;transition:box-shadow .3s ease;border-left:4px solid transparent;background:#fff;color:#000000de;border-radius:4px;display:block;position:relative;padding:0;overflow:hidden}.stats-section .stat-card:hover{box-shadow:0 4px 12px #00000026}.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:#6b7280}.stat-info .stat-label{font-size:12px;color:#666;text-transform:uppercase;letter-spacing:.5px}\n"], dependencies: [{ kind: "component", type: C80IconComponent, selector: "c80-icon", inputs: ["icon", "color", "customColor", "disabled", "size", "button", "border", "type", "textLeft", "textRight"], outputs: ["iconClick"] }] });
|
|
8
8
|
}
|
|
9
9
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: C80StatCardComponent, decorators: [{
|
|
10
10
|
type: Component,
|
|
11
|
-
args: [{ selector: 'c80-stat-card', standalone: true, imports: [C80IconComponent], template: "<div class=\"stats-section py-4\">\
|
|
11
|
+
args: [{ selector: 'c80-stat-card', standalone: true, imports: [C80IconComponent], template: "<div class=\"stats-section py-4\">\n @for (card of cards(); track card.text) {\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\"></c80-icon>\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:0 2px 8px #0000001a;transition:box-shadow .3s ease;border-left:4px solid transparent;background:#fff;color:#000000de;border-radius:4px;display:block;position:relative;padding:0;overflow:hidden}.stats-section .stat-card:hover{box-shadow:0 4px 12px #00000026}.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:#6b7280}.stat-info .stat-label{font-size:12px;color:#666;text-transform:uppercase;letter-spacing:.5px}\n"] }]
|
|
12
12
|
}], propDecorators: { cards: [{ type: i0.Input, args: [{ isSignal: true, alias: "cards", required: false }] }] } });
|
|
13
13
|
//# sourceMappingURL=stat-card.component.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stat-card.component.js","sourceRoot":"","sources":["../../../../../libs/ui/src/lib/stat-card/stat-card.component.ts","../../../../../libs/ui/src/lib/stat-card/stat-card.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;;AAkB3C,MAAM,OAAO,oBAAoB;IACtB,KAAK,GAAG,KAAK,CAAY,EAAE,iDAAC,CAAC;uGAD3B,oBAAoB;2FAApB,oBAAoB,6MCnBjC,
|
|
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,MAAM,eAAe,CAAC;AACjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;;AAkB3C,MAAM,OAAO,oBAAoB;IACtB,KAAK,GAAG,KAAK,CAAY,EAAE,iDAAC,CAAC;uGAD3B,oBAAoB;2FAApB,oBAAoB,6MCnBjC,yhBAcM,uvBDCM,gBAAgB;;2FAIf,oBAAoB;kBARhC,SAAS;+BAEE,eAAe,cACb,IAAI,WACP,CAAC,gBAAgB,CAAC","sourcesContent":["import { Component, input } from '@angular/core';\r\nimport { C80IconComponent } from '../icon';\r\nimport { IconType } from '../icon/icon.types';\r\n\r\nexport interface CardDef {\r\n color: string; // Acepta cualquier color CSS\r\n icon: IconType;\r\n text: string;\r\n count: number;\r\n}\r\n\r\n@Component({\r\n // eslint-disable-next-line @angular-eslint/component-selector\r\n selector: 'c80-stat-card',\r\n standalone: true,\r\n imports: [C80IconComponent],\r\n templateUrl: './stat-card.component.html',\r\n styleUrls: ['./stat-card.component.scss'],\r\n})\r\nexport class C80StatCardComponent {\r\n readonly cards = input<CardDef[]>([]);\r\n}\r\n","<div class=\"stats-section py-4\">\n @for (card of cards(); track card.text) {\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\"></c80-icon>\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>"]}
|
package/index.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { ColorType, ButtonType } from './icon.types';
|
|
2
2
|
import * as i0 from "@angular/core";
|
|
3
3
|
export declare class C80IconComponent {
|
|
4
|
-
readonly icon: import("@angular/core").InputSignal<"
|
|
4
|
+
readonly icon: import("@angular/core").InputSignal<"warning" | "error" | "cancel" | "menu" | "search" | "table" | "filter" | "stop" | "view" | "check" | "edit" | "delete" | "add" | "get" | "settings" | "schedule" | "refresh" | "checkCircle" | "cancelCircle" | "queue" | "arrowUp" | "arrowDown" | "toggleOn" | "toggleOff" | "upload" | "pendingActions" | "playCircle" | "play" | "tune" | "visibility" | "visibilityOff" | "close" | "record" | "star" | "xCircle" | "key" | "exclamationTriangle" | "clipboard" | "download" | "shield" | "person" | "envelope" | "infoCircle" | "checkSquare" | "square" | "dashSquare" | "people" | "boxSeam" | "personBadge" | "listTask" | "shuffle" | "cpu" | "box" | "bell" | "message" | "send" | "file" | "folder" | "save" | "print" | "clock" | "calendar" | "timer" | "lock" | "unlock" | "chart" | "database" | "home" | "arrowLeft" | "arrowRight" | "copy" | "sort" | "help" | "default">;
|
|
5
5
|
readonly color: import("@angular/core").InputSignal<ColorType>;
|
|
6
6
|
readonly customColor: import("@angular/core").InputSignal<string | undefined>;
|
|
7
7
|
readonly disabled: import("@angular/core").InputSignal<boolean>;
|
|
@@ -14,7 +14,7 @@ export declare class C80IconComponent {
|
|
|
14
14
|
readonly iconClick: import("@angular/core").OutputEmitterRef<Event>;
|
|
15
15
|
readonly iconSize: import("@angular/core").Signal<number>;
|
|
16
16
|
readonly iconColor: import("@angular/core").Signal<string>;
|
|
17
|
-
readonly iconOpacity: import("@angular/core").Signal<0.5 | 0.7
|
|
17
|
+
readonly iconOpacity: import("@angular/core").Signal<1 | 0.5 | 0.7>;
|
|
18
18
|
readonly iconPath: import("@angular/core").Signal<string>;
|
|
19
19
|
readonly additionalShapes: import("@angular/core").Signal<import("@c80/ui").ShapeAttributes[]>;
|
|
20
20
|
onButtonClick(event: Event): void;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { ElementRef } from '@angular/core';
|
|
2
|
+
import { SelectOption } from './select.model';
|
|
3
|
+
import * as i0 from "@angular/core";
|
|
4
|
+
export declare class SelectComponent<T = string> {
|
|
5
|
+
readonly label: import("@angular/core").InputSignal<string>;
|
|
6
|
+
readonly placeholder: import("@angular/core").InputSignal<string>;
|
|
7
|
+
readonly value: import("@angular/core").InputSignal<T | null>;
|
|
8
|
+
readonly options: import("@angular/core").InputSignal<SelectOption<T>[]>;
|
|
9
|
+
readonly disabled: import("@angular/core").InputSignal<boolean>;
|
|
10
|
+
readonly loading: import("@angular/core").InputSignal<boolean>;
|
|
11
|
+
readonly emptyMessage: import("@angular/core").InputSignal<string>;
|
|
12
|
+
readonly maxHeight: import("@angular/core").InputSignal<string>;
|
|
13
|
+
readonly filterable: import("@angular/core").InputSignal<boolean>;
|
|
14
|
+
readonly valueChange: import("@angular/core").OutputEmitterRef<T | null>;
|
|
15
|
+
readonly opened: import("@angular/core").OutputEmitterRef<void>;
|
|
16
|
+
readonly isOpen: import("@angular/core").WritableSignal<boolean>;
|
|
17
|
+
readonly searchTerm: import("@angular/core").WritableSignal<string>;
|
|
18
|
+
readonly controlId: string;
|
|
19
|
+
readonly searchInput: import("@angular/core").Signal<ElementRef<HTMLInputElement> | undefined>;
|
|
20
|
+
readonly filteredOptions: import("@angular/core").Signal<SelectOption<T>[]>;
|
|
21
|
+
toggleDropdown(): void;
|
|
22
|
+
selectOption(option: SelectOption<T>): void;
|
|
23
|
+
selectNull(): void;
|
|
24
|
+
getSelectedLabel(): string;
|
|
25
|
+
closeDropdown(): void;
|
|
26
|
+
onSearchChange(term: string): void;
|
|
27
|
+
clearSearch(): void;
|
|
28
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<SelectComponent<any>, never>;
|
|
29
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<SelectComponent<any>, "c80-select", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "filterable": { "alias": "filterable"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; "opened": "opened"; }, never, never, true, never>;
|
|
30
|
+
}
|