@underlayerdev/ui 0.6.1 → 0.6.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -2682,11 +2682,11 @@ class NavbarComponent {
|
|
|
2682
2682
|
this.sidebarToggle.emit();
|
|
2683
2683
|
}
|
|
2684
2684
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2685
|
-
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
|
|
2685
|
+
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 <!-- Default 'md' size, matching the search toggle below and the\n sidebar's own close button: `sm` capped the icon at 20px (the\n `.ul-btn--sm .ul-icon` rule outranks `.ul-icon-size-*`, so the icon's\n own size input cannot raise it) and gave a 32px tap target. -->\n <ul-button\n theme=\"ghost-white\"\n [iconOnly]=\"true\"\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:1023px){.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;min-width:0}.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:28px;letter-spacing:2.8px;font-weight:1000;text-transform:uppercase;color:inherit;display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(min-width:1024px){.ul-navbar__logo-text{display:none}}.ul-navbar__logo-img{display:block;width:auto;object-fit:contain}@media(max-width:1023px){.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:1023px){.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 });
|
|
2686
2686
|
}
|
|
2687
2687
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NavbarComponent, decorators: [{
|
|
2688
2688
|
type: Component,
|
|
2689
|
-
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
|
|
2689
|
+
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 <!-- Default 'md' size, matching the search toggle below and the\n sidebar's own close button: `sm` capped the icon at 20px (the\n `.ul-btn--sm .ul-icon` rule outranks `.ul-icon-size-*`, so the icon's\n own size input cannot raise it) and gave a 32px tap target. -->\n <ul-button\n theme=\"ghost-white\"\n [iconOnly]=\"true\"\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:1023px){.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;min-width:0}.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:28px;letter-spacing:2.8px;font-weight:1000;text-transform:uppercase;color:inherit;display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(min-width:1024px){.ul-navbar__logo-text{display:none}}.ul-navbar__logo-img{display:block;width:auto;object-fit:contain}@media(max-width:1023px){.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:1023px){.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"] }]
|
|
2690
2690
|
}], 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 }] }] } });
|
|
2691
2691
|
|
|
2692
2692
|
/**
|
|
@@ -3562,13 +3562,13 @@ class SidebarComponent {
|
|
|
3562
3562
|
}
|
|
3563
3563
|
}
|
|
3564
3564
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3565
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: SidebarComponent, isStandalone: true, selector: "ul-sidebar", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, hideItemFocusOutline: { classPropertyName: "hideItemFocusOutline", publicName: "hideItemFocusOutline", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIndex: "selectedIndexChange", open: "openChange", itemSelected: "itemSelected" }, host: { listeners: { "document:keydown.escape": "onEscape()" }, properties: { "attr.aria-hidden": "!open()" } }, ngImport: i0, template: "<div class=\"ul-sidebar\">\n <div\n class=\"ul-sidebar__overlay\"\n [class.ul-sidebar__overlay--visible]=\"open()\"\n [attr.aria-hidden]=\"!open()\"\n (click)=\"onOverlayClick()\"\n ></div>\n\n <aside\n class=\"ul-sidebar__drawer\"\n [class.ul-sidebar__drawer--open]=\"open()\"\n role=\"navigation\"\n [attr.aria-hidden]=\"!open()\"\n >\n <div class=\"ul-sidebar__inner\">\n <header class=\"ul-sidebar__header\">\n @if (open()) {\n <ul-button\n theme=\"ghost-white\"\n [iconOnly]=\"true\"\n class=\"ul-sidebar__close\"\n ariaLabel=\"Close menu\"\n (buttonClick)=\"close()\"\n >\n <ul-icon icon=\"close\" size=\"6\" />\n </ul-button>\n }\n <ng-content select=\"[ul-sidebar-header]\" />\n </header>\n <nav class=\"ul-sidebar__nav ul-scrollable\">\n @if (items().length > 0) {\n @for (item of items(); track $index) {\n <ul-list-item\n [theme]=\"theme()\"\n [disabled]=\"!!item.disabled\"\n [selected]=\"selectedIndex() === $index\"\n [hideFocusOutline]=\"hideItemFocusOutline()\"\n (click)=\"onItemClick(item, $index)\"\n >\n <ng-container ul-list-item-before-label>\n @if (item.leftIcons) {\n @for (icon of item.leftIcons; track icon) {\n <ul-icon size=\"5\" [icon]=\"icon\" />\n }\n }\n </ng-container>\n <ng-container ul-list-item-label>{{ item.label }}</ng-container>\n <ng-container ul-list-item-after-label>\n @if (item.rightIcons) {\n @for (icon of item.rightIcons; track icon) {\n <ul-icon size=\"5\" [icon]=\"icon\" />\n }\n }\n </ng-container>\n </ul-list-item>\n }\n } @else {\n <ng-content select=\"[ul-sidebar-nav]\" />\n }\n </nav>\n <footer class=\"ul-sidebar__footer\">\n <ng-content select=\"[ul-sidebar-footer]\" />\n </footer>\n </div>\n </aside>\n</div>\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-scrollable::-webkit-scrollbar{width:8px;height:8px}.ul-scrollable::-webkit-scrollbar-track{background:transparent;border-radius:4px}.ul-scrollable::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:4px;transition:background-color .15s cubic-bezier(.4,0,.2,1)}.ul-scrollable::-webkit-scrollbar-thumb:hover{background:#fff3}.ul-scrollable{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.1) transparent;overflow:overlay;-webkit-overflow-scrolling:touch}.ul-scrollable::-webkit-scrollbar{opacity:0;transition:opacity .25s cubic-bezier(.4,0,.2,1)}.ul-scrollable:hover::-webkit-scrollbar{opacity:1}.ul-scrollable{scrollbar-width:thin;scrollbar-color:transparent transparent;transition:scrollbar-color .25s cubic-bezier(.4,0,.2,1)}.ul-scrollable:hover{scrollbar-color:rgba(255,255,255,.1) transparent}.ul-sidebar{position:relative;height:100%}.ul-sidebar__overlay{display:none;position:fixed;inset:0;background-color:#000000b3;z-index:900;opacity:0;pointer-events:none;transition:opacity .25s cubic-bezier(.4,0,.2,1)}@media(max-width:1023px){.ul-sidebar__overlay{display:block}}.ul-sidebar__overlay--visible{opacity:1;pointer-events:auto}.ul-sidebar__drawer{position:fixed;top:0;left:0;bottom:0;width:240px;max-width:85vw;height:100%;background-color:#0a0a0a;border-right:1px solid rgba(255,255,255,.1);z-index:1000;display:flex;flex-direction:column;overflow:hidden;transition:transform .25s cubic-bezier(.4,0,.2,1)}@media(max-width:1023px){.ul-sidebar__drawer{transform:translate(-100%)}}@media(max-width:1023px){.ul-sidebar__drawer--open{transform:translate(0)}}@media(min-width:1024px){.ul-sidebar__drawer{position:relative;transform:none;flex-shrink:0}}.ul-sidebar__inner{display:flex;flex-direction:column;height:100%;padding:16px;gap:16px}.ul-sidebar__header{flex-shrink:0;display:flex;align-items:center;gap:8px}@media(min-width:1024px){.ul-sidebar__header .ul-sidebar__close{display:none}}.ul-sidebar__header .ul-sidebar__close .ul-icon,.ul-sidebar__header .ul-sidebar__close .ul-icon:before{background-color:transparent}.ul-sidebar__nav{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:4px}.ul-sidebar__footer{flex-shrink:0;border-top:1px solid rgba(255,255,255,.1);padding-top:16px}\n"], dependencies: [{ 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"] }, { kind: "component", type: ListItemComponent, selector: "ul-list-item", inputs: ["theme", "disabled", "hideFocusOutline", "selected", "loading"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
3565
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: SidebarComponent, isStandalone: true, selector: "ul-sidebar", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, hideItemFocusOutline: { classPropertyName: "hideItemFocusOutline", publicName: "hideItemFocusOutline", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIndex: "selectedIndexChange", open: "openChange", itemSelected: "itemSelected" }, host: { listeners: { "document:keydown.escape": "onEscape()" }, properties: { "attr.aria-hidden": "!open()" } }, ngImport: i0, template: "<div class=\"ul-sidebar\">\n <div\n class=\"ul-sidebar__overlay\"\n [class.ul-sidebar__overlay--visible]=\"open()\"\n [attr.aria-hidden]=\"!open()\"\n (click)=\"onOverlayClick()\"\n ></div>\n\n <aside\n class=\"ul-sidebar__drawer\"\n [class.ul-sidebar__drawer--open]=\"open()\"\n role=\"navigation\"\n [attr.aria-hidden]=\"!open()\"\n >\n <div class=\"ul-sidebar__inner\">\n <header class=\"ul-sidebar__header\">\n @if (open()) {\n <ul-button\n theme=\"ghost-white\"\n [iconOnly]=\"true\"\n class=\"ul-sidebar__close\"\n ariaLabel=\"Close menu\"\n (buttonClick)=\"close()\"\n >\n <ul-icon icon=\"close\" size=\"6\" />\n </ul-button>\n }\n <ng-content select=\"[ul-sidebar-header]\" />\n </header>\n <nav class=\"ul-sidebar__nav ul-scrollable\">\n @if (items().length > 0) {\n @for (item of items(); track $index) {\n <ul-list-item\n [theme]=\"theme()\"\n [disabled]=\"!!item.disabled\"\n [selected]=\"selectedIndex() === $index\"\n [hideFocusOutline]=\"hideItemFocusOutline()\"\n (click)=\"onItemClick(item, $index)\"\n >\n <ng-container ul-list-item-before-label>\n @if (item.leftIcons) {\n @for (icon of item.leftIcons; track icon) {\n <ul-icon size=\"5\" [icon]=\"icon\" />\n }\n }\n </ng-container>\n <ng-container ul-list-item-label>{{ item.label }}</ng-container>\n <ng-container ul-list-item-after-label>\n @if (item.rightIcons) {\n @for (icon of item.rightIcons; track icon) {\n <ul-icon size=\"5\" [icon]=\"icon\" />\n }\n }\n </ng-container>\n </ul-list-item>\n }\n } @else {\n <ng-content select=\"[ul-sidebar-nav]\" />\n }\n </nav>\n <footer class=\"ul-sidebar__footer\">\n <ng-content select=\"[ul-sidebar-footer]\" />\n </footer>\n </div>\n </aside>\n</div>\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-scrollable::-webkit-scrollbar{width:8px;height:8px}.ul-scrollable::-webkit-scrollbar-track{background:transparent;border-radius:4px}.ul-scrollable::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:4px;transition:background-color .15s cubic-bezier(.4,0,.2,1)}.ul-scrollable::-webkit-scrollbar-thumb:hover{background:#fff3}.ul-scrollable{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.1) transparent;overflow:overlay;-webkit-overflow-scrolling:touch}.ul-scrollable::-webkit-scrollbar{opacity:0;transition:opacity .25s cubic-bezier(.4,0,.2,1)}.ul-scrollable:hover::-webkit-scrollbar{opacity:1}.ul-scrollable{scrollbar-width:thin;scrollbar-color:transparent transparent;transition:scrollbar-color .25s cubic-bezier(.4,0,.2,1)}.ul-scrollable:hover{scrollbar-color:rgba(255,255,255,.1) transparent}.ul-sidebar{position:relative;height:100%}.ul-sidebar__overlay{display:none;position:fixed;inset:0;background-color:#000000b3;z-index:900;opacity:0;pointer-events:none;transition:opacity .25s cubic-bezier(.4,0,.2,1)}@media(max-width:1023px){.ul-sidebar__overlay{display:block}}.ul-sidebar__overlay--visible{opacity:1;pointer-events:auto}.ul-sidebar__drawer{position:fixed;top:0;left:0;bottom:0;width:240px;max-width:85vw;height:100%;background-color:#0a0a0a;border-right:1px solid rgba(255,255,255,.1);z-index:1000;display:flex;flex-direction:column;overflow:hidden;transition:transform .25s cubic-bezier(.4,0,.2,1)}@media(max-width:1023px){.ul-sidebar__drawer{transform:translate(-100%)}}@media(max-width:1023px){.ul-sidebar__drawer--open{transform:translate(0)}}@media(min-width:1024px){.ul-sidebar__drawer{position:relative;transform:none;flex-shrink:0}}.ul-sidebar__inner{display:flex;flex-direction:column;height:100%;padding:16px;gap:16px}.ul-sidebar__header{flex-shrink:0;display:flex;align-items:center;gap:8px}@media(min-width:1024px){.ul-sidebar__header .ul-sidebar__close{display:none}}.ul-sidebar__header .ul-sidebar__close .ul-icon,.ul-sidebar__header .ul-sidebar__close .ul-icon:before{background-color:transparent}.ul-sidebar__nav{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:4px}.ul-sidebar__footer{flex-shrink:0;border-top:1px solid rgba(255,255,255,.1);padding-top:16px}@media(max-width:1023px){.ul-sidebar__nav .ul-list-item,.ul-sidebar__footer .ul-list-item{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400;padding:12px}.ul-sidebar__nav .ul-list-item .ul-icon,.ul-sidebar__footer .ul-list-item .ul-icon{font-size:24px;line-height:24px}}\n"], dependencies: [{ 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"] }, { kind: "component", type: ListItemComponent, selector: "ul-list-item", inputs: ["theme", "disabled", "hideFocusOutline", "selected", "loading"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
3566
3566
|
}
|
|
3567
3567
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: SidebarComponent, decorators: [{
|
|
3568
3568
|
type: Component,
|
|
3569
3569
|
args: [{ selector: 'ul-sidebar', standalone: true, imports: [ButtonComponent, IconComponent, ListItemComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
3570
3570
|
'[attr.aria-hidden]': '!open()',
|
|
3571
|
-
}, template: "<div class=\"ul-sidebar\">\n <div\n class=\"ul-sidebar__overlay\"\n [class.ul-sidebar__overlay--visible]=\"open()\"\n [attr.aria-hidden]=\"!open()\"\n (click)=\"onOverlayClick()\"\n ></div>\n\n <aside\n class=\"ul-sidebar__drawer\"\n [class.ul-sidebar__drawer--open]=\"open()\"\n role=\"navigation\"\n [attr.aria-hidden]=\"!open()\"\n >\n <div class=\"ul-sidebar__inner\">\n <header class=\"ul-sidebar__header\">\n @if (open()) {\n <ul-button\n theme=\"ghost-white\"\n [iconOnly]=\"true\"\n class=\"ul-sidebar__close\"\n ariaLabel=\"Close menu\"\n (buttonClick)=\"close()\"\n >\n <ul-icon icon=\"close\" size=\"6\" />\n </ul-button>\n }\n <ng-content select=\"[ul-sidebar-header]\" />\n </header>\n <nav class=\"ul-sidebar__nav ul-scrollable\">\n @if (items().length > 0) {\n @for (item of items(); track $index) {\n <ul-list-item\n [theme]=\"theme()\"\n [disabled]=\"!!item.disabled\"\n [selected]=\"selectedIndex() === $index\"\n [hideFocusOutline]=\"hideItemFocusOutline()\"\n (click)=\"onItemClick(item, $index)\"\n >\n <ng-container ul-list-item-before-label>\n @if (item.leftIcons) {\n @for (icon of item.leftIcons; track icon) {\n <ul-icon size=\"5\" [icon]=\"icon\" />\n }\n }\n </ng-container>\n <ng-container ul-list-item-label>{{ item.label }}</ng-container>\n <ng-container ul-list-item-after-label>\n @if (item.rightIcons) {\n @for (icon of item.rightIcons; track icon) {\n <ul-icon size=\"5\" [icon]=\"icon\" />\n }\n }\n </ng-container>\n </ul-list-item>\n }\n } @else {\n <ng-content select=\"[ul-sidebar-nav]\" />\n }\n </nav>\n <footer class=\"ul-sidebar__footer\">\n <ng-content select=\"[ul-sidebar-footer]\" />\n </footer>\n </div>\n </aside>\n</div>\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-scrollable::-webkit-scrollbar{width:8px;height:8px}.ul-scrollable::-webkit-scrollbar-track{background:transparent;border-radius:4px}.ul-scrollable::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:4px;transition:background-color .15s cubic-bezier(.4,0,.2,1)}.ul-scrollable::-webkit-scrollbar-thumb:hover{background:#fff3}.ul-scrollable{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.1) transparent;overflow:overlay;-webkit-overflow-scrolling:touch}.ul-scrollable::-webkit-scrollbar{opacity:0;transition:opacity .25s cubic-bezier(.4,0,.2,1)}.ul-scrollable:hover::-webkit-scrollbar{opacity:1}.ul-scrollable{scrollbar-width:thin;scrollbar-color:transparent transparent;transition:scrollbar-color .25s cubic-bezier(.4,0,.2,1)}.ul-scrollable:hover{scrollbar-color:rgba(255,255,255,.1) transparent}.ul-sidebar{position:relative;height:100%}.ul-sidebar__overlay{display:none;position:fixed;inset:0;background-color:#000000b3;z-index:900;opacity:0;pointer-events:none;transition:opacity .25s cubic-bezier(.4,0,.2,1)}@media(max-width:1023px){.ul-sidebar__overlay{display:block}}.ul-sidebar__overlay--visible{opacity:1;pointer-events:auto}.ul-sidebar__drawer{position:fixed;top:0;left:0;bottom:0;width:240px;max-width:85vw;height:100%;background-color:#0a0a0a;border-right:1px solid rgba(255,255,255,.1);z-index:1000;display:flex;flex-direction:column;overflow:hidden;transition:transform .25s cubic-bezier(.4,0,.2,1)}@media(max-width:1023px){.ul-sidebar__drawer{transform:translate(-100%)}}@media(max-width:1023px){.ul-sidebar__drawer--open{transform:translate(0)}}@media(min-width:1024px){.ul-sidebar__drawer{position:relative;transform:none;flex-shrink:0}}.ul-sidebar__inner{display:flex;flex-direction:column;height:100%;padding:16px;gap:16px}.ul-sidebar__header{flex-shrink:0;display:flex;align-items:center;gap:8px}@media(min-width:1024px){.ul-sidebar__header .ul-sidebar__close{display:none}}.ul-sidebar__header .ul-sidebar__close .ul-icon,.ul-sidebar__header .ul-sidebar__close .ul-icon:before{background-color:transparent}.ul-sidebar__nav{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:4px}.ul-sidebar__footer{flex-shrink:0;border-top:1px solid rgba(255,255,255,.1);padding-top:16px}\n"] }]
|
|
3571
|
+
}, template: "<div class=\"ul-sidebar\">\n <div\n class=\"ul-sidebar__overlay\"\n [class.ul-sidebar__overlay--visible]=\"open()\"\n [attr.aria-hidden]=\"!open()\"\n (click)=\"onOverlayClick()\"\n ></div>\n\n <aside\n class=\"ul-sidebar__drawer\"\n [class.ul-sidebar__drawer--open]=\"open()\"\n role=\"navigation\"\n [attr.aria-hidden]=\"!open()\"\n >\n <div class=\"ul-sidebar__inner\">\n <header class=\"ul-sidebar__header\">\n @if (open()) {\n <ul-button\n theme=\"ghost-white\"\n [iconOnly]=\"true\"\n class=\"ul-sidebar__close\"\n ariaLabel=\"Close menu\"\n (buttonClick)=\"close()\"\n >\n <ul-icon icon=\"close\" size=\"6\" />\n </ul-button>\n }\n <ng-content select=\"[ul-sidebar-header]\" />\n </header>\n <nav class=\"ul-sidebar__nav ul-scrollable\">\n @if (items().length > 0) {\n @for (item of items(); track $index) {\n <ul-list-item\n [theme]=\"theme()\"\n [disabled]=\"!!item.disabled\"\n [selected]=\"selectedIndex() === $index\"\n [hideFocusOutline]=\"hideItemFocusOutline()\"\n (click)=\"onItemClick(item, $index)\"\n >\n <ng-container ul-list-item-before-label>\n @if (item.leftIcons) {\n @for (icon of item.leftIcons; track icon) {\n <ul-icon size=\"5\" [icon]=\"icon\" />\n }\n }\n </ng-container>\n <ng-container ul-list-item-label>{{ item.label }}</ng-container>\n <ng-container ul-list-item-after-label>\n @if (item.rightIcons) {\n @for (icon of item.rightIcons; track icon) {\n <ul-icon size=\"5\" [icon]=\"icon\" />\n }\n }\n </ng-container>\n </ul-list-item>\n }\n } @else {\n <ng-content select=\"[ul-sidebar-nav]\" />\n }\n </nav>\n <footer class=\"ul-sidebar__footer\">\n <ng-content select=\"[ul-sidebar-footer]\" />\n </footer>\n </div>\n </aside>\n</div>\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-scrollable::-webkit-scrollbar{width:8px;height:8px}.ul-scrollable::-webkit-scrollbar-track{background:transparent;border-radius:4px}.ul-scrollable::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:4px;transition:background-color .15s cubic-bezier(.4,0,.2,1)}.ul-scrollable::-webkit-scrollbar-thumb:hover{background:#fff3}.ul-scrollable{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.1) transparent;overflow:overlay;-webkit-overflow-scrolling:touch}.ul-scrollable::-webkit-scrollbar{opacity:0;transition:opacity .25s cubic-bezier(.4,0,.2,1)}.ul-scrollable:hover::-webkit-scrollbar{opacity:1}.ul-scrollable{scrollbar-width:thin;scrollbar-color:transparent transparent;transition:scrollbar-color .25s cubic-bezier(.4,0,.2,1)}.ul-scrollable:hover{scrollbar-color:rgba(255,255,255,.1) transparent}.ul-sidebar{position:relative;height:100%}.ul-sidebar__overlay{display:none;position:fixed;inset:0;background-color:#000000b3;z-index:900;opacity:0;pointer-events:none;transition:opacity .25s cubic-bezier(.4,0,.2,1)}@media(max-width:1023px){.ul-sidebar__overlay{display:block}}.ul-sidebar__overlay--visible{opacity:1;pointer-events:auto}.ul-sidebar__drawer{position:fixed;top:0;left:0;bottom:0;width:240px;max-width:85vw;height:100%;background-color:#0a0a0a;border-right:1px solid rgba(255,255,255,.1);z-index:1000;display:flex;flex-direction:column;overflow:hidden;transition:transform .25s cubic-bezier(.4,0,.2,1)}@media(max-width:1023px){.ul-sidebar__drawer{transform:translate(-100%)}}@media(max-width:1023px){.ul-sidebar__drawer--open{transform:translate(0)}}@media(min-width:1024px){.ul-sidebar__drawer{position:relative;transform:none;flex-shrink:0}}.ul-sidebar__inner{display:flex;flex-direction:column;height:100%;padding:16px;gap:16px}.ul-sidebar__header{flex-shrink:0;display:flex;align-items:center;gap:8px}@media(min-width:1024px){.ul-sidebar__header .ul-sidebar__close{display:none}}.ul-sidebar__header .ul-sidebar__close .ul-icon,.ul-sidebar__header .ul-sidebar__close .ul-icon:before{background-color:transparent}.ul-sidebar__nav{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:4px}.ul-sidebar__footer{flex-shrink:0;border-top:1px solid rgba(255,255,255,.1);padding-top:16px}@media(max-width:1023px){.ul-sidebar__nav .ul-list-item,.ul-sidebar__footer .ul-list-item{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400;padding:12px}.ul-sidebar__nav .ul-list-item .ul-icon,.ul-sidebar__footer .ul-list-item .ul-icon{font-size:24px;line-height:24px}}\n"] }]
|
|
3572
3572
|
}], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], selectedIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIndex", required: false }] }, { type: i0.Output, args: ["selectedIndexChange"] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], closeOnBackdropClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", required: false }] }], hideItemFocusOutline: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideItemFocusOutline", required: false }] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }], onEscape: [{
|
|
3573
3573
|
type: HostListener,
|
|
3574
3574
|
args: ['document:keydown.escape']
|