@mgremy/ng-primitives 0.2.0 → 0.3.0

package/theme/ngp_tw.css

@@ -1,45 +1,47 @@
 @import './components/button.css';
 @import './components/combobox.css';
 @import './components/input.css';
+@import './components/loader.css';
 @import './components/menu.css';
+@import './components/pagination.css';
 @import './components/tooltip.css';
 
 @theme {
-  --ngp-background: var(--bg-ui);
-  --ngp-background-secondary: var(--bg-secondary);
-  --ngp-background-hover: var(--bg-hover);
-  --ngp-background-active: var(--bg-active);
-  --ngp-background-inverse: var(--bg-inverse);
-  --ngp-background-disabled: var(--bg-disabled);
-  --ngp-background-blue: var(--bg-blue);
-  --ngp-background-success: var(--bg-success);
-
-  --ngp-border: var(--border-ui);
-  --ngp-border-secondary: var(--border-secondary);
-  --ngp-border-blue: var(--border-blue);
-  --ngp-border-inverse: var(--border-inverse);
-
-  --ngp-text-active: var(--text-active);
-  --ngp-text-emphasis: var(--text-emphasis);
-  --ngp-text-primary: var(--text-primary);
-  --ngp-text-secondary: var(--text-secondary);
-  --ngp-text-tertiary: var(--text-tertiary);
-  --ngp-text-disabled: var(--text-disabled);
-  --ngp-text-placeholder: var(--text-placeholder);
-  --ngp-text-inverse: var(--text-inverse);
-  --ngp-text-blue: var(--text-blue);
-  --ngp-text-red: var(--text-red);
-
-  --ngp-shadow: var(--shadow-ui);
-  --ngp-shadow-lg: var(--shadow-lg);
-  --ngp-shadow-border: var(--shadow-border);
-
-  --ngp-focus-ring: var(--focus-ring-ui);
-
-  --ngp-avatar-background: var(--avatar-background);
-  --ngp-avatar-border: var(--avatar-border);
-
-  --ngp-button-shadow: var(--button-shadow);
-
-  --ngp-input-shadow: var(--input-shadow);
+  --ngp-background: var(--mg-background-ui);
+  --ngp-background-secondary: var(--mg-background-secondary);
+  --ngp-background-hover: var(--mg-background-hover);
+  --ngp-background-active: var(--mg-background-active);
+  --ngp-background-inverse: var(--mg-background-inverse);
+  --ngp-background-disabled: var(--mg-background-disabled);
+  --ngp-background-blue: var(--mg-background-blue);
+  --ngp-background-success: var(--mg-background-success);
+
+  --ngp-border: var(--mg-border-ui);
+  --ngp-border-secondary: var(--mg-border-secondary);
+  --ngp-border-blue: var(--mg-border-blue);
+  --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-primary);
+  --ngp-text-secondary: var(--mg-text-secondary);
+  --ngp-text-tertiary: var(--mg-text-tertiary);
+  --ngp-text-disabled: var(--mg-text-disabled);
+  --ngp-text-placeholder: var(--mg-text-placeholder);
+  --ngp-text-inverse: var(--mg-text-inverse);
+  --ngp-text-blue: var(--mg-text-blue);
+  --ngp-text-red: var(--mg-text-red);
+
+  --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);
 }

package/tooltip/README.md

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

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

@@ -1,28 +1,11 @@
-import * as _angular_core from '@angular/core';
-import * as ng_primitives_state from 'ng-primitives/state';
-import { ControlValueAccessor } from '@angular/forms';
-import * as i1 from 'ng-primitives/pagination';
 import { NgpPagination } from 'ng-primitives/pagination';
-import { TouchedFn, ChangeFn } from 'ng-primitives/utils';
+import * as i0 from '@angular/core';
 
