@phila/phila-ui-app-header 0.1.0-beta.4 → 0.1.0-beta.5

package/README.md

@@ -1,121 +1,122 @@
-## Code Samples
-### Basic
-The most basic header with an application title and sub-title.
-```html
-  <app-header
-    app-title="My Application"
-    app-subtitle="Description about this application"
-  />
-```
-
-### Branding
-Adds an application specific logo and link. Often used to display a department's logo and link back to the department's website.
+# AppHeader Component
 
-```html
-  <app-header
-    :branding-image="{ src: 'my-logo-image.jpg'}"
-    :branding-link="{ href: 'http://www.example.com '}"
-  />
-```
-The ``branding-image`` accepts an object of ``<img>`` attributes.
-```js
-{
-  src: "my-logo-image.png",
-  alt: "department logo"
-  width: "200px"
-}
-```
+A Vue component for the App Header of the City of Philadelphia's web applications.
 
-<alert>The image width and height are not enforced. Use the image attributes width/height, or css styles to set it.</alert>
+## Features
 
-The ``branding-link`` accepts an object of ``<a>`` attributes.
-```js
-{
-  href: "http://phila.gov/my-department",
-  target: "_blank"
-}
-```
+- 🎯 TypeScript support with full type definitions
+- 🎨 Customizable options for sticky nav, showing / hiding trusted site, slots for mobile menu, navbar branding, nav links and search
+- ♿ Accessibility features: ARIA roles, keyboard navigation
+- 📏 Responsive design for mobile and desktop
 
-<alert type="warning">If the ``branding-image`` is set, then a ``branding-link`` is also used. By default the ``branding-link`` is '/'</alert>
+## Installation
 
-### Fixed & Fluid
-Makes the header non-sticky and fluid (content stretches to the length of the window).
-```html
-  <app-header
-    :is-sticky="false"
-    :is-fluid="false"
-  />
-```
-<alert>Most applications should use the default values</alert>
-
-### Mobile Navigation ``<slot>``
-```html
-  <app-header>
-    <mobile-nav
-      slot="mobile-nav"
-      :links="myLinks"
-    />
-  </app-header>
+```bash
+npm install @phila/phila-ui-app-header
+# or
+yarn add @phila/phila-ui-app-header
+# or
+pnpm add @phila/phila-ui-app-header
 ```
-<alert>See the [Mobile Navigation](/components/MobileNav) component for more information.</alert>
-
-### Tabbed Navigation ``<slot>``
-```html
-  <app-header>
-    <tabs-nav
-      slot="tabs-nav"
-      :links="myLinks"
-    />
-  </app-header>
-```
-<alert>See the [Tabbed Navigation](/components/TabsNav) component for more information.</alert>
-
-### Dropdown Navigation ``<slot>``
-```html
-  <app-header>
-    <dropdown-nav
-      slot="dropdown-nav"
-      :links="myLinks"
-    />
-  </app-header>
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { AppHeader } from "@phila/phila-ui-app-header";
+import { MyMobileMenu } from "./MyMobileMenu.vue";
+import { MyTranslationComponent } from "./MyTranslationComponent.vue";
+import { MyServicesComponent } from "./MyServicesComponent.vue";
+import { MySearchComponent } from "./MySearchPanel.vue";
+const navLinks = [
+  {
+    text: "Services",
+    href: "/services",
+    subNav: MyServicesComponent,
+  },
+  {
+    text: "Departments",
+    href: "/departments",
+    subLinks: [
+      { text: "Department 1", href: "/departments/department-1" },
+      { text: "Department 2", href: "/departments/department-2" },
+    ],
+  }
+  {
+    text: "About",
+    href: "/about",
+  },
+];
+const branding = {
+  brandingImage: {
+    href: "/",
+    src: "https://www.phila.gov/assets/images/city-of-philadelphia-logo-medium-white.png",
+    altText: "City of Philadelphia",
+  },
+  brandingLink: {
+    text: "Mayor Cherelle L. Parker",
+    href: "https://phila.gov/departments/mayor",
+  },
+};
+</script>
+<template>
+  <AppHeader
+    :sticky="true"
+    :show-trusted-site="true"
+    :nav-links="navLinks"
+    :branding="branding"
+    :search="MySearchComponent"
+  >
+    <template #translation>
+      <MyTranslationComponent />
+    </template>
+  </AppHeader>
+</template>
 ```
-<alert>The positioning of the dropdown navigation depends on the presence of the tabbed navigation. If a tabbed navigation is present, then the dropdown is aligned with the tabs. If the tabs are not present, then the dropdown is aligned with the title.</alert>
-<alert>See the [Dropdown Navigation](/components/DropdownNav) component for more information.</alert>
-
-### Language Selector ``<slot>``
-```html
-  <app-header>
-    <lang-selector
-      slot="lang-selector-nav"
-      :languages="myLanguages"
-    />
-  </app-header>
+
+### Flyout sub-navigation
+
+The NavBar component supports flyout sub-navigations. You can provide a Vue component for the `subNav` property of a nav link to render custom content in the flyout. Your component should be wrapped by the `nav-flyout` class so it can be positioned correctly below the navbar.
+
+```vue
+<template>
+  <div class="nav-flyout">
+    <h3>Custom Sub-Navigation</h3>
+    <ul>
+      <li><a href="/custom-link-1">Custom Link 1</a></li>
+      <li><a href="/custom-link-2">Custom Link 2</a></li>
+    </ul>
+  </div>
+</template>
 ```
-<alert>The positioning of the language selector depends on the presence of the tabbed navigation. If a tabbed navigation is present, then the language selector dropdown is aligned with the tabs. If the tabs are not present, then the dropdown is aligned with the title.</alert>
-<alert>See the [Language Selector](/components/LangSelector) component for more information.</alert>
 
+### Run Demo
 
-## Live Examples
+```bash
+pnpm dev
+```
 
-<alert type="warning"> The application header is responsive, so its size will render smaller in the preview windows below, and some elements may be hidden. Click on the new window button/icon to view it on a larger window.</alert>
+### Build Library
 
-### Basic application header
-<example name="AppHeader1" height="300" :options="{ horizontal: true}"></example>
+```bash
+pnpm build
+```
 
