@ellie-software/ui 0.0.1

package/fesm2022/ellie-software-ui.mjs

@@ -0,0 +1,84 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, ViewChild, Output, Input, Component } from '@angular/core';
+import { NgClass } from '@angular/common';
+
+class EllieModal {
+    title = '';
+    titleIcon = '';
+    bannerClass = 'bg-primary';
+    size = 'md';
+    buttons = [];
+    buttonClick = new EventEmitter();
+    closed = new EventEmitter();
+    ellieModal;
+    static instanceCount = 0;
+    backdropId;
+    constructor() {
+        EllieModal.instanceCount++;
+        this.backdropId = `ellie-modal-backdrop-${EllieModal.instanceCount}`;
+    }
+    get sizeClass() {
+        const map = { sm: 'modal-sm', lg: 'modal-lg', xl: 'modal-xl', md: '' };
+        return map[this.size] ?? '';
+    }
+    openModal() {
+        const el = this.ellieModal.nativeElement;
+        el.classList.add('show');
+        el.style.display = 'block';
+        document.body.classList.add('modal-open');
+        const backdrop = document.createElement('div');
+        backdrop.classList.add('modal-backdrop', 'fade', 'show');
+        backdrop.id = this.backdropId;
+        document.body.appendChild(backdrop);
+    }
+    closeModal() {
+        const el = this.ellieModal.nativeElement;
+        el.classList.remove('show');
+        el.style.display = 'none';
+        document.body.classList.remove('modal-open');
+        const backdrop = document.getElementById(this.backdropId);
+        if (backdrop)
+            backdrop.remove();
+    }
+    onButtonClick(btn) {
+        this.buttonClick.emit(btn.action);
+    }
+    onCloseX() {
+        this.closeModal();
+        this.closed.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: EllieModal, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: EllieModal, decorators: [{
+            type: Component,
+            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"] }]
+        }], ctorParameters: () => [], propDecorators: { title: [{
+                type: Input
+            }], titleIcon: [{
+                type: Input
+            }], bannerClass: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], buttons: [{
+                type: Input
+            }], buttonClick: [{
+                type: Output
+            }], closed: [{
+                type: Output
+            }], ellieModal: [{
+                type: ViewChild,
+                args: ['ellieModal']
+            }] } });
+
+/*
+ * @ellie-software/ui — Public API Surface
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { EllieModal };
+//# sourceMappingURL=ellie-software-ui.mjs.map

package/fesm2022/ellie-software-ui.mjs.map

@@ -0,0 +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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"}

package/index.d.ts

@@ -0,0 +1,35 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, ElementRef } from '@angular/core';
+
+interface EllieModalButton {
+    label: string;
+    colorClass: string;
+    action: string;
+    icon?: string;
+    loading?: boolean;
+    loadingLabel?: string;
+    disabled?: boolean;
+}
+declare class EllieModal {
+    title: string;
+    titleIcon: string;
+    bannerClass: string;
+    size: 'sm' | 'md' | 'lg' | 'xl';
+    buttons: EllieModalButton[];
+    buttonClick: EventEmitter<string>;
+    closed: EventEmitter<void>;
+    ellieModal: ElementRef;
+    private static instanceCount;
+    private backdropId;
+    constructor();
+    get sizeClass(): string;
+    openModal(): void;
+    closeModal(): void;
+    onButtonClick(btn: EllieModalButton): void;
+    onCloseX(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<EllieModal, never>;
+    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>;
+}
+
+export { EllieModal };
+export type { EllieModalButton };

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@ellie-software/ui",
+  "version": "0.0.1",
+  "description": "Ellie shared UI components library",
+  "license": "UNLICENSED",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Ellie-System/ts-lib-ellie-ui.git"
+  },
+  "peerDependencies": {
+    "@angular/common": "^20.0.0",
+    "@angular/core": "^20.0.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/ellie-software-ui.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./fesm2022/ellie-software-ui.mjs"
+    }
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
+}