@frame-kit/ui-ng 0.0.1

package/fesm2022/frame-kit-ui-ng-ui-sidenav-link.mjs

@@ -0,0 +1,42 @@
+import * as i0 from '@angular/core';
+import { input, inject, computed, HostBinding, ChangeDetectionStrategy, Component } from '@angular/core';
+import { RouterLink, RouterLinkActive } from '@angular/router';
+import { IconComponent } from '@frame-kit/ui-ng/core/icon';
+import { TooltipDirective } from '@frame-kit/ui-ng/directives/tooltip';
+import { AppShellComponent } from '@frame-kit/ui-ng/layouts/app-shell';
+
+class SidenavLinkComponent {
+    /** Optional icon name shown to the leading side of the link label. */
+    icon = input(null, ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    /** Size of the leading icon. */
+    iconSize = input('sm', ...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
+    /** Link text displayed next to the icon and used as a tooltip when the sidenav is collapsed. */
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Router path the link navigates to; when null the element renders as a non-navigable button. */
+    routerLink = input(null, ...(ngDevMode ? [{ debugName: "routerLink" }] : /* istanbul ignore next */ []));
+    /** When true, the active class is applied only on an exact route match. */
+    exact = input(false, ...(ngDevMode ? [{ debugName: "exact" }] : /* istanbul ignore next */ []));
+    shell = inject(AppShellComponent, { optional: true });
+    isCollapsed = computed(() => this.shell?.isCollapsed() ?? false, ...(ngDevMode ? [{ debugName: "isCollapsed" }] : /* istanbul ignore next */ []));
+    hostClass = 'fk-sidenav-link';
+    /** Dismisses the parent sidenav on mobile when the link is activated. */
+    dismiss() {
+        this.shell?.dismissSidenav();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SidenavLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: SidenavLinkComponent, isStandalone: true, selector: "fk-sidenav-link", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, exact: { classPropertyName: "exact", publicName: "exact", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "@if (routerLink()) {\n  <a\n    class=\"fk-sidenav-link__anchor\"\n    [routerLink]=\"routerLink()\"\n    routerLinkActive=\"fk-sidenav-link__anchor--active\"\n    [routerLinkActiveOptions]=\"{ exact: exact() }\"\n    [attr.aria-label]=\"isCollapsed() ? label() : null\"\n    [fkTooltip]=\"label()\"\n    [fkTooltipDisabled]=\"!isCollapsed()\"\n    fkTooltipPosition=\"right\"\n    (click)=\"dismiss()\"\n  >\n    @if (icon()) {\n      <fk-icon [name]=\"icon()!\" [size]=\"iconSize()\" />\n    }\n    @if (!isCollapsed()) {\n      <span class=\"fk-sidenav-link__label\">{{ label() }}</span>\n    }\n  </a>\n} @else {\n  <button\n    class=\"fk-sidenav-link__anchor\"\n    type=\"button\"\n    [attr.aria-label]=\"isCollapsed() ? label() : null\"\n    [fkTooltip]=\"label()\"\n    [fkTooltipDisabled]=\"!isCollapsed()\"\n    fkTooltipPosition=\"right\"\n    (click)=\"dismiss()\"\n  >\n    @if (icon()) {\n      <fk-icon [name]=\"icon()!\" [size]=\"iconSize()\" />\n    }\n    @if (!isCollapsed()) {\n      <span class=\"fk-sidenav-link__label\">{{ label() }}</span>\n    }\n  </button>\n}\n", styles: [".fk-sidenav-link{display:block}.fk-sidenav-link__anchor{display:flex;align-items:center;gap:var(--fk-sidenav-link-gap, var(--fk-rhythm-2, .5rem));width:100%;padding:var(--fk-sidenav-link-padding-block, var(--fk-rhythm-2, .5rem)) var(--fk-sidenav-link-padding-inline, var(--fk-rhythm-3, .75rem));border:none;border-radius:var(--fk-sidenav-link-radius, var(--fk-radius-md, .5rem));background:var(--fk-sidenav-link-bg, transparent);font-family:var(--fk-sidenav-link-font-family, var(--fk-font-family-base));font-size:var(--fk-sidenav-link-font-size, .9375rem);color:var(--fk-sidenav-link-color, var(--fk-color-text, #1f2d3d));text-align:left;text-decoration:none;white-space:nowrap;overflow:hidden;cursor:pointer;transition:background-color .15s ease}.fk-sidenav-link__anchor:hover{background-color:var(--fk-sidenav-link-bg-hover, var(--fk-color-surface-muted, #f7f9fb));color:var(--fk-sidenav-link-color-hover, var(--fk-color-primary, #0a84ff))}.fk-sidenav-link__anchor:focus-visible{outline:none;box-shadow:var(--fk-sidenav-link-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18)))}.fk-sidenav-link__anchor--active,.fk-sidenav-link__anchor--active:hover{font-weight:var(--fk-sidenav-link-font-weight-active, var(--fk-font-weight-semibold, 600));color:var(--fk-sidenav-link-color-active, var(--fk-color-primary, #0a84ff));background-color:var(--fk-sidenav-link-bg-active, var(--fk-color-surface-muted, #f7f9fb))}.fk-app-shell--collapsed .fk-sidenav-link__anchor{justify-content:center;padding:var(--fk-sidenav-link-collapsed-padding, var(--fk-rhythm-2, .5rem))}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: IconComponent, selector: "fk-icon", inputs: ["name", "size", "color", "className", "id", "ariaLabel", "ariaHidden"] }, { kind: "directive", type: TooltipDirective, selector: "[fkTooltip]", inputs: ["fkTooltip", "fkTooltipPosition", "fkTooltipOffset", "fkTooltipShowDelay", "fkTooltipHideDelay", "fkTooltipDisabled", "fkTooltipClassName"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SidenavLinkComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fk-sidenav-link', standalone: true, imports: [RouterLink, RouterLinkActive, IconComponent, TooltipDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (routerLink()) {\n  <a\n    class=\"fk-sidenav-link__anchor\"\n    [routerLink]=\"routerLink()\"\n    routerLinkActive=\"fk-sidenav-link__anchor--active\"\n    [routerLinkActiveOptions]=\"{ exact: exact() }\"\n    [attr.aria-label]=\"isCollapsed() ? label() : null\"\n    [fkTooltip]=\"label()\"\n    [fkTooltipDisabled]=\"!isCollapsed()\"\n    fkTooltipPosition=\"right\"\n    (click)=\"dismiss()\"\n  >\n    @if (icon()) {\n      <fk-icon [name]=\"icon()!\" [size]=\"iconSize()\" />\n    }\n    @if (!isCollapsed()) {\n      <span class=\"fk-sidenav-link__label\">{{ label() }}</span>\n    }\n  </a>\n} @else {\n  <button\n    class=\"fk-sidenav-link__anchor\"\n    type=\"button\"\n    [attr.aria-label]=\"isCollapsed() ? label() : null\"\n    [fkTooltip]=\"label()\"\n    [fkTooltipDisabled]=\"!isCollapsed()\"\n    fkTooltipPosition=\"right\"\n    (click)=\"dismiss()\"\n  >\n    @if (icon()) {\n      <fk-icon [name]=\"icon()!\" [size]=\"iconSize()\" />\n    }\n    @if (!isCollapsed()) {\n      <span class=\"fk-sidenav-link__label\">{{ label() }}</span>\n    }\n  </button>\n}\n", styles: [".fk-sidenav-link{display:block}.fk-sidenav-link__anchor{display:flex;align-items:center;gap:var(--fk-sidenav-link-gap, var(--fk-rhythm-2, .5rem));width:100%;padding:var(--fk-sidenav-link-padding-block, var(--fk-rhythm-2, .5rem)) var(--fk-sidenav-link-padding-inline, var(--fk-rhythm-3, .75rem));border:none;border-radius:var(--fk-sidenav-link-radius, var(--fk-radius-md, .5rem));background:var(--fk-sidenav-link-bg, transparent);font-family:var(--fk-sidenav-link-font-family, var(--fk-font-family-base));font-size:var(--fk-sidenav-link-font-size, .9375rem);color:var(--fk-sidenav-link-color, var(--fk-color-text, #1f2d3d));text-align:left;text-decoration:none;white-space:nowrap;overflow:hidden;cursor:pointer;transition:background-color .15s ease}.fk-sidenav-link__anchor:hover{background-color:var(--fk-sidenav-link-bg-hover, var(--fk-color-surface-muted, #f7f9fb));color:var(--fk-sidenav-link-color-hover, var(--fk-color-primary, #0a84ff))}.fk-sidenav-link__anchor:focus-visible{outline:none;box-shadow:var(--fk-sidenav-link-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18)))}.fk-sidenav-link__anchor--active,.fk-sidenav-link__anchor--active:hover{font-weight:var(--fk-sidenav-link-font-weight-active, var(--fk-font-weight-semibold, 600));color:var(--fk-sidenav-link-color-active, var(--fk-color-primary, #0a84ff));background-color:var(--fk-sidenav-link-bg-active, var(--fk-color-surface-muted, #f7f9fb))}.fk-app-shell--collapsed .fk-sidenav-link__anchor{justify-content:center;padding:var(--fk-sidenav-link-collapsed-padding, var(--fk-rhythm-2, .5rem))}\n"] }]
+        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], routerLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLink", required: false }] }], exact: [{ type: i0.Input, args: [{ isSignal: true, alias: "exact", required: false }] }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SidenavLinkComponent };
+//# sourceMappingURL=frame-kit-ui-ng-ui-sidenav-link.mjs.map

package/fesm2022/frame-kit-ui-ng-ui-sidenav-link.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"frame-kit-ui-ng-ui-sidenav-link.mjs","sources":["../../../../packages/ui-ng/ui/sidenav-link/sidenav-link.component.ts","../../../../packages/ui-ng/ui/sidenav-link/sidenav-link.component.html","../../../../packages/ui-ng/ui/sidenav-link/frame-kit-ui-ng-ui-sidenav-link.ts"],"sourcesContent":["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 { IconComponent } from '@frame-kit/ui-ng/core/icon';\nimport type { IconSize } from '@frame-kit/ui-ng/core/icon';\nimport { TooltipDirective } from '@frame-kit/ui-ng/directives/tooltip';\nimport { AppShellComponent } from '@frame-kit/ui-ng/layouts/app-shell';\n\n@Component({\n  selector: 'fk-sidenav-link',\n  standalone: true,\n  imports: [RouterLink, RouterLinkActive, IconComponent, TooltipDirective],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  templateUrl: './sidenav-link.component.html',\n  styleUrl: './sidenav-link.component.scss',\n})\nexport class SidenavLinkComponent {\n  /** Optional icon name shown to the leading side of the link label. */\n  readonly icon = input<string | null>(null);\n  /** Size of the leading icon. */\n  readonly iconSize = input<IconSize>('sm');\n  /** Link text displayed next to the icon and used as a tooltip when the sidenav is collapsed. */\n  readonly label = input.required<string>();\n  /** Router path the link navigates to; when null the element renders as a non-navigable button. */\n  readonly routerLink = input<string | string[] | null>(null);\n  /** When true, the active class is applied only on an exact route match. */\n  readonly exact = input<boolean>(false);\n\n  private readonly shell = inject(AppShellComponent, { optional: true });\n\n  readonly isCollapsed = computed(() => this.shell?.isCollapsed() ?? false);\n\n  @HostBinding('class')\n  readonly hostClass = 'fk-sidenav-link';\n\n  /** Dismisses the parent sidenav on mobile when the link is activated. */\n  dismiss(): void {\n    this.shell?.dismissSidenav();\n  }\n}\n","@if (routerLink()) {\n  <a\n    class=\"fk-sidenav-link__anchor\"\n    [routerLink]=\"routerLink()\"\n    routerLinkActive=\"fk-sidenav-link__anchor--active\"\n    [routerLinkActiveOptions]=\"{ exact: exact() }\"\n    [attr.aria-label]=\"isCollapsed() ? label() : null\"\n    [fkTooltip]=\"label()\"\n    [fkTooltipDisabled]=\"!isCollapsed()\"\n    fkTooltipPosition=\"right\"\n    (click)=\"dismiss()\"\n  >\n    @if (icon()) {\n      <fk-icon [name]=\"icon()!\" [size]=\"iconSize()\" />\n    }\n    @if (!isCollapsed()) {\n      <span class=\"fk-sidenav-link__label\">{{ label() }}</span>\n    }\n  </a>\n} @else {\n  <button\n    class=\"fk-sidenav-link__anchor\"\n    type=\"button\"\n    [attr.aria-label]=\"isCollapsed() ? label() : null\"\n    [fkTooltip]=\"label()\"\n    [fkTooltipDisabled]=\"!isCollapsed()\"\n    fkTooltipPosition=\"right\"\n    (click)=\"dismiss()\"\n  >\n    @if (icon()) {\n      <fk-icon [name]=\"icon()!\" [size]=\"iconSize()\" />\n    }\n    @if (!isCollapsed()) {\n      <span class=\"fk-sidenav-link__label\">{{ label() }}</span>\n    }\n  </button>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;MAuBa,oBAAoB,CAAA;;AAEtB,IAAA,IAAI,GAAG,KAAK,CAAgB,IAAI,2EAAC;;AAEjC,IAAA,QAAQ,GAAG,KAAK,CAAW,IAAI,+EAAC;;AAEhC,IAAA,KAAK,GAAG,KAAK,CAAC,QAAQ,2EAAU;;AAEhC,IAAA,UAAU,GAAG,KAAK,CAA2B,IAAI,iFAAC;;AAElD,IAAA,KAAK,GAAG,KAAK,CAAU,KAAK,4EAAC;IAErB,KAAK,GAAG,MAAM,CAAC,iBAAiB,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;AAE7D,IAAA,WAAW,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,KAAK,EAAE,WAAW,EAAE,IAAI,KAAK,kFAAC;IAGhE,SAAS,GAAG,iBAAiB;;IAGtC,OAAO,GAAA;AACL,QAAA,IAAI,CAAC,KAAK,EAAE,cAAc,EAAE;IAC9B;uGAtBW,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAApB,oBAAoB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,gBAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECvBjC,okCAqCA,EAAA,MAAA,EAAA,CAAA,2iDAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDnBY,UAAU,oOAAE,gBAAgB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,uBAAA,EAAA,kBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,gBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,kBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,aAAa,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,MAAA,EAAA,OAAA,EAAA,WAAA,EAAA,IAAA,EAAA,WAAA,EAAA,YAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,gBAAgB,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,WAAA,EAAA,mBAAA,EAAA,iBAAA,EAAA,oBAAA,EAAA,oBAAA,EAAA,mBAAA,EAAA,oBAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAK5D,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBARhC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,iBAAiB,EAAA,UAAA,EACf,IAAI,EAAA,OAAA,EACP,CAAC,UAAU,EAAE,gBAAgB,EAAE,aAAa,EAAE,gBAAgB,CAAC,EAAA,eAAA,EACvD,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,okCAAA,EAAA,MAAA,EAAA,CAAA,2iDAAA,CAAA,EAAA;;sBAoB9C,WAAW;uBAAC,OAAO;;;AEvCtB;;AAEG;;;;"}