@c80/ui 1.0.57 → 1.0.58

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (115) hide show
  1. package/esm2022/index.js +12 -8
  2. package/esm2022/index.js.map +1 -1
  3. package/esm2022/lib/action-list/action-list.component.js +7 -0
  4. package/esm2022/lib/action-list/action-list.component.js.map +1 -1
  5. package/esm2022/lib/action-list/action-list.types.js.map +1 -1
  6. package/esm2022/lib/card-level/card-level.component.js +3 -0
  7. package/esm2022/lib/card-level/card-level.component.js.map +1 -1
  8. package/esm2022/lib/header/header.component.js +8 -2
  9. package/esm2022/lib/header/header.component.js.map +1 -1
  10. package/esm2022/lib/header/header.types.js.map +1 -1
  11. package/esm2022/lib/icon/icon.component.js +10 -2
  12. package/esm2022/lib/icon/icon.component.js.map +1 -1
  13. package/esm2022/lib/icon/icon.definitions.js +34 -1
  14. package/esm2022/lib/icon/icon.definitions.js.map +1 -1
  15. package/esm2022/lib/icon/icon.types.js.map +1 -1
  16. package/esm2022/lib/icon/icon.utils.js +7 -0
  17. package/esm2022/lib/icon/icon.utils.js.map +1 -1
  18. package/esm2022/lib/icon/theme.service.js +17 -0
  19. package/esm2022/lib/icon/theme.service.js.map +1 -1
  20. package/esm2022/lib/info-list/info-list.component.js +3 -0
  21. package/esm2022/lib/info-list/info-list.component.js.map +1 -1
  22. package/esm2022/lib/input-field/input-field.component.js +19 -2
  23. package/esm2022/lib/input-field/input-field.component.js.map +1 -1
  24. package/esm2022/lib/input-search/c80-input-search.component.js +26 -0
  25. package/esm2022/lib/input-search/c80-input-search.component.js.map +1 -0
  26. package/esm2022/lib/input-search/index.js +2 -0
  27. package/esm2022/lib/input-search/index.js.map +1 -0
  28. package/esm2022/lib/modal/modal.component.js +57 -0
  29. package/esm2022/lib/modal/modal.component.js.map +1 -1
  30. package/esm2022/lib/modal/modal.service.js +60 -3
  31. package/esm2022/lib/modal/modal.service.js.map +1 -1
  32. package/esm2022/lib/profile-stats/profile-stats.component.js +6 -2
  33. package/esm2022/lib/profile-stats/profile-stats.component.js.map +1 -1
  34. package/esm2022/lib/profile-stats/profile-stats.types.js.map +1 -1
  35. package/esm2022/lib/rating-display/index.js +2 -0
  36. package/esm2022/lib/rating-display/index.js.map +1 -0
  37. package/esm2022/lib/rating-display/rating-display.component.js +24 -0
  38. package/esm2022/lib/rating-display/rating-display.component.js.map +1 -0
  39. package/esm2022/lib/rating-stars/index.js +2 -0
  40. package/esm2022/lib/rating-stars/index.js.map +1 -0
  41. package/esm2022/lib/rating-stars/rating-stars.component.js +33 -0
  42. package/esm2022/lib/rating-stars/rating-stars.component.js.map +1 -0
  43. package/esm2022/lib/select/select.component.js +27 -0
  44. package/esm2022/lib/select/select.component.js.map +1 -1
  45. package/esm2022/lib/snackbar/snackbar.component.js +17 -0
  46. package/esm2022/lib/snackbar/snackbar.component.js.map +1 -1
  47. package/esm2022/lib/snackbar/snackbar.service.js +9 -0
  48. package/esm2022/lib/snackbar/snackbar.service.js.map +1 -1
  49. package/esm2022/lib/spinner/index.js +2 -0
  50. package/esm2022/lib/spinner/index.js.map +1 -0
  51. package/esm2022/lib/spinner/spinner.component.js +22 -0
  52. package/esm2022/lib/spinner/spinner.component.js.map +1 -0
  53. package/esm2022/lib/stat-card/stat-card.component.js +3 -0
  54. package/esm2022/lib/stat-card/stat-card.component.js.map +1 -1
  55. package/esm2022/lib/tab/c80-tab.component.js +19 -2
  56. package/esm2022/lib/tab/c80-tab.component.js.map +1 -1
  57. package/esm2022/lib/tab/directives/c80-tab-item.directive.js +3 -0
  58. package/esm2022/lib/tab/directives/c80-tab-item.directive.js.map +1 -1
  59. package/esm2022/lib/tab/directives/c80-tab-label.directive.js +3 -0
  60. package/esm2022/lib/tab/directives/c80-tab-label.directive.js.map +1 -1
  61. package/esm2022/lib/table/table-column-visibility.service.js +27 -34
  62. package/esm2022/lib/table/table-column-visibility.service.js.map +1 -1
  63. package/esm2022/lib/table/table-crud-state.service.js +7 -7
  64. package/esm2022/lib/table/table-crud-state.service.js.map +1 -1
  65. package/esm2022/lib/table/table-data-converter.service.js +18 -10
  66. package/esm2022/lib/table/table-data-converter.service.js.map +1 -1
  67. package/esm2022/lib/table/table-data-utils.service.js +17 -1
  68. package/esm2022/lib/table/table-data-utils.service.js.map +1 -1
  69. package/esm2022/lib/table/table-selection.service.js +14 -3
  70. package/esm2022/lib/table/table-selection.service.js.map +1 -1
  71. package/esm2022/lib/table/table.component.js +58 -16
  72. package/esm2022/lib/table/table.component.js.map +1 -1
  73. package/esm2022/lib/table/table.types.js.map +1 -1
  74. package/esm2022/lib/table/table.utils.js +7 -0
  75. package/esm2022/lib/table/table.utils.js.map +1 -1
  76. package/index.d.ts +12 -8
  77. package/lib/action-list/action-list.component.d.ts +7 -0
  78. package/lib/action-list/action-list.types.d.ts +2 -1
  79. package/lib/card-level/card-level.component.d.ts +4 -1
  80. package/lib/header/header.component.d.ts +7 -1
  81. package/lib/header/header.types.d.ts +2 -0
  82. package/lib/icon/icon.component.d.ts +9 -1
  83. package/lib/icon/icon.types.d.ts +2 -0
  84. package/lib/icon/icon.utils.d.ts +7 -0
  85. package/lib/icon/theme.service.d.ts +17 -0
  86. package/lib/info-list/info-list.component.d.ts +3 -0
  87. package/lib/input-field/input-field.component.d.ts +17 -0
  88. package/lib/input-search/c80-input-search.component.d.ts +16 -0
  89. package/lib/input-search/index.d.ts +1 -0
  90. package/lib/modal/modal.component.d.ts +57 -0
  91. package/lib/modal/modal.service.d.ts +72 -3
  92. package/lib/profile-stats/profile-stats.component.d.ts +4 -0
  93. package/lib/profile-stats/profile-stats.types.d.ts +6 -2
  94. package/lib/rating-display/index.d.ts +1 -0
  95. package/lib/rating-display/rating-display.component.d.ts +12 -0
  96. package/lib/rating-stars/index.d.ts +1 -0
  97. package/lib/rating-stars/rating-stars.component.d.ts +19 -0
  98. package/lib/select/select.component.d.ts +27 -0
  99. package/lib/snackbar/snackbar.component.d.ts +17 -0
  100. package/lib/snackbar/snackbar.service.d.ts +9 -0
  101. package/lib/spinner/index.d.ts +1 -0
  102. package/lib/spinner/spinner.component.d.ts +12 -0
  103. package/lib/stat-card/stat-card.component.d.ts +3 -0
  104. package/lib/tab/c80-tab.component.d.ts +17 -0
  105. package/lib/tab/directives/c80-tab-item.directive.d.ts +3 -0
  106. package/lib/tab/directives/c80-tab-label.directive.d.ts +3 -0
  107. package/lib/table/table-column-visibility.service.d.ts +19 -6
  108. package/lib/table/table-crud-state.service.d.ts +23 -13
  109. package/lib/table/table-data-converter.service.d.ts +2 -0
  110. package/lib/table/table-data-utils.service.d.ts +7 -0
  111. package/lib/table/table-selection.service.d.ts +14 -12
  112. package/lib/table/table.component.d.ts +3 -0
  113. package/lib/table/table.types.d.ts +1 -0
  114. package/lib/table/table.utils.d.ts +2 -0
  115. package/package.json +1 -1
