@magmonium/one 0.4.38 → 0.4.40

package/fesm2022/magmonium-one.mjs

@@ -7603,7 +7603,7 @@ var SectionSearchComponent = class SectionSearchComponent extends BaseTextInputC
 	resultInput = input(SEARCH_RESULT_INPUT, ...ngDevMode ? [{ debugName: "resultInput" }] : /* istanbul ignore next */ []);
 	elementInputs = input(...ngDevMode ? [void 0, { debugName: "elementInputs" }] : /* istanbul ignore next */ []);
 	searchChange = output();
-	isOpen = signal(false, ...ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []);
+	isOpen = model(false, ...ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []);
 	resultText = signal("", ...ngDevMode ? [{ debugName: "resultText" }] : /* istanbul ignore next */ []);
 	isDesignMode = !!inject(IS_DESIGN_MODE, { optional: true });
 	scrollSticky = injectScrollSticky(0, "none");
@@ -7791,12 +7791,20 @@ var SectionSearchComponent = class SectionSearchComponent extends BaseTextInputC
 				isSignal: true,
 				isRequired: false,
 				transformFunction: null
+			},
+			isOpen: {
+				classPropertyName: "isOpen",
+				publicName: "isOpen",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
 			}
 		},
 		outputs: {
 			value: "valueChange",
 			touched: "touchedChange",
-			searchChange: "searchChange"
+			searchChange: "searchChange",
+			isOpen: "isOpenChange"
 		},
 		host: {
 			listeners: { "focusout": "onFocusOut($event)" },
@@ -8161,6 +8169,17 @@ i0.ɵɵngDeclareClassMetadata({
 		searchChange: [{
 			type: i0.Output,
 			args: ["searchChange"]
+		}],
+		isOpen: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "isOpen",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["isOpenChange"]
 		}]
 	}
 });
@@ -40580,6 +40599,11 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}]
 });
