@mgremy/ng-primitives 0.10.0 → 0.12.0

package/fesm2022/mgremy-ng-primitives-dialog.mjs

@@ -1,75 +1,81 @@
 import * as i0 from '@angular/core';
-import { inject, Directive } from '@angular/core';
-import { NgpDialog, NgpDialogDescription, NgpDialogOverlay, NgpDialogTitle } from 'ng-primitives/dialog';
+import { inject, input, Directive } from '@angular/core';
+import { NgpDialogOverlay, NgpDialog, NgpDialogDescription, NgpDialogTitle } from 'ng-primitives/dialog';
 
-const options$3 = ['ngpDialog'];
-const error$3 = new Error(`MgnpDialog must be used with ${options$3.join(' / ')}`);
-class MgnpDialog {
-    _ngpDialog = inject(NgpDialog, { optional: true });
+const options$3 = ['ngpDialogOverlay'];
+const error$3 = new Error(`MgnpDialogOverlay must be used with ${options$3.join(' / ')}`);
+class MgnpDialogOverlay {
+    _ngpDialogOverlay = inject(NgpDialogOverlay, { optional: true });
+    mode = input('modal', ...(ngDevMode ? [{ debugName: "mode" }] : []));
+    drawerPosition = input('end', ...(ngDevMode ? [{ debugName: "drawerPosition" }] : []));
     constructor() {
-        if (!this._ngpDialog) {
+        if (!this._ngpDialogOverlay) {
             console.error(this);
             throw error$3;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MgnpDialog, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.1", type: MgnpDialog, isStandalone: true, selector: "[ngpDialog][mgnpDialog]", host: { attributes: { "data-mgnp-component": "mgnp-dialog" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MgnpDialogOverlay, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.1", type: MgnpDialogOverlay, isStandalone: true, selector: "[ngpDialogOverlay][mgnpDialogOverlay]", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, drawerPosition: { classPropertyName: "drawerPosition", publicName: "drawerPosition", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-mgnp-component": "mgnp-dialog-overlay" }, properties: { "attr.data-mgnp-mode": "mode()", "attr.data-mgnp-drawer-position": "drawerPosition()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MgnpDialog, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MgnpDialogOverlay, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[ngpDialog][mgnpDialog]',
+                    selector: '[ngpDialogOverlay][mgnpDialogOverlay]',
                     standalone: true,
                     host: {
-                        'data-mgnp-component': 'mgnp-dialog',
+                        'data-mgnp-component': 'mgnp-dialog-overlay',
+                        '[attr.data-mgnp-mode]': 'mode()',
+                        '[attr.data-mgnp-drawer-position]': 'drawerPosition()',
                     },
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], drawerPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawerPosition", required: false }] }] } });
 
-const options$2 = ['ngpDialogDescription'];
-const error$2 = new Error(`MgnpDialogDescription must be used with ${options$2.join(' / ')}`);
-class MgnpDialogDescription {
-    _ngpDialogDescription = inject(NgpDialogDescription, { optional: true });
+const options$2 = ['ngpDialog'];
+const error$2 = new Error(`MgnpDialog must be used with ${options$2.join(' / ')}`);
+class MgnpDialog {
+    _overlay = inject(MgnpDialogOverlay);
+    _ngpDialog = inject(NgpDialog, { optional: true });
     constructor() {
-        if (!this._ngpDialogDescription) {
+        if (!this._ngpDialog) {
             console.error(this);
             throw error$2;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MgnpDialogDescription, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.1", type: MgnpDialogDescription, isStandalone: true, selector: "[ngpDialogDescription][mgnpDialogDescription]", host: { attributes: { "data-mgnp-component": "mgnp-dialog-description" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MgnpDialog, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.1", type: MgnpDialog, isStandalone: true, selector: "[ngpDialog][mgnpDialog]", host: { attributes: { "data-mgnp-component": "mgnp-dialog" }, properties: { "attr.data-mgnp-mode": "_overlay.mode()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MgnpDialogDescription, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MgnpDialog, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[ngpDialogDescription][mgnpDialogDescription]',
+                    selector: '[ngpDialog][mgnpDialog]',
                     standalone: true,
                     host: {
-                        'data-mgnp-component': 'mgnp-dialog-description',
+                        'data-mgnp-component': 'mgnp-dialog',
+                        '[attr.data-mgnp-mode]': '_overlay.mode()',
                     },
                 }]
         }], ctorParameters: () => [] });
 
-const options$1 = ['ngpDialogOverlay'];
-const error$1 = new Error(`MgnpDialogOverlay must be used with ${options$1.join(' / ')}`);
-class MgnpDialogOverlay {
-    _ngpDialogOverlay = inject(NgpDialogOverlay, { optional: true });
+const options$1 = ['ngpDialogDescription'];
+const error$1 = new Error(`MgnpDialogDescription must be used with ${options$1.join(' / ')}`);
+class MgnpDialogDescription {
+    _ngpDialogDescription = inject(NgpDialogDescription, { optional: true });
     constructor() {
-        if (!this._ngpDialogOverlay) {
+        if (!this._ngpDialogDescription) {
             console.error(this);
             throw error$1;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MgnpDialogOverlay, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.1", type: MgnpDialogOverlay, isStandalone: true, selector: "[ngpDialogOverlay][mgnpDialogOverlay]", host: { attributes: { "data-mgnp-component": "mgnp-dialog-overlay" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MgnpDialogDescription, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.1", type: MgnpDialogDescription, isStandalone: true, selector: "[ngpDialogDescription][mgnpDialogDescription]", host: { attributes: { "data-mgnp-component": "mgnp-dialog-description" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MgnpDialogOverlay, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MgnpDialogDescription, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[ngpDialogOverlay][mgnpDialogOverlay]',
+                    selector: '[ngpDialogDescription][mgnpDialogDescription]',
                     standalone: true,
                     host: {
-                        'data-mgnp-component': 'mgnp-dialog-overlay',
+                        'data-mgnp-component': 'mgnp-dialog-description',
                     },
                 }]
         }], ctorParameters: () => [] });

package/fesm2022/mgremy-ng-primitives-dialog.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"mgremy-ng-primitives-dialog.mjs","sources":["../../../../libs/ng-primitives/dialog/src/lib/mgnp-dialog/mgnp-dialog.directive.ts","../../../../libs/ng-primitives/dialog/src/lib/mgnp-dialog-description/mgnp-dialog-description.directive.ts","../../../../libs/ng-primitives/dialog/src/lib/mgnp-dialog-overlay/mgnp-dialog-overlay.directive.ts","../../../../libs/ng-primitives/dialog/src/lib/mgnp-dialog-title/mgnp-dialog-title.directive.ts","../../../../libs/ng-primitives/dialog/src/mgremy-ng-primitives-dialog.ts"],"sourcesContent":["import { Directive, inject } from '@angular/core';\nimport { NgpDialog } from 'ng-primitives/dialog';\n\nconst options = ['ngpDialog'];\n\nconst error = new Error(`MgnpDialog must be used with ${options.join(' / ')}`);\n\n@Directive({\n  selector: '[ngpDialog][mgnpDialog]',\n  standalone: true,\n  host: {\n    'data-mgnp-component': 'mgnp-dialog',\n  },\n})\nexport class MgnpDialog {\n  private readonly _ngpDialog = inject(NgpDialog, { optional: true });\n\n  constructor() {\n    if (!this._ngpDialog) {\n      console.error(this);\n      throw error;\n    }\n  }\n}\n","import { Directive, inject } from '@angular/core';\nimport { NgpDialogDescription } from 'ng-primitives/dialog';\n\nconst options = ['ngpDialogDescription'];\n\nconst error = new Error(`MgnpDialogDescription must be used with ${options.join(' / ')}`);\n\n@Directive({\n  selector: '[ngpDialogDescription][mgnpDialogDescription]',\n  standalone: true,\n  host: {\n    'data-mgnp-component': 'mgnp-dialog-description',\n  },\n})\nexport class MgnpDialogDescription {\n  private readonly _ngpDialogDescription = inject(NgpDialogDescription, { optional: true });\n\n  constructor() {\n    if (!this._ngpDialogDescription) {\n      console.error(this);\n      throw error;\n    }\n  }\n}\n","import { Directive, inject } from '@angular/core';\nimport { NgpDialogOverlay } from 'ng-primitives/dialog';\n\nconst options = ['ngpDialogOverlay'];\n\nconst error = new Error(`MgnpDialogOverlay must be used with ${options.join(' / ')}`);\n\n@Directive({\n  selector: '[ngpDialogOverlay][mgnpDialogOverlay]',\n  standalone: true,\n  host: {\n    'data-mgnp-component': 'mgnp-dialog-overlay',\n  },\n})\nexport class MgnpDialogOverlay {\n  private readonly _ngpDialogOverlay = inject(NgpDialogOverlay, { optional: true });\n\n  constructor() {\n    if (!this._ngpDialogOverlay) {\n      console.error(this);\n      throw error;\n    }\n  }\n}\n","import { Directive, inject } from '@angular/core';\nimport { NgpDialogTitle } from 'ng-primitives/dialog';\n\nconst options = ['ngpDialogTitle'];\n\nconst error = new Error(`MgnpDialogTitle must be used with ${options.join(' / ')}`);\n\n@Directive({\n  selector: '[ngpDialogTitle][mgnpDialogTitle]',\n  standalone: true,\n  host: {\n    'data-mgnp-component': 'mgnp-dialog-title',\n  },\n})\nexport class MgnpDialogTitle {\n  private readonly _ngpDialogTitle = inject(NgpDialogTitle, { optional: true });\n\n  constructor() {\n    if (!this._ngpDialogTitle) {\n      console.error(this);\n      throw error;\n    }\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["options","error"],"mappings":"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"}
+{"version":3,"file":"mgremy-ng-primitives-dialog.mjs","sources":["../../../../libs/ng-primitives/dialog/src/lib/mgnp-dialog-overlay/mgnp-dialog-overlay.directive.ts","../../../../libs/ng-primitives/dialog/src/lib/mgnp-dialog/mgnp-dialog.directive.ts","../../../../libs/ng-primitives/dialog/src/lib/mgnp-dialog-description/mgnp-dialog-description.directive.ts","../../../../libs/ng-primitives/dialog/src/lib/mgnp-dialog-title/mgnp-dialog-title.directive.ts","../../../../libs/ng-primitives/dialog/src/mgremy-ng-primitives-dialog.ts"],"sourcesContent":["import { PropertyType } from '@mgremy/ng-primitives';\n\nimport { Directive, inject, input } from '@angular/core';\nimport { NgpDialogOverlay } from 'ng-primitives/dialog';\n\nconst options = ['ngpDialogOverlay'];\n\nconst error = new Error(`MgnpDialogOverlay must be used with ${options.join(' / ')}`);\n\nexport type MgnpDialogOverlayMode = PropertyType<'modal' | 'drawer'>;\n\nexport type MgnpDialogDrawerPosition = PropertyType<'start' | 'end'>;\n\n@Directive({\n  selector: '[ngpDialogOverlay][mgnpDialogOverlay]',\n  standalone: true,\n  host: {\n    'data-mgnp-component': 'mgnp-dialog-overlay',\n    '[attr.data-mgnp-mode]': 'mode()',\n    '[attr.data-mgnp-drawer-position]': 'drawerPosition()',\n  },\n})\nexport class MgnpDialogOverlay {\n  private readonly _ngpDialogOverlay = inject(NgpDialogOverlay, { optional: true });\n\n  readonly mode = input<MgnpDialogOverlayMode>('modal');\n  readonly drawerPosition = input<MgnpDialogDrawerPosition>('end');\n\n  constructor() {\n    if (!this._ngpDialogOverlay) {\n      console.error(this);\n      throw error;\n    }\n  }\n}\n","import { MgnpDialogOverlay } from '../mgnp-dialog-overlay/mgnp-dialog-overlay.directive';\n\nimport { Directive, inject } from '@angular/core';\nimport { NgpDialog } from 'ng-primitives/dialog';\n\nconst options = ['ngpDialog'];\n\nconst error = new Error(`MgnpDialog must be used with ${options.join(' / ')}`);\n\n@Directive({\n  selector: '[ngpDialog][mgnpDialog]',\n  standalone: true,\n  host: {\n    'data-mgnp-component': 'mgnp-dialog',\n    '[attr.data-mgnp-mode]': '_overlay.mode()',\n  },\n})\nexport class MgnpDialog {\n  protected readonly _overlay = inject(MgnpDialogOverlay);\n  private readonly _ngpDialog = inject(NgpDialog, { optional: true });\n\n  constructor() {\n    if (!this._ngpDialog) {\n      console.error(this);\n      throw error;\n    }\n  }\n}\n","import { Directive, inject } from '@angular/core';\nimport { NgpDialogDescription } from 'ng-primitives/dialog';\n\nconst options = ['ngpDialogDescription'];\n\nconst error = new Error(`MgnpDialogDescription must be used with ${options.join(' / ')}`);\n\n@Directive({\n  selector: '[ngpDialogDescription][mgnpDialogDescription]',\n  standalone: true,\n  host: {\n    'data-mgnp-component': 'mgnp-dialog-description',\n  },\n})\nexport class MgnpDialogDescription {\n  private readonly _ngpDialogDescription = inject(NgpDialogDescription, { optional: true });\n\n  constructor() {\n    if (!this._ngpDialogDescription) {\n      console.error(this);\n      throw error;\n    }\n  }\n}\n","import { Directive, inject } from '@angular/core';\nimport { NgpDialogTitle } from 'ng-primitives/dialog';\n\nconst options = ['ngpDialogTitle'];\n\nconst error = new Error(`MgnpDialogTitle must be used with ${options.join(' / ')}`);\n\n@Directive({\n  selector: '[ngpDialogTitle][mgnpDialogTitle]',\n  standalone: true,\n  host: {\n    'data-mgnp-component': 'mgnp-dialog-title',\n  },\n})\nexport class MgnpDialogTitle {\n  private readonly _ngpDialogTitle = inject(NgpDialogTitle, { optional: true });\n\n  constructor() {\n    if (!this._ngpDialogTitle) {\n      console.error(this);\n      throw error;\n    }\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["options","error"],"mappings":"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"}

package/fesm2022/mgremy-ng-primitives-switch.mjs

@@ -0,0 +1,58 @@
+import * as i0 from '@angular/core';
+import { inject, Directive } from '@angular/core';
+import { NgpSwitch, NgpSwitchThumb } from 'ng-primitives/switch';
+
+const options$1 = ['ngpSwitch'];
+const error$1 = new Error(`MgnpSwitch must be used with ${options$1.join(' / ')}`);
+class MgnpSwitch {
+    _ngpSwitch = inject(NgpSwitch, { optional: true });
+    constructor() {
+        if (!this._ngpSwitch) {
+            console.error(this);
+            throw error$1;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MgnpSwitch, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.1", type: MgnpSwitch, isStandalone: true, selector: "[ngpSwitch][mgnpSwitch]", host: { attributes: { "data-mgnp-component": "mgnp-switch" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MgnpSwitch, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngpSwitch][mgnpSwitch]',
+                    standalone: true,
+                    host: {
+                        'data-mgnp-component': 'mgnp-switch',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
+const options = ['ngpSwitchThumb'];
+const error = new Error(`MgnpSwitchThumb must be used with ${options.join(' / ')}`);
+class MgnpSwitchThumb {
+    _ngpSwitchThumb = inject(NgpSwitchThumb, { optional: true });
+    constructor() {
+        if (!this._ngpSwitchThumb) {
+            console.error(this);
+            throw error;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MgnpSwitchThumb, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.1", type: MgnpSwitchThumb, isStandalone: true, selector: "[ngpSwitchThumb][mgnpSwitchThumb]", host: { attributes: { "data-mgnp-component": "mgnp-switch-thumb" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MgnpSwitchThumb, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngpSwitchThumb][mgnpSwitchThumb]',
+                    standalone: true,
+                    host: {
+                        'data-mgnp-component': 'mgnp-switch-thumb',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MgnpSwitch, MgnpSwitchThumb };
+//# sourceMappingURL=mgremy-ng-primitives-switch.mjs.map

package/fesm2022/mgremy-ng-primitives-switch.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"mgremy-ng-primitives-switch.mjs","sources":["../../../../libs/ng-primitives/switch/src/lib/mgnp-switch/mgnp-switch.directive.ts","../../../../libs/ng-primitives/switch/src/lib/mgnp-switch-thumb/mgnp-switch-thumb.directive.ts","../../../../libs/ng-primitives/switch/src/mgremy-ng-primitives-switch.ts"],"sourcesContent":["import { Directive, inject } from '@angular/core';\nimport { NgpSwitch } from 'ng-primitives/switch';\n\nconst options = ['ngpSwitch'];\n\nconst error = new Error(`MgnpSwitch must be used with ${options.join(' / ')}`);\n\n@Directive({\n  selector: '[ngpSwitch][mgnpSwitch]',\n  standalone: true,\n  host: {\n    'data-mgnp-component': 'mgnp-switch',\n  },\n})\nexport class MgnpSwitch {\n  private readonly _ngpSwitch = inject(NgpSwitch, { optional: true });\n\n  constructor() {\n    if (!this._ngpSwitch) {\n      console.error(this);\n      throw error;\n    }\n  }\n}\n","import { Directive, inject } from '@angular/core';\nimport { NgpSwitchThumb } from 'ng-primitives/switch';\n\nconst options = ['ngpSwitchThumb'];\n\nconst error = new Error(`MgnpSwitchThumb must be used with ${options.join(' / ')}`);\n\n@Directive({\n  selector: '[ngpSwitchThumb][mgnpSwitchThumb]',\n  standalone: true,\n  host: {\n    'data-mgnp-component': 'mgnp-switch-thumb',\n  },\n})\nexport class MgnpSwitchThumb {\n  private readonly _ngpSwitchThumb = inject(NgpSwitchThumb, { optional: true });\n\n  constructor() {\n    if (!this._ngpSwitchThumb) {\n      console.error(this);\n      throw error;\n    }\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["options","error"],"mappings":";;;;AAGA,MAAMA,SAAO,GAAG,CAAC,WAAW,CAAC;AAE7B,MAAMC,OAAK,GAAG,IAAI,KAAK,CAAC,CAAA,6BAAA,EAAgCD,SAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA,CAAE,CAAC;MASjE,UAAU,CAAA;IACJ,UAAU,GAAG,MAAM,CAAC,SAAS,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;AAEnE,IAAA,WAAA,GAAA;AACE,QAAA,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;AACpB,YAAA,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC;AACnB,YAAA,MAAMC,OAAK;QACb;IACF;uGARW,UAAU,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAV,UAAU,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,yBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,qBAAA,EAAA,aAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAV,UAAU,EAAA,UAAA,EAAA,CAAA;kBAPtB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,yBAAyB;AACnC,oBAAA,UAAU,EAAE,IAAI;AAChB,oBAAA,IAAI,EAAE;AACJ,wBAAA,qBAAqB,EAAE,aAAa;AACrC,qBAAA;AACF,iBAAA;;;ACVD,MAAM,OAAO,GAAG,CAAC,gBAAgB,CAAC;AAElC,MAAM,KAAK,GAAG,IAAI,KAAK,CAAC,CAAA,kCAAA,EAAqC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA,CAAE,CAAC;MAStE,eAAe,CAAA;IACT,eAAe,GAAG,MAAM,CAAC,cAAc,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;AAE7E,IAAA,WAAA,GAAA;AACE,QAAA,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE;AACzB,YAAA,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC;AACnB,YAAA,MAAM,KAAK;QACb;IACF;uGARW,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAf,eAAe,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,mCAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,qBAAA,EAAA,mBAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAf,eAAe,EAAA,UAAA,EAAA,CAAA;kBAP3B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,mCAAmC;AAC7C,oBAAA,UAAU,EAAE,IAAI;AAChB,oBAAA,IAAI,EAAE;AACJ,wBAAA,qBAAqB,EAAE,mBAAmB;AAC3C,qBAAA;AACF,iBAAA;;;ACbD;;AAEG;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mgremy/ng-primitives",
-  "version": "0.10.0",
+  "version": "0.12.0",
   "license": "Apache-2.0",
   "homepage": "https://doc.mgremy.xyz/ng-primitives",
   "publishConfig": {
@@ -57,6 +57,10 @@
       "types": "./types/mgremy-ng-primitives-pagination.d.ts",
       "default": "./fesm2022/mgremy-ng-primitives-pagination.mjs"
     },
+    "./switch": {
+      "types": "./types/mgremy-ng-primitives-switch.d.ts",
+      "default": "./fesm2022/mgremy-ng-primitives-switch.mjs"
+    },
     "./toast": {
       "types": "./types/mgremy-ng-primitives-toast.d.ts",
       "default": "./fesm2022/mgremy-ng-primitives-toast.mjs"

package/switch/README.md

@@ -0,0 +1,4 @@
+# @mgremy/ng-primitives/src/lib/switch
+
+Secondary entry point of `@mgremy/ng-primitives`. It can be used by importing from
+`@mgremy/ng-primitives/switch`.

package/theme/animation.css

@@ -0,0 +1,63 @@
+@theme {
+  @keyframes mg-show {
+    from {
+      opacity: 0;
+      transform: translateY(var(--mg-default-animation-translateY-origin)) scale(0.9);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(var(--mg-default-animation-translateY-base)) scale(1);
+    }
+  }
+
+  @keyframes mg-hide {
+    from {
+      opacity: 1;
+      transform: translateY(var(--mg-default-animation-translateY-base)) scale(1);
+    }
+    to {
+      opacity: 0;
+      transform: translateY(var(--mg-default-animation-translateY-origin)) scale(0.9);
+    }
+  }
+
+  @keyframes mg-slide-in {
+    from {
+      opacity: 0;
+      transform: translateY(var(--mg-default-animation-translateY-origin));
+    }
+    to {
+      opacity: 1;
+      transform: translateY(var(--mg-default-animation-translateY-base));
+    }
+  }
+
+  @keyframes mg-slide-out {
+    from {
+      opacity: 1;
+      transform: translateY(var(--mg-default-animation-translateY-base));
+    }
+    to {
+      opacity: 0;
+      transform: translateY(var(--mg-default-animation-translateY-origin));
+    }
+  }
+
+  @keyframes mg-fade-in {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+
+  @keyframes mg-fade-out {
+    0% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+}

package/theme/components/accordion.css

@@ -1,8 +1,8 @@
 @utility mgnp-accordion {
   border-radius: --spacing(3);
-  border: 1px solid var(--ngp-border);
-  background-color: var(--ngp-background);
-  box-shadow: var(--ngp-shadow);
+  border: 1px solid var(--mg-border-ui);
+  background-color: var(--mg-background-ui);
+  box-shadow: var(--mg-shadow-ui);
 
   @variant data-[orientation=vertical] {
     display: block;
@@ -21,7 +21,7 @@
 @utility mgnp-accordion-content {
   overflow: hidden;
   font-size: --spacing(3.5);
-  color: var(--ngp-text-secondary);
+  color: var(--mg-text-ui-secondary);
 
   @variant data-open:data-[orientation=vertical] {
     animation: accordion-show-vertical var(--default-transition-duration)
@@ -47,17 +47,8 @@
 @utility mgnp-accordion-item {
   display: flex;
 
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    margin: --spacing(0);
-  }
-
   @variant not-last {
-    border-bottom: 1px solid var(--ngp-border);
+    border-bottom: 1px solid var(--mg-border-ui);
   }
 
   @variant data-[orientation=horizontal] {
@@ -67,6 +58,15 @@
   @variant data-[orientation=vertical] {
     flex-direction: column;
   }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin: --spacing(0);
+  }
 }
 
 @utility mgnp-accordion-trigger {
@@ -83,7 +83,7 @@
   font-size: --spacing(3.5);
   line-height: --spacing(5);
   border-radius: --spacing(3);
-  color: var(--ngp-text-primary);
+  color: var(--mg-text-ui);
 
   @variant data-[orientation=vertical] {
     width: 100%;
@@ -99,8 +99,7 @@
 
   @variant data-focus-visible {
     overflow: hidden;
-    font-size: --spacing(3.5);
-    color: var(--ngp-text-secondary);
+    color: var(--mg-text-ui-secondary);
   }
 
   ng-icon {

package/theme/components/button.css

@@ -5,10 +5,10 @@
   width: max-content;
   cursor: pointer;
   border-radius: var(--radius-lg);
-  box-shadow: var(--ngp-button-shadow);
+  box-shadow: var(--mg-shadow-button);
 
   @variant data-focus-visible {
-    outline: 2px solid var(--ngp-focus-ring);
+    outline: 2px solid var(--mg-ring-ui);
   }
 
   @variant data-disabled {

package/theme/components/checkbox.css

@@ -6,8 +6,8 @@
   justify-content: center;
   background-color: transparent;
   outline: none;
-  border: 1px solid var(--ngp-border);
-  color: var(--ngp-text-inverse);
+  border: 1px solid var(--mg-border-ui);
+  color: var(--mg-text-inverse);
   border-radius: var(--radius-sm);
   font-size: var(--text-base);
   line-height: var(--text-base--line-height);
@@ -16,16 +16,16 @@
   height: --spacing(5);
 
   @variant data-hover {
-    background-color: var(--ngp-background-hover);
+    background-color: var(--mg-background-ui-hover);
   }
 
   @variant data-checked, data-indeterminate {
-    border-color: var(--ngp-background-inverse);
-    background-color: var(--ngp-background-inverse);
+    border-color: var(--mg-background-ui-inverse);
+    background-color: var(--mg-background-ui-inverse);
   }
 
   @variant data-focus-visible {
-    outline: --spacing(0.5) solid var(--ngp-focus-ring);
+    outline: --spacing(0.5) solid var(--mg-ring-ui);
     outline-offset: --spacing(0.5);
   }
 }

package/theme/components/combobox.css

@@ -7,12 +7,12 @@
   border: none;
   box-sizing: border-box;
   border-radius: var(--radius-lg);
-  background-color: var(--ngp-background);
-  box-shadow: var(--ngp-input-shadow);
+  background-color: var(--mg-background-ui);
+  box-shadow: var(--mg-shadow-input);
 
   @variant data-focus {
     outline-offset: 2px;
-    outline: 2px solid var(--ngp-focus-ring);
+    outline: 2px solid var(--mg-ring-ui);
   }
 }
 
@@ -28,7 +28,7 @@
   padding-inline: --spacing(4);
   font-size: var(--text-sm);
   line-height: var(--text-sm--line-height);
-  color: var(--ngp-text);
+  color: var(--mg-text-ui);
 }
 
 @utility mgnp-combobox-button {
@@ -41,7 +41,7 @@
   cursor: pointer;
   box-sizing: border-box;
   box-shadow: none;
-  color: var(--ngp-text);
+  color: var(--mg-text-ui);
 }
 
 @utility mgnp-combobox-dropdown {
@@ -56,16 +56,16 @@
   margin-top: --spacing(1);
   max-height: --spacing(60);
   width: var(--ngp-combobox-width);
-  box-shadow: var(--ngp-shadow-lg);
-  background-color: var(--ngp-background);
-  border: 1px solid var(--ngp-border);
+  box-shadow: var(--mg-shadow-lg);
+  background-color: var(--mg-background-ui);
+  border: 1px solid var(--mg-border-ui);
 
   @variant data-enter {
-    animation: combobox-show var(--default-transition-duration) var(--default-transition-timing-function);
+    animation: mg-show var(--default-transition-duration) var(--default-transition-timing-function);
   }
 
   @variant data-exit {
-    animation: combobox-hide var(--default-transition-duration) var(--default-transition-timing-function);
+    animation: mg-hide var(--default-transition-duration) var(--default-transition-timing-function);
   }
 }
 
@@ -82,18 +82,18 @@
   border-radius: var(--radius-lg);
   font-size: var(--text-sm);
   line-height: var(--text-sm--line-height);
-  color: var(--ngp-text-primary);
+  color: var(--mg-text-ui);
 
   @variant data-hover {
-    background-color: var(--ngp-background-hover);
+    background-color: var(--mg-background-ui-hover);
   }
 
   @variant data-press {
-    background-color: var(--ngp-background-active);
+    background-color: var(--mg-background-ui-active);
   }
 
   @variant data-active {
-    background-color: var(--ngp-background-active);
+    background-color: var(--mg-background-ui-active);
   }
 
   @variant data-disabled {
@@ -122,27 +122,3 @@
     @apply mgnp-combobox-option transition;
   }
 }
-
-@theme {
-  @keyframes combobox-show {
-    0% {
-      opacity: 0;
-      transform: translateY(-10px) scale(0.9);
-    }
-    100% {
-      opacity: 1;
-      transform: translateY(0) scale(1);
-    }
-  }
-
-  @keyframes combobox-hide {
-    0% {
-      opacity: 1;
-      transform: translateY(0) scale(1);
-    }
-    100% {
-      opacity: 0;
-      transform: translateY(-10px) scale(0.9);
-    }
-  }
-}

package/theme/components/dialog.css

@@ -1,12 +1,30 @@
 @utility mgnp-dialog {
   background-color: var(--mg-background-ui);
-  box-shadow: var(--ngp-button-shadow);
+  box-shadow: var(--mg-shadow-button);
   padding: --spacing(6);
-  border-radius: --spacing(2);
-  animation: fade-in var(--default-transition-duration) var(--default-transition-timing-function);
 
-  @variant data-exit {
-    animation: fade-out var(--default-transition-duration) var(--default-transition-timing-function);
+  @variant data-[mgnp-mode='modal'] {
+    border-radius: --spacing(2);
+    animation: mg-fade-in var(--default-transition-duration)
+      var(--default-transition-timing-function);
+
+    @variant data-exit {
+      animation: mg-fade-out var(--default-transition-duration)
+        var(--default-transition-timing-function);
+    }
+  }
+
+  @variant data-[mgnp-mode='drawer'] {
+    width: --spacing(80);
+    max-width: 100%;
+    height: 100%;
+    animation: mg-slide-in var(--default-transition-duration)
+      var(--default-transition-timing-function);
+
+    @variant data-exit {
+      animation: mg-slide-out var(--default-transition-duration)
+        var(--default-transition-timing-function);
+    }
   }
 }
 
@@ -26,18 +44,41 @@
 
 @utility mgnp-dialog-overlay {
   display: flex;
-  justify-content: center;
-  align-items: center;
   position: fixed;
   z-index: 9999;
   background-color: --alpha(var(--mg-background-ui) / 50%);
   backdrop-filter: blur(--spacing(0.5));
   inset: --spacing(0);
-  animation: slide-in var(--default-transition-duration) var(--default-transition-timing-function);
 
-  @variant data-exit {
-    animation: slide-out var(--default-transition-duration)
+  @variant data-[mgnp-mode='modal'] {
+    justify-content: center;
+    align-items: center;
+    animation: mg-fade-in var(--default-transition-duration)
       var(--default-transition-timing-function);
+
+    @variant data-exit {
+      animation: mg-fade-out var(--default-transition-duration)
+        var(--default-transition-timing-function);
+    }
+  }
+
+  @variant data-[mgnp-mode='drawer'] {
+    align-items: stretch;
+    animation: mg-slide-in var(--default-transition-duration)
+      var(--default-transition-timing-function);
+
+    @variant data-[mgnp-drawer-position='start'] {
+      justify-content: flex-start;
+    }
+
+    @variant data-[mgnp-drawer-position='end'] {
+      justify-content: flex-end;
+    }
+
+    @variant data-exit {
+      animation: mg-slide-out var(--default-transition-duration)
+        var(--default-transition-timing-function);
+    }
   }
 }
 
@@ -58,44 +99,3 @@
     @apply transition mgnp-dialog-overlay;
   }
 }
-
-@keyframes fade-in {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
-@keyframes fade-out {
-  0% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0;
-  }
-}
-
-@keyframes slide-in {
-  0% {
-    transform: translateY(-20px);
-    opacity: 0;
-  }
-  100% {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-
-@keyframes slide-out {
-  0% {
-    transform: translateY(0);
-    opacity: 1;
-  }
-
-  100% {
-    transform: translateY(-20px);
-    opacity: 0;
-  }
-}

package/theme/components/input.css

@@ -6,16 +6,16 @@
   padding-block: --spacing(0);
   padding-inline: --spacing(4);
   border-radius: var(--radius-lg);
-  box-shadow: var(--ngp-input-shadow);
-  background-color: var(--ngp-background);
+  box-shadow: var(--mg-shadow-input);
+  background-color: var(--mg-background-ui);
 
   @variant data-focus {
     outline-offset: 2px;
-    outline: 2px solid var(--ngp-focus-ring);
+    outline: 2px solid var(--mg-ring-ui);
   }
 
   ::placeholder {
-    color: var(--ngp-text-placeholder);
+    color: var(--mg-text-placeholder);
   }
 }
 

package/theme/components/menu.css

@@ -5,17 +5,17 @@
   width: max-content;
   padding: --spacing(1);
   border-radius: var(--radius-lg);
-  background: var(--ngp-background);
-  border: 1px solid var(--ngp-border);
-  box-shadow: var(--ngp-shadow-lg);
+  background: var(--mg-background-ui);
+  border: 1px solid var(--mg-border-ui);
+  box-shadow: var(--mg-shadow-lg);
   transform-origin: var(--ngp-menu-transform-origin);
 
   @variant data-enter {
-    animation: menu-show var(--default-transition-duration) var(--default-transition-timing-function);
+    animation: mg-show var(--default-transition-duration) var(--default-transition-timing-function);
   }
 
   @variant data-exit {
-    animation: menu-hide var(--default-transition-duration) var(--default-transition-timing-function);
+    animation: mg-hide var(--default-transition-duration) var(--default-transition-timing-function);
   }
 }
 
@@ -33,16 +33,16 @@
   line-height: var(--text-sm--line-height);
 
   @variant data-hover {
-    background-color: var(--ngp-background-hover);
+    background-color: var(--mg-background-ui-hover);
   }
 
   @variant data-press {
-    background-color: var(--ngp-background-active);
+    background-color: var(--mg-background-ui-active);
   }
 
   @variant data-focus-visible {
     z-index: 1;
-    outline: 2px solid var(--ngp-focus-ring);
+    outline: 2px solid var(--mg-ring-ui);
   }
 
   @variant data-disabled {
@@ -59,27 +59,3 @@
     @apply mgnp-menu-item transition;
   }
 }
-
-@theme {
-  @keyframes menu-show {
-    0% {
-      opacity: 0;
-      transform: scale(0.9);
-    }
-    100% {
-      opacity: 1;
-      transform: scale(1);
-    }
-  }
-
-  @keyframes menu-hide {
-    0% {
-      opacity: 1;
-      transform: scale(1);
-    }
-    100% {
-      opacity: 0;
-      transform: scale(0.9);
-    }
-  }
-}

package/theme/components/pagination.css

@@ -18,28 +18,28 @@
   border-radius: var(--radius-lg);
   font-size: var(--text-sm);
   font-weight: var(--font-weight-medium);
-  background-color: var(--ngp-background);
-  color: var(--ngp-text-primary);
-  box-shadow: var(--ngp-button-shadow);
+  background-color: var(--mg-background-ui);
+  color: var(--mg-text-ui);
+  box-shadow: var(--mg-shadow-button);
 
   @variant data-hover {
     @variant not-data-disabled {
       @variant not-data-selected {
-        background-color: var(--ngp-background-hover);
+        background-color: var(--mg-background-ui-hover);
       }
     }
   }
 
   @variant data-focus-visible {
     @variant not-data-disabled {
-      outline: 2px solid var(--ngp-focus-ring);
+      outline: 2px solid var(--mg-ring-ui);
     }
   }
 
   @variant data-press {
     @variant not-data-disabled {
       @variant not-data-selected {
-        background-color: var(--ngp-background-active);
+        background-color: var(--mg-background-ui-active);
       }
     }
   }
@@ -48,12 +48,12 @@
     cursor: not-allowed;
     color: #d2d2d2;
     box-shadow: none;
-    background-color: var(--ngp-background-disabled);
+    background-color: var(--mg-background-ui-disabled);
   }
 
   @variant data-selected {
-    background-color: var(--ngp-background-inverse);
-    color: var(--ngp-text-inverse);
+    background-color: var(--mg-background-ui-inverse);
+    color: var(--mg-text-inverse);
   }
 }
 

package/theme/components/switch.css

@@ -0,0 +1,44 @@
+@utility mgnp-switch {
+  position: relative;
+  outline: none;
+  border-radius: calc(infinity* 1px);
+  background-color: var(--mg-background-ui-secondary);
+  border: 1px solid var(--mg-border-ui);
+  width: --spacing(10);
+  height: --spacing(6);
+  padding: --spacing(0);
+
+  @variant data-focus-visible {
+    outline: 2px solid var(--mg-ring-ui);
+  }
+
+  @variant data-checked {
+    background-color: var(--mg-background-ui-active);
+    border-color: var(--mg-border-ui-secondary);
+  }
+}
+
+@utility mgnp-switch-thumb {
+  display: block;
+  outline: none;
+  border-radius: calc(infinity* 1px);
+  background-color: var(--mg-background-ui);
+  box-shadow: var(--mg-shadow-button);
+  width: --spacing(4);
+  height: --spacing(4);
+  margin-left: --spacing(1);
+
+  @variant data-checked {
+    transform: translateX(--spacing(4));
+  }
+}
+
+@layer base {
+  [mgnpSwitch][data-mgnp-component='mgnp-switch'] {
+    @apply mgnp-switch transition;
+  }
+
+  [mgnpSwitchThumb][data-mgnp-component='mgnp-switch-thumb'] {
+    @apply mgnp-switch-thumb transition;
+  }
+}

package/theme/components/toast.css

@@ -9,16 +9,16 @@
   padding: --spacing(3) --spacing(4);
   border-radius: --spacing(2);
   width: --spacing(87.5);
-  border: 1px solid var(--ngp-border);
-  background: var(--ngp-background);
-  box-shadow: var(--ngp-shadow);
+  border: 1px solid var(--mg-border-ui);
+  background: var(--mg-background-ui);
+  box-shadow: var(--mg-shadow-ui);
   z-index: var(--ngp-toast-z-index);
   transform: var(--y);
 
   @variant data-enter {
-    opacity: 1;
     --y: translateY(0);
-    animation: toast-slide-in var(--default-transition-duration) var(--default-transition-timing-function);
+    opacity: 1;
+    animation: mg-slide-in var(--default-transition-duration) var(--default-transition-timing-function);
   }
 
   @variant data-exit {
@@ -109,16 +109,3 @@
     @apply mgnp-toast transition;
   }
 }
-
-@theme {
-  @keyframes toast-slide-in {
-    from {
-      opacity: 0;
-      transform: translateY(100%);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
-}

package/theme/components/tooltip.css

@@ -1,19 +1,19 @@
 @utility mgnp-tooltip {
   position: absolute;
   border: none;
-  animation: tooltip-show var(--default-transition-duration) var(--default-transition-timing-function);
+  animation: mg-show var(--default-transition-duration) var(--default-transition-timing-function);
   max-width: --spacing(64);
   padding-block: --spacing(2);
   padding-inline: --spacing(3);
   font-size: var(--text-xs);
   line-height: var(--text-xs--line-height);
   border-radius: var(--radius-lg);
-  background-color: var(--ngp-background-inverse);
-  color: var(--ngp-text-inverse);
+  background-color: var(--mg-background-ui-inverse);
+  color: var(--mg-text-inverse);
   transform-origin: var(--ngp-tooltip-transform-origin);
 
   @variant data-exit {
-    animation: tooltip-hide var(--default-transition-duration) var(--default-transition-timing-function);
+    animation: mg-hide var(--default-transition-duration) var(--default-transition-timing-function);
   }
 }
 
@@ -24,7 +24,7 @@
   width: --spacing(2);
   height: --spacing(2);
   border-radius: var(--radius-xs);
-  background-color: var(--ngp-background-inverse);
+  background-color: var(--mg-background-ui-inverse);
 
   @variant data-[placement="top"] {
     top: calc(100% - 5px);
@@ -44,27 +44,3 @@
     @apply mgnp-tooltip-arrow transition;
   }
 }
-
-@theme {
-  @keyframes tooltip-show {
-    0% {
-      opacity: 0;
-      transform: scale(0.9);
-    }
-    100% {
-      opacity: 1;
-      transform: scale(1);
-    }
-  }
-
-  @keyframes tooltip-hide {
-    0% {
-      opacity: 1;
-      transform: scale(1);
-    }
-    100% {
-      opacity: 0;
-      transform: scale(0.9);
-    }
-  }
-}

package/theme/mgnp.css

@@ -1,4 +1,16 @@
-@import './ngp_tw.css';
+@import './animation.css';
+
+@import './components/accordion.css';
+@import './components/button.css';
+@import './components/checkbox.css';
+@import './components/combobox.css';
+@import './components/dialog.css';
+@import './components/input.css';
+@import './components/menu.css';
+@import './components/pagination.css';
+@import './components/switch.css';
+@import './components/toast.css';
+@import './components/tooltip.css';
 
 @custom-variant dark (&:where(.dark, .dark *));
 
@@ -133,6 +145,9 @@
   --mg-ring-ui: rgb(59, 130, 246);
   --mg-default-transition-duration: 250ms;
   --mg-default-transition-timing-function: var(--ease-in-out);
+
+  --mg-default-animation-translateY-origin: --spacing(-2);
+  --mg-default-animation-translateY-base: --spacing(0);
 }
 
 @theme {

package/types/mgremy-ng-primitives-dialog.d.ts

@@ -1,6 +1,19 @@
 import * as i0 from '@angular/core';
+import { PropertyType } from '@mgremy/ng-primitives';
+
+type MgnpDialogOverlayMode = PropertyType<'modal' | 'drawer'>;
+type MgnpDialogDrawerPosition = PropertyType<'start' | 'end'>;
+declare class MgnpDialogOverlay {
+    private readonly _ngpDialogOverlay;
+    readonly mode: i0.InputSignal<MgnpDialogOverlayMode>;
+    readonly drawerPosition: i0.InputSignal<MgnpDialogDrawerPosition>;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<MgnpDialogOverlay, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MgnpDialogOverlay, "[ngpDialogOverlay][mgnpDialogOverlay]", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "drawerPosition": { "alias": "drawerPosition"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
 
 declare class MgnpDialog {
+    protected readonly _overlay: MgnpDialogOverlay;
     private readonly _ngpDialog;
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<MgnpDialog, never>;
@@ -14,13 +27,6 @@ declare class MgnpDialogDescription {
     static ɵdir: i0.ɵɵDirectiveDeclaration<MgnpDialogDescription, "[ngpDialogDescription][mgnpDialogDescription]", never, {}, {}, never, never, true, never>;
 }
 
-declare class MgnpDialogOverlay {
-    private readonly _ngpDialogOverlay;
-    constructor();
-    static ɵfac: i0.ɵɵFactoryDeclaration<MgnpDialogOverlay, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MgnpDialogOverlay, "[ngpDialogOverlay][mgnpDialogOverlay]", never, {}, {}, never, never, true, never>;
-}
-
 declare class MgnpDialogTitle {
     private readonly _ngpDialogTitle;
     constructor();
@@ -29,3 +35,4 @@ declare class MgnpDialogTitle {
 }
 
 export { MgnpDialog, MgnpDialogDescription, MgnpDialogOverlay, MgnpDialogTitle };
+export type { MgnpDialogDrawerPosition, MgnpDialogOverlayMode };

package/types/mgremy-ng-primitives-switch.d.ts

@@ -0,0 +1,17 @@
+import * as i0 from '@angular/core';
+
+declare class MgnpSwitch {
+    private readonly _ngpSwitch;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<MgnpSwitch, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MgnpSwitch, "[ngpSwitch][mgnpSwitch]", never, {}, {}, never, never, true, never>;
+}
+
+declare class MgnpSwitchThumb {
+    private readonly _ngpSwitchThumb;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<MgnpSwitchThumb, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MgnpSwitchThumb, "[ngpSwitchThumb][mgnpSwitchThumb]", never, {}, {}, never, never, true, never>;
+}
+
+export { MgnpSwitch, MgnpSwitchThumb };

package/theme/ngp_tw.css

@@ -1,50 +0,0 @@
-@import './components/accordion.css';
-@import './components/button.css';
-@import './components/checkbox.css';
-@import './components/combobox.css';
-@import './components/dialog.css';
-@import './components/input.css';
-@import './components/menu.css';
-@import './components/pagination.css';
-@import './components/toast.css';
-@import './components/tooltip.css';
-
-@theme {
-  --ngp-background: var(--mg-background-ui);
-  --ngp-background-secondary: var(--mg-background-ui-secondary);
-  --ngp-background-hover: var(--mg-background-ui-hover);
-  --ngp-background-active: var(--mg-background-ui-active);
-  --ngp-background-inverse: var(--mg-background-ui-inverse);
-  --ngp-background-disabled: var(--mg-background-ui-disabled);
-  --ngp-background-blue: var(--mg-background-primary);
-  --ngp-background-success: var(--mg-background-success);
-
-  --ngp-border: var(--mg-border-ui);
-  --ngp-border-secondary: var(--mg-border-ui-secondary);
-  --ngp-border-blue: var(--mg-border-info);
-  --ngp-border-inverse: var(--mg-border-inverse);
-
-  --ngp-text-active: var(--mg-text-active);
-  --ngp-text-emphasis: var(--mg-text-emphasis);
-  --ngp-text-primary: var(--mg-text-ui);
-  --ngp-text-secondary: var(--mg-text-ui-secondary);
-  --ngp-text-tertiary: var(--mg-text-ui-tertiary);
-  --ngp-text-disabled: var(--mg-text-ui-disabled);
-  --ngp-text-placeholder: var(--mg-text-placeholder);
-  --ngp-text-inverse: var(--mg-text-inverse);
-  --ngp-text-blue: var(--mg-text-primary);
-  --ngp-text-red: var(--mg-text-danger);
-
-  --ngp-shadow: var(--mg-shadow-ui);
-  --ngp-shadow-lg: var(--mg-shadow-lg);
-  --ngp-shadow-border: var(--mg-shadow-border);
-
-  --ngp-focus-ring: var(--mg-ring-ui);
-
-  --ngp-avatar-background: var(--mg-background-avatar);
-  --ngp-avatar-border: var(--mg-border-avatar);
-
-  --ngp-button-shadow: var(--mg-shadow-button);
-
-  --ngp-input-shadow: var(--mg-shadow-input);
-}