@@ -0,0 +1,24 @@
1
+ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
2
+ import { IconComponent } from '../icon';
3
+ import * as i0 from "@angular/core";
4
+ /**
5
+ *
6
+ */
7
+ export class RatingDisplayComponent {
8
+ rating = input(0, ...(ngDevMode ? [{ debugName: "rating" }] : []));
9
+ size = input(0.1, ...(ngDevMode ? [{ debugName: "size" }] : []));
10
+ spacing = input(-22, ...(ngDevMode ? [{ debugName: "spacing" }] : []));
11
+ stars = computed(() => {
12
+ const rating = Math.round(this.rating());
13
+ return Array.from({ length: rating });
14
+ }, ...(ngDevMode ? [{ debugName: "stars" }] : []));
15
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: RatingDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
16
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: RatingDisplayComponent, isStandalone: true, selector: "c80-rating-display", inputs: { rating: { classPropertyName: "rating", publicName: "rating", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--spacing.px": "spacing()" } }, ngImport: i0, template: "<div class=\"rating-display\">\n @for (star of stars(); track $index) {\n <c80-icon icon=\"starFilled\" [size]=\"size()\" color=\"warn\" class=\"rating-display__star\" />\n }\n</div>", styles: [":host{--spacing: -22px}.rating-display{display:flex;align-items:center;pointer-events:none}.rating-display__star{margin-left:var(--spacing)}.rating-display__star:first-child{margin-left:0}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "c80-icon", inputs: ["icon", "color", "customColor", "disabled", "size", "button", "border", "type", "textLeft", "textRight", "dark"], outputs: ["iconClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
17
+ }
18
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: RatingDisplayComponent, decorators: [{
19
+ type: Component,
20
+ args: [{ selector: 'c80-rating-display', standalone: true, imports: [IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
21
+ '[style.--spacing.px]': 'spacing()'
22
+ }, template: "<div class=\"rating-display\">\n @for (star of stars(); track $index) {\n <c80-icon icon=\"starFilled\" [size]=\"size()\" color=\"warn\" class=\"rating-display__star\" />\n }\n</div>", styles: [":host{--spacing: -22px}.rating-display{display:flex;align-items:center;pointer-events:none}.rating-display__star{margin-left:var(--spacing)}.rating-display__star:first-child{margin-left:0}\n"] }]
23
+ }], propDecorators: { rating: [{ type: i0.Input, args: [{ isSignal: true, alias: "rating", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], spacing: [{ type: i0.Input, args: [{ isSignal: true, alias: "spacing", required: false }] }] } });
24
+ //# sourceMappingURL=rating-display.component.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"rating-display.component.js","sourceRoot":"","sources":["../../../../../libs/ui/src/lib/rating-display/rating-display.component.ts","../../../../../libs/ui/src/lib/rating-display/rating-display.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACpF,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;;AAExC;;GAEG;AAaH,MAAM,OAAO,sBAAsB;IAC/B,MAAM,GAAG,KAAK,CAAS,CAAC,kDAAC,CAAC;IAC1B,IAAI,GAAG,KAAK,CAAS,GAAG,gDAAC,CAAC;IAC1B,OAAO,GAAG,KAAK,CAAS,CAAC,EAAE,mDAAC,CAAC;IAEV,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE;QACrC,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;QACzC,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC;IAC1C,CAAC,iDAAC,CAAC;wGARM,sBAAsB;4FAAtB,sBAAsB,qgBClBnC,iMAIM,wPDMQ,aAAa;;4FAQd,sBAAsB;kBAZlC,SAAS;+BAEI,oBAAoB,cAClB,IAAI,WACP,CAAC,aAAa,CAAC,mBAGP,uBAAuB,CAAC,MAAM,QACzC;wBACF,sBAAsB,EAAE,WAAW;qBACtC","sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\nimport { IconComponent } from '../icon';\n\n/**\n *\n */\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'c80-rating-display',\n standalone: true,\n imports: [IconComponent],\n templateUrl: './rating-display.component.html',\n styleUrl: './rating-display.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '[style.--spacing.px]': 'spacing()'\n }\n})\nexport class RatingDisplayComponent {\n rating = input<number>(0);\n size = input<number>(0.1);\n spacing = input<number>(-22);\n\n protected readonly stars = computed(() => {\n const rating = Math.round(this.rating());\n return Array.from({ length: rating });\n });\n}\n","<div class=\"rating-display\">\n @for (star of stars(); track $index) {\n <c80-icon icon=\"starFilled\" [size]=\"size()\" color=\"warn\" class=\"rating-display__star\" />\n }\n</div>"]}
@@ -0,0 +1,2 @@
1
+ export * from './rating-stars.component';
2
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../libs/ui/src/lib/rating-stars/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC","sourcesContent":["export * from './rating-stars.component';\n"]}
@@ -0,0 +1,33 @@
1
+ import { ChangeDetectionStrategy, Component, computed, input, output } from '@angular/core';
2
+ import { IconComponent } from '../icon';
3
+ import * as i0 from "@angular/core";
4
+ /**
5
+ *
6
+ */
7
+ export class RatingStarsComponent {
8
+ rating = input(0, ...(ngDevMode ? [{ debugName: "rating" }] : []));
9
+ showLabel = input(false, ...(ngDevMode ? [{ debugName: "showLabel" }] : []));
10
+ readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
11
+ ratingChange = output();
12
+ currentRating = computed(() => this.rating(), ...(ngDevMode ? [{ debugName: "currentRating" }] : []));
13
+ stars = computed(() => {
14
+ const rating = this.currentRating();
15
+ return Array.from({ length: 5 }, (_, i) => i < rating);
16
+ }, ...(ngDevMode ? [{ debugName: "stars" }] : []));
17
+ /**
18
+ *
19
+ * @param rating
20
+ */
21
+ onStarClick(rating) {
22
+ if (this.readonly())
23
+ return;
24
+ this.ratingChange.emit(rating);
25
+ }
26
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: RatingStarsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
27
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: RatingStarsComponent, isStandalone: true, selector: "c80-rating-stars", inputs: { rating: { classPropertyName: "rating", publicName: "rating", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ratingChange: "ratingChange" }, ngImport: i0, template: "<div class=\"rating-stars\">\n @for (star of stars(); track $index) {\n <c80-icon button [icon]=\"star ? 'starFilled' : 'star'\" [size]=\"1.5\" [color]=\"star ? 'warn' : undefined\" (iconClick)=\"onStarClick($index + 1)\" class=\"rating-stars__star\" [class.rating-stars__star--filled]=\"star\"\n [class.rating-stars__star--empty]=\"!star\" [title]=\"($index + 1) + ' estrella' + ($index > 0 ? 's' : '')\" />\n }\n @if (showLabel()) {\n <span class=\"rating-stars__label\">{{ currentRating() }}/5</span>\n }\n</div>", styles: [".rating-stars{display:flex;align-items:center;gap:var(--spacing-xs)}.rating-stars__star{cursor:pointer;transition:transform .2s ease;-webkit-user-select:none;user-select:none}.rating-stars__star:hover{transform:scale(1.2)}.rating-stars__star:active{transform:scale(.9)}.rating-stars__star--empty{opacity:.3}.rating-stars__label{margin-left:var(--spacing-sm);font-size:.875rem;color:var(--color-text-secondary)}@media(max-width:768px){.rating-stars{gap:var(--spacing-xs)}.rating-stars__star:hover{transform:scale(1.15)}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "c80-icon", inputs: ["icon", "color", "customColor", "disabled", "size", "button", "border", "type", "textLeft", "textRight", "dark"], outputs: ["iconClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
28
+ }
29
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: RatingStarsComponent, decorators: [{
30
+ type: Component,
31
+ args: [{ selector: 'c80-rating-stars', standalone: true, imports: [IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"rating-stars\">\n @for (star of stars(); track $index) {\n <c80-icon button [icon]=\"star ? 'starFilled' : 'star'\" [size]=\"1.5\" [color]=\"star ? 'warn' : undefined\" (iconClick)=\"onStarClick($index + 1)\" class=\"rating-stars__star\" [class.rating-stars__star--filled]=\"star\"\n [class.rating-stars__star--empty]=\"!star\" [title]=\"($index + 1) + ' estrella' + ($index > 0 ? 's' : '')\" />\n }\n @if (showLabel()) {\n <span class=\"rating-stars__label\">{{ currentRating() }}/5</span>\n }\n</div>", styles: [".rating-stars{display:flex;align-items:center;gap:var(--spacing-xs)}.rating-stars__star{cursor:pointer;transition:transform .2s ease;-webkit-user-select:none;user-select:none}.rating-stars__star:hover{transform:scale(1.2)}.rating-stars__star:active{transform:scale(.9)}.rating-stars__star--empty{opacity:.3}.rating-stars__label{margin-left:var(--spacing-sm);font-size:.875rem;color:var(--color-text-secondary)}@media(max-width:768px){.rating-stars{gap:var(--spacing-xs)}.rating-stars__star:hover{transform:scale(1.15)}}\n"] }]
32
+ }], propDecorators: { rating: [{ type: i0.Input, args: [{ isSignal: true, alias: "rating", required: false }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], ratingChange: [{ type: i0.Output, args: ["ratingChange"] }] } });
33
+ //# sourceMappingURL=rating-stars.component.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"rating-stars.component.js","sourceRoot":"","sources":["../../../../../libs/ui/src/lib/rating-stars/rating-stars.component.ts","../../../../../libs/ui/src/lib/rating-stars/rating-stars.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAC5F,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;;AAExC;;GAEG;AAUH,MAAM,OAAO,oBAAoB;IAC7B,MAAM,GAAG,KAAK,CAAS,CAAC,kDAAC,CAAC;IAC1B,SAAS,GAAG,KAAK,CAAU,KAAK,qDAAC,CAAC;IAClC,QAAQ,GAAG,KAAK,CAAU,KAAK,oDAAC,CAAC;IAEjC,YAAY,GAAG,MAAM,EAAU,CAAC;IAEb,aAAa,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,yDAAC,CAAC;IAE9C,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE;QACrC,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;QACpC,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC;IAC3D,CAAC,iDAAC,CAAC;IAEH;;;OAGG;IACO,WAAW,CAAC,MAAc;QAChC,IAAI,IAAI,CAAC,QAAQ,EAAE;YAAE,OAAO;QAC5B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IACnC,CAAC;wGArBQ,oBAAoB;4FAApB,oBAAoB,mgBCfjC,8hBAQM,mkBDEQ,aAAa;;4FAKd,oBAAoB;kBAThC,SAAS;+BAEI,kBAAkB,cAChB,IAAI,WACP,CAAC,aAAa,CAAC,mBAGP,uBAAuB,CAAC,MAAM","sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input, output } from '@angular/core';\nimport { IconComponent } from '../icon';\n\n/**\n *\n */\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'c80-rating-stars',\n standalone: true,\n imports: [IconComponent],\n templateUrl: './rating-stars.component.html',\n styleUrl: './rating-stars.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class RatingStarsComponent {\n rating = input<number>(0);\n showLabel = input<boolean>(false);\n readonly = input<boolean>(false);\n\n ratingChange = output<number>();\n\n protected readonly currentRating = computed(() => this.rating());\n\n protected readonly stars = computed(() => {\n const rating = this.currentRating();\n return Array.from({ length: 5 }, (_, i) => i < rating);\n });\n\n /**\n *\n * @param rating\n */\n protected onStarClick(rating: number): void {\n if (this.readonly()) return;\n this.ratingChange.emit(rating);\n }\n}\n","<div class=\"rating-stars\">\n @for (star of stars(); track $index) {\n <c80-icon button [icon]=\"star ? 'starFilled' : 'star'\" [size]=\"1.5\" [color]=\"star ? 'warn' : undefined\" (iconClick)=\"onStarClick($index + 1)\" class=\"rating-stars__star\" [class.rating-stars__star--filled]=\"star\"\n [class.rating-stars__star--empty]=\"!star\" [title]=\"($index + 1) + ' estrella' + ($index > 0 ? 's' : '')\" />\n }\n @if (showLabel()) {\n <span class=\"rating-stars__label\">{{ currentRating() }}/5</span>\n }\n</div>"]}
@@ -1,6 +1,9 @@
1
1
  import { ChangeDetectionStrategy, Component, computed, input, output, signal, viewChild } from '@angular/core';
2
2
  import * as i0 from "@angular/core";
3
3
  let uniqueIdCounter = 0;
4
+ /**
5
+ *
6
+ */
4
7
  export class SelectComponent {
5
8
  label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
6
9
  /* v8 ignore next */
@@ -34,6 +37,9 @@ export class SelectComponent {
34
37
  }
35
38
  return this.options().filter(opt => opt.label.toLowerCase().includes(term));
36
39
  }, ...(ngDevMode ? [{ debugName: "filteredOptions" }] : []));
40
+ /**
41
+ *
42
+ */
37
43
  toggleDropdown() {
38
44
  if (this.disabled() || this.loading()) {
39
45
  return;
@@ -51,6 +57,10 @@ export class SelectComponent {
51
57
  }
52
58
  }
53
59
  }
60
+ /**
61
+ *
62
+ * @param option
63
+ */
54
64
  selectOption(option) {
55
65
  if (option.disabled) {
56
66
  return;
@@ -58,10 +68,17 @@ export class SelectComponent {
58
68
  this.valueChange.emit(option.value);
59
69
  this.isOpen.set(false);
60
70
  }
71
+ /**
72
+ *
73
+ */
61
74
  selectNull() {
62
75
  this.valueChange.emit(null);
63
76
  this.isOpen.set(false);
64
77
  }
78
+ /**
79
+ *
80
+ * @returns Etiqueta del valor seleccionado o placeholder
81
+ */
65
82
  getSelectedLabel() {
66
83
  const currentValue = this.value();
67
84
  if (currentValue === null || currentValue === undefined) {
@@ -70,13 +87,23 @@ export class SelectComponent {
70
87
  const selected = this.options().find(opt => opt.value === currentValue);
71
88
  return selected?.label ?? this.placeholder();
72
89
  }
90
+ /**
91
+ *
92
+ */
73
93
  closeDropdown() {
74
94
  this.isOpen.set(false);
75
95
  this.clearSearch();
76
96
  }
97
+ /**
98
+ *
99
+ * @param term
100
+ */
77
101
  onSearchChange(term) {
78
102
  this.searchTerm.set(term);
79
103
  }
104
+ /**
105
+ *
106
+ */
80
107
  clearSearch() {
81
108
  this.searchTerm.set('');
82
109
  }
@@ -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":"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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
+ {"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/**\n *\n */\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'c80-select',\n standalone: true,\n imports: [],\n templateUrl: './select.component.html',\n styleUrl: './select.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SelectComponent<T = string> {\n readonly label = input.required<string>();\n /* v8 ignore next */\n readonly placeholder = input<string>('Seleccionar');\n /* v8 ignore next */\n readonly value = input<T | null>(null);\n /* v8 ignore next */\n readonly options = input<SelectOption<T>[]>([]);\n /* v8 ignore next */\n readonly disabled = input<boolean>(false);\n /* v8 ignore next */\n readonly loading = input<boolean>(false);\n /* v8 ignore next */\n readonly emptyMessage = input<string>('No hay opciones disponibles');\n /* v8 ignore next */\n readonly maxHeight = input<string>('300px');\n /* v8 ignore next */\n readonly filterable = input<boolean>(false);\n\n readonly valueChange = output<T | null>();\n readonly opened = output<void>();\n\n /* v8 ignore next */\n readonly isOpen = signal(false);\n /* v8 ignore next */\n readonly searchTerm = signal<string>('');\n readonly controlId = `c80-select-${++uniqueIdCounter}`;\n readonly searchInput = viewChild<ElementRef<HTMLInputElement>>('searchInput');\n\n readonly filteredOptions = computed(() => {\n const term = this.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 /**\n *\n */\n toggleDropdown(): void {\n if (this.disabled() || this.loading()) {\n return;\n }\n\n const wasOpen = this.isOpen();\n this.isOpen.set(!wasOpen);\n\n if (wasOpen) {\n this.clearSearch();\n } else {\n this.opened.emit();\n if (this.filterable()) {\n /* v8 ignore next 2 */\n setTimeout(() => this.searchInput()?.nativeElement.focus(), 0);\n }\n }\n }\n\n /**\n *\n * @param option\n */\n selectOption(option: SelectOption<T>): void {\n if (option.disabled) {\n return;\n }\n\n this.valueChange.emit(option.value);\n this.isOpen.set(false);\n }\n\n /**\n *\n */\n selectNull(): void {\n this.valueChange.emit(null);\n this.isOpen.set(false);\n }\n\n /**\n *\n * @returns Etiqueta del valor seleccionado o placeholder\n */\n getSelectedLabel(): string {\n const currentValue = this.value();\n if (currentValue === null || currentValue === undefined) {\n return this.placeholder();\n }\n\n const selected = this.options().find(opt => opt.value === currentValue);\n return selected?.label ?? this.placeholder();\n }\n\n /**\n *\n */\n closeDropdown(): void {\n this.isOpen.set(false);\n this.clearSearch();\n }\n\n /**\n *\n * @param term\n */\n onSearchChange(term: string): void {\n this.searchTerm.set(term);\n }\n\n /**\n *\n */\n clearSearch(): void {\n this.searchTerm.set('');\n }\n}\n","<div class=\"k-select\" [class.k-select--disabled]=\"disabled()\" [class.k-select--open]=\"isOpen()\">\n <button type=\"button\" class=\"k-select__control\" [attr.id]=\"controlId\" [attr.aria-label]=\"label()\" [attr.aria-expanded]=\"isOpen()\" [disabled]=\"disabled() || loading()\" (click)=\"toggleDropdown()\" (keydown.enter)=\"toggleDropdown()\"\n (keydown.space)=\"$event.preventDefault(); toggleDropdown()\">\n <span class=\"k-select__value\" [class.k-select__value--placeholder]=\"value() === null\">\n @if (loading()) {\n Cargando...\n } @else {\n {{ getSelectedLabel() }}\n }\n </span>\n <span class=\"k-select__arrow\" [class.k-select__arrow--up]=\"isOpen()\">▼</span>\n </button>\n\n @if (isOpen()) {\n <div class=\"k-select__backdrop\" tabindex=\"-1\" (click)=\"closeDropdown()\" (keydown.escape)=\"closeDropdown()\"></div>\n <!-- eslint-disable-next-line @angular-eslint/template/no-inline-styles -->\n <div class=\"k-select__dropdown\" [style.max-height]=\"maxHeight()\">\n @if (filterable()) {\n <div class=\"k-select__search\">\n <input type=\"text\" class=\"k-select__search-input\" [value]=\"searchTerm()\" (input)=\"onSearchChange($any($event.target).value)\" placeholder=\"Buscar...\" (click)=\"$event.stopPropagation()\" (keydown.escape)=\"closeDropdown()\" #searchInput />\n </div>\n }\n\n <button type=\"button\" class=\"k-select__option\" (click)=\"selectNull()\" (keydown.enter)=\"selectNull()\">\n -- {{ placeholder() }} --\n </button>\n\n @if (loading()) {\n <button type=\"button\" class=\"k-select__option k-select__option--disabled\" disabled>\n Cargando...\n </button>\n } @else if (filteredOptions().length === 0) {\n <button type=\"button\" class=\"k-select__option k-select__option--disabled\" disabled>\n {{ searchTerm() ? 'No se encontraron resultados' : emptyMessage() }}\n </button>\n } @else {\n @for (option of filteredOptions(); track option.value) {\n <button type=\"button\" class=\"k-select__option\" [class.k-select__option--selected]=\"option.value === value()\" [class.k-select__option--disabled]=\"option.disabled\" [disabled]=\"option.disabled\" (click)=\"selectOption(option)\"\n (keydown.enter)=\"selectOption(option)\">\n {{ option.label }}\n </button>\n }\n }\n </div>\n }\n</div>"]}
@@ -1,5 +1,8 @@
1
1
  import { Component, computed, signal, ElementRef, inject, Renderer2, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
2
2
  import * as i0 from "@angular/core";
3
+ /**
4
+ *
5
+ */
3
6
  export class SnackbarComponent {
4
7
  elementRef = inject(ElementRef);
5
8
  renderer = inject(Renderer2);
@@ -10,6 +13,10 @@ export class SnackbarComponent {
10
13
  visible = signal(false, ...(ngDevMode ? [{ debugName: "visible" }] : []));
11
14
  timerId;
12
15
  panelClasses = computed(() => this.data()?.config.panelClass.join(' ') ?? '', ...(ngDevMode ? [{ debugName: "panelClasses" }] : []));
16
+ /**
17
+ *
18
+ * @param data
19
+ */
13
20
  show(data) {
14
21
  this.clearTimer();
15
22
  this.data.set(data);
@@ -21,18 +28,28 @@ export class SnackbarComponent {
21
28
  this.timerId = setTimeout(() => this.dismiss(), data.config.duration);
22
29
  }
23
30
  }
31
+ /**
32
+ *
33
+ */
24
34
  dismiss() {
25
35
  this.visible.set(false);
26
36
  this.clearTimer();
27
37
  // Marcar para revisión de cambios con OnPush
28
38
  this.cdr.markForCheck();
29
39
  }
40
+ /**
41
+ *
42
+ */
30
43
  clearTimer() {
31
44
  if (this.timerId !== undefined) {
32
45
  clearTimeout(this.timerId);
33
46
  this.timerId = undefined;
34
47
  }
35
48
  }
49
+ /**
50
+ *
51
+ * @param config
52
+ */
36
53
  applyPosition(config) {
37
54
  const host = this.elementRef.nativeElement;
38
55
  const { verticalPosition, horizontalPosition } = config;
@@ -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":"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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 // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'c80-snackbar',\n standalone: true,\n templateUrl: './snackbar.component.html',\n styleUrl: './snackbar.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SnackbarComponent {\n private readonly elementRef = inject(ElementRef);\n private readonly renderer = inject(Renderer2);\n private readonly cdr = inject(ChangeDetectorRef);\n\n /* v8 ignore next */\n readonly data = signal<SnackbarData | null>(null);\n /* v8 ignore next */\n readonly visible = signal(false);\n\n private timerId?: ReturnType<typeof setTimeout>;\n\n readonly panelClasses = computed(() => this.data()?.config.panelClass.join(' ') ?? '');\n\n 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}"]}
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/**\n *\n */\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'c80-snackbar',\n standalone: true,\n templateUrl: './snackbar.component.html',\n styleUrl: './snackbar.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SnackbarComponent {\n private readonly elementRef = inject(ElementRef);\n private readonly renderer = inject(Renderer2);\n private readonly cdr = inject(ChangeDetectorRef);\n\n /* v8 ignore next */\n readonly data = signal<SnackbarData | null>(null);\n /* v8 ignore next */\n readonly visible = signal(false);\n\n private timerId?: ReturnType<typeof setTimeout>;\n\n readonly panelClasses = computed(() => this.data()?.config.panelClass.join(' ') ?? '');\n\n /**\n *\n * @param data\n */\n show(data: SnackbarData): void {\n this.clearTimer();\n this.data.set(data);\n this.applyPosition(data.config);\n this.visible.set(true);\n\n // Marcar para revisión de cambios con OnPush\n this.cdr.markForCheck();\n\n if (data.config.duration > 0) {\n this.timerId = setTimeout(() => this.dismiss(), data.config.duration);\n }\n }\n\n /**\n *\n */\n dismiss(): void {\n this.visible.set(false);\n this.clearTimer();\n\n // Marcar para revisión de cambios con OnPush\n this.cdr.markForCheck();\n }\n\n /**\n *\n */\n private clearTimer(): void {\n if (this.timerId !== undefined) {\n clearTimeout(this.timerId);\n this.timerId = undefined;\n }\n }\n\n /**\n *\n * @param config\n */\n private applyPosition(config: SnackbarData['config']): void {\n const host = this.elementRef.nativeElement;\n const { verticalPosition, horizontalPosition } = config;\n\n const positions = ['top', 'bottom', 'left', 'right', 'transform'];\n for (const pos of positions) {\n this.renderer.removeStyle(host, pos);\n }\n\n this.renderer.setStyle(host, verticalPosition, '1rem');\n\n if (horizontalPosition === 'center') {\n this.renderer.setStyle(host, 'left', '50%');\n this.renderer.setStyle(host, 'transform', 'translateX(-50%)');\n } else {\n this.renderer.setStyle(host, horizontalPosition, '1rem');\n }\n }\n}\n","@if (visible() && data(); as snackData) {\n<div class=\"snackbar\" [class]=\"panelClasses()\">\n <span class=\"snackbar-message\">{{ snackData.message }}</span>\n @if (snackData.action) {\n <button class=\"snackbar-action\" type=\"button\" (click)=\"dismiss()\">\n {{ snackData.action }}\n </button>\n }\n</div>\n}"]}
@@ -1,6 +1,9 @@
1
1
  import { Injectable, inject, ApplicationRef, createComponent, EnvironmentInjector } from '@angular/core';
2
2
  import { SnackbarComponent } from './snackbar.component';
3
3
  import * as i0 from "@angular/core";
4
+ /**
5
+ *
6
+ */
4
7
  export class SnackbarService {
5
8
  appRef = inject(ApplicationRef);
6
9
  injector = inject(EnvironmentInjector);
@@ -11,6 +14,12 @@ export class SnackbarService {
11
14
  verticalPosition: 'top',
12
15
  panelClass: [],
13
16
  };
17
+ /**
18
+ *
19
+ * @param message
20
+ * @param action
21
+ * @param config
22
+ */
14
23
  open(message, action, config) {
15
24
  const mergedConfig = {
16
25
  ...this.defaultConfig,
@@ -1 +1 @@
1
- {"version":3,"file":"snackbar.service.js","sourceRoot":"","sources":["../../../../../libs/ui/src/lib/snackbar/snackbar.service.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,UAAU,EACV,MAAM,EACN,cAAc,EACd,eAAe,EACf,mBAAmB,EACpB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;;AAMzD,MAAM,OAAO,eAAe;IACT,MAAM,GAAG,MAAM,CAAC,cAAc,CAAC,CAAC;IAChC,QAAQ,GAAG,MAAM,CAAC,mBAAmB,CAAC,CAAC;IAChD,YAAY,CAAmC;IAEtC,aAAa,GAA6B;QACzD,QAAQ,EAAE,IAAI;QACd,kBAAkB,EAAE,OAAO;QAC3B,gBAAgB,EAAE,KAAK;QACvB,UAAU,EAAE,EAAE;KACf,CAAC;IAEF,IAAI,CAAC,OAAe,EAAE,MAAe,EAAE,MAAuB;QAC5D,MAAM,YAAY,GAA6B;YAC7C,GAAG,IAAI,CAAC,aAAa;YACrB,GAAG,MAAM;YACT,UAAU,EAAE,MAAM,EAAE,UAAU,IAAI,IAAI,CAAC,aAAa,CAAC,UAAU;SAChE,CAAC;QAEF,MAAM,IAAI,GAAiB;YACzB,OAAO;YACP,MAAM;YACN,MAAM,EAAE,YAAY;SACrB,CAAC;QAEF,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;YACvB,IAAI,CAAC,YAAY,GAAG,eAAe,CAAC,iBAAiB,EAAE;gBACrD,mBAAmB,EAAE,IAAI,CAAC,QAAQ;aACnC,CAAC,CAAC;YAEH,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;YACnD,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC;QACtE,CAAC;QAED,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACxC,CAAC;wGAnCU,eAAe;4GAAf,eAAe,cAFd,MAAM;;4FAEP,eAAe;kBAH3B,UAAU;mBAAC;oBACV,UAAU,EAAE,MAAM;iBACnB","sourcesContent":["import {\n type ComponentRef,\n Injectable,\n inject,\n ApplicationRef,\n createComponent,\n EnvironmentInjector\n} from '@angular/core';\nimport { SnackbarComponent } from './snackbar.component';\nimport type { SnackbarConfig, SnackbarData } from './snackbar.model';\n\n@Injectable({\n providedIn: 'root',\n})\nexport class SnackbarService {\n private readonly appRef = inject(ApplicationRef);\n private readonly injector = inject(EnvironmentInjector);\n private componentRef?: ComponentRef<SnackbarComponent>;\n\n private readonly defaultConfig: Required<SnackbarConfig> = {\n duration: 2000,\n horizontalPosition: 'right',\n verticalPosition: 'top',\n panelClass: [],\n };\n\n open(message: string, action?: string, config?: SnackbarConfig): void {\n const mergedConfig: Required<SnackbarConfig> = {\n ...this.defaultConfig,\n ...config,\n panelClass: config?.panelClass ?? this.defaultConfig.panelClass,\n };\n\n const data: SnackbarData = {\n message,\n action,\n config: mergedConfig,\n };\n\n if (!this.componentRef) {\n this.componentRef = createComponent(SnackbarComponent, {\n environmentInjector: this.injector,\n });\n\n this.appRef.attachView(this.componentRef.hostView);\n document.body.appendChild(this.componentRef.location.nativeElement);\n }\n\n this.componentRef.instance.show(data);\n }\n}\n"]}
1
+ {"version":3,"file":"snackbar.service.js","sourceRoot":"","sources":["../../../../../libs/ui/src/lib/snackbar/snackbar.service.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,UAAU,EACV,MAAM,EACN,cAAc,EACd,eAAe,EACf,mBAAmB,EACpB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;;AAGzD;;GAEG;AAIH,MAAM,OAAO,eAAe;IACT,MAAM,GAAG,MAAM,CAAC,cAAc,CAAC,CAAC;IAChC,QAAQ,GAAG,MAAM,CAAC,mBAAmB,CAAC,CAAC;IAChD,YAAY,CAAmC;IAEtC,aAAa,GAA6B;QACzD,QAAQ,EAAE,IAAI;QACd,kBAAkB,EAAE,OAAO;QAC3B,gBAAgB,EAAE,KAAK;QACvB,UAAU,EAAE,EAAE;KACf,CAAC;IAEF;;;;;OAKG;IACH,IAAI,CAAC,OAAe,EAAE,MAAe,EAAE,MAAuB;QAC5D,MAAM,YAAY,GAA6B;YAC7C,GAAG,IAAI,CAAC,aAAa;YACrB,GAAG,MAAM;YACT,UAAU,EAAE,MAAM,EAAE,UAAU,IAAI,IAAI,CAAC,aAAa,CAAC,UAAU;SAChE,CAAC;QAEF,MAAM,IAAI,GAAiB;YACzB,OAAO;YACP,MAAM;YACN,MAAM,EAAE,YAAY;SACrB,CAAC;QAEF,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;YACvB,IAAI,CAAC,YAAY,GAAG,eAAe,CAAC,iBAAiB,EAAE;gBACrD,mBAAmB,EAAE,IAAI,CAAC,QAAQ;aACnC,CAAC,CAAC;YAEH,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;YACnD,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC;QACtE,CAAC;QAED,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACxC,CAAC;wGAzCU,eAAe;4GAAf,eAAe,cAFd,MAAM;;4FAEP,eAAe;kBAH3B,UAAU;mBAAC;oBACV,UAAU,EAAE,MAAM;iBACnB","sourcesContent":["import {\n type ComponentRef,\n Injectable,\n inject,\n ApplicationRef,\n createComponent,\n EnvironmentInjector\n} from '@angular/core';\nimport { SnackbarComponent } from './snackbar.component';\nimport type { SnackbarConfig, SnackbarData } from './snackbar.model';\n\n/**\n *\n */\n@Injectable({\n providedIn: 'root',\n})\nexport class SnackbarService {\n private readonly appRef = inject(ApplicationRef);\n private readonly injector = inject(EnvironmentInjector);\n private componentRef?: ComponentRef<SnackbarComponent>;\n\n private readonly defaultConfig: Required<SnackbarConfig> = {\n duration: 2000,\n horizontalPosition: 'right',\n verticalPosition: 'top',\n panelClass: [],\n };\n\n /**\n *\n * @param message\n * @param action\n * @param config\n */\n open(message: string, action?: string, config?: SnackbarConfig): void {\n const mergedConfig: Required<SnackbarConfig> = {\n ...this.defaultConfig,\n ...config,\n panelClass: config?.panelClass ?? this.defaultConfig.panelClass,\n };\n\n const data: SnackbarData = {\n message,\n action,\n config: mergedConfig,\n };\n\n if (!this.componentRef) {\n this.componentRef = createComponent(SnackbarComponent, {\n environmentInjector: this.injector,\n });\n\n this.appRef.attachView(this.componentRef.hostView);\n document.body.appendChild(this.componentRef.location.nativeElement);\n }\n\n this.componentRef.instance.show(data);\n }\n}\n"]}
@@ -0,0 +1,2 @@
1
+ export * from './spinner.component';
2
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../libs/ui/src/lib/spinner/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC","sourcesContent":["export * from './spinner.component';\n"]}
@@ -0,0 +1,22 @@
1
+ import { ChangeDetectionStrategy, Component, input } from '@angular/core';
2
+ import * as i0 from "@angular/core";
3
+ /**
4
+ *
5
+ */
6
+ export class SpinnerComponent {
7
+ size = input(40, ...(ngDevMode ? [{ debugName: "size" }] : []));
8
+ borderWidth = input(3, ...(ngDevMode ? [{ debugName: "borderWidth" }] : []));
9
+ color = input('var(--color-primary)', ...(ngDevMode ? [{ debugName: "color" }] : []));
10
+ message = input('', ...(ngDevMode ? [{ debugName: "message" }] : []));
11
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
12
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: SpinnerComponent, isStandalone: true, selector: "c80-spinner", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, borderWidth: { classPropertyName: "borderWidth", publicName: "borderWidth", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--size.px": "size()", "style.--border-width.px": "borderWidth()", "style.--border-top-color": "color()" } }, ngImport: i0, template: "<div class=\"spinner\">\n <div class=\"spinner__circle\"></div>\n @if (message()) {\n <p class=\"spinner__message\">{{ message() }}</p>\n }\n</div>", styles: [".spinner{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--spacing-md)}.spinner__circle{border:var(--border-width, 3px) solid var(--color-border);border-top-color:var(--border-top-color, var(--color-primary));width:var(--size, 40px);height:var(--size, 40px);border-radius:50%;animation:spin .8s linear infinite}.spinner__message{margin:0;color:var(--color-text-secondary);font-size:.875rem;text-align:center}@keyframes spin{to{transform:rotate(360deg)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
13
+ }
14
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: SpinnerComponent, decorators: [{
15
+ type: Component,
16
+ args: [{ selector: 'c80-spinner', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, host: {
17
+ '[style.--size.px]': 'size()',
18
+ '[style.--border-width.px]': 'borderWidth()',
19
+ '[style.--border-top-color]': 'color()'
20
+ }, template: "<div class=\"spinner\">\n <div class=\"spinner__circle\"></div>\n @if (message()) {\n <p class=\"spinner__message\">{{ message() }}</p>\n }\n</div>", styles: [".spinner{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--spacing-md)}.spinner__circle{border:var(--border-width, 3px) solid var(--color-border);border-top-color:var(--border-top-color, var(--color-primary));width:var(--size, 40px);height:var(--size, 40px);border-radius:50%;animation:spin .8s linear infinite}.spinner__message{margin:0;color:var(--color-text-secondary);font-size:.875rem;text-align:center}@keyframes spin{to{transform:rotate(360deg)}}\n"] }]
21
+ }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], borderWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderWidth", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }] } });
22
+ //# sourceMappingURL=spinner.component.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"spinner.component.js","sourceRoot":"","sources":["../../../../../libs/ui/src/lib/spinner/spinner.component.ts","../../../../../libs/ui/src/lib/spinner/spinner.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;;AAE1E;;GAEG;AAcH,MAAM,OAAO,gBAAgB;IAChB,IAAI,GAAG,KAAK,CAAS,EAAE,gDAAC,CAAC;IACzB,WAAW,GAAG,KAAK,CAAS,CAAC,uDAAC,CAAC;IAC/B,KAAK,GAAG,KAAK,CAAS,sBAAsB,iDAAC,CAAC;IAC9C,OAAO,GAAG,KAAK,CAAS,EAAE,mDAAC,CAAC;wGAJ5B,gBAAgB;4FAAhB,gBAAgB,ktBClB7B,iKAKM;;4FDaO,gBAAgB;kBAb5B,SAAS;+BAEI,aAAa,WACd,EAAE,mBAGM,uBAAuB,CAAC,MAAM,QACzC;wBACF,mBAAmB,EAAE,QAAQ;wBAC7B,2BAA2B,EAAE,eAAe;wBAC5C,4BAA4B,EAAE,SAAS;qBAC1C","sourcesContent":["import { ChangeDetectionStrategy, Component, input } from '@angular/core';\n\n/**\n *\n */\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'c80-spinner',\n imports: [],\n templateUrl: './spinner.component.html',\n styleUrl: './spinner.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '[style.--size.px]': 'size()',\n '[style.--border-width.px]': 'borderWidth()',\n '[style.--border-top-color]': 'color()'\n }\n})\nexport class SpinnerComponent {\n readonly size = input<number>(40);\n readonly borderWidth = input<number>(3);\n readonly color = input<string>('var(--color-primary)');\n readonly message = input<string>('');\n}\n","<div class=\"spinner\">\n <div class=\"spinner__circle\"></div>\n @if (message()) {\n <p class=\"spinner__message\">{{ message() }}</p>\n }\n</div>"]}
@@ -1,6 +1,9 @@
1
1
  import { Component, input, ChangeDetectionStrategy } from '@angular/core';
2
2
  import { IconComponent } from '../icon';
3
3
  import * as i0 from "@angular/core";
4
+ /**
5
+ *
6
+ */
4
7
  export class StatCardComponent {
5
8
  /* v8 ignore next */
6
9
  cards = input([], ...(ngDevMode ? [{ debugName: "cards" }] : []));
@@ -1 +1 @@
1
- {"version":3,"file":"stat-card.component.js","sourceRoot":"","sources":["../../../../../libs/ui/src/lib/stat-card/stat-card.component.ts","../../../../../libs/ui/src/lib/stat-card/stat-card.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAC1E,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;;AAmBxC,MAAM,OAAO,iBAAiB;IAC5B,oBAAoB;IACX,KAAK,GAAG,KAAK,CAAY,EAAE,iDAAC,CAAC;wGAF3B,iBAAiB;4FAAjB,iBAAiB,6MCpB9B,+lBAeM,6zBDAM,aAAa;;4FAKZ,iBAAiB;kBAT7B,SAAS;+BAEE,eAAe,cACb,IAAI,WACP,CAAC,aAAa,CAAC,mBAGP,uBAAuB,CAAC,MAAM","sourcesContent":["import { Component, input, ChangeDetectionStrategy } from '@angular/core';\nimport { IconComponent } from '../icon';\nimport type { IconType } from '../icon/icon.types';\n\nexport interface CardDef {\n color: string; // Acepta cualquier color CSS\n icon: IconType;\n text: string;\n count: number;\n}\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'c80-stat-card',\n standalone: true,\n imports: [IconComponent],\n templateUrl: './stat-card.component.html',\n styleUrls: ['./stat-card.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class StatCardComponent {\n /* v8 ignore next */\n readonly cards = input<CardDef[]>([]);\n}\n","<div class=\"stats-section py-4\">\n @for (card of cards(); track card.text) {\n <!-- eslint-disable-next-line @angular-eslint/template/no-inline-styles -->\n <div class=\"stat-card\" [style.border-left-color]=\"card.color\">\n <div class=\"stat-card-content\">\n <div class=\"stat-content\">\n <c80-icon [icon]=\"card.icon\" [color]=\"'secondary'\" [size]=\"1.1\" />\n <div class=\"stat-info\">\n <div class=\"stat-number\">{{ card.count }}</div>\n <div class=\"stat-label\">{{ card.text }}</div>\n </div>\n </div>\n </div>\n </div>\n }\n</div>"]}
1
+ {"version":3,"file":"stat-card.component.js","sourceRoot":"","sources":["../../../../../libs/ui/src/lib/stat-card/stat-card.component.ts","../../../../../libs/ui/src/lib/stat-card/stat-card.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAC1E,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;;AAUxC;;GAEG;AAUH,MAAM,OAAO,iBAAiB;IAC5B,oBAAoB;IACX,KAAK,GAAG,KAAK,CAAY,EAAE,iDAAC,CAAC;wGAF3B,iBAAiB;4FAAjB,iBAAiB,6MCvB9B,+lBAeM,6zBDGM,aAAa;;4FAKZ,iBAAiB;kBAT7B,SAAS;+BAEE,eAAe,cACb,IAAI,WACP,CAAC,aAAa,CAAC,mBAGP,uBAAuB,CAAC,MAAM","sourcesContent":["import { Component, input, ChangeDetectionStrategy } from '@angular/core';\nimport { IconComponent } from '../icon';\nimport type { IconType } from '../icon/icon.types';\n\nexport interface CardDef {\n color: string; // Acepta cualquier color CSS\n icon: IconType;\n text: string;\n count: number;\n}\n\n/**\n *\n */\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'c80-stat-card',\n standalone: true,\n imports: [IconComponent],\n templateUrl: './stat-card.component.html',\n styleUrls: ['./stat-card.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class StatCardComponent {\n /* v8 ignore next */\n readonly cards = input<CardDef[]>([]);\n}\n","<div class=\"stats-section py-4\">\n @for (card of cards(); track card.text) {\n <!-- eslint-disable-next-line @angular-eslint/template/no-inline-styles -->\n <div class=\"stat-card\" [style.border-left-color]=\"card.color\">\n <div class=\"stat-card-content\">\n <div class=\"stat-content\">\n <c80-icon [icon]=\"card.icon\" [color]=\"'secondary'\" [size]=\"1.1\" />\n <div class=\"stat-info\">\n <div class=\"stat-number\">{{ card.count }}</div>\n <div class=\"stat-label\">{{ card.text }}</div>\n </div>\n </div>\n </div>\n </div>\n }\n</div>"]}
@@ -3,31 +3,48 @@ import { NgTemplateOutlet } from '@angular/common';
3
3
  import { C80TabItemDirective } from './directives/c80-tab-item.directive';
4
4
  import { C80TabLabelDirective } from './directives/c80-tab-label.directive';
5
5
  import * as i0 from "@angular/core";
6
+ /**
7
+ *
8
+ */
6
9
  export class TabComponent {
7
10
  tabs = contentChildren(C80TabItemDirective, ...(ngDevMode ? [{ debugName: "tabs" }] : []));
8
11
  labels = contentChildren(C80TabLabelDirective, ...(ngDevMode ? [{ debugName: "labels" }] : []));
9
12
  /* v8 ignore next */
10
13
  selectedIndex = model(0, ...(ngDevMode ? [{ debugName: "selectedIndex" }] : []));
11
14
  selectedIndexChange = output();
15
+ /**
16
+ *
17
+ * @param index
18
+ */
12
19
  onTabClick(index) {
13
20
  this.selectedIndex.set(index);
14
21
  this.selectedIndexChange.emit(index);
15
22
  }
23
+ /**
24
+ *
25
+ * @param index
26
+ * @returns Template del contenido del tab o null
27
+ */
16
28
  getTabContent(index) {
17
29
  const tabList = this.tabs();
18
30
  const tab = tabList[index];
19
31
  return tab?.content ?? null;
20
32
  }
33
+ /**
34
+ *
35
+ * @param index
36
+ * @returns Template de la etiqueta del tab o null
37
+ */
21
38
  getTabLabel(index) {
22
39
  const labelList = this.labels();
23
40
  const label = labelList[index];
24
41
  return label?.template ?? null;
25
42
  }
26
43
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: TabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
27
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: TabComponent, isStandalone: true, selector: "c80-tab", inputs: { selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIndex: "selectedIndexChange", selectedIndexChange: "selectedIndexChange" }, queries: [{ propertyName: "tabs", predicate: C80TabItemDirective, isSignal: true }, { propertyName: "labels", predicate: C80TabLabelDirective, isSignal: true }], ngImport: i0, template: "<div class=\"c80-tab-container\">\n <div class=\"c80-tab-header\">\n <div class=\"c80-tab-labels\">\n @for (tab of tabs(); track $index) {\n <button type=\"button\" class=\"c80-tab-label\" [class.active]=\"selectedIndex() === $index\" (click)=\"onTabClick($index)\">\n @if (getTabLabel($index); as labelTemplate) {\n <ng-container *ngTemplateOutlet=\"labelTemplate\" />\n }\n </button>\n }\n </div>\n </div>\n\n <div class=\"c80-tab-body\">\n @for (tab of tabs(); track $index) {\n @if (selectedIndex() === $index) {\n <div class=\"c80-tab-content\">\n <ng-container *ngTemplateOutlet=\"getTabContent($index)\" />\n </div>\n }\n }\n </div>\n</div>", styles: [".c80-tab-container{display:flex;flex-direction:column;height:100%}.c80-tab-header{border-bottom:1px solid #dee2e6;background:#f8f9fa}.c80-tab-labels{display:flex;gap:0;width:100%;max-height:40px}.c80-tab-labels button{padding:10px}.c80-tab-label{flex:1;min-width:120px;padding:16px;background:transparent;border:none;border-bottom:2px solid transparent;cursor:pointer;opacity:.7;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;font-size:14px;font-weight:500;color:inherit}.c80-tab-label:hover{opacity:.9;background:#0000000a}.c80-tab-label.active{opacity:1;border-bottom-color:#000;color:#000}.c80-tab-label:focus-visible{outline:none;outline-offset:-2px}.c80-tab-body{flex:1;overflow-y:auto;position:relative}.c80-tab-content{height:100%;animation:fadeIn .2s ease-in}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@media(max-width:768px){.c80-tab-label{min-width:70px;padding:12px 8px}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
44
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: TabComponent, isStandalone: true, selector: "c80-tab", inputs: { selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIndex: "selectedIndexChange", selectedIndexChange: "selectedIndexChange" }, queries: [{ propertyName: "tabs", predicate: C80TabItemDirective, isSignal: true }, { propertyName: "labels", predicate: C80TabLabelDirective, isSignal: true }], ngImport: i0, template: "<div class=\"c80-tab-container\">\n <div class=\"c80-tab-header\">\n <div class=\"c80-tab-labels\">\n @for (tab of tabs(); track $index) {\n <button type=\"button\" class=\"c80-tab-label\" [class.active]=\"selectedIndex() === $index\" (click)=\"onTabClick($index)\">\n @if (getTabLabel($index); as labelTemplate) {\n <ng-container *ngTemplateOutlet=\"labelTemplate\" />\n }\n </button>\n }\n </div>\n </div>\n\n <div class=\"c80-tab-body\">\n @for (tab of tabs(); track $index) {\n @if (selectedIndex() === $index) {\n <div class=\"c80-tab-content\">\n <ng-container *ngTemplateOutlet=\"getTabContent($index)\" />\n </div>\n }\n }\n </div>\n</div>", styles: [".c80-tab-container{display:flex;flex-direction:column;height:100%}.c80-tab-header{border-bottom:1px solid var(--color-border);background:transparent;margin-bottom:8px}.c80-tab-labels{display:flex;gap:0;width:100%;max-height:40px}.c80-tab-labels button{padding:10px}.c80-tab-label{flex:1;min-width:120px;padding:16px;background:transparent;border:none;border-bottom:1px solid transparent;cursor:pointer;opacity:.7;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;font-size:14px;font-weight:500;color:inherit}.c80-tab-label:hover{opacity:.9;background:rgba(var(--color-primary-rgb),.05)}.c80-tab-label.active{opacity:1;border-bottom-color:var(--color-primary);color:var(--color-primary)}.c80-tab-label:focus-visible{outline:none;outline-offset:-2px}.c80-tab-body{flex:1;overflow-y:auto;position:relative}.c80-tab-content{height:100%;animation:fadeIn .2s ease-in;padding:.2rem}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@media(max-width:768px){.c80-tab-label{min-width:80px;padding:12px 8px}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
28
45
  }
29
46
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: TabComponent, decorators: [{
30
47
  type: Component,
31
- args: [{ selector: 'c80-tab', standalone: true, imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"c80-tab-container\">\n <div class=\"c80-tab-header\">\n <div class=\"c80-tab-labels\">\n @for (tab of tabs(); track $index) {\n <button type=\"button\" class=\"c80-tab-label\" [class.active]=\"selectedIndex() === $index\" (click)=\"onTabClick($index)\">\n @if (getTabLabel($index); as labelTemplate) {\n <ng-container *ngTemplateOutlet=\"labelTemplate\" />\n }\n </button>\n }\n </div>\n </div>\n\n <div class=\"c80-tab-body\">\n @for (tab of tabs(); track $index) {\n @if (selectedIndex() === $index) {\n <div class=\"c80-tab-content\">\n <ng-container *ngTemplateOutlet=\"getTabContent($index)\" />\n </div>\n }\n }\n </div>\n</div>", styles: [".c80-tab-container{display:flex;flex-direction:column;height:100%}.c80-tab-header{border-bottom:1px solid #dee2e6;background:#f8f9fa}.c80-tab-labels{display:flex;gap:0;width:100%;max-height:40px}.c80-tab-labels button{padding:10px}.c80-tab-label{flex:1;min-width:120px;padding:16px;background:transparent;border:none;border-bottom:2px solid transparent;cursor:pointer;opacity:.7;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;font-size:14px;font-weight:500;color:inherit}.c80-tab-label:hover{opacity:.9;background:#0000000a}.c80-tab-label.active{opacity:1;border-bottom-color:#000;color:#000}.c80-tab-label:focus-visible{outline:none;outline-offset:-2px}.c80-tab-body{flex:1;overflow-y:auto;position:relative}.c80-tab-content{height:100%;animation:fadeIn .2s ease-in}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@media(max-width:768px){.c80-tab-label{min-width:70px;padding:12px 8px}}\n"] }]
48
+ args: [{ selector: 'c80-tab', standalone: true, imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"c80-tab-container\">\n <div class=\"c80-tab-header\">\n <div class=\"c80-tab-labels\">\n @for (tab of tabs(); track $index) {\n <button type=\"button\" class=\"c80-tab-label\" [class.active]=\"selectedIndex() === $index\" (click)=\"onTabClick($index)\">\n @if (getTabLabel($index); as labelTemplate) {\n <ng-container *ngTemplateOutlet=\"labelTemplate\" />\n }\n </button>\n }\n </div>\n </div>\n\n <div class=\"c80-tab-body\">\n @for (tab of tabs(); track $index) {\n @if (selectedIndex() === $index) {\n <div class=\"c80-tab-content\">\n <ng-container *ngTemplateOutlet=\"getTabContent($index)\" />\n </div>\n }\n }\n </div>\n</div>", styles: [".c80-tab-container{display:flex;flex-direction:column;height:100%}.c80-tab-header{border-bottom:1px solid var(--color-border);background:transparent;margin-bottom:8px}.c80-tab-labels{display:flex;gap:0;width:100%;max-height:40px}.c80-tab-labels button{padding:10px}.c80-tab-label{flex:1;min-width:120px;padding:16px;background:transparent;border:none;border-bottom:1px solid transparent;cursor:pointer;opacity:.7;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;font-size:14px;font-weight:500;color:inherit}.c80-tab-label:hover{opacity:.9;background:rgba(var(--color-primary-rgb),.05)}.c80-tab-label.active{opacity:1;border-bottom-color:var(--color-primary);color:var(--color-primary)}.c80-tab-label:focus-visible{outline:none;outline-offset:-2px}.c80-tab-body{flex:1;overflow-y:auto;position:relative}.c80-tab-content{height:100%;animation:fadeIn .2s ease-in;padding:.2rem}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@media(max-width:768px){.c80-tab-label{min-width:80px;padding:12px 8px}}\n"] }]
32
49
  }], propDecorators: { tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => C80TabItemDirective), { isSignal: true }] }], labels: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => C80TabLabelDirective), { isSignal: true }] }], selectedIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIndex", required: false }] }, { type: i0.Output, args: ["selectedIndexChange"] }], selectedIndexChange: [{ type: i0.Output, args: ["selectedIndexChange"] }] } });
33
50
  //# sourceMappingURL=c80-tab.component.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"c80-tab.component.js","sourceRoot":"","sources":["../../../../../libs/ui/src/lib/tab/c80-tab.component.ts","../../../../../libs/ui/src/lib/tab/c80-tab.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,uBAAuB,EAAE,eAAe,EAAoB,MAAM,eAAe,CAAC;AACrH,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AAC1E,OAAO,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAC;;AAW5E,MAAM,OAAO,YAAY;IACd,IAAI,GAAG,eAAe,CAAsB,mBAAmB,gDAAC,CAAC;IACjE,MAAM,GAAG,eAAe,CAAuB,oBAAoB,kDAAC,CAAC;IAE9E,oBAAoB;IACX,aAAa,GAAG,KAAK,CAAS,CAAC,yDAAC,CAAC;IACjC,mBAAmB,GAAG,MAAM,EAAU,CAAC;IAEhD,UAAU,CAAC,KAAa;QACtB,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;QAC9B,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACvC,CAAC;IAED,aAAa,CAAC,KAAa;QACzB,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;QAC5B,MAAM,GAAG,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC;QAC3B,OAAO,GAAG,EAAE,OAAO,IAAI,IAAI,CAAC;IAC9B,CAAC;IAED,WAAW,CAAC,KAAa;QACvB,MAAM,SAAS,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;QAChC,MAAM,KAAK,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC;QAC/B,OAAO,KAAK,EAAE,QAAQ,IAAI,IAAI,CAAC;IACjC,CAAC;wGAvBU,YAAY;4FAAZ,YAAY,mVAC8B,mBAAmB,yDAChB,oBAAoB,6CChB9E,mtBAsBM,u+BDbM,gBAAgB;;4FAKf,YAAY;kBATxB,SAAS;+BAEE,SAAS,cACP,IAAI,WACP,CAAC,gBAAgB,CAAC,mBAGV,uBAAuB,CAAC,MAAM;4FAGM,mBAAmB,2FAChB,oBAAoB","sourcesContent":["import { Component, output, model, ChangeDetectionStrategy, contentChildren, type TemplateRef } from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { C80TabItemDirective } from './directives/c80-tab-item.directive';\nimport { C80TabLabelDirective } from './directives/c80-tab-label.directive';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'c80-tab',\n standalone: true,\n imports: [NgTemplateOutlet],\n templateUrl: './c80-tab.component.html',\n styleUrl: './c80-tab.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class TabComponent {\n readonly tabs = contentChildren<C80TabItemDirective>(C80TabItemDirective);\n readonly labels = contentChildren<C80TabLabelDirective>(C80TabLabelDirective);\n\n /* v8 ignore next */\n readonly selectedIndex = model<number>(0);\n readonly selectedIndexChange = output<number>();\n\n onTabClick(index: number): void {\n this.selectedIndex.set(index);\n this.selectedIndexChange.emit(index);\n }\n\n getTabContent(index: number): TemplateRef<unknown> | null {\n const tabList = this.tabs();\n const tab = tabList[index];\n return tab?.content ?? null;\n }\n\n getTabLabel(index: number): TemplateRef<unknown> | null {\n const labelList = this.labels();\n const label = labelList[index];\n return label?.template ?? null;\n }\n}\n","<div class=\"c80-tab-container\">\n <div class=\"c80-tab-header\">\n <div class=\"c80-tab-labels\">\n @for (tab of tabs(); track $index) {\n <button type=\"button\" class=\"c80-tab-label\" [class.active]=\"selectedIndex() === $index\" (click)=\"onTabClick($index)\">\n @if (getTabLabel($index); as labelTemplate) {\n <ng-container *ngTemplateOutlet=\"labelTemplate\" />\n }\n </button>\n }\n </div>\n </div>\n\n <div class=\"c80-tab-body\">\n @for (tab of tabs(); track $index) {\n @if (selectedIndex() === $index) {\n <div class=\"c80-tab-content\">\n <ng-container *ngTemplateOutlet=\"getTabContent($index)\" />\n </div>\n }\n }\n </div>\n</div>"]}
1
+ {"version":3,"file":"c80-tab.component.js","sourceRoot":"","sources":["../../../../../libs/ui/src/lib/tab/c80-tab.component.ts","../../../../../libs/ui/src/lib/tab/c80-tab.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,uBAAuB,EAAE,eAAe,EAAoB,MAAM,eAAe,CAAC;AACrH,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AAC1E,OAAO,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAC;;AAE5E;;GAEG;AAUH,MAAM,OAAO,YAAY;IACd,IAAI,GAAG,eAAe,CAAsB,mBAAmB,gDAAC,CAAC;IACjE,MAAM,GAAG,eAAe,CAAuB,oBAAoB,kDAAC,CAAC;IAE9E,oBAAoB;IACX,aAAa,GAAG,KAAK,CAAS,CAAC,yDAAC,CAAC;IACjC,mBAAmB,GAAG,MAAM,EAAU,CAAC;IAEhD;;;OAGG;IACH,UAAU,CAAC,KAAa;QACtB,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;QAC9B,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACvC,CAAC;IAED;;;;OAIG;IACH,aAAa,CAAC,KAAa;QACzB,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;QAC5B,MAAM,GAAG,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC;QAC3B,OAAO,GAAG,EAAE,OAAO,IAAI,IAAI,CAAC;IAC9B,CAAC;IAED;;;;OAIG;IACH,WAAW,CAAC,KAAa;QACvB,MAAM,SAAS,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;QAChC,MAAM,KAAK,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC;QAC/B,OAAO,KAAK,EAAE,QAAQ,IAAI,IAAI,CAAC;IACjC,CAAC;wGArCU,YAAY;4FAAZ,YAAY,mVAC8B,mBAAmB,yDAChB,oBAAoB,6CCnB9E,mtBAsBM,glCDVM,gBAAgB;;4FAKf,YAAY;kBATxB,SAAS;+BAEE,SAAS,cACP,IAAI,WACP,CAAC,gBAAgB,CAAC,mBAGV,uBAAuB,CAAC,MAAM;4FAGM,mBAAmB,2FAChB,oBAAoB","sourcesContent":["import { Component, output, model, ChangeDetectionStrategy, contentChildren, type TemplateRef } from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { C80TabItemDirective } from './directives/c80-tab-item.directive';\nimport { C80TabLabelDirective } from './directives/c80-tab-label.directive';\n\n/**\n *\n */\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'c80-tab',\n standalone: true,\n imports: [NgTemplateOutlet],\n templateUrl: './c80-tab.component.html',\n styleUrl: './c80-tab.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class TabComponent {\n readonly tabs = contentChildren<C80TabItemDirective>(C80TabItemDirective);\n readonly labels = contentChildren<C80TabLabelDirective>(C80TabLabelDirective);\n\n /* v8 ignore next */\n readonly selectedIndex = model<number>(0);\n readonly selectedIndexChange = output<number>();\n\n /**\n *\n * @param index\n */\n onTabClick(index: number): void {\n this.selectedIndex.set(index);\n this.selectedIndexChange.emit(index);\n }\n\n /**\n *\n * @param index\n * @returns Template del contenido del tab o null\n */\n getTabContent(index: number): TemplateRef<unknown> | null {\n const tabList = this.tabs();\n const tab = tabList[index];\n return tab?.content ?? null;\n }\n\n /**\n *\n * @param index\n * @returns Template de la etiqueta del tab o null\n */\n getTabLabel(index: number): TemplateRef<unknown> | null {\n const labelList = this.labels();\n const label = labelList[index];\n return label?.template ?? null;\n }\n}\n","<div class=\"c80-tab-container\">\n <div class=\"c80-tab-header\">\n <div class=\"c80-tab-labels\">\n @for (tab of tabs(); track $index) {\n <button type=\"button\" class=\"c80-tab-label\" [class.active]=\"selectedIndex() === $index\" (click)=\"onTabClick($index)\">\n @if (getTabLabel($index); as labelTemplate) {\n <ng-container *ngTemplateOutlet=\"labelTemplate\" />\n }\n </button>\n }\n </div>\n </div>\n\n <div class=\"c80-tab-body\">\n @for (tab of tabs(); track $index) {\n @if (selectedIndex() === $index) {\n <div class=\"c80-tab-content\">\n <ng-container *ngTemplateOutlet=\"getTabContent($index)\" />\n </div>\n }\n }\n </div>\n</div>"]}
@@ -1,5 +1,8 @@
1
1
  import { Directive, inject, TemplateRef } from '@angular/core';
2
2
  import * as i0 from "@angular/core";
3
+ /**
4
+ *
5
+ */
3
6
  export class C80TabItemDirective {
4
7
  content = inject((TemplateRef));
5
8
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: C80TabItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -1 +1 @@
1
- {"version":3,"file":"c80-tab-item.directive.js","sourceRoot":"","sources":["../../../../../../libs/ui/src/lib/tab/directives/c80-tab-item.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;;AAO/D,MAAM,OAAO,mBAAmB;IACrB,OAAO,GAAG,MAAM,CAAC,CAAA,WAAoB,CAAA,CAAC,CAAC;wGADrC,mBAAmB;4FAAnB,mBAAmB;;4FAAnB,mBAAmB;kBAL/B,SAAS;mBAAC;oBACT,8DAA8D;oBAC9D,QAAQ,EAAE,WAAW;oBACrB,UAAU,EAAE,IAAI;iBACjB","sourcesContent":["import { Directive, inject, TemplateRef } from '@angular/core';\n\n@Directive({\n // eslint-disable-next-line @angular-eslint/directive-selector\n selector: '[tabItem]',\n standalone: true,\n})\nexport class C80TabItemDirective {\n readonly content = inject(TemplateRef<unknown>);\n}\n"]}
1
+ {"version":3,"file":"c80-tab-item.directive.js","sourceRoot":"","sources":["../../../../../../libs/ui/src/lib/tab/directives/c80-tab-item.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;;AAE/D;;GAEG;AAMH,MAAM,OAAO,mBAAmB;IACrB,OAAO,GAAG,MAAM,CAAC,CAAA,WAAoB,CAAA,CAAC,CAAC;wGADrC,mBAAmB;4FAAnB,mBAAmB;;4FAAnB,mBAAmB;kBAL/B,SAAS;mBAAC;oBACT,8DAA8D;oBAC9D,QAAQ,EAAE,WAAW;oBACrB,UAAU,EAAE,IAAI;iBACjB","sourcesContent":["import { Directive, inject, TemplateRef } from '@angular/core';\n\n/**\n *\n */\n@Directive({\n // eslint-disable-next-line @angular-eslint/directive-selector\n selector: '[tabItem]',\n standalone: true,\n})\nexport class C80TabItemDirective {\n readonly content = inject(TemplateRef<unknown>);\n}\n"]}
@@ -1,5 +1,8 @@
1
1
  import { Directive, inject, TemplateRef } from '@angular/core';
2
2
  import * as i0 from "@angular/core";
3
+ /**
4
+ *
5
+ */
3
6
  export class C80TabLabelDirective {
4
7
  template = inject((TemplateRef));
5
8
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: C80TabLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -1 +1 @@
1
- {"version":3,"file":"c80-tab-label.directive.js","sourceRoot":"","sources":["../../../../../../libs/ui/src/lib/tab/directives/c80-tab-label.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;;AAO/D,MAAM,OAAO,oBAAoB;IACtB,QAAQ,GAAG,MAAM,CAAC,CAAA,WAAoB,CAAA,CAAC,CAAC;wGADtC,oBAAoB;4FAApB,oBAAoB;;4FAApB,oBAAoB;kBALhC,SAAS;mBAAC;oBACT,8DAA8D;oBAC9D,QAAQ,EAAE,YAAY;oBACtB,UAAU,EAAE,IAAI;iBACjB","sourcesContent":["import { Directive, inject, TemplateRef } from '@angular/core';\n\n@Directive({\n // eslint-disable-next-line @angular-eslint/directive-selector\n selector: '[tabLabel]',\n standalone: true,\n})\nexport class C80TabLabelDirective {\n readonly template = inject(TemplateRef<unknown>);\n}\n"]}
1
+ {"version":3,"file":"c80-tab-label.directive.js","sourceRoot":"","sources":["../../../../../../libs/ui/src/lib/tab/directives/c80-tab-label.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;;AAE/D;;GAEG;AAMH,MAAM,OAAO,oBAAoB;IACtB,QAAQ,GAAG,MAAM,CAAC,CAAA,WAAoB,CAAA,CAAC,CAAC;wGADtC,oBAAoB;4FAApB,oBAAoB;;4FAApB,oBAAoB;kBALhC,SAAS;mBAAC;oBACT,8DAA8D;oBAC9D,QAAQ,EAAE,YAAY;oBACtB,UAAU,EAAE,IAAI;iBACjB","sourcesContent":["import { Directive, inject, TemplateRef } from '@angular/core';\n\n/**\n *\n */\n@Directive({\n // eslint-disable-next-line @angular-eslint/directive-selector\n selector: '[tabLabel]',\n standalone: true,\n})\nexport class C80TabLabelDirective {\n readonly template = inject(TemplateRef<unknown>);\n}\n"]}