@hyalo/angular 0.0.0-stage → 0.1.0

package/fesm2022/hyalo-angular-navbar.mjs

@@ -0,0 +1,343 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, Directive, ElementRef, afterNextRender, booleanAttribute, inject, input, model, numberAttribute, signal, viewChild } from "@angular/core";
+import { HyIcon } from "@hyalo/angular/icon";
+import { HyMaterialDirective, injectId } from "@hyalo/angular";
+var HyNavbarBrand = class HyNavbarBrand {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HyNavbarBrand,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.3",
+		type: HyNavbarBrand,
+		isStandalone: true,
+		selector: "[hyNavbarBrand]",
+		host: { classAttribute: "hy-navbar__brand" },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: HyNavbarBrand,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[hyNavbarBrand]",
+			host: { class: "hy-navbar__brand" }
+		}]
+	}]
+});
+var HyNavbarActions = class HyNavbarActions {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HyNavbarActions,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.3",
+		type: HyNavbarActions,
+		isStandalone: true,
+		selector: "[hyNavbarActions]",
+		host: { classAttribute: "hy-navbar__actions" },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: HyNavbarActions,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[hyNavbarActions]",
+			host: { class: "hy-navbar__actions" }
+		}]
+	}]
+});
+var HyNavbar = class HyNavbar {
+	toggle = viewChild.required("toggle", ...ngDevMode ? [{ debugName: "toggle" }] : /* istanbul ignore next */ []);
+	linksId = injectId("navbar-links");
+	label = input("Main", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	menuLabel = input("Menu", ...ngDevMode ? [{ debugName: "menuLabel" }] : /* istanbul ignore next */ []);
+	appearance = input("floating", ...ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []);
+	position = input("sticky", ...ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []);
+	material = input("", ...ngDevMode ? [{ debugName: "material" }] : /* istanbul ignore next */ []);
+	hideOnScroll = input(false, {
+		...ngDevMode ? { debugName: "hideOnScroll" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	scrollThreshold = input(8, {
+		...ngDevMode ? { debugName: "scrollThreshold" } : /* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	menuOpen = model(false, ...ngDevMode ? [{ debugName: "menuOpen" }] : /* istanbul ignore next */ []);
+	scrolled = signal(false, ...ngDevMode ? [{ debugName: "scrolled" }] : /* istanbul ignore next */ []);
+	hidden = signal(false, ...ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []);
+	constructor() {
+		const destroyRef = inject(DestroyRef);
+		const host = inject(ElementRef).nativeElement;
+		afterNextRender(() => {
+			const view = host.ownerDocument.defaultView;
+			if (!view) return;
+			let last = view.scrollY;
+			const onScroll = () => {
+				const y = view.scrollY;
+				this.scrolled.set(y > this.scrollThreshold());
+				if (this.hideOnScroll() && !this.menuOpen() && !host.contains(host.ownerDocument.activeElement)) {
+					const delta = y - last;
+					if (Math.abs(delta) > 6) this.hidden.set(delta > 0 && y > host.offsetHeight * 2);
+				} else this.hidden.set(false);
+				last = y;
+			};
+			onScroll();
+			view.addEventListener("scroll", onScroll, { passive: true });
+			destroyRef.onDestroy(() => view.removeEventListener("scroll", onScroll));
+		});
+	}
+	closeMenu(restoreFocus = false) {
+		if (!this.menuOpen()) return;
+		this.menuOpen.set(false);
+		if (restoreFocus) this.toggle().nativeElement.focus();
+	}
+	onClick(event) {
+		if (event.target?.closest(".hy-navbar__links a")) this.closeMenu();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HyNavbar,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.2.0",
+		version: "22.2.3",
+		type: HyNavbar,
+		isStandalone: true,
+		selector: "hy-navbar",
+		inputs: {
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			menuLabel: {
+				classPropertyName: "menuLabel",
+				publicName: "menuLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			appearance: {
+				classPropertyName: "appearance",
+				publicName: "appearance",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			position: {
+				classPropertyName: "position",
+				publicName: "position",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			material: {
+				classPropertyName: "material",
+				publicName: "material",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			hideOnScroll: {
+				classPropertyName: "hideOnScroll",
+				publicName: "hideOnScroll",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			scrollThreshold: {
+				classPropertyName: "scrollThreshold",
+				publicName: "scrollThreshold",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			menuOpen: {
+				classPropertyName: "menuOpen",
+				publicName: "menuOpen",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { menuOpen: "menuOpenChange" },
+		host: {
+			listeners: {
+				"keydown.escape": "closeMenu(true)",
+				"focusin": "hidden.set(false)",
+				"click": "onClick($event)"
+			},
+			properties: {
+				"attr.data-appearance": "appearance()",
+				"attr.data-position": "position()",
+				"attr.data-scrolled": "scrolled() || null",
+				"attr.data-hidden": "hidden() || null",
+				"attr.data-menu-open": "menuOpen() || null"
+			},
+			classAttribute: "hy-navbar"
+		},
+		viewQueries: [{
+			propertyName: "toggle",
+			first: true,
+			predicate: ["toggle"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: "<div class=\"hy-navbar__bar\" [hyMaterial]=\"material()\">\r\n  <ng-content select=\"[hyNavbarBrand]\" />\r\n  <nav class=\"hy-navbar__links\" [id]=\"linksId\" [attr.aria-label]=\"label()\">\r\n    <ng-content />\r\n  </nav>\r\n  <ng-content select=\"[hyNavbarActions]\" />\r\n  <button\r\n    #toggle\r\n    type=\"button\"\r\n    class=\"hy-navbar__toggle\"\r\n    [attr.aria-expanded]=\"menuOpen()\"\r\n    [attr.aria-controls]=\"linksId\"\r\n    [attr.aria-label]=\"menuLabel()\"\r\n    (click)=\"menuOpen.set(!menuOpen())\"\r\n  >\r\n    <hy-icon [name]=\"menuOpen() ? 'x' : 'menu'\" />\r\n  </button>\r\n</div>\r\n",
+		styles: [":host{--_inset: var(--hy-space-3);display:block;container:hy-navbar / inline-size;inset-block-start:0;z-index:var(--hy-z-sticky);padding:var(--_inset);transition:translate var(--hy-dur-settle) var(--hy-ease-out)}:host([data-position=\"sticky\"]){position:sticky}:host([data-position=\"fixed\"]){position:fixed;inset-inline:0}:host([data-appearance=\"full\"]){--_inset: 0px}:host([data-hidden]){translate:0 -110%}.hy-navbar__bar{position:relative;display:flex;align-items:center;gap:var(--hy-space-4);max-inline-size:var(--hy-container);margin-inline:auto;min-block-size:var(--hy-navbar-height, 3.5rem);padding-block:var(--hy-space-2);padding-inline:var(--hy-space-5) var(--hy-space-2);border-radius:var(--hy-navbar-radius, var(--hy-radius-pill));transition:min-block-size var(--hy-dur-settle) var(--hy-ease-out),box-shadow var(--hy-dur-settle) var(--hy-ease-out)}:host([data-appearance=\"full\"]) .hy-navbar__bar{max-inline-size:none;border-radius:0;border-width:0;padding-inline:var(--hy-gutter)}:host([data-appearance=\"full\"]) .hy-navbar__bar:after{content:\"\";position:absolute;inset-inline:0;inset-block-start:100%;block-size:var(--hy-space-4);background:linear-gradient(to bottom,var(--hy-line),transparent);opacity:0;pointer-events:none;transition:opacity var(--hy-dur-settle) var(--hy-ease-out)}:host([data-appearance=\"full\"][data-scrolled]) .hy-navbar__bar:after{opacity:1}@media(prefers-contrast:more),(forced-colors:active){:host([data-appearance=\"full\"]) .hy-navbar__bar{border-width:0 0 1px}:host([data-appearance=\"full\"]) .hy-navbar__bar:after{display:none}}:host([data-scrolled]) .hy-navbar__bar{min-block-size:calc(var(--hy-navbar-height, 3.5rem) - .5rem)}.hy-navbar__links{display:flex;align-items:center;gap:var(--hy-space-1);margin-inline:auto}.hy-navbar__toggle{display:none;place-items:center;inline-size:2.5rem;block-size:2.5rem;border:0;border-radius:var(--hy-radius-pill);background:transparent;color:var(--hy-ink);cursor:pointer}.hy-navbar__toggle:focus-visible{outline:none;box-shadow:var(--hy-focus-ring)}@container hy-navbar (max-width: 48rem){.hy-navbar__toggle{display:grid;margin-inline-start:auto}.hy-navbar__bar:has(.hy-navbar__actions) .hy-navbar__toggle{margin-inline-start:0}.hy-navbar__links{position:absolute;inset-block-start:calc(100% + var(--hy-space-2));inset-inline:0;flex-direction:column;align-items:stretch;gap:var(--hy-space-1);margin:0;padding:var(--hy-space-2);border-radius:var(--hy-radius-l);background:var(--hy-surface-1);border:1px solid var(--hy-line);box-shadow:var(--hy-glass-shadow);opacity:0;translate:0 -.5rem;visibility:hidden;transition:opacity var(--hy-dur-settle) var(--hy-ease-out),translate var(--hy-dur-settle) var(--hy-ease-out),visibility 0s linear var(--hy-dur-settle)}:host([data-menu-open]) .hy-navbar__links{opacity:1;translate:0 0;visibility:visible;transition-delay:0s}}\n"],
+		dependencies: [{
+			kind: "component",
+			type: HyIcon,
+			selector: "hy-icon",
+			inputs: [
+				"name",
+				"icon",
+				"label",
+				"size",
+				"strokeWidth"
+			]
+		}, {
+			kind: "directive",
+			type: HyMaterialDirective,
+			selector: "[hyMaterial]",
+			inputs: ["hyMaterial", "thickness"]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: HyNavbar,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "hy-navbar",
+			imports: [HyIcon, HyMaterialDirective],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				class: "hy-navbar",
+				"[attr.data-appearance]": "appearance()",
+				"[attr.data-position]": "position()",
+				"[attr.data-scrolled]": "scrolled() || null",
+				"[attr.data-hidden]": "hidden() || null",
+				"[attr.data-menu-open]": "menuOpen() || null",
+				"(keydown.escape)": "closeMenu(true)",
+				"(focusin)": "hidden.set(false)",
+				"(click)": "onClick($event)"
+			},
+			template: "<div class=\"hy-navbar__bar\" [hyMaterial]=\"material()\">\r\n  <ng-content select=\"[hyNavbarBrand]\" />\r\n  <nav class=\"hy-navbar__links\" [id]=\"linksId\" [attr.aria-label]=\"label()\">\r\n    <ng-content />\r\n  </nav>\r\n  <ng-content select=\"[hyNavbarActions]\" />\r\n  <button\r\n    #toggle\r\n    type=\"button\"\r\n    class=\"hy-navbar__toggle\"\r\n    [attr.aria-expanded]=\"menuOpen()\"\r\n    [attr.aria-controls]=\"linksId\"\r\n    [attr.aria-label]=\"menuLabel()\"\r\n    (click)=\"menuOpen.set(!menuOpen())\"\r\n  >\r\n    <hy-icon [name]=\"menuOpen() ? 'x' : 'menu'\" />\r\n  </button>\r\n</div>\r\n",
+			styles: [":host{--_inset: var(--hy-space-3);display:block;container:hy-navbar / inline-size;inset-block-start:0;z-index:var(--hy-z-sticky);padding:var(--_inset);transition:translate var(--hy-dur-settle) var(--hy-ease-out)}:host([data-position=\"sticky\"]){position:sticky}:host([data-position=\"fixed\"]){position:fixed;inset-inline:0}:host([data-appearance=\"full\"]){--_inset: 0px}:host([data-hidden]){translate:0 -110%}.hy-navbar__bar{position:relative;display:flex;align-items:center;gap:var(--hy-space-4);max-inline-size:var(--hy-container);margin-inline:auto;min-block-size:var(--hy-navbar-height, 3.5rem);padding-block:var(--hy-space-2);padding-inline:var(--hy-space-5) var(--hy-space-2);border-radius:var(--hy-navbar-radius, var(--hy-radius-pill));transition:min-block-size var(--hy-dur-settle) var(--hy-ease-out),box-shadow var(--hy-dur-settle) var(--hy-ease-out)}:host([data-appearance=\"full\"]) .hy-navbar__bar{max-inline-size:none;border-radius:0;border-width:0;padding-inline:var(--hy-gutter)}:host([data-appearance=\"full\"]) .hy-navbar__bar:after{content:\"\";position:absolute;inset-inline:0;inset-block-start:100%;block-size:var(--hy-space-4);background:linear-gradient(to bottom,var(--hy-line),transparent);opacity:0;pointer-events:none;transition:opacity var(--hy-dur-settle) var(--hy-ease-out)}:host([data-appearance=\"full\"][data-scrolled]) .hy-navbar__bar:after{opacity:1}@media(prefers-contrast:more),(forced-colors:active){:host([data-appearance=\"full\"]) .hy-navbar__bar{border-width:0 0 1px}:host([data-appearance=\"full\"]) .hy-navbar__bar:after{display:none}}:host([data-scrolled]) .hy-navbar__bar{min-block-size:calc(var(--hy-navbar-height, 3.5rem) - .5rem)}.hy-navbar__links{display:flex;align-items:center;gap:var(--hy-space-1);margin-inline:auto}.hy-navbar__toggle{display:none;place-items:center;inline-size:2.5rem;block-size:2.5rem;border:0;border-radius:var(--hy-radius-pill);background:transparent;color:var(--hy-ink);cursor:pointer}.hy-navbar__toggle:focus-visible{outline:none;box-shadow:var(--hy-focus-ring)}@container hy-navbar (max-width: 48rem){.hy-navbar__toggle{display:grid;margin-inline-start:auto}.hy-navbar__bar:has(.hy-navbar__actions) .hy-navbar__toggle{margin-inline-start:0}.hy-navbar__links{position:absolute;inset-block-start:calc(100% + var(--hy-space-2));inset-inline:0;flex-direction:column;align-items:stretch;gap:var(--hy-space-1);margin:0;padding:var(--hy-space-2);border-radius:var(--hy-radius-l);background:var(--hy-surface-1);border:1px solid var(--hy-line);box-shadow:var(--hy-glass-shadow);opacity:0;translate:0 -.5rem;visibility:hidden;transition:opacity var(--hy-dur-settle) var(--hy-ease-out),translate var(--hy-dur-settle) var(--hy-ease-out),visibility 0s linear var(--hy-dur-settle)}:host([data-menu-open]) .hy-navbar__links{opacity:1;translate:0 0;visibility:visible;transition-delay:0s}}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		toggle: [{
+			type: i0.ViewChild,
+			args: ["toggle", { isSignal: true }]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		menuLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "menuLabel",
+				required: false
+			}]
+		}],
+		appearance: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "appearance",
+				required: false
+			}]
+		}],
+		position: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "position",
+				required: false
+			}]
+		}],
+		material: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "material",
+				required: false
+			}]
+		}],
+		hideOnScroll: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "hideOnScroll",
+				required: false
+			}]
+		}],
+		scrollThreshold: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "scrollThreshold",
+				required: false
+			}]
+		}],
+		menuOpen: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "menuOpen",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["menuOpenChange"]
+		}]
+	}
+});
+const HY_NAVBAR = [
+	HyNavbar,
+	HyNavbarBrand,
+	HyNavbarActions
+];
+export { HY_NAVBAR, HyNavbar, HyNavbarActions, HyNavbarBrand };
+
+//# sourceMappingURL=hyalo-angular-navbar.mjs.map

