@frame-kit/ui-ng-patterns 0.2.5 → 0.2.7
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.
|
@@ -27,11 +27,11 @@ class MethodBadgeComponent {
|
|
|
27
27
|
return this.classes();
|
|
28
28
|
}
|
|
29
29
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MethodBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
30
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: MethodBadgeComponent, isStandalone: true, selector: "fk-method-badge", inputs: { method: { classPropertyName: "method", publicName: "method", isSignal: true, isRequired: true, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", 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: "<span\n class=\"fk-method-badge__label\"\n [id]=\"id()
|
|
30
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: MethodBadgeComponent, isStandalone: true, selector: "fk-method-badge", inputs: { method: { classPropertyName: "method", publicName: "method", isSignal: true, isRequired: true, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", 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: "<span\n class=\"fk-method-badge__label\"\n [attr.id]=\"id()\"\n [attr.aria-label]=\"ariaLabel()\"\n >{{ label() }}</span\n>\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;min-width:var(--fk-method-badge-min-width, 3rem);padding:var(--fk-method-badge-padding-block, 2px) var(--fk-method-badge-padding-inline, var(--fk-rhythm-2, .5rem));border-radius:var(--fk-method-badge-radius, var(--fk-radius-sm, .25rem));background-color:var(--fk-method-badge-bg, var(--fk-method-badge-bg-neutral, #d6d6d6));color:var(--fk-method-badge-color, var(--fk-color-text, #1f2d3d));font-family:var(--fk-method-badge-font-family, var(--fk-font-family-mono, ui-monospace, SFMono-Regular, Menlo, monospace));font-size:var(--fk-method-badge-font-size, .6875rem);font-weight:var(--fk-method-badge-font-weight, var(--fk-font-weight-bold, 700));letter-spacing:.05em;line-height:1.4;text-transform:uppercase}:host.fk-method-badge--get{background-color:var(--fk-method-badge-bg-get, #89ecac);color:var(--fk-method-badge-color-get, var(--fk-color-text, #1f2d3d))}:host.fk-method-badge--post{background-color:var(--fk-method-badge-bg-post, #94c4fd);color:var(--fk-method-badge-color-post, var(--fk-color-text, #1f2d3d))}:host.fk-method-badge--put{background-color:var(--fk-method-badge-bg-put, #fbb972);color:var(--fk-method-badge-color-put, var(--fk-color-text, #1f2d3d))}:host.fk-method-badge--patch{background-color:var(--fk-method-badge-bg-patch, #c8a7fb);color:var(--fk-method-badge-color-patch, var(--fk-color-text, #1f2d3d))}:host.fk-method-badge--delete{background-color:var(--fk-method-badge-bg-delete, #fb8d8d);color:var(--fk-method-badge-color-delete, var(--fk-color-text, #1f2d3d))}:host.fk-method-badge--head{background-color:var(--fk-method-badge-bg-head, var(--fk-method-badge-bg-neutral, #d6d6d6));color:var(--fk-method-badge-color-head, var(--fk-color-text, #1f2d3d))}:host.fk-method-badge--options{background-color:var(--fk-method-badge-bg-options, var(--fk-method-badge-bg-neutral, #d6d6d6));color:var(--fk-method-badge-color-options, var(--fk-color-text, #1f2d3d))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
31
31
|
}
|
|
32
32
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MethodBadgeComponent, decorators: [{
|
|
33
33
|
type: Component,
|
|
34
|
-
args: [{ selector: 'fk-method-badge', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n class=\"fk-method-badge__label\"\n [id]=\"id()
|
|
34
|
+
args: [{ selector: 'fk-method-badge', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n class=\"fk-method-badge__label\"\n [attr.id]=\"id()\"\n [attr.aria-label]=\"ariaLabel()\"\n >{{ label() }}</span\n>\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;min-width:var(--fk-method-badge-min-width, 3rem);padding:var(--fk-method-badge-padding-block, 2px) var(--fk-method-badge-padding-inline, var(--fk-rhythm-2, .5rem));border-radius:var(--fk-method-badge-radius, var(--fk-radius-sm, .25rem));background-color:var(--fk-method-badge-bg, var(--fk-method-badge-bg-neutral, #d6d6d6));color:var(--fk-method-badge-color, var(--fk-color-text, #1f2d3d));font-family:var(--fk-method-badge-font-family, var(--fk-font-family-mono, ui-monospace, SFMono-Regular, Menlo, monospace));font-size:var(--fk-method-badge-font-size, .6875rem);font-weight:var(--fk-method-badge-font-weight, var(--fk-font-weight-bold, 700));letter-spacing:.05em;line-height:1.4;text-transform:uppercase}:host.fk-method-badge--get{background-color:var(--fk-method-badge-bg-get, #89ecac);color:var(--fk-method-badge-color-get, var(--fk-color-text, #1f2d3d))}:host.fk-method-badge--post{background-color:var(--fk-method-badge-bg-post, #94c4fd);color:var(--fk-method-badge-color-post, var(--fk-color-text, #1f2d3d))}:host.fk-method-badge--put{background-color:var(--fk-method-badge-bg-put, #fbb972);color:var(--fk-method-badge-color-put, var(--fk-color-text, #1f2d3d))}:host.fk-method-badge--patch{background-color:var(--fk-method-badge-bg-patch, #c8a7fb);color:var(--fk-method-badge-color-patch, var(--fk-color-text, #1f2d3d))}:host.fk-method-badge--delete{background-color:var(--fk-method-badge-bg-delete, #fb8d8d);color:var(--fk-method-badge-color-delete, var(--fk-color-text, #1f2d3d))}:host.fk-method-badge--head{background-color:var(--fk-method-badge-bg-head, var(--fk-method-badge-bg-neutral, #d6d6d6));color:var(--fk-method-badge-color-head, var(--fk-color-text, #1f2d3d))}:host.fk-method-badge--options{background-color:var(--fk-method-badge-bg-options, var(--fk-method-badge-bg-neutral, #d6d6d6));color:var(--fk-method-badge-color-options, var(--fk-color-text, #1f2d3d))}\n"] }]
|
|
35
35
|
}], propDecorators: { method: [{ type: i0.Input, args: [{ isSignal: true, alias: "method", required: true }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], hostClass: [{
|
|
36
36
|
type: HostBinding,
|
|
37
37
|
args: ['class']
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"frame-kit-ui-ng-patterns-docs.mjs","sources":["../../../../packages/ui-ng-patterns/docs/method-badge/method-badge.component.ts","../../../../packages/ui-ng-patterns/docs/method-badge/method-badge.component.html","../../../../packages/ui-ng-patterns/docs/endpoint-link/endpoint-link.component.ts","../../../../packages/ui-ng-patterns/docs/endpoint-link/endpoint-link.component.html","../../../../packages/ui-ng-patterns/docs/frame-kit-ui-ng-patterns-docs.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n computed,\n HostBinding,\n input,\n} from '@angular/core';\n\nimport type { MethodBadgeMethod } from './method-badge.types';\n\n/**\n * Small rectangular badge showing an HTTP method label (e.g. `GET`, `POST`).\n *\n * Each method has its own hue so consumers can identify the verb in a dense\n * list. Background colors are exposed as CSS variables\n * (`--fk-method-badge-bg-get`, etc.) with defaults baked in so the component\n * renders correctly without a theme.\n */\n@Component({\n selector: 'fk-method-badge',\n standalone: true,\n imports: [],\n changeDetection: ChangeDetectionStrategy.OnPush,\n templateUrl: './method-badge.component.html',\n styleUrl: './method-badge.component.scss',\n})\nexport class MethodBadgeComponent {\n // ===== INPUTS =====\n readonly method = input.required<MethodBadgeMethod>();\n\n // ===== BASE PROPS =====\n readonly className = input<string>('');\n readonly id = input<string | null>(null);\n readonly ariaLabel = input<string | null>(null);\n\n // ===== COMPUTED =====\n readonly classes = computed(() =>\n ['fk-method-badge', `fk-method-badge--${this.method()}`, this.className()]\n .filter(Boolean)\n .join(' '),\n );\n\n readonly label = computed(() => this.method().toUpperCase());\n\n @HostBinding('class')\n get hostClass(): string {\n return this.classes();\n }\n}\n","<span\n class=\"fk-method-badge__label\"\n [id]=\"id()
|
|
1
|
+
{"version":3,"file":"frame-kit-ui-ng-patterns-docs.mjs","sources":["../../../../packages/ui-ng-patterns/docs/method-badge/method-badge.component.ts","../../../../packages/ui-ng-patterns/docs/method-badge/method-badge.component.html","../../../../packages/ui-ng-patterns/docs/endpoint-link/endpoint-link.component.ts","../../../../packages/ui-ng-patterns/docs/endpoint-link/endpoint-link.component.html","../../../../packages/ui-ng-patterns/docs/frame-kit-ui-ng-patterns-docs.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n computed,\n HostBinding,\n input,\n} from '@angular/core';\n\nimport type { MethodBadgeMethod } from './method-badge.types';\n\n/**\n * Small rectangular badge showing an HTTP method label (e.g. `GET`, `POST`).\n *\n * Each method has its own hue so consumers can identify the verb in a dense\n * list. Background colors are exposed as CSS variables\n * (`--fk-method-badge-bg-get`, etc.) with defaults baked in so the component\n * renders correctly without a theme.\n */\n@Component({\n selector: 'fk-method-badge',\n standalone: true,\n imports: [],\n changeDetection: ChangeDetectionStrategy.OnPush,\n templateUrl: './method-badge.component.html',\n styleUrl: './method-badge.component.scss',\n})\nexport class MethodBadgeComponent {\n // ===== INPUTS =====\n readonly method = input.required<MethodBadgeMethod>();\n\n // ===== BASE PROPS =====\n readonly className = input<string>('');\n readonly id = input<string | null>(null);\n readonly ariaLabel = input<string | null>(null);\n\n // ===== COMPUTED =====\n readonly classes = computed(() =>\n ['fk-method-badge', `fk-method-badge--${this.method()}`, this.className()]\n .filter(Boolean)\n .join(' '),\n );\n\n readonly label = computed(() => this.method().toUpperCase());\n\n @HostBinding('class')\n get hostClass(): string {\n return this.classes();\n }\n}\n","<span\n class=\"fk-method-badge__label\"\n [attr.id]=\"id()\"\n [attr.aria-label]=\"ariaLabel()\"\n >{{ label() }}</span\n>\n","import {\n ChangeDetectionStrategy,\n Component,\n computed,\n HostBinding,\n inject,\n input,\n} from '@angular/core';\nimport { RouterLink, RouterLinkActive } from '@angular/router';\n\nimport { AppShellComponent } from '@frame-kit/ui-ng/layouts/app-shell';\nimport { MethodBadgeComponent } from '../method-badge/method-badge.component';\nimport type { MethodBadgeMethod } from '../method-badge/method-badge.types';\n\n/**\n * Sidebar/list item for an API endpoint in developer documentation.\n *\n * Renders a leading `fk-method-badge` followed by the endpoint label as a\n * single clickable router link. Used to list operations (e.g. \"GET List\n * permissions\", \"POST Create identity\") in a documentation sidebar or any\n * denser endpoint index.\n *\n * Active state is driven by `routerLinkActive`.\n *\n * When rendered inside an `fk-app-shell`, clicks also call `dismissSidenav`\n * on the ancestor shell — this closes the mobile overlay so the user lands\n * directly on the selected endpoint. On desktop it's a no-op.\n */\n@Component({\n selector: 'fk-endpoint-link',\n standalone: true,\n imports: [RouterLink, RouterLinkActive, MethodBadgeComponent],\n changeDetection: ChangeDetectionStrategy.OnPush,\n templateUrl: './endpoint-link.component.html',\n styleUrl: './endpoint-link.component.scss',\n})\nexport class EndpointLinkComponent {\n private readonly shell = inject(AppShellComponent, { optional: true });\n\n // ===== INPUTS =====\n readonly method = input.required<MethodBadgeMethod>();\n readonly label = input.required<string>();\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n readonly routerLink = input.required<string | any[]>();\n\n /**\n * Whether to require an exact URL match for the active state. Defaults to\n * false — each endpoint has a unique final path segment so prefix matching\n * resolves to the same thing in practice.\n */\n readonly exact = input<boolean>(false);\n\n // ===== BASE PROPS =====\n readonly className = input<string>('');\n\n // ===== COMPUTED =====\n readonly classes = computed(() =>\n ['fk-endpoint-link', this.className()].filter(Boolean).join(' '),\n );\n\n readonly activeOptions = computed(() => ({ exact: this.exact() }));\n\n @HostBinding('class')\n get hostClass(): string {\n return this.classes();\n }\n\n protected dismiss(): void {\n this.shell?.dismissSidenav();\n }\n}\n","<a\n class=\"fk-endpoint-link__anchor\"\n [routerLink]=\"routerLink()\"\n routerLinkActive=\"fk-endpoint-link__anchor--active\"\n [routerLinkActiveOptions]=\"activeOptions()\"\n (click)=\"$event.stopPropagation(); dismiss()\"\n>\n <fk-method-badge [method]=\"method()\" class=\"fk-endpoint-link__badge\" />\n <span class=\"fk-endpoint-link__label\">{{ label() }}</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
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@frame-kit/ui-ng-patterns",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.7",
|
|
4
4
|
"description": "Opinionated, dashboard-ready Angular component patterns composed from @frame-kit/ui-ng.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
"@angular/forms": "^21.2.0",
|
|
18
18
|
"@angular/platform-browser": "^21.2.0",
|
|
19
19
|
"@angular/router": "^21.2.0",
|
|
20
|
-
"@frame-kit/ui-ng": "0.2.
|
|
20
|
+
"@frame-kit/ui-ng": "0.2.7",
|
|
21
21
|
"rxjs": "^7.0.0"
|
|
22
22
|
},
|
|
23
23
|
"sideEffects": false,
|