-### Header with branding image
-<example name="AppHeader2" height="300" :options="{ horizontal: true}"></example>
+### Type Check
 
-### Header with tabbed navigation
-<example name="AppHeader3" height="300" :options="{ horizontal: true}"></example>
+```bash
+pnpm type-check
+```
 
-### Header with dropdown navigation
-<example name="AppHeader4" height="300" :options="{ horizontal: true}"></example>
+## Test locally in your development environment
 
-### Header with language selector
-<example name="AppHeader5" height="300" :options="{ horizontal: true}"></example>
+```bash
+npm pack
+cp ./dist/*.tgz ~/path/to/your/local/npm/repo
+cd ~/path/to/your/local/npm/repo
+npm install *.tgz
+```
 
-### Header with mobile navigation
-<example name="AppHeader6" height="300" :options="{ horizontal: true}"></example>
+## License
 
-### Header with all options and slots
-<example name="AppHeader" height="300" :options="{ horizontal: true}"></example>
+MIT

package/dist/AppHeader.vue.d.ts

@@ -1,57 +1,28 @@
-import { AppHeaderProps } from './types';
-
-declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<AppHeaderProps>, {
-    appTitle: string;
-    appLink: string;
-    appSubtitle: string;
-    isFluid: boolean;
-    isSticky: boolean;
-    brandingImage: undefined;
-    brandingLink: undefined;
-}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<AppHeaderProps>, {
-    appTitle: string;
-    appLink: string;
-    appSubtitle: string;
-    isFluid: boolean;
-    isSticky: boolean;
-    brandingImage: undefined;
-    brandingLink: undefined;
-}>>>, {
-    brandingImage: import('./components/_Branding.vue').BrandingImage;
-    brandingLink: import('./components/_Branding.vue').BrandingLink;
-    appTitle: string;
-    appLink: string;
-    appSubtitle: string;
-    isFluid: boolean;
-    isSticky: boolean;
-}, {}>, {
-    "mobile-nav"?(_: {}): any;
-    "tabs-nav"?(_: {}): any;
-    "left-nav"?(_: {}): any;
-    "right-nav"?(_: {}): any;
-    "lang-selector-nav"?(_: {}): any;
-    "dropdown-nav"?(_: {}): any;
-}>;
-export default _default;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
+import { AppHeaderProps } from './index';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        translations?(_: {}): any;
     };
+    refs: {};
+    rootEl: any;
 };
-type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
-        default: D[K];
-    }> : P[K];
-};
-type __VLS_Prettify<T> = {
-    [K in keyof T]: T[K];
-} & {};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<AppHeaderProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<AppHeaderProps> & Readonly<{}>, {
+    id: string;
+    mobileNav: import('vue').Component;
+    links: import('./index').NavLink[];
+    search: import('vue').Component;
+    sticky: boolean;
+    navbarBrand: import('./index').NavbarBrand;
+    showTrustedSite: boolean;
+    translations: import('vue').Component;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;
     };
 };
+//# sourceMappingURL=AppHeader.vue.d.ts.map

package/dist/AppHeader.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppHeader.vue.d.ts","sourceRoot":"","sources":["../src/AppHeader.vue"],"names":[],"mappings":"AAsCA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,SAAS,CAAC;AA4B9C,iBAAS,cAAc;WAiET,OAAO,IAA6B;;8BAVhB,GAAG;;;;EAepC;AAWD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;;6EAOnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/components/NavBar/NavbarBrandLogo.vue.d.ts

@@ -0,0 +1,4 @@
+import { BrandingImage } from '../../index';
+declare const _default: import('vue').DefineComponent<BrandingImage, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<BrandingImage> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;
+//# sourceMappingURL=NavbarBrandLogo.vue.d.ts.map

package/dist/components/NavBar/NavbarBrandLogo.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavbarBrandLogo.vue.d.ts","sourceRoot":"","sources":["../../../src/components/NavBar/NavbarBrandLogo.vue"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;;AAuDjD,wBAMG"}

package/dist/components/NavBar/NavbarBurger.vue.d.ts

@@ -0,0 +1,19 @@
+import { NavbarBurgerProps } from '../../index';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        'mobile-nav'?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<NavbarBurgerProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<NavbarBurgerProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=NavbarBurger.vue.d.ts.map

package/dist/components/NavBar/NavbarBurger.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavbarBurger.vue.d.ts","sourceRoot":"","sources":["../../../src/components/NavBar/NavbarBurger.vue"],"names":[],"mappings":"AAoCA,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAUhD,iBAAS,cAAc;WAsFT,OAAO,IAA6B;;8BAVf,GAAG;;;;EAerC;AAYD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe,yTAOnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAQpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/components/NavBar/NavbarLinks.vue.d.ts

@@ -0,0 +1,4 @@
+import { NavbarLinksProps } from '../..';
+declare const _default: import('vue').DefineComponent<NavbarLinksProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<NavbarLinksProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;
+//# sourceMappingURL=NavbarLinks.vue.d.ts.map

package/dist/components/NavBar/NavbarLinks.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavbarLinks.vue.d.ts","sourceRoot":"","sources":["../../../src/components/NavBar/NavbarLinks.vue"],"names":[],"mappings":"AA6EA,OAAO,KAAK,EAAE,gBAAgB,EAAW,MAAM,OAAO,CAAC;;AA0KvD,wBAMG"}

package/dist/components/NavBar/NavbarSearch.vue.d.ts

@@ -0,0 +1,19 @@
+import { NavbarSearchProps } from '../../index';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<NavbarSearchProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<NavbarSearchProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=NavbarSearch.vue.d.ts.map

package/dist/components/NavBar/NavbarSearch.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavbarSearch.vue.d.ts","sourceRoot":"","sources":["../../../src/components/NavBar/NavbarSearch.vue"],"names":[],"mappings":"AAuCA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAMrD,iBAAS,cAAc;WA2FT,OAAO,IAA6B;;yBAVpB,GAAG;;;;EAehC;AAYD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe,yTAOnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAQpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/components/NavBar/index.vue.d.ts

