@ellie-software/ui 0.0.1 → 0.0.2

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.
@@ -1,6 +1,6 @@
1
1
  import * as i0 from '@angular/core';
2
- import { EventEmitter, ViewChild, Output, Input, Component } from '@angular/core';
3
- import { NgClass } from '@angular/common';
2
+ import { EventEmitter, ViewChild, ContentChild, Output, Input, Component } from '@angular/core';
3
+ import { NgClass, NgTemplateOutlet } from '@angular/common';
4
4
 
5
5
  class EllieModal {
6
6
  title = '';
@@ -10,6 +10,7 @@ class EllieModal {
10
10
  buttons = [];
11
11
  buttonClick = new EventEmitter();
12
12
  closed = new EventEmitter();
13
+ customFooter;
13
14
  ellieModal;
14
15
  static instanceCount = 0;
15
16
  backdropId;
@@ -48,11 +49,11 @@ class EllieModal {
48
49
  this.closed.emit();
49
50
  }
50
51
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: EllieModal, deps: [], target: i0.ɵɵFactoryTarget.Component });
51
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: EllieModal, isStandalone: true, selector: "app-ellie-modal", inputs: { title: "title", titleIcon: "titleIcon", bannerClass: "bannerClass", size: "size", buttons: "buttons" }, outputs: { buttonClick: "buttonClick", closed: "closed" }, viewQueries: [{ propertyName: "ellieModal", first: true, predicate: ["ellieModal"], descendants: true }], ngImport: i0, template: "<div class=\"modal fade\" #ellieModal tabindex=\"-1\" role=\"dialog\">\n <div class=\"modal-dialog modal-dialog-centered\" [ngClass]=\"sizeClass\" role=\"document\">\n <div class=\"modal-content\">\n\n <div class=\"modal-header text-white\" [ngClass]=\"bannerClass\">\n <h5 class=\"modal-title\">\n @if (titleIcon) {\n <i [class]=\"titleIcon\"></i>\n }\n {{ title }}\n </h5>\n <button type=\"button\" class=\"close text-white\" (click)=\"onCloseX()\">&times;</button>\n </div>\n\n <div class=\"modal-body\">\n <ng-content></ng-content>\n </div>\n\n <div class=\"modal-footer\">\n @for (btn of buttons; track btn.action) {\n <button\n type=\"button\"\n class=\"btn\"\n [ngClass]=\"btn.colorClass\"\n [disabled]=\"btn.disabled || btn.loading\"\n (click)=\"onButtonClick(btn)\">\n @if (btn.loading) {\n <span class=\"spinner-border spinner-border-sm\" role=\"status\"></span>\n {{ btn.loadingLabel || btn.label }}\n } @else {\n @if (btn.icon) {\n <i [class]=\"btn.icon\"></i>\n }\n {{ btn.label }}\n }\n </button>\n }\n </div>\n\n </div>\n </div>\n</div>\n", styles: [".modal-header .close{background:transparent;border:none;font-size:1.5rem;line-height:1;opacity:.8;cursor:pointer}.modal-header .close:hover{opacity:1}.modal-content{max-height:90vh;display:flex;flex-direction:column}.modal-body{overflow-y:auto;flex:1 1 auto}@media(max-width:576px){.modal-dialog{margin:.5rem}.modal-content{max-height:95vh}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
52
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: EllieModal, isStandalone: true, selector: "app-ellie-modal", inputs: { title: "title", titleIcon: "titleIcon", bannerClass: "bannerClass", size: "size", buttons: "buttons" }, outputs: { buttonClick: "buttonClick", closed: "closed" }, queries: [{ propertyName: "customFooter", first: true, predicate: ["modalFooter"], descendants: true }], viewQueries: [{ propertyName: "ellieModal", first: true, predicate: ["ellieModal"], descendants: true }], ngImport: i0, template: "<div class=\"modal fade\" #ellieModal tabindex=\"-1\" role=\"dialog\">\n <div class=\"modal-dialog modal-dialog-centered\" [ngClass]=\"sizeClass\" role=\"document\">\n <div class=\"modal-content\">\n\n <div class=\"modal-header text-white\" [ngClass]=\"bannerClass\">\n <h5 class=\"modal-title\">\n @if (titleIcon) {\n <i [class]=\"titleIcon\"></i>\n }\n {{ title }}\n </h5>\n <button type=\"button\" class=\"close text-white\" (click)=\"onCloseX()\">&times;</button>\n </div>\n\n <div class=\"modal-body\">\n <ng-content></ng-content>\n </div>\n\n @if (customFooter) {\n <ng-container [ngTemplateOutlet]=\"customFooter\"></ng-container>\n } @else {\n <div class=\"modal-footer\">\n @for (btn of buttons; track btn.action) {\n <button\n type=\"button\"\n class=\"btn\"\n [ngClass]=\"btn.colorClass\"\n [disabled]=\"btn.disabled || btn.loading\"\n (click)=\"onButtonClick(btn)\">\n @if (btn.loading) {\n <span class=\"spinner-border spinner-border-sm\" role=\"status\"></span>\n {{ btn.loadingLabel || btn.label }}\n } @else {\n @if (btn.icon) {\n <i [class]=\"btn.icon\"></i>\n }\n {{ btn.label }}\n }\n </button>\n }\n </div>\n }\n\n </div>\n </div>\n</div>\n", styles: [".modal-header .close{background:transparent;border:none;font-size:1.5rem;line-height:1;opacity:.8;cursor:pointer}.modal-header .close:hover{opacity:1}.modal-content{max-height:90vh;display:flex;flex-direction:column}.modal-body{overflow-y:auto;flex:1 1 auto}@media(max-width:576px){.modal-dialog{margin:.5rem}.modal-content{max-height:95vh}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
52
53
  }
53
54
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: EllieModal, decorators: [{
54
55
  type: Component,
55
- args: [{ selector: 'app-ellie-modal', imports: [NgClass], template: "<div class=\"modal fade\" #ellieModal tabindex=\"-1\" role=\"dialog\">\n <div class=\"modal-dialog modal-dialog-centered\" [ngClass]=\"sizeClass\" role=\"document\">\n <div class=\"modal-content\">\n\n <div class=\"modal-header text-white\" [ngClass]=\"bannerClass\">\n <h5 class=\"modal-title\">\n @if (titleIcon) {\n <i [class]=\"titleIcon\"></i>\n }\n {{ title }}\n </h5>\n <button type=\"button\" class=\"close text-white\" (click)=\"onCloseX()\">&times;</button>\n </div>\n\n <div class=\"modal-body\">\n <ng-content></ng-content>\n </div>\n\n <div class=\"modal-footer\">\n @for (btn of buttons; track btn.action) {\n <button\n type=\"button\"\n class=\"btn\"\n [ngClass]=\"btn.colorClass\"\n [disabled]=\"btn.disabled || btn.loading\"\n (click)=\"onButtonClick(btn)\">\n @if (btn.loading) {\n <span class=\"spinner-border spinner-border-sm\" role=\"status\"></span>\n {{ btn.loadingLabel || btn.label }}\n } @else {\n @if (btn.icon) {\n <i [class]=\"btn.icon\"></i>\n }\n {{ btn.label }}\n }\n </button>\n }\n </div>\n\n </div>\n </div>\n</div>\n", styles: [".modal-header .close{background:transparent;border:none;font-size:1.5rem;line-height:1;opacity:.8;cursor:pointer}.modal-header .close:hover{opacity:1}.modal-content{max-height:90vh;display:flex;flex-direction:column}.modal-body{overflow-y:auto;flex:1 1 auto}@media(max-width:576px){.modal-dialog{margin:.5rem}.modal-content{max-height:95vh}}\n"] }]
56
+ args: [{ selector: 'app-ellie-modal', imports: [NgClass, NgTemplateOutlet], template: "<div class=\"modal fade\" #ellieModal tabindex=\"-1\" role=\"dialog\">\n <div class=\"modal-dialog modal-dialog-centered\" [ngClass]=\"sizeClass\" role=\"document\">\n <div class=\"modal-content\">\n\n <div class=\"modal-header text-white\" [ngClass]=\"bannerClass\">\n <h5 class=\"modal-title\">\n @if (titleIcon) {\n <i [class]=\"titleIcon\"></i>\n }\n {{ title }}\n </h5>\n <button type=\"button\" class=\"close text-white\" (click)=\"onCloseX()\">&times;</button>\n </div>\n\n <div class=\"modal-body\">\n <ng-content></ng-content>\n </div>\n\n @if (customFooter) {\n <ng-container [ngTemplateOutlet]=\"customFooter\"></ng-container>\n } @else {\n <div class=\"modal-footer\">\n @for (btn of buttons; track btn.action) {\n <button\n type=\"button\"\n class=\"btn\"\n [ngClass]=\"btn.colorClass\"\n [disabled]=\"btn.disabled || btn.loading\"\n (click)=\"onButtonClick(btn)\">\n @if (btn.loading) {\n <span class=\"spinner-border spinner-border-sm\" role=\"status\"></span>\n {{ btn.loadingLabel || btn.label }}\n } @else {\n @if (btn.icon) {\n <i [class]=\"btn.icon\"></i>\n }\n {{ btn.label }}\n }\n </button>\n }\n </div>\n }\n\n </div>\n </div>\n</div>\n", styles: [".modal-header .close{background:transparent;border:none;font-size:1.5rem;line-height:1;opacity:.8;cursor:pointer}.modal-header .close:hover{opacity:1}.modal-content{max-height:90vh;display:flex;flex-direction:column}.modal-body{overflow-y:auto;flex:1 1 auto}@media(max-width:576px){.modal-dialog{margin:.5rem}.modal-content{max-height:95vh}}\n"] }]
56
57
  }], ctorParameters: () => [], propDecorators: { title: [{
57
58
  type: Input
58
59
  }], titleIcon: [{
@@ -67,6 +68,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
67
68
  type: Output
68
69
  }], closed: [{
69
70
  type: Output
71
+ }], customFooter: [{
72
+ type: ContentChild,
73
+ args: ['modalFooter']
70
74
  }], ellieModal: [{
71
75
  type: ViewChild,
72
76
  args: ['ellieModal']
@@ -1 +1 @@
1
- {"version":3,"file":"ellie-software-ui.mjs","sources":["../../../projects/ui/src/lib/ellie-modal/ellie-modal.ts","../../../projects/ui/src/lib/ellie-modal/ellie-modal.html","../../../projects/ui/src/public-api.ts","../../../projects/ui/src/ellie-software-ui.ts"],"sourcesContent":["import { Component, Input, Output, EventEmitter, ViewChild, ElementRef } from '@angular/core';\nimport { NgClass } from '@angular/common';\n\nexport interface EllieModalButton {\n label: string;\n colorClass: string; // 'btn-danger', 'btn-secondary', 'btn-success', etc.\n action: string; // identificador emitido al padre\n icon?: string; // 'fa fa-save', 'icon-trash', etc.\n loading?: boolean;\n loadingLabel?: string;\n disabled?: boolean;\n}\n\n@Component({\n selector: 'app-ellie-modal',\n imports: [NgClass],\n templateUrl: './ellie-modal.html',\n styleUrl: './ellie-modal.css'\n})\nexport class EllieModal {\n @Input() title: string = '';\n @Input() titleIcon: string = '';\n @Input() bannerClass: string = 'bg-primary';\n @Input() size: 'sm' | 'md' | 'lg' | 'xl' = 'md';\n @Input() buttons: EllieModalButton[] = [];\n\n @Output() buttonClick = new EventEmitter<string>();\n @Output() closed = new EventEmitter<void>();\n\n @ViewChild('ellieModal') ellieModal!: ElementRef;\n\n private static instanceCount = 0;\n private backdropId: string;\n\n constructor() {\n EllieModal.instanceCount++;\n this.backdropId = `ellie-modal-backdrop-${EllieModal.instanceCount}`;\n }\n\n get sizeClass(): string {\n const map: Record<string, string> = { sm: 'modal-sm', lg: 'modal-lg', xl: 'modal-xl', md: '' };\n return map[this.size] ?? '';\n }\n\n openModal(): void {\n const el = this.ellieModal.nativeElement;\n el.classList.add('show');\n el.style.display = 'block';\n document.body.classList.add('modal-open');\n const backdrop = document.createElement('div');\n backdrop.classList.add('modal-backdrop', 'fade', 'show');\n backdrop.id = this.backdropId;\n document.body.appendChild(backdrop);\n }\n\n closeModal(): void {\n const el = this.ellieModal.nativeElement;\n el.classList.remove('show');\n el.style.display = 'none';\n document.body.classList.remove('modal-open');\n const backdrop = document.getElementById(this.backdropId);\n if (backdrop) backdrop.remove();\n }\n\n onButtonClick(btn: EllieModalButton): void {\n this.buttonClick.emit(btn.action);\n }\n\n onCloseX(): void {\n this.closeModal();\n this.closed.emit();\n }\n}\n","<div class=\"modal fade\" #ellieModal tabindex=\"-1\" role=\"dialog\">\n <div class=\"modal-dialog modal-dialog-centered\" [ngClass]=\"sizeClass\" role=\"document\">\n <div class=\"modal-content\">\n\n <div class=\"modal-header text-white\" [ngClass]=\"bannerClass\">\n <h5 class=\"modal-title\">\n @if (titleIcon) {\n <i [class]=\"titleIcon\"></i>\n }\n {{ title }}\n </h5>\n <button type=\"button\" class=\"close text-white\" (click)=\"onCloseX()\">&times;</button>\n </div>\n\n <div class=\"modal-body\">\n <ng-content></ng-content>\n </div>\n\n <div class=\"modal-footer\">\n @for (btn of buttons; track btn.action) {\n <button\n type=\"button\"\n class=\"btn\"\n [ngClass]=\"btn.colorClass\"\n [disabled]=\"btn.disabled || btn.loading\"\n (click)=\"onButtonClick(btn)\">\n @if (btn.loading) {\n <span class=\"spinner-border spinner-border-sm\" role=\"status\"></span>\n {{ btn.loadingLabel || btn.label }}\n } @else {\n @if (btn.icon) {\n <i [class]=\"btn.icon\"></i>\n }\n {{ btn.label }}\n }\n </button>\n }\n </div>\n\n </div>\n </div>\n</div>\n","/*\n * @ellie-software/ui — Public API Surface\n */\n\nexport { EllieModal, EllieModalButton } from './lib/ellie-modal/ellie-modal';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"ellie-software-ui.mjs","sources":["../../../projects/ui/src/lib/ellie-modal/ellie-modal.ts","../../../projects/ui/src/lib/ellie-modal/ellie-modal.html","../../../projects/ui/src/public-api.ts","../../../projects/ui/src/ellie-software-ui.ts"],"sourcesContent":["import { Component, Input, Output, EventEmitter, ViewChild, ElementRef, ContentChild, TemplateRef } from '@angular/core';\nimport { NgClass, NgTemplateOutlet } from '@angular/common';\n\nexport interface EllieModalButton {\n label: string;\n colorClass: string; // 'btn-danger', 'btn-secondary', 'btn-success', etc.\n action: string; // identificador emitido al padre\n icon?: string; // 'fa fa-save', 'icon-trash', etc.\n loading?: boolean;\n loadingLabel?: string;\n disabled?: boolean;\n}\n\n@Component({\n selector: 'app-ellie-modal',\n imports: [NgClass, NgTemplateOutlet],\n templateUrl: './ellie-modal.html',\n styleUrl: './ellie-modal.css'\n})\nexport class EllieModal {\n @Input() title: string = '';\n @Input() titleIcon: string = '';\n @Input() bannerClass: string = 'bg-primary';\n @Input() size: 'sm' | 'md' | 'lg' | 'xl' = 'md';\n @Input() buttons: EllieModalButton[] = [];\n\n @Output() buttonClick = new EventEmitter<string>();\n @Output() closed = new EventEmitter<void>();\n\n @ContentChild('modalFooter') customFooter?: TemplateRef<unknown>;\n @ViewChild('ellieModal') ellieModal!: ElementRef;\n\n private static instanceCount = 0;\n private backdropId: string;\n\n constructor() {\n EllieModal.instanceCount++;\n this.backdropId = `ellie-modal-backdrop-${EllieModal.instanceCount}`;\n }\n\n get sizeClass(): string {\n const map: Record<string, string> = { sm: 'modal-sm', lg: 'modal-lg', xl: 'modal-xl', md: '' };\n return map[this.size] ?? '';\n }\n\n openModal(): void {\n const el = this.ellieModal.nativeElement;\n el.classList.add('show');\n el.style.display = 'block';\n document.body.classList.add('modal-open');\n const backdrop = document.createElement('div');\n backdrop.classList.add('modal-backdrop', 'fade', 'show');\n backdrop.id = this.backdropId;\n document.body.appendChild(backdrop);\n }\n\n closeModal(): void {\n const el = this.ellieModal.nativeElement;\n el.classList.remove('show');\n el.style.display = 'none';\n document.body.classList.remove('modal-open');\n const backdrop = document.getElementById(this.backdropId);\n if (backdrop) backdrop.remove();\n }\n\n onButtonClick(btn: EllieModalButton): void {\n this.buttonClick.emit(btn.action);\n }\n\n onCloseX(): void {\n this.closeModal();\n this.closed.emit();\n }\n}\n","<div class=\"modal fade\" #ellieModal tabindex=\"-1\" role=\"dialog\">\n <div class=\"modal-dialog modal-dialog-centered\" [ngClass]=\"sizeClass\" role=\"document\">\n <div class=\"modal-content\">\n\n <div class=\"modal-header text-white\" [ngClass]=\"bannerClass\">\n <h5 class=\"modal-title\">\n @if (titleIcon) {\n <i [class]=\"titleIcon\"></i>\n }\n {{ title }}\n </h5>\n <button type=\"button\" class=\"close text-white\" (click)=\"onCloseX()\">&times;</button>\n </div>\n\n <div class=\"modal-body\">\n <ng-content></ng-content>\n </div>\n\n @if (customFooter) {\n <ng-container [ngTemplateOutlet]=\"customFooter\"></ng-container>\n } @else {\n <div class=\"modal-footer\">\n @for (btn of buttons; track btn.action) {\n <button\n type=\"button\"\n class=\"btn\"\n [ngClass]=\"btn.colorClass\"\n [disabled]=\"btn.disabled || btn.loading\"\n (click)=\"onButtonClick(btn)\">\n @if (btn.loading) {\n <span class=\"spinner-border spinner-border-sm\" role=\"status\"></span>\n {{ btn.loadingLabel || btn.label }}\n } @else {\n @if (btn.icon) {\n <i [class]=\"btn.icon\"></i>\n }\n {{ btn.label }}\n }\n </button>\n }\n </div>\n }\n\n </div>\n </div>\n</div>\n","/*\n * @ellie-software/ui — Public API Surface\n */\n\nexport { EllieModal, EllieModalButton } from './lib/ellie-modal/ellie-modal';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
package/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as i0 from '@angular/core';
2
- import { EventEmitter, ElementRef } from '@angular/core';
2
+ import { EventEmitter, TemplateRef, ElementRef } from '@angular/core';
3
3
 
4
4
  interface EllieModalButton {
5
5
  label: string;
@@ -18,6 +18,7 @@ declare class EllieModal {
18
18
  buttons: EllieModalButton[];
19
19
  buttonClick: EventEmitter<string>;
20
20
  closed: EventEmitter<void>;
21
+ customFooter?: TemplateRef<unknown>;
21
22
  ellieModal: ElementRef;
22
23
  private static instanceCount;
23
24
  private backdropId;
@@ -28,7 +29,7 @@ declare class EllieModal {
28
29
  onButtonClick(btn: EllieModalButton): void;
29
30
  onCloseX(): void;
30
31
  static ɵfac: i0.ɵɵFactoryDeclaration<EllieModal, never>;
31
- static ɵcmp: i0.ɵɵComponentDeclaration<EllieModal, "app-ellie-modal", never, { "title": { "alias": "title"; "required": false; }; "titleIcon": { "alias": "titleIcon"; "required": false; }; "bannerClass": { "alias": "bannerClass"; "required": false; }; "size": { "alias": "size"; "required": false; }; "buttons": { "alias": "buttons"; "required": false; }; }, { "buttonClick": "buttonClick"; "closed": "closed"; }, never, ["*"], true, never>;
32
+ static ɵcmp: i0.ɵɵComponentDeclaration<EllieModal, "app-ellie-modal", never, { "title": { "alias": "title"; "required": false; }; "titleIcon": { "alias": "titleIcon"; "required": false; }; "bannerClass": { "alias": "bannerClass"; "required": false; }; "size": { "alias": "size"; "required": false; }; "buttons": { "alias": "buttons"; "required": false; }; }, { "buttonClick": "buttonClick"; "closed": "closed"; }, ["customFooter"], ["*"], true, never>;
32
33
  }
33
34
 
34
35
  export { EllieModal };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ellie-software/ui",
3
- "version": "0.0.1",
3
+ "version": "0.0.2",
4
4
  "description": "Ellie shared UI components library",
5
5
  "license": "UNLICENSED",
6
6
  "repository": {