@fairylights-studio/ngx-m3-navigation-common 0.0.1

package/README.md

@@ -0,0 +1,7 @@
+# Navigation Common
+
+Shared base classes and directives for Material 3 Expressive navigation components in Angular Material.
+
+> This is a **third-party** implementation by FairyLights Studio, not an official Angular / Google component.
+
+[查看源代码 / Source](https://github.com/FairyLightsStudio/AngularM3EComponents) · [查看文档 / Docs](https://some-angular-m3e-components.pages.dev/?path=/docs/navigation-navigation-bar--docs)

package/dist/fesm2022/fairylights-studio-ngx-m3-navigation-common.mjs

@@ -0,0 +1,72 @@
+import * as i0 from '@angular/core';
+import { inject, TemplateRef, Directive, input, ContentChild } from '@angular/core';
+
+/** Marks projected template content as the default navigation item icon. */
+class MatNavigationIcon {
+    templateRef = inject((TemplateRef), { optional: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: MatNavigationIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.0", type: MatNavigationIcon, isStandalone: true, selector: "[matNavigationIcon], [matNavIcon]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: MatNavigationIcon, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[matNavigationIcon], [matNavIcon]',
+                }]
+        }] });
+/** Marks projected template content as the icon shown for active navigation items. */
+class MatNavigationActiveIcon {
+    templateRef = inject((TemplateRef), { optional: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: MatNavigationActiveIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.0", type: MatNavigationActiveIcon, isStandalone: true, selector: "[matNavigationActiveIcon], [matNavActiveIcon]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: MatNavigationActiveIcon, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[matNavigationActiveIcon], [matNavActiveIcon]',
+                }]
+        }] });
+/** Marks projected template content as the navigation item label. */
+class MatNavigationLabel {
+    templateRef = inject((TemplateRef), { optional: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: MatNavigationLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.0", type: MatNavigationLabel, isStandalone: true, selector: "[matNavigationLabel], [matNavLabel]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: MatNavigationLabel, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[matNavigationLabel], [matNavLabel]',
+                }]
+        }] });
+
+class MatNavigationItemBase {
+    /** Whether the navigation item is active/selected. */
+    active = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    /** Content query for the default icon. */
+    icon;
+    /** Content query for the active/selected icon. */
+    activeIcon;
+    /** Content query for the label. */
+    label;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: MatNavigationItemBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.0", type: MatNavigationItemBase, isStandalone: true, inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "icon", first: true, predicate: MatNavigationIcon, descendants: true }, { propertyName: "activeIcon", first: true, predicate: MatNavigationActiveIcon, descendants: true }, { propertyName: "label", first: true, predicate: MatNavigationLabel, descendants: true }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: MatNavigationItemBase, decorators: [{
+            type: Directive
+        }], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], icon: [{
+                type: ContentChild,
+                args: [MatNavigationIcon]
+            }], activeIcon: [{
+                type: ContentChild,
+                args: [MatNavigationActiveIcon]
+            }], label: [{
+                type: ContentChild,
+                args: [MatNavigationLabel]
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MatNavigationActiveIcon, MatNavigationIcon, MatNavigationItemBase, MatNavigationLabel };
+//# sourceMappingURL=fairylights-studio-ngx-m3-navigation-common.mjs.map

package/dist/fesm2022/fairylights-studio-ngx-m3-navigation-common.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"fairylights-studio-ngx-m3-navigation-common.mjs","sources":["../../src/lib/directives.ts","../../src/lib/navigation-item-base.directive.ts","../../src/fairylights-studio-ngx-m3-navigation-common.ts"],"sourcesContent":["import { Directive, TemplateRef, inject } from '@angular/core';\n\n/** Marks projected template content as the default navigation item icon. */\n@Directive({\n  selector: '[matNavigationIcon], [matNavIcon]',\n})\nexport class MatNavigationIcon {\n  public templateRef = inject(TemplateRef<unknown>, { optional: true });\n}\n\n/** Marks projected template content as the icon shown for active navigation items. */\n@Directive({\n  selector: '[matNavigationActiveIcon], [matNavActiveIcon]',\n})\nexport class MatNavigationActiveIcon {\n  public templateRef = inject(TemplateRef<unknown>, { optional: true });\n}\n\n/** Marks projected template content as the navigation item label. */\n@Directive({\n  selector: '[matNavigationLabel], [matNavLabel]',\n})\nexport class MatNavigationLabel {\n  public templateRef = inject(TemplateRef<unknown>, { optional: true });\n}\n","import { Directive, ContentChild, input } from '@angular/core';\nimport { MatNavigationIcon, MatNavigationActiveIcon, MatNavigationLabel } from './directives';\n\n@Directive()\nexport class MatNavigationItemBase {\n  /** Whether the navigation item is active/selected. */\n  active = input<boolean>(false);\n\n  /** Content query for the default icon. */\n  @ContentChild(MatNavigationIcon) protected icon?: MatNavigationIcon;\n\n  /** Content query for the active/selected icon. */\n  @ContentChild(MatNavigationActiveIcon) protected activeIcon?: MatNavigationActiveIcon;\n\n  /** Content query for the label. */\n  @ContentChild(MatNavigationLabel) protected label?: MatNavigationLabel;\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;AAEA;MAIa,iBAAiB,CAAA;AACrB,IAAA,WAAW,GAAG,MAAM,EAAC,WAAoB,GAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;uGAD1D,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAjB,iBAAiB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,mCAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAjB,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAH7B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,mCAAmC;AAC9C,iBAAA;;AAKD;MAIa,uBAAuB,CAAA;AAC3B,IAAA,WAAW,GAAG,MAAM,EAAC,WAAoB,GAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;uGAD1D,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAvB,uBAAuB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,+CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAvB,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBAHnC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,+CAA+C;AAC1D,iBAAA;;AAKD;MAIa,kBAAkB,CAAA;AACtB,IAAA,WAAW,GAAG,MAAM,EAAC,WAAoB,GAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;uGAD1D,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAlB,kBAAkB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,qCAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAlB,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAH9B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,qCAAqC;AAChD,iBAAA;;;MCjBY,qBAAqB,CAAA;;IAEhC,MAAM,GAAG,KAAK,CAAU,KAAK;+EAAC;;AAGa,IAAA,IAAI;;AAGE,IAAA,UAAU;;AAGf,IAAA,KAAK;uGAXtC,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAArB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,qBAAqB,EAAA,YAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,MAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAKlB,iBAAiB,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,YAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAGjB,uBAAuB,wEAGvB,kBAAkB,EAAA,WAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAXrB,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBADjC;;sBAME,YAAY;uBAAC,iBAAiB;;sBAG9B,YAAY;uBAAC,uBAAuB;;sBAGpC,YAAY;uBAAC,kBAAkB;;;ACflC;;AAEG;;;;"}

package/dist/types/fairylights-studio-ngx-m3-navigation-common.d.ts

@@ -0,0 +1,36 @@
+import * as i0 from '@angular/core';
+import { TemplateRef } from '@angular/core';
+
+/** Marks projected template content as the default navigation item icon. */
+declare class MatNavigationIcon {
+    templateRef: TemplateRef<any> | null;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatNavigationIcon, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatNavigationIcon, "[matNavigationIcon], [matNavIcon]", never, {}, {}, never, never, true, never>;
+}
+/** Marks projected template content as the icon shown for active navigation items. */
+declare class MatNavigationActiveIcon {
+    templateRef: TemplateRef<any> | null;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatNavigationActiveIcon, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatNavigationActiveIcon, "[matNavigationActiveIcon], [matNavActiveIcon]", never, {}, {}, never, never, true, never>;
+}
+/** Marks projected template content as the navigation item label. */
+declare class MatNavigationLabel {
+    templateRef: TemplateRef<any> | null;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatNavigationLabel, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatNavigationLabel, "[matNavigationLabel], [matNavLabel]", never, {}, {}, never, never, true, never>;
+}
+
+declare class MatNavigationItemBase {
+    /** Whether the navigation item is active/selected. */
+    active: i0.InputSignal<boolean>;
+    /** Content query for the default icon. */
+    protected icon?: MatNavigationIcon;
+    /** Content query for the active/selected icon. */
+    protected activeIcon?: MatNavigationActiveIcon;
+    /** Content query for the label. */
+    protected label?: MatNavigationLabel;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatNavigationItemBase, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatNavigationItemBase, never, never, { "active": { "alias": "active"; "required": false; "isSignal": true; }; }, {}, ["icon", "activeIcon", "label"], never, true, never>;
+}
+
+export { MatNavigationActiveIcon, MatNavigationIcon, MatNavigationItemBase, MatNavigationLabel };

package/ng-package.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "./dist",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  },
+  "assets": ["README.md"]
+}

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@fairylights-studio/ngx-m3-navigation-common",
+  "version": "0.0.1",
+  "description": "Shared base classes and directives for Angular Material 3 Expressive navigation components",
+  "license": "MIT",
+  "author": "FairyLights Studio",
+  "keywords": [
+    "angular",
+    "material",
+    "material-3",
+    "material-design",
+    "navigation",
+    "shared"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/FairyLightsStudio/AngularM3EComponents.git",
+    "directory": "components/navigation/navigation-common"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@angular/cdk": "^22.0.0",
+    "@angular/common": "^22.0.0",
+    "@angular/core": "^22.0.0",
+    "@angular/material": "^22.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false
+}

