@api-client/ui 0.5.33 → 0.5.35
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.
- package/build/src/core/ApplicationRoute.d.ts.map +1 -1
- package/build/src/core/ApplicationRoute.js +3 -0
- package/build/src/core/ApplicationRoute.js.map +1 -1
- package/build/src/core/Fragment.d.ts +14 -0
- package/build/src/core/Fragment.d.ts.map +1 -1
- package/build/src/core/Fragment.js +25 -0
- package/build/src/core/Fragment.js.map +1 -1
- package/build/src/elements/navigation/internals/NavigationItem.d.ts +5 -0
- package/build/src/elements/navigation/internals/NavigationItem.d.ts.map +1 -1
- package/build/src/elements/navigation/internals/NavigationItem.js +15 -2
- package/build/src/elements/navigation/internals/NavigationItem.js.map +1 -1
- package/package.json +1 -1
- package/src/core/ApplicationRoute.ts +4 -1
- package/src/core/Fragment.ts +26 -0
- package/src/elements/navigation/internals/NavigationItem.ts +5 -0
- package/test/core/fragment.spec.ts +32 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ApplicationRoute.d.ts","sourceRoot":"","sources":["../../../src/core/ApplicationRoute.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ApplicationRoute.d.ts","sourceRoot":"","sources":["../../../src/core/ApplicationRoute.ts"],"names":[],"mappings":"AAqDA;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,eAAe,CAAC,QAAQ,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC,GAAG,SAAS,CAWhH;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,YAAY,SAAK,GAAG,MAAM,CAUlD;AAkBD,wBAAgB,UAAU,CAAC,GAAG,KAAK,EAAE,MAAM,EAAE,GAAG,MAAM,CAIrD;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,GAAG,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,CAEvD;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,QAAQ,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,CAItE;AAED;;;;;GAKG;AACH,wBAAgB,OAAO,CAAC,QAAQ,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,CAIlE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ApplicationRoute.js","sourceRoot":"","sources":["../../../src/core/ApplicationRoute.ts"],"names":[],"mappings":"AAAA,MAAM,QAAQ,GAAG,IAAI,GAAG,EAAkB,CAAA;AAE1C;;GAEG;AACH,SAAS,UAAU,CAAC,KAAa;IAC/B,IAAI,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC;QACxB,OAAO,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAW,CAAA;IACtC,CAAC;IACD,MAAM,MAAM,GAAG,IAAI,MAAM,CAAC,IAAI,KAAK,GAAG,CAAC,CAAA;IACvC,QAAQ,CAAC,GAAG,CAAC,KAAK,EAAE,MAAM,CAAC,CAAA;IAC3B,OAAO,MAAM,CAAA;AACf,CAAC;AAED;;;GAGG;AACH,SAAS,SAAS,CAAC,GAAW,EAAE,OAAe;IAC7C,OAAO,UAAU,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;AACtC,CAAC;AAED;;;GAGG;AACH,SAAS,WAAW,CAAC,OAAe,EAAE,GAAW;IAC/C,MAAM,CAAC,GAAG,UAAU,CAAC,OAAO,CAAC,CAAA;IAC7B,MAAM,KAAK,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;IACzB,IAAI,CAAC,KAAK,EAAE,CAAC;QACX,OAAO,SAAS,CAAA;IAClB,CAAC;IACD,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,CAAA;IACxB,MAAM,MAAM,GAAsC,EAAE,CAAA;IACpD,IAAI,MAAM,EAAE,CAAC;QACX,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;YAClC,IAAI,KAAK,GAAG,MAAM,CAAC,GAAG,
|
|
1
|
+
{"version":3,"file":"ApplicationRoute.js","sourceRoot":"","sources":["../../../src/core/ApplicationRoute.ts"],"names":[],"mappings":"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","sourcesContent":["const compiled = new Map<string, RegExp>()\n\n/**\n * @param value The pattern to evaluate\n */\nfunction getPattern(value: string): RegExp {\n if (compiled.has(value)) {\n return compiled.get(value) as RegExp\n }\n const result = new RegExp(`^${value}$`)\n compiled.set(value, result)\n return result\n}\n\n/**\n * @param uri The path value of the current URL.\n * @param pattern The pattern to evaluate\n */\nfunction testRoute(uri: string, pattern: string): boolean {\n return getPattern(pattern).test(uri)\n}\n\n/**\n * @param pattern The pattern to evaluate\n * @param uri The path value of the current URL.\n */\nfunction parseParams(pattern: string, uri: string): Record<string, string | string[]> | undefined {\n const r = getPattern(pattern)\n const match = r.exec(uri)\n if (!match) {\n return undefined\n }\n const { groups } = match\n const result: Record<string, string | string[]> = {}\n if (groups) {\n Object.keys(groups).forEach((key) => {\n let value = groups[key] as string | undefined\n if (value === undefined) {\n return\n }\n if (value[0] === '/') {\n value = value.substring(1)\n }\n if (value.includes('/')) {\n result[key] = value.split('/').map((i) => decodeURIComponent(i))\n } else {\n result[key] = decodeURIComponent(value)\n }\n })\n }\n return result\n}\n\n/**\n * Reads params from the route for given patterns.\n * @param patterns The list of patterns to consider\n * @param route The current route\n * @returns A list of read parameters or undefined when there's no matching route or params.\n *\n * @example\n *\n * ```typescript\n * const patterns = ['/my/path/:id']\n * const route = '/my/path/1234'\n * const params = readRouteParams(patterns, route)\n * // -> { id: '1234' }\n * ```\n */\nexport function readRouteParams(patterns: string[], route: string): Record<string, string | string[]> | undefined {\n for (const pattern of patterns) {\n if (!testRoute(route, pattern)) {\n continue\n }\n const params = parseParams(pattern, route)\n if (params) {\n return params\n }\n }\n return undefined\n}\n\n/**\n * Reads the current route as everything that is past the `#`\n * @param defaultRoute The route that would be considered a default route for the activity.\n * @returns The current route.\n */\nexport function getRoute(defaultRoute = ''): string {\n const url = new URL(window.location.href)\n let path = url.hash.replace('#', '')\n if (!path) {\n path = defaultRoute\n }\n if (!path.startsWith('/')) {\n path = `/${path}`\n }\n return path\n}\n\nfunction createHash(...route: string[]): string {\n const atoms: string[] = []\n for (const atom of route) {\n if (atom.includes('/')) {\n atoms.push(...atom.split('/').filter((i) => !!i))\n } else {\n atoms.push(atom)\n }\n }\n let hash = atoms.map(encodeURIComponent).join('/')\n if (!hash.startsWith('/')) {\n hash = `/${hash}`\n }\n return hash\n}\n\nexport function buildRoute(...route: string[]): string {\n const url = new URL(window.location.href)\n url.hash = createHash(...route)\n return url.toString()\n}\n\n/**\n * Navigates to an internal route.\n *\n * @param route Optional route params to add to the hash part of the url.\n */\nexport function navigateScreen(...route: string[]): void {\n window.location.href = buildRoute(...route)\n}\n\n/**\n * Navigates to another application.\n *\n * @param htmlFile The relative location of the target HTML file.\n * @param route Optional route params to add to the has part of the url.\n */\nexport function navigateApp(htmlFile: string, ...route: string[]): void {\n const url = new URL(htmlFile, window.location.href)\n url.hash = createHash(...route)\n window.location.href = url.toString()\n}\n\n/**\n * Navigates to another application.\n *\n * @param htmlFile The relative location of the target HTML file.\n * @param route Optional route params to add to the has part of the url.\n */\nexport function openApp(htmlFile: string, ...route: string[]): void {\n const url = new URL(htmlFile, window.location.href)\n url.hash = createHash(...route)\n window.open(url.toString(), '_blank')\n}\n"]}
|
|
@@ -5,6 +5,7 @@ import type { Application, UpdateRequest } from './Application.js';
|
|
|
5
5
|
import { FragmentRenderer } from './renderer/FragmentRenderer.js';
|
|
6
6
|
import { Intent, IntentResult } from './ActivityManager.js';
|
|
7
7
|
import type { ActivityDetail, ActivityWithResultDetail } from '../events/IntentEvents.js';
|
|
8
|
+
import { type RefOrCallback } from 'lit/directives/ref.js';
|
|
8
9
|
export interface PendingActivityResult {
|
|
9
10
|
onResult(result: IntentResult, intent: Intent): void;
|
|
10
11
|
}
|
|
@@ -124,6 +125,19 @@ export declare class Fragment extends EventTarget {
|
|
|
124
125
|
* @param key The name of the fragment to remove.
|
|
125
126
|
*/
|
|
126
127
|
removeChild(key: string): Promise<void>;
|
|
128
|
+
/**
|
|
129
|
+
* Creates a RefCallback that can be used with lit's `ref()` directive
|
|
130
|
+
* to automatically show/hide a child fragment when its container element
|
|
131
|
+
* is added or removed from the DOM.
|
|
132
|
+
*
|
|
133
|
+
* @param key The key of the child fragment to manage.
|
|
134
|
+
* @returns A RefCallback to be used with the `ref()` directive.
|
|
135
|
+
*
|
|
136
|
+
* @example
|
|
137
|
+
* // In your parent fragment's render method:
|
|
138
|
+
* html`<div ${ref(this.createFragmentRef('my-child-fragment'))}></div>`
|
|
139
|
+
*/
|
|
140
|
+
createFragmentRef(key: string): RefOrCallback<Element>;
|
|
127
141
|
/**
|
|
128
142
|
* A helper to request an update.
|
|
129
143
|
* Application or parent Fragment will handle rendering.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Fragment.d.ts","sourceRoot":"","sources":["../../../src/core/Fragment.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,KAAK,CAAA;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACxC,OAAO,EAAE,aAAa,EAAE,KAAK,eAAe,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAC3F,OAAO,KAAK,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAClE,OAAO,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAA;AACjE,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AAE3D,OAAO,KAAK,EAAE,cAAc,EAAE,wBAAwB,EAAE,MAAM,2BAA2B,CAAA;
|
|
1
|
+
{"version":3,"file":"Fragment.d.ts","sourceRoot":"","sources":["../../../src/core/Fragment.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,KAAK,CAAA;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACxC,OAAO,EAAE,aAAa,EAAE,KAAK,eAAe,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAC3F,OAAO,KAAK,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAClE,OAAO,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAA;AACjE,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AAE3D,OAAO,KAAK,EAAE,cAAc,EAAE,wBAAwB,EAAE,MAAM,2BAA2B,CAAA;AAEzF,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,uBAAuB,CAAA;AAE1D,MAAM,WAAW,qBAAqB;IACpC,QAAQ,CAAC,MAAM,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI,CAAA;CACrD;AAED;;;;;;;;;;;GAWG;AACH,qBAAa,QAAS,SAAQ,WAAW;;IAChC,KAAK,EAAE,aAAa,CAA4B;IAChD,MAAM,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAA;IACnC,SAAS,CAAC,QAAQ,wBAA8B;IAChD,SAAS,CAAC,eAAe,EAAE,eAAe,CAAA;IAE1C;;OAEG;IACH,WAAW,SAAK;IAEhB;;;;;;OAMG;IACH,qBAAqB,EAAE,GAAG,CAAC,MAAM,EAAE,qBAAqB,CAAC,CAA2C;IAIpG,IAAI,QAAQ,IAAI,gBAAgB,CAE/B;gBAEW,OAAO,CAAC,EAAE,eAAe;IAOrC;;;;OAIG;IACI,SAAS,IAAI,MAAM,GAAG,SAAS;IAItC;;OAEG;IACI,aAAa,CAAC,UAAU,EAAE,WAAW,GAAG,MAAM,GAAG,IAAI;IAI5D,MAAM,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC;IAI3C;;;;;;OAMG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,GAAG,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC;IAI9C;;OAEG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,GAAG,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC;IAI9C;;OAEG;IACH,OAAO,IAAI,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC;IAI/B;;OAEG;IACH,QAAQ,IAAI,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC;IAIhC;;OAEG;IACH,OAAO,IAAI,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC;IAI/B;;OAEG;IACH,MAAM,IAAI,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC;IAI9B;;OAEG;IACH,QAAQ,IAAI,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC;IAIhC;;OAEG;IACH,SAAS,IAAI,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC;IAKjC;;OAEG;IACH,aAAa,IAAI,IAAI;IAIrB;;;OAGG;IACH,MAAM,IAAI,cAAc,GAAG,OAAO,OAAO;IAWzC;;;;;OAKG;IACH,wBAAwB,IAAI,QAAQ,GAAG,IAAI;IAK3C;;;OAGG;IACH,oBAAoB,IAAI,OAAO;IAI/B;;OAEG;IACH,mBAAmB,IAAI,QAAQ,EAAE;IAIjC;;;;;OAKG;IACG,QAAQ,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC;IAK9E;;;OAGG;IACG,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IAQ7C;;;;;;;;;;;OAWG;IACH,iBAAiB,CAAC,GAAG,EAAE,MAAM,GAAG,aAAa,CAAC,OAAO,CAAC;IAatD;;;OAGG;IACH,aAAa,CAAC,IAAI,GAAE,aAAkB,GAAG,IAAI;IAS7C,cAAc,IAAI,WAAW,GAAG,SAAS;IAIzC,WAAW,IAAI,QAAQ,GAAG,SAAS;IAInC;;;OAGG;IACG,sBAAsB,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IAQ3D;;;OAGG;IACG,aAAa,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IAQlD;;;;;;;OAOG;IACG,gBAAgB,CAAC,WAAW,EAAE,MAAM,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IAqBpG,cAAc,CAAC,WAAW,EAAE,MAAM,GAAG,OAAO;IAS5C;;;;;;;;;;;;;;OAcG;IAEG,iBAAiB,CAAC,KAAK,EAAE,WAAW,CAAC,cAAc,GAAG,wBAAwB,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC;CAkBtG"}
|
|
@@ -187,6 +187,31 @@ let Fragment = (() => {
|
|
|
187
187
|
this.children.delete(key);
|
|
188
188
|
}
|
|
189
189
|
}
|
|
190
|
+
/**
|
|
191
|
+
* Creates a RefCallback that can be used with lit's `ref()` directive
|
|
192
|
+
* to automatically show/hide a child fragment when its container element
|
|
193
|
+
* is added or removed from the DOM.
|
|
194
|
+
*
|
|
195
|
+
* @param key The key of the child fragment to manage.
|
|
196
|
+
* @returns A RefCallback to be used with the `ref()` directive.
|
|
197
|
+
*
|
|
198
|
+
* @example
|
|
199
|
+
* // In your parent fragment's render method:
|
|
200
|
+
* html`<div ${ref(this.createFragmentRef('my-child-fragment'))}></div>`
|
|
201
|
+
*/
|
|
202
|
+
createFragmentRef(key) {
|
|
203
|
+
return (element) => {
|
|
204
|
+
if (element) {
|
|
205
|
+
this.fragmentManager.showFragment(key, element);
|
|
206
|
+
}
|
|
207
|
+
else {
|
|
208
|
+
const fragment = this.fragmentManager.findFragment(key);
|
|
209
|
+
if (fragment) {
|
|
210
|
+
this.fragmentManager.hideFragment(fragment);
|
|
211
|
+
}
|
|
212
|
+
}
|
|
213
|
+
};
|
|
214
|
+
}
|
|
190
215
|
/**
|
|
191
216
|
* A helper to request an update.
|
|
192
217
|
* Application or parent Fragment will handle rendering.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Fragment.js","sourceRoot":"","sources":["../../../src/core/Fragment.ts"],"names":[],"mappings":"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","sourcesContent":["import { nothing, TemplateResult } from 'lit'\nimport { Activity } from './Activity.js'\nimport { FragmentState, type FragmentOptions, FragmentManager } from './FragmentManager.js'\nimport type { Application, UpdateRequest } from './Application.js'\nimport { FragmentRenderer } from './renderer/FragmentRenderer.js'\nimport { Intent, IntentResult } from './ActivityManager.js'\nimport { bound } from '../decorators/bound.js'\nimport type { ActivityDetail, ActivityWithResultDetail } from '../events/IntentEvents.js'\nimport { EventTypes } from '../events/EventTypes.js'\n\nexport interface PendingActivityResult {\n onResult(result: IntentResult, intent: Intent): void\n}\n\n/**\n * Similar to Activity, with lifecycle methods (onCreate, onAttach, onDetach, etc.).\n * The crucial difference is that a Fragment is always hosted by an `Activity` or\n * another `Fragment`.\n *\n * A `Fragment` represents a reusable portion of the app's UI.\n * A fragment defines and manages its own layout, has its own lifecycle,\n * and can handle its own input events.\n * Fragments can't live on their own. They must be hosted by an activity or another\n * fragment. The fragment’s view hierarchy becomes part of, or attaches to,\n * the host’s view hierarchy.\n */\nexport class Fragment extends EventTarget {\n public state: FragmentState = FragmentState.Initialized\n public parent?: Activity | Fragment\n protected children = new Map<string, Fragment>()\n protected fragmentManager: FragmentManager\n\n /**\n * The request code used to start an activity for a result.\n */\n requestCode = -1\n\n /**\n * A list of pending activity results that were requested by the components\n * hosted in this fragment.\n * The key is the request code and the value contains the callback\n * that will be called when the activity result is received.\n * The callback is called with the result code and the resulting intent.\n */\n pendingActivityResult: Map<number, PendingActivityResult> = new Map<number, PendingActivityResult>()\n\n #renderer: FragmentRenderer\n\n get renderer(): FragmentRenderer {\n return this.#renderer\n }\n\n constructor(options?: FragmentOptions) {\n super()\n this.parent = options?.parent\n this.fragmentManager = new FragmentManager(this)\n this.#renderer = new FragmentRenderer(this)\n }\n\n /**\n * When implemented, this method returns the class name to be used as a root class for the fragment.\n * This class name can be used to apply styles or identify the fragment in the DOM.\n * @returns The class name to be used as a root class for the fragment.\n */\n public rootClass(): string | undefined {\n return undefined\n }\n\n /**\n * @see {@link ./Renderer.js}\n */\n public setRenderRoot(renderRoot: HTMLElement | string): void {\n this.#renderer.setRenderRoot(renderRoot)\n }\n\n onData(data: unknown): void | Promise<void> {\n this.dispatchEvent(new CustomEvent('fragment:data', { detail: data }))\n }\n\n /**\n * Called once when the fragment is created.\n *\n * In the `onCreate()` method, perform basic fragment startup logic that happens only once\n * for the entire life of the fragment.\n * @param data Optional init data.\n */\n onCreate(data?: unknown): void | Promise<void> {\n this.dispatchEvent(new CustomEvent('fragment:create', { detail: data }))\n }\n\n /**\n * Called when the fragment is attached to a parent\n */\n onAttach(data?: unknown): void | Promise<void> {\n this.dispatchEvent(new CustomEvent('fragment:attach', { detail: data }))\n }\n\n /**\n * Called when the fragment becomes visible.\n */\n onStart(): void | Promise<void> {\n this.dispatchEvent(new CustomEvent('fragment:start', { detail: null }))\n }\n\n /**\n * Called when the fragment gains focus.\n */\n onResume(): void | Promise<void> {\n this.dispatchEvent(new CustomEvent('fragment:resume', { detail: null }))\n }\n\n /**\n * Called when the fragment loses focus.\n */\n onPause(): void | Promise<void> {\n this.dispatchEvent(new CustomEvent('fragment:pause', { detail: null }))\n }\n\n /**\n * Called when the fragment is no longer visible.\n */\n onStop(): void | Promise<void> {\n this.dispatchEvent(new CustomEvent('fragment:stop', { detail: null }))\n }\n\n /**\n * Called when the fragment is detached from a parent\n */\n onDetach(): void | Promise<void> {\n this.dispatchEvent(new CustomEvent('fragment:detach', { detail: null }))\n }\n\n /**\n * Called before the fragment is destroyed.\n */\n onDestroy(): void | Promise<void> {\n this.dispatchEvent(new CustomEvent('fragment:destroy', { detail: null }))\n this.fragmentManager.onDestroy()\n }\n\n /**\n * Called by the renderer when the fragment is rendered for the first time.\n */\n onFirstRender(): void {\n //\n }\n\n /**\n * A function called when it should render the view.\n * By default it renders a fragment view if the fragment hosts other fragments and only one is visible.\n */\n render(): TemplateResult | typeof nothing {\n const fragment = this.getSingleVisibleFragment()\n if (fragment) {\n // we can manage the default rendering.\n // we make an assumption that by default only one fragment is rendered,\n // otherwise the parent activity or fragment would have to setup render roots.\n return fragment.render()\n }\n return nothing\n }\n\n /**\n * Checks whether there's only one `Fragment` that is in the `Resumed` state\n * and returns it. It returns `null` if there is no `Fragment`s or more than a single\n * visible `Fragment`.\n * @returns A Fragment that is the only fragment that should be visible.\n */\n getSingleVisibleFragment(): Fragment | null {\n const fragments = this.getVisibleFragments()\n return fragments.length === 1 ? fragments[0] : null\n }\n\n /**\n * Checks whether this fragment is a host for other fragments.\n * @returns `true` when this fragment hosts other fragments.\n */\n isRenderingFragments(): boolean {\n return this.children.size > 0\n }\n\n /**\n * @returns The list of all fragments that are in the Resumed state.\n */\n getVisibleFragments(): Fragment[] {\n return this.fragmentManager.getVisible()\n }\n\n /**\n * Adds a child fragment to this fragment.\n * The FragmentManager will handle lifecycle.\n * @param key The name of the fragment.\n * @param fragment The fragment to add.\n */\n async addChild(key: string, fragment: Fragment, data?: unknown): Promise<void> {\n this.children.set(key, fragment)\n await this.fragmentManager.attachFragment(key, fragment, this, data)\n }\n\n /**\n * Removes a fragment from this fragment.\n * @param key The name of the fragment to remove.\n */\n async removeChild(key: string): Promise<void> {\n const child = this.children.get(key)\n if (child) {\n await this.fragmentManager.detachFragment(key)\n this.children.delete(key)\n }\n }\n\n /**\n * A helper to request an update.\n * Application or parent Fragment will handle rendering.\n */\n requestUpdate(opts: UpdateRequest = {}): void {\n const { fragment = true } = opts\n if (fragment) {\n this.#renderer.requestUpdate()\n }\n this.parent?.requestUpdate(opts)\n // If no parent, do nothing (or maybe throw an error?)\n }\n\n getApplication(): Application | undefined {\n return this.parent?.getApplication()\n }\n\n getActivity(): Activity | undefined {\n return this.parent?.getActivity()\n }\n\n /**\n * Starts an activity for result.\n * @param intent The intent to start.\n */\n async startActivityForResult(intent: Intent): Promise<void> {\n const activity = this.getActivity()\n if (!activity) {\n throw new Error(`The fragment has no activity. Unable to start an intent.`)\n }\n this.requestCode = await activity.startActivityForResult(intent)\n }\n\n /**\n * Starts another activity.\n * @param intent The intent to start.\n */\n async startActivity(intent: Intent): Promise<void> {\n const activity = this.getActivity()\n if (!activity) {\n throw new Error(`The fragment has no activity. Unable to start an intent.`)\n }\n await activity.startActivity(intent)\n }\n\n /**\n * The callback method that is triggered when another activity that was\n * started for result finishes.\n *\n * @param requestCode The request code that was used to start the activity.\n * @param data The data that was passed back.\n * @param intent The intent that was used to start the activity.\n */\n async onActivityResult(requestCode: number, resultCode: IntentResult, intent: Intent): Promise<void> {\n const { pendingActivityResult, children } = this\n if (pendingActivityResult.has(requestCode)) {\n const { onResult } = pendingActivityResult.get(requestCode) as PendingActivityResult\n pendingActivityResult.delete(requestCode)\n onResult(resultCode, intent)\n return\n }\n for (const fragment of children.values()) {\n if (fragment.hasRequestCode(requestCode)) {\n fragment.onActivityResult(requestCode, resultCode, intent)\n return\n }\n }\n this.requestCode = -1\n if (this.constructor === Fragment) {\n // eslint-disable-next-line no-console\n console.info('Fragment#onActivityResult() not implemented', requestCode, resultCode, intent)\n }\n }\n\n hasRequestCode(requestCode: number): boolean {\n for (const fragment of this.children.values()) {\n if (fragment.hasRequestCode(requestCode)) {\n return true\n }\n }\n return this.requestCode === requestCode\n }\n\n /**\n * A handler for the intent event dispatched by web components hosted by this fragment.\n *\n * **Usage example:**\n *\n * ```ts\n * <custom-element @startactivity=\"${this.handleIntentEvent}\"></custom-element>\n * <custom-element @startactivityforresult=\"${this.handleIntentEvent}\"></custom-element>\n * ```\n *\n * @param event The event that was dispatched.\n * @returns A promise that resolves when the intent is handled.\n * @throws An error if the fragment has no activity.\n * @throws An error if the event type is not recognized.\n */\n @bound\n async handleIntentEvent(event: CustomEvent<ActivityDetail | ActivityWithResultDetail>): Promise<void> {\n const activity = this.getActivity()\n if (!activity) {\n throw new Error(`The fragment has no activity. Unable to start an intent.`)\n }\n if (event.type === EventTypes.Intent.startActivityForResult) {\n const info = event.detail as ActivityWithResultDetail\n const code = await activity.startActivityForResult(info.intent)\n this.requestCode = code\n this.pendingActivityResult.set(code, {\n onResult: info.onResult,\n })\n } else if (event.type === EventTypes.Intent.startActivity) {\n await activity.startActivity(event.detail.intent)\n } else {\n throw new Error(`Unrecognized intent event: ${event.type}`)\n }\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"Fragment.js","sourceRoot":"","sources":["../../../src/core/Fragment.ts"],"names":[],"mappings":"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","sourcesContent":["import { nothing, TemplateResult } from 'lit'\nimport { Activity } from './Activity.js'\nimport { FragmentState, type FragmentOptions, FragmentManager } from './FragmentManager.js'\nimport type { Application, UpdateRequest } from './Application.js'\nimport { FragmentRenderer } from './renderer/FragmentRenderer.js'\nimport { Intent, IntentResult } from './ActivityManager.js'\nimport { bound } from '../decorators/bound.js'\nimport type { ActivityDetail, ActivityWithResultDetail } from '../events/IntentEvents.js'\nimport { EventTypes } from '../events/EventTypes.js'\nimport { type RefOrCallback } from 'lit/directives/ref.js'\n\nexport interface PendingActivityResult {\n onResult(result: IntentResult, intent: Intent): void\n}\n\n/**\n * Similar to Activity, with lifecycle methods (onCreate, onAttach, onDetach, etc.).\n * The crucial difference is that a Fragment is always hosted by an `Activity` or\n * another `Fragment`.\n *\n * A `Fragment` represents a reusable portion of the app's UI.\n * A fragment defines and manages its own layout, has its own lifecycle,\n * and can handle its own input events.\n * Fragments can't live on their own. They must be hosted by an activity or another\n * fragment. The fragment’s view hierarchy becomes part of, or attaches to,\n * the host’s view hierarchy.\n */\nexport class Fragment extends EventTarget {\n public state: FragmentState = FragmentState.Initialized\n public parent?: Activity | Fragment\n protected children = new Map<string, Fragment>()\n protected fragmentManager: FragmentManager\n\n /**\n * The request code used to start an activity for a result.\n */\n requestCode = -1\n\n /**\n * A list of pending activity results that were requested by the components\n * hosted in this fragment.\n * The key is the request code and the value contains the callback\n * that will be called when the activity result is received.\n * The callback is called with the result code and the resulting intent.\n */\n pendingActivityResult: Map<number, PendingActivityResult> = new Map<number, PendingActivityResult>()\n\n #renderer: FragmentRenderer\n\n get renderer(): FragmentRenderer {\n return this.#renderer\n }\n\n constructor(options?: FragmentOptions) {\n super()\n this.parent = options?.parent\n this.fragmentManager = new FragmentManager(this)\n this.#renderer = new FragmentRenderer(this)\n }\n\n /**\n * When implemented, this method returns the class name to be used as a root class for the fragment.\n * This class name can be used to apply styles or identify the fragment in the DOM.\n * @returns The class name to be used as a root class for the fragment.\n */\n public rootClass(): string | undefined {\n return undefined\n }\n\n /**\n * @see {@link ./Renderer.js}\n */\n public setRenderRoot(renderRoot: HTMLElement | string): void {\n this.#renderer.setRenderRoot(renderRoot)\n }\n\n onData(data: unknown): void | Promise<void> {\n this.dispatchEvent(new CustomEvent('fragment:data', { detail: data }))\n }\n\n /**\n * Called once when the fragment is created.\n *\n * In the `onCreate()` method, perform basic fragment startup logic that happens only once\n * for the entire life of the fragment.\n * @param data Optional init data.\n */\n onCreate(data?: unknown): void | Promise<void> {\n this.dispatchEvent(new CustomEvent('fragment:create', { detail: data }))\n }\n\n /**\n * Called when the fragment is attached to a parent\n */\n onAttach(data?: unknown): void | Promise<void> {\n this.dispatchEvent(new CustomEvent('fragment:attach', { detail: data }))\n }\n\n /**\n * Called when the fragment becomes visible.\n */\n onStart(): void | Promise<void> {\n this.dispatchEvent(new CustomEvent('fragment:start', { detail: null }))\n }\n\n /**\n * Called when the fragment gains focus.\n */\n onResume(): void | Promise<void> {\n this.dispatchEvent(new CustomEvent('fragment:resume', { detail: null }))\n }\n\n /**\n * Called when the fragment loses focus.\n */\n onPause(): void | Promise<void> {\n this.dispatchEvent(new CustomEvent('fragment:pause', { detail: null }))\n }\n\n /**\n * Called when the fragment is no longer visible.\n */\n onStop(): void | Promise<void> {\n this.dispatchEvent(new CustomEvent('fragment:stop', { detail: null }))\n }\n\n /**\n * Called when the fragment is detached from a parent\n */\n onDetach(): void | Promise<void> {\n this.dispatchEvent(new CustomEvent('fragment:detach', { detail: null }))\n }\n\n /**\n * Called before the fragment is destroyed.\n */\n onDestroy(): void | Promise<void> {\n this.dispatchEvent(new CustomEvent('fragment:destroy', { detail: null }))\n this.fragmentManager.onDestroy()\n }\n\n /**\n * Called by the renderer when the fragment is rendered for the first time.\n */\n onFirstRender(): void {\n //\n }\n\n /**\n * A function called when it should render the view.\n * By default it renders a fragment view if the fragment hosts other fragments and only one is visible.\n */\n render(): TemplateResult | typeof nothing {\n const fragment = this.getSingleVisibleFragment()\n if (fragment) {\n // we can manage the default rendering.\n // we make an assumption that by default only one fragment is rendered,\n // otherwise the parent activity or fragment would have to setup render roots.\n return fragment.render()\n }\n return nothing\n }\n\n /**\n * Checks whether there's only one `Fragment` that is in the `Resumed` state\n * and returns it. It returns `null` if there is no `Fragment`s or more than a single\n * visible `Fragment`.\n * @returns A Fragment that is the only fragment that should be visible.\n */\n getSingleVisibleFragment(): Fragment | null {\n const fragments = this.getVisibleFragments()\n return fragments.length === 1 ? fragments[0] : null\n }\n\n /**\n * Checks whether this fragment is a host for other fragments.\n * @returns `true` when this fragment hosts other fragments.\n */\n isRenderingFragments(): boolean {\n return this.children.size > 0\n }\n\n /**\n * @returns The list of all fragments that are in the Resumed state.\n */\n getVisibleFragments(): Fragment[] {\n return this.fragmentManager.getVisible()\n }\n\n /**\n * Adds a child fragment to this fragment.\n * The FragmentManager will handle lifecycle.\n * @param key The name of the fragment.\n * @param fragment The fragment to add.\n */\n async addChild(key: string, fragment: Fragment, data?: unknown): Promise<void> {\n this.children.set(key, fragment)\n await this.fragmentManager.attachFragment(key, fragment, this, data)\n }\n\n /**\n * Removes a fragment from this fragment.\n * @param key The name of the fragment to remove.\n */\n async removeChild(key: string): Promise<void> {\n const child = this.children.get(key)\n if (child) {\n await this.fragmentManager.detachFragment(key)\n this.children.delete(key)\n }\n }\n\n /**\n * Creates a RefCallback that can be used with lit's `ref()` directive\n * to automatically show/hide a child fragment when its container element\n * is added or removed from the DOM.\n *\n * @param key The key of the child fragment to manage.\n * @returns A RefCallback to be used with the `ref()` directive.\n *\n * @example\n * // In your parent fragment's render method:\n * html`<div ${ref(this.createFragmentRef('my-child-fragment'))}></div>`\n */\n createFragmentRef(key: string): RefOrCallback<Element> {\n return (element?: Element) => {\n if (element) {\n this.fragmentManager.showFragment(key, element as HTMLElement)\n } else {\n const fragment = this.fragmentManager.findFragment(key)\n if (fragment) {\n this.fragmentManager.hideFragment(fragment)\n }\n }\n }\n }\n\n /**\n * A helper to request an update.\n * Application or parent Fragment will handle rendering.\n */\n requestUpdate(opts: UpdateRequest = {}): void {\n const { fragment = true } = opts\n if (fragment) {\n this.#renderer.requestUpdate()\n }\n this.parent?.requestUpdate(opts)\n // If no parent, do nothing (or maybe throw an error?)\n }\n\n getApplication(): Application | undefined {\n return this.parent?.getApplication()\n }\n\n getActivity(): Activity | undefined {\n return this.parent?.getActivity()\n }\n\n /**\n * Starts an activity for result.\n * @param intent The intent to start.\n */\n async startActivityForResult(intent: Intent): Promise<void> {\n const activity = this.getActivity()\n if (!activity) {\n throw new Error(`The fragment has no activity. Unable to start an intent.`)\n }\n this.requestCode = await activity.startActivityForResult(intent)\n }\n\n /**\n * Starts another activity.\n * @param intent The intent to start.\n */\n async startActivity(intent: Intent): Promise<void> {\n const activity = this.getActivity()\n if (!activity) {\n throw new Error(`The fragment has no activity. Unable to start an intent.`)\n }\n await activity.startActivity(intent)\n }\n\n /**\n * The callback method that is triggered when another activity that was\n * started for result finishes.\n *\n * @param requestCode The request code that was used to start the activity.\n * @param data The data that was passed back.\n * @param intent The intent that was used to start the activity.\n */\n async onActivityResult(requestCode: number, resultCode: IntentResult, intent: Intent): Promise<void> {\n const { pendingActivityResult, children } = this\n if (pendingActivityResult.has(requestCode)) {\n const { onResult } = pendingActivityResult.get(requestCode) as PendingActivityResult\n pendingActivityResult.delete(requestCode)\n onResult(resultCode, intent)\n return\n }\n for (const fragment of children.values()) {\n if (fragment.hasRequestCode(requestCode)) {\n fragment.onActivityResult(requestCode, resultCode, intent)\n return\n }\n }\n this.requestCode = -1\n if (this.constructor === Fragment) {\n // eslint-disable-next-line no-console\n console.info('Fragment#onActivityResult() not implemented', requestCode, resultCode, intent)\n }\n }\n\n hasRequestCode(requestCode: number): boolean {\n for (const fragment of this.children.values()) {\n if (fragment.hasRequestCode(requestCode)) {\n return true\n }\n }\n return this.requestCode === requestCode\n }\n\n /**\n * A handler for the intent event dispatched by web components hosted by this fragment.\n *\n * **Usage example:**\n *\n * ```ts\n * <custom-element @startactivity=\"${this.handleIntentEvent}\"></custom-element>\n * <custom-element @startactivityforresult=\"${this.handleIntentEvent}\"></custom-element>\n * ```\n *\n * @param event The event that was dispatched.\n * @returns A promise that resolves when the intent is handled.\n * @throws An error if the fragment has no activity.\n * @throws An error if the event type is not recognized.\n */\n @bound\n async handleIntentEvent(event: CustomEvent<ActivityDetail | ActivityWithResultDetail>): Promise<void> {\n const activity = this.getActivity()\n if (!activity) {\n throw new Error(`The fragment has no activity. Unable to start an intent.`)\n }\n if (event.type === EventTypes.Intent.startActivityForResult) {\n const info = event.detail as ActivityWithResultDetail\n const code = await activity.startActivityForResult(info.intent)\n this.requestCode = code\n this.pendingActivityResult.set(code, {\n onResult: info.onResult,\n })\n } else if (event.type === EventTypes.Intent.startActivity) {\n await activity.startActivity(event.detail.intent)\n } else {\n throw new Error(`Unrecognized intent event: ${event.type}`)\n }\n }\n}\n"]}
|
|
@@ -73,6 +73,11 @@ export default class NavigationItem extends UiElement {
|
|
|
73
73
|
* @attribute
|
|
74
74
|
*/
|
|
75
75
|
accessor iconOnly: boolean;
|
|
76
|
+
/**
|
|
77
|
+
* The reference of the navigation item to the target.
|
|
78
|
+
* @attribute
|
|
79
|
+
*/
|
|
80
|
+
accessor href: string | undefined;
|
|
76
81
|
/**
|
|
77
82
|
* Determines when the element has an icon in the "icon" slot.
|
|
78
83
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavigationItem.d.ts","sourceRoot":"","sources":["../../../../../src/elements/navigation/internals/NavigationItem.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAW,MAAM,KAAK,CAAA;AAInD,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAA;AAGpD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDG;AACH,MAAM,CAAC,OAAO,OAAO,cAAe,SAAQ,SAAS;IACnD,OAAgB,iBAAiB,EAAE,cAAc,CAGhD;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED;;;OAGG;IACH,IACI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAI1B;IAED;;;OAGG;IACyC,QAAQ,CAAC,QAAQ,UAAQ;IACrE;;;;OAIG;IACyC,QAAQ,CAAC,QAAQ,UAAQ;
|
|
1
|
+
{"version":3,"file":"NavigationItem.d.ts","sourceRoot":"","sources":["../../../../../src/elements/navigation/internals/NavigationItem.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAW,MAAM,KAAK,CAAA;AAInD,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAA;AAGpD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDG;AACH,MAAM,CAAC,OAAO,OAAO,cAAe,SAAQ,SAAS;IACnD,OAAgB,iBAAiB,EAAE,cAAc,CAGhD;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED;;;OAGG;IACH,IACI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAI1B;IAED;;;OAGG;IACyC,QAAQ,CAAC,QAAQ,UAAQ;IACrE;;;;OAIG;IACyC,QAAQ,CAAC,QAAQ,UAAQ;IACrE;;;OAGG;IACwC,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,CAAA;IAE5E;;OAEG;IACM,SAAS,CAAC,QAAQ,CAAC,OAAO,UAAQ;IAE3C;;OAEG;IACH,SAAS,CAAC,oBAAoB,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;cAK3B,MAAM,IAAI,cAAc;IAqB3C,SAAS,CAAC,UAAU,IAAI,cAAc;CAKvC"}
|
|
@@ -15,6 +15,9 @@ let NavigationItem = (() => {
|
|
|
15
15
|
let _iconOnly_decorators;
|
|
16
16
|
let _iconOnly_initializers = [];
|
|
17
17
|
let _iconOnly_extraInitializers = [];
|
|
18
|
+
let _href_decorators;
|
|
19
|
+
let _href_initializers = [];
|
|
20
|
+
let _href_extraInitializers = [];
|
|
18
21
|
let _hasIcon_decorators;
|
|
19
22
|
let _hasIcon_initializers = [];
|
|
20
23
|
let _hasIcon_extraInitializers = [];
|
|
@@ -24,10 +27,12 @@ let NavigationItem = (() => {
|
|
|
24
27
|
_set_disabled_decorators = [property({ reflect: true, type: Boolean })];
|
|
25
28
|
_selected_decorators = [property({ reflect: true, type: Boolean })];
|
|
26
29
|
_iconOnly_decorators = [property({ reflect: true, type: Boolean })];
|
|
30
|
+
_href_decorators = [property({ reflect: true, type: String })];
|
|
27
31
|
_hasIcon_decorators = [state()];
|
|
28
32
|
__esDecorate(this, null, _set_disabled_decorators, { kind: "setter", name: "disabled", static: false, private: false, access: { has: obj => "disabled" in obj, set: (obj, value) => { obj.disabled = value; } }, metadata: _metadata }, null, _instanceExtraInitializers);
|
|
29
33
|
__esDecorate(this, null, _selected_decorators, { kind: "accessor", name: "selected", static: false, private: false, access: { has: obj => "selected" in obj, get: obj => obj.selected, set: (obj, value) => { obj.selected = value; } }, metadata: _metadata }, _selected_initializers, _selected_extraInitializers);
|
|
30
34
|
__esDecorate(this, null, _iconOnly_decorators, { kind: "accessor", name: "iconOnly", static: false, private: false, access: { has: obj => "iconOnly" in obj, get: obj => obj.iconOnly, set: (obj, value) => { obj.iconOnly = value; } }, metadata: _metadata }, _iconOnly_initializers, _iconOnly_extraInitializers);
|
|
35
|
+
__esDecorate(this, null, _href_decorators, { kind: "accessor", name: "href", static: false, private: false, access: { has: obj => "href" in obj, get: obj => obj.href, set: (obj, value) => { obj.href = value; } }, metadata: _metadata }, _href_initializers, _href_extraInitializers);
|
|
31
36
|
__esDecorate(this, null, _hasIcon_decorators, { kind: "accessor", name: "hasIcon", static: false, private: false, access: { has: obj => "hasIcon" in obj, get: obj => obj.hasIcon, set: (obj, value) => { obj.hasIcon = value; } }, metadata: _metadata }, _hasIcon_initializers, _hasIcon_extraInitializers);
|
|
32
37
|
if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
|
|
33
38
|
}
|
|
@@ -62,7 +67,8 @@ let NavigationItem = (() => {
|
|
|
62
67
|
set selected(value) { this.#selected_accessor_storage = value; }
|
|
63
68
|
#iconOnly_accessor_storage = (__runInitializers(this, _selected_extraInitializers), __runInitializers(this, _iconOnly_initializers, false
|
|
64
69
|
/**
|
|
65
|
-
*
|
|
70
|
+
* The reference of the navigation item to the target.
|
|
71
|
+
* @attribute
|
|
66
72
|
*/
|
|
67
73
|
));
|
|
68
74
|
/**
|
|
@@ -72,7 +78,14 @@ let NavigationItem = (() => {
|
|
|
72
78
|
*/
|
|
73
79
|
get iconOnly() { return this.#iconOnly_accessor_storage; }
|
|
74
80
|
set iconOnly(value) { this.#iconOnly_accessor_storage = value; }
|
|
75
|
-
#
|
|
81
|
+
#href_accessor_storage = (__runInitializers(this, _iconOnly_extraInitializers), __runInitializers(this, _href_initializers, void 0));
|
|
82
|
+
/**
|
|
83
|
+
* The reference of the navigation item to the target.
|
|
84
|
+
* @attribute
|
|
85
|
+
*/
|
|
86
|
+
get href() { return this.#href_accessor_storage; }
|
|
87
|
+
set href(value) { this.#href_accessor_storage = value; }
|
|
88
|
+
#hasIcon_accessor_storage = (__runInitializers(this, _href_extraInitializers), __runInitializers(this, _hasIcon_initializers, false
|
|
76
89
|
/**
|
|
77
90
|
* Sets the `_hasIcon` state property when the "icon" slot change event is dispatched.
|
|
78
91
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavigationItem.js","sourceRoot":"","sources":["../../../../../src/elements/navigation/internals/NavigationItem.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAkB,OAAO,EAAE,MAAM,KAAK,CAAA;AACnD,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AACtD,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAA;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAA;AACpD,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;;sBAwDtB,SAAS
|
|
1
|
+
{"version":3,"file":"NavigationItem.js","sourceRoot":"","sources":["../../../../../src/elements/navigation/internals/NavigationItem.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, TemplateResult, nothing } from 'lit'\nimport { property, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { when } from 'lit/directives/when.js'\nimport { UiElement } from '../../../md/UiElement.js'\nimport { isDisabled, setDisabled } from '../../../lib/disabled.js'\n\n/**\n * NavigationItem\n *\n * An element to be placed inside a navigation bar. This component is designed for use with navigation bars and supports\n * icon-only, selected, and disabled states. It is built with accessibility and composability in mind.\n *\n * ## Accessibility\n *\n * - Uses a native `<button>` element for proper semantics and keyboard accessibility.\n * - The icon is marked with `role=\"presentation\"` to indicate it is decorative.\n * - Focus ring and ripple effects are included for visual feedback.\n *\n * ## Usage Example\n *\n * ### Accessible Navigation Example\n *\n * ```html\n * <nav aria-label=\"Main navigation\">\n * <ul style=\"display: flex; gap: 8px; list-style: none; padding: 0; margin: 0;\">\n * <li>\n * <navigation-item selected aria-current=\"page\">\n * <span slot=\"icon\" aria-hidden=\"true\">🏠</span>\n * Home\n * </navigation-item>\n * </li>\n * <li>\n * <navigation-item>\n * <span slot=\"icon\" aria-hidden=\"true\">🔍</span>\n * Search\n * </navigation-item>\n * </li>\n * <li>\n * <navigation-item>\n * <span slot=\"icon\" aria-hidden=\"true\">📁</span>\n * Files\n * </navigation-item>\n * </li>\n * <li>\n * <navigation-item iconOnly disabled aria-disabled=\"true\" tabindex=\"-1\">\n * <span slot=\"icon\" aria-hidden=\"true\">⚙️</span>\n * </navigation-item>\n * </li>\n * </ul>\n * </nav>\n * ```\n *\n * This example demonstrates a horizontal navigation bar using semantic HTML. Each `navigation-item`\n * is placed inside a list item for proper structure. The `aria-current=\"page\"` attribute marks the current\n * page, and `aria-disabled=\"true\"` with `tabindex=\"-1\"` ensures the disabled item is not focusable.\n * Icons use `aria-hidden=\"true\"` for accessibility.\n *\n * @slot icon - A slot for the icon element\n * @slot - The default slot for the label\n */\nexport default class NavigationItem extends UiElement {\n static override shadowRootOptions: ShadowRootInit = {\n mode: 'open',\n delegatesFocus: true,\n }\n\n get disabled(): boolean {\n return isDisabled(this)\n }\n\n /**\n * When set, the navigation item is in a disabled state.\n * @attribute\n */\n @property({ reflect: true, type: Boolean })\n set disabled(value: boolean) {\n const old = isDisabled(this)\n setDisabled(this, value)\n this.requestUpdate('disabled', old)\n }\n\n /**\n * Whether the navigation item is selected.\n * @attribute\n */\n @property({ reflect: true, type: Boolean }) accessor selected = false\n /**\n * When set, the navigation item is rendered as an icon-only button.\n * The width of the button is set to 40px.\n * @attribute\n */\n @property({ reflect: true, type: Boolean }) accessor iconOnly = false\n /**\n * The reference of the navigation item to the target.\n * @attribute\n */\n @property({ reflect: true, type: String }) accessor href: string | undefined\n\n /**\n * Determines when the element has an icon in the \"icon\" slot.\n */\n @state() protected accessor hasIcon = false\n\n /**\n * Sets the `_hasIcon` state property when the \"icon\" slot change event is dispatched.\n */\n protected handleIconSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement\n this.hasIcon = !!slot.assignedNodes().length\n }\n\n protected override render(): TemplateResult {\n const { pressed = false } = this\n const containerClasses = classMap({\n 'button': true,\n 'with-icon': this.hasIcon,\n 'pressed': pressed,\n 'icon-only': this.iconOnly,\n })\n return html`\n <button class=\"${containerClasses}\" id=\"button\" ?disabled=\"${this.disabled}\" aria-disabled=\"${this.disabled}\">\n <md-focus-ring part=\"focus-ring\" for=\"button\"></md-focus-ring>\n <md-ripple></md-ripple>\n ${this.renderIcon()}${when(\n this.iconOnly,\n () => nothing,\n () => html`<slot></slot>`\n )}\n </button>\n `\n }\n\n protected renderIcon(): TemplateResult {\n return html`<span role=\"presentation\" class=\"icon\"\n ><slot name=\"icon\" @slotchange=\"${this.handleIconSlotChange}\"></slot\n ></span>`\n }\n}\n"]}
|
package/package.json
CHANGED
|
@@ -34,7 +34,10 @@ function parseParams(pattern: string, uri: string): Record<string, string | stri
|
|
|
34
34
|
const result: Record<string, string | string[]> = {}
|
|
35
35
|
if (groups) {
|
|
36
36
|
Object.keys(groups).forEach((key) => {
|
|
37
|
-
let value = groups[key] as string
|
|
37
|
+
let value = groups[key] as string | undefined
|
|
38
|
+
if (value === undefined) {
|
|
39
|
+
return
|
|
40
|
+
}
|
|
38
41
|
if (value[0] === '/') {
|
|
39
42
|
value = value.substring(1)
|
|
40
43
|
}
|
package/src/core/Fragment.ts
CHANGED
|
@@ -7,6 +7,7 @@ import { Intent, IntentResult } from './ActivityManager.js'
|
|
|
7
7
|
import { bound } from '../decorators/bound.js'
|
|
8
8
|
import type { ActivityDetail, ActivityWithResultDetail } from '../events/IntentEvents.js'
|
|
9
9
|
import { EventTypes } from '../events/EventTypes.js'
|
|
10
|
+
import { type RefOrCallback } from 'lit/directives/ref.js'
|
|
10
11
|
|
|
11
12
|
export interface PendingActivityResult {
|
|
12
13
|
onResult(result: IntentResult, intent: Intent): void
|
|
@@ -209,6 +210,31 @@ export class Fragment extends EventTarget {
|
|
|
209
210
|
}
|
|
210
211
|
}
|
|
211
212
|
|
|
213
|
+
/**
|
|
214
|
+
* Creates a RefCallback that can be used with lit's `ref()` directive
|
|
215
|
+
* to automatically show/hide a child fragment when its container element
|
|
216
|
+
* is added or removed from the DOM.
|
|
217
|
+
*
|
|
218
|
+
* @param key The key of the child fragment to manage.
|
|
219
|
+
* @returns A RefCallback to be used with the `ref()` directive.
|
|
220
|
+
*
|
|
221
|
+
* @example
|
|
222
|
+
* // In your parent fragment's render method:
|
|
223
|
+
* html`<div ${ref(this.createFragmentRef('my-child-fragment'))}></div>`
|
|
224
|
+
*/
|
|
225
|
+
createFragmentRef(key: string): RefOrCallback<Element> {
|
|
226
|
+
return (element?: Element) => {
|
|
227
|
+
if (element) {
|
|
228
|
+
this.fragmentManager.showFragment(key, element as HTMLElement)
|
|
229
|
+
} else {
|
|
230
|
+
const fragment = this.fragmentManager.findFragment(key)
|
|
231
|
+
if (fragment) {
|
|
232
|
+
this.fragmentManager.hideFragment(fragment)
|
|
233
|
+
}
|
|
234
|
+
}
|
|
235
|
+
}
|
|
236
|
+
}
|
|
237
|
+
|
|
212
238
|
/**
|
|
213
239
|
* A helper to request an update.
|
|
214
240
|
* Application or parent Fragment will handle rendering.
|
|
@@ -91,6 +91,11 @@ export default class NavigationItem extends UiElement {
|
|
|
91
91
|
* @attribute
|
|
92
92
|
*/
|
|
93
93
|
@property({ reflect: true, type: Boolean }) accessor iconOnly = false
|
|
94
|
+
/**
|
|
95
|
+
* The reference of the navigation item to the target.
|
|
96
|
+
* @attribute
|
|
97
|
+
*/
|
|
98
|
+
@property({ reflect: true, type: String }) accessor href: string | undefined
|
|
94
99
|
|
|
95
100
|
/**
|
|
96
101
|
* Determines when the element has an icon in the "icon" slot.
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { assert } from '@esm-bundle/chai'
|
|
2
2
|
import sinon from 'sinon'
|
|
3
|
-
import { fixture, html } from '@open-wc/testing'
|
|
3
|
+
import { fixture, html, nextFrame } from '@open-wc/testing'
|
|
4
4
|
import { Fragment } from '../../src/core/Fragment.js'
|
|
5
5
|
import { Activity } from '../../src/core/Activity.js'
|
|
6
6
|
import { Application } from '../../src/core/Application.js'
|
|
@@ -8,8 +8,9 @@ import { FragmentState, FragmentManager } from '../../src/core/FragmentManager.j
|
|
|
8
8
|
import { IntentResult, type Intent, ActivityLifecycle } from '../../src/core/ActivityManager.js'
|
|
9
9
|
import { FragmentRenderer } from '../../src/core/renderer/FragmentRenderer.js'
|
|
10
10
|
import { EventTypes } from '../../src/events/EventTypes.js'
|
|
11
|
-
import { nothing } from 'lit'
|
|
11
|
+
import { nothing, render } from 'lit'
|
|
12
12
|
import type { ActivityDetail } from '../../src/events/IntentEvents.js'
|
|
13
|
+
import { ref } from 'lit/directives/ref.js'
|
|
13
14
|
|
|
14
15
|
class TestActivity extends Activity {
|
|
15
16
|
static override action = 'test-activity'
|
|
@@ -273,6 +274,35 @@ describe('Fragment', () => {
|
|
|
273
274
|
})
|
|
274
275
|
})
|
|
275
276
|
|
|
277
|
+
describe('createFragmentRef()', () => {
|
|
278
|
+
it('shows and hides a fragment via lit ref directive', async () => {
|
|
279
|
+
const childFragment = new TestFragment()
|
|
280
|
+
await fragment.addChild('childKey', childFragment)
|
|
281
|
+
|
|
282
|
+
const showSpy = sinon.spy(fragment['fragmentManager'], 'showFragment')
|
|
283
|
+
const hideSpy = sinon.spy(fragment['fragmentManager'], 'hideFragment')
|
|
284
|
+
// When the element is removed, the ref callback is called with `undefined`.
|
|
285
|
+
// The implementation then calls `findFragment` to get the fragment instance.
|
|
286
|
+
sinon.stub(fragment['fragmentManager'], 'findFragment').withArgs('childKey').returns(childFragment)
|
|
287
|
+
const root = document.createElement('div')
|
|
288
|
+
document.body.appendChild(root)
|
|
289
|
+
const tpl1 = html`<div class="target" ${ref(fragment.createFragmentRef('childKey'))}></div>`
|
|
290
|
+
render(tpl1, root)
|
|
291
|
+
|
|
292
|
+
const childDiv = root.querySelector<HTMLElement>('div')!
|
|
293
|
+
|
|
294
|
+
assert.isTrue(showSpy.calledOnce, 'showFragment should be called on render')
|
|
295
|
+
assert.isTrue(showSpy.calledWith('childKey', childDiv), 'showFragment called with correct arguments')
|
|
296
|
+
|
|
297
|
+
// Re-render without the ref to trigger disconnection
|
|
298
|
+
render(html`<span></span>`, root)
|
|
299
|
+
await nextFrame()
|
|
300
|
+
assert.isTrue(hideSpy.calledOnce, 'hideFragment should be called on removal')
|
|
301
|
+
assert.isTrue(hideSpy.calledWith(childFragment), 'hideFragment called with correct fragment instance')
|
|
302
|
+
assert.isNull(root.querySelector('div'), 'Target div should be removed from DOM')
|
|
303
|
+
})
|
|
304
|
+
})
|
|
305
|
+
|
|
276
306
|
describe('requestUpdate()', () => {
|
|
277
307
|
it('calls renderer.requestUpdate by default', () => {
|
|
278
308
|
const rendererSpy = sinon.spy(fragment.renderer, 'requestUpdate')
|