@frame-kit/ui-ng 0.2.2 → 0.2.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -10,6 +10,14 @@ class NavBrandComponent {
|
|
|
10
10
|
// ===== OPTIONAL =====
|
|
11
11
|
/** Router path the brand link navigates to when clicked. */
|
|
12
12
|
href = input('/', ...(ngDevMode ? [{ debugName: "href" }] : /* istanbul ignore next */ []));
|
|
13
|
+
/**
|
|
14
|
+
* Secondary line under the brand text — typically the product or edition the
|
|
15
|
+
* brand is qualifying ("Developer Console", "Admin Workspace"). Omit it and
|
|
16
|
+
* the brand text stays a single line, centered against the logo exactly as
|
|
17
|
+
* before; supply it and the two lines are centered against the logo as one
|
|
18
|
+
* block, left-aligned with each other.
|
|
19
|
+
*/
|
|
20
|
+
description = input(null, ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
|
|
13
21
|
// ===== BASE PROPS =====
|
|
14
22
|
id = input(null, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
|
|
15
23
|
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
|
|
@@ -22,12 +30,12 @@ class NavBrandComponent {
|
|
|
22
30
|
return this.classes();
|
|
23
31
|
}
|
|
24
32
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NavBrandComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
25
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.
|
|
33
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: NavBrandComponent, isStandalone: true, selector: "fk-nav-brand", inputs: { brandText: { classPropertyName: "brandText", publicName: "brandText", isSignal: true, isRequired: true, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "<a\n class=\"fk-nav-brand__link\"\n [routerLink]=\"href()\"\n [attr.id]=\"id()\"\n [attr.aria-label]=\"ariaLabel()\"\n>\n <span class=\"fk-nav-brand__logo\">\n <ng-content select=\"[navLogo]\"></ng-content>\n </span>\n <span class=\"fk-nav-brand__body\">\n <span class=\"fk-nav-brand__text\">{{ brandText() }}</span>\n @if (description(); as brandDescription) {\n <span class=\"fk-nav-brand__description\">{{ brandDescription }}</span>\n }\n </span>\n</a>\n", styles: [":host{display:inline-block;max-width:100%;min-width:0}.fk-nav-brand__link{display:flex;width:100%;align-items:center;gap:var(--fk-nav-brand-gap, .5rem);text-decoration:none;color:var(--fk-nav-brand-color, inherit);min-width:0}.fk-nav-brand__link:hover{color:var(--fk-nav-brand-color-hover, inherit)}.fk-nav-brand__logo{display:inline-flex;flex:none;align-items:center}.fk-nav-brand__body{display:flex;flex:1 1 auto;flex-direction:column;justify-content:center;align-items:flex-start;min-width:0;gap:var(--fk-nav-brand-description-gap, .125rem)}.fk-nav-brand__text{font-family:var(--fk-nav-brand-font-family, var(--fk-font-family-display, var(--fk-font-family-base, sans-serif)));font-size:var(--fk-nav-brand-font-size, 1.125rem);font-weight:var(--fk-nav-brand-font-weight, 600);line-height:var(--fk-nav-brand-line-height, 1);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}.fk-nav-brand__description{font-family:var(--fk-nav-brand-description-font-family, var(--fk-font-family-base, sans-serif));font-size:var(--fk-nav-brand-description-font-size, .6875rem);font-weight:var(--fk-nav-brand-description-font-weight, 500);line-height:var(--fk-nav-brand-description-line-height, 1.2);letter-spacing:var(--fk-nav-brand-description-letter-spacing, .02em);color:var(--fk-nav-brand-description-color, var(--fk-color-muted, inherit));white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
26
34
|
}
|
|
27
35
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NavBrandComponent, decorators: [{
|
|
28
36
|
type: Component,
|
|
29
|
-
args: [{ selector: 'fk-nav-brand', standalone: true, imports: [RouterModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<a\n class=\"fk-nav-brand__link\"\n [routerLink]=\"href()\"\n [attr.id]=\"id()\"\n [attr.aria-label]=\"ariaLabel()\"\n>\n <span class=\"fk-nav-brand__logo\">\n <ng-content select=\"[navLogo]\"></ng-content>\n </span>\n <span class=\"fk-nav-brand__text\">{{ brandText() }}</span>\n</a>\n", styles: [":host{display:inline-block}.fk-nav-brand__link{display:
|
|
30
|
-
}], propDecorators: { brandText: [{ type: i0.Input, args: [{ isSignal: true, alias: "brandText", required: true }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], hostClass: [{
|
|
37
|
+
args: [{ selector: 'fk-nav-brand', standalone: true, imports: [RouterModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<a\n class=\"fk-nav-brand__link\"\n [routerLink]=\"href()\"\n [attr.id]=\"id()\"\n [attr.aria-label]=\"ariaLabel()\"\n>\n <span class=\"fk-nav-brand__logo\">\n <ng-content select=\"[navLogo]\"></ng-content>\n </span>\n <span class=\"fk-nav-brand__body\">\n <span class=\"fk-nav-brand__text\">{{ brandText() }}</span>\n @if (description(); as brandDescription) {\n <span class=\"fk-nav-brand__description\">{{ brandDescription }}</span>\n }\n </span>\n</a>\n", styles: [":host{display:inline-block;max-width:100%;min-width:0}.fk-nav-brand__link{display:flex;width:100%;align-items:center;gap:var(--fk-nav-brand-gap, .5rem);text-decoration:none;color:var(--fk-nav-brand-color, inherit);min-width:0}.fk-nav-brand__link:hover{color:var(--fk-nav-brand-color-hover, inherit)}.fk-nav-brand__logo{display:inline-flex;flex:none;align-items:center}.fk-nav-brand__body{display:flex;flex:1 1 auto;flex-direction:column;justify-content:center;align-items:flex-start;min-width:0;gap:var(--fk-nav-brand-description-gap, .125rem)}.fk-nav-brand__text{font-family:var(--fk-nav-brand-font-family, var(--fk-font-family-display, var(--fk-font-family-base, sans-serif)));font-size:var(--fk-nav-brand-font-size, 1.125rem);font-weight:var(--fk-nav-brand-font-weight, 600);line-height:var(--fk-nav-brand-line-height, 1);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}.fk-nav-brand__description{font-family:var(--fk-nav-brand-description-font-family, var(--fk-font-family-base, sans-serif));font-size:var(--fk-nav-brand-description-font-size, .6875rem);font-weight:var(--fk-nav-brand-description-font-weight, 500);line-height:var(--fk-nav-brand-description-line-height, 1.2);letter-spacing:var(--fk-nav-brand-description-letter-spacing, .02em);color:var(--fk-nav-brand-description-color, var(--fk-color-muted, inherit));white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}\n"] }]
|
|
38
|
+
}], propDecorators: { brandText: [{ type: i0.Input, args: [{ isSignal: true, alias: "brandText", required: true }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], hostClass: [{
|
|
31
39
|
type: HostBinding,
|
|
32
40
|
args: ['class']
|
|
33
41
|
}] } });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"frame-kit-ui-ng-ui-nav-brand.mjs","sources":["../../../../packages/ui-ng/ui/nav-brand/nav-brand.component.ts","../../../../packages/ui-ng/ui/nav-brand/nav-brand.component.html","../../../../packages/ui-ng/ui/nav-brand/frame-kit-ui-ng-ui-nav-brand.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n computed,\n HostBinding,\n input,\n} from '@angular/core';\nimport { RouterModule } from '@angular/router';\n\n@Component({\n selector: 'fk-nav-brand',\n standalone: true,\n imports: [RouterModule],\n changeDetection: ChangeDetectionStrategy.OnPush,\n templateUrl: './nav-brand.component.html',\n styleUrl: './nav-brand.component.scss',\n})\nexport class NavBrandComponent {\n // ===== REQUIRED =====\n /** Brand or application name rendered as the nav logo text. */\n readonly brandText = input.required<string>();\n\n // ===== OPTIONAL =====\n /** Router path the brand link navigates to when clicked. */\n readonly href = input<string>('/');\n\n // ===== BASE PROPS =====\n readonly id = input<string | null>(null);\n readonly className = input<string>('');\n readonly ariaLabel = input<string | null>(null);\n\n // ===== COMPUTED =====\n readonly classes = computed(() => {\n return ['fk-nav-brand', this.className()].filter(Boolean).join(' ');\n });\n\n @HostBinding('class')\n get hostClass() {\n return this.classes();\n }\n}\n","<a\n class=\"fk-nav-brand__link\"\n [routerLink]=\"href()\"\n [attr.id]=\"id()\"\n [attr.aria-label]=\"ariaLabel()\"\n>\n <span class=\"fk-nav-brand__logo\">\n <ng-content select=\"[navLogo]\"></ng-content>\n </span>\n <span class=\"fk-nav-brand__text\">{{ brandText() }}</span>\n</a>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;MAiBa,iBAAiB,CAAA;;;AAGnB,IAAA,SAAS,GAAG,KAAK,CAAC,QAAQ,+EAAU;;;AAIpC,IAAA,IAAI,GAAG,KAAK,CAAS,GAAG,2EAAC;;
|
|
1
|
+
{"version":3,"file":"frame-kit-ui-ng-ui-nav-brand.mjs","sources":["../../../../packages/ui-ng/ui/nav-brand/nav-brand.component.ts","../../../../packages/ui-ng/ui/nav-brand/nav-brand.component.html","../../../../packages/ui-ng/ui/nav-brand/frame-kit-ui-ng-ui-nav-brand.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n computed,\n HostBinding,\n input,\n} from '@angular/core';\nimport { RouterModule } from '@angular/router';\n\n@Component({\n selector: 'fk-nav-brand',\n standalone: true,\n imports: [RouterModule],\n changeDetection: ChangeDetectionStrategy.OnPush,\n templateUrl: './nav-brand.component.html',\n styleUrl: './nav-brand.component.scss',\n})\nexport class NavBrandComponent {\n // ===== REQUIRED =====\n /** Brand or application name rendered as the nav logo text. */\n readonly brandText = input.required<string>();\n\n // ===== OPTIONAL =====\n /** Router path the brand link navigates to when clicked. */\n readonly href = input<string>('/');\n\n /**\n * Secondary line under the brand text — typically the product or edition the\n * brand is qualifying (\"Developer Console\", \"Admin Workspace\"). Omit it and\n * the brand text stays a single line, centered against the logo exactly as\n * before; supply it and the two lines are centered against the logo as one\n * block, left-aligned with each other.\n */\n readonly description = input<string | null>(null);\n\n // ===== BASE PROPS =====\n readonly id = input<string | null>(null);\n readonly className = input<string>('');\n readonly ariaLabel = input<string | null>(null);\n\n // ===== COMPUTED =====\n readonly classes = computed(() => {\n return ['fk-nav-brand', this.className()].filter(Boolean).join(' ');\n });\n\n @HostBinding('class')\n get hostClass() {\n return this.classes();\n }\n}\n","<a\n class=\"fk-nav-brand__link\"\n [routerLink]=\"href()\"\n [attr.id]=\"id()\"\n [attr.aria-label]=\"ariaLabel()\"\n>\n <span class=\"fk-nav-brand__logo\">\n <ng-content select=\"[navLogo]\"></ng-content>\n </span>\n <span class=\"fk-nav-brand__body\">\n <span class=\"fk-nav-brand__text\">{{ brandText() }}</span>\n @if (description(); as brandDescription) {\n <span class=\"fk-nav-brand__description\">{{ brandDescription }}</span>\n }\n </span>\n</a>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -5,18 +5,28 @@ declare class NavBrandComponent {
|
|
|
5
5
|
readonly brandText: _angular_core.InputSignal<string>;
|
|
6
6
|
/** Router path the brand link navigates to when clicked. */
|
|
7
7
|
readonly href: _angular_core.InputSignal<string>;
|
|
8
|
+
/**
|
|
9
|
+
* Secondary line under the brand text — typically the product or edition the
|
|
10
|
+
* brand is qualifying ("Developer Console", "Admin Workspace"). Omit it and
|
|
11
|
+
* the brand text stays a single line, centered against the logo exactly as
|
|
12
|
+
* before; supply it and the two lines are centered against the logo as one
|
|
13
|
+
* block, left-aligned with each other.
|
|
14
|
+
*/
|
|
15
|
+
readonly description: _angular_core.InputSignal<string | null>;
|
|
8
16
|
readonly id: _angular_core.InputSignal<string | null>;
|
|
9
17
|
readonly className: _angular_core.InputSignal<string>;
|
|
10
18
|
readonly ariaLabel: _angular_core.InputSignal<string | null>;
|
|
11
19
|
readonly classes: _angular_core.Signal<string>;
|
|
12
20
|
get hostClass(): string;
|
|
13
21
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<NavBrandComponent, never>;
|
|
14
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<NavBrandComponent, "fk-nav-brand", never, { "brandText": { "alias": "brandText"; "required": true; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, ["[navLogo]"], true, never>;
|
|
22
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<NavBrandComponent, "fk-nav-brand", never, { "brandText": { "alias": "brandText"; "required": true; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, ["[navLogo]"], true, never>;
|
|
15
23
|
}
|
|
16
24
|
|
|
17
25
|
interface NavBrandProps {
|
|
18
26
|
/** Text displayed adjacent to the logo */
|
|
19
27
|
brandText: string;
|
|
28
|
+
/** Optional second line under the brand text (e.g. the product name) */
|
|
29
|
+
description?: string;
|
|
20
30
|
/** Optional link destination (defaults to '/') */
|
|
21
31
|
href?: string;
|
|
22
32
|
}
|