@underlayerdev/ui 0.2.0 → 0.4.0
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.
|
@@ -1672,6 +1672,89 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
|
|
|
1672
1672
|
args: ['content']
|
|
1673
1673
|
}], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: true }] }], expandLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandLabel", required: false }] }], collapseLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseLabel", required: false }] }] } });
|
|
1674
1674
|
|
|
1675
|
+
/**
|
|
1676
|
+
* Mobile-only bottom navigation bar, styled like an app's tab bar
|
|
1677
|
+
* (icon-above-label items, one highlighted as active). Hidden above the
|
|
1678
|
+
* 'md' breakpoint (1024px) by the component's own CSS — no wrapper class or
|
|
1679
|
+
* media query is needed in the consuming app.
|
|
1680
|
+
*
|
|
1681
|
+
* Project `ul-dock-item`s directly; there is no data-driven `items` input,
|
|
1682
|
+
* since each item typically needs its own `routerLink`.
|
|
1683
|
+
*
|
|
1684
|
+
* @example
|
|
1685
|
+
* <ul-dock>
|
|
1686
|
+
* <ul-dock-item icon="home" label="Home" routerLink="/home" routerLinkActive="ul-dock-item--active" />
|
|
1687
|
+
* <ul-dock-item icon="search" label="Search" routerLink="/search" routerLinkActive="ul-dock-item--active" />
|
|
1688
|
+
* </ul-dock>
|
|
1689
|
+
*/
|
|
1690
|
+
class DockComponent {
|
|
1691
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: DockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1692
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.0", type: DockComponent, isStandalone: true, selector: "ul-dock", ngImport: i0, template: "<nav class=\"ul-dock\" role=\"navigation\" aria-label=\"Primary\">\n <ng-content />\n</nav>\n", styles: [".ul-rich-text{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400;color:#fff}.ul-rich-text p,.ul-rich-text ul,.ul-rich-text ol,.ul-rich-text blockquote,.ul-rich-text pre{margin-top:0;margin-bottom:16px}.ul-rich-text:last-child,.ul-rich-text p:last-child,.ul-rich-text ul:last-child,.ul-rich-text ol:last-child,.ul-rich-text blockquote:last-child,.ul-rich-text pre:last-child{margin-bottom:0}.ul-rich-text h1,.ul-rich-text h2,.ul-rich-text h3,.ul-rich-text h4,.ul-rich-text h5,.ul-rich-text h6{margin-top:32px;margin-bottom:12px;font-weight:1000}.ul-rich-text h1{font-family:Ultra Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Ultra Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Ultra Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Ultra Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Ultra Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:1000}.ul-rich-text ul,.ul-rich-text ol{padding-left:24px}.ul-rich-text ul ul,.ul-rich-text ul ol,.ul-rich-text ol ul,.ul-rich-text ol ol{margin-top:8px;margin-bottom:8px}.ul-rich-text li{margin-top:4px;margin-bottom:4px}.ul-rich-text strong{font-weight:800}.ul-rich-text code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text em{font-style:italic}.ul-rich-text a{color:#c2a8ff;text-decoration:underline;text-decoration-thickness:1px}.ul-rich-text a:hover{color:#d6c5ff}.ul-rich-text a:active{color:#a781ff}.ul-rich-text pre{padding:16px;border-radius:8px;background-color:#3b3b3b;overflow-x:auto}.ul-rich-text pre code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text blockquote{margin-left:0;padding-left:16px;border-left-width:2px;border-left-style:solid;border-left-color:#ffffff1a;color:#ffffffb3}.ul-rich-text--muted{color:#ffffffb3}.ul-rich-text--inverse,.ul-rich-text--inverse a{color:#000}.ul-rich-text--inverse a:hover,.ul-rich-text--inverse a:active{color:#000000b3}.ul-rich-text--body-m{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-rich-text--compact p,.ul-rich-text--compact ul,.ul-rich-text--compact ol,.ul-rich-text--compact blockquote,.ul-rich-text--compact pre{margin-bottom:8px}.ul-rich-text--compact h1,.ul-rich-text--compact h2,.ul-rich-text--compact h3,.ul-rich-text--compact h4,.ul-rich-text--compact h5,.ul-rich-text--compact h6{margin-top:16px;margin-bottom:8px}.ul-dock{min-height:48px;display:flex;align-items:center;justify-content:space-around;padding:8px 16px;padding-bottom:calc(8px + env(safe-area-inset-bottom));background-color:#0a0a0a;border-top:1px solid rgba(255,255,255,.1);display:none;position:fixed;bottom:0;left:0;right:0;z-index:100}@media(max-width:1279px){.ul-dock{display:flex}}@media(min-width:1024px){.ul-dock{display:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1693
|
+
}
|
|
1694
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: DockComponent, decorators: [{
|
|
1695
|
+
type: Component,
|
|
1696
|
+
args: [{ selector: 'ul-dock', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<nav class=\"ul-dock\" role=\"navigation\" aria-label=\"Primary\">\n <ng-content />\n</nav>\n", styles: [".ul-rich-text{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400;color:#fff}.ul-rich-text p,.ul-rich-text ul,.ul-rich-text ol,.ul-rich-text blockquote,.ul-rich-text pre{margin-top:0;margin-bottom:16px}.ul-rich-text:last-child,.ul-rich-text p:last-child,.ul-rich-text ul:last-child,.ul-rich-text ol:last-child,.ul-rich-text blockquote:last-child,.ul-rich-text pre:last-child{margin-bottom:0}.ul-rich-text h1,.ul-rich-text h2,.ul-rich-text h3,.ul-rich-text h4,.ul-rich-text h5,.ul-rich-text h6{margin-top:32px;margin-bottom:12px;font-weight:1000}.ul-rich-text h1{font-family:Ultra Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Ultra Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Ultra Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Ultra Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Ultra Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:1000}.ul-rich-text ul,.ul-rich-text ol{padding-left:24px}.ul-rich-text ul ul,.ul-rich-text ul ol,.ul-rich-text ol ul,.ul-rich-text ol ol{margin-top:8px;margin-bottom:8px}.ul-rich-text li{margin-top:4px;margin-bottom:4px}.ul-rich-text strong{font-weight:800}.ul-rich-text code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text em{font-style:italic}.ul-rich-text a{color:#c2a8ff;text-decoration:underline;text-decoration-thickness:1px}.ul-rich-text a:hover{color:#d6c5ff}.ul-rich-text a:active{color:#a781ff}.ul-rich-text pre{padding:16px;border-radius:8px;background-color:#3b3b3b;overflow-x:auto}.ul-rich-text pre code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text blockquote{margin-left:0;padding-left:16px;border-left-width:2px;border-left-style:solid;border-left-color:#ffffff1a;color:#ffffffb3}.ul-rich-text--muted{color:#ffffffb3}.ul-rich-text--inverse,.ul-rich-text--inverse a{color:#000}.ul-rich-text--inverse a:hover,.ul-rich-text--inverse a:active{color:#000000b3}.ul-rich-text--body-m{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-rich-text--compact p,.ul-rich-text--compact ul,.ul-rich-text--compact ol,.ul-rich-text--compact blockquote,.ul-rich-text--compact pre{margin-bottom:8px}.ul-rich-text--compact h1,.ul-rich-text--compact h2,.ul-rich-text--compact h3,.ul-rich-text--compact h4,.ul-rich-text--compact h5,.ul-rich-text--compact h6{margin-top:16px;margin-bottom:8px}.ul-dock{min-height:48px;display:flex;align-items:center;justify-content:space-around;padding:8px 16px;padding-bottom:calc(8px + env(safe-area-inset-bottom));background-color:#0a0a0a;border-top:1px solid rgba(255,255,255,.1);display:none;position:fixed;bottom:0;left:0;right:0;z-index:100}@media(max-width:1279px){.ul-dock{display:flex}}@media(min-width:1024px){.ul-dock{display:none}}\n"] }]
|
|
1697
|
+
}] });
|
|
1698
|
+
|
|
1699
|
+
/** Place on the element projected into [ul-dock-item-content] so the dock item renders custom content instead of its default icon+label. */
|
|
1700
|
+
class DockItemContentSlotDirective {
|
|
1701
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: DockItemContentSlotDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
1702
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.0", type: DockItemContentSlotDirective, isStandalone: true, selector: "[ul-dock-item-content]", ngImport: i0 });
|
|
1703
|
+
}
|
|
1704
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: DockItemContentSlotDirective, decorators: [{
|
|
1705
|
+
type: Directive,
|
|
1706
|
+
args: [{
|
|
1707
|
+
selector: '[ul-dock-item-content]',
|
|
1708
|
+
standalone: true,
|
|
1709
|
+
}]
|
|
1710
|
+
}] });
|
|
1711
|
+
|
|
1712
|
+
/**
|
|
1713
|
+
* A single tab in a `ul-dock`. Renders an icon above a label and tints both
|
|
1714
|
+
* when `active`. Attach `routerLink`/`routerLinkActive` (or any other
|
|
1715
|
+
* directive) directly on `ul-dock-item` for navigation.
|
|
1716
|
+
*
|
|
1717
|
+
* For the common case, content is data-driven via `icon`/`label`. To fully
|
|
1718
|
+
* customize an item's content (e.g. a differently laid-out icon+label pair),
|
|
1719
|
+
* project it with `[ul-dock-item-content]` — this replaces the default
|
|
1720
|
+
* icon/label rendering entirely. `badge` and `variant` apply regardless of
|
|
1721
|
+
* which content path is used.
|
|
1722
|
+
*
|
|
1723
|
+
* @example
|
|
1724
|
+
* <ul-dock-item icon="home" label="Home" routerLink="/home" routerLinkActive="ul-dock-item--active" />
|
|
1725
|
+
* <ul-dock-item icon="bell_on" badge="3" routerLink="/notifications" />
|
|
1726
|
+
* <ul-dock-item variant="accent" routerLink="/listings/new">
|
|
1727
|
+
* <span ul-dock-item-content>
|
|
1728
|
+
* <ul-icon icon="plus" size="6" />
|
|
1729
|
+
* <span class="ul-dock-item__label">New</span>
|
|
1730
|
+
* </span>
|
|
1731
|
+
* </ul-dock-item>
|
|
1732
|
+
*/
|
|
1733
|
+
class DockItemComponent {
|
|
1734
|
+
icon = input(/* @ts-ignore */
|
|
1735
|
+
...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
1736
|
+
label = input('', /* @ts-ignore */
|
|
1737
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
1738
|
+
active = input(false, /* @ts-ignore */
|
|
1739
|
+
...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
|
|
1740
|
+
disabled = input(false, /* @ts-ignore */
|
|
1741
|
+
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
1742
|
+
badge = input(/* @ts-ignore */
|
|
1743
|
+
...(ngDevMode ? [undefined, { debugName: "badge" }] : /* istanbul ignore next */ []));
|
|
1744
|
+
variant = input('default', /* @ts-ignore */
|
|
1745
|
+
...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
1746
|
+
contentSlot = contentChild(DockItemContentSlotDirective, /* @ts-ignore */
|
|
1747
|
+
...(ngDevMode ? [{ debugName: "contentSlot" }] : /* istanbul ignore next */ []));
|
|
1748
|
+
hasContentSlot = computed(() => !!this.contentSlot(), /* @ts-ignore */
|
|
1749
|
+
...(ngDevMode ? [{ debugName: "hasContentSlot" }] : /* istanbul ignore next */ []));
|
|
1750
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: DockItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1751
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: DockItemComponent, isStandalone: true, selector: "ul-dock-item", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "contentSlot", first: true, predicate: DockItemContentSlotDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<button\n type=\"button\"\n class=\"ul-dock-item\"\n [class.ul-dock-item--active]=\"active()\"\n [class.ul-dock-item--accent]=\"variant() === 'accent'\"\n [disabled]=\"disabled()\"\n [attr.aria-current]=\"active() ? 'page' : null\"\n>\n @if (hasContentSlot()) {\n <ng-content select=\"[ul-dock-item-content]\" />\n } @else {\n <ul-icon [icon]=\"icon()!\" size=\"6\" />\n @if (label()) {\n <span class=\"ul-dock-item__label\">{{ label() }}</span>\n }\n }\n @if (badge()) {\n <span class=\"ul-dock-item__badge\">{{ badge() }}</span>\n }\n</button>\n", styles: [".ul-rich-text{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400;color:#fff}.ul-rich-text p,.ul-rich-text ul,.ul-rich-text ol,.ul-rich-text blockquote,.ul-rich-text pre{margin-top:0;margin-bottom:16px}.ul-rich-text:last-child,.ul-rich-text p:last-child,.ul-rich-text ul:last-child,.ul-rich-text ol:last-child,.ul-rich-text blockquote:last-child,.ul-rich-text pre:last-child{margin-bottom:0}.ul-rich-text h1,.ul-rich-text h2,.ul-rich-text h3,.ul-rich-text h4,.ul-rich-text h5,.ul-rich-text h6{margin-top:32px;margin-bottom:12px;font-weight:1000}.ul-rich-text h1{font-family:Ultra Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Ultra Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Ultra Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Ultra Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Ultra Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:1000}.ul-rich-text ul,.ul-rich-text ol{padding-left:24px}.ul-rich-text ul ul,.ul-rich-text ul ol,.ul-rich-text ol ul,.ul-rich-text ol ol{margin-top:8px;margin-bottom:8px}.ul-rich-text li{margin-top:4px;margin-bottom:4px}.ul-rich-text strong{font-weight:800}.ul-rich-text code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text em{font-style:italic}.ul-rich-text a{color:#c2a8ff;text-decoration:underline;text-decoration-thickness:1px}.ul-rich-text a:hover{color:#d6c5ff}.ul-rich-text a:active{color:#a781ff}.ul-rich-text pre{padding:16px;border-radius:8px;background-color:#3b3b3b;overflow-x:auto}.ul-rich-text pre code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text blockquote{margin-left:0;padding-left:16px;border-left-width:2px;border-left-style:solid;border-left-color:#ffffff1a;color:#ffffffb3}.ul-rich-text--muted{color:#ffffffb3}.ul-rich-text--inverse,.ul-rich-text--inverse a{color:#000}.ul-rich-text--inverse a:hover,.ul-rich-text--inverse a:active{color:#000000b3}.ul-rich-text--body-m{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-rich-text--compact p,.ul-rich-text--compact ul,.ul-rich-text--compact ol,.ul-rich-text--compact blockquote,.ul-rich-text--compact pre{margin-bottom:8px}.ul-rich-text--compact h1,.ul-rich-text--compact h2,.ul-rich-text--compact h3,.ul-rich-text--compact h4,.ul-rich-text--compact h5,.ul-rich-text--compact h6{margin-top:16px;margin-bottom:8px}.ul-dock-item{position:relative;cursor:pointer;border:none;background:none;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;flex:1;padding:4px;border-radius:8px;color:#ffffffb3;font-family:Ultra Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:400}.ul-dock-item:focus-visible,.ul-dock-item:focus{outline-offset:2px;outline:rgba(255,255,255,.3) solid 2px}.ul-dock-item--active{color:#c2a8ff}.ul-dock-item--accent{color:#fff}.ul-dock-item--accent .ul-icon{background-color:#6f3de0;border-radius:4096px;padding:8px;box-sizing:content-box}.ul-dock-item--accent:hover .ul-icon{background-color:#7e4af7}.ul-dock-item--accent.ul-dock-item--active .ul-icon{background-color:#5935af}.ul-dock-item__label{line-height:1}.ul-dock-item__badge{position:absolute;top:4px;right:calc(50% - 24px);min-width:16px;height:16px;padding:0 4px;border-radius:4096px;background-color:#c33a3a;color:#fff;font-size:10px;line-height:16px;text-align:center}.ul-dock-item:disabled,.ul-dock-item[disabled]{cursor:not-allowed;color:#ffffff4d}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ul-icon", inputs: ["size", "weight", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1752
|
+
}
|
|
1753
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: DockItemComponent, decorators: [{
|
|
1754
|
+
type: Component,
|
|
1755
|
+
args: [{ selector: 'ul-dock-item', standalone: true, imports: [IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<button\n type=\"button\"\n class=\"ul-dock-item\"\n [class.ul-dock-item--active]=\"active()\"\n [class.ul-dock-item--accent]=\"variant() === 'accent'\"\n [disabled]=\"disabled()\"\n [attr.aria-current]=\"active() ? 'page' : null\"\n>\n @if (hasContentSlot()) {\n <ng-content select=\"[ul-dock-item-content]\" />\n } @else {\n <ul-icon [icon]=\"icon()!\" size=\"6\" />\n @if (label()) {\n <span class=\"ul-dock-item__label\">{{ label() }}</span>\n }\n }\n @if (badge()) {\n <span class=\"ul-dock-item__badge\">{{ badge() }}</span>\n }\n</button>\n", styles: [".ul-rich-text{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400;color:#fff}.ul-rich-text p,.ul-rich-text ul,.ul-rich-text ol,.ul-rich-text blockquote,.ul-rich-text pre{margin-top:0;margin-bottom:16px}.ul-rich-text:last-child,.ul-rich-text p:last-child,.ul-rich-text ul:last-child,.ul-rich-text ol:last-child,.ul-rich-text blockquote:last-child,.ul-rich-text pre:last-child{margin-bottom:0}.ul-rich-text h1,.ul-rich-text h2,.ul-rich-text h3,.ul-rich-text h4,.ul-rich-text h5,.ul-rich-text h6{margin-top:32px;margin-bottom:12px;font-weight:1000}.ul-rich-text h1{font-family:Ultra Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Ultra Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Ultra Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Ultra Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Ultra Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:1000}.ul-rich-text ul,.ul-rich-text ol{padding-left:24px}.ul-rich-text ul ul,.ul-rich-text ul ol,.ul-rich-text ol ul,.ul-rich-text ol ol{margin-top:8px;margin-bottom:8px}.ul-rich-text li{margin-top:4px;margin-bottom:4px}.ul-rich-text strong{font-weight:800}.ul-rich-text code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text em{font-style:italic}.ul-rich-text a{color:#c2a8ff;text-decoration:underline;text-decoration-thickness:1px}.ul-rich-text a:hover{color:#d6c5ff}.ul-rich-text a:active{color:#a781ff}.ul-rich-text pre{padding:16px;border-radius:8px;background-color:#3b3b3b;overflow-x:auto}.ul-rich-text pre code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text blockquote{margin-left:0;padding-left:16px;border-left-width:2px;border-left-style:solid;border-left-color:#ffffff1a;color:#ffffffb3}.ul-rich-text--muted{color:#ffffffb3}.ul-rich-text--inverse,.ul-rich-text--inverse a{color:#000}.ul-rich-text--inverse a:hover,.ul-rich-text--inverse a:active{color:#000000b3}.ul-rich-text--body-m{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-rich-text--compact p,.ul-rich-text--compact ul,.ul-rich-text--compact ol,.ul-rich-text--compact blockquote,.ul-rich-text--compact pre{margin-bottom:8px}.ul-rich-text--compact h1,.ul-rich-text--compact h2,.ul-rich-text--compact h3,.ul-rich-text--compact h4,.ul-rich-text--compact h5,.ul-rich-text--compact h6{margin-top:16px;margin-bottom:8px}.ul-dock-item{position:relative;cursor:pointer;border:none;background:none;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;flex:1;padding:4px;border-radius:8px;color:#ffffffb3;font-family:Ultra Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:400}.ul-dock-item:focus-visible,.ul-dock-item:focus{outline-offset:2px;outline:rgba(255,255,255,.3) solid 2px}.ul-dock-item--active{color:#c2a8ff}.ul-dock-item--accent{color:#fff}.ul-dock-item--accent .ul-icon{background-color:#6f3de0;border-radius:4096px;padding:8px;box-sizing:content-box}.ul-dock-item--accent:hover .ul-icon{background-color:#7e4af7}.ul-dock-item--accent.ul-dock-item--active .ul-icon{background-color:#5935af}.ul-dock-item__label{line-height:1}.ul-dock-item__badge{position:absolute;top:4px;right:calc(50% - 24px);min-width:16px;height:16px;padding:0 4px;border-radius:4096px;background-color:#c33a3a;color:#fff;font-size:10px;line-height:16px;text-align:center}.ul-dock-item:disabled,.ul-dock-item[disabled]{cursor:not-allowed;color:#ffffff4d}\n"] }]
|
|
1756
|
+
}], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], contentSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DockItemContentSlotDirective), { isSignal: true }] }] } });
|
|
1757
|
+
|
|
1675
1758
|
class ListItemComponent {
|
|
1676
1759
|
checkbox = contentChild(CheckboxComponent, /* @ts-ignore */
|
|
1677
1760
|
...(ngDevMode ? [{ debugName: "checkbox" }] : /* istanbul ignore next */ []));
|
|
@@ -2548,6 +2631,9 @@ class NavbarComponent {
|
|
|
2548
2631
|
/** When true, show the sidebar toggle button even when a logo slot is projected. */
|
|
2549
2632
|
showSidebarToggle = input(false, /* @ts-ignore */
|
|
2550
2633
|
...(ngDevMode ? [{ debugName: "showSidebarToggle" }] : /* istanbul ignore next */ []));
|
|
2634
|
+
/** When false, the projected search slot is always rendered expanded (no icon-toggle collapse on mobile) — use for apps that want search visible and full-width at every viewport. */
|
|
2635
|
+
searchCollapsible = input(true, /* @ts-ignore */
|
|
2636
|
+
...(ngDevMode ? [{ debugName: "searchCollapsible" }] : /* istanbul ignore next */ []));
|
|
2551
2637
|
/** Emitted when the user clicks the sidebar toggle. Parent should flip the open state. */
|
|
2552
2638
|
sidebarToggle = output();
|
|
2553
2639
|
logoSlot = contentChild(NavbarLogoSlotDirective, /* @ts-ignore */
|
|
@@ -2564,6 +2650,8 @@ class NavbarComponent {
|
|
|
2564
2650
|
...(ngDevMode ? [{ debugName: "hasLogoSlot" }] : /* istanbul ignore next */ []));
|
|
2565
2651
|
hasSearchSlot = computed(() => !this.isMinimal() && !!this.searchSlot(), /* @ts-ignore */
|
|
2566
2652
|
...(ngDevMode ? [{ debugName: "hasSearchSlot" }] : /* istanbul ignore next */ []));
|
|
2653
|
+
showSearchToggle = computed(() => this.hasSearchSlot() && this.searchCollapsible(), /* @ts-ignore */
|
|
2654
|
+
...(ngDevMode ? [{ debugName: "showSearchToggle" }] : /* istanbul ignore next */ []));
|
|
2567
2655
|
hasAvatarSlot = computed(() => !this.isMinimal() && !!this.avatarSlot(), /* @ts-ignore */
|
|
2568
2656
|
...(ngDevMode ? [{ debugName: "hasAvatarSlot" }] : /* istanbul ignore next */ []));
|
|
2569
2657
|
hasAppNameSlot = computed(() => !this.hasLogoSlot() && !!this.appNameSlot(), /* @ts-ignore */
|
|
@@ -2579,12 +2667,12 @@ class NavbarComponent {
|
|
|
2579
2667
|
this.sidebarToggle.emit();
|
|
2580
2668
|
}
|
|
2581
2669
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2582
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: NavbarComponent, isStandalone: true, selector: "ul-navbar", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, logoHref: { classPropertyName: "logoHref", publicName: "logoHref", isSignal: true, isRequired: false, transformFunction: null }, logoSrc: { classPropertyName: "logoSrc", publicName: "logoSrc", isSignal: true, isRequired: false, transformFunction: null }, logoAlt: { classPropertyName: "logoAlt", publicName: "logoAlt", isSignal: true, isRequired: false, transformFunction: null }, avatarSrc: { classPropertyName: "avatarSrc", publicName: "avatarSrc", isSignal: true, isRequired: false, transformFunction: null }, avatarInitials: { classPropertyName: "avatarInitials", publicName: "avatarInitials", isSignal: true, isRequired: false, transformFunction: null }, avatarAlt: { classPropertyName: "avatarAlt", publicName: "avatarAlt", isSignal: true, isRequired: false, transformFunction: null }, sidebarOpen: { classPropertyName: "sidebarOpen", publicName: "sidebarOpen", isSignal: true, isRequired: false, transformFunction: null }, showSidebarToggle: { classPropertyName: "showSidebarToggle", publicName: "showSidebarToggle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sidebarToggle: "sidebarToggle" }, queries: [{ propertyName: "logoSlot", first: true, predicate: NavbarLogoSlotDirective, descendants: true, isSignal: true }, { propertyName: "searchSlot", first: true, predicate: NavbarSearchSlotDirective, descendants: true, isSignal: true }, { propertyName: "avatarSlot", first: true, predicate: NavbarAvatarSlotDirective, descendants: true, isSignal: true }, { propertyName: "appNameSlot", first: true, predicate: NavbarAppNameSlotDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<nav class=\"ul-navbar\" role=\"navigation\">\n <div class=\"ul-navbar__bar\">\n <div class=\"ul-navbar__logo\">\n @if (showToggle()) {\n <ul-button\n theme=\"ghost-white\"\n [iconOnly]=\"true\"\n size=\"sm\"\n class=\"ul-navbar__sidebar_toggle\"\n ariaLabel=\"Open menu\"\n [attr.aria-expanded]=\"sidebarOpen()\"\n (buttonClick)=\"toggleSidebar()\"\n >\n <ul-icon icon=\"menu\" size=\"6\" />\n </ul-button>\n }\n @if (hasLogoSlot()) {\n <ng-content select=\"[ul-navbar-logo]\" />\n } @else {\n <img [src]=\"logoSrc()\" [alt]=\"logoAlt()\" class=\"ul-navbar__logo-img\" height=\"64\" />\n @if (hasAppNameSlot()) {\n <a [href]=\"logoHref()\" class=\"ul-navbar__logo-link ul-navbar__logo-text\">\n <ng-content select=\"[ul-navbar-app-name]\" />\n </a>\n }\n }\n </div>\n\n @if (!isMinimal()) {\n @if (
|
|
2670
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: NavbarComponent, isStandalone: true, selector: "ul-navbar", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, logoHref: { classPropertyName: "logoHref", publicName: "logoHref", isSignal: true, isRequired: false, transformFunction: null }, logoSrc: { classPropertyName: "logoSrc", publicName: "logoSrc", isSignal: true, isRequired: false, transformFunction: null }, logoAlt: { classPropertyName: "logoAlt", publicName: "logoAlt", isSignal: true, isRequired: false, transformFunction: null }, avatarSrc: { classPropertyName: "avatarSrc", publicName: "avatarSrc", isSignal: true, isRequired: false, transformFunction: null }, avatarInitials: { classPropertyName: "avatarInitials", publicName: "avatarInitials", isSignal: true, isRequired: false, transformFunction: null }, avatarAlt: { classPropertyName: "avatarAlt", publicName: "avatarAlt", isSignal: true, isRequired: false, transformFunction: null }, sidebarOpen: { classPropertyName: "sidebarOpen", publicName: "sidebarOpen", isSignal: true, isRequired: false, transformFunction: null }, showSidebarToggle: { classPropertyName: "showSidebarToggle", publicName: "showSidebarToggle", isSignal: true, isRequired: false, transformFunction: null }, searchCollapsible: { classPropertyName: "searchCollapsible", publicName: "searchCollapsible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sidebarToggle: "sidebarToggle" }, queries: [{ propertyName: "logoSlot", first: true, predicate: NavbarLogoSlotDirective, descendants: true, isSignal: true }, { propertyName: "searchSlot", first: true, predicate: NavbarSearchSlotDirective, descendants: true, isSignal: true }, { propertyName: "avatarSlot", first: true, predicate: NavbarAvatarSlotDirective, descendants: true, isSignal: true }, { propertyName: "appNameSlot", first: true, predicate: NavbarAppNameSlotDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<nav class=\"ul-navbar\" role=\"navigation\">\n <div class=\"ul-navbar__bar\">\n <div class=\"ul-navbar__logo\">\n @if (showToggle()) {\n <ul-button\n theme=\"ghost-white\"\n [iconOnly]=\"true\"\n size=\"sm\"\n class=\"ul-navbar__sidebar_toggle\"\n ariaLabel=\"Open menu\"\n [attr.aria-expanded]=\"sidebarOpen()\"\n (buttonClick)=\"toggleSidebar()\"\n >\n <ul-icon icon=\"menu\" size=\"6\" />\n </ul-button>\n }\n @if (hasLogoSlot()) {\n <ng-content select=\"[ul-navbar-logo]\" />\n } @else {\n <img [src]=\"logoSrc()\" [alt]=\"logoAlt()\" class=\"ul-navbar__logo-img\" height=\"64\" />\n @if (hasAppNameSlot()) {\n <a [href]=\"logoHref()\" class=\"ul-navbar__logo-link ul-navbar__logo-text\">\n <ng-content select=\"[ul-navbar-app-name]\" />\n </a>\n }\n }\n </div>\n\n @if (!isMinimal()) {\n @if (showSearchToggle()) {\n <ul-button\n theme=\"ghost-white\"\n [iconOnly]=\"true\"\n class=\"ul-navbar__search-toggle\"\n ariaLabel=\"Toggle search\"\n [attr.aria-expanded]=\"searchExpanded()\"\n (buttonClick)=\"toggleSearch()\"\n >\n <ul-icon icon=\"search\" size=\"6\" />\n </ul-button>\n }\n\n <div\n class=\"ul-navbar__search-wrapper\"\n [class.ul-navbar__search-wrapper--expanded]=\"searchExpanded() || !searchCollapsible()\"\n >\n <ng-content select=\"[ul-navbar-search]\" />\n </div>\n\n <div class=\"ul-navbar__avatar\">\n @if (hasAvatarSlot()) {\n <ng-content select=\"[ul-navbar-avatar]\" />\n } @else if (avatarSrc() || avatarInitials()) {\n <ul-avatar\n [src]=\"avatarSrc()\"\n [initials]=\"avatarInitials()\"\n [alt]=\"avatarAlt()\"\n size=\"md\"\n />\n }\n </div>\n }\n </div>\n</nav>\n", styles: [".ul-rich-text{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400;color:#fff}.ul-rich-text p,.ul-rich-text ul,.ul-rich-text ol,.ul-rich-text blockquote,.ul-rich-text pre{margin-top:0;margin-bottom:16px}.ul-rich-text:last-child,.ul-rich-text p:last-child,.ul-rich-text ul:last-child,.ul-rich-text ol:last-child,.ul-rich-text blockquote:last-child,.ul-rich-text pre:last-child{margin-bottom:0}.ul-rich-text h1,.ul-rich-text h2,.ul-rich-text h3,.ul-rich-text h4,.ul-rich-text h5,.ul-rich-text h6{margin-top:32px;margin-bottom:12px;font-weight:1000}.ul-rich-text h1{font-family:Ultra Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Ultra Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Ultra Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Ultra Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Ultra Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:1000}.ul-rich-text ul,.ul-rich-text ol{padding-left:24px}.ul-rich-text ul ul,.ul-rich-text ul ol,.ul-rich-text ol ul,.ul-rich-text ol ol{margin-top:8px;margin-bottom:8px}.ul-rich-text li{margin-top:4px;margin-bottom:4px}.ul-rich-text strong{font-weight:800}.ul-rich-text code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text em{font-style:italic}.ul-rich-text a{color:#c2a8ff;text-decoration:underline;text-decoration-thickness:1px}.ul-rich-text a:hover{color:#d6c5ff}.ul-rich-text a:active{color:#a781ff}.ul-rich-text pre{padding:16px;border-radius:8px;background-color:#3b3b3b;overflow-x:auto}.ul-rich-text pre code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text blockquote{margin-left:0;padding-left:16px;border-left-width:2px;border-left-style:solid;border-left-color:#ffffff1a;color:#ffffffb3}.ul-rich-text--muted{color:#ffffffb3}.ul-rich-text--inverse,.ul-rich-text--inverse a{color:#000}.ul-rich-text--inverse a:hover,.ul-rich-text--inverse a:active{color:#000000b3}.ul-rich-text--body-m{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-rich-text--compact p,.ul-rich-text--compact ul,.ul-rich-text--compact ol,.ul-rich-text--compact blockquote,.ul-rich-text--compact pre{margin-bottom:8px}.ul-rich-text--compact h1,.ul-rich-text--compact h2,.ul-rich-text--compact h3,.ul-rich-text--compact h4,.ul-rich-text--compact h5,.ul-rich-text--compact h6{margin-top:16px;margin-bottom:8px}.ul-navbar{width:100%}.ul-navbar__bar{min-height:48px;display:flex;align-items:center;gap:16px;padding:8px 16px;background-color:#0a0a0a;border-bottom:1px solid rgba(255,255,255,.1)}@media(min-width:1024px){.ul-navbar__bar{padding:12px 24px;gap:24px}}@media(min-width:1280px){.ul-navbar__bar{padding:12px 32px}}.ul-navbar__bar{flex-wrap:wrap}@media(max-width:1279px){.ul-navbar__bar{position:relative;z-index:100}}@media(max-width:1279px){.ul-navbar__sidebar_toggle{display:inline-flex}}.ul-navbar__sidebar_toggle .ul-icon,.ul-navbar__sidebar_toggle .ul-icon:before{background-color:transparent}.ul-navbar__sidebar_toggle :focus-visible{outline:none;box-shadow:0 0 0 2px #ffffff1a}@media(min-width:1024px){.ul-navbar__sidebar_toggle{display:none}}.ul-navbar__logo{display:flex;align-items:center;flex-shrink:0;margin-right:auto;gap:8px}.ul-navbar__logo-link{display:flex;align-items:center;color:inherit;text-decoration:none}.ul-navbar__logo-text{font-family:Ultra Brand;line-height:36px;font-size:24px;letter-spacing:2.4px;font-weight:1000;text-transform:uppercase;color:inherit}@media(min-width:1024px){.ul-navbar__logo-text{display:none}}.ul-navbar__logo-img{display:block;width:auto;object-fit:contain}@media(max-width:1279px){.ul-navbar__search-toggle{display:inline-flex}}@media(min-width:1024px){.ul-navbar__search-toggle{display:none}}.ul-navbar__search-wrapper{flex:1;min-width:0;display:flex;align-items:center}@media(max-width:1279px){.ul-navbar__search-wrapper{flex-basis:100%;order:10;max-height:0;overflow:hidden;opacity:0;transition:max-height .25s cubic-bezier(.4,0,.2,1),opacity .25s cubic-bezier(.4,0,.2,1)}.ul-navbar__search-wrapper--expanded{max-height:80px;opacity:1}}@media(min-width:1024px){.ul-navbar__search-wrapper{flex-basis:auto;order:0;max-height:none;opacity:1}}.ul-navbar__avatar{display:flex;align-items:center;flex-shrink:0}\n"], dependencies: [{ kind: "component", type: AvatarComponent, selector: "ul-avatar", inputs: ["size", "src", "initials", "icon", "alt", "loading"] }, { kind: "component", type: ButtonComponent, selector: "ul-button", inputs: ["size", "theme", "iconOnly", "vertical", "disabled", "type", "ariaLabel"], outputs: ["buttonClick"] }, { kind: "component", type: IconComponent, selector: "ul-icon", inputs: ["size", "weight", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
2583
2671
|
}
|
|
2584
2672
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NavbarComponent, decorators: [{
|
|
2585
2673
|
type: Component,
|
|
2586
|
-
args: [{ selector: 'ul-navbar', standalone: true, imports: [AvatarComponent, ButtonComponent, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<nav class=\"ul-navbar\" role=\"navigation\">\n <div class=\"ul-navbar__bar\">\n <div class=\"ul-navbar__logo\">\n @if (showToggle()) {\n <ul-button\n theme=\"ghost-white\"\n [iconOnly]=\"true\"\n size=\"sm\"\n class=\"ul-navbar__sidebar_toggle\"\n ariaLabel=\"Open menu\"\n [attr.aria-expanded]=\"sidebarOpen()\"\n (buttonClick)=\"toggleSidebar()\"\n >\n <ul-icon icon=\"menu\" size=\"6\" />\n </ul-button>\n }\n @if (hasLogoSlot()) {\n <ng-content select=\"[ul-navbar-logo]\" />\n } @else {\n <img [src]=\"logoSrc()\" [alt]=\"logoAlt()\" class=\"ul-navbar__logo-img\" height=\"64\" />\n @if (hasAppNameSlot()) {\n <a [href]=\"logoHref()\" class=\"ul-navbar__logo-link ul-navbar__logo-text\">\n <ng-content select=\"[ul-navbar-app-name]\" />\n </a>\n }\n }\n </div>\n\n @if (!isMinimal()) {\n @if (
|
|
2587
|
-
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], logoHref: [{ type: i0.Input, args: [{ isSignal: true, alias: "logoHref", required: false }] }], logoSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "logoSrc", required: false }] }], logoAlt: [{ type: i0.Input, args: [{ isSignal: true, alias: "logoAlt", required: false }] }], avatarSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarSrc", required: false }] }], avatarInitials: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarInitials", required: false }] }], avatarAlt: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarAlt", required: false }] }], sidebarOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarOpen", required: false }] }], showSidebarToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSidebarToggle", required: false }] }], sidebarToggle: [{ type: i0.Output, args: ["sidebarToggle"] }], logoSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NavbarLogoSlotDirective), { isSignal: true }] }], searchSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NavbarSearchSlotDirective), { isSignal: true }] }], avatarSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NavbarAvatarSlotDirective), { isSignal: true }] }], appNameSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NavbarAppNameSlotDirective), { isSignal: true }] }] } });
|
|
2674
|
+
args: [{ selector: 'ul-navbar', standalone: true, imports: [AvatarComponent, ButtonComponent, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<nav class=\"ul-navbar\" role=\"navigation\">\n <div class=\"ul-navbar__bar\">\n <div class=\"ul-navbar__logo\">\n @if (showToggle()) {\n <ul-button\n theme=\"ghost-white\"\n [iconOnly]=\"true\"\n size=\"sm\"\n class=\"ul-navbar__sidebar_toggle\"\n ariaLabel=\"Open menu\"\n [attr.aria-expanded]=\"sidebarOpen()\"\n (buttonClick)=\"toggleSidebar()\"\n >\n <ul-icon icon=\"menu\" size=\"6\" />\n </ul-button>\n }\n @if (hasLogoSlot()) {\n <ng-content select=\"[ul-navbar-logo]\" />\n } @else {\n <img [src]=\"logoSrc()\" [alt]=\"logoAlt()\" class=\"ul-navbar__logo-img\" height=\"64\" />\n @if (hasAppNameSlot()) {\n <a [href]=\"logoHref()\" class=\"ul-navbar__logo-link ul-navbar__logo-text\">\n <ng-content select=\"[ul-navbar-app-name]\" />\n </a>\n }\n }\n </div>\n\n @if (!isMinimal()) {\n @if (showSearchToggle()) {\n <ul-button\n theme=\"ghost-white\"\n [iconOnly]=\"true\"\n class=\"ul-navbar__search-toggle\"\n ariaLabel=\"Toggle search\"\n [attr.aria-expanded]=\"searchExpanded()\"\n (buttonClick)=\"toggleSearch()\"\n >\n <ul-icon icon=\"search\" size=\"6\" />\n </ul-button>\n }\n\n <div\n class=\"ul-navbar__search-wrapper\"\n [class.ul-navbar__search-wrapper--expanded]=\"searchExpanded() || !searchCollapsible()\"\n >\n <ng-content select=\"[ul-navbar-search]\" />\n </div>\n\n <div class=\"ul-navbar__avatar\">\n @if (hasAvatarSlot()) {\n <ng-content select=\"[ul-navbar-avatar]\" />\n } @else if (avatarSrc() || avatarInitials()) {\n <ul-avatar\n [src]=\"avatarSrc()\"\n [initials]=\"avatarInitials()\"\n [alt]=\"avatarAlt()\"\n size=\"md\"\n />\n }\n </div>\n }\n </div>\n</nav>\n", styles: [".ul-rich-text{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400;color:#fff}.ul-rich-text p,.ul-rich-text ul,.ul-rich-text ol,.ul-rich-text blockquote,.ul-rich-text pre{margin-top:0;margin-bottom:16px}.ul-rich-text:last-child,.ul-rich-text p:last-child,.ul-rich-text ul:last-child,.ul-rich-text ol:last-child,.ul-rich-text blockquote:last-child,.ul-rich-text pre:last-child{margin-bottom:0}.ul-rich-text h1,.ul-rich-text h2,.ul-rich-text h3,.ul-rich-text h4,.ul-rich-text h5,.ul-rich-text h6{margin-top:32px;margin-bottom:12px;font-weight:1000}.ul-rich-text h1{font-family:Ultra Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Ultra Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Ultra Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Ultra Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Ultra Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:1000}.ul-rich-text ul,.ul-rich-text ol{padding-left:24px}.ul-rich-text ul ul,.ul-rich-text ul ol,.ul-rich-text ol ul,.ul-rich-text ol ol{margin-top:8px;margin-bottom:8px}.ul-rich-text li{margin-top:4px;margin-bottom:4px}.ul-rich-text strong{font-weight:800}.ul-rich-text code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text em{font-style:italic}.ul-rich-text a{color:#c2a8ff;text-decoration:underline;text-decoration-thickness:1px}.ul-rich-text a:hover{color:#d6c5ff}.ul-rich-text a:active{color:#a781ff}.ul-rich-text pre{padding:16px;border-radius:8px;background-color:#3b3b3b;overflow-x:auto}.ul-rich-text pre code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text blockquote{margin-left:0;padding-left:16px;border-left-width:2px;border-left-style:solid;border-left-color:#ffffff1a;color:#ffffffb3}.ul-rich-text--muted{color:#ffffffb3}.ul-rich-text--inverse,.ul-rich-text--inverse a{color:#000}.ul-rich-text--inverse a:hover,.ul-rich-text--inverse a:active{color:#000000b3}.ul-rich-text--body-m{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-rich-text--compact p,.ul-rich-text--compact ul,.ul-rich-text--compact ol,.ul-rich-text--compact blockquote,.ul-rich-text--compact pre{margin-bottom:8px}.ul-rich-text--compact h1,.ul-rich-text--compact h2,.ul-rich-text--compact h3,.ul-rich-text--compact h4,.ul-rich-text--compact h5,.ul-rich-text--compact h6{margin-top:16px;margin-bottom:8px}.ul-navbar{width:100%}.ul-navbar__bar{min-height:48px;display:flex;align-items:center;gap:16px;padding:8px 16px;background-color:#0a0a0a;border-bottom:1px solid rgba(255,255,255,.1)}@media(min-width:1024px){.ul-navbar__bar{padding:12px 24px;gap:24px}}@media(min-width:1280px){.ul-navbar__bar{padding:12px 32px}}.ul-navbar__bar{flex-wrap:wrap}@media(max-width:1279px){.ul-navbar__bar{position:relative;z-index:100}}@media(max-width:1279px){.ul-navbar__sidebar_toggle{display:inline-flex}}.ul-navbar__sidebar_toggle .ul-icon,.ul-navbar__sidebar_toggle .ul-icon:before{background-color:transparent}.ul-navbar__sidebar_toggle :focus-visible{outline:none;box-shadow:0 0 0 2px #ffffff1a}@media(min-width:1024px){.ul-navbar__sidebar_toggle{display:none}}.ul-navbar__logo{display:flex;align-items:center;flex-shrink:0;margin-right:auto;gap:8px}.ul-navbar__logo-link{display:flex;align-items:center;color:inherit;text-decoration:none}.ul-navbar__logo-text{font-family:Ultra Brand;line-height:36px;font-size:24px;letter-spacing:2.4px;font-weight:1000;text-transform:uppercase;color:inherit}@media(min-width:1024px){.ul-navbar__logo-text{display:none}}.ul-navbar__logo-img{display:block;width:auto;object-fit:contain}@media(max-width:1279px){.ul-navbar__search-toggle{display:inline-flex}}@media(min-width:1024px){.ul-navbar__search-toggle{display:none}}.ul-navbar__search-wrapper{flex:1;min-width:0;display:flex;align-items:center}@media(max-width:1279px){.ul-navbar__search-wrapper{flex-basis:100%;order:10;max-height:0;overflow:hidden;opacity:0;transition:max-height .25s cubic-bezier(.4,0,.2,1),opacity .25s cubic-bezier(.4,0,.2,1)}.ul-navbar__search-wrapper--expanded{max-height:80px;opacity:1}}@media(min-width:1024px){.ul-navbar__search-wrapper{flex-basis:auto;order:0;max-height:none;opacity:1}}.ul-navbar__avatar{display:flex;align-items:center;flex-shrink:0}\n"] }]
|
|
2675
|
+
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], logoHref: [{ type: i0.Input, args: [{ isSignal: true, alias: "logoHref", required: false }] }], logoSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "logoSrc", required: false }] }], logoAlt: [{ type: i0.Input, args: [{ isSignal: true, alias: "logoAlt", required: false }] }], avatarSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarSrc", required: false }] }], avatarInitials: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarInitials", required: false }] }], avatarAlt: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarAlt", required: false }] }], sidebarOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarOpen", required: false }] }], showSidebarToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSidebarToggle", required: false }] }], searchCollapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchCollapsible", required: false }] }], sidebarToggle: [{ type: i0.Output, args: ["sidebarToggle"] }], logoSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NavbarLogoSlotDirective), { isSignal: true }] }], searchSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NavbarSearchSlotDirective), { isSignal: true }] }], avatarSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NavbarAvatarSlotDirective), { isSignal: true }] }], appNameSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NavbarAppNameSlotDirective), { isSignal: true }] }] } });
|
|
2588
2676
|
|
|
2589
2677
|
/**
|
|
2590
2678
|
* Extends Angular's CurrencyPipe to use the custom symbol 'ᕫ' for 'UOS' currency code.
|
|
@@ -3716,5 +3804,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
|
|
|
3716
3804
|
* Generated bundle index. Do not edit.
|
|
3717
3805
|
*/
|
|
3718
3806
|
|
|
3719
|
-
export { AccordionComponent, AccordionItemComponent, AreaCodeComponent, AvatarComponent, AvatarGroupComponent, BreadcrumbComponent, ButtonComponent, CalendarComponent, CardComponent, CarouselComponent, CarouselItemComponent, CheckboxComponent, CollapseComponent, CustomCurrencyPipe, DropdownComponent, FileInputComponent, FooterComponent, FormFieldHelperComponent, FormFieldLabelComponent, HeroComponent, IconComponent, ImageNotFoundDirective, InputComponent, ListItemComponent, ModalComponent, NavbarAppNameSlotDirective, NavbarAvatarSlotDirective, NavbarComponent, NavbarLogoSlotDirective, NavbarSearchSlotDirective, PeHeroActionsSlotDirective, PeHeroBadgesSlotDirective, PeHeroContentSlotDirective, PeHeroSubtitleSlotDirective, PeHeroTitleSlotDirective, PillComponent, PriceButtonComponent, RadialComponent, RadioComponent, RadioGroupComponent, RichTextComponent, SearchSelectComponent, SelectComponent, SidebarComponent, SkeletonComponent, StatusComponent, TableComponent, TextareaComponent, TextareaFieldDirective, ToastContainerComponent, ToastService, TooltipComponent, createFormFieldIds, getFormFieldDescribedBy, toastIcon };
|
|
3807
|
+
export { AccordionComponent, AccordionItemComponent, AreaCodeComponent, AvatarComponent, AvatarGroupComponent, BreadcrumbComponent, ButtonComponent, CalendarComponent, CardComponent, CarouselComponent, CarouselItemComponent, CheckboxComponent, CollapseComponent, CustomCurrencyPipe, DockComponent, DockItemComponent, DockItemContentSlotDirective, DropdownComponent, FileInputComponent, FooterComponent, FormFieldHelperComponent, FormFieldLabelComponent, HeroComponent, IconComponent, ImageNotFoundDirective, InputComponent, ListItemComponent, ModalComponent, NavbarAppNameSlotDirective, NavbarAvatarSlotDirective, NavbarComponent, NavbarLogoSlotDirective, NavbarSearchSlotDirective, PeHeroActionsSlotDirective, PeHeroBadgesSlotDirective, PeHeroContentSlotDirective, PeHeroSubtitleSlotDirective, PeHeroTitleSlotDirective, PillComponent, PriceButtonComponent, RadialComponent, RadioComponent, RadioGroupComponent, RichTextComponent, SearchSelectComponent, SelectComponent, SidebarComponent, SkeletonComponent, StatusComponent, TableComponent, TextareaComponent, TextareaFieldDirective, ToastContainerComponent, ToastService, TooltipComponent, createFormFieldIds, getFormFieldDescribedBy, toastIcon };
|
|
3720
3808
|
//# sourceMappingURL=underlayerdev-ui.mjs.map
|