package/project.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "name": "@fairylights-studio/ngx-m3-navigation-common",
+  "projectType": "library",
+  "sourceRoot": "components/navigation/navigation-common/src",
+  "prefix": "lib",
+  "targets": {
+    "build": {
+      "executor": "@angular/build:ng-packagr",
+      "configurations": {
+        "production": {
+          "tsConfig": "components/navigation/navigation-common/tsconfig.lib.prod.json"
+        },
+        "development": {
+          "tsConfig": "components/navigation/navigation-common/tsconfig.lib.json"
+        }
+      },
+      "defaultConfiguration": "production"
+    }
+  }
+}

package/src/lib/directives.ts

@@ -0,0 +1,25 @@
+import { Directive, TemplateRef, inject } from '@angular/core';
+
+/** Marks projected template content as the default navigation item icon. */
+@Directive({
+  selector: '[matNavigationIcon], [matNavIcon]',
+})
+export class MatNavigationIcon {
+  public templateRef = inject(TemplateRef<unknown>, { optional: true });
+}
+
+/** Marks projected template content as the icon shown for active navigation items. */
+@Directive({
+  selector: '[matNavigationActiveIcon], [matNavActiveIcon]',
+})
+export class MatNavigationActiveIcon {
+  public templateRef = inject(TemplateRef<unknown>, { optional: true });
+}
+
+/** Marks projected template content as the navigation item label. */
+@Directive({
+  selector: '[matNavigationLabel], [matNavLabel]',
+})
+export class MatNavigationLabel {
+  public templateRef = inject(TemplateRef<unknown>, { optional: true });
+}

