@blank-software/core-components 0.0.1 → 0.0.2

package/fesm2022/blank-software-core-components.mjs

@@ -1,5 +1,6 @@
 import * as i0 from '@angular/core';
-import { input, booleanAttribute, model, inject, forwardRef, computed, Component, contentChildren, output, HostListener, signal, ElementRef, Injectable } from '@angular/core';
+import { input, booleanAttribute, model, inject, forwardRef, computed, Component, contentChildren, output, HostListener, signal, viewChild, ApplicationRef, EnvironmentInjector, createComponent, Injectable, ElementRef } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
 
 class AccordionItem {
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
@@ -362,6 +363,121 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                 args: ['document:keydown.escape']
             }] } });
 
+class ModalDialog {
+    cancelText = signal('Annulla', ...(ngDevMode ? [{ debugName: "cancelText" }] : []));
+    closeOnBackdrop = signal(true, ...(ngDevMode ? [{ debugName: "closeOnBackdrop" }] : []));
+    closeOnEsc = signal(true, ...(ngDevMode ? [{ debugName: "closeOnEsc" }] : []));
+    confirmText = signal('OK', ...(ngDevMode ? [{ debugName: "confirmText" }] : []));
+    open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
+    showCancel = signal(false, ...(ngDevMode ? [{ debugName: "showCancel" }] : []));
+    size = signal('sm', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    text = signal('', ...(ngDevMode ? [{ debugName: "text" }] : []));
+    title = signal('', ...(ngDevMode ? [{ debugName: "title" }] : []));
+    type = signal('confirm', ...(ngDevMode ? [{ debugName: "type" }] : []));
+    panel = viewChild('panel', ...(ngDevMode ? [{ debugName: "panel" }] : []));
+    resolvePromise;
+    configure(options) {
+        if (options.title != null)
+            this.title.set(options.title);
+        if (options.text != null)
+            this.text.set(options.text);
+        if (options.type != null)
+            this.type.set(options.type);
+        if (options.size != null)
+            this.size.set(options.size);
+        if (options.confirmText != null)
+            this.confirmText.set(options.confirmText);
+        if (options.cancelText != null)
+            this.cancelText.set(options.cancelText);
+        if (options.showCancel != null)
+            this.showCancel.set(options.showCancel);
+        if (options.closeOnBackdrop != null)
+            this.closeOnBackdrop.set(options.closeOnBackdrop);
+        if (options.closeOnEsc != null)
+            this.closeOnEsc.set(options.closeOnEsc);
+        this.open.set(true);
+        return new Promise((resolve) => {
+            this.resolvePromise = resolve;
+        });
+    }
+    confirm() {
+        this.open.set(false);
+        this.resolvePromise({ confirmed: true });
+    }
+    dismiss() {
+        this.open.set(false);
+        this.resolvePromise({ confirmed: false });
+    }
+    onBackdropClick() {
+        if (this.closeOnBackdrop()) {
+            this.dismiss();
+        }
+    }
+    onEscKey() {
+        if (this.open() && this.closeOnEsc()) {
+            this.dismiss();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ModalDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ModalDialog, isStandalone: true, selector: "bsc-modal-dialog", host: { listeners: { "document:keydown.escape": "onEscKey()" } }, viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (open()) {\n  <!-- Backdrop -->\n  <div\n    class=\"bsc-modal-backdrop\"\n    (click)=\"onBackdropClick()\"\n    tabindex=\"-1\"\n    role=\"button\"\n    aria-label=\"Close modal\"\n  ></div>\n\n  <!-- Dialog -->\n  <div class=\"bsc-modal-overlay\">\n    <div class=\"bsc-modal-panel bsc-modal-{{ size() }}\">\n      <div class=\"bsc-modal-dialog\" role=\"alertdialog\" aria-modal=\"true\" #panel>\n        <!-- Icon -->\n        <div class=\"bsc-modal-dialog-icon\" [class]=\"'bsc-modal-dialog-icon-' + type()\">\n          @switch (type()) {\n            @case ('success') {\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                width=\"48\"\n                height=\"48\"\n                fill=\"none\"\n                viewBox=\"0 0 24 24\"\n              >\n                <path\n                  stroke=\"currentColor\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"2\"\n                  d=\"M5 13l4 4L19 7\"\n                />\n              </svg>\n            }\n            @case ('error') {\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                width=\"48\"\n                height=\"48\"\n                fill=\"none\"\n                viewBox=\"0 0 24 24\"\n              >\n                <path\n                  stroke=\"currentColor\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"2\"\n                  d=\"M6 18L18 6M6 6l12 12\"\n                />\n              </svg>\n            }\n            @case ('confirm') {\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                width=\"48\"\n                height=\"48\"\n                fill=\"none\"\n                viewBox=\"0 0 24 24\"\n              >\n                <path\n                  stroke=\"currentColor\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"2\"\n                  d=\"M12 9v4m0 4h.01M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Z\"\n                />\n              </svg>\n            }\n          }\n        </div>\n\n        <!-- Title -->\n        @if (title()) {\n          <h3 class=\"bsc-modal-dialog-title\">{{ title() }}</h3>\n        }\n\n        <!-- Text -->\n        @if (text()) {\n          <p class=\"bsc-modal-dialog-text\">{{ text() }}</p>\n        }\n\n        <!-- Buttons -->\n        <div class=\"bsc-modal-dialog-actions\">\n          @if (showCancel()) {\n            <button type=\"button\" class=\"bsc-modal-dialog-cancel-btn\" (click)=\"dismiss()\">\n              {{ cancelText() }}\n            </button>\n          }\n          <button\n            type=\"button\"\n            class=\"bsc-modal-dialog-confirm-btn bsc-modal-dialog-btn-{{ type() }}\"\n            (click)=\"confirm()\"\n          >\n            {{ confirmText() }}\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n}\n", styles: ["@reference \"tailwindcss\";.bsc-modal-backdrop{@apply fixed inset-0 z-40 bg-black/40;animation:bsc-modal-fade-in .2s ease-out}.bsc-modal-overlay{@apply overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 flex justify-center items-center w-full h-[calc(100%-1rem)] max-h-full md:inset-0;animation:bsc-modal-slide-in .2s ease-out}@keyframes bsc-modal-fade-in{0%{opacity:0}to{opacity:1}}@keyframes bsc-modal-slide-in{0%{opacity:0;transform:translateY(-1rem) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.bsc-modal-panel{@apply relative p-4 w-full max-h-full;}.bsc-modal-sm{@apply max-w-sm;}.bsc-modal-md{@apply max-w-md;}.bsc-modal-lg{@apply max-w-2xl;}.bsc-modal-dialog{@apply relative bg-surface border border-ink-200 rounded-base shadow-sm p-6 md:p-8 text-center;}.bsc-modal-dialog-icon{@apply mx-auto mb-4 flex items-center justify-center w-16 h-16 rounded-full;}.bsc-modal-dialog-icon-success{@apply bg-green-100 text-green-500;}.bsc-modal-dialog-icon-error{@apply bg-red-100 text-red-500;}.bsc-modal-dialog-icon-confirm{@apply bg-amber-100 text-amber-500;}.bsc-modal-dialog-title{@apply text-lg font-semibold text-ink-900 mb-2;}.bsc-modal-dialog-text{@apply text-sm text-ink-500 mb-6;}.bsc-modal-dialog-actions{@apply flex items-center justify-center gap-3;}.bsc-modal-dialog-confirm-btn{@apply inline-flex items-center font-medium rounded-base text-sm px-5 py-2.5 text-white shadow-xs cursor-pointer focus:ring-4 focus:outline-none;}.bsc-modal-dialog-btn-success{@apply bg-green-500 hover:bg-green-600 focus:ring-green-200;}.bsc-modal-dialog-btn-error{@apply bg-red-500 hover:bg-red-600 focus:ring-red-200;}.bsc-modal-dialog-btn-confirm{@apply bg-primary hover:bg-primary-700 focus:ring-primary-200;}.bsc-modal-dialog-cancel-btn{@apply inline-flex items-center font-medium rounded-base text-sm px-5 py-2.5 text-ink-700 bg-ink-100 hover:bg-ink-200 shadow-xs cursor-pointer focus:ring-4 focus:ring-ink-100 focus:outline-none;}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ModalDialog, decorators: [{
+            type: Component,
+            args: [{ selector: 'bsc-modal-dialog', imports: [], template: "@if (open()) {\n  <!-- Backdrop -->\n  <div\n    class=\"bsc-modal-backdrop\"\n    (click)=\"onBackdropClick()\"\n    tabindex=\"-1\"\n    role=\"button\"\n    aria-label=\"Close modal\"\n  ></div>\n\n  <!-- Dialog -->\n  <div class=\"bsc-modal-overlay\">\n    <div class=\"bsc-modal-panel bsc-modal-{{ size() }}\">\n      <div class=\"bsc-modal-dialog\" role=\"alertdialog\" aria-modal=\"true\" #panel>\n        <!-- Icon -->\n        <div class=\"bsc-modal-dialog-icon\" [class]=\"'bsc-modal-dialog-icon-' + type()\">\n          @switch (type()) {\n            @case ('success') {\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                width=\"48\"\n                height=\"48\"\n                fill=\"none\"\n                viewBox=\"0 0 24 24\"\n              >\n                <path\n                  stroke=\"currentColor\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"2\"\n                  d=\"M5 13l4 4L19 7\"\n                />\n              </svg>\n            }\n            @case ('error') {\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                width=\"48\"\n                height=\"48\"\n                fill=\"none\"\n                viewBox=\"0 0 24 24\"\n              >\n                <path\n                  stroke=\"currentColor\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"2\"\n                  d=\"M6 18L18 6M6 6l12 12\"\n                />\n              </svg>\n            }\n            @case ('confirm') {\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                width=\"48\"\n                height=\"48\"\n                fill=\"none\"\n                viewBox=\"0 0 24 24\"\n              >\n                <path\n                  stroke=\"currentColor\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"2\"\n                  d=\"M12 9v4m0 4h.01M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Z\"\n                />\n              </svg>\n            }\n          }\n        </div>\n\n        <!-- Title -->\n        @if (title()) {\n          <h3 class=\"bsc-modal-dialog-title\">{{ title() }}</h3>\n        }\n\n        <!-- Text -->\n        @if (text()) {\n          <p class=\"bsc-modal-dialog-text\">{{ text() }}</p>\n        }\n\n        <!-- Buttons -->\n        <div class=\"bsc-modal-dialog-actions\">\n          @if (showCancel()) {\n            <button type=\"button\" class=\"bsc-modal-dialog-cancel-btn\" (click)=\"dismiss()\">\n              {{ cancelText() }}\n            </button>\n          }\n          <button\n            type=\"button\"\n            class=\"bsc-modal-dialog-confirm-btn bsc-modal-dialog-btn-{{ type() }}\"\n            (click)=\"confirm()\"\n          >\n            {{ confirmText() }}\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n}\n", styles: ["@reference \"tailwindcss\";.bsc-modal-backdrop{@apply fixed inset-0 z-40 bg-black/40;animation:bsc-modal-fade-in .2s ease-out}.bsc-modal-overlay{@apply overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 flex justify-center items-center w-full h-[calc(100%-1rem)] max-h-full md:inset-0;animation:bsc-modal-slide-in .2s ease-out}@keyframes bsc-modal-fade-in{0%{opacity:0}to{opacity:1}}@keyframes bsc-modal-slide-in{0%{opacity:0;transform:translateY(-1rem) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.bsc-modal-panel{@apply relative p-4 w-full max-h-full;}.bsc-modal-sm{@apply max-w-sm;}.bsc-modal-md{@apply max-w-md;}.bsc-modal-lg{@apply max-w-2xl;}.bsc-modal-dialog{@apply relative bg-surface border border-ink-200 rounded-base shadow-sm p-6 md:p-8 text-center;}.bsc-modal-dialog-icon{@apply mx-auto mb-4 flex items-center justify-center w-16 h-16 rounded-full;}.bsc-modal-dialog-icon-success{@apply bg-green-100 text-green-500;}.bsc-modal-dialog-icon-error{@apply bg-red-100 text-red-500;}.bsc-modal-dialog-icon-confirm{@apply bg-amber-100 text-amber-500;}.bsc-modal-dialog-title{@apply text-lg font-semibold text-ink-900 mb-2;}.bsc-modal-dialog-text{@apply text-sm text-ink-500 mb-6;}.bsc-modal-dialog-actions{@apply flex items-center justify-center gap-3;}.bsc-modal-dialog-confirm-btn{@apply inline-flex items-center font-medium rounded-base text-sm px-5 py-2.5 text-white shadow-xs cursor-pointer focus:ring-4 focus:outline-none;}.bsc-modal-dialog-btn-success{@apply bg-green-500 hover:bg-green-600 focus:ring-green-200;}.bsc-modal-dialog-btn-error{@apply bg-red-500 hover:bg-red-600 focus:ring-red-200;}.bsc-modal-dialog-btn-confirm{@apply bg-primary hover:bg-primary-700 focus:ring-primary-200;}.bsc-modal-dialog-cancel-btn{@apply inline-flex items-center font-medium rounded-base text-sm px-5 py-2.5 text-ink-700 bg-ink-100 hover:bg-ink-200 shadow-xs cursor-pointer focus:ring-4 focus:ring-ink-100 focus:outline-none;}\n"] }]
+        }], propDecorators: { panel: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], onEscKey: [{
+                type: HostListener,
+                args: ['document:keydown.escape']
+            }] } });
+
+class ModalService {
+    appRef = inject(ApplicationRef);
+    document = inject(DOCUMENT);
+    injector = inject(EnvironmentInjector);
+    confirm(options) {
+        return this.fire({
+            confirmText: 'Conferma',
+            showCancel: true,
+            ...options,
+            type: 'confirm',
+        });
+    }
+    error(options) {
+        return this.fire({
+            confirmText: 'OK',
+            ...options,
+            type: 'error',
+        });
+    }
+    fire(options) {
+        const componentRef = createComponent(ModalDialog, {
+            environmentInjector: this.injector,
+        });
+        this.appRef.attachView(componentRef.hostView);
+        this.document.body.appendChild(componentRef.location.nativeElement);
+        const promise = componentRef.instance.configure(options);
+        return promise.then((result) => {
+            this.appRef.detachView(componentRef.hostView);
+            componentRef.destroy();
+            return result;
+        });
+    }
+    success(options) {
+        return this.fire({
+            confirmText: 'OK',
+            ...options,
+            type: 'success',
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ModalService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ModalService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
 class Navigation {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: Navigation, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: Navigation, isStandalone: true, selector: "bsc-navigation", ngImport: i0, template: "<p>navigation works!</p>\n", styles: [""] });
@@ -858,5 +974,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { Accordion, AccordionItem, Alert, Avatar, Badge, Breadcrumb, Button, Card, Checkbox, DatePicker, Dropdown, FileUpload, Footer, FormField, Header, Icon, Input, Label, Modal, Navigation, Pagination, ProgressBar, Radio, SearchBar, Select, Sidebar, SidebarService, Skeleton, Spinner, Stepper, Table, Tabs, Toggle, Tooltip };
+export { Accordion, AccordionItem, Alert, Avatar, Badge, Breadcrumb, Button, Card, Checkbox, DatePicker, Dropdown, FileUpload, Footer, FormField, Header, Icon, Input, Label, Modal, ModalDialog, ModalService, Navigation, Pagination, ProgressBar, Radio, SearchBar, Select, Sidebar, SidebarService, Skeleton, Spinner, Stepper, Table, Tabs, Toggle, Tooltip };
 //# sourceMappingURL=blank-software-core-components.mjs.map