+const SEARCH_TOGGLE = {
+	icon: "search",
+	iconOnly: true,
+	variant: "ghost"
+};
 var NavHeaderComponent = class NavHeaderComponent {
 	_navStore = inject(NavStore);
 	_searchStore = inject(SearchStore);
@@ -40587,6 +40611,9 @@ var NavHeaderComponent = class NavHeaderComponent {
 	_isUser = computed(() => this._navStore.panelNavId() === `${ROOT_NAV}_user`, ...ngDevMode ? [{ debugName: "_isUser" }] : /* istanbul ignore next */ []);
 	_isSearch = computed(() => this._navStore.panelNavId() === `${ROOT_NAV}_search`, ...ngDevMode ? [{ debugName: "_isSearch" }] : /* istanbul ignore next */ []);
 	_hasParent = computed(() => this._navStore.breadcrumb().header?.id !== ROOT_NAV, ...ngDevMode ? [{ debugName: "_hasParent" }] : /* istanbul ignore next */ []);
+	_searchOpen = signal(false, ...ngDevMode ? [{ debugName: "_searchOpen" }] : /* istanbul ignore next */ []);
+	_searchToggle = SEARCH_TOGGLE;
+	_openSearch = () => this._searchOpen.set(true);
 	_searchLabel = computed(() => this._navStore.searchLabel() ?? "", ...ngDevMode ? [{ debugName: "_searchLabel" }] : /* istanbul ignore next */ []);
 	_trail = computed(() => {
 		const trail = this._navStore.breadcrumb().trail;
@@ -40594,6 +40621,11 @@ var NavHeaderComponent = class NavHeaderComponent {
 	}, ...ngDevMode ? [{ debugName: "_trail" }] : /* istanbul ignore next */ []);
 	_user = computed(() => this._isUser() ? this.#authStore.user() ?? null : null, ...ngDevMode ? [{ debugName: "_user" }] : /* istanbul ignore next */ []);
 	_header = computed(() => this._isUser() ? null : this._navStore.breadcrumb().header, ...ngDevMode ? [{ debugName: "_header" }] : /* istanbul ignore next */ []);
+	constructor() {
+		effect(() => {
+			if (!this._isSearch()) this._searchOpen.set(false);
+		});
+	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
 		version: "22.2.1",
@@ -40609,8 +40641,8 @@ var NavHeaderComponent = class NavHeaderComponent {
 		isStandalone: true,
 		selector: "m-nav-header",
 		ngImport: i0,
-		template: "<m-section>\n  @if (_trail(); as trail) {\n    <m-section-back [back]=\"_hasParent()\" (navigate)=\"_navStore.back()\">\n      <m-nav-trail [config]=\"trail\" />\n    </m-section-back>\n  }\n\n  @if (_isSearch()) {\n    <!-- The app's own word for its bar, where it named one (GLOSSARY.md\n         SearchLabel): the bar falls back to the library's `search` itself. -->\n    <m-section-search\n      [value]=\"_searchStore.query()\"\n      [startOpen]=\"true\"\n      [searchLabel]=\"_searchLabel()\"\n      (searchChange)=\"_searchStore.updateQuery($event)\"\n    />\n  } @else 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\">&#64;{{ 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",
-		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:block;--m-section-min-height: 0}.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}\n"],
+		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 {\n    @if (_trail(); as trail) {\n      <m-section-back [back]=\"_hasParent()\" (navigate)=\"_navStore.back()\">\n        <m-nav-trail [config]=\"trail\" />\n        @if (_isSearch()) {\n          <!-- The bar's toggle, drawn in the nav's own row rather than in a row\n               stacked on top of it. -->\n          <m-button\n            class=\"nav-header__search-toggle\"\n            [config]=\"_searchToggle\"\n            (clicked)=\"_openSearch()\"\n          />\n        }\n      </m-section-back>\n    } @else if (_isSearch()) {\n      <!-- No trail to sit beside — a search opened at root — so the toggle takes\n           the header row on its own. -->\n      <m-section-back>\n        <m-button\n          class=\"nav-header__search-toggle\"\n          [config]=\"_searchToggle\"\n          (clicked)=\"_openSearch()\"\n        />\n      </m-section-back>\n    }\n\n    @if (!_isSearch()) {\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\">&#64;{{ 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    }\n  }\n</m-section>\n",
+		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:block;--m-section-min-height: 0}.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"],
 		dependencies: [
 			{
 				kind: "component",
@@ -40701,14 +40733,50 @@ var NavHeaderComponent = class NavHeaderComponent {
 					"sticky",
 					"element",
 					"resultInput",
-					"elementInputs"
+					"elementInputs",
+					"isOpen"
 				],
 				outputs: [
 					"valueChange",
 					"touchedChange",
-					"searchChange"
+					"searchChange",
+					"isOpenChange"
 				]
 			},
+			{
+				kind: "component",
+				type: ButtonComponent,
+				selector: "m-button,m-one-button",
+				inputs: [
+					"config",
+					"color",
+					"labelClass",
+					"fullWidth",
+					"nav",
+					"navParams",
+					"href",
+					"disabled",
+					"variant",
+					"name",
+					"baseUrl",
+					"one",
+					"remote",
+					"label",
+					"noTranslate",
+					"params",
+					"noNative",
+					"icon",
+					"isRightIcon",
+					"iconOnly",
+					"stacked",
+					"imgSrc",
+					"nonClickable",
+					"inverted",
+					"isSubmit",
+					"tabindex"
+				],
+				outputs: ["configChange", "clicked"]
+			},
 			{
 				kind: "component",
 				type: UserComponent,
@@ -40752,15 +40820,17 @@ i0.ɵɵngDeclareClassMetadata({
 				SectionHeaderComponent,
 				SectionBackComponent,
 				SectionSearchComponent,
+				ButtonComponent,
 				UserComponent,
 				MRefDirective
 			],
 			encapsulation: ViewEncapsulation.None,
 			changeDetection: ChangeDetectionStrategy.OnPush,
-			template: "<m-section>\n  @if (_trail(); as trail) {\n    <m-section-back [back]=\"_hasParent()\" (navigate)=\"_navStore.back()\">\n      <m-nav-trail [config]=\"trail\" />\n    </m-section-back>\n  }\n\n  @if (_isSearch()) {\n    <!-- The app's own word for its bar, where it named one (GLOSSARY.md\n         SearchLabel): the bar falls back to the library's `search` itself. -->\n    <m-section-search\n      [value]=\"_searchStore.query()\"\n      [startOpen]=\"true\"\n      [searchLabel]=\"_searchLabel()\"\n      (searchChange)=\"_searchStore.updateQuery($event)\"\n    />\n  } @else 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\">&#64;{{ 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",
-			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:block;--m-section-min-height: 0}.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}\n"]
+			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 {\n    @if (_trail(); as trail) {\n      <m-section-back [back]=\"_hasParent()\" (navigate)=\"_navStore.back()\">\n        <m-nav-trail [config]=\"trail\" />\n        @if (_isSearch()) {\n          <!-- The bar's toggle, drawn in the nav's own row rather than in a row\n               stacked on top of it. -->\n          <m-button\n            class=\"nav-header__search-toggle\"\n            [config]=\"_searchToggle\"\n            (clicked)=\"_openSearch()\"\n          />\n        }\n      </m-section-back>\n    } @else if (_isSearch()) {\n      <!-- No trail to sit beside — a search opened at root — so the toggle takes\n           the header row on its own. -->\n      <m-section-back>\n        <m-button\n          class=\"nav-header__search-toggle\"\n          [config]=\"_searchToggle\"\n          (clicked)=\"_openSearch()\"\n        />\n      </m-section-back>\n    }\n\n    @if (!_isSearch()) {\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\">&#64;{{ 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    }\n  }\n</m-section>\n",
+			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:block;--m-section-min-height: 0}.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"]
 		}]
-	}]
+	}],
+	ctorParameters: () => []
 });
 const PLACEHOLDER_MAP = {
 	root_settings_user_theme: "search-theme",