@patternfly/pfe-core 2.1.0 → 2.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -2,7 +2,7 @@ import { __decorate } from "tslib";
2
2
  import { bound } from '../decorators/bound.js';
3
3
  import { debounce } from '../functions/debounce.js';
4
4
  import { Logger } from './logger.js';
5
- export class CascadeController {
5
+ class CascadeController {
6
6
  constructor(host, options) {
7
7
  this.host = host;
8
8
  this.options = options;
@@ -133,4 +133,5 @@ CascadeController.instances = new WeakMap();
133
133
  __decorate([
134
134
  bound
135
135
  ], CascadeController.prototype, "parse", null);
136
+ export { CascadeController };
136
137
  //# sourceMappingURL=cascade-controller.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"cascade-controller.js","sourceRoot":"","sources":["cascade-controller.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ReactiveController, ReactiveElement } from 'lit';\n\nimport { bound } from '../decorators/bound.js';\nimport { debounce } from '../functions/debounce.js';\nimport { Logger } from './logger.js';\n\nexport interface Options<E extends ReactiveElement> {\n properties: Partial<Record<keyof E, string|string[]>>;\n prefix?: string;\n}\n\nexport class CascadeController<E extends ReactiveElement> implements ReactiveController {\n private class: typeof ReactiveElement;\n\n private logger: Logger;\n\n static instances: WeakMap<ReactiveElement, CascadeController<ReactiveElement>> = new WeakMap();\n\n mo = new MutationObserver(this.parse);\n\n cache = new Map<string, string[]>();\n\n constructor(public host: E, public options?: Options<E>) {\n this.class = host.constructor as typeof ReactiveElement;\n this.logger = new Logger(this.host);\n CascadeController.instances.set(host, this);\n const properties = this.options?.properties ?? {} as Options<E>['properties'];\n for (const [propName, cascade] of Object.entries(properties)) {\n this.initProp(propName, cascade);\n }\n host.addController(this);\n this.cascadeProperties = debounce(this.cascadeProperties, 1);\n }\n\n hostUpdated() {\n this.cascadeProperties();\n }\n\n hostConnected() {\n this.mo.observe(this.host, { attributes: true, childList: true });\n this.cascadeProperties();\n }\n\n hostDisconnected() {\n this.mo.disconnect();\n }\n\n /**\n * Handles the cascading of properties to nested components when new elements are added\n * Attribute updates/additions are handled by the attribute callback\n */\n cascadeProperties(nodeList: HTMLCollection|NodeList = this.host.children) {\n if (this.host.isConnected) {\n const selectors = this.cache.keys();\n\n // Find out if anything in the nodeList matches any of the observed selectors for cacading properties\n if (!nodeList) {\n return this._cascadeAttributes(selectors, this.cache);\n }\n\n\n for (const node of nodeList) {\n // if this node has a match function (i.e., it's an HTMLElement, not a text node),\n if (node instanceof Element) {\n // see if it matches one of the selectors, otherwise drop it (like it's hot).\n for (const selector of selectors) {\n // console.log('_copyAttribute', name, value, el.getAttribute(name));\n if (node.matches(selector)) {\n const attrNames = this.cache.get(selector);\n // each selector can match multiple properties/attributes, so\n // copy each of them\n for (const attrName of attrNames ?? []) {\n this._copyAttribute(attrName, node);\n }\n }\n }\n }\n }\n }\n }\n\n /**\n * Gets the configured attribute name for the decorated property,\n * falling back to the lowercased property name, and caches the attribute name\n * with it's designated child selectors for value-propagation on change\n */\n initProp(propName: string, cascade: string|string[]) {\n for (const nodeItem of [cascade].flat(Infinity).filter(Boolean) as string[]) {\n const { attribute } = this.class.getPropertyOptions(propName);\n\n const attr =\n typeof attribute === 'string' ? attribute\n : propName.toLowerCase();\n\n // Create an object with the node as the key and an array of attributes\n // that are to be cascaded down to it\n if (!this.cache.get(nodeItem)) {\n this.cache.set(nodeItem, [attr]);\n } else {\n this.cache.get(nodeItem)?.push(attr);\n }\n }\n }\n\n @bound private parse(mutations: MutationRecord[]) {\n // Iterate over the mutation list, look for cascade updates\n for (const mutation of mutations ?? []) {\n // If a new node is added, attempt to cascade attributes to it\n if (mutation.type === 'childList' && mutation.addedNodes.length) {\n this.cascadeProperties(mutation.addedNodes);\n } else if (mutation.type === 'attributes') {\n this._cascadeAttributes(this.cache.keys(), this.cache);\n }\n }\n }\n\n /**\n * Copy the named attribute to a target element.\n */\n private async _copyAttribute(name: string, el: Element) {\n this.logger.log(`copying ${name} to ${el}`);\n const value = this.host.getAttribute(name);\n if (el.isConnected) {\n if (value == null) {\n el.removeAttribute(name);\n } else {\n el.setAttribute(name, value);\n }\n }\n }\n\n private _cascadeAttributes(selectors: IterableIterator<string>, set: this['cache']) {\n for (const selector of selectors) {\n for (const attr of set.get(selector) ?? []) {\n this._cascadeAttribute(attr, selector);\n }\n }\n }\n\n /**\n * Trigger a cascade of the named attribute to any child elements that match\n * the `to` selector. The selector can match elements in the light DOM and\n * shadow DOM.\n * @param name The name of the attribute to cascade (not necessarily the same as the property name).\n * @param to A CSS selector that matches the elements that should received the cascaded attribute. The selector will be applied within `this` element's light and shadow DOM trees.\n */\n private _cascadeAttribute(name: string, to: string) {\n const recipients = [\n ...this.host.querySelectorAll(to),\n ...this.host.shadowRoot?.querySelectorAll(to) ?? [],\n ];\n\n for (const node of recipients) {\n this._copyAttribute(name, node);\n }\n }\n}\n"]}
1
+ {"version":3,"file":"cascade-controller.js","sourceRoot":"","sources":["cascade-controller.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ReactiveController, ReactiveElement } from 'lit';\n\nimport { bound } from '../decorators/bound.js';\nimport { debounce } from '../functions/debounce.js';\nimport { Logger } from './logger.js';\n\nexport interface Options<E extends ReactiveElement> {\n properties: Partial<Record<keyof E, string | string[]>>;\n prefix?: string;\n}\n\nexport class CascadeController<E extends ReactiveElement> implements ReactiveController {\n private class: typeof ReactiveElement;\n\n private logger: Logger;\n\n static instances: WeakMap<ReactiveElement, CascadeController<ReactiveElement>> = new WeakMap();\n\n mo = new MutationObserver(this.parse);\n\n cache = new Map<string, string[]>();\n\n constructor(public host: E, public options?: Options<E>) {\n this.class = host.constructor as typeof ReactiveElement;\n this.logger = new Logger(this.host);\n CascadeController.instances.set(host, this);\n const properties = this.options?.properties ?? {} as Options<E>['properties'];\n for (const [propName, cascade] of Object.entries(properties)) {\n this.initProp(propName, cascade);\n }\n host.addController(this);\n this.cascadeProperties = debounce(this.cascadeProperties, 1);\n }\n\n hostUpdated() {\n this.cascadeProperties();\n }\n\n hostConnected() {\n this.mo.observe(this.host, { attributes: true, childList: true });\n this.cascadeProperties();\n }\n\n hostDisconnected() {\n this.mo.disconnect();\n }\n\n /**\n * Handles the cascading of properties to nested components when new elements are added\n * Attribute updates/additions are handled by the attribute callback\n */\n cascadeProperties(nodeList: HTMLCollection | NodeList = this.host.children) {\n if (this.host.isConnected) {\n const selectors = this.cache.keys();\n\n // Find out if anything in the nodeList matches any of the observed selectors for cacading properties\n if (!nodeList) {\n return this._cascadeAttributes(selectors, this.cache);\n }\n\n\n for (const node of nodeList) {\n // if this node has a match function (i.e., it's an HTMLElement, not a text node),\n if (node instanceof Element) {\n // see if it matches one of the selectors, otherwise drop it (like it's hot).\n for (const selector of selectors) {\n // console.log('_copyAttribute', name, value, el.getAttribute(name));\n if (node.matches(selector)) {\n const attrNames = this.cache.get(selector);\n // each selector can match multiple properties/attributes, so\n // copy each of them\n for (const attrName of attrNames ?? []) {\n this._copyAttribute(attrName, node);\n }\n }\n }\n }\n }\n }\n }\n\n /**\n * Gets the configured attribute name for the decorated property,\n * falling back to the lowercased property name, and caches the attribute name\n * with it's designated child selectors for value-propagation on change\n */\n initProp(propName: string, cascade: string | string[]) {\n for (const nodeItem of [cascade].flat(Infinity).filter(Boolean) as string[]) {\n const { attribute } = this.class.getPropertyOptions(propName);\n\n const attr =\n typeof attribute === 'string' ? attribute\n : propName.toLowerCase();\n\n // Create an object with the node as the key and an array of attributes\n // that are to be cascaded down to it\n if (!this.cache.get(nodeItem)) {\n this.cache.set(nodeItem, [attr]);\n } else {\n this.cache.get(nodeItem)?.push(attr);\n }\n }\n }\n\n @bound private parse(mutations: MutationRecord[]) {\n // Iterate over the mutation list, look for cascade updates\n for (const mutation of mutations ?? []) {\n // If a new node is added, attempt to cascade attributes to it\n if (mutation.type === 'childList' && mutation.addedNodes.length) {\n this.cascadeProperties(mutation.addedNodes);\n } else if (mutation.type === 'attributes') {\n this._cascadeAttributes(this.cache.keys(), this.cache);\n }\n }\n }\n\n /**\n * Copy the named attribute to a target element.\n */\n private async _copyAttribute(name: string, el: Element) {\n this.logger.log(`copying ${name} to ${el}`);\n const value = this.host.getAttribute(name);\n if (el.isConnected) {\n if (value == null) {\n el.removeAttribute(name);\n } else {\n el.setAttribute(name, value);\n }\n }\n }\n\n private _cascadeAttributes(selectors: IterableIterator<string>, set: this['cache']) {\n for (const selector of selectors) {\n for (const attr of set.get(selector) ?? []) {\n this._cascadeAttribute(attr, selector);\n }\n }\n }\n\n /**\n * Trigger a cascade of the named attribute to any child elements that match\n * the `to` selector. The selector can match elements in the light DOM and\n * shadow DOM.\n * @param name The name of the attribute to cascade (not necessarily the same as the property name).\n * @param to A CSS selector that matches the elements that should received the cascaded attribute. The selector will be applied within `this` element's light and shadow DOM trees.\n */\n private _cascadeAttribute(name: string, to: string) {\n const recipients = [\n ...this.host.querySelectorAll(to),\n ...this.host.shadowRoot?.querySelectorAll(to) ?? [],\n ];\n\n for (const node of recipients) {\n this._copyAttribute(name, node);\n }\n }\n}\n"]}
@@ -2,19 +2,21 @@ import type { Placement } from '@floating-ui/dom';
2
2
  import type { ReactiveController, ReactiveElement } from 'lit';
3
3
  import type { StyleInfo } from 'lit/directives/style-map.js';
4
4
  import type { Options as Offset } from '@floating-ui/core/src/middleware/offset';
5
- export { Placement };
5
+ export type { Placement };
6
6
  type Lazy<T> = T | (() => T | null | undefined);
7
7
  interface FloatingDOMControllerOptions {
8
8
  content: Lazy<HTMLElement>;
9
9
  invoker?: Lazy<HTMLElement>;
10
- arrow?: boolean;
11
- flip?: boolean;
10
+ arrow?: Lazy<HTMLElement>;
12
11
  shift?: boolean;
13
12
  padding?: number;
13
+ fallbackPlacements?: Placement[];
14
14
  }
15
15
  interface ShowOptions {
16
16
  offset?: Offset;
17
17
  placement?: Placement;
18
+ flip?: boolean;
19
+ fallbackPlacements?: Placement[];
18
20
  }
19
21
  export type Anchor = '' | 'top' | 'left' | 'bottom' | 'right';
20
22
  export type Alignment = 'center' | 'start' | 'end';
@@ -43,7 +45,7 @@ export declare class FloatingDOMController implements ReactiveController {
43
45
  constructor(host: ReactiveElement, options: FloatingDOMControllerOptions);
44
46
  hostDisconnected(): void;
45
47
  /** Show the floating DOM */
46
- show({ offset, placement }?: ShowOptions): Promise<void>;
48
+ show({ offset, placement, flip, fallbackPlacements }?: ShowOptions): Promise<void>;
47
49
  /** Hide the floating DOM */
48
50
  hide(): Promise<void>;
49
51
  }
@@ -1,6 +1,6 @@
1
- var _FloatingDOMController_instances, _FloatingDOMController_open, _FloatingDOMController_opening, _FloatingDOMController_cleanup, _FloatingDOMController_anchor, _FloatingDOMController_alignment, _FloatingDOMController_styles, _FloatingDOMController_placement, _FloatingDOMController_options, _FloatingDOMController_invoker_get, _FloatingDOMController_content_get, _FloatingDOMController_update;
1
+ var _FloatingDOMController_instances, _FloatingDOMController_open, _FloatingDOMController_opening, _FloatingDOMController_cleanup, _FloatingDOMController_anchor, _FloatingDOMController_alignment, _FloatingDOMController_styles, _FloatingDOMController_placement, _FloatingDOMController_options, _FloatingDOMController_invoker_get, _FloatingDOMController_content_get, _FloatingDOMController_arrow_get, _FloatingDOMController_update;
2
2
  import { __classPrivateFieldGet, __classPrivateFieldSet } from "tslib";
3
- import { autoUpdate, computePosition, offset as offsetMiddleware, shift as shiftMiddleware, flip as flipMiddleware, } from '@floating-ui/dom';
3
+ import { autoUpdate, computePosition, offset as offsetMiddleware, shift as shiftMiddleware, flip as flipMiddleware, arrow as arrowMiddleware } from '@floating-ui/dom';
4
4
  /**
5
5
  * Controls floating DOM within a web component, e.g. tooltips and popovers
6
6
  */
@@ -32,9 +32,9 @@ export class FloatingDOMController {
32
32
  return __classPrivateFieldGet(this, _FloatingDOMController_styles, "f") ?? {};
33
33
  }
34
34
  constructor(host, options) {
35
- var _a, _b, _c, _d;
36
- this.host = host;
35
+ var _a, _b;
37
36
  _FloatingDOMController_instances.add(this);
37
+ this.host = host;
38
38
  _FloatingDOMController_open.set(this, false);
39
39
  _FloatingDOMController_opening.set(this, false);
40
40
  _FloatingDOMController_cleanup.set(this, void 0);
@@ -46,15 +46,13 @@ export class FloatingDOMController {
46
46
  host.addController(this);
47
47
  __classPrivateFieldSet(this, _FloatingDOMController_options, options, "f");
48
48
  (_a = __classPrivateFieldGet(this, _FloatingDOMController_options, "f")).invoker ?? (_a.invoker = host);
49
- (_b = __classPrivateFieldGet(this, _FloatingDOMController_options, "f")).arrow ?? (_b.arrow = false);
50
- (_c = __classPrivateFieldGet(this, _FloatingDOMController_options, "f")).flip ?? (_c.flip = true);
51
- (_d = __classPrivateFieldGet(this, _FloatingDOMController_options, "f")).shift ?? (_d.shift = true);
49
+ (_b = __classPrivateFieldGet(this, _FloatingDOMController_options, "f")).shift ?? (_b.shift = true);
52
50
  }
53
51
  hostDisconnected() {
54
52
  __classPrivateFieldGet(this, _FloatingDOMController_cleanup, "f")?.call(this);
55
53
  }
56
54
  /** Show the floating DOM */
57
- async show({ offset, placement } = {}) {
55
+ async show({ offset, placement, flip, fallbackPlacements } = {}) {
58
56
  const invoker = __classPrivateFieldGet(this, _FloatingDOMController_instances, "a", _FloatingDOMController_invoker_get);
59
57
  const content = __classPrivateFieldGet(this, _FloatingDOMController_instances, "a", _FloatingDOMController_content_get);
60
58
  if (!invoker || !content) {
@@ -62,8 +60,8 @@ export class FloatingDOMController {
62
60
  }
63
61
  if (!__classPrivateFieldGet(this, _FloatingDOMController_opening, "f")) {
64
62
  __classPrivateFieldSet(this, _FloatingDOMController_opening, true, "f");
65
- const p = __classPrivateFieldGet(this, _FloatingDOMController_instances, "m", _FloatingDOMController_update).call(this, placement, offset);
66
- __classPrivateFieldSet(this, _FloatingDOMController_cleanup, __classPrivateFieldGet(this, _FloatingDOMController_cleanup, "f") ?? autoUpdate(invoker, content, () => __classPrivateFieldGet(this, _FloatingDOMController_instances, "m", _FloatingDOMController_update).call(this, placement, offset)), "f");
63
+ const p = __classPrivateFieldGet(this, _FloatingDOMController_instances, "m", _FloatingDOMController_update).call(this, placement, offset, flip, fallbackPlacements);
64
+ __classPrivateFieldSet(this, _FloatingDOMController_cleanup, __classPrivateFieldGet(this, _FloatingDOMController_cleanup, "f") ?? autoUpdate(invoker, content, () => __classPrivateFieldGet(this, _FloatingDOMController_instances, "m", _FloatingDOMController_update).call(this, placement, offset, flip, fallbackPlacements)), "f");
67
65
  await p;
68
66
  __classPrivateFieldSet(this, _FloatingDOMController_opening, false, "f");
69
67
  }
@@ -88,23 +86,44 @@ _FloatingDOMController_open = new WeakMap(), _FloatingDOMController_opening = ne
88
86
  }, _FloatingDOMController_content_get = function _FloatingDOMController_content_get() {
89
87
  const { content } = __classPrivateFieldGet(this, _FloatingDOMController_options, "f");
90
88
  return typeof content === 'function' ? content() : content;
91
- }, _FloatingDOMController_update = async function _FloatingDOMController_update(placement = 'top', offset) {
89
+ }, _FloatingDOMController_arrow_get = function _FloatingDOMController_arrow_get() {
90
+ const { arrow } = __classPrivateFieldGet(this, _FloatingDOMController_options, "f");
91
+ return typeof arrow === 'function' ? arrow() : arrow;
92
+ }, _FloatingDOMController_update = async function _FloatingDOMController_update(placement = 'top', offset, flip = true, fallbackPlacements) {
92
93
  var _a, _b;
93
- const { flip, padding, shift } = __classPrivateFieldGet(this, _FloatingDOMController_options, "f");
94
+ const { padding, shift } = __classPrivateFieldGet(this, _FloatingDOMController_options, "f");
94
95
  const invoker = __classPrivateFieldGet(this, _FloatingDOMController_instances, "a", _FloatingDOMController_invoker_get);
95
96
  const content = __classPrivateFieldGet(this, _FloatingDOMController_instances, "a", _FloatingDOMController_content_get);
97
+ const arrow = __classPrivateFieldGet(this, _FloatingDOMController_instances, "a", _FloatingDOMController_arrow_get);
96
98
  if (!invoker || !content) {
97
99
  return;
98
100
  }
99
- const { x, y, placement: _placement } = await computePosition(invoker, content, {
101
+ const { x, y, placement: _placement, middlewareData } = await computePosition(invoker, content, {
100
102
  strategy: 'absolute',
101
103
  placement,
102
104
  middleware: [
103
105
  offsetMiddleware(offset),
104
106
  shift && shiftMiddleware({ padding }),
105
- flip && flipMiddleware({ padding }),
107
+ arrow && arrowMiddleware({ element: arrow, padding: arrow.offsetHeight / 2 }),
108
+ flip && flipMiddleware({ padding, fallbackPlacements }),
106
109
  ].filter(Boolean)
107
110
  });
111
+ if (arrow) {
112
+ const { x: arrowX, y: arrowY } = middlewareData.arrow || {};
113
+ const staticSide = {
114
+ top: 'bottom',
115
+ right: 'left',
116
+ bottom: 'top',
117
+ left: 'right',
118
+ }[_placement.split('-')[0]] || '';
119
+ Object.assign(arrow.style, {
120
+ left: arrowX != null ? `${arrowX}px` : '',
121
+ top: arrowY != null && !['top'].includes(_placement) ? `${arrowY}px` : '',
122
+ right: '',
123
+ bottom: '',
124
+ [staticSide]: `-${arrow.offsetHeight / 2}px`,
125
+ });
126
+ }
108
127
  __classPrivateFieldSet(this, _FloatingDOMController_placement, _placement, "f");
109
128
  _a = this, _b = this, [({ set value(_c) { __classPrivateFieldSet(_a, _FloatingDOMController_anchor, _c, "f"); } }).value, ({ set value(_c) { __classPrivateFieldSet(_b, _FloatingDOMController_alignment, _c, "f"); } }).value] = (__classPrivateFieldGet(this, _FloatingDOMController_placement, "f").split('-') ?? []);
110
129
  __classPrivateFieldSet(this, _FloatingDOMController_styles, {
@@ -1 +1 @@
1
- {"version":3,"file":"floating-dom-controller.js","sourceRoot":"","sources":["floating-dom-controller.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Placement } from '@floating-ui/dom';\nimport type { ReactiveController, ReactiveElement } from 'lit';\nimport type { StyleInfo } from 'lit/directives/style-map.js';\nimport type { Options as Offset } from '@floating-ui/core/src/middleware/offset';\n\n\nexport { Placement };\n\nimport {\n autoUpdate,\n computePosition,\n offset as offsetMiddleware,\n shift as shiftMiddleware,\n flip as flipMiddleware,\n} from '@floating-ui/dom';\n\ntype Lazy<T> = T|(() => T|null|undefined);\n\ninterface FloatingDOMControllerOptions {\n content: Lazy<HTMLElement>;\n invoker?: Lazy<HTMLElement>;\n arrow?: boolean;\n flip?: boolean;\n shift?: boolean;\n padding?: number;\n}\n\ninterface ShowOptions {\n offset?: Offset;\n placement?: Placement;\n}\n\nexport type Anchor = ''|'top'|'left'|'bottom'|'right';\nexport type Alignment = 'center'|'start'|'end';\n\n/**\n * Controls floating DOM within a web component, e.g. tooltips and popovers\n */\nexport class FloatingDOMController implements ReactiveController {\n #open = false;\n #opening = false;\n #cleanup?: () => void;\n #anchor?: Anchor;\n #alignment?: Alignment;\n #styles?: StyleInfo;\n #placement?: Placement;\n #options: Required<FloatingDOMControllerOptions>;\n\n get #invoker() {\n const { invoker } = this.#options;\n return typeof invoker === 'function' ? invoker() : invoker;\n }\n\n get #content() {\n const { content } = this.#options;\n return typeof content === 'function' ? content() : content;\n }\n\n /** The crosswise alignment of the invoker on which to display the floating DOM */\n get alignment() {\n return this.#alignment ?? 'center';\n }\n\n /** The side of the invoker on which to display the floating DOM */\n get anchor() {\n return this.#anchor ?? '';\n }\n\n /**\n * When true, the floating DOM is visible\n */\n get open() {\n return this.#open;\n }\n\n /** The computed placement of the floating DOM */\n get placement(): Placement {\n return this.#placement ?? 'top';\n }\n\n /**\n * Styles to apply to your element's container\n *\n * - `--_floating-content-translate`: translate to apply to floating content.\n */\n get styles(): StyleInfo {\n return this.#styles ?? {};\n }\n\n constructor(\n private host: ReactiveElement,\n options: FloatingDOMControllerOptions\n ) {\n host.addController(this);\n this.#options = options as Required<FloatingDOMControllerOptions>;\n this.#options.invoker ??= host;\n this.#options.arrow ??= false;\n this.#options.flip ??= true;\n this.#options.shift ??= true;\n }\n\n hostDisconnected() {\n this.#cleanup?.();\n }\n\n async #update(placement: Placement = 'top', offset?: Offset) {\n const { flip, padding, shift } = this.#options;\n\n const invoker = this.#invoker;\n const content = this.#content;\n if (!invoker || !content) {\n return;\n }\n const { x, y, placement: _placement } = await computePosition(invoker, content, {\n strategy: 'absolute',\n placement,\n middleware: [\n offsetMiddleware(offset),\n shift && shiftMiddleware({ padding }),\n flip && flipMiddleware({ padding }),\n ].filter(Boolean)\n });\n\n this.#placement = _placement;\n [this.#anchor, this.#alignment] = (this.#placement.split('-') ?? []) as [Anchor, Alignment];\n this.#styles = {\n '--_floating-content-translate': `${x}px ${y}px`,\n };\n this.host.requestUpdate();\n }\n\n /** Show the floating DOM */\n async show({ offset, placement }: ShowOptions = {}) {\n const invoker = this.#invoker;\n const content = this.#content;\n if (!invoker || !content) {\n return;\n }\n if (!this.#opening) {\n this.#opening = true;\n const p = this.#update(placement, offset);\n this.#cleanup ??= autoUpdate(invoker, content, () =>\n this.#update(placement, offset));\n await p;\n this.#opening = false;\n }\n this.#open = true;\n this.host.requestUpdate();\n }\n\n /** Hide the floating DOM */\n async hide() {\n await this.host.updateComplete;\n while (this.#opening && !this.open) {\n await new Promise(requestAnimationFrame);\n }\n this.#open = false;\n this.#cleanup?.();\n this.host.requestUpdate();\n await this.host.updateComplete;\n }\n}\n"]}
1
+ {"version":3,"file":"floating-dom-controller.js","sourceRoot":"","sources":["floating-dom-controller.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Placement } from '@floating-ui/dom';\nimport type { ReactiveController, ReactiveElement } from 'lit';\nimport type { StyleInfo } from 'lit/directives/style-map.js';\nimport type { Options as Offset } from '@floating-ui/core/src/middleware/offset';\n\nexport type { Placement };\n\nimport {\n autoUpdate,\n computePosition,\n offset as offsetMiddleware,\n shift as shiftMiddleware,\n flip as flipMiddleware,\n arrow as arrowMiddleware\n} from '@floating-ui/dom';\n\ntype Lazy<T> = T | (() => T | null | undefined);\n\ninterface FloatingDOMControllerOptions {\n content: Lazy<HTMLElement>;\n invoker?: Lazy<HTMLElement>;\n arrow?: Lazy<HTMLElement>;\n shift?: boolean;\n padding?: number;\n fallbackPlacements?: Placement[];\n}\n\ninterface ShowOptions {\n offset?: Offset;\n placement?: Placement;\n flip?: boolean;\n fallbackPlacements?: Placement[];\n}\n\nexport type Anchor = '' | 'top' | 'left' | 'bottom' | 'right';\nexport type Alignment = 'center' | 'start' | 'end';\n\n/**\n * Controls floating DOM within a web component, e.g. tooltips and popovers\n */\nexport class FloatingDOMController implements ReactiveController {\n #open = false;\n #opening = false;\n #cleanup?: () => void;\n #anchor?: Anchor;\n #alignment?: Alignment;\n #styles?: StyleInfo;\n #placement?: Placement;\n #options: Required<FloatingDOMControllerOptions>;\n\n get #invoker() {\n const { invoker } = this.#options;\n return typeof invoker === 'function' ? invoker() : invoker;\n }\n\n get #content() {\n const { content } = this.#options;\n return typeof content === 'function' ? content() : content;\n }\n\n get #arrow() {\n const { arrow } = this.#options;\n return typeof arrow === 'function' ? arrow() : arrow;\n }\n\n /** The crosswise alignment of the invoker on which to display the floating DOM */\n get alignment() {\n return this.#alignment ?? 'center';\n }\n\n /** The side of the invoker on which to display the floating DOM */\n get anchor() {\n return this.#anchor ?? '';\n }\n\n /**\n * When true, the floating DOM is visible\n */\n get open() {\n return this.#open;\n }\n\n /** The computed placement of the floating DOM */\n get placement(): Placement {\n return this.#placement ?? 'top';\n }\n\n /**\n * Styles to apply to your element's container\n *\n * - `--_floating-content-translate`: translate to apply to floating content.\n */\n get styles(): StyleInfo {\n return this.#styles ?? {};\n }\n\n constructor(\n private host: ReactiveElement,\n options: FloatingDOMControllerOptions\n ) {\n host.addController(this);\n this.#options = options as Required<FloatingDOMControllerOptions>;\n this.#options.invoker ??= host;\n this.#options.shift ??= true;\n }\n\n hostDisconnected() {\n this.#cleanup?.();\n }\n\n async #update(placement: Placement = 'top', offset?: Offset, flip = true, fallbackPlacements?: Placement[]) {\n const { padding, shift } = this.#options;\n\n const invoker = this.#invoker;\n const content = this.#content;\n const arrow = this.#arrow;\n if (!invoker || !content) {\n return;\n }\n const { x, y, placement: _placement, middlewareData } = await computePosition(invoker, content, {\n strategy: 'absolute',\n placement,\n middleware: [\n offsetMiddleware(offset),\n shift && shiftMiddleware({ padding }),\n arrow && arrowMiddleware({ element: arrow, padding: arrow.offsetHeight / 2 }),\n flip && flipMiddleware({ padding, fallbackPlacements }),\n ].filter(Boolean)\n });\n\n if (arrow) {\n const { x: arrowX, y: arrowY } = middlewareData.arrow || {};\n\n const staticSide = {\n top: 'bottom',\n right: 'left',\n bottom: 'top',\n left: 'right',\n }[_placement.split('-')[0]] || '';\n\n Object.assign(arrow.style, {\n left: arrowX != null ? `${arrowX}px` : '',\n top: arrowY != null && !['top'].includes(_placement) ? `${arrowY}px` : '',\n right: '',\n bottom: '',\n [staticSide]: `-${arrow.offsetHeight / 2}px`,\n });\n }\n\n this.#placement = _placement;\n [this.#anchor, this.#alignment] = (this.#placement.split('-') ?? []) as [Anchor, Alignment];\n this.#styles = {\n '--_floating-content-translate': `${x}px ${y}px`,\n };\n this.host.requestUpdate();\n }\n\n /** Show the floating DOM */\n async show({ offset, placement, flip, fallbackPlacements }: ShowOptions = {}) {\n const invoker = this.#invoker;\n const content = this.#content;\n if (!invoker || !content) {\n return;\n }\n if (!this.#opening) {\n this.#opening = true;\n const p = this.#update(placement, offset, flip, fallbackPlacements);\n this.#cleanup ??= autoUpdate(invoker, content, () =>\n this.#update(placement, offset, flip, fallbackPlacements));\n await p;\n this.#opening = false;\n }\n this.#open = true;\n this.host.requestUpdate();\n }\n\n /** Hide the floating DOM */\n async hide() {\n await this.host.updateComplete;\n while (this.#opening && !this.open) {\n await new Promise(requestAnimationFrame);\n }\n this.#open = false;\n this.#cleanup?.();\n this.host.requestUpdate();\n await this.host.updateComplete;\n }\n}\n"]}
@@ -9,7 +9,7 @@ export declare class InternalsController implements ReactiveController, ARIAMixi
9
9
  ariaChecked: ARIAMixin['ariaChecked'];
10
10
  ariaColCount: ARIAMixin['ariaColCount'];
11
11
  ariaColIndex: ARIAMixin['ariaColIndex'];
12
- ariaColIndexText: ARIAMixin['ariaColIndexText'];
12
+ ariaColIndexText: string | null;
13
13
  ariaColSpan: ARIAMixin['ariaColSpan'];
14
14
  ariaCurrent: ARIAMixin['ariaCurrent'];
15
15
  ariaDisabled: ARIAMixin['ariaDisabled'];
@@ -33,7 +33,7 @@ export declare class InternalsController implements ReactiveController, ARIAMixi
33
33
  ariaRoleDescription: ARIAMixin['ariaRoleDescription'];
34
34
  ariaRowCount: ARIAMixin['ariaRowCount'];
35
35
  ariaRowIndex: ARIAMixin['ariaRowIndex'];
36
- ariaRowIndexText: ARIAMixin['ariaRowIndexText'];
36
+ ariaRowIndexText: string | null;
37
37
  ariaRowSpan: ARIAMixin['ariaRowSpan'];
38
38
  ariaSelected: ARIAMixin['ariaSelected'];
39
39
  ariaSetSize: ARIAMixin['ariaSetSize'];
@@ -3,7 +3,7 @@ import { __classPrivateFieldGet, __classPrivateFieldSet } from "tslib";
3
3
  function isARIAMixinProp(key) {
4
4
  return key === 'role' || key.startsWith('aria');
5
5
  }
6
- export class InternalsController {
6
+ class InternalsController {
7
7
  /** True when the control is disabled via it's containing fieldset element */
8
8
  get formDisabled() {
9
9
  return this.host.matches(':disabled') || __classPrivateFieldGet(this, _InternalsController_formDisabled, "f");
@@ -67,4 +67,5 @@ export class InternalsController {
67
67
  }
68
68
  _InternalsController_internals = new WeakMap(), _InternalsController_formDisabled = new WeakMap();
69
69
  InternalsController.protos = new WeakMap();
70
+ export { InternalsController };
70
71
  //# sourceMappingURL=internals-controller.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"internals-controller.js","sourceRoot":"","sources":["internals-controller.ts"],"names":[],"mappings":";;AAEA,SAAS,eAAe,CAAC,GAAW;IAClC,OAAO,GAAG,KAAK,MAAM,IAAI,GAAG,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;AAClD,CAAC;AAED,MAAM,OAAO,mBAAmB;IA8C9B,6EAA6E;IAC7E,IAAI,YAAY;QACd,OAAO,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,IAAI,uBAAA,IAAI,yCAAc,CAAC;IAC9D,CAAC;IAID,IAAI,MAAM;QACR,OAAO,uBAAA,IAAI,sCAAW,CAAC,MAAM,CAAC;IAChC,CAAC;IAED,IAAI,QAAQ;QACV,OAAO,uBAAA,IAAI,sCAAW,CAAC,QAAQ,CAAC;IAClC,CAAC;IAED,YACS,IAA0C,EACjD,OAA4B;QADrB,SAAI,GAAJ,IAAI,CAAsC;QApBnD,iDAA6B;QAE7B,4CAAgB,KAAK,EAAC;QAqBpB,uBAAA,IAAI,kCAAc,IAAI,CAAC,eAAe,EAAE,MAAA,CAAC;QACzC,gCAAgC;QAChC,6EAA6E;QAC7E,MAAM,IAAI,GAAI,IAAyE,CAAC,oBAAoB,CAAC;QAC5G,IAAyE,CAAC,oBAAoB,GAAG,QAAQ,CAAC,EAAE;YAC3G,uBAAA,IAAI,qCAAiB,QAAQ,MAAA,CAAC;YAC9B,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;QAC7B,CAAC,CAAC;QACF,8CAA8C;QAC9C,KAAK,MAAM,GAAG,IAAI,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,uBAAA,IAAI,sCAAW,CAAC,CAAC,EAAE;YACrE,IAAI,eAAe,CAAC,GAAG,CAAC,EAAE;gBACxB,MAAM,CAAC,cAAc,CAAC,IAAI,EAAE,GAAG,EAAE;oBAC/B,GAAG;wBACD,OAAO,uBAAA,IAAI,sCAAW,CAAC,GAAG,CAAC,CAAC;oBAC9B,CAAC;oBACD,GAAG,CAAC,KAAK;wBACP,uBAAA,IAAI,sCAAW,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;wBAC7B,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;oBAC5B,CAAC;iBACF,CAAC,CAAC;aACJ;SACF;QAED,KAAK,MAAM,CAAC,GAAG,EAAE,GAAG,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,OAAO,IAAI,EAAE,CAAC,EAAE;YACtD,IAAI,eAAe,CAAC,GAAG,CAAC,EAAE;gBACxB,IAAI,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC;aACjB;SACF;IACH,CAAC;IAID,YAAY,CAAC,GAAG,IAAkD;QAChE,OAAO,uBAAA,IAAI,sCAAW,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,CAAC;IAC/C,CAAC;IAED,WAAW,CAAC,GAAG,IAAiD;QAC9D,OAAO,uBAAA,IAAI,sCAAW,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC,CAAC;IAC9C,CAAC;IAED,aAAa,CAAC,GAAG,IAAmD;QAClE,OAAO,uBAAA,IAAI,sCAAW,CAAC,aAAa,CAAC,GAAG,IAAI,CAAC,CAAC;IAChD,CAAC;IAED,cAAc,CAAC,GAAG,IAAoD;QACpE,OAAO,uBAAA,IAAI,sCAAW,CAAC,cAAc,CAAC,GAAG,IAAI,CAAC,CAAC;IACjD,CAAC;IAED,MAAM;QACJ,uBAAA,IAAI,sCAAW,CAAC,IAAI,EAAE,aAAa,EAAE,CAAC;IACxC,CAAC;IAED,KAAK;QACH,uBAAA,IAAI,sCAAW,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC;IAChC,CAAC;;;AApEM,0BAAM,GAAG,IAAI,OAAO,EAAE,CAAC","sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from 'lit';\n\nfunction isARIAMixinProp(key: string): key is keyof ARIAMixin {\n return key === 'role' || key.startsWith('aria');\n}\n\nexport class InternalsController implements ReactiveController, ARIAMixin {\n declare role: ARIAMixin['role'];\n declare ariaAtomic: ARIAMixin['ariaAtomic'];\n declare ariaAutoComplete: ARIAMixin['ariaAutoComplete'];\n declare ariaBusy: ARIAMixin['ariaBusy'];\n declare ariaChecked: ARIAMixin['ariaChecked'];\n declare ariaColCount: ARIAMixin['ariaColCount'];\n declare ariaColIndex: ARIAMixin['ariaColIndex'];\n declare ariaColIndexText: ARIAMixin['ariaColIndexText'];\n declare ariaColSpan: ARIAMixin['ariaColSpan'];\n declare ariaCurrent: ARIAMixin['ariaCurrent'];\n declare ariaDisabled: ARIAMixin['ariaDisabled'];\n declare ariaExpanded: ARIAMixin['ariaExpanded'];\n declare ariaHasPopup: ARIAMixin['ariaHasPopup'];\n declare ariaHidden: ARIAMixin['ariaHidden'];\n declare ariaInvalid: ARIAMixin['ariaInvalid'];\n declare ariaKeyShortcuts: ARIAMixin['ariaKeyShortcuts'];\n declare ariaLabel: ARIAMixin['ariaLabel'];\n declare ariaLevel: ARIAMixin['ariaLevel'];\n declare ariaLive: ARIAMixin['ariaLive'];\n declare ariaModal: ARIAMixin['ariaModal'];\n declare ariaMultiLine: ARIAMixin['ariaMultiLine'];\n declare ariaMultiSelectable: ARIAMixin['ariaMultiSelectable'];\n declare ariaOrientation: ARIAMixin['ariaOrientation'];\n declare ariaPlaceholder: ARIAMixin['ariaPlaceholder'];\n declare ariaPosInSet: ARIAMixin['ariaPosInSet'];\n declare ariaPressed: ARIAMixin['ariaPressed'];\n declare ariaReadOnly: ARIAMixin['ariaReadOnly'];\n declare ariaRequired: ARIAMixin['ariaRequired'];\n declare ariaRoleDescription: ARIAMixin['ariaRoleDescription'];\n declare ariaRowCount: ARIAMixin['ariaRowCount'];\n declare ariaRowIndex: ARIAMixin['ariaRowIndex'];\n declare ariaRowIndexText: ARIAMixin['ariaRowIndexText'];\n declare ariaRowSpan: ARIAMixin['ariaRowSpan'];\n declare ariaSelected: ARIAMixin['ariaSelected'];\n declare ariaSetSize: ARIAMixin['ariaSetSize'];\n declare ariaSort: ARIAMixin['ariaSort'];\n declare ariaValueMax: ARIAMixin['ariaValueMax'];\n declare ariaValueMin: ARIAMixin['ariaValueMin'];\n declare ariaValueNow: ARIAMixin['ariaValueNow'];\n declare ariaValueText: ARIAMixin['ariaValueText'];\n\n #internals: ElementInternals;\n\n #formDisabled = false;\n\n /** True when the control is disabled via it's containing fieldset element */\n get formDisabled() {\n return this.host.matches(':disabled') || this.#formDisabled;\n }\n\n static protos = new WeakMap();\n\n get labels() {\n return this.#internals.labels;\n }\n\n get validity() {\n return this.#internals.validity;\n }\n\n constructor(\n public host: ReactiveControllerHost & HTMLElement,\n options?: Partial<ARIAMixin>\n ) {\n this.#internals = host.attachInternals();\n // We need to polyfill :disabled\n // see https://github.com/calebdwilliams/element-internals-polyfill/issues/88\n const orig = (host as HTMLElement & { formDisabledCallback?(disabled: boolean): void }).formDisabledCallback;\n (host as HTMLElement & { formDisabledCallback?(disabled: boolean): void }).formDisabledCallback = disabled => {\n this.#formDisabled = disabled;\n orig?.call(host, disabled);\n };\n // proxy the internals object's aria prototype\n for (const key of Object.keys(Object.getPrototypeOf(this.#internals))) {\n if (isARIAMixinProp(key)) {\n Object.defineProperty(this, key, {\n get() {\n return this.#internals[key];\n },\n set(value) {\n this.#internals[key] = value;\n this.host.requestUpdate();\n }\n });\n }\n }\n\n for (const [key, val] of Object.entries(options ?? {})) {\n if (isARIAMixinProp(key)) {\n this[key] = val;\n }\n }\n }\n\n hostConnected?(): void\n\n setFormValue(...args: Parameters<ElementInternals['setFormValue']>) {\n return this.#internals.setFormValue(...args);\n }\n\n setValidity(...args: Parameters<ElementInternals['setValidity']>) {\n return this.#internals.setValidity(...args);\n }\n\n checkValidity(...args: Parameters<ElementInternals['checkValidity']>) {\n return this.#internals.checkValidity(...args);\n }\n\n reportValidity(...args: Parameters<ElementInternals['reportValidity']>) {\n return this.#internals.reportValidity(...args);\n }\n\n submit() {\n this.#internals.form?.requestSubmit();\n }\n\n reset() {\n this.#internals.form?.reset();\n }\n}\n"]}
1
+ {"version":3,"file":"internals-controller.js","sourceRoot":"","sources":["internals-controller.ts"],"names":[],"mappings":";;AAEA,SAAS,eAAe,CAAC,GAAW;IAClC,OAAO,GAAG,KAAK,MAAM,IAAI,GAAG,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;AAClD,CAAC;AAED,MAAa,mBAAmB;IA8C9B,6EAA6E;IAC7E,IAAI,YAAY;QACd,OAAO,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,IAAI,uBAAA,IAAI,yCAAc,CAAC;IAC9D,CAAC;IAID,IAAI,MAAM;QACR,OAAO,uBAAA,IAAI,sCAAW,CAAC,MAAM,CAAC;IAChC,CAAC;IAED,IAAI,QAAQ;QACV,OAAO,uBAAA,IAAI,sCAAW,CAAC,QAAQ,CAAC;IAClC,CAAC;IAED,YACS,IAA0C,EACjD,OAA4B;QADrB,SAAI,GAAJ,IAAI,CAAsC;QApBnD,iDAA6B;QAE7B,4CAAgB,KAAK,EAAC;QAqBpB,uBAAA,IAAI,kCAAc,IAAI,CAAC,eAAe,EAAE,MAAA,CAAC;QACzC,gCAAgC;QAChC,6EAA6E;QAC7E,MAAM,IAAI,GAAI,IAAyE,CAAC,oBAAoB,CAAC;QAC5G,IAAyE,CAAC,oBAAoB,GAAG,QAAQ,CAAC,EAAE;YAC3G,uBAAA,IAAI,qCAAiB,QAAQ,MAAA,CAAC;YAC9B,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;QAC7B,CAAC,CAAC;QACF,8CAA8C;QAC9C,KAAK,MAAM,GAAG,IAAI,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,uBAAA,IAAI,sCAAW,CAAC,CAAC,EAAE;YACrE,IAAI,eAAe,CAAC,GAAG,CAAC,EAAE;gBACxB,MAAM,CAAC,cAAc,CAAC,IAAI,EAAE,GAAG,EAAE;oBAC/B,GAAG;wBACD,OAAO,uBAAA,IAAI,sCAAW,CAAC,GAAG,CAAC,CAAC;oBAC9B,CAAC;oBACD,GAAG,CAAC,KAAK;wBACP,uBAAA,IAAI,sCAAW,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;wBAC7B,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;oBAC5B,CAAC;iBACF,CAAC,CAAC;aACJ;SACF;QAED,KAAK,MAAM,CAAC,GAAG,EAAE,GAAG,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,OAAO,IAAI,EAAE,CAAC,EAAE;YACtD,IAAI,eAAe,CAAC,GAAG,CAAC,EAAE;gBACxB,IAAI,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC;aACjB;SACF;IACH,CAAC;IAID,YAAY,CAAC,GAAG,IAAkD;QAChE,OAAO,uBAAA,IAAI,sCAAW,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,CAAC;IAC/C,CAAC;IAED,WAAW,CAAC,GAAG,IAAiD;QAC9D,OAAO,uBAAA,IAAI,sCAAW,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC,CAAC;IAC9C,CAAC;IAED,aAAa,CAAC,GAAG,IAAmD;QAClE,OAAO,uBAAA,IAAI,sCAAW,CAAC,aAAa,CAAC,GAAG,IAAI,CAAC,CAAC;IAChD,CAAC;IAED,cAAc,CAAC,GAAG,IAAoD;QACpE,OAAO,uBAAA,IAAI,sCAAW,CAAC,cAAc,CAAC,GAAG,IAAI,CAAC,CAAC;IACjD,CAAC;IAED,MAAM;QACJ,uBAAA,IAAI,sCAAW,CAAC,IAAI,EAAE,aAAa,EAAE,CAAC;IACxC,CAAC;IAED,KAAK;QACH,uBAAA,IAAI,sCAAW,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC;IAChC,CAAC;;;AApEM,0BAAM,GAAG,IAAI,OAAO,EAAE,AAAhB,CAAiB;SAnDnB,mBAAmB","sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from 'lit';\n\nfunction isARIAMixinProp(key: string): key is keyof ARIAMixin {\n return key === 'role' || key.startsWith('aria');\n}\n\nexport class InternalsController implements ReactiveController, ARIAMixin {\n declare role: ARIAMixin['role'];\n declare ariaAtomic: ARIAMixin['ariaAtomic'];\n declare ariaAutoComplete: ARIAMixin['ariaAutoComplete'];\n declare ariaBusy: ARIAMixin['ariaBusy'];\n declare ariaChecked: ARIAMixin['ariaChecked'];\n declare ariaColCount: ARIAMixin['ariaColCount'];\n declare ariaColIndex: ARIAMixin['ariaColIndex'];\n declare ariaColIndexText: string | null;\n declare ariaColSpan: ARIAMixin['ariaColSpan'];\n declare ariaCurrent: ARIAMixin['ariaCurrent'];\n declare ariaDisabled: ARIAMixin['ariaDisabled'];\n declare ariaExpanded: ARIAMixin['ariaExpanded'];\n declare ariaHasPopup: ARIAMixin['ariaHasPopup'];\n declare ariaHidden: ARIAMixin['ariaHidden'];\n declare ariaInvalid: ARIAMixin['ariaInvalid'];\n declare ariaKeyShortcuts: ARIAMixin['ariaKeyShortcuts'];\n declare ariaLabel: ARIAMixin['ariaLabel'];\n declare ariaLevel: ARIAMixin['ariaLevel'];\n declare ariaLive: ARIAMixin['ariaLive'];\n declare ariaModal: ARIAMixin['ariaModal'];\n declare ariaMultiLine: ARIAMixin['ariaMultiLine'];\n declare ariaMultiSelectable: ARIAMixin['ariaMultiSelectable'];\n declare ariaOrientation: ARIAMixin['ariaOrientation'];\n declare ariaPlaceholder: ARIAMixin['ariaPlaceholder'];\n declare ariaPosInSet: ARIAMixin['ariaPosInSet'];\n declare ariaPressed: ARIAMixin['ariaPressed'];\n declare ariaReadOnly: ARIAMixin['ariaReadOnly'];\n declare ariaRequired: ARIAMixin['ariaRequired'];\n declare ariaRoleDescription: ARIAMixin['ariaRoleDescription'];\n declare ariaRowCount: ARIAMixin['ariaRowCount'];\n declare ariaRowIndex: ARIAMixin['ariaRowIndex'];\n declare ariaRowIndexText: string | null;\n declare ariaRowSpan: ARIAMixin['ariaRowSpan'];\n declare ariaSelected: ARIAMixin['ariaSelected'];\n declare ariaSetSize: ARIAMixin['ariaSetSize'];\n declare ariaSort: ARIAMixin['ariaSort'];\n declare ariaValueMax: ARIAMixin['ariaValueMax'];\n declare ariaValueMin: ARIAMixin['ariaValueMin'];\n declare ariaValueNow: ARIAMixin['ariaValueNow'];\n declare ariaValueText: ARIAMixin['ariaValueText'];\n\n #internals: ElementInternals;\n\n #formDisabled = false;\n\n /** True when the control is disabled via it's containing fieldset element */\n get formDisabled() {\n return this.host.matches(':disabled') || this.#formDisabled;\n }\n\n static protos = new WeakMap();\n\n get labels() {\n return this.#internals.labels;\n }\n\n get validity() {\n return this.#internals.validity;\n }\n\n constructor(\n public host: ReactiveControllerHost & HTMLElement,\n options?: Partial<ARIAMixin>\n ) {\n this.#internals = host.attachInternals();\n // We need to polyfill :disabled\n // see https://github.com/calebdwilliams/element-internals-polyfill/issues/88\n const orig = (host as HTMLElement & { formDisabledCallback?(disabled: boolean): void }).formDisabledCallback;\n (host as HTMLElement & { formDisabledCallback?(disabled: boolean): void }).formDisabledCallback = disabled => {\n this.#formDisabled = disabled;\n orig?.call(host, disabled);\n };\n // proxy the internals object's aria prototype\n for (const key of Object.keys(Object.getPrototypeOf(this.#internals))) {\n if (isARIAMixinProp(key)) {\n Object.defineProperty(this, key, {\n get() {\n return this.#internals[key];\n },\n set(value) {\n this.#internals[key] = value;\n this.host.requestUpdate();\n }\n });\n }\n }\n\n for (const [key, val] of Object.entries(options ?? {})) {\n if (isARIAMixinProp(key)) {\n this[key] = val;\n }\n }\n }\n\n hostConnected?(): void\n\n setFormValue(...args: Parameters<ElementInternals['setFormValue']>) {\n return this.#internals.setFormValue(...args);\n }\n\n setValidity(...args: Parameters<ElementInternals['setValidity']>) {\n return this.#internals.setValidity(...args);\n }\n\n checkValidity(...args: Parameters<ElementInternals['checkValidity']>) {\n return this.#internals.checkValidity(...args);\n }\n\n reportValidity(...args: Parameters<ElementInternals['reportValidity']>) {\n return this.#internals.reportValidity(...args);\n }\n\n submit() {\n this.#internals.form?.requestSubmit();\n }\n\n reset() {\n this.#internals.form?.reset();\n }\n}\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"light-dom-controller.js","sourceRoot":"","sources":["light-dom-controller.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAOrC,MAAM,OAAO,kBAAkB;IAK7B,YAAoB,IAAqB,EAAE,WAAuB,EAAU,OAAiB;QAAzE,SAAI,GAAJ,IAAI,CAAiB;QAAmC,YAAO,GAAP,OAAO,CAAU;QAC3F,IAAI,CAAC,WAAW,GAAG,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC1C,IAAI,CAAC,EAAE,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QACjD,IAAI,CAAC,MAAM,GAAG,IAAI,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACpC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;IAC3B,CAAC;IAED,aAAa;QACX,IAAI,IAAI,CAAC,WAAW,EAAE,EAAE;YACtB,IAAI,CAAC,WAAW,EAAE,CAAC;SACpB;aAAM,IAAI,IAAI,CAAC,OAAO,EAAE,YAAY,EAAE;YACrC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC;SAC9C;QAED,IAAI,CAAC,YAAY,EAAE,CAAC;IACtB,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,EAAE,CAAC,UAAU,EAAE,CAAC;IACvB,CAAC;IAEO,YAAY;QAClB,IAAI,IAAI,CAAC,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE;YACjC,8CAA8C;YAC9C,IAAI,CAAC,EAAE,CAAC,OAAO,CACb,IAAI,CAAC,IAAI,EACP,OAAO,IAAI,CAAC,OAAO,EAAE,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE;gBACjE,CAAC,CAAC,IAAI,CAAC,OAAO,EAAE,OAA+B,CAChD,CAAC;SACH;IACH,CAAC;IAED;;OAEG;IACH,WAAW;QACT,OAAO,CAAC,CAAC,CACP,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC;YAC7B,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,CAChD,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { ReactiveController, ReactiveElement } from 'lit';\n\nimport { Logger } from './logger.js';\n\nexport interface Options {\n observe?: boolean|MutationObserverInit;\n emptyWarning?: string;\n}\n\nexport class LightDOMController implements ReactiveController {\n private mo: MutationObserver;\n private logger: Logger;\n private initializer: () => void;\n\n constructor(private host: ReactiveElement, initializer: () => void, private options?: Options) {\n this.initializer = initializer.bind(host);\n this.mo = new MutationObserver(this.initializer);\n this.logger = new Logger(this.host);\n host.addController(this);\n }\n\n hostConnected() {\n if (this.hasLightDOM()) {\n this.initializer();\n } else if (this.options?.emptyWarning) {\n this.logger.warn(this.options?.emptyWarning);\n }\n\n this.initObserver();\n }\n\n hostDisconnected() {\n this.mo.disconnect();\n }\n\n private initObserver() {\n if (this.options?.observe ?? true) {\n // Use the provided options, or their defaults\n this.mo.observe(\n this.host,\n typeof this.options?.observe !== 'object' ? { childList: true }\n : this.options?.observe as MutationObserverInit\n );\n }\n }\n\n /**\n * Returns a boolean statement of whether or not this component contains any light DOM.\n */\n hasLightDOM(): boolean {\n return !!(\n this.host.children.length > 0 ||\n (this.host.textContent ?? '').trim().length > 0\n );\n }\n}\n"]}
1
+ {"version":3,"file":"light-dom-controller.js","sourceRoot":"","sources":["light-dom-controller.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAOrC,MAAM,OAAO,kBAAkB;IAK7B,YAAoB,IAAqB,EAAE,WAAuB,EAAU,OAAiB;QAAzE,SAAI,GAAJ,IAAI,CAAiB;QAAmC,YAAO,GAAP,OAAO,CAAU;QAC3F,IAAI,CAAC,WAAW,GAAG,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC1C,IAAI,CAAC,EAAE,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QACjD,IAAI,CAAC,MAAM,GAAG,IAAI,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACpC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;IAC3B,CAAC;IAED,aAAa;QACX,IAAI,IAAI,CAAC,WAAW,EAAE,EAAE;YACtB,IAAI,CAAC,WAAW,EAAE,CAAC;SACpB;aAAM,IAAI,IAAI,CAAC,OAAO,EAAE,YAAY,EAAE;YACrC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC;SAC9C;QAED,IAAI,CAAC,YAAY,EAAE,CAAC;IACtB,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,EAAE,CAAC,UAAU,EAAE,CAAC;IACvB,CAAC;IAEO,YAAY;QAClB,IAAI,IAAI,CAAC,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE;YACjC,8CAA8C;YAC9C,IAAI,CAAC,EAAE,CAAC,OAAO,CACb,IAAI,CAAC,IAAI,EACP,OAAO,IAAI,CAAC,OAAO,EAAE,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE;gBACjE,CAAC,CAAC,IAAI,CAAC,OAAO,EAAE,OAA+B,CAChD,CAAC;SACH;IACH,CAAC;IAED;;OAEG;IACH,WAAW;QACT,OAAO,CAAC,CAAC,CACP,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC;YAC7B,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,CAChD,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { ReactiveController, ReactiveElement } from 'lit';\n\nimport { Logger } from './logger.js';\n\nexport interface Options {\n observe?: boolean | MutationObserverInit;\n emptyWarning?: string;\n}\n\nexport class LightDOMController implements ReactiveController {\n private mo: MutationObserver;\n private logger: Logger;\n private initializer: () => void;\n\n constructor(private host: ReactiveElement, initializer: () => void, private options?: Options) {\n this.initializer = initializer.bind(host);\n this.mo = new MutationObserver(this.initializer);\n this.logger = new Logger(this.host);\n host.addController(this);\n }\n\n hostConnected() {\n if (this.hasLightDOM()) {\n this.initializer();\n } else if (this.options?.emptyWarning) {\n this.logger.warn(this.options?.emptyWarning);\n }\n\n this.initObserver();\n }\n\n hostDisconnected() {\n this.mo.disconnect();\n }\n\n private initObserver() {\n if (this.options?.observe ?? true) {\n // Use the provided options, or their defaults\n this.mo.observe(\n this.host,\n typeof this.options?.observe !== 'object' ? { childList: true }\n : this.options?.observe as MutationObserverInit\n );\n }\n }\n\n /**\n * Returns a boolean statement of whether or not this component contains any light DOM.\n */\n hasLightDOM(): boolean {\n return !!(\n this.host.children.length > 0 ||\n (this.host.textContent ?? '').trim().length > 0\n );\n }\n}\n"]}
@@ -1,4 +1,4 @@
1
- export class Logger {
1
+ class Logger {
2
2
  get prefix() {
3
3
  return `[${this.host.localName}${this.host.id ? `#${this.host.id}` : ''}]`;
4
4
  }
@@ -87,4 +87,5 @@ export class Logger {
87
87
  }
88
88
  }
89
89
  Logger.instances = new WeakMap();
90
+ export { Logger };
90
91
  //# sourceMappingURL=logger.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"logger.js","sourceRoot":"","sources":["logger.ts"],"names":[],"mappings":"AAEA,MAAM,OAAO,MAAM;IAKjB,IAAY,MAAM;QAChB,OAAO,IAAI,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC;IAC7E,CAAC;IAED;;;;;OAKG;IACH,MAAM,CAAC,QAAQ,CAAC,UAAU,GAAG,IAAI;QAC/B,yEAAyE;QACzE,gDAAgD;QAChD,IAAI;YACF,IAAI,UAAU,KAAK,IAAI,EAAE;gBACvB,MAAM,CAAC,QAAQ,GAAG,CAAC,CAAC,UAAU,CAAC;gBAC/B,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC,UAAU,CAAC;aACpC;YACD,OAAO,YAAY,CAAC,MAAM,KAAK,MAAM,CAAC;SACvC;QAAC,OAAO,CAAC,EAAE;YACV,OAAO,MAAM,CAAC,QAAQ,CAAC;SACxB;IACH,CAAC;IAED;;;;OAIG;IACH,MAAM,CAAC,GAAG,CAAC,GAAG,IAAe;QAC3B,IAAI,MAAM,CAAC,QAAQ,EAAE,EAAE;YACrB,sCAAsC;YACtC,OAAO,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,CAAC;SACtB;IACH,CAAC;IAED;;;;OAIG;IACH,MAAM,CAAC,IAAI,CAAC,GAAG,IAAe;QAC5B,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,iCAAiC;IAC1D,CAAC;IAED;;;;OAIG;IACH,MAAM,CAAC,KAAK,CAAC,GAAG,IAAe;QAC7B,OAAO,CAAC,KAAK,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,iCAAiC;IACvE,CAAC;IAED;;;;OAIG;IACH,GAAG,CAAC,GAAG,IAAe;QACpB,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,CAAC;IACnC,CAAC;IAED;;;;OAIG;IACH,IAAI,CAAC,GAAG,IAAe;QACrB,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,CAAC;IACpC,CAAC;IAED;;;;OAIG;IACH,KAAK,CAAC,GAAG,IAAe;QACtB,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,CAAC;IACrC,CAAC;IAED,YAAoB,IAAqB;QAArB,SAAI,GAAJ,IAAI,CAAiB;QACvC,4CAA4C;QAC5C,IAAI,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YAC9B,OAAO,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAW,CAAC;SAC7C;QACD,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;QACzB,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;IACnC,CAAC;IAED,aAAa;QACX,IAAI,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IACxB,CAAC;;AA9Fc,gBAAS,GAAiC,IAAI,OAAO,EAAE,CAAC","sourcesContent":["import type { ReactiveController, ReactiveElement } from 'lit';\n\nexport class Logger implements ReactiveController {\n private static logDebug: boolean;\n\n private static instances: WeakMap<HTMLElement, Logger> = new WeakMap();\n\n private get prefix() {\n return `[${this.host.localName}${this.host.id ? `#${this.host.id}` : ''}]`;\n }\n\n /**\n * A boolean value that indicates if the logging should be printed to the console; used for debugging.\n * For use in a JS file or script tag; can also be added in the constructor of a component during development.\n * @example Logger.debugLog(true);\n * @tags debug\n */\n static debugLog(preference = null) {\n // wrap localStorage references in a try/catch; merely referencing it can\n // throw errors in some locked down environments\n try {\n if (preference !== null) {\n Logger.logDebug = !!preference;\n localStorage.pfeLog = !!preference;\n }\n return localStorage.pfeLog === 'true';\n } catch (e) {\n return Logger.logDebug;\n }\n }\n\n /**\n * A logging wrapper which checks the debugLog boolean and prints to the console if true.\n *\n * @example Logger.log(\"Hello\");\n */\n static log(...msgs: unknown[]) {\n if (Logger.debugLog()) {\n // eslint-disable-next-line no-console\n console.log(...msgs);\n }\n }\n\n /**\n * A console warning wrapper which formats your output with useful debugging information.\n *\n * @example Logger.warn(\"Hello\");\n */\n static warn(...msgs: unknown[]) {\n console.warn(...msgs); // eslint-disable-line no-console\n }\n\n /**\n * A console error wrapper which formats your output with useful debugging information.\n * For use inside a component's function.\n * @example Logger.error(\"Hello\");\n */\n static error(...msgs: unknown[]) {\n console.error([...msgs].join(' ')); // eslint-disable-line no-console\n }\n\n /**\n * Local logging that outputs the tag name as a prefix automatically\n *\n * @example this.logger.log(\"Hello\");\n */\n log(...msgs: unknown[]) {\n Logger.log(this.prefix, ...msgs);\n }\n\n /**\n * Local warning wrapper that outputs the tag name as a prefix automatically.\n * For use inside a component's function.\n * @example this.logger.warn(\"Hello\");\n */\n warn(...msgs: unknown[]) {\n Logger.warn(this.prefix, ...msgs);\n }\n\n /**\n * Local error wrapper that outputs the tag name as a prefix automatically.\n * For use inside a component's function.\n * @example this.logger.error(\"Hello\");\n */\n error(...msgs: unknown[]) {\n Logger.error(this.prefix, ...msgs);\n }\n\n constructor(private host: ReactiveElement) {\n // We only need one logger instance per host\n if (Logger.instances.get(host)) {\n return Logger.instances.get(host) as Logger;\n }\n host.addController(this);\n Logger.instances.set(host, this);\n }\n\n hostConnected() {\n this.log('connected');\n }\n}\n"]}
1
+ {"version":3,"file":"logger.js","sourceRoot":"","sources":["logger.ts"],"names":[],"mappings":"AAEA,MAAa,MAAM;IAKjB,IAAY,MAAM;QAChB,OAAO,IAAI,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC;IAC7E,CAAC;IAED;;;;;OAKG;IACH,MAAM,CAAC,QAAQ,CAAC,UAAU,GAAG,IAAI;QAC/B,yEAAyE;QACzE,gDAAgD;QAChD,IAAI;YACF,IAAI,UAAU,KAAK,IAAI,EAAE;gBACvB,MAAM,CAAC,QAAQ,GAAG,CAAC,CAAC,UAAU,CAAC;gBAC/B,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC,UAAU,CAAC;aACpC;YACD,OAAO,YAAY,CAAC,MAAM,KAAK,MAAM,CAAC;SACvC;QAAC,OAAO,CAAC,EAAE;YACV,OAAO,MAAM,CAAC,QAAQ,CAAC;SACxB;IACH,CAAC;IAED;;;;OAIG;IACH,MAAM,CAAC,GAAG,CAAC,GAAG,IAAe;QAC3B,IAAI,MAAM,CAAC,QAAQ,EAAE,EAAE;YACrB,sCAAsC;YACtC,OAAO,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,CAAC;SACtB;IACH,CAAC;IAED;;;;OAIG;IACH,MAAM,CAAC,IAAI,CAAC,GAAG,IAAe;QAC5B,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,iCAAiC;IAC1D,CAAC;IAED;;;;OAIG;IACH,MAAM,CAAC,KAAK,CAAC,GAAG,IAAe;QAC7B,OAAO,CAAC,KAAK,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,iCAAiC;IACvE,CAAC;IAED;;;;OAIG;IACH,GAAG,CAAC,GAAG,IAAe;QACpB,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,CAAC;IACnC,CAAC;IAED;;;;OAIG;IACH,IAAI,CAAC,GAAG,IAAe;QACrB,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,CAAC;IACpC,CAAC;IAED;;;;OAIG;IACH,KAAK,CAAC,GAAG,IAAe;QACtB,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,CAAC;IACrC,CAAC;IAED,YAAoB,IAAqB;QAArB,SAAI,GAAJ,IAAI,CAAiB;QACvC,4CAA4C;QAC5C,IAAI,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YAC9B,OAAO,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAW,CAAC;SAC7C;QACD,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;QACzB,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;IACnC,CAAC;IAED,aAAa;QACX,IAAI,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IACxB,CAAC;;AA9Fc,gBAAS,GAAiC,IAAI,OAAO,EAAE,CAAC;SAH5D,MAAM","sourcesContent":["import type { ReactiveController, ReactiveElement } from 'lit';\n\nexport class Logger implements ReactiveController {\n private static logDebug: boolean;\n\n private static instances: WeakMap<HTMLElement, Logger> = new WeakMap();\n\n private get prefix() {\n return `[${this.host.localName}${this.host.id ? `#${this.host.id}` : ''}]`;\n }\n\n /**\n * A boolean value that indicates if the logging should be printed to the console; used for debugging.\n * For use in a JS file or script tag; can also be added in the constructor of a component during development.\n * @example Logger.debugLog(true);\n * @tags debug\n */\n static debugLog(preference = null) {\n // wrap localStorage references in a try/catch; merely referencing it can\n // throw errors in some locked down environments\n try {\n if (preference !== null) {\n Logger.logDebug = !!preference;\n localStorage.pfeLog = !!preference;\n }\n return localStorage.pfeLog === 'true';\n } catch (e) {\n return Logger.logDebug;\n }\n }\n\n /**\n * A logging wrapper which checks the debugLog boolean and prints to the console if true.\n *\n * @example Logger.log(\"Hello\");\n */\n static log(...msgs: unknown[]) {\n if (Logger.debugLog()) {\n // eslint-disable-next-line no-console\n console.log(...msgs);\n }\n }\n\n /**\n * A console warning wrapper which formats your output with useful debugging information.\n *\n * @example Logger.warn(\"Hello\");\n */\n static warn(...msgs: unknown[]) {\n console.warn(...msgs); // eslint-disable-line no-console\n }\n\n /**\n * A console error wrapper which formats your output with useful debugging information.\n * For use inside a component's function.\n * @example Logger.error(\"Hello\");\n */\n static error(...msgs: unknown[]) {\n console.error([...msgs].join(' ')); // eslint-disable-line no-console\n }\n\n /**\n * Local logging that outputs the tag name as a prefix automatically\n *\n * @example this.logger.log(\"Hello\");\n */\n log(...msgs: unknown[]) {\n Logger.log(this.prefix, ...msgs);\n }\n\n /**\n * Local warning wrapper that outputs the tag name as a prefix automatically.\n * For use inside a component's function.\n * @example this.logger.warn(\"Hello\");\n */\n warn(...msgs: unknown[]) {\n Logger.warn(this.prefix, ...msgs);\n }\n\n /**\n * Local error wrapper that outputs the tag name as a prefix automatically.\n * For use inside a component's function.\n * @example this.logger.error(\"Hello\");\n */\n error(...msgs: unknown[]) {\n Logger.error(this.prefix, ...msgs);\n }\n\n constructor(private host: ReactiveElement) {\n // We only need one logger instance per host\n if (Logger.instances.get(host)) {\n return Logger.instances.get(host) as Logger;\n }\n host.addController(this);\n Logger.instances.set(host, this);\n }\n\n hostConnected() {\n this.log('connected');\n }\n}\n"]}
@@ -9,9 +9,9 @@ export class OverflowController {
9
9
  return __classPrivateFieldGet(this, _OverflowController_items, "f").at(-1);
10
10
  }
11
11
  constructor(host, options) {
12
+ _OverflowController_instances.add(this);
12
13
  this.host = host;
13
14
  this.options = options;
14
- _OverflowController_instances.add(this);
15
15
  /** Overflow container */
16
16
  _OverflowController_container.set(this, void 0);
17
17
  /** Children that can overflow */
@@ -41,34 +41,16 @@ export class OverflowController {
41
41
  if (!__classPrivateFieldGet(this, _OverflowController_container, "f")) {
42
42
  return;
43
43
  }
44
- let firstElementInView;
45
- let lastElementOutOfView;
46
- for (let i = 0; i < __classPrivateFieldGet(this, _OverflowController_items, "f").length && !firstElementInView; i++) {
47
- if (isElementInView(__classPrivateFieldGet(this, _OverflowController_container, "f"), __classPrivateFieldGet(this, _OverflowController_items, "f")[i], false)) {
48
- firstElementInView = __classPrivateFieldGet(this, _OverflowController_items, "f")[i];
49
- lastElementOutOfView = __classPrivateFieldGet(this, _OverflowController_items, "f")[i - 1];
50
- }
51
- }
52
- if (lastElementOutOfView) {
53
- __classPrivateFieldGet(this, _OverflowController_container, "f").scrollLeft -= lastElementOutOfView.scrollWidth;
54
- }
44
+ const leftScroll = __classPrivateFieldGet(this, _OverflowController_container, "f").scrollLeft - __classPrivateFieldGet(this, _OverflowController_container, "f").clientWidth;
45
+ __classPrivateFieldGet(this, _OverflowController_container, "f").scroll({ left: leftScroll, behavior: 'smooth' });
55
46
  __classPrivateFieldGet(this, _OverflowController_instances, "m", _OverflowController_setOverflowState).call(this);
56
47
  }
57
48
  scrollRight() {
58
49
  if (!__classPrivateFieldGet(this, _OverflowController_container, "f")) {
59
50
  return;
60
51
  }
61
- let lastElementInView;
62
- let firstElementOutOfView;
63
- for (let i = __classPrivateFieldGet(this, _OverflowController_items, "f").length - 1; i >= 0 && !lastElementInView; i--) {
64
- if (isElementInView(__classPrivateFieldGet(this, _OverflowController_container, "f"), __classPrivateFieldGet(this, _OverflowController_items, "f")[i], false)) {
65
- lastElementInView = __classPrivateFieldGet(this, _OverflowController_items, "f")[i];
66
- firstElementOutOfView = __classPrivateFieldGet(this, _OverflowController_items, "f")[i + 1];
67
- }
68
- }
69
- if (firstElementOutOfView) {
70
- __classPrivateFieldGet(this, _OverflowController_container, "f").scrollLeft += firstElementOutOfView.scrollWidth;
71
- }
52
+ const leftScroll = __classPrivateFieldGet(this, _OverflowController_container, "f").scrollLeft + __classPrivateFieldGet(this, _OverflowController_container, "f").clientWidth;
53
+ __classPrivateFieldGet(this, _OverflowController_container, "f").scroll({ left: leftScroll, behavior: 'smooth' });
72
54
  __classPrivateFieldGet(this, _OverflowController_instances, "m", _OverflowController_setOverflowState).call(this);
73
55
  }
74
56
  update() {
@@ -85,7 +67,12 @@ _OverflowController_container = new WeakMap(), _OverflowController_items = new W
85
67
  }
86
68
  this.overflowLeft = !__classPrivateFieldGet(this, _OverflowController_hideOverflowButtons, "f") && !isElementInView(__classPrivateFieldGet(this, _OverflowController_container, "f"), this.firstItem);
87
69
  this.overflowRight = !__classPrivateFieldGet(this, _OverflowController_hideOverflowButtons, "f") && !isElementInView(__classPrivateFieldGet(this, _OverflowController_container, "f"), this.lastItem);
88
- this.showScrollButtons = !__classPrivateFieldGet(this, _OverflowController_hideOverflowButtons, "f") && (this.overflowLeft || this.overflowRight);
70
+ let scrollButtonsWidth = 0;
71
+ if (this.overflowLeft || this.overflowRight) {
72
+ scrollButtonsWidth = (__classPrivateFieldGet(this, _OverflowController_container, "f").parentElement?.querySelector('button')?.getBoundingClientRect().width || 0) * 2;
73
+ }
74
+ this.showScrollButtons = !__classPrivateFieldGet(this, _OverflowController_hideOverflowButtons, "f") &&
75
+ __classPrivateFieldGet(this, _OverflowController_container, "f").scrollWidth > (__classPrivateFieldGet(this, _OverflowController_container, "f").clientWidth + scrollButtonsWidth);
89
76
  this.host.requestUpdate();
90
77
  };
91
78
  //# sourceMappingURL=overflow-controller.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"overflow-controller.js","sourceRoot":"","sources":["overflow-controller.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from 'lit';\n\nimport { isElementInView } from '@patternfly/pfe-core/functions/isElementInView.js';\n\nexport interface Options {\n hideOverflowButtons?: boolean;\n}\n\nexport class OverflowController implements ReactiveController {\n /** Overflow container */\n #container?: HTMLElement;\n /** Children that can overflow */\n #items: HTMLElement[] = [];\n\n #scrollTimeoutDelay = 0;\n #scrollTimeout?: ReturnType<typeof setTimeout>;\n\n /** Default state */\n #hideOverflowButtons = false;\n showScrollButtons = false;\n overflowLeft = false;\n overflowRight = false;\n\n get firstItem(): HTMLElement | undefined {\n return this.#items.at(0);\n }\n\n get lastItem(): HTMLElement | undefined {\n return this.#items.at(-1);\n }\n\n constructor(public host: ReactiveControllerHost & Element, private options?: Options) {\n this.host.addController(this);\n if (options?.hideOverflowButtons) {\n this.#hideOverflowButtons = options?.hideOverflowButtons;\n }\n }\n\n #setOverflowState(): void {\n if (!this.firstItem || !this.lastItem || !this.#container) {\n return;\n }\n this.overflowLeft = !this.#hideOverflowButtons && !isElementInView(this.#container, this.firstItem);\n this.overflowRight = !this.#hideOverflowButtons && !isElementInView(this.#container, this.lastItem);\n this.showScrollButtons = !this.#hideOverflowButtons && (this.overflowLeft || this.overflowRight);\n this.host.requestUpdate();\n }\n\n init(container: HTMLElement, items: HTMLElement[]) {\n this.#container = container;\n // convert HTMLCollection to HTMLElement[]\n this.#items = items;\n }\n\n onScroll = () => {\n clearTimeout(this.#scrollTimeout);\n this.#scrollTimeout = setTimeout(() => this.#setOverflowState(), this.#scrollTimeoutDelay);\n };\n\n scrollLeft() {\n if (!this.#container) {\n return;\n }\n let firstElementInView: HTMLElement | undefined;\n let lastElementOutOfView: HTMLElement | undefined;\n for (let i = 0; i < this.#items.length && !firstElementInView; i++) {\n if (isElementInView(this.#container, this.#items[i] as HTMLElement, false)) {\n firstElementInView = this.#items[i];\n lastElementOutOfView = this.#items[i - 1];\n }\n }\n if (lastElementOutOfView) {\n this.#container.scrollLeft -= lastElementOutOfView.scrollWidth;\n }\n this.#setOverflowState();\n }\n\n scrollRight() {\n if (!this.#container) {\n return;\n }\n let lastElementInView: HTMLElement | undefined;\n let firstElementOutOfView: HTMLElement | undefined;\n for (let i = this.#items.length - 1; i >= 0 && !lastElementInView; i--) {\n if (isElementInView(this.#container, this.#items[i] as HTMLElement, false)) {\n lastElementInView = this.#items[i];\n firstElementOutOfView = this.#items[i + 1];\n }\n }\n if (firstElementOutOfView) {\n this.#container.scrollLeft += firstElementOutOfView.scrollWidth;\n }\n this.#setOverflowState();\n }\n\n update() {\n this.#setOverflowState();\n }\n\n hostConnected(): void {\n this.onScroll();\n this.#setOverflowState();\n }\n}\n"]}
1
+ {"version":3,"file":"overflow-controller.js","sourceRoot":"","sources":["overflow-controller.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from 'lit';\n\nimport { isElementInView } from '@patternfly/pfe-core/functions/isElementInView.js';\n\nexport interface Options {\n hideOverflowButtons?: boolean;\n}\n\nexport class OverflowController implements ReactiveController {\n /** Overflow container */\n #container?: HTMLElement;\n /** Children that can overflow */\n #items: HTMLElement[] = [];\n\n #scrollTimeoutDelay = 0;\n #scrollTimeout?: ReturnType<typeof setTimeout>;\n\n /** Default state */\n #hideOverflowButtons = false;\n showScrollButtons = false;\n overflowLeft = false;\n overflowRight = false;\n\n get firstItem(): HTMLElement | undefined {\n return this.#items.at(0);\n }\n\n get lastItem(): HTMLElement | undefined {\n return this.#items.at(-1);\n }\n\n constructor(public host: ReactiveControllerHost & Element, private options?: Options) {\n this.host.addController(this);\n if (options?.hideOverflowButtons) {\n this.#hideOverflowButtons = options?.hideOverflowButtons;\n }\n }\n\n #setOverflowState(): void {\n if (!this.firstItem || !this.lastItem || !this.#container) {\n return;\n }\n this.overflowLeft = !this.#hideOverflowButtons && !isElementInView(this.#container, this.firstItem);\n this.overflowRight = !this.#hideOverflowButtons && !isElementInView(this.#container, this.lastItem);\n let scrollButtonsWidth = 0;\n if (this.overflowLeft || this.overflowRight) {\n scrollButtonsWidth = (this.#container.parentElement?.querySelector('button')?.getBoundingClientRect().width || 0) * 2;\n }\n this.showScrollButtons = !this.#hideOverflowButtons &&\n this.#container.scrollWidth > (this.#container.clientWidth + scrollButtonsWidth);\n this.host.requestUpdate();\n }\n\n init(container: HTMLElement, items: HTMLElement[]) {\n this.#container = container;\n // convert HTMLCollection to HTMLElement[]\n this.#items = items;\n }\n\n onScroll = () => {\n clearTimeout(this.#scrollTimeout);\n this.#scrollTimeout = setTimeout(() => this.#setOverflowState(), this.#scrollTimeoutDelay);\n };\n\n scrollLeft() {\n if (!this.#container) {\n return;\n }\n const leftScroll = this.#container.scrollLeft - this.#container.clientWidth;\n this.#container.scroll({ left: leftScroll, behavior: 'smooth' });\n this.#setOverflowState();\n }\n\n scrollRight() {\n if (!this.#container) {\n return;\n }\n const leftScroll = this.#container.scrollLeft + this.#container.clientWidth;\n this.#container.scroll({ left: leftScroll, behavior: 'smooth' });\n this.#setOverflowState();\n }\n\n update() {\n this.#setOverflowState();\n }\n\n hostConnected(): void {\n this.onScroll();\n this.#setOverflowState();\n }\n}\n"]}
@@ -1,6 +1,6 @@
1
1
  export const observedController = Symbol('observed properties controller');
2
2
  /** This controller holds a cache of observed property values which were set before the element updated */
3
- export class PropertyObserverController {
3
+ class PropertyObserverController {
4
4
  delete(key) {
5
5
  this.values.delete(key);
6
6
  }
@@ -30,4 +30,5 @@ export class PropertyObserverController {
30
30
  }
31
31
  }
32
32
  PropertyObserverController.hosts = new WeakMap();
33
+ export { PropertyObserverController };
33
34
  //# sourceMappingURL=property-observer-controller.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"property-observer-controller.js","sourceRoot":"","sources":["property-observer-controller.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,gCAAgC,CAAC,CAAC;AAc3E,0GAA0G;AAC1G,MAAM,OAAO,0BAA0B;IAK7B,MAAM,CAAC,GAAW;QACxB,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;IAC1B,CAAC;IAED,YAAoB,IAAqB;QAArB,SAAI,GAAJ,IAAI,CAAiB;QANjC,WAAM,GAAG,IAAI,GAAG,EAA4D,CAAC;QAOnF,IAAI,0BAA0B,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YAC9C,OAAO,0BAA0B,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAA+B,CAAC;SACjF;QACD,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;QACxB,IAA8C,CAAC,kBAAkB,CAAC,GAAG,IAAI,CAAC;IAC7E,CAAC;IAED,kFAAkF;IAClF,UAAU;QACR,KAAK,MAAM,CAAC,GAAG,EAAE,CAAC,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,MAAM,EAAE;YAC/D,wCAAwC;YACxC,IAAI,CAAC,IAAI,CAAC,UAAmC,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;YACjE,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;SAClB;IACH,CAAC;IAED,uFAAuF;IACvF,WAAW;QACT,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;IACnC,CAAC;IAED,KAAK,CAAC,GAAW,EAAE,UAAkB,EAAE,GAAG,IAAwB;QAChE,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC,CAAC;IAC3C,CAAC;;AAhCc,gCAAK,GAAqD,IAAI,OAAO,EAAE,CAAC","sourcesContent":["import type { ReactiveController, ReactiveElement } from 'lit';\n\nexport const observedController = Symbol('observed properties controller');\n\nexport type ChangeCallback<T = ReactiveElement> = (\n this: T,\n old?: T[keyof T],\n newV?: T[keyof T],\n) => void;\n\nexport type ChangeCallbackName = `_${string}Changed`;\n\nexport type PropertyObserverHost<T> = T & Record<ChangeCallbackName, ChangeCallback<T>> & {\n [observedController]: PropertyObserverController;\n}\n\n/** This controller holds a cache of observed property values which were set before the element updated */\nexport class PropertyObserverController implements ReactiveController {\n private static hosts: WeakMap<HTMLElement, PropertyObserverController> = new WeakMap();\n\n private values = new Map<string, [methodName: string, values: [unknown, unknown]]>();\n\n private delete(key: string) {\n this.values.delete(key);\n }\n\n constructor(private host: ReactiveElement) {\n if (PropertyObserverController.hosts.get(host)) {\n return PropertyObserverController.hosts.get(host) as PropertyObserverController;\n }\n host.addController(this);\n (host as PropertyObserverHost<ReactiveElement>)[observedController] = this;\n }\n\n /** Set any cached valued accumulated between constructor and connectedCallback */\n hostUpdate() {\n for (const [key, [methodName, [oldVal, newVal]]] of this.values) {\n // @ts-expect-error: be cool, typescript\n this.host[methodName as keyof ReactiveElement]?.(oldVal, newVal);\n this.delete(key);\n }\n }\n\n /** Once the element has updated, we no longer need this controller, so we remove it */\n hostUpdated() {\n this.host.removeController(this);\n }\n\n cache(key: string, methodName: string, ...vals: [unknown, unknown]) {\n this.values.set(key, [methodName, vals]);\n }\n}\n"]}
1
+ {"version":3,"file":"property-observer-controller.js","sourceRoot":"","sources":["property-observer-controller.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,gCAAgC,CAAC,CAAC;AAc3E,0GAA0G;AAC1G,MAAa,0BAA0B;IAK7B,MAAM,CAAC,GAAW;QACxB,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;IAC1B,CAAC;IAED,YAAoB,IAAqB;QAArB,SAAI,GAAJ,IAAI,CAAiB;QANjC,WAAM,GAAG,IAAI,GAAG,EAA4D,CAAC;QAOnF,IAAI,0BAA0B,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YAC9C,OAAO,0BAA0B,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAA+B,CAAC;SACjF;QACD,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;QACxB,IAA8C,CAAC,kBAAkB,CAAC,GAAG,IAAI,CAAC;IAC7E,CAAC;IAED,kFAAkF;IAClF,UAAU;QACR,KAAK,MAAM,CAAC,GAAG,EAAE,CAAC,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,MAAM,EAAE;YAC/D,wCAAwC;YACxC,IAAI,CAAC,IAAI,CAAC,UAAmC,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;YACjE,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;SAClB;IACH,CAAC;IAED,uFAAuF;IACvF,WAAW;QACT,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;IACnC,CAAC;IAED,KAAK,CAAC,GAAW,EAAE,UAAkB,EAAE,GAAG,IAAwB;QAChE,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC,CAAC;IAC3C,CAAC;;AAhCc,gCAAK,GAAqD,IAAI,OAAO,EAAE,AAAlE,CAAmE;SAD5E,0BAA0B","sourcesContent":["import type { ReactiveController, ReactiveElement } from 'lit';\n\nexport const observedController = Symbol('observed properties controller');\n\nexport type ChangeCallback<T = ReactiveElement> = (\n this: T,\n old?: T[keyof T],\n newV?: T[keyof T],\n) => void;\n\nexport type ChangeCallbackName = `_${string}Changed`;\n\nexport type PropertyObserverHost<T> = T & Record<ChangeCallbackName, ChangeCallback<T>> & {\n [observedController]: PropertyObserverController;\n}\n\n/** This controller holds a cache of observed property values which were set before the element updated */\nexport class PropertyObserverController implements ReactiveController {\n private static hosts: WeakMap<HTMLElement, PropertyObserverController> = new WeakMap();\n\n private values = new Map<string, [methodName: string, values: [unknown, unknown]]>();\n\n private delete(key: string) {\n this.values.delete(key);\n }\n\n constructor(private host: ReactiveElement) {\n if (PropertyObserverController.hosts.get(host)) {\n return PropertyObserverController.hosts.get(host) as PropertyObserverController;\n }\n host.addController(this);\n (host as PropertyObserverHost<ReactiveElement>)[observedController] = this;\n }\n\n /** Set any cached valued accumulated between constructor and connectedCallback */\n hostUpdate() {\n for (const [key, [methodName, [oldVal, newVal]]] of this.values) {\n // @ts-expect-error: be cool, typescript\n this.host[methodName as keyof ReactiveElement]?.(oldVal, newVal);\n this.delete(key);\n }\n }\n\n /** Once the element has updated, we no longer need this controller, so we remove it */\n hostUpdated() {\n this.host.removeController(this);\n }\n\n cache(key: string, methodName: string, ...vals: [unknown, unknown]) {\n this.values.set(key, [methodName, vals]);\n }\n}\n"]}
@@ -4,52 +4,52 @@ import type { ReactiveController, ReactiveControllerHost } from 'lit';
4
4
  * Components Using a Roving
5
5
  * tabindex](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex)
6
6
  */
7
- export declare class RovingTabindexController implements ReactiveController {
7
+ export declare class RovingTabindexController<ItemType extends HTMLElement = HTMLElement> implements ReactiveController {
8
8
  #private;
9
9
  host: ReactiveControllerHost & HTMLElement;
10
10
  /**
11
11
  * active item of array of items
12
12
  */
13
- get activeItem(): HTMLElement | undefined;
13
+ get activeItem(): ItemType | undefined;
14
14
  /**
15
15
  * first item in array of focusable items
16
16
  */
17
- get firstItem(): HTMLElement | undefined;
17
+ get firstItem(): ItemType | undefined;
18
18
  /**
19
19
  * last item in array of focusable items
20
20
  */
21
- get lastItem(): HTMLElement | undefined;
21
+ get lastItem(): ItemType | undefined;
22
22
  /**
23
23
  * next item after active item in array of focusable items
24
24
  */
25
- get nextItem(): HTMLElement | undefined;
25
+ get nextItem(): ItemType | undefined;
26
26
  /**
27
27
  * previous item after active item in array of focusable items
28
28
  */
29
- get prevItem(): HTMLElement | undefined;
29
+ get prevItem(): ItemType | undefined;
30
30
  constructor(host: ReactiveControllerHost & HTMLElement);
31
31
  /**
32
32
  * sets tabindex of item based on whether or not it is active
33
33
  */
34
- updateActiveItem(item?: HTMLElement): void;
34
+ updateActiveItem(item?: ItemType): void;
35
35
  /**
36
36
  * focuses on an item and sets it as active
37
37
  */
38
- focusOnItem(item?: HTMLElement): void;
38
+ focusOnItem(item?: ItemType): void;
39
39
  /**
40
40
  * Focuses next focusable item
41
41
  */
42
- updateItems(items: HTMLElement[]): void;
42
+ updateItems(items: ItemType[]): void;
43
43
  /**
44
44
  * from array of HTML items, and sets active items
45
45
  */
46
- initItems(items: HTMLElement[], itemsContainer?: HTMLElement): void;
46
+ initItems(items: ItemType[], itemsContainer?: HTMLElement): void;
47
47
  /**
48
- * adds event listners to items container
48
+ * adds event listeners to items container
49
49
  */
50
50
  hostConnected(): void;
51
51
  /**
52
- * removes event listners from items container
52
+ * removes event listeners from items container
53
53
  */
54
54
  hostDisconnected(): void;
55
55
  }