package/fesm2022/hyalo-angular-navbar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"hyalo-angular-navbar.mjs","names":[],"sources":["../../../projects/hyalo/navbar/navbar.ts","../../../projects/hyalo/navbar/navbar.html"],"sourcesContent":["import {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  DestroyRef,\r\n  Directive,\r\n  ElementRef,\r\n  afterNextRender,\r\n  booleanAttribute,\r\n  inject,\r\n  input,\r\n  model,\r\n  numberAttribute,\r\n  signal,\r\n  viewChild,\r\n} from '@angular/core';\r\nimport { HyIcon } from '@hyalo/angular/icon';\r\nimport { HyMaterialDirective, injectId } from '@hyalo/angular';\r\n\r\n/** The logo or product name, at the start of the bar. */\r\n@Directive({ selector: '[hyNavbarBrand]', host: { class: 'hy-navbar__brand' } })\r\nexport class HyNavbarBrand {}\r\n\r\n/** Buttons at the end of the bar, such as sign in or a cart. Always visible. */\r\n@Directive({ selector: '[hyNavbarActions]', host: { class: 'hy-navbar__actions' } })\r\nexport class HyNavbarActions {}\r\n\r\n/**\r\n * - `floating`: a detached glass pill with space around it.\r\n * - `full`: a full-width bar. Once content scrolls under it, a soft fade\r\n *   at its lower edge separates the two instead of a hard line.\r\n */\r\nexport type HyNavbarAppearance = 'floating' | 'full';\r\n\r\n/**\r\n * A glass app bar. Links go in the default slot and are wrapped in a\r\n * `<nav>`. On narrow screens they collapse behind a menu button and open as\r\n * a panel under the bar. Bind `menuOpen` if you would rather open your own\r\n * drawer.\r\n *\r\n * ```html\r\n * <hy-navbar label=\"Main\">\r\n *   <a hyNavbarBrand routerLink=\"/\">Atelier</a>\r\n *   <a routerLink=\"/watches\" routerLinkActive=\"active\" ariaCurrentWhenActive=\"page\">Watches</a>\r\n *   <a routerLink=\"/journal\">Journal</a>\r\n *   <div hyNavbarActions><button hyButton size=\"sm\">Book a visit</button></div>\r\n * </hy-navbar>\r\n * ```\r\n *\r\n * The bar compacts once the page scrolls, and with `hideOnScroll` it slides\r\n * away while scrolling down and returns on the way up. It never hides while\r\n * the menu is open or focus is inside it. The collapse point is a container\r\n * query on the navbar's own width (48rem by default).\r\n */\r\n@Component({\r\n  selector: 'hy-navbar',\r\n  imports: [HyIcon, HyMaterialDirective],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  host: {\r\n    class: 'hy-navbar',\r\n    '[attr.data-appearance]': 'appearance()',\r\n    '[attr.data-position]': 'position()',\r\n    '[attr.data-scrolled]': 'scrolled() || null',\r\n    '[attr.data-hidden]': 'hidden() || null',\r\n    '[attr.data-menu-open]': 'menuOpen() || null',\r\n    '(keydown.escape)': 'closeMenu(true)',\r\n    '(focusin)': 'hidden.set(false)',\r\n    '(click)': 'onClick($event)',\r\n  },\r\n  templateUrl: './navbar.html',\r\n  styleUrl: './navbar.css',\r\n})\r\nexport class HyNavbar {\r\n  private readonly toggle = viewChild.required<ElementRef<HTMLButtonElement>>('toggle');\r\n  protected readonly linksId = injectId('navbar-links');\r\n\r\n  /** Accessible name of the `<nav>` landmark. */\r\n  readonly label = input('Main');\r\n  /** Accessible name of the menu button on narrow screens. */\r\n  readonly menuLabel = input('Menu');\r\n  /** Visual style of the bar. */\r\n  readonly appearance = input<HyNavbarAppearance>('floating');\r\n  /** CSS positioning of the navbar. */\r\n  readonly position = input<'sticky' | 'fixed' | 'static'>('sticky');\r\n  /** Material of the bar. */\r\n  readonly material = input<'clear' | 'frosted' | 'tinted' | 'solid' | ''>('');\r\n  /** Slide away while scrolling down. */\r\n  readonly hideOnScroll = input(false, { transform: booleanAttribute });\r\n  /** Scroll distance in pixels after which the bar compacts. */\r\n  readonly scrollThreshold = input(8, { transform: numberAttribute });\r\n  /** Whether the collapsed menu is open. Two-way bindable. */\r\n  readonly menuOpen = model(false);\r\n\r\n  protected readonly scrolled = signal(false);\r\n  protected readonly hidden = signal(false);\r\n\r\n  constructor() {\r\n    const destroyRef = inject(DestroyRef);\r\n    const host = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;\r\n    afterNextRender(() => {\r\n      const view = host.ownerDocument.defaultView;\r\n      if (!view) return;\r\n      let last = view.scrollY;\r\n      const onScroll = (): void => {\r\n        const y = view.scrollY;\r\n        this.scrolled.set(y > this.scrollThreshold());\r\n        if (\r\n          this.hideOnScroll() &&\r\n          !this.menuOpen() &&\r\n          !host.contains(host.ownerDocument.activeElement)\r\n        ) {\r\n          const delta = y - last;\r\n          if (Math.abs(delta) > 6) this.hidden.set(delta > 0 && y > host.offsetHeight * 2);\r\n        } else {\r\n          this.hidden.set(false);\r\n        }\r\n        last = y;\r\n      };\r\n      onScroll();\r\n      view.addEventListener('scroll', onScroll, { passive: true });\r\n      destroyRef.onDestroy(() => view.removeEventListener('scroll', onScroll));\r\n    });\r\n  }\r\n\r\n  /** Closes the collapsed menu. */\r\n  closeMenu(restoreFocus = false): void {\r\n    if (!this.menuOpen()) return;\r\n    this.menuOpen.set(false);\r\n    if (restoreFocus) this.toggle().nativeElement.focus();\r\n  }\r\n\r\n  protected onClick(event: MouseEvent): void {\r\n    if ((event.target as Element | null)?.closest('.hy-navbar__links a')) this.closeMenu();\r\n  }\r\n}\r\n\r\n/** Everything needed to build a navbar. */\r\nexport const HY_NAVBAR = [HyNavbar, HyNavbarBrand, HyNavbarActions] as const;\r\n","<div class=\"hy-navbar__bar\" [hyMaterial]=\"material()\">\r\n  <ng-content select=\"[hyNavbarBrand]\" />\r\n  <nav class=\"hy-navbar__links\" [id]=\"linksId\" [attr.aria-label]=\"label()\">\r\n    <ng-content />\r\n  </nav>\r\n  <ng-content select=\"[hyNavbarActions]\" />\r\n  <button\r\n    #toggle\r\n    type=\"button\"\r\n    class=\"hy-navbar__toggle\"\r\n    [attr.aria-expanded]=\"menuOpen()\"\r\n    [attr.aria-controls]=\"linksId\"\r\n    [attr.aria-label]=\"menuLabel()\"\r\n    (click)=\"menuOpen.set(!menuOpen())\"\r\n  >\r\n    <hy-icon [name]=\"menuOpen() ? 'x' : 'menu'\" />\r\n  </button>\r\n</div>\r\n"],"mappings":"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"}