@@ -0,0 +1,29 @@
+import { NavBarProps } from '../../index';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        'navbar-burger'?(_: {}): any;
+        'navbar-logo'?(_: {}): any;
+        'navbar-brand-link'?(_: {}): any;
+        'navbar-links'?(_: {}): any;
+        'navbar-search'?(_: {}): any;
+    };
+    refs: {
+        navBarElement: HTMLElement;
+    };
+    rootEl: HTMLElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<NavBarProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<NavBarProps> & Readonly<{}>, {
+    links: import('../../index').NavLink[];
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    navBarElement: HTMLElement;
+}, HTMLElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=index.vue.d.ts.map

package/dist/components/NavBar/index.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.vue.d.ts","sourceRoot":"","sources":["../../../src/components/NavBar/index.vue"],"names":[],"mappings":"AA0LA,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAkC1C,iBAAS,cAAc;WAiIT,OAAO,IAA6B;;iCAfb,GAAG;+BACL,GAAG;qCACI,GAAG;gCACR,GAAG;iCACF,GAAG;;;;;;EAgBxC;AAgBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;eASnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/components/TrustedSite.vue.d.ts

@@ -0,0 +1,18 @@
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        translation?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=TrustedSite.vue.d.ts.map

package/dist/components/TrustedSite.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TrustedSite.vue.d.ts","sourceRoot":"","sources":["../../src/components/TrustedSite.vue"],"names":[],"mappings":"AAqJA,iBAAS,cAAc;WA0KT,OAAO,IAA6B;;6BAVhB,GAAG;;;;EAepC;AAkBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe,+QAKnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAEpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/index.css

@@ -0,0 +1 @@
+#trusted-site[data-v-75d8aee7]{width:100%;height:3rem;padding:0 var(--spacing-l);box-sizing:border-box}#trusted-site .content[data-v-75d8aee7]{color:var(--Schemes-On-Surface);font-size:var(--component-banner-font-size)}#trusted-site button[data-v-75d8aee7]{--Schemes-Surface-Container-Lowest: transparent;font-size:var(--component-banner-font-size, .75)!important}#trusted-site .trusted-toggle[data-v-75d8aee7]{height:100%}#trusted-site-info .circle-icon[data-v-75d8aee7]{border:solid 1px var(--Schemes-On-Surface);border-radius:100%;font-size:var(--scale-xlarge);aspect-ratio:1;display:inline-flex;justify-content:center;align-content:center}body:has(.phila-navbar .phila-navbar-item-flyout-active){overflow:hidden}.phila-navbar[data-v-985eaeb2]{display:flex;justify-content:space-between;column-gap:var(--spacing-3xl);height:5rem}.phila-navbar .phila-navbar-brand[data-v-985eaeb2],.phila-navbar .phila-navbar-list[data-v-985eaeb2],.phila-navbar .phila-navbar-search[data-v-985eaeb2],.phila-navbar .phila-navbar-item[data-v-985eaeb2],.phila-navbar .phila-navbar-burger[data-v-985eaeb2]{display:flex}[data-v-985eaeb2] a.phila-navbar-link,.phila-navbar a.phila-navbar-link[data-v-985eaeb2]{text-decoration:none;color:var(--Schemes-On-Inverse-Surface-Bright)}[data-v-985eaeb2] .phila-navbar-list,.phila-navbar .phila-navbar-list[data-v-985eaeb2]{list-style:none;padding:0;margin:0;column-gap:var(--scale-large)}:is([data-v-985eaeb2] .phila-navbar-list,.phila-navbar .phila-navbar-list[data-v-985eaeb2]) .phila-navbar-link-list-item{height:100%;display:flex;align-items:center}:is([data-v-985eaeb2] .phila-navbar-list,.phila-navbar .phila-navbar-list[data-v-985eaeb2]) .phila-navbar-link-list-item .phila-navbar-link{display:flex;align-items:center;height:100%}:is([data-v-985eaeb2] .phila-navbar-list,.phila-navbar .phila-navbar-list[data-v-985eaeb2]) .phila-navbar-link-list-item .phila-navbar-link:hover,:is([data-v-985eaeb2] .phila-navbar-list,.phila-navbar .phila-navbar-list[data-v-985eaeb2]) .phila-navbar-link-list-item .phila-navbar-link:active,:is([data-v-985eaeb2] .phila-navbar-list,.phila-navbar .phila-navbar-list[data-v-985eaeb2]) .phila-navbar-link-list-item .phila-navbar-link.phila-navbar-item-flyout-active{color:var(--Schemes-Primary-Container);background-color:var(--Palettes-Secondary-Secondary-650)}:is([data-v-985eaeb2] .phila-navbar-list,.phila-navbar .phila-navbar-list[data-v-985eaeb2]) .phila-navbar-link-list-item .phila-navbar-link:active,:is([data-v-985eaeb2] .phila-navbar-list,.phila-navbar .phila-navbar-list[data-v-985eaeb2]) .phila-navbar-link-list-item .phila-navbar-link.phila-navbar-item-flyout-active{outline-offset:0!important}:is([data-v-985eaeb2] .phila-navbar-list,.phila-navbar .phila-navbar-list[data-v-985eaeb2]) .phila-navbar-link-list-item .phila-navbar-link:focus{outline:2px solid var(--Schemes-Outline);outline-offset:2px}[data-v-985eaeb2] .phila-navbar-burger,.phila-navbar .phila-navbar-burger[data-v-985eaeb2]{flex:0 0 auto;aspect-ratio:1;height:5rem!important;width:5rem!important;align-items:center;justify-content:center;background-color:var(--Schemes-Alert-Container);font-size:var(--scale-3xlarge);color:var(--Schemes-On-Surface)}:is([data-v-985eaeb2] .phila-navbar-burger,.phila-navbar .phila-navbar-burger[data-v-985eaeb2]).phila-navbar-item-flyout-active{color:var(--Schemes-Primary, #2176d2);background-color:var(--Schemes-Surface-Container-Low)}[data-v-985eaeb2] .phila-navbar-brand,.phila-navbar .phila-navbar-brand[data-v-985eaeb2]{flex:1 1 auto;align-items:center;column-gap:var(--scale-large)}:is([data-v-985eaeb2] .phila-navbar-brand,.phila-navbar .phila-navbar-brand[data-v-985eaeb2]) a{font-weight:400}:is([data-v-985eaeb2] .phila-navbar-brand,.phila-navbar .phila-navbar-brand[data-v-985eaeb2]) img:hover{opacity:.8}[data-v-985eaeb2] .nav-flyout,.phila-navbar .nav-flyout[data-v-985eaeb2]{position:absolute;top:var(--nav-height);left:0;width:100%;z-index:9999;overflow-y:auto;max-height:calc(100vh - var(--nav-bottom))}[data-v-985eaeb2] .phila-navbar-search,.phila-navbar .phila-navbar-search[data-v-985eaeb2]{flex:0 0 auto;align-items:center}:is([data-v-985eaeb2] .phila-navbar-search,.phila-navbar .phila-navbar-search[data-v-985eaeb2]) button{background-color:var(--Schemes-Primary)}