package/src/lib/navigation-item-base.directive.ts

@@ -0,0 +1,17 @@
+import { Directive, ContentChild, input } from '@angular/core';
+import { MatNavigationIcon, MatNavigationActiveIcon, MatNavigationLabel } from './directives';
+
+@Directive()
+export class MatNavigationItemBase {
+  /** Whether the navigation item is active/selected. */
+  active = input<boolean>(false);
+
+  /** Content query for the default icon. */
+  @ContentChild(MatNavigationIcon) protected icon?: MatNavigationIcon;
+
+  /** Content query for the active/selected icon. */
+  @ContentChild(MatNavigationActiveIcon) protected activeIcon?: MatNavigationActiveIcon;
+
+  /** Content query for the label. */
+  @ContentChild(MatNavigationLabel) protected label?: MatNavigationLabel;
+}

package/src/public-api.ts

@@ -0,0 +1,2 @@
+export { MatNavigationItemBase } from './lib/navigation-item-base.directive';
+export { MatNavigationIcon, MatNavigationActiveIcon, MatNavigationLabel } from './lib/directives';

package/tsconfig.lib.json

@@ -0,0 +1,23 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    // "outDir": "../../../out-tsc/lib",
+    "declaration": true,
+    "declarationMap": true,
+    "types": []
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": [
+    "**/*.spec.ts"
+  ],
+  "angularCompilerOptions": {
+    "extendedDiagnostics": {
+      "checks": {
+        "nullishCoalescingNotNullable": "suppress",
+        "optionalChainNotNullable": "suppress"
+      }
+    }
+  }
+}

package/tsconfig.lib.prod.json

@@ -0,0 +1,11 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}