angular-visuals 0.2.0 → 0.2.2
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.
|
@@ -3,7 +3,9 @@ import { DOCUMENT, isPlatformBrowser, CommonModule } from '@angular/common';
|
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
4
|
import { InjectionToken, makeEnvironmentProviders, inject, DestroyRef, PLATFORM_ID, signal, computed, effect, Injectable, input, booleanAttribute, Component, HostBinding, ViewEncapsulation, output, ElementRef, Renderer2, contentChild, linkedSignal, HostListener, numberAttribute, ChangeDetectionStrategy, Directive, ViewChild, Injector, Optional, Self, untracked, forwardRef, model, contentChildren, Input } from '@angular/core';
|
|
5
5
|
import { DomSanitizer } from '@angular/platform-browser';
|
|
6
|
-
import {
|
|
6
|
+
import { toSignal } from '@angular/core/rxjs-interop';
|
|
7
|
+
import { Router, NavigationEnd, RouterLink, RouterLinkActive } from '@angular/router';
|
|
8
|
+
import { filter } from 'rxjs';
|
|
7
9
|
import * as i3 from '@angular/cdk/overlay';
|
|
8
10
|
import { Overlay, OverlayModule } from '@angular/cdk/overlay';
|
|
9
11
|
import { ComponentPortal } from '@angular/cdk/portal';
|
|
@@ -356,6 +358,7 @@ class AvNavLink {
|
|
|
356
358
|
config = inject(VISUALS_CONFIG);
|
|
357
359
|
elementRef = inject((ElementRef));
|
|
358
360
|
themeService = inject(ThemeService);
|
|
361
|
+
router = inject(Router);
|
|
359
362
|
active = input(false, { ...(ngDevMode ? { debugName: "active" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
360
363
|
badge = input(null, /* @ts-ignore */
|
|
361
364
|
...(ngDevMode ? [{ debugName: "badge" }] : /* istanbul ignore next */ []));
|
|
@@ -364,7 +367,9 @@ class AvNavLink {
|
|
|
364
367
|
disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
365
368
|
href = input('', /* @ts-ignore */
|
|
366
369
|
...(ngDevMode ? [{ debugName: "href" }] : /* istanbul ignore next */ []));
|
|
367
|
-
// route can be string or link params array
|
|
370
|
+
// route/path can be string or link params array; path is the common API for router navigation
|
|
371
|
+
path = input(null, /* @ts-ignore */
|
|
372
|
+
...(ngDevMode ? [{ debugName: "path" }] : /* istanbul ignore next */ []));
|
|
368
373
|
route = input(null, /* @ts-ignore */
|
|
369
374
|
...(ngDevMode ? [{ debugName: "route" }] : /* istanbul ignore next */ []));
|
|
370
375
|
icon = input('', /* @ts-ignore */
|
|
@@ -404,6 +409,28 @@ class AvNavLink {
|
|
|
404
409
|
return this.target() === '_blank' ? 'noopener noreferrer' : null;
|
|
405
410
|
}, /* @ts-ignore */
|
|
406
411
|
...(ngDevMode ? [{ debugName: "relValue" }] : /* istanbul ignore next */ []));
|
|
412
|
+
routerEvents = toSignal(this.router.events.pipe(filter((e) => e instanceof NavigationEnd)));
|
|
413
|
+
isRouterActive = signal(false, /* @ts-ignore */
|
|
414
|
+
...(ngDevMode ? [{ debugName: "isRouterActive" }] : /* istanbul ignore next */ []));
|
|
415
|
+
resolvedRoute = computed(() => {
|
|
416
|
+
return this.path() ?? this.route() ?? null;
|
|
417
|
+
}, /* @ts-ignore */
|
|
418
|
+
...(ngDevMode ? [{ debugName: "resolvedRoute" }] : /* istanbul ignore next */ []));
|
|
419
|
+
isCurrentRouteActive = computed(() => {
|
|
420
|
+
this.routerEvents();
|
|
421
|
+
const route = this.resolvedRoute();
|
|
422
|
+
if (!route)
|
|
423
|
+
return false;
|
|
424
|
+
const target = Array.isArray(route) ? this.router.createUrlTree(route).toString() : route;
|
|
425
|
+
const options = this.routerActiveOptions();
|
|
426
|
+
const exact = options['exact'] ?? true;
|
|
427
|
+
return this.router.isActive(target, exact);
|
|
428
|
+
}, /* @ts-ignore */
|
|
429
|
+
...(ngDevMode ? [{ debugName: "isCurrentRouteActive" }] : /* istanbul ignore next */ []));
|
|
430
|
+
isActive = computed(() => {
|
|
431
|
+
return this.active() || this.isRouterActive() || this.isCurrentRouteActive();
|
|
432
|
+
}, /* @ts-ignore */
|
|
433
|
+
...(ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []));
|
|
407
434
|
isExternal = computed(() => {
|
|
408
435
|
const h = this.href();
|
|
409
436
|
if (!h)
|
|
@@ -425,12 +452,12 @@ class AvNavLink {
|
|
|
425
452
|
}));
|
|
426
453
|
}
|
|
427
454
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvNavLink, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
428
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AvNavLink, isStandalone: true, selector: "av-nav-link", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, route: { classPropertyName: "route", publicName: "route", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, rel: { classPropertyName: "rel", publicName: "rel", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, routerActiveClass: { classPropertyName: "routerActiveClass", publicName: "routerActiveClass", isSignal: true, isRequired: false, transformFunction: null }, routerActiveOptions: { classPropertyName: "routerActiveOptions", publicName: "routerActiveOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected" }, ngImport: i0, template: "@if (!disabled() && (route() || (href() && !isExternal()))) {\n <a\n class=\"av-nav-link\"\n [ngStyle]=\"themeVars()\"\n [class.av-nav-link--active]=\"active()\"\n [attr.aria-current]=\"active() ? 'page' : null\"\n [routerLink]=\"route() ? route() : href()\"\n [routerLinkActive]=\"routerActiveClass()\"\n [routerLinkActiveOptions]=\"routerActiveOptions()\"\n [attr.rel]=\"relValue()\"\n [attr.target]=\"target() || null\"\n (click)=\"handleClick($event)\"\n >\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </a>\n} @else {\n @if (href() && !disabled()) {\n <a\n class=\"av-nav-link\"\n [ngStyle]=\"themeVars()\"\n [class.av-nav-link--active]=\"active()\"\n [attr.aria-current]=\"active() ? 'page' : null\"\n [attr.href]=\"href()\"\n [attr.rel]=\"relValue()\"\n [attr.target]=\"target() || null\"\n (click)=\"handleClick($event)\"\n >\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </a>\n } @else {\n <button\n type=\"button\"\n class=\"av-nav-link\"\n [ngStyle]=\"themeVars()\"\n [class.av-nav-link--active]=\"active()\"\n [class.av-nav-link--disabled]=\"disabled()\"\n [disabled]=\"disabled()\"\n [attr.aria-current]=\"active() ? 'page' : null\"\n (click)=\"handleClick($event)\"\n >\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </button>\n }\n}\n\n<ng-template #content>\n @if (icon()) {\n <span class=\"av-nav-link__icon\" av-icon [name]=\"icon()\" size=\"md\"></span>\n }\n\n <span class=\"av-nav-link__body\">\n @if (label()) {\n <span class=\"av-nav-link__label\">{{ label() }}</span>\n } @else {\n <span class=\"av-nav-link__label\">\n <ng-content></ng-content>\n </span>\n }\n\n @if (description()) {\n <span class=\"av-nav-link__description\">{{ description() }}</span>\n }\n </span>\n\n @if (badge() !== null && badge() !== undefined) {\n <span class=\"av-nav-link__badge\">{{ badge() }}</span>\n }\n</ng-template>\n", styles: [":host{display:block;min-width:0}.av-nav-link{align-items:center;background:transparent;border:1px solid transparent;border-radius:var(--av-radius-md);box-sizing:border-box;color:var(--av-nav-link-text, var(--av-color-text-muted));cursor:pointer;display:flex;font:inherit;gap:.625rem;min-height:2.5rem;min-width:0;padding:var(--av-nav-link-padding-y, .625rem) var(--av-nav-link-padding-x, .75rem);padding-left:var(--av-nav-link-padding-left, var(--av-nav-link-padding-x, .75rem));text-align:left;text-decoration:none;transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;width:100%}.av-nav-link:hover:not(.av-nav-link--disabled){background:var(--av-nav-link-accent-soft);color:var(--av-nav-link-accent-hover)}.av-nav-link:active:not(.av-nav-link--disabled){transform:scale(.99)}.av-nav-link:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--av-nav-link-accent) 24%,transparent);outline:none}.av-nav-link--active,.av-nav-link.active{background:var(--av-nav-link-accent-soft);border-color:color-mix(in srgb,var(--av-nav-link-accent) 28%,transparent);color:var(--av-nav-link-text-active);font-weight:700}:host(.active) .av-nav-link{background:var(--av-nav-link-accent-soft);border-color:color-mix(in srgb,var(--av-nav-link-accent) 28%,transparent);color:var(--av-nav-link-text-active);font-weight:700}.av-nav-link--disabled{cursor:not-allowed;opacity:.52}.av-nav-link__icon{color:currentColor;flex:0 0 auto}.av-nav-link__body{display:grid;flex:1;gap:.125rem;min-width:0}.av-nav-link__label,.av-nav-link__description{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.av-nav-link__label{font-size:.875rem;line-height:1.25}.av-nav-link__description{color:var(--av-color-text-subtle);font-size:.75rem;line-height:1.2}.av-nav-link__badge{background:var(--av-nav-link-accent);border-radius:var(--av-radius-full);color:var(--av-white);flex:0 0 auto;font-size:.6875rem;font-weight:700;line-height:1;min-width:1.25rem;padding:.25rem .375rem;text-align:center}:host-context(av-bottomnav){align-items:center;display:flex;flex:1 1 0;justify-content:center;min-width:0}:host-context(av-bottomnav) .av-nav-link{align-items:center;border-color:transparent;border-radius:var(--av-bottomnav-item-radius, var(--av-radius-md));flex-direction:column;gap:.25rem;justify-content:center;min-height:var(--av-bottomnav-item-size, 3.35rem);overflow:visible;padding:.45rem .35rem;position:relative;text-align:center}:host-context(av-bottomnav) .av-nav-link:hover:not(.av-nav-link--disabled){background:color-mix(in srgb,var(--av-nav-link-accent) 10%,transparent)}:host-context(av-bottomnav) .av-nav-link:active:not(.av-nav-link--disabled){transform:scale(.98)}:host-context(av-bottomnav) .av-nav-link--active,:host-context(av-bottomnav) .av-nav-link.active,:host-context(av-bottomnav):host(.active) .av-nav-link{background:transparent;border-color:transparent;color:var(--av-nav-link-accent);font-weight:700}:host-context(av-bottomnav) .av-nav-link__icon{font-size:var(--av-bottomnav-icon-size, 1.2rem)}:host-context(av-bottomnav) .av-nav-link__body{display:block;flex:0 1 auto;max-width:100%}:host-context(av-bottomnav) .av-nav-link__label{font-size:.6875rem;line-height:1.1;max-width:100%}:host-context(av-bottomnav) .av-nav-link__description{display:none}:host-context(av-bottomnav) .av-nav-link__badge{font-size:.625rem;min-width:1rem;padding:.1875rem .3125rem;position:absolute;right:max(.35rem,calc(50% - 1.55rem));top:.25rem}:host-context(.av-bottomnav--highlight-normal) .av-nav-link--active,:host-context(.av-bottomnav--highlight-normal) .av-nav-link.active,:host-context(.av-bottomnav--highlight-normal):host(.active) .av-nav-link{background:var(--av-nav-link-accent-soft);border-color:color-mix(in srgb,var(--av-nav-link-accent) 18%,transparent);transform:translateY(-.125rem)}:host-context(.av-bottomnav--highlight-static) .av-nav-link--active,:host-context(.av-bottomnav--highlight-static) .av-nav-link.active,:host-context(.av-bottomnav--highlight-static):host(.active) .av-nav-link{background:var(--av-nav-link-accent-soft);border-color:color-mix(in srgb,var(--av-nav-link-accent) 18%,transparent);transform:none}:host-context(.av-bottomnav--highlight-floating-circle){align-items:center}:host-context(.av-bottomnav--highlight-floating-circle) .av-nav-link__body{display:none}:host-context(.av-bottomnav--highlight-floating-circle) .av-nav-link{border-radius:var(--av-radius-full);min-height:var(--av-bottomnav-floating-size, 3.4rem);padding:0;width:var(--av-bottomnav-floating-size, 3.4rem)}:host-context(.av-bottomnav--highlight-floating-circle) .av-nav-link--active,:host-context(.av-bottomnav--highlight-floating-circle) .av-nav-link.active,:host-context(.av-bottomnav--highlight-floating-circle):host(.active) .av-nav-link{background:var(--av-nav-link-accent);box-shadow:0 .875rem 1.8rem color-mix(in srgb,var(--av-nav-link-accent) 35%,transparent);color:var(--av-white);transform:translateY(-.85rem)}:host-context(.av-bottomnav--highlight-inline-label) .av-nav-link{border-radius:var(--av-radius-full);flex-direction:row;gap:0;min-height:2.65rem;padding:.55rem .7rem;width:auto}:host-context(.av-bottomnav--highlight-inline-label) .av-nav-link__body{margin-left:0;max-width:0;opacity:0;overflow:hidden;transition:margin-left .18s ease,max-width .18s ease,opacity .14s ease}:host-context(.av-bottomnav--highlight-inline-label) .av-nav-link--active,:host-context(.av-bottomnav--highlight-inline-label) .av-nav-link.active,:host-context(.av-bottomnav--highlight-inline-label):host(.active) .av-nav-link{background:var(--av-nav-link-accent-soft);border-color:color-mix(in srgb,var(--av-nav-link-accent) 18%,transparent);padding-inline:.75rem .9rem}:host-context(.av-bottomnav--highlight-inline-label) .av-nav-link--active .av-nav-link__body,:host-context(.av-bottomnav--highlight-inline-label) .av-nav-link.active .av-nav-link__body,:host-context(.av-bottomnav--highlight-inline-label):host(.active) .av-nav-link .av-nav-link__body{margin-left:.35rem;max-width:7rem;opacity:1}:host-context(.av-bottomnav--highlight-underline) .av-nav-link:after{background:var(--av-nav-link-accent);border-radius:var(--av-radius-full);bottom:.25rem;content:\"\";height:.15rem;left:50%;opacity:0;position:absolute;transform:translate(-50%) scaleX(.55);transition:opacity .18s ease,transform .18s ease;width:1.65rem}:host-context(.av-bottomnav--highlight-underline) .av-nav-link--active:after,:host-context(.av-bottomnav--highlight-underline) .av-nav-link.active:after,:host-context(.av-bottomnav--highlight-underline):host(.active) .av-nav-link:after{opacity:1;transform:translate(-50%) scaleX(1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: AvIcon, selector: "span[av-icon], i[av-icon]", inputs: ["name", "size"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
|
|
455
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AvNavLink, isStandalone: true, selector: "av-nav-link", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, path: { classPropertyName: "path", publicName: "path", isSignal: true, isRequired: false, transformFunction: null }, route: { classPropertyName: "route", publicName: "route", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, rel: { classPropertyName: "rel", publicName: "rel", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, routerActiveClass: { classPropertyName: "routerActiveClass", publicName: "routerActiveClass", isSignal: true, isRequired: false, transformFunction: null }, routerActiveOptions: { classPropertyName: "routerActiveOptions", publicName: "routerActiveOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected" }, ngImport: i0, template: "@if (!disabled() && (resolvedRoute() || (href() && !isExternal()))) {\n <a\n class=\"av-nav-link\"\n [ngStyle]=\"themeVars()\"\n [class.av-nav-link--active]=\"isActive()\"\n [attr.aria-current]=\"isActive() ? 'page' : null\"\n [routerLink]=\"resolvedRoute() ?? href()\"\n [routerLinkActive]=\"routerActiveClass()\"\n [routerLinkActiveOptions]=\"routerActiveOptions()\"\n (isActiveChange)=\"isRouterActive.set($event)\"\n [attr.rel]=\"relValue()\"\n [attr.target]=\"target() || null\"\n (click)=\"handleClick($event)\"\n >\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </a>\n} @else {\n @if (href() && !disabled()) {\n <a\n class=\"av-nav-link\"\n [ngStyle]=\"themeVars()\"\n [class.av-nav-link--active]=\"isActive()\"\n [attr.aria-current]=\"isActive() ? 'page' : null\"\n [attr.href]=\"href()\"\n [attr.rel]=\"relValue()\"\n [attr.target]=\"target() || null\"\n (click)=\"handleClick($event)\"\n >\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </a>\n } @else {\n <button\n type=\"button\"\n class=\"av-nav-link\"\n [ngStyle]=\"themeVars()\"\n [class.av-nav-link--active]=\"isActive()\"\n [class.av-nav-link--disabled]=\"disabled()\"\n [disabled]=\"disabled()\"\n [attr.aria-current]=\"isActive() ? 'page' : null\"\n (click)=\"handleClick($event)\"\n >\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </button>\n }\n}\n\n<ng-template #content>\n @if (icon()) {\n <span class=\"av-nav-link__icon\" av-icon [name]=\"icon()\" size=\"md\"></span>\n }\n\n <span class=\"av-nav-link__body\">\n @if (label()) {\n <span class=\"av-nav-link__label\">{{ label() }}</span>\n } @else {\n <span class=\"av-nav-link__label\">\n <ng-content></ng-content>\n </span>\n }\n\n @if (description()) {\n <span class=\"av-nav-link__description\">{{ description() }}</span>\n }\n </span>\n\n @if (badge() !== null && badge() !== undefined) {\n <span class=\"av-nav-link__badge\">{{ badge() }}</span>\n }\n</ng-template>\n", styles: [":host{display:block;min-width:0}.av-nav-link{align-items:center;background:transparent;border:1px solid transparent;border-radius:var(--av-radius-md);box-sizing:border-box;color:var(--av-nav-link-text, var(--av-color-text-muted));cursor:pointer;display:flex;font:inherit;gap:.625rem;min-height:2.5rem;min-width:0;padding:var(--av-nav-link-padding-y, .625rem) var(--av-nav-link-padding-x, .75rem);padding-left:var(--av-nav-link-padding-left, var(--av-nav-link-padding-x, .75rem));text-align:left;text-decoration:none;transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;width:100%}.av-nav-link:hover:not(.av-nav-link--disabled){background:var(--av-nav-link-accent-soft);color:var(--av-nav-link-accent-hover)}.av-nav-link:active:not(.av-nav-link--disabled){transform:scale(.99)}.av-nav-link:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--av-nav-link-accent) 24%,transparent);outline:none}.av-nav-link--active,.av-nav-link.active{background:var(--av-nav-link-accent-soft);border-color:color-mix(in srgb,var(--av-nav-link-accent) 28%,transparent);color:var(--av-nav-link-text-active);font-weight:700}:host(.active) .av-nav-link{background:var(--av-nav-link-accent-soft);border-color:color-mix(in srgb,var(--av-nav-link-accent) 28%,transparent);color:var(--av-nav-link-text-active);font-weight:700}.av-nav-link--disabled{cursor:not-allowed;opacity:.52}.av-nav-link__icon{color:currentColor;flex:0 0 auto}.av-nav-link__body{display:grid;flex:1;gap:.125rem;min-width:0}.av-nav-link__label,.av-nav-link__description{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.av-nav-link__label{font-size:.875rem;line-height:1.25}.av-nav-link__description{color:var(--av-color-text-subtle);font-size:.75rem;line-height:1.2}.av-nav-link__badge{background:var(--av-nav-link-accent);border-radius:var(--av-radius-full);color:var(--av-white);flex:0 0 auto;font-size:.6875rem;font-weight:700;line-height:1;min-width:1.25rem;padding:.25rem .375rem;text-align:center}:host-context(av-bottomnav){align-items:center;display:flex;flex:1 1 0;justify-content:center;min-width:0}:host-context(av-bottomnav) .av-nav-link{align-items:center;border-color:transparent;border-radius:var(--av-bottomnav-item-radius, var(--av-radius-md));flex-direction:column;gap:.25rem;justify-content:center;min-height:var(--av-bottomnav-item-size, 3.35rem);overflow:visible;padding:.45rem .35rem;position:relative;text-align:center}:host-context(av-bottomnav) .av-nav-link:hover:not(.av-nav-link--disabled){background:color-mix(in srgb,var(--av-nav-link-accent) 10%,transparent)}:host-context(av-bottomnav) .av-nav-link:active:not(.av-nav-link--disabled){transform:scale(.98)}:host-context(av-bottomnav) .av-nav-link--active,:host-context(av-bottomnav) .av-nav-link.active,:host-context(av-bottomnav):host(.active) .av-nav-link{background:transparent;border-color:transparent;color:var(--av-nav-link-accent);font-weight:700}:host-context(av-bottomnav) .av-nav-link__icon{font-size:var(--av-bottomnav-icon-size, 1.2rem)}:host-context(av-bottomnav) .av-nav-link__body{display:block;flex:0 1 auto;max-width:100%}:host-context(av-bottomnav) .av-nav-link__label{font-size:.6875rem;line-height:1.1;max-width:100%}:host-context(av-bottomnav) .av-nav-link__description{display:none}:host-context(av-bottomnav) .av-nav-link__badge{font-size:.625rem;min-width:1rem;padding:.1875rem .3125rem;position:absolute;right:max(.35rem,calc(50% - 1.55rem));top:.25rem}:host-context(.av-bottomnav--highlight-normal) .av-nav-link--active,:host-context(.av-bottomnav--highlight-normal) .av-nav-link.active,:host-context(.av-bottomnav--highlight-normal):host(.active) .av-nav-link{background:var(--av-nav-link-accent-soft);border-color:color-mix(in srgb,var(--av-nav-link-accent) 18%,transparent);transform:translateY(-.125rem)}:host-context(.av-bottomnav--highlight-static) .av-nav-link--active,:host-context(.av-bottomnav--highlight-static) .av-nav-link.active,:host-context(.av-bottomnav--highlight-static):host(.active) .av-nav-link{background:var(--av-nav-link-accent-soft);border-color:color-mix(in srgb,var(--av-nav-link-accent) 18%,transparent);transform:none}:host-context(.av-bottomnav--highlight-floating-circle){align-items:center}:host-context(.av-bottomnav--highlight-floating-circle) .av-nav-link__body{display:none}:host-context(.av-bottomnav--highlight-floating-circle) .av-nav-link{border-radius:var(--av-radius-full);min-height:var(--av-bottomnav-floating-size, 3.4rem);padding:0;width:var(--av-bottomnav-floating-size, 3.4rem)}:host-context(.av-bottomnav--highlight-floating-circle) .av-nav-link--active,:host-context(.av-bottomnav--highlight-floating-circle) .av-nav-link.active,:host-context(.av-bottomnav--highlight-floating-circle):host(.active) .av-nav-link{background:var(--av-nav-link-accent);box-shadow:0 .875rem 1.8rem color-mix(in srgb,var(--av-nav-link-accent) 35%,transparent);color:var(--av-white);transform:translateY(-.85rem)}:host-context(.av-bottomnav--highlight-inline-label) .av-nav-link{border-radius:var(--av-radius-full);flex-direction:row;gap:0;min-height:2.65rem;padding:.55rem .7rem;width:auto}:host-context(.av-bottomnav--highlight-inline-label) .av-nav-link__body{margin-left:0;max-width:0;opacity:0;overflow:hidden;transition:margin-left .18s ease,max-width .18s ease,opacity .14s ease}:host-context(.av-bottomnav--highlight-inline-label) .av-nav-link--active,:host-context(.av-bottomnav--highlight-inline-label) .av-nav-link.active,:host-context(.av-bottomnav--highlight-inline-label):host(.active) .av-nav-link{background:var(--av-nav-link-accent-soft);border-color:color-mix(in srgb,var(--av-nav-link-accent) 18%,transparent);padding-inline:.75rem .9rem}:host-context(.av-bottomnav--highlight-inline-label) .av-nav-link--active .av-nav-link__body,:host-context(.av-bottomnav--highlight-inline-label) .av-nav-link.active .av-nav-link__body,:host-context(.av-bottomnav--highlight-inline-label):host(.active) .av-nav-link .av-nav-link__body{margin-left:.35rem;max-width:7rem;opacity:1}:host-context(.av-bottomnav--highlight-underline) .av-nav-link:after{background:var(--av-nav-link-accent);border-radius:var(--av-radius-full);bottom:.25rem;content:\"\";height:.15rem;left:50%;opacity:0;position:absolute;transform:translate(-50%) scaleX(.55);transition:opacity .18s ease,transform .18s ease;width:1.65rem}:host-context(.av-bottomnav--highlight-underline) .av-nav-link--active:after,:host-context(.av-bottomnav--highlight-underline) .av-nav-link.active:after,:host-context(.av-bottomnav--highlight-underline):host(.active) .av-nav-link:after{opacity:1;transform:translate(-50%) scaleX(1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: AvIcon, selector: "span[av-icon], i[av-icon]", inputs: ["name", "size"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
|
|
429
456
|
}
|
|
430
457
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvNavLink, decorators: [{
|
|
431
458
|
type: Component,
|
|
432
|
-
args: [{ imports: [CommonModule, AvIcon, RouterLink, RouterLinkActive], selector: 'av-nav-link', template: "@if (!disabled() && (
|
|
433
|
-
}], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], route: [{ type: i0.Input, args: [{ isSignal: true, alias: "route", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], rel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rel", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], routerActiveClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerActiveClass", required: false }] }], routerActiveOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerActiveOptions", required: false }] }], selected: [{ type: i0.Output, args: ["selected"] }] } });
|
|
459
|
+
args: [{ imports: [CommonModule, AvIcon, RouterLink, RouterLinkActive], selector: 'av-nav-link', template: "@if (!disabled() && (resolvedRoute() || (href() && !isExternal()))) {\n <a\n class=\"av-nav-link\"\n [ngStyle]=\"themeVars()\"\n [class.av-nav-link--active]=\"isActive()\"\n [attr.aria-current]=\"isActive() ? 'page' : null\"\n [routerLink]=\"resolvedRoute() ?? href()\"\n [routerLinkActive]=\"routerActiveClass()\"\n [routerLinkActiveOptions]=\"routerActiveOptions()\"\n (isActiveChange)=\"isRouterActive.set($event)\"\n [attr.rel]=\"relValue()\"\n [attr.target]=\"target() || null\"\n (click)=\"handleClick($event)\"\n >\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </a>\n} @else {\n @if (href() && !disabled()) {\n <a\n class=\"av-nav-link\"\n [ngStyle]=\"themeVars()\"\n [class.av-nav-link--active]=\"isActive()\"\n [attr.aria-current]=\"isActive() ? 'page' : null\"\n [attr.href]=\"href()\"\n [attr.rel]=\"relValue()\"\n [attr.target]=\"target() || null\"\n (click)=\"handleClick($event)\"\n >\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </a>\n } @else {\n <button\n type=\"button\"\n class=\"av-nav-link\"\n [ngStyle]=\"themeVars()\"\n [class.av-nav-link--active]=\"isActive()\"\n [class.av-nav-link--disabled]=\"disabled()\"\n [disabled]=\"disabled()\"\n [attr.aria-current]=\"isActive() ? 'page' : null\"\n (click)=\"handleClick($event)\"\n >\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </button>\n }\n}\n\n<ng-template #content>\n @if (icon()) {\n <span class=\"av-nav-link__icon\" av-icon [name]=\"icon()\" size=\"md\"></span>\n }\n\n <span class=\"av-nav-link__body\">\n @if (label()) {\n <span class=\"av-nav-link__label\">{{ label() }}</span>\n } @else {\n <span class=\"av-nav-link__label\">\n <ng-content></ng-content>\n </span>\n }\n\n @if (description()) {\n <span class=\"av-nav-link__description\">{{ description() }}</span>\n }\n </span>\n\n @if (badge() !== null && badge() !== undefined) {\n <span class=\"av-nav-link__badge\">{{ badge() }}</span>\n }\n</ng-template>\n", styles: [":host{display:block;min-width:0}.av-nav-link{align-items:center;background:transparent;border:1px solid transparent;border-radius:var(--av-radius-md);box-sizing:border-box;color:var(--av-nav-link-text, var(--av-color-text-muted));cursor:pointer;display:flex;font:inherit;gap:.625rem;min-height:2.5rem;min-width:0;padding:var(--av-nav-link-padding-y, .625rem) var(--av-nav-link-padding-x, .75rem);padding-left:var(--av-nav-link-padding-left, var(--av-nav-link-padding-x, .75rem));text-align:left;text-decoration:none;transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;width:100%}.av-nav-link:hover:not(.av-nav-link--disabled){background:var(--av-nav-link-accent-soft);color:var(--av-nav-link-accent-hover)}.av-nav-link:active:not(.av-nav-link--disabled){transform:scale(.99)}.av-nav-link:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--av-nav-link-accent) 24%,transparent);outline:none}.av-nav-link--active,.av-nav-link.active{background:var(--av-nav-link-accent-soft);border-color:color-mix(in srgb,var(--av-nav-link-accent) 28%,transparent);color:var(--av-nav-link-text-active);font-weight:700}:host(.active) .av-nav-link{background:var(--av-nav-link-accent-soft);border-color:color-mix(in srgb,var(--av-nav-link-accent) 28%,transparent);color:var(--av-nav-link-text-active);font-weight:700}.av-nav-link--disabled{cursor:not-allowed;opacity:.52}.av-nav-link__icon{color:currentColor;flex:0 0 auto}.av-nav-link__body{display:grid;flex:1;gap:.125rem;min-width:0}.av-nav-link__label,.av-nav-link__description{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.av-nav-link__label{font-size:.875rem;line-height:1.25}.av-nav-link__description{color:var(--av-color-text-subtle);font-size:.75rem;line-height:1.2}.av-nav-link__badge{background:var(--av-nav-link-accent);border-radius:var(--av-radius-full);color:var(--av-white);flex:0 0 auto;font-size:.6875rem;font-weight:700;line-height:1;min-width:1.25rem;padding:.25rem .375rem;text-align:center}:host-context(av-bottomnav){align-items:center;display:flex;flex:1 1 0;justify-content:center;min-width:0}:host-context(av-bottomnav) .av-nav-link{align-items:center;border-color:transparent;border-radius:var(--av-bottomnav-item-radius, var(--av-radius-md));flex-direction:column;gap:.25rem;justify-content:center;min-height:var(--av-bottomnav-item-size, 3.35rem);overflow:visible;padding:.45rem .35rem;position:relative;text-align:center}:host-context(av-bottomnav) .av-nav-link:hover:not(.av-nav-link--disabled){background:color-mix(in srgb,var(--av-nav-link-accent) 10%,transparent)}:host-context(av-bottomnav) .av-nav-link:active:not(.av-nav-link--disabled){transform:scale(.98)}:host-context(av-bottomnav) .av-nav-link--active,:host-context(av-bottomnav) .av-nav-link.active,:host-context(av-bottomnav):host(.active) .av-nav-link{background:transparent;border-color:transparent;color:var(--av-nav-link-accent);font-weight:700}:host-context(av-bottomnav) .av-nav-link__icon{font-size:var(--av-bottomnav-icon-size, 1.2rem)}:host-context(av-bottomnav) .av-nav-link__body{display:block;flex:0 1 auto;max-width:100%}:host-context(av-bottomnav) .av-nav-link__label{font-size:.6875rem;line-height:1.1;max-width:100%}:host-context(av-bottomnav) .av-nav-link__description{display:none}:host-context(av-bottomnav) .av-nav-link__badge{font-size:.625rem;min-width:1rem;padding:.1875rem .3125rem;position:absolute;right:max(.35rem,calc(50% - 1.55rem));top:.25rem}:host-context(.av-bottomnav--highlight-normal) .av-nav-link--active,:host-context(.av-bottomnav--highlight-normal) .av-nav-link.active,:host-context(.av-bottomnav--highlight-normal):host(.active) .av-nav-link{background:var(--av-nav-link-accent-soft);border-color:color-mix(in srgb,var(--av-nav-link-accent) 18%,transparent);transform:translateY(-.125rem)}:host-context(.av-bottomnav--highlight-static) .av-nav-link--active,:host-context(.av-bottomnav--highlight-static) .av-nav-link.active,:host-context(.av-bottomnav--highlight-static):host(.active) .av-nav-link{background:var(--av-nav-link-accent-soft);border-color:color-mix(in srgb,var(--av-nav-link-accent) 18%,transparent);transform:none}:host-context(.av-bottomnav--highlight-floating-circle){align-items:center}:host-context(.av-bottomnav--highlight-floating-circle) .av-nav-link__body{display:none}:host-context(.av-bottomnav--highlight-floating-circle) .av-nav-link{border-radius:var(--av-radius-full);min-height:var(--av-bottomnav-floating-size, 3.4rem);padding:0;width:var(--av-bottomnav-floating-size, 3.4rem)}:host-context(.av-bottomnav--highlight-floating-circle) .av-nav-link--active,:host-context(.av-bottomnav--highlight-floating-circle) .av-nav-link.active,:host-context(.av-bottomnav--highlight-floating-circle):host(.active) .av-nav-link{background:var(--av-nav-link-accent);box-shadow:0 .875rem 1.8rem color-mix(in srgb,var(--av-nav-link-accent) 35%,transparent);color:var(--av-white);transform:translateY(-.85rem)}:host-context(.av-bottomnav--highlight-inline-label) .av-nav-link{border-radius:var(--av-radius-full);flex-direction:row;gap:0;min-height:2.65rem;padding:.55rem .7rem;width:auto}:host-context(.av-bottomnav--highlight-inline-label) .av-nav-link__body{margin-left:0;max-width:0;opacity:0;overflow:hidden;transition:margin-left .18s ease,max-width .18s ease,opacity .14s ease}:host-context(.av-bottomnav--highlight-inline-label) .av-nav-link--active,:host-context(.av-bottomnav--highlight-inline-label) .av-nav-link.active,:host-context(.av-bottomnav--highlight-inline-label):host(.active) .av-nav-link{background:var(--av-nav-link-accent-soft);border-color:color-mix(in srgb,var(--av-nav-link-accent) 18%,transparent);padding-inline:.75rem .9rem}:host-context(.av-bottomnav--highlight-inline-label) .av-nav-link--active .av-nav-link__body,:host-context(.av-bottomnav--highlight-inline-label) .av-nav-link.active .av-nav-link__body,:host-context(.av-bottomnav--highlight-inline-label):host(.active) .av-nav-link .av-nav-link__body{margin-left:.35rem;max-width:7rem;opacity:1}:host-context(.av-bottomnav--highlight-underline) .av-nav-link:after{background:var(--av-nav-link-accent);border-radius:var(--av-radius-full);bottom:.25rem;content:\"\";height:.15rem;left:50%;opacity:0;position:absolute;transform:translate(-50%) scaleX(.55);transition:opacity .18s ease,transform .18s ease;width:1.65rem}:host-context(.av-bottomnav--highlight-underline) .av-nav-link--active:after,:host-context(.av-bottomnav--highlight-underline) .av-nav-link.active:after,:host-context(.av-bottomnav--highlight-underline):host(.active) .av-nav-link:after{opacity:1;transform:translate(-50%) scaleX(1)}\n"] }]
|
|
460
|
+
}], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], path: [{ type: i0.Input, args: [{ isSignal: true, alias: "path", required: false }] }], route: [{ type: i0.Input, args: [{ isSignal: true, alias: "route", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], rel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rel", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], routerActiveClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerActiveClass", required: false }] }], routerActiveOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerActiveOptions", required: false }] }], selected: [{ type: i0.Output, args: ["selected"] }] } });
|
|
434
461
|
|
|
435
462
|
class AvSidenav {
|
|
436
463
|
config = inject(VISUALS_CONFIG);
|