package/dist/index.d.ts

@@ -0,0 +1,44 @@
+import { BaseProps } from '@phila/phila-ui-core';
+import { Component } from 'vue';
+export { default as AppHeader } from './AppHeader.vue';
+export interface CollapseProps {
+    collapseGroup?: string;
+}
+export interface NavbarBurgerProps extends CollapseProps {
+    mobileNav?: Component;
+}
+export interface NavbarSearchProps extends CollapseProps {
+    search?: Component;
+}
+export interface NavbarLinksProps extends CollapseProps {
+    links?: NavLink[];
+}
+export interface BrandingImage {
+    src: string;
+    href: string;
+    altText: string;
+}
+export interface BrandingLink {
+    text: string;
+    href: string;
+}
+export interface NavbarBrand {
+    brandingImage?: BrandingImage;
+    brandingLink?: BrandingLink;
+}
+export interface NavLink {
+    text: string;
+    href: string;
+    subLinks?: NavLink[];
+    subNav?: Component;
+}
+export interface NavBarProps extends NavbarBurgerProps, NavbarSearchProps, NavbarLinksProps {
+    id: string;
+    sticky?: boolean;
+    navbarBrand?: NavbarBrand;
+}
+export interface AppHeaderProps extends BaseProps, NavBarProps {
+    showTrustedSite?: boolean;
+    translations?: Component;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AAErC,MAAM,WAAW,aAAa;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,iBAAkB,SAAQ,aAAa;IACtD,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AACD,MAAM,WAAW,iBAAkB,SAAQ,aAAa;IACtD,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AACD,MAAM,WAAW,gBAAiB,SAAQ,aAAa;IACrD,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC;CACnB;AACD,MAAM,WAAW,aAAa;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;CACjB;AACD,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACd;AACD,MAAM,WAAW,WAAW;IAC1B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B;AAED,MAAM,WAAW,OAAO;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC;IACrB,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAED,MAAM,WAAW,WAAY,SAAQ,iBAAiB,EAAE,iBAAiB,EAAE,gBAAgB;IACzF,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B;AAED,MAAM,WAAW,cAAe,SAAQ,SAAS,EAAE,WAAW;IAC5D,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B"}

package/dist/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./index.css');const e=require("vue"),y=require("@fortawesome/vue-fontawesome");var K={prefix:"fas",iconName:"magnifying-glass",icon:[512,512,[128269,"search"],"f002","M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376C296.3 401.1 253.9 416 208 416 93.1 416 0 322.9 0 208S93.1 0 208 0 416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"]},q=K,F={prefix:"fas",iconName:"xmark",icon:[384,512,[128473,10005,10006,10060,215,"close","multiply","remove","times"],"f00d","M55.1 73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L147.2 256 9.9 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192.5 301.3 329.9 438.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.8 256 375.1 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192.5 210.7 55.1 73.4z"]},Q=F,D=F,R={prefix:"fas",iconName:"lock",icon:[384,512,[128274],"f023","M128 96l0 64 128 0 0-64c0-35.3-28.7-64-64-64s-64 28.7-64 64zM64 160l0-64C64 25.3 121.3-32 192-32S320 25.3 320 96l0 64c35.3 0 64 28.7 64 64l0 224c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 224c0-35.3 28.7-64 64-64z"]},U={prefix:"fas",iconName:"caret-up",icon:[320,512,[],"f0d8","M140.3 135.2c12.6-10.3 31.1-9.5 42.8 2.2l128 128c9.2 9.2 11.9 22.9 6.9 34.9S301.4 320 288.5 320l-256 0c-12.9 0-24.6-7.8-29.6-19.8S.7 274.5 9.9 265.4l128-128 2.4-2.2z"]},j={prefix:"fas",iconName:"caret-down",icon:[320,512,[],"f0d7","M140.3 376.8c12.6 10.2 31.1 9.5 42.8-2.2l128-128c9.2-9.2 11.9-22.9 6.9-34.9S301.4 192 288.5 192l-256 0c-12.9 0-24.6 7.8-29.6 19.8S.7 237.5 9.9 246.6l128 128 2.4 2.2z"]},X={prefix:"fas",iconName:"building-columns",icon:[512,512,["bank","institution","museum","university"],"f19c","M271.9 20.2c-9.8-5.6-21.9-5.6-31.8 0l-224 128c-12.6 7.2-18.8 22-15.1 36S17.5 208 32 208l32 0 0 208 0 0-51.2 38.4C4.7 460.4 0 469.9 0 480 0 497.7 14.3 512 32 512l448 0c17.7 0 32-14.3 32-32 0-10.1-4.7-19.6-12.8-25.6l-51.2-38.4 0-208 32 0c14.5 0 27.2-9.8 30.9-23.8s-2.5-28.8-15.1-36l-224-128zM400 208l0 208-64 0 0-208 64 0zm-112 0l0 208-64 0 0-208 64 0zm-112 0l0 208-64 0 0-208 64 0zM256 96a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"]},Y={prefix:"fas",iconName:"bars",icon:[448,512,["navicon"],"f0c9","M0 96C0 78.3 14.3 64 32 64l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 128C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 288c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32L32 448c-17.7 0-32-14.3-32-32s14.3-32 32-32l384 0c17.7 0 32 14.3 32 32z"]},Z={prefix:"fas",iconName:"circle-info",icon:[512,512,["info-circle"],"f05a","M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zM224 160a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm-8 64l48 0c13.3 0 24 10.7 24 24l0 88 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l24 0 0-64-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24z"]},P=Z;const W="data:image/svg+xml,%3csvg%20width='16'%20height='11'%20viewBox='0%200%2016%2011'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3crect%20width='16'%20height='11'%20fill='url(%23pattern0_61022_1867)'/%3e%3cdefs%3e%3cpattern%20id='pattern0_61022_1867'%20patternContentUnits='objectBoundingBox'%20width='1'%20height='1'%3e%3cuse%20xlink:href='%23image0_61022_1867'%20transform='scale(0.0625%200.0909091)'/%3e%3c/pattern%3e%3cimage%20id='image0_61022_1867'%20width='16'%20height='11'%20preserveAspectRatio='none'%20xlink:href='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAALCAMAAABBPP0LAAAAG1BMVEUdM7EeNLIeM7HgQCDaPh/bPh/bPx/////bPyBEby41AAAAUElEQVQI123MNw4CABDEwD3jC/9/MQ1BQrgeOSkIqYe2o2FZtthXgQLgbHVMZdlsfUQFQnHtjP1+8BUhBDKOqtmfot6ojqPzR7TjdU+f6vkED+IDPhTBcMAAAAAASUVORK5CYII='/%3e%3c/defs%3e%3c/svg%3e";e.ref("");e.reactive({validateOnBlur:!1,validateOnInput:!1,validateOnChange:!1,validateOnMount:!1,required:!1,isValid:!0,errors:[]});const g=e.ref({}),k=e.ref(),N=400,M=e.ref(null);function G(t){const o=t?.group??"global",l=(a,d)=>{g.value[o][a]=d},n=(a,d)=>{g.value[o]={[a]:d}},c=a=>g.value[o][a]??!1,r=a=>{l(a,!c(a))},s=a=>{n(a,!c(a))},i=()=>{g.value[o]={}},u=a=>{a.key==="Escape"&&(l(t.id,!1),m())},v=a=>{if(!t)return;const d=a.target,[f]=Object.keys(g.value[o]).filter($=>g.value[o][$]===!0),E=document.getElementById(f),T=document.querySelector(`[aria-controls="${f}"]`),L=d.getAttribute("aria-controls")===f||T?.contains(a.target);E&&!E.contains(d)&&!L&&(l(t.id,!1),m())},p=()=>{t&&(k.value=setTimeout(()=>{l(t.id,!1),m()},N))},h=()=>{t&&t.mouseOverToggle===!0&&(M.value=t.id,k.value=setTimeout(()=>{B()},N))},w=()=>{t&&t.mouseOverToggle===!0&&(M.value=null,clearTimeout(k.value),k.value=setTimeout(()=>{M.value!==t.id&&(l(t.id,!1),m())},N))},_=a=>{if(!t)return;const{relatedTarget:d}=a;if(!d||d.getAttribute("aria-controls")===t.id)return;const f=document.getElementById(t.id);f&&f.contains(d)||(clearTimeout(k.value),k.value=setTimeout(()=>{t.openSingle?n(t.id,!1):l(t.id,!1),m()},N))},A=()=>{t&&(t.outsideClickClose&&(document.addEventListener("click",v),document.addEventListener("touchend",v)),t.escapeKeyClose&&document.addEventListener("keydown",u))},m=()=>{document.removeEventListener("click",v),document.removeEventListener("touchend",v),document.removeEventListener("keydown",u),document.removeEventListener("scroll",p)},x=a=>{t&&(a?.preventDefault(),clearTimeout(k.value),A())},S=a=>{t&&(x(a),t.openSingle?s(t.id):r(t.id))},B=a=>{t&&(x(a),t.openSingle?n(t.id,!0):l(t.id,!0))};return e.onBeforeMount(()=>{g.value[o]||i()}),e.onUnmounted(()=>{m()}),{state:g,timeout:k,toggle:r,toggleSingle:s,setCollapsed:l,setSingleCollapsed:n,isCollapsed:c,reset:i,onMouseEnter:h,onMouseLeave:w,focusChange:_,onClickToggle:S,onClickOpen:B}}const J={id:"trusted-site",class:"has-background-ghost-gray is-flex is-justify-space-between"},ee={class:"trusted-wrap"},te={class:"hidden-tablet trusted-toggle is-flex is-align-center"},ne=["src"],ae=["aria-label","aria-expanded"],oe={class:"icon","aria-hidden":"true"},le={class:"hidden-desktop trusted-toggle is-flex is-align-center"},ie=["aria-label","aria-expanded"],se={class:"icon","aria-hidden":"true"},re={key:0,class:"trusted-translation is-flex is-align-center"},ce=["hidden"],de={class:"trusted-site-info-content content has-text-body-small is-flex is-justify-space-between"},ue={class:"info-item-wrap is-flex"},me={class:"info-item is-flex is-12-mobile is-align-flex-start is-flex-1 my-4"},fe={class:"trusted-icon is-flex is-flex-column has-text-center"},ve={class:"icon circle-icon p-3 mb-2"},pe={class:"info-item is-flex is-12-mobile is-align-flex-start is-flex-1 my-4"},he={class:"trusted-icon is-flex is-flex-column has-text-center"},ge={class:"icon circle-icon p-3 mb-2"},ke={class:"info-content-close mt-4"},be=e.defineComponent({__name:"TrustedSite",setup(t){const o=e.useSlots(),{isCollapsed:l,onClickToggle:n}=G({id:"trusted-site-info",escapeKeyClose:!0}),c=e.computed(()=>l("trusted-site-info"));return(r,s)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createElementVNode("div",J,[e.createElementVNode("div",ee,[e.createElementVNode("div",te,[e.createElementVNode("img",{src:e.unref(W),alt:"",class:"icon"},null,8,ne),s[4]||(s[4]=e.createElementVNode("div",{class:"content mx-2"},"An official website of the City of Philadelphia government",-1)),e.createElementVNode("button",{class:"phila-button is-extra-small","aria-label":`${c.value?"Close":"Open"} Trusted Site information panel`,"aria-controls":"trusted-site-info","aria-expanded":c.value,onClick:s[0]||(s[0]=(...i)=>e.unref(n)&&e.unref(n)(...i))},[s[3]||(s[3]=e.createTextVNode(" Here's how you know ",-1)),e.createElementVNode("span",oe,[e.createVNode(e.unref(y.FontAwesomeIcon),{icon:c.value?e.unref(U):e.unref(j)},null,8,["icon"])])],8,ae)]),e.createElementVNode("div",le,[e.createElementVNode("button",{class:"phila-button is-extra-small","aria-label":`${c.value?"Close":"Open"} Trusted Site information panel`,"aria-controls":"trusted-site-info","aria-expanded":c.value,onClick:s[1]||(s[1]=(...i)=>e.unref(n)&&e.unref(n)(...i))},[s[5]||(s[5]=e.createTextVNode(" An official website ",-1)),e.createElementVNode("span",se,[e.createVNode(e.unref(y.FontAwesomeIcon),{icon:e.unref(P)},null,8,["icon"])])],8,ie)])]),e.unref(o).translation?(e.openBlock(),e.createElementBlock("div",re,[e.renderSlot(r.$slots,"translation",{},void 0,!0)])):e.createCommentVNode("",!0)]),e.createElementVNode("div",{id:"trusted-site-info",class:"has-background-secondary px-6",hidden:!c.value},[e.createElementVNode("div",de,[e.createElementVNode("div",ue,[e.createElementVNode("div",me,[e.createElementVNode("div",fe,[e.createElementVNode("div",ve,[e.createVNode(e.unref(y.FontAwesomeIcon),{icon:e.unref(R)},null,8,["icon"])]),s[6]||(s[6]=e.createElementVNode("span",{class:"has-text-bold"},"https://",-1))]),s[7]||(s[7]=e.createElementVNode("div",{class:"trusted-text m-4"},[e.createTextVNode(" The "),e.createElementVNode("strong",null,"https://"),e.createTextVNode(" in the address bar means your information is encrypted and can not be accessed by anyone else ")],-1))]),e.createElementVNode("div",pe,[e.createElementVNode("div",he,[e.createElementVNode("span",ge,[e.createVNode(e.unref(y.FontAwesomeIcon),{icon:e.unref(X)},null,8,["icon"])]),s[8]||(s[8]=e.createElementVNode("span",{class:"has-text-bold"},".gov",-1))]),s[9]||(s[9]=e.createElementVNode("div",{class:"trusted-text m-4"},"Only government entities in the U.S. can end in .gov",-1))])]),e.createElementVNode("div",ke,[e.createElementVNode("button",{class:"phila-button phila-button--primary icon-button is-extra-small","aria-label":"Close Trusted Site information panel",onClick:s[2]||(s[2]=(...i)=>e.unref(n)&&e.unref(n)(...i))},[e.createVNode(e.unref(y.FontAwesomeIcon),{icon:e.unref(Q)},null,8,["icon"])])])])],8,ce)],64))}}),H=(t,o)=>{const l=t.__vccOpts||t;for(const[n,c]of o)l[n]=c;return l},Ce=H(be,[["__scopeId","data-v-75d8aee7"]]);e.ref("");e.reactive({validateOnBlur:!1,validateOnInput:!1,validateOnChange:!1,validateOnMount:!1,required:!1,isValid:!0,errors:[]});const b=e.ref({}),C=e.ref(),V=400,O=e.ref(null);function ye(t){const o=t?.group??"global",l=(a,d)=>{b.value[o][a]=d},n=(a,d)=>{b.value[o]={[a]:d}},c=a=>b.value[o][a]??!1,r=a=>{l(a,!c(a))},s=a=>{n(a,!c(a))},i=()=>{b.value[o]={}},u=a=>{a.key==="Escape"&&(l(t.id,!1),m())},v=a=>{if(!t)return;const d=a.target,[f]=Object.keys(b.value[o]).filter($=>b.value[o][$]===!0),E=document.getElementById(f),T=document.querySelector(`[aria-controls="${f}"]`),L=d.getAttribute("aria-controls")===f||T?.contains(a.target);E&&!E.contains(d)&&!L&&(l(t.id,!1),m())},p=()=>{t&&(C.value=setTimeout(()=>{l(t.id,!1),m()},V))},h=()=>{t&&t.mouseOverToggle===!0&&(O.value=t.id,C.value=setTimeout(()=>{B()},V))},w=()=>{t&&t.mouseOverToggle===!0&&(O.value=null,clearTimeout(C.value),C.value=setTimeout(()=>{O.value!==t.id&&(l(t.id,!1),m())},V))},_=a=>{if(!t)return;const{relatedTarget:d}=a;if(!d||d.getAttribute("aria-controls")===t.id)return;const f=document.getElementById(t.id);f&&f.contains(d)||(clearTimeout(C.value),C.value=setTimeout(()=>{t.openSingle?n(t.id,!1):l(t.id,!1),m()},V))},A=()=>{t&&(t.outsideClickClose&&(document.addEventListener("click",v),document.addEventListener("touchend",v)),t.escapeKeyClose&&document.addEventListener("keydown",u))},m=()=>{document.removeEventListener("click",v),document.removeEventListener("touchend",v),document.removeEventListener("keydown",u),document.removeEventListener("scroll",p)},x=a=>{t&&(a?.preventDefault(),clearTimeout(C.value),A())},S=a=>{t&&(x(a),t.openSingle?s(t.id):r(t.id))},B=a=>{t&&(x(a),t.openSingle?n(t.id,!0):l(t.id,!0))};return e.onBeforeMount(()=>{b.value[o]||i()}),e.onUnmounted(()=>{m()}),{state:b,timeout:C,toggle:r,toggleSingle:s,setCollapsed:l,setSingleCollapsed:n,isCollapsed:c,reset:i,onMouseEnter:h,onMouseLeave:w,focusChange:_,onClickToggle:S,onClickOpen:B}}const xe=["data-toggle","aria-label","aria-expanded","aria-controls"],z=e.defineComponent({__name:"CollapsePanel",props:{className:{},id:{},group:{default:void 0},blurClose:{type:Boolean,default:!1},openSingle:{type:Boolean,default:!1},mouseOverToggle:{type:Boolean,default:!1},outsideClickClose:{type:Boolean,default:!1},escapeKeyClose:{type:Boolean,default:!1},toggleAttrs:{default:void 0}},setup(t){const o=t,{isCollapsed:l,onMouseEnter:n,onMouseLeave:c,onClickToggle:r,onClickOpen:s,focusChange:i}=ye(o),u=e.computed(()=>l(o.id));return(v,p)=>(e.openBlock(),e.createElementBlock("div",{onMouseenter:p[1]||(p[1]=(...h)=>e.unref(n)&&e.unref(n)(...h)),onMouseleave:p[2]||(p[2]=(...h)=>e.unref(c)&&e.unref(c)(...h)),onFocusout:p[3]||(p[3]=(...h)=>e.unref(i)&&e.unref(i)(...h))},[e.renderSlot(v.$slots,"toggle",e.normalizeProps(e.guardReactiveProps({open:u.value,ariaLabel:u.value?"Close panel":"Open panel",ariaExpanded:u.value,ariaControls:t.id,onClickToggle:e.unref(r),onClickOpen:e.unref(s),focusChange:e.unref(i),onClick:e.unref(r)})),()=>[e.createElementVNode("button",e.mergeProps({"data-toggle":t.id,"aria-label":u.value?"Close panel":"Open panel","aria-expanded":u.value,"aria-controls":t.id},t.toggleAttrs,{onClick:p[0]||(p[0]=e.withModifiers((...h)=>e.unref(r)&&e.unref(r)(...h),["prevent"]))}),null,16,xe)]),e.renderSlot(v.$slots,"default",e.normalizeProps(e.guardReactiveProps({id:t.id,open:u.value,onClickToggle:e.unref(r),focusChange:e.unref(i),hidden:!u.value})))],32))}}),Be=["aria-controls","aria-expanded","aria-label","onClick"],Ee={class:"icon"},Ne=["id","hidden"],Ve=e.defineComponent({__name:"NavbarBurger",props:{mobileNav:{},collapseGroup:{}},setup(t){return(o,l)=>(e.openBlock(),e.createBlock(e.unref(z),{id:"mobile-nav",group:t.collapseGroup,"outside-click-close":"","escape-key-close":"","blur-close":"","open-single":""},{toggle:e.withCtx(n=>[e.createElementVNode("button",{class:e.normalizeClass(["phila-navbar-burger phila-button icon-button",{"phila-navbar-item-flyout-active":n.open}]),"aria-controls":n.ariaControls,"aria-expanded":n.open,"aria-label":`${n.open?"Close":"Open"} mobile navigation panel`,onClick:n.onClick},[e.createElementVNode("span",Ee,[e.createVNode(e.unref(y.FontAwesomeIcon),{icon:n.open?e.unref(D):e.unref(Y)},null,8,["icon"])])],10,Be)]),default:e.withCtx(n=>[e.createElementVNode("div",{id:n.id,class:"phila-mobile-nav",hidden:!n.open},[e.renderSlot(o.$slots,"mobile-nav",{},()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.mobileNav)))])],8,Ne)]),_:3},8,["group"]))}}),we=["href"],_e=["href","aria-controls","aria-expanded","onKeypress","onTouchend","onClick"],Ae=["id","hidden"],Se={key:0,class:"content nav-flyout has-background-ghost-gray px-6 py-4",tabindex:"-1"},Te={class:"is-flex is-flex-column is-flex-wrap-wrap",style:{gap:"var(--spacing-4xl)"}},Le=["href"],$e=e.defineComponent({__name:"NavbarLinks",props:{links:{},collapseGroup:{}},setup(t){const o=n=>!!(n.subLinks||n.subNav),l=n=>`main-nav-${n.text.split(" ").join("-").toLowerCase().replace(/[^a-z0-9-]/g,"")}`;return(n,c)=>(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.links,(r,s)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[o(r)?(e.openBlock(),e.createBlock(e.unref(z),{id:l(r),key:`collapse-${s}`,group:t.collapseGroup,"outside-click-close":"","escape-key-close":"","blur-close":"","mouse-over-toggle":"","open-single":"",class:"phila-navbar-link-list-item"},{toggle:e.withCtx(i=>[e.createElementVNode("a",{href:r.href,class:e.normalizeClass(["phila-navbar-link px-4",{"phila-navbar-item-flyout-active":i.open}]),"aria-controls":i.ariaControls,"aria-expanded":i.open,tabindex:"0",onKeypress:e.withKeys(i.onClick,["enter"]),onTouchend:i.onClick,onClick:i.onClick},[e.createTextVNode(e.toDisplayString(r.text)+" ",1),e.createVNode(e.unref(y.FontAwesomeIcon),{class:"ml-1",icon:i.open?e.unref(U):e.unref(j)},null,8,["icon"])],42,_e)]),default:e.withCtx(i=>[(e.openBlock(),e.createElementBlock("div",{id:i.id,key:r.text,hidden:!i.open},[r.subLinks?(e.openBlock(),e.createElementBlock("div",Se,[e.createElementVNode("ul",Te,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.subLinks,u=>(e.openBlock(),e.createElementBlock("li",{key:u.text,class:"sub-nav-link is-flex is-align-center",style:{width:"150px"}},[e.createElementVNode("a",{href:u.href,class:"has-text-link has-text-weight-medium",tabindex:"0"},e.toDisplayString(u.text),9,Le)]))),128))])])):(e.openBlock(),e.createBlock(e.resolveDynamicComponent(r.subNav),{key:1}))],8,Ae))]),_:2},1032,["id","group"])):(e.openBlock(),e.createElementBlock("div",{key:`link-${s}`,class:"phila-navbar-link-list-item"},[e.createElementVNode("a",{href:r.href,class:"phila-navbar-link px-4",tabindex:"0"},e.toDisplayString(r.text),9,we)]))],64))),256))}}),Me={href:"/",class:"phila-navbar-item phila-navbar-brand-logo",tabindex:"0"},Oe=["src","alt"],ze=e.defineComponent({inheritAttrs:!1,__name:"NavbarBrandLogo",props:{src:{},href:{},altText:{}},setup(t){const o=e.useAttrs();return(l,n)=>(e.openBlock(),e.createElementBlock("a",Me,[e.createElementVNode("img",e.mergeProps({src:t.src,alt:t.altText,class:"phila-navbar-logo",width:"150"},e.unref(o)),null,16,Oe)]))}}),Ie={class:"pr-4"},Fe=["aria-controls","aria-expanded","aria-label","onClick"],De={class:"icon"},Ue=["id","hidden"],je=e.defineComponent({__name:"NavbarSearch",props:{search:{},collapseGroup:{}},setup(t){return(o,l)=>(e.openBlock(),e.createBlock(e.unref(z),{id:"navbar-search",group:t.collapseGroup,"outside-click-close":"","escape-key-close":"","blur-close":"","open-single":""},{toggle:e.withCtx(n=>[e.createElementVNode("div",Ie,[e.createElementVNode("button",{class:e.normalizeClass(["phila-button phila-button--primary icon-button is-small",{"phila-navbar-item-flyout-active":n.open}]),"aria-controls":n.ariaControls,"aria-expanded":n.open,"aria-label":`${n.open?"Close":"Open"} search panel`,onClick:n.onClick},[e.createElementVNode("span",De,[e.createVNode(e.unref(y.FontAwesomeIcon),{icon:n.open?e.unref(D):e.unref(q)},null,8,["icon"])])],10,Fe)])]),default:e.withCtx(n=>[e.createElementVNode("div",{id:n.id,class:"nav-flyout is-12",hidden:!n.open},[e.renderSlot(o.$slots,"default",{},()=>[t.search&&n.open?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.search),{key:0})):e.createCommentVNode("",!0)])],8,Ue)]),_:3},8,["group"]))}});function Ge(t,o){let l;return(...n)=>{l!==void 0&&window.clearTimeout(l),l=window.setTimeout(()=>{t(...n)},o)}}const He={class:"phila-navbar-brand"},Ke={class:"phila-navbar-item phila-navbar-brand-link hidden-tablet"},qe={key:0,class:"content"},Qe=["href"],Re={class:"phila-navbar-item phila-navbar-list is-flex is-align-center is-justify-space-between content has-text-label-default hidden-tablet"},Xe={class:"phila-navbar-search"},I="5rem",Ye=e.defineComponent({__name:"index",props:{id:{},sticky:{type:Boolean},navbarBrand:{},mobileNav:{},collapseGroup:{},search:{},links:{default:()=>[{text:"Home",href:"#"}]}},setup(t){const o=t,{state:l}=G(),n=e.useTemplateRef("navBarElement"),c=e.ref(I),r=e.ref(0),s=Ge(()=>{const i=(n.value?.offsetTop||0)+(n.value?.offsetHeight||0);c.value=!o.sticky||window.innerWidth<1024?i+"px":I,r.value=i},100);return e.watch(()=>l.value,s,{deep:!0,immediate:!0}),e.onMounted(()=>{window.addEventListener("resize",s)}),e.onUnmounted(()=>{window.removeEventListener("resize",s)}),(i,u)=>(e.openBlock(),e.createElementBlock("nav",{ref_key:"navBarElement",ref:n,class:e.normalizeClass(["phila-navbar has-background-primary",{"is-sticky-desktop":t.sticky}]),"aria-label":"Main navigation",style:e.normalizeStyle(`--nav-height:${c.value};--nav-bottom:${r.value}px`)},[e.renderSlot(i.$slots,"navbar-burger",{},()=>[t.mobileNav?(e.openBlock(),e.createBlock(Ve,{key:0,"mobile-nav":t.mobileNav,"collapse-group":t.id},null,8,["mobile-nav","collapse-group"])):e.createCommentVNode("",!0)],!0),e.createElementVNode("div",He,[e.renderSlot(i.$slots,"navbar-logo",{},()=>[t.navbarBrand?.brandingImage?(e.openBlock(),e.createBlock(ze,e.normalizeProps(e.mergeProps({key:0},t.navbarBrand.brandingImage)),null,16)):e.createCommentVNode("",!0)],!0),e.createElementVNode("div",Ke,[e.renderSlot(i.$slots,"navbar-brand-link",{},()=>[t.navbarBrand?.brandingLink?(e.openBlock(),e.createElementBlock("div",qe,[e.createElementVNode("a",{tabindex:"0",href:t.navbarBrand.brandingLink.href,class:"has-text-underline"},e.toDisplayString(t.navbarBrand.brandingLink.text),9,Qe)])):e.createCommentVNode("",!0)],!0)])]),e.createElementVNode("div",Re,[e.renderSlot(i.$slots,"navbar-links",{},()=>[t.links?(e.openBlock(),e.createBlock($e,{key:0,links:t.links,"collapse-group":t.id},null,8,["links","collapse-group"])):e.createCommentVNode("",!0)],!0)]),e.createElementVNode("div",Xe,[e.renderSlot(i.$slots,"navbar-search",{},()=>[t.search?(e.openBlock(),e.createBlock(je,{key:0,search:t.search,"collapse-group":t.id},null,8,["search","collapse-group"])):e.createCommentVNode("",!0)],!0)])],6))}}),Ze=H(Ye,[["__scopeId","data-v-985eaeb2"]]),Pe=e.defineComponent({__name:"AppHeader",props:{showTrustedSite:{type:Boolean,default:!0},translations:{default:void 0},className:{},id:{default:"main-nav"},sticky:{type:Boolean,default:!0},navbarBrand:{default:void 0},mobileNav:{default:void 0},collapseGroup:{},search:{default:void 0},links:{default:void 0}},setup(t){return(o,l)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[t.showTrustedSite?(e.openBlock(),e.createBlock(Ce,{key:0},{translation:e.withCtx(()=>[e.renderSlot(o.$slots,"translations",{},()=>[t.translations?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.translations),{key:0})):e.createCommentVNode("",!0)])]),_:3})):e.createCommentVNode("",!0),e.createVNode(Ze,{id:t.id,sticky:t.sticky,"mobile-nav":t.mobileNav,links:t.links,"navbar-brand":t.navbarBrand,search:t.search},null,8,["id","sticky","mobile-nav","links","navbar-brand","search"])],64))}});exports.AppHeader=Pe;