@magmonium/one 0.4.40 → 0.4.41
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.
|
@@ -16724,7 +16724,7 @@ var SectionHeaderComponent = class SectionHeaderComponent {
|
|
|
16724
16724
|
},
|
|
16725
16725
|
ngImport: i0,
|
|
16726
16726
|
template: "<!-- One declaration of the row, rendered by whichever branch `spacing` picks.\n Hoisted into a template rather than written twice: an `<ng-content>` may\n appear once per selector in a component, so the duplicated copy caught\n nothing and a header projecting a title rendered it in the `spacing`\n branch alone. -->\n<ng-template #body>\n @if (accordion(); as accordionRef) {\n <div\n class=\"section-header__toggle\"\n [class.section-header__toggle--rotate]=\"toggleRotates()\"\n [class.section-header__toggle--open]=\"accordionRef.isOpen()\"\n [id]=\"accordionRef.headerId\"\n [attr.aria-expanded]=\"accordionRef.isOpen()\"\n [attr.aria-controls]=\"accordionRef.bodyId\"\n >\n <m-button\n [config]=\"{ icon: toggleIconName(), iconOnly: true, variant: 'ghost' }\"\n (clicked)=\"onToggleClick()\" />\n </div>\n }\n @if (showBack()) {\n <div class=\"section-header__back\">\n <m-button\n [config]=\"{ icon: 'chevron-left', iconOnly: true }\"\n (clicked)=\"back.emit()\" />\n </div>\n } @else if (!label() && icon(); as iconName) {\n <!-- Only where no label is written. A header with one hands the icon to\n `m-header`, which draws it inside the heading's line box and so on the\n heading's own centre line. Beside a projected title there is no such\n box to borrow, so the glyph is boxed to the level's line box here and\n centred in it — otherwise it centres against the whole title column,\n which on the Canvas is the label slot's drop rect stacked above the\n heading. -->\n <div class=\"section-header__icon\">\n <m-icon [name]=\"iconName\" />\n </div>\n }\n <div\n class=\"section-header__title\"\n [class.section-header__title--reverse]=\"reverse()\"\n >\n <!-- The title slot is the catch-all rather than a `[label]` one: every\n header already projecting a heading writes it unselected, and a\n selector here would drop that content on the floor. What the design\n page emits — `<span label>` — is caught by it too, nothing else\n claiming the node. -->\n <ng-content />\n <!-- The written label, drawn beside the slot rather than as its\n `ng-content` fallback. A fallback renders only while *nothing* is\n projected, and the design Canvas always projects the slot span —\n empty until a Control is dropped in it — so a fallback there would\n blank the label a header is still configured with. `label` answers\n instead, which no header projecting a title sets. -->\n @if (label()) {\n <m-header\n [level]=\"level()\"\n [label]=\"label()\"\n [icon]=\"icon()\"\n [params]=\"params()\"\n [noTranslate]=\"noTranslate()\" />\n }\n @if (subText(); as sub) {\n <span class=\"section-header__sub\">{{ sub }}</span>\n }\n </div>\n <!-- A FilterGroup projected into the header row, selected by tag rather than\n by an attribute — the same shape a Section catches its `m-action` with.\n A header has room for one icon and not for a row, so a group landing\n here is squeezed by placement (ADR 0025); nothing here enforces that,\n the caller binding `[squeeze]` on the tag it projects. -->\n <div class=\"section-header__filters\">\n <ng-content select=\"m-section-filter-group\" />\n </div>\n @if (actionConfig(); as action) {\n <div class=\"section-header__action\">\n <m-button [config]=\"action\" (clicked)=\"actionClick.emit()\" />\n </div>\n }\n @if (hasMenu()) {\n <div class=\"section-header__menu\">\n <m-context-menu\n [config]=\"menu()\"\n [name]=\"menuName()\"\n [visibilityRule]=\"visibilityRule()\"\n [disableRule]=\"disableRule()\"\n [extraData]=\"extraData()\"\n (action)=\"action.emit($event)\"\n />\n </div>\n }\n</ng-template>\n\n<!-- Always the same two boxes, whether or not a `maxWidth` is in force. The\n border and the sticky backdrop live on the host and keep spanning the\n Section's full width; only this container narrows and is placed by the\n Section's `align`, so the heading lines up with the body under it. -->\n<div class=\"section-header__container\">\n <div class=\"section-header__inner\">\n <ng-container [ngTemplateOutlet]=\"body\" />\n </div>\n</div>\n",
|
|
16727
|
-
styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:flex;align-items:center;gap:.5rem;min-height:var(--section-header-min-height, calc(var(--section-header-py, .5rem) * 2 + 1.25rem));border-bottom:1px solid var(--m-backdrop-border);padding:var(--section-header-py, .85rem) var(--section-px, 1rem);width:100%;grid-column:1/-1}:host(.no-border){border-bottom:none}:host(.spacing){padding:0;width:100%}.section-header__container{width:100%;min-width:0;max-width:var(--m-section-header-max-width, none);margin-inline:0 auto}:host(.box-center) .section-header__container{margin-inline:auto}:host(.box-right) .section-header__container{margin-inline:auto 0}.section-header__inner{display:flex;align-items:center;gap:.5rem;width:100%;min-width:0}.section-header__inner .section-header__title{flex:1;min-width:0;gap:.5rem}:host(.spacing) .section-header__inner{padding:1rem 1.5rem}:host(.has-sidepanel){padding-right:50px}:host(.has-sidepanel.has-menu){padding-right:50px}:host(.spacing.has-sidepanel) .section-header__inner{padding-right:calc(1.5rem + 50px)}:host(.is-sticky-enabled){position:sticky;top:0;z-index:10}:host(.is-sticky
|
|
16727
|
+
styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:flex;align-items:center;gap:.5rem;min-height:var(--section-header-min-height, calc(var(--section-header-py, .5rem) * 2 + 1.25rem));border-bottom:1px solid var(--m-backdrop-border);padding:var(--section-header-py, .85rem) var(--section-px, 1rem);width:100%;grid-column:1/-1}:host(.no-border){border-bottom:none}:host(.spacing){padding:0;width:100%}.section-header__container{width:100%;min-width:0;max-width:var(--m-section-header-max-width, none);margin-inline:0 auto}:host(.box-center) .section-header__container{margin-inline:auto}:host(.box-right) .section-header__container{margin-inline:auto 0}.section-header__inner{display:flex;align-items:center;gap:.5rem;width:100%;min-width:0}.section-header__inner .section-header__title{flex:1;min-width:0;gap:.5rem}:host(.spacing) .section-header__inner{padding:1rem 1.5rem}:host(.has-sidepanel){padding-right:50px}:host(.has-sidepanel.has-menu){padding-right:50px}:host(.spacing.has-sidepanel) .section-header__inner{padding-right:calc(1.5rem + 50px)}:host(.is-sticky-enabled){position:sticky;top:var(--m-section-header-sticky-top, 0);z-index:var(--m-section-header-sticky-z, 10)}:host(.is-sticky){background:color-mix(in srgb,var(--m-background) 80%,transparent);backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%)}:host(.is-accordion){cursor:pointer}.section-header__toggle{display:flex;flex-shrink:0}.section-header__toggle.section-header__toggle--rotate m-button{display:flex;transition:transform .3s cubic-bezier(.4,0,.2,1)}.section-header__toggle.section-header__toggle--rotate.section-header__toggle--open m-button{transform:rotate(180deg)}.section-header__title{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem}m-header{min-width:0}.section-header__title--reverse{flex-direction:column-reverse}.section-header__sub{font-size:.8rem;color:var(--m-text-secondary);line-height:1.2}:host(.align-center){--m-header-justify: center}:host(.align-right){--m-header-justify: flex-end}:host(.has-menu){padding-right:0}:host(.spacing.has-menu) .section-header__inner{padding-right:0}.section-header__filters{display:contents}.section-header__filters m-section-filter-group{width:auto;flex-shrink:0;border-bottom:none}.section-header__back{display:flex;align-items:center;flex-shrink:0}.section-header__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;align-self:flex-start;height:var(--m-section-header-icon-box, 1.5125rem)}.section-header__menu,.section-header__action{margin-left:auto;flex-shrink:0;display:flex;align-items:center}.section-header__action+.section-header__menu{margin-left:0}\n"],
|
|
16728
16728
|
dependencies: [
|
|
16729
16729
|
{
|
|
16730
16730
|
kind: "directive",
|
|
@@ -16856,7 +16856,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
16856
16856
|
"(click)": "onHeaderClick($event)"
|
|
16857
16857
|
},
|
|
16858
16858
|
template: "<!-- One declaration of the row, rendered by whichever branch `spacing` picks.\n Hoisted into a template rather than written twice: an `<ng-content>` may\n appear once per selector in a component, so the duplicated copy caught\n nothing and a header projecting a title rendered it in the `spacing`\n branch alone. -->\n<ng-template #body>\n @if (accordion(); as accordionRef) {\n <div\n class=\"section-header__toggle\"\n [class.section-header__toggle--rotate]=\"toggleRotates()\"\n [class.section-header__toggle--open]=\"accordionRef.isOpen()\"\n [id]=\"accordionRef.headerId\"\n [attr.aria-expanded]=\"accordionRef.isOpen()\"\n [attr.aria-controls]=\"accordionRef.bodyId\"\n >\n <m-button\n [config]=\"{ icon: toggleIconName(), iconOnly: true, variant: 'ghost' }\"\n (clicked)=\"onToggleClick()\" />\n </div>\n }\n @if (showBack()) {\n <div class=\"section-header__back\">\n <m-button\n [config]=\"{ icon: 'chevron-left', iconOnly: true }\"\n (clicked)=\"back.emit()\" />\n </div>\n } @else if (!label() && icon(); as iconName) {\n <!-- Only where no label is written. A header with one hands the icon to\n `m-header`, which draws it inside the heading's line box and so on the\n heading's own centre line. Beside a projected title there is no such\n box to borrow, so the glyph is boxed to the level's line box here and\n centred in it — otherwise it centres against the whole title column,\n which on the Canvas is the label slot's drop rect stacked above the\n heading. -->\n <div class=\"section-header__icon\">\n <m-icon [name]=\"iconName\" />\n </div>\n }\n <div\n class=\"section-header__title\"\n [class.section-header__title--reverse]=\"reverse()\"\n >\n <!-- The title slot is the catch-all rather than a `[label]` one: every\n header already projecting a heading writes it unselected, and a\n selector here would drop that content on the floor. What the design\n page emits — `<span label>` — is caught by it too, nothing else\n claiming the node. -->\n <ng-content />\n <!-- The written label, drawn beside the slot rather than as its\n `ng-content` fallback. A fallback renders only while *nothing* is\n projected, and the design Canvas always projects the slot span —\n empty until a Control is dropped in it — so a fallback there would\n blank the label a header is still configured with. `label` answers\n instead, which no header projecting a title sets. -->\n @if (label()) {\n <m-header\n [level]=\"level()\"\n [label]=\"label()\"\n [icon]=\"icon()\"\n [params]=\"params()\"\n [noTranslate]=\"noTranslate()\" />\n }\n @if (subText(); as sub) {\n <span class=\"section-header__sub\">{{ sub }}</span>\n }\n </div>\n <!-- A FilterGroup projected into the header row, selected by tag rather than\n by an attribute — the same shape a Section catches its `m-action` with.\n A header has room for one icon and not for a row, so a group landing\n here is squeezed by placement (ADR 0025); nothing here enforces that,\n the caller binding `[squeeze]` on the tag it projects. -->\n <div class=\"section-header__filters\">\n <ng-content select=\"m-section-filter-group\" />\n </div>\n @if (actionConfig(); as action) {\n <div class=\"section-header__action\">\n <m-button [config]=\"action\" (clicked)=\"actionClick.emit()\" />\n </div>\n }\n @if (hasMenu()) {\n <div class=\"section-header__menu\">\n <m-context-menu\n [config]=\"menu()\"\n [name]=\"menuName()\"\n [visibilityRule]=\"visibilityRule()\"\n [disableRule]=\"disableRule()\"\n [extraData]=\"extraData()\"\n (action)=\"action.emit($event)\"\n />\n </div>\n }\n</ng-template>\n\n<!-- Always the same two boxes, whether or not a `maxWidth` is in force. The\n border and the sticky backdrop live on the host and keep spanning the\n Section's full width; only this container narrows and is placed by the\n Section's `align`, so the heading lines up with the body under it. -->\n<div class=\"section-header__container\">\n <div class=\"section-header__inner\">\n <ng-container [ngTemplateOutlet]=\"body\" />\n </div>\n</div>\n",
|
|
16859
|
-
styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:flex;align-items:center;gap:.5rem;min-height:var(--section-header-min-height, calc(var(--section-header-py, .5rem) * 2 + 1.25rem));border-bottom:1px solid var(--m-backdrop-border);padding:var(--section-header-py, .85rem) var(--section-px, 1rem);width:100%;grid-column:1/-1}:host(.no-border){border-bottom:none}:host(.spacing){padding:0;width:100%}.section-header__container{width:100%;min-width:0;max-width:var(--m-section-header-max-width, none);margin-inline:0 auto}:host(.box-center) .section-header__container{margin-inline:auto}:host(.box-right) .section-header__container{margin-inline:auto 0}.section-header__inner{display:flex;align-items:center;gap:.5rem;width:100%;min-width:0}.section-header__inner .section-header__title{flex:1;min-width:0;gap:.5rem}:host(.spacing) .section-header__inner{padding:1rem 1.5rem}:host(.has-sidepanel){padding-right:50px}:host(.has-sidepanel.has-menu){padding-right:50px}:host(.spacing.has-sidepanel) .section-header__inner{padding-right:calc(1.5rem + 50px)}:host(.is-sticky-enabled){position:sticky;top:0;z-index:10}:host(.is-sticky
|
|
16859
|
+
styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:flex;align-items:center;gap:.5rem;min-height:var(--section-header-min-height, calc(var(--section-header-py, .5rem) * 2 + 1.25rem));border-bottom:1px solid var(--m-backdrop-border);padding:var(--section-header-py, .85rem) var(--section-px, 1rem);width:100%;grid-column:1/-1}:host(.no-border){border-bottom:none}:host(.spacing){padding:0;width:100%}.section-header__container{width:100%;min-width:0;max-width:var(--m-section-header-max-width, none);margin-inline:0 auto}:host(.box-center) .section-header__container{margin-inline:auto}:host(.box-right) .section-header__container{margin-inline:auto 0}.section-header__inner{display:flex;align-items:center;gap:.5rem;width:100%;min-width:0}.section-header__inner .section-header__title{flex:1;min-width:0;gap:.5rem}:host(.spacing) .section-header__inner{padding:1rem 1.5rem}:host(.has-sidepanel){padding-right:50px}:host(.has-sidepanel.has-menu){padding-right:50px}:host(.spacing.has-sidepanel) .section-header__inner{padding-right:calc(1.5rem + 50px)}:host(.is-sticky-enabled){position:sticky;top:var(--m-section-header-sticky-top, 0);z-index:var(--m-section-header-sticky-z, 10)}:host(.is-sticky){background:color-mix(in srgb,var(--m-background) 80%,transparent);backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%)}:host(.is-accordion){cursor:pointer}.section-header__toggle{display:flex;flex-shrink:0}.section-header__toggle.section-header__toggle--rotate m-button{display:flex;transition:transform .3s cubic-bezier(.4,0,.2,1)}.section-header__toggle.section-header__toggle--rotate.section-header__toggle--open m-button{transform:rotate(180deg)}.section-header__title{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem}m-header{min-width:0}.section-header__title--reverse{flex-direction:column-reverse}.section-header__sub{font-size:.8rem;color:var(--m-text-secondary);line-height:1.2}:host(.align-center){--m-header-justify: center}:host(.align-right){--m-header-justify: flex-end}:host(.has-menu){padding-right:0}:host(.spacing.has-menu) .section-header__inner{padding-right:0}.section-header__filters{display:contents}.section-header__filters m-section-filter-group{width:auto;flex-shrink:0;border-bottom:none}.section-header__back{display:flex;align-items:center;flex-shrink:0}.section-header__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;align-self:flex-start;height:var(--m-section-header-icon-box, 1.5125rem)}.section-header__menu,.section-header__action{margin-left:auto;flex-shrink:0;display:flex;align-items:center}.section-header__action+.section-header__menu{margin-left:0}\n"]
|
|
16860
16860
|
}]
|
|
16861
16861
|
}],
|
|
16862
16862
|
propDecorators: {
|
|
@@ -40620,7 +40620,7 @@ var NavHeaderComponent = class NavHeaderComponent {
|
|
|
40620
40620
|
return trail && trail.length > 0 ? trail : null;
|
|
40621
40621
|
}, ...ngDevMode ? [{ debugName: "_trail" }] : /* istanbul ignore next */ []);
|
|
40622
40622
|
_user = computed(() => this._isUser() ? this.#authStore.user() ?? null : null, ...ngDevMode ? [{ debugName: "_user" }] : /* istanbul ignore next */ []);
|
|
40623
|
-
_header = computed(() => this._isUser() ? null : this._navStore.breadcrumb().header, ...ngDevMode ? [{ debugName: "_header" }] : /* istanbul ignore next */ []);
|
|
40623
|
+
_header = computed(() => this._isSearch() || this._isUser() ? null : this._navStore.breadcrumb().header, ...ngDevMode ? [{ debugName: "_header" }] : /* istanbul ignore next */ []);
|
|
40624
40624
|
constructor() {
|
|
40625
40625
|
effect(() => {
|
|
40626
40626
|
if (!this._isSearch()) this._searchOpen.set(false);
|
|
@@ -40640,9 +40640,16 @@ var NavHeaderComponent = class NavHeaderComponent {
|
|
|
40640
40640
|
type: NavHeaderComponent,
|
|
40641
40641
|
isStandalone: true,
|
|
40642
40642
|
selector: "m-nav-header",
|
|
40643
|
+
host: {
|
|
40644
|
+
properties: {
|
|
40645
|
+
"style.display": "\"block\"",
|
|
40646
|
+
"style.--m-section-min-height": "\"0\""
|
|
40647
|
+
},
|
|
40648
|
+
classAttribute: "m-nav-header"
|
|
40649
|
+
},
|
|
40643
40650
|
ngImport: i0,
|
|
40644
|
-
template: "<m-section>\n @if (_isSearch() && _searchOpen()) {\n <!-- Searching: the field takes the row the trail was on, so the nav is\n hidden while there is something to type into. -->\n <m-section-search\n class=\"nav-header__search\"\n [(isOpen)]=\"_searchOpen\"\n [value]=\"_searchStore.query()\"\n [searchLabel]=\"_searchLabel()\"\n (searchChange)=\"_searchStore.updateQuery($event)\"\n />\n } @else
|
|
40645
|
-
styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}
|
|
40651
|
+
template: "<m-section>\n @if (_isSearch() && _searchOpen()) {\n <!-- Searching: the field takes the row the trail was on, so the nav is\n hidden while there is something to type into. -->\n <m-section-search\n class=\"nav-header__search\"\n [(isOpen)]=\"_searchOpen\"\n [value]=\"_searchStore.query()\"\n [searchLabel]=\"_searchLabel()\"\n (searchChange)=\"_searchStore.updateQuery($event)\"\n />\n } @else if (_trail() || _isSearch()) {\n <!-- The nav's row, and the bar's toggle stands in it rather than in a row\n stacked on top of it. Both slots are written a single `@if` deep: a\n Section matches its projected slots by tag, and a node nested deeper\n falls through to the body instead. -->\n <m-section-back [back]=\"_hasParent()\" (navigate)=\"_navStore.back()\">\n @if (_trail(); as trail) {\n <m-nav-trail [config]=\"trail\" />\n }\n @if (_isSearch()) {\n <m-button\n class=\"nav-header__search-toggle\"\n [config]=\"_searchToggle\"\n (clicked)=\"_openSearch()\"\n />\n }\n </m-section-back>\n }\n\n @if (_user(); as user) {\n <m-user class=\"nav-header__user\" [id]=\"user.id\" [user]=\"user\" mRef=\"root_user\">\n <span class=\"nav-header__username\">@{{ user.username }}</span>\n </m-user>\n } @else if (_header(); as h) {\n @if (h.label) {\n <m-section-header class=\"nav-header__title\" [icon]=\"h.icon\" [label]=\"h.label\" />\n }\n }\n</m-section>\n",
|
|
40652
|
+
styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}.nav-header__user{display:block;padding:1rem}.nav-header__username{font-size:.6875rem;font-weight:600;color:var(--m-text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}m-section-search.nav-header__search{--_nav-row-height: var(--section-header-min-height, calc(var(--section-header-py, .5rem) * 2 + 1.25rem));min-height:var(--_nav-row-height);padding-block:0;--m-input-clear-height: calc(var(--_nav-row-height) - .5rem);--m-input-clear-min-height: calc(var(--_nav-row-height) - .5rem)}\n"],
|
|
40646
40653
|
dependencies: [
|
|
40647
40654
|
{
|
|
40648
40655
|
kind: "component",
|
|
@@ -40826,8 +40833,13 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
40826
40833
|
],
|
|
40827
40834
|
encapsulation: ViewEncapsulation.None,
|
|
40828
40835
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
40829
|
-
|
|
40830
|
-
|
|
40836
|
+
host: {
|
|
40837
|
+
class: "m-nav-header",
|
|
40838
|
+
"[style.display]": "\"block\"",
|
|
40839
|
+
"[style.--m-section-min-height]": "\"0\""
|
|
40840
|
+
},
|
|
40841
|
+
template: "<m-section>\n @if (_isSearch() && _searchOpen()) {\n <!-- Searching: the field takes the row the trail was on, so the nav is\n hidden while there is something to type into. -->\n <m-section-search\n class=\"nav-header__search\"\n [(isOpen)]=\"_searchOpen\"\n [value]=\"_searchStore.query()\"\n [searchLabel]=\"_searchLabel()\"\n (searchChange)=\"_searchStore.updateQuery($event)\"\n />\n } @else if (_trail() || _isSearch()) {\n <!-- The nav's row, and the bar's toggle stands in it rather than in a row\n stacked on top of it. Both slots are written a single `@if` deep: a\n Section matches its projected slots by tag, and a node nested deeper\n falls through to the body instead. -->\n <m-section-back [back]=\"_hasParent()\" (navigate)=\"_navStore.back()\">\n @if (_trail(); as trail) {\n <m-nav-trail [config]=\"trail\" />\n }\n @if (_isSearch()) {\n <m-button\n class=\"nav-header__search-toggle\"\n [config]=\"_searchToggle\"\n (clicked)=\"_openSearch()\"\n />\n }\n </m-section-back>\n }\n\n @if (_user(); as user) {\n <m-user class=\"nav-header__user\" [id]=\"user.id\" [user]=\"user\" mRef=\"root_user\">\n <span class=\"nav-header__username\">@{{ user.username }}</span>\n </m-user>\n } @else if (_header(); as h) {\n @if (h.label) {\n <m-section-header class=\"nav-header__title\" [icon]=\"h.icon\" [label]=\"h.label\" />\n }\n }\n</m-section>\n",
|
|
40842
|
+
styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}.nav-header__user{display:block;padding:1rem}.nav-header__username{font-size:.6875rem;font-weight:600;color:var(--m-text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}m-section-search.nav-header__search{--_nav-row-height: var(--section-header-min-height, calc(var(--section-header-py, .5rem) * 2 + 1.25rem));min-height:var(--_nav-row-height);padding-block:0;--m-input-clear-height: calc(var(--_nav-row-height) - .5rem);--m-input-clear-min-height: calc(var(--_nav-row-height) - .5rem)}\n"]
|
|
40831
40843
|
}]
|
|
40832
40844
|
}],
|
|
40833
40845
|
ctorParameters: () => []
|