-declare class MgnpPagination implements ControlValueAccessor {
-    /** Access the pagination state */
-    protected readonly state: _angular_core.Signal<ng_primitives_state.State<NgpPagination>>;
-    /** Get the pages as an array we can iterate over */
-    protected readonly pages: _angular_core.Signal<number[]>;
-    /** The onChange callback */
-    private onChange?;
-    /** The onTouched callback */
-    protected onTouched?: TouchedFn;
+declare class Pagination {
+    protected readonly ngpPagination: NgpPagination | null;
     constructor();
-    /** Write a new value to the control */
-    writeValue(value: number): void;
-    /** Register a callback to be called when the value changes */
-    registerOnChange(fn: ChangeFn<number>): void;
-    /** Register a callback to be called when the control is touched */
-    registerOnTouched(fn: TouchedFn): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MgnpPagination, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MgnpPagination, "mgnp-pagination", never, {}, {}, never, never, true, [{ directive: typeof i1.NgpPagination; inputs: { "ngpPaginationPage": "page"; "ngpPaginationPageCount": "pageCount"; "ngpPaginationDisabled": "disabled"; }; outputs: { "ngpPaginationPageChange": "pageChange"; }; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<Pagination, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<Pagination, "[ngpPagination][mgnpPagination]", never, {}, {}, never, never, true, never>;
 }
 
-export { MgnpPagination };
+export { Pagination };

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

@@ -1,54 +0,0 @@
-import * as i0 from '@angular/core';
-import { ChangeDetectionStrategy, Component, signal, inject } from '@angular/core';
-
-class MgnpNavbar {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: MgnpNavbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.6", type: MgnpNavbar, isStandalone: true, selector: "mgnp-navbar, nav[mgnpNavbar]", providers: [], ngImport: i0, template: "<ng-content />\n", styles: ["@reference \"#ui.css\";:host{@apply mx-auto flex max-w-screen flex-wrap justify-between gap-8 border-b p-4;@apply items-center;@apply border-b-(--border-ui);}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: MgnpNavbar, decorators: [{
-            type: Component,
-            args: [{ selector: 'mgnp-navbar, nav[mgnpNavbar]', imports: [], standalone: true, providers: [], changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [], template: "<ng-content />\n", styles: ["@reference \"#ui.css\";:host{@apply mx-auto flex max-w-screen flex-wrap justify-between gap-8 border-b p-4;@apply items-center;@apply border-b-(--border-ui);}\n"] }]
-        }] });
-
-class MgnpNavbarContent {
-    _isOpen = signal(false, ...(ngDevMode ? [{ debugName: "_isOpen" }] : []));
-    isOpen = this._isOpen.asReadonly();
-    toggle(newVal) {
-        if (newVal === undefined) {
-            const value = this._isOpen();
-            newVal = !value;
-        }
-        this._isOpen.set(newVal);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: MgnpNavbarContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.6", type: MgnpNavbarContent, isStandalone: true, selector: "mgnp-navbar-content", host: { properties: { "attr.data-enter": "isOpen() === true ? true : null", "attr.data-exit": "isOpen() === false ? false : null" } }, providers: [], ngImport: i0, template: "<ul>\n  <ng-content />\n</ul>\n", styles: ["@reference \"#ui.css\";:host{@apply collapse flex-col items-center;@variant max-md{&[data-enter] {@apply visible order-last flex-none basis-full; @apply shadow-ui box-border rounded-lg; ul {@apply flex w-full flex-col gap-2 p-4; @apply rounded-lg; @apply bg-secondary font-medium;}}}@variant md{@apply visible order-0 m-auto flex-1 flex-row; ul {@apply mt-0 flex flex-row gap-4 space-x-4;}}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: MgnpNavbarContent, decorators: [{
-            type: Component,
-            args: [{ selector: 'mgnp-navbar-content', imports: [], standalone: true, providers: [], changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        '[attr.data-enter]': 'isOpen() === true ? true : null',
-                        '[attr.data-exit]': 'isOpen() === false ? false : null',
-                    }, hostDirectives: [], template: "<ul>\n  <ng-content />\n</ul>\n", styles: ["@reference \"#ui.css\";:host{@apply collapse flex-col items-center;@variant max-md{&[data-enter] {@apply visible order-last flex-none basis-full; @apply shadow-ui box-border rounded-lg; ul {@apply flex w-full flex-col gap-2 p-4; @apply rounded-lg; @apply bg-secondary font-medium;}}}@variant md{@apply visible order-0 m-auto flex-1 flex-row; ul {@apply mt-0 flex flex-row gap-4 space-x-4;}}}\n"] }]
-        }] });
-
-class MgnpNavbarItem {
-    _mgnpNavbarContent = inject(MgnpNavbarContent);
-    onClick() {
-        this._mgnpNavbarContent.toggle(false);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: MgnpNavbarItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.6", type: MgnpNavbarItem, isStandalone: true, selector: "mgnp-navbar-item, button[mgnpNavbarItem], a[mgnpNavbarItem]", host: { listeners: { "click": "onClick()" } }, providers: [], ngImport: i0, template: "<ng-content />", styles: ["@reference \"#ui.css\";:host{transition:color .2s ease-in-out}:host[aria-current=page]{@apply text-active;}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: MgnpNavbarItem, decorators: [{
-            type: Component,
-            args: [{ selector: 'mgnp-navbar-item, button[mgnpNavbarItem], a[mgnpNavbarItem]', imports: [], standalone: true, providers: [], changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        '(click)': 'onClick()',
-                    }, hostDirectives: [], template: "<ng-content />", styles: ["@reference \"#ui.css\";:host{transition:color .2s ease-in-out}:host[aria-current=page]{@apply text-active;}\n"] }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { MgnpNavbar, MgnpNavbarContent, MgnpNavbarItem };
-//# sourceMappingURL=mgremy-ng-primitives-navbar.mjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"mgremy-ng-primitives-navbar.mjs","sources":["../../../../libs/ng-primitives/navbar/src/lib/mgnp-navbar/mgnp-navbar.component.ts","../../../../libs/ng-primitives/navbar/src/lib/mgnp-navbar/mgnp-navbar.component.html","../../../../libs/ng-primitives/navbar/src/lib/mgnp-navbar-content/mgnp-navbar-content.component.ts","../../../../libs/ng-primitives/navbar/src/lib/mgnp-navbar-content/mgnp-navbar-content.component.html","../../../../libs/ng-primitives/navbar/src/lib/mgnp-navbar-item/mgnp-navbar-item.component.ts","../../../../libs/ng-primitives/navbar/src/lib/mgnp-navbar-item/mgnp-navbar-item.component.html","../../../../libs/ng-primitives/navbar/src/mgremy-ng-primitives-navbar.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component } from '@angular/core';\n\n@Component({\n  selector: 'mgnp-navbar, nav[mgnpNavbar]',\n  imports: [],\n  standalone: true,\n  templateUrl: './mgnp-navbar.component.html',\n  styleUrl: './mgnp-navbar.component.css',\n  providers: [],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  hostDirectives: [],\n})\nexport class MgnpNavbar {}\n","<ng-content />\n","import { ChangeDetectionStrategy, Component, signal } from '@angular/core';\n\n@Component({\n  selector: 'mgnp-navbar-content',\n  imports: [],\n  standalone: true,\n  templateUrl: './mgnp-navbar-content.component.html',\n  styleUrl: './mgnp-navbar-content.component.css',\n  providers: [],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[attr.data-enter]': 'isOpen() === true ? true : null',\n    '[attr.data-exit]': 'isOpen() === false ? false : null',\n  },\n  hostDirectives: [],\n})\nexport class MgnpNavbarContent {\n  protected readonly _isOpen = signal(false);\n  readonly isOpen = this._isOpen.asReadonly();\n\n  toggle(newVal?: boolean | undefined): void {\n    if (newVal === undefined) {\n      const value = this._isOpen();\n      newVal = !value;\n    }\n\n    this._isOpen.set(newVal);\n  }\n}\n","<ul>\n  <ng-content />\n</ul>\n","import { MgnpNavbarContent } from '../mgnp-navbar-content/mgnp-navbar-content.component';\n\nimport { ChangeDetectionStrategy, Component, inject } from '@angular/core';\n\n@Component({\n  selector: 'mgnp-navbar-item, button[mgnpNavbarItem], a[mgnpNavbarItem]',\n  imports: [],\n  standalone: true,\n  templateUrl: './mgnp-navbar-item.component.html',\n  styleUrl: './mgnp-navbar-item.component.css',\n  providers: [],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '(click)': 'onClick()',\n  },\n  hostDirectives: [],\n})\nexport class MgnpNavbarItem {\n  private readonly _mgnpNavbarContent = inject(MgnpNavbarContent);\n\n  protected onClick(): void {\n    this._mgnpNavbarContent.toggle(false);\n  }\n}\n","<ng-content />","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/navbar/README.md

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

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

@@ -1,23 +0,0 @@
-import * as i0 from '@angular/core';
-
-declare class MgnpNavbar {
-    static ɵfac: i0.ɵɵFactoryDeclaration<MgnpNavbar, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MgnpNavbar, "mgnp-navbar, nav[mgnpNavbar]", never, {}, {}, never, ["*"], true, never>;
-}
-
-declare class MgnpNavbarContent {
-    protected readonly _isOpen: i0.WritableSignal<boolean>;
-    readonly isOpen: i0.Signal<boolean>;
-    toggle(newVal?: boolean | undefined): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MgnpNavbarContent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MgnpNavbarContent, "mgnp-navbar-content", never, {}, {}, never, ["*"], true, never>;
-}
-
-declare class MgnpNavbarItem {
-    private readonly _mgnpNavbarContent;
-    protected onClick(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MgnpNavbarItem, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MgnpNavbarItem, "mgnp-navbar-item, button[mgnpNavbarItem], a[mgnpNavbarItem]", never, {}, {}, never, ["*"], true, never>;
-}
-
-export { MgnpNavbar, MgnpNavbarContent, MgnpNavbarItem };