ngs-dialog 1.0.0

package/README.md

@@ -0,0 +1,18 @@
+# 🪟 ngs-dialog
+
+A lightweight, draggable, and fully customizable Angular dialog component built with modern signals and native CSS variables for effortless, zero-boilerplate theming.
+
+## ✨ Features
+
+- 🚀 **Modern Angular**: Built with Standalone components and modern Signals (`input()`, `contentChild()`).
+- 🖱️ **Draggable**: Powered by `@angular/cdk/drag-drop` with an elegant, optional drag handle.
+- 🎨 **Zero-Boilerplate Theming**: 100% customizable via native CSS Custom Properties. No `::ng-deep` or complex Sass overrides required.
+- 📦 **Clean DOM**: Uses structural directives (`ng-template`) for content projection, giving you full control over your markup without extra wrapper elements.
+- 🌗 **Flexible**: Built-in support for optional modal backdrops, responsive sizing, and clean separation of Header, Content, and Actions.
+
+## 📦 Installation
+
+```bash
+npm install ngs-dialog
+# or
+yarn add ngs-dialog

package/fesm2022/ngs-dialog.mjs

@@ -0,0 +1,66 @@
+import * as i0 from '@angular/core';
+import { inject, TemplateRef, Directive, input, contentChild, ChangeDetectionStrategy, Component } from '@angular/core';
+import { CdkDrag, CdkDragHandle } from '@angular/cdk/drag-drop';
+import { NgTemplateOutlet } from '@angular/common';
+
+class NgsDialogHeader {
+    templateRef = inject((TemplateRef));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: NgsDialogHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: NgsDialogHeader, isStandalone: true, selector: "ng-template[ngsDialogHeader]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: NgsDialogHeader, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[ngsDialogHeader]',
+                }]
+        }] });
+
+class NgsDialogContent {
+    templateRef = inject((TemplateRef));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: NgsDialogContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: NgsDialogContent, isStandalone: true, selector: "ng-template[ngsDialogContent]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: NgsDialogContent, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[ngsDialogContent]',
+                }]
+        }] });
+
+class NgsDialogAction {
+    templateRef = inject((TemplateRef));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: NgsDialogAction, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: NgsDialogAction, isStandalone: true, selector: "ng-template[ngsDialogAction]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: NgsDialogAction, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[ngsDialogAction]',
+                }]
+        }] });
+
+class NgsDialog {
+    showHandler = input(true, ...(ngDevMode ? [{ debugName: "showHandler" }] : /* istanbul ignore next */ []));
+    draggable = input(true, ...(ngDevMode ? [{ debugName: "draggable" }] : /* istanbul ignore next */ []));
+    hasBackDrop = input(false, ...(ngDevMode ? [{ debugName: "hasBackDrop" }] : /* istanbul ignore next */ []));
+    header = contentChild(NgsDialogHeader, ...(ngDevMode ? [{ debugName: "header" }] : /* istanbul ignore next */ []));
+    content = contentChild(NgsDialogContent, ...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
+    action = contentChild(NgsDialogAction, ...(ngDevMode ? [{ debugName: "action" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: NgsDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: NgsDialog, isStandalone: true, selector: "ngs-dialog", inputs: { showHandler: { classPropertyName: "showHandler", publicName: "showHandler", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, hasBackDrop: { classPropertyName: "hasBackDrop", publicName: "hasBackDrop", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "header", first: true, predicate: NgsDialogHeader, descendants: true, isSignal: true }, { propertyName: "content", first: true, predicate: NgsDialogContent, descendants: true, isSignal: true }, { propertyName: "action", first: true, predicate: NgsDialogAction, descendants: true, isSignal: true }], ngImport: i0, template: "@if(hasBackDrop()){\r\n  <div class=\"ngs-dialog-backdrop\"></div>\r\n}\r\n\r\n<div class=\"ngs-dialog-wrapper\" [class.draggable]=\"draggable()\" cdkDrag [cdkDragDisabled]=\"!draggable()\" >\r\n  <div class=\"ngs-dialog-handle\" cdkDragHandle aria-label=\"Drag dialog\">\r\n    @if (showHandler()) {\r\n      <ng-container [ngTemplateOutlet]=\"handlerIcon\"></ng-container>\r\n    }\r\n    @if (header()) {\r\n      <div class=\"ngs-dialog-header\">\r\n        <ng-container [ngTemplateOutlet]=\"header()!.templateRef\"></ng-container>\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n\r\n  @if (content()) {\r\n    <div class=\"ngs-dialog-content\">\r\n      <ng-container [ngTemplateOutlet]=\"content()!.templateRef\"></ng-container>\r\n    </div>\r\n  }\r\n\r\n  @if (action()) {\r\n    <div class=\"ngs-dialog-action\">\r\n      <ng-container [ngTemplateOutlet]=\"action()!.templateRef\"></ng-container>\r\n    </div>\r\n  }\r\n</div>\r\n\r\n\r\n<ng-template #handlerIcon>\r\n  <svg width=\"24px\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\r\n    <path\r\n      d=\"M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z\"></path>\r\n    <path d=\"M0 0h24v24H0z\" fill=\"none\"></path>\r\n  </svg>\r\n</ng-template>\r\n", styles: [":host{position:fixed;inset:0;display:flex;justify-content:center;align-items:center;z-index:var(--ngs-dialog-z-index, 1000);pointer-events:none}.ngs-dialog-backdrop{position:absolute;inset:0;background:var(--ngs-dialog-backdrop-bg, rgba(0, 0, 0, .5));pointer-events:auto;z-index:1}.draggable .ngs-dialog-handle{cursor:move}.draggable .ngs-dialog-handle:active{cursor:grabbing}.ngs-dialog-wrapper{pointer-events:auto;z-index:2;--ngs-dialog-bg: var(--ngs-theme-surface, #ffffff);--ngs-dialog-border: var(--ngs-theme-border, 1px solid #e0e0e0);--ngs-dialog-border-radius: var(--ngs-theme-radius, 8px);--ngs-dialog-shadow: var(--ngs-theme-shadow, 0 10px 25px rgba(0, 0, 0, .15));--ngs-dialog-width: var(--ngs-dialog-custom-width, 400px);--ngs-dialog-handle-color: var(--ngs-theme-text-secondary, #9e9e9e);--ngs-dialog-handle-hover-color: var(--ngs-theme-primary, #1976d2);background:var(--ngs-dialog-bg);border:var(--ngs-dialog-border);border-radius:var(--ngs-dialog-border-radius);box-shadow:var(--ngs-dialog-shadow);width:var(--ngs-dialog-width);max-width:90vw;max-height:90vh;overflow:hidden;display:flex;flex-direction:column}.ngs-dialog-handle{display:flex;justify-content:center;align-items:center;color:var(--ngs-dialog-handle-color);transition:color .2s ease}.ngs-dialog-handle svg:hover{color:var(--ngs-dialog-handle-hover-color)}.ngs-dialog-header{width:100%;padding:var(--ngs-dialog-section-padding, 16px 16px);font-weight:var(--ngs-dialog-header-font-weight, 600)}.ngs-dialog-content{padding:var(--ngs-dialog-section-padding, 16px 24px);flex:1;overflow-y:auto}.ngs-dialog-action{padding:var(--ngs-dialog-section-padding, 16px 24px);display:flex;justify-content:flex-end;gap:8px}\n"], dependencies: [{ kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: NgsDialog, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-dialog', imports: [CdkDrag, CdkDragHandle, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if(hasBackDrop()){\r\n  <div class=\"ngs-dialog-backdrop\"></div>\r\n}\r\n\r\n<div class=\"ngs-dialog-wrapper\" [class.draggable]=\"draggable()\" cdkDrag [cdkDragDisabled]=\"!draggable()\" >\r\n  <div class=\"ngs-dialog-handle\" cdkDragHandle aria-label=\"Drag dialog\">\r\n    @if (showHandler()) {\r\n      <ng-container [ngTemplateOutlet]=\"handlerIcon\"></ng-container>\r\n    }\r\n    @if (header()) {\r\n      <div class=\"ngs-dialog-header\">\r\n        <ng-container [ngTemplateOutlet]=\"header()!.templateRef\"></ng-container>\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n\r\n  @if (content()) {\r\n    <div class=\"ngs-dialog-content\">\r\n      <ng-container [ngTemplateOutlet]=\"content()!.templateRef\"></ng-container>\r\n    </div>\r\n  }\r\n\r\n  @if (action()) {\r\n    <div class=\"ngs-dialog-action\">\r\n      <ng-container [ngTemplateOutlet]=\"action()!.templateRef\"></ng-container>\r\n    </div>\r\n  }\r\n</div>\r\n\r\n\r\n<ng-template #handlerIcon>\r\n  <svg width=\"24px\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\r\n    <path\r\n      d=\"M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z\"></path>\r\n    <path d=\"M0 0h24v24H0z\" fill=\"none\"></path>\r\n  </svg>\r\n</ng-template>\r\n", styles: [":host{position:fixed;inset:0;display:flex;justify-content:center;align-items:center;z-index:var(--ngs-dialog-z-index, 1000);pointer-events:none}.ngs-dialog-backdrop{position:absolute;inset:0;background:var(--ngs-dialog-backdrop-bg, rgba(0, 0, 0, .5));pointer-events:auto;z-index:1}.draggable .ngs-dialog-handle{cursor:move}.draggable .ngs-dialog-handle:active{cursor:grabbing}.ngs-dialog-wrapper{pointer-events:auto;z-index:2;--ngs-dialog-bg: var(--ngs-theme-surface, #ffffff);--ngs-dialog-border: var(--ngs-theme-border, 1px solid #e0e0e0);--ngs-dialog-border-radius: var(--ngs-theme-radius, 8px);--ngs-dialog-shadow: var(--ngs-theme-shadow, 0 10px 25px rgba(0, 0, 0, .15));--ngs-dialog-width: var(--ngs-dialog-custom-width, 400px);--ngs-dialog-handle-color: var(--ngs-theme-text-secondary, #9e9e9e);--ngs-dialog-handle-hover-color: var(--ngs-theme-primary, #1976d2);background:var(--ngs-dialog-bg);border:var(--ngs-dialog-border);border-radius:var(--ngs-dialog-border-radius);box-shadow:var(--ngs-dialog-shadow);width:var(--ngs-dialog-width);max-width:90vw;max-height:90vh;overflow:hidden;display:flex;flex-direction:column}.ngs-dialog-handle{display:flex;justify-content:center;align-items:center;color:var(--ngs-dialog-handle-color);transition:color .2s ease}.ngs-dialog-handle svg:hover{color:var(--ngs-dialog-handle-hover-color)}.ngs-dialog-header{width:100%;padding:var(--ngs-dialog-section-padding, 16px 16px);font-weight:var(--ngs-dialog-header-font-weight, 600)}.ngs-dialog-content{padding:var(--ngs-dialog-section-padding, 16px 24px);flex:1;overflow-y:auto}.ngs-dialog-action{padding:var(--ngs-dialog-section-padding, 16px 24px);display:flex;justify-content:flex-end;gap:8px}\n"] }]
+        }], propDecorators: { showHandler: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHandler", required: false }] }], draggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "draggable", required: false }] }], hasBackDrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasBackDrop", required: false }] }], header: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgsDialogHeader), { isSignal: true }] }], content: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgsDialogContent), { isSignal: true }] }], action: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgsDialogAction), { isSignal: true }] }] } });
+
+/*
+ * Public API Surface of ngs-dialog
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NgsDialog, NgsDialogAction, NgsDialogContent, NgsDialogHeader };
+//# sourceMappingURL=ngs-dialog.mjs.map

package/fesm2022/ngs-dialog.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngs-dialog.mjs","sources":["../../../projects/ngs-dialog/src/lib/ngs-dialog-header.ts","../../../projects/ngs-dialog/src/lib/ngs-dialog-content.ts","../../../projects/ngs-dialog/src/lib/ngs-dialog-action.ts","../../../projects/ngs-dialog/src/lib/ngs-dialog.ts","../../../projects/ngs-dialog/src/lib/ngs-dialog.html","../../../projects/ngs-dialog/src/public-api.ts","../../../projects/ngs-dialog/src/ngs-dialog.ts"],"sourcesContent":["import {Directive, inject, TemplateRef} from '@angular/core';\r\n\r\n@Directive({\r\n  selector: 'ng-template[ngsDialogHeader]',\r\n})\r\nexport class NgsDialogHeader {\r\n  templateRef = inject(TemplateRef<unknown>);\r\n}\r\n","import {Directive, ElementRef, inject, TemplateRef} from '@angular/core';\r\n\r\n@Directive({\r\n  selector: 'ng-template[ngsDialogContent]',\r\n})\r\nexport class NgsDialogContent {\r\n\r\n  templateRef = inject(TemplateRef<unknown>);\r\n}\r\n","import {Directive, inject, TemplateRef} from '@angular/core';\r\n\r\n@Directive({\r\n  selector: 'ng-template[ngsDialogAction]',\r\n})\r\nexport class NgsDialogAction {\r\n\r\n  templateRef = inject(TemplateRef<unknown>);\r\n}\r\n","import {ChangeDetectionStrategy, Component, contentChild, input} from '@angular/core';\r\nimport {CdkDrag, CdkDragHandle} from '@angular/cdk/drag-drop';\r\nimport {NgsDialogHeader} from './ngs-dialog-header';\r\nimport {NgsDialogContent} from './ngs-dialog-content';\r\nimport {NgsDialogAction} from './ngs-dialog-action';\r\nimport {NgTemplateOutlet} from '@angular/common';\r\n\r\n@Component({\r\n  selector: 'ngs-dialog',\r\n  imports: [CdkDrag, CdkDragHandle, NgTemplateOutlet],\r\n  templateUrl: 'ngs-dialog.html',\r\n  styleUrl: 'ngs-dialog.scss',\r\n  changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class NgsDialog {\r\n  showHandler = input<boolean>(true);\r\n  draggable = input<boolean>(true);\r\n  hasBackDrop = input<boolean>(false);\r\n  header = contentChild<NgsDialogHeader>(NgsDialogHeader);\r\n  content = contentChild<NgsDialogContent>(NgsDialogContent);\r\n  action = contentChild<NgsDialogAction>(NgsDialogAction);\r\n}\r\n","@if(hasBackDrop()){\r\n  <div class=\"ngs-dialog-backdrop\"></div>\r\n}\r\n\r\n<div class=\"ngs-dialog-wrapper\" [class.draggable]=\"draggable()\" cdkDrag [cdkDragDisabled]=\"!draggable()\" >\r\n  <div class=\"ngs-dialog-handle\" cdkDragHandle aria-label=\"Drag dialog\">\r\n    @if (showHandler()) {\r\n      <ng-container [ngTemplateOutlet]=\"handlerIcon\"></ng-container>\r\n    }\r\n    @if (header()) {\r\n      <div class=\"ngs-dialog-header\">\r\n        <ng-container [ngTemplateOutlet]=\"header()!.templateRef\"></ng-container>\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n\r\n  @if (content()) {\r\n    <div class=\"ngs-dialog-content\">\r\n      <ng-container [ngTemplateOutlet]=\"content()!.templateRef\"></ng-container>\r\n    </div>\r\n  }\r\n\r\n  @if (action()) {\r\n    <div class=\"ngs-dialog-action\">\r\n      <ng-container [ngTemplateOutlet]=\"action()!.templateRef\"></ng-container>\r\n    </div>\r\n  }\r\n</div>\r\n\r\n\r\n<ng-template #handlerIcon>\r\n  <svg width=\"24px\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\r\n    <path\r\n      d=\"M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z\"></path>\r\n    <path d=\"M0 0h24v24H0z\" fill=\"none\"></path>\r\n  </svg>\r\n</ng-template>\r\n","/*\r\n * Public API Surface of ngs-dialog\r\n */\r\n\r\nexport * from './lib/ngs-dialog';\r\nexport * from './lib/ngs-dialog-header';\r\nexport * from './lib/ngs-dialog-action';\r\nexport * from './lib/ngs-dialog-content';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "ngs-dialog",
+  "version": "1.0.0",
+  "description": "A lightweight, draggable, and fully customizable Angular dialog component built with modern signals and native CSS variables.",
+  "license": "MIT",
+  "peerDependencies": {
+    "@angular/cdk": "^21.2.0",
+    "@angular/common": "^21.2.0",
+    "@angular/core": "^21.2.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/ngs-dialog.mjs",
+  "typings": "types/ngs-dialog.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/ngs-dialog.d.ts",
+      "default": "./fesm2022/ngs-dialog.mjs"
+    }
+  },
+  "type": "module"
+}

package/types/ngs-dialog.d.ts

@@ -0,0 +1,33 @@
+import * as i0 from '@angular/core';
+import { TemplateRef } from '@angular/core';
+
+declare class NgsDialogHeader {
+    templateRef: TemplateRef<any>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgsDialogHeader, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgsDialogHeader, "ng-template[ngsDialogHeader]", never, {}, {}, never, never, true, never>;
+}
+
+declare class NgsDialogContent {
+    templateRef: TemplateRef<any>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgsDialogContent, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgsDialogContent, "ng-template[ngsDialogContent]", never, {}, {}, never, never, true, never>;
+}
+
+declare class NgsDialogAction {
+    templateRef: TemplateRef<any>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgsDialogAction, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgsDialogAction, "ng-template[ngsDialogAction]", never, {}, {}, never, never, true, never>;
+}
+
+declare class NgsDialog {
+    showHandler: i0.InputSignal<boolean>;
+    draggable: i0.InputSignal<boolean>;
+    hasBackDrop: i0.InputSignal<boolean>;
+    header: i0.Signal<NgsDialogHeader | undefined>;
+    content: i0.Signal<NgsDialogContent | undefined>;
+    action: i0.Signal<NgsDialogAction | undefined>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgsDialog, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NgsDialog, "ngs-dialog", never, { "showHandler": { "alias": "showHandler"; "required": false; "isSignal": true; }; "draggable": { "alias": "draggable"; "required": false; "isSignal": true; }; "hasBackDrop": { "alias": "hasBackDrop"; "required": false; "isSignal": true; }; }, {}, ["header", "content", "action"], never, true, never>;
+}
+
+export { NgsDialog, NgsDialogAction, NgsDialogContent, NgsDialogHeader };