package/fesm2022/hyalo-angular-overlay.mjs

@@ -0,0 +1,94 @@
+import { MOTION } from "@hyalo/angular";
+const OPPOSITE = {
+	top: "bottom",
+	bottom: "top",
+	start: "end",
+	end: "start"
+};
+function position(placement, offset) {
+	switch (placement) {
+		case "top": return {
+			originX: "center",
+			originY: "top",
+			overlayX: "center",
+			overlayY: "bottom",
+			offsetY: -offset
+		};
+		case "bottom": return {
+			originX: "center",
+			originY: "bottom",
+			overlayX: "center",
+			overlayY: "top",
+			offsetY: offset
+		};
+		case "start": return {
+			originX: "start",
+			originY: "center",
+			overlayX: "end",
+			overlayY: "center",
+			offsetX: -offset
+		};
+		case "end": return {
+			originX: "end",
+			originY: "center",
+			overlayX: "start",
+			overlayY: "center",
+			offsetX: offset
+		};
+	}
+}
+function hyConnectedPositions(placement, offset = 8) {
+	return [position(placement, offset), position(OPPOSITE[placement], offset)];
+}
+function hyDropdownPositions(offset = 6) {
+	return [{
+		originX: "start",
+		originY: "bottom",
+		overlayX: "start",
+		overlayY: "top",
+		offsetY: offset
+	}, {
+		originX: "start",
+		originY: "top",
+		overlayX: "start",
+		overlayY: "bottom",
+		offsetY: -offset
+	}];
+}
+var HyPresence = class {
+	cancel = null;
+	get leaving() {
+		return this.cancel !== null;
+	}
+	enter(el) {
+		if (this.cancel) this.cancel();
+		else {
+			el.dataset["state"] = "closed";
+			el.offsetWidth;
+		}
+		el.dataset["state"] = "open";
+	}
+	leave(el, done) {
+		if (this.cancel) return;
+		el.dataset["state"] = "closing";
+		const stop = () => {
+			el.removeEventListener("transitionend", onEnd);
+			clearTimeout(timer);
+			this.cancel = null;
+		};
+		const onEnd = (event) => {
+			if (event.target !== el || event.propertyName !== "opacity") return;
+			stop();
+			done();
+		};
+		const timer = setTimeout(() => {
+			stop();
+			done();
+		}, MOTION.quick.duration * 1e3 + 80);
+		el.addEventListener("transitionend", onEnd);
+		this.cancel = stop;
+	}
+};
+export { hyConnectedPositions, hyDropdownPositions, HyPresence as ɵHyPresence };
+
+//# sourceMappingURL=hyalo-angular-overlay.mjs.map

package/fesm2022/hyalo-angular-overlay.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"hyalo-angular-overlay.mjs","names":[],"sources":["../../../projects/hyalo/overlay/positions.ts","../../../projects/hyalo/overlay/presence.ts"],"sourcesContent":["import type { ConnectedPosition } from '@angular/cdk/overlay';\r\n\r\n/**\r\n * Where a floating element sits relative to its trigger. `start` and `end`\r\n * follow the text direction, so `end` is on the right in LTR and on the left\r\n * in RTL.\r\n */\r\nexport type HyPlacement = 'top' | 'bottom' | 'start' | 'end';\r\n\r\nconst OPPOSITE: Record<HyPlacement, HyPlacement> = {\r\n  top: 'bottom',\r\n  bottom: 'top',\r\n  start: 'end',\r\n  end: 'start',\r\n};\r\n\r\nfunction position(placement: HyPlacement, offset: number): ConnectedPosition {\r\n  switch (placement) {\r\n    case 'top':\r\n      return {\r\n        originX: 'center',\r\n        originY: 'top',\r\n        overlayX: 'center',\r\n        overlayY: 'bottom',\r\n        offsetY: -offset,\r\n      };\r\n    case 'bottom':\r\n      return {\r\n        originX: 'center',\r\n        originY: 'bottom',\r\n        overlayX: 'center',\r\n        overlayY: 'top',\r\n        offsetY: offset,\r\n      };\r\n    case 'start':\r\n      return {\r\n        originX: 'start',\r\n        originY: 'center',\r\n        overlayX: 'end',\r\n        overlayY: 'center',\r\n        offsetX: -offset,\r\n      };\r\n    case 'end':\r\n      return {\r\n        originX: 'end',\r\n        originY: 'center',\r\n        overlayX: 'start',\r\n        overlayY: 'center',\r\n        offsetX: offset,\r\n      };\r\n  }\r\n}\r\n\r\n/**\r\n * CDK positions for a placement, with the opposite side as the first\r\n * fallback when there is no room.\r\n */\r\nexport function hyConnectedPositions(placement: HyPlacement, offset = 8): ConnectedPosition[] {\r\n  return [position(placement, offset), position(OPPOSITE[placement], offset)];\r\n}\r\n\r\n/** Positions for a dropdown that lines up with the trigger's start edge. */\r\nexport function hyDropdownPositions(offset = 6): ConnectedPosition[] {\r\n  return [\r\n    { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: offset },\r\n    { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -offset },\r\n  ];\r\n}\r\n","import { MOTION } from '@hyalo/angular';\r\n\r\n/**\r\n * @internal Enter and exit for small overlays (tooltips, popovers, select\r\n * panels), driven by `data-state` and CSS transitions.\r\n *\r\n * Transitions start from the current value, so reopening a panel while it\r\n * is still fading out simply turns it around, with no jump.\r\n */\r\nexport class HyPresence {\r\n  private cancel: (() => void) | null = null;\r\n\r\n  /** True while an exit is playing. */\r\n  get leaving(): boolean {\r\n    return this.cancel !== null;\r\n  }\r\n\r\n  /** Shows a panel that was just attached, or turns a leaving one around. */\r\n  enter(el: HTMLElement): void {\r\n    if (this.cancel) {\r\n      this.cancel();\r\n    } else {\r\n      el.dataset['state'] = 'closed';\r\n      // Commit the closed pose so the change to open transitions.\r\n      void el.offsetWidth;\r\n    }\r\n    el.dataset['state'] = 'open';\r\n  }\r\n\r\n  /** Plays the exit, then calls `done`, unless `enter` turns it around first. */\r\n  leave(el: HTMLElement, done: () => void): void {\r\n    if (this.cancel) return;\r\n    el.dataset['state'] = 'closing';\r\n    const stop = (): void => {\r\n      el.removeEventListener('transitionend', onEnd);\r\n      clearTimeout(timer);\r\n      this.cancel = null;\r\n    };\r\n    const onEnd = (event: TransitionEvent): void => {\r\n      if (event.target !== el || event.propertyName !== 'opacity') return;\r\n      stop();\r\n      done();\r\n    };\r\n    // A safety net for when transitionend never comes, as with no transition.\r\n    const timer = setTimeout(\r\n      () => {\r\n        stop();\r\n        done();\r\n      },\r\n      MOTION.quick.duration * 1000 + 80,\r\n    );\r\n    el.addEventListener('transitionend', onEnd);\r\n    this.cancel = stop;\r\n  }\r\n}\r\n"],"mappings":";AASA,MAAM,WAA6C;CACjD,KAAK;CACL,QAAQ;CACR,OAAO;CACP,KAAK;AACN;AAED,SAAS,SAAS,WAAwB,QAAc;CACtD,QAAQ,WAAR;EACE,KAAK,OACH,OAAO;GACL,SAAS;GACT,SAAS;GACT,UAAU;GACV,UAAU;GACV,SAAS,CAAC;EACX;EACH,KAAK,UACH,OAAO;GACL,SAAS;GACT,SAAS;GACT,UAAU;GACV,UAAU;GACV,SAAS;EACV;EACH,KAAK,SACH,OAAO;GACL,SAAS;GACT,SAAS;GACT,UAAU;GACV,UAAU;GACV,SAAS,CAAC;EACX;EACH,KAAK,OACH,OAAO;GACL,SAAS;GACT,SAAS;GACT,UAAU;GACV,UAAU;GACV,SAAS;EACV;CACL;AACF;AAMA,SAAgB,qBAAqB,WAAwB,SAAS,GAAC;CACrE,OAAO,CAAC,SAAS,WAAW,MAAM,GAAG,SAAS,SAAS,YAAY,MAAM,CAAC;AAC5E;AAGA,SAAgB,oBAAoB,SAAS,GAAC;CAC5C,OAAO,CACL;EAAE,SAAS;EAAS,SAAS;EAAU,UAAU;EAAS,UAAU;EAAO,SAAS;CAAM,GAC1F;EAAE,SAAS;EAAS,SAAS;EAAO,UAAU;EAAS,UAAU;EAAU,SAAS,CAAC;CAAM,CAC5F;AACH;AC1DA,IAAa,aAAb,MAAuB;CACb,SAA8B;CAGtC,IAAI,UAAO;EACT,OAAO,KAAK,WAAW;CACzB;CAGA,MAAM,IAAe;EACnB,IAAI,KAAK,QACP,KAAK,OAAM;OACN;GACL,GAAG,QAAQ,WAAW;GAEtB,AAAK,GAAG;EACV;EACA,GAAG,QAAQ,WAAW;CACxB;CAGA,MAAM,IAAiB,MAAgB;EACrC,IAAI,KAAK,QAAQ;EACjB,GAAG,QAAQ,WAAW;EACtB,MAAM,aAAkB;GACtB,GAAG,oBAAoB,iBAAiB,KAAK;GAC7C,aAAa,KAAK;GAClB,KAAK,SAAS;EAChB;EACA,MAAM,SAAS,UAAgC;GAC7C,IAAI,MAAM,WAAW,MAAM,MAAM,iBAAiB,WAAW;GAC7D,KAAI;GACJ,KAAI;EACN;EAEA,MAAM,QAAQ,iBACP;GACH,KAAI;GACJ,KAAI;EACN,GACA,OAAO,MAAM,WAAW,MAAO,EAAE;EAEnC,GAAG,iBAAiB,iBAAiB,KAAK;EAC1C,KAAK,SAAS;CAChB;AACD"}

package/fesm2022/hyalo-angular-popover-overlay-kit-6wPwnxln.mjs

@@ -0,0 +1,3 @@
+import { createFlexibleConnectedPositionStrategy, createOverlayRef, createRepositionScrollStrategy } from "@angular/cdk/overlay";
+import { ComponentPortal, TemplatePortal } from "@angular/cdk/portal";
+export { ComponentPortal, TemplatePortal, createFlexibleConnectedPositionStrategy, createOverlayRef, createRepositionScrollStrategy };