@patternfly/pfe-core 2.3.0 → 2.4.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.
- package/controllers/cascade-controller.js +1 -1
- package/controllers/cascade-controller.js.map +1 -1
- package/controllers/floating-dom-controller.d.ts +1 -1
- package/controllers/floating-dom-controller.js +81 -83
- package/controllers/floating-dom-controller.js.map +1 -1
- package/controllers/internals-controller.js +17 -20
- package/controllers/internals-controller.js.map +1 -1
- package/controllers/logger.js +1 -1
- package/controllers/logger.js.map +1 -1
- package/controllers/overflow-controller.js +42 -40
- package/controllers/overflow-controller.js.map +1 -1
- package/controllers/property-observer-controller.js +1 -1
- package/controllers/property-observer-controller.js.map +1 -1
- package/controllers/roving-tabindex-controller.js +114 -102
- package/controllers/roving-tabindex-controller.js.map +1 -1
- package/controllers/scroll-spy-controller.js +93 -91
- package/controllers/scroll-spy-controller.js.map +1 -1
- package/controllers/slot-controller.js +1 -1
- package/controllers/slot-controller.js.map +1 -1
- package/controllers/timestamp-controller.d.ts +23 -0
- package/controllers/timestamp-controller.js +108 -0
- package/controllers/timestamp-controller.js.map +1 -0
- package/custom-elements.json +633 -450
- package/package.json +2 -1
|
@@ -3,6 +3,7 @@ import { bound } from '../decorators/bound.js';
|
|
|
3
3
|
import { debounce } from '../functions/debounce.js';
|
|
4
4
|
import { Logger } from './logger.js';
|
|
5
5
|
class CascadeController {
|
|
6
|
+
static { this.instances = new WeakMap(); }
|
|
6
7
|
constructor(host, options) {
|
|
7
8
|
this.host = host;
|
|
8
9
|
this.options = options;
|
|
@@ -129,7 +130,6 @@ class CascadeController {
|
|
|
129
130
|
}
|
|
130
131
|
}
|
|
131
132
|
}
|
|
132
|
-
CascadeController.instances = new WeakMap();
|
|
133
133
|
__decorate([
|
|
134
134
|
bound
|
|
135
135
|
], CascadeController.prototype, "parse", null);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cascade-controller.js","sourceRoot":"","sources":["cascade-controller.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAOrC,MAAa,iBAAiB;
|
|
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,7 +1,7 @@
|
|
|
1
1
|
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
|
-
import type {
|
|
4
|
+
import type { OffsetOptions as Offset } from '@floating-ui/core';
|
|
5
5
|
export type { Placement };
|
|
6
6
|
type Lazy<T> = T | (() => T | null | undefined);
|
|
7
7
|
interface FloatingDOMControllerOptions {
|
|
@@ -1,27 +1,45 @@
|
|
|
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
|
-
import { __classPrivateFieldGet, __classPrivateFieldSet } from "tslib";
|
|
3
1
|
import { autoUpdate, computePosition, offset as offsetMiddleware, shift as shiftMiddleware, flip as flipMiddleware, arrow as arrowMiddleware } from '@floating-ui/dom';
|
|
4
2
|
/**
|
|
5
3
|
* Controls floating DOM within a web component, e.g. tooltips and popovers
|
|
6
4
|
*/
|
|
7
5
|
export class FloatingDOMController {
|
|
6
|
+
#open = false;
|
|
7
|
+
#opening = false;
|
|
8
|
+
#cleanup;
|
|
9
|
+
#anchor;
|
|
10
|
+
#alignment;
|
|
11
|
+
#styles;
|
|
12
|
+
#placement;
|
|
13
|
+
#options;
|
|
14
|
+
get #invoker() {
|
|
15
|
+
const { invoker } = this.#options;
|
|
16
|
+
return typeof invoker === 'function' ? invoker() : invoker;
|
|
17
|
+
}
|
|
18
|
+
get #content() {
|
|
19
|
+
const { content } = this.#options;
|
|
20
|
+
return typeof content === 'function' ? content() : content;
|
|
21
|
+
}
|
|
22
|
+
get #arrow() {
|
|
23
|
+
const { arrow } = this.#options;
|
|
24
|
+
return typeof arrow === 'function' ? arrow() : arrow;
|
|
25
|
+
}
|
|
8
26
|
/** The crosswise alignment of the invoker on which to display the floating DOM */
|
|
9
27
|
get alignment() {
|
|
10
|
-
return
|
|
28
|
+
return this.#alignment ?? 'center';
|
|
11
29
|
}
|
|
12
30
|
/** The side of the invoker on which to display the floating DOM */
|
|
13
31
|
get anchor() {
|
|
14
|
-
return
|
|
32
|
+
return this.#anchor ?? '';
|
|
15
33
|
}
|
|
16
34
|
/**
|
|
17
35
|
* When true, the floating DOM is visible
|
|
18
36
|
*/
|
|
19
37
|
get open() {
|
|
20
|
-
return
|
|
38
|
+
return this.#open;
|
|
21
39
|
}
|
|
22
40
|
/** The computed placement of the floating DOM */
|
|
23
41
|
get placement() {
|
|
24
|
-
return
|
|
42
|
+
return this.#placement ?? 'top';
|
|
25
43
|
}
|
|
26
44
|
/**
|
|
27
45
|
* Styles to apply to your element's container
|
|
@@ -29,106 +47,86 @@ export class FloatingDOMController {
|
|
|
29
47
|
* - `--_floating-content-translate`: translate to apply to floating content.
|
|
30
48
|
*/
|
|
31
49
|
get styles() {
|
|
32
|
-
return
|
|
50
|
+
return this.#styles ?? {};
|
|
33
51
|
}
|
|
34
52
|
constructor(host, options) {
|
|
35
|
-
var _a, _b;
|
|
36
|
-
_FloatingDOMController_instances.add(this);
|
|
37
53
|
this.host = host;
|
|
38
|
-
_FloatingDOMController_open.set(this, false);
|
|
39
|
-
_FloatingDOMController_opening.set(this, false);
|
|
40
|
-
_FloatingDOMController_cleanup.set(this, void 0);
|
|
41
|
-
_FloatingDOMController_anchor.set(this, void 0);
|
|
42
|
-
_FloatingDOMController_alignment.set(this, void 0);
|
|
43
|
-
_FloatingDOMController_styles.set(this, void 0);
|
|
44
|
-
_FloatingDOMController_placement.set(this, void 0);
|
|
45
|
-
_FloatingDOMController_options.set(this, void 0);
|
|
46
54
|
host.addController(this);
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
55
|
+
this.#options = options;
|
|
56
|
+
this.#options.invoker ??= host;
|
|
57
|
+
this.#options.shift ??= true;
|
|
50
58
|
}
|
|
51
59
|
hostDisconnected() {
|
|
52
|
-
|
|
60
|
+
this.#cleanup?.();
|
|
61
|
+
}
|
|
62
|
+
async #update(placement = 'top', offset, flip = true, fallbackPlacements) {
|
|
63
|
+
const { padding, shift } = this.#options;
|
|
64
|
+
const invoker = this.#invoker;
|
|
65
|
+
const content = this.#content;
|
|
66
|
+
const arrow = this.#arrow;
|
|
67
|
+
if (!invoker || !content) {
|
|
68
|
+
return;
|
|
69
|
+
}
|
|
70
|
+
const { x, y, placement: _placement, middlewareData } = await computePosition(invoker, content, {
|
|
71
|
+
strategy: 'absolute',
|
|
72
|
+
placement,
|
|
73
|
+
middleware: [
|
|
74
|
+
offsetMiddleware(offset),
|
|
75
|
+
shift && shiftMiddleware({ padding }),
|
|
76
|
+
arrow && arrowMiddleware({ element: arrow, padding: arrow.offsetHeight / 2 }),
|
|
77
|
+
flip && flipMiddleware({ padding, fallbackPlacements }),
|
|
78
|
+
].filter(Boolean)
|
|
79
|
+
});
|
|
80
|
+
if (arrow) {
|
|
81
|
+
const { x: arrowX, y: arrowY } = middlewareData.arrow || {};
|
|
82
|
+
const staticSide = {
|
|
83
|
+
top: 'bottom',
|
|
84
|
+
right: 'left',
|
|
85
|
+
bottom: 'top',
|
|
86
|
+
left: 'right',
|
|
87
|
+
}[_placement.split('-')[0]] || '';
|
|
88
|
+
Object.assign(arrow.style, {
|
|
89
|
+
left: arrowX != null ? `${arrowX}px` : '',
|
|
90
|
+
top: arrowY != null && !['top'].includes(_placement) ? `${arrowY}px` : '',
|
|
91
|
+
right: '',
|
|
92
|
+
bottom: '',
|
|
93
|
+
[staticSide]: `-${arrow.offsetHeight / 2}px`,
|
|
94
|
+
});
|
|
95
|
+
}
|
|
96
|
+
this.#placement = _placement;
|
|
97
|
+
[this.#anchor, this.#alignment] = (this.#placement.split('-') ?? []);
|
|
98
|
+
this.#styles = {
|
|
99
|
+
'--_floating-content-translate': `${x}px ${y}px`,
|
|
100
|
+
};
|
|
101
|
+
this.host.requestUpdate();
|
|
53
102
|
}
|
|
54
103
|
/** Show the floating DOM */
|
|
55
104
|
async show({ offset, placement, flip, fallbackPlacements } = {}) {
|
|
56
|
-
const invoker =
|
|
57
|
-
const content =
|
|
105
|
+
const invoker = this.#invoker;
|
|
106
|
+
const content = this.#content;
|
|
58
107
|
if (!invoker || !content) {
|
|
59
108
|
return;
|
|
60
109
|
}
|
|
61
|
-
if (!
|
|
62
|
-
|
|
63
|
-
const p =
|
|
64
|
-
|
|
110
|
+
if (!this.#opening) {
|
|
111
|
+
this.#opening = true;
|
|
112
|
+
const p = this.#update(placement, offset, flip, fallbackPlacements);
|
|
113
|
+
this.#cleanup ??= autoUpdate(invoker, content, () => this.#update(placement, offset, flip, fallbackPlacements));
|
|
65
114
|
await p;
|
|
66
|
-
|
|
115
|
+
this.#opening = false;
|
|
67
116
|
}
|
|
68
|
-
|
|
117
|
+
this.#open = true;
|
|
69
118
|
this.host.requestUpdate();
|
|
70
119
|
}
|
|
71
120
|
/** Hide the floating DOM */
|
|
72
121
|
async hide() {
|
|
73
122
|
await this.host.updateComplete;
|
|
74
|
-
while (
|
|
123
|
+
while (this.#opening && !this.open) {
|
|
75
124
|
await new Promise(requestAnimationFrame);
|
|
76
125
|
}
|
|
77
|
-
|
|
78
|
-
|
|
126
|
+
this.#open = false;
|
|
127
|
+
this.#cleanup?.();
|
|
79
128
|
this.host.requestUpdate();
|
|
80
129
|
await this.host.updateComplete;
|
|
81
130
|
}
|
|
82
131
|
}
|
|
83
|
-
_FloatingDOMController_open = new WeakMap(), _FloatingDOMController_opening = new WeakMap(), _FloatingDOMController_cleanup = new WeakMap(), _FloatingDOMController_anchor = new WeakMap(), _FloatingDOMController_alignment = new WeakMap(), _FloatingDOMController_styles = new WeakMap(), _FloatingDOMController_placement = new WeakMap(), _FloatingDOMController_options = new WeakMap(), _FloatingDOMController_instances = new WeakSet(), _FloatingDOMController_invoker_get = function _FloatingDOMController_invoker_get() {
|
|
84
|
-
const { invoker } = __classPrivateFieldGet(this, _FloatingDOMController_options, "f");
|
|
85
|
-
return typeof invoker === 'function' ? invoker() : invoker;
|
|
86
|
-
}, _FloatingDOMController_content_get = function _FloatingDOMController_content_get() {
|
|
87
|
-
const { content } = __classPrivateFieldGet(this, _FloatingDOMController_options, "f");
|
|
88
|
-
return typeof content === 'function' ? content() : content;
|
|
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) {
|
|
93
|
-
var _a, _b;
|
|
94
|
-
const { padding, shift } = __classPrivateFieldGet(this, _FloatingDOMController_options, "f");
|
|
95
|
-
const invoker = __classPrivateFieldGet(this, _FloatingDOMController_instances, "a", _FloatingDOMController_invoker_get);
|
|
96
|
-
const content = __classPrivateFieldGet(this, _FloatingDOMController_instances, "a", _FloatingDOMController_content_get);
|
|
97
|
-
const arrow = __classPrivateFieldGet(this, _FloatingDOMController_instances, "a", _FloatingDOMController_arrow_get);
|
|
98
|
-
if (!invoker || !content) {
|
|
99
|
-
return;
|
|
100
|
-
}
|
|
101
|
-
const { x, y, placement: _placement, middlewareData } = await computePosition(invoker, content, {
|
|
102
|
-
strategy: 'absolute',
|
|
103
|
-
placement,
|
|
104
|
-
middleware: [
|
|
105
|
-
offsetMiddleware(offset),
|
|
106
|
-
shift && shiftMiddleware({ padding }),
|
|
107
|
-
arrow && arrowMiddleware({ element: arrow, padding: arrow.offsetHeight / 2 }),
|
|
108
|
-
flip && flipMiddleware({ padding, fallbackPlacements }),
|
|
109
|
-
].filter(Boolean)
|
|
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
|
-
}
|
|
127
|
-
__classPrivateFieldSet(this, _FloatingDOMController_placement, _placement, "f");
|
|
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('-') ?? []);
|
|
129
|
-
__classPrivateFieldSet(this, _FloatingDOMController_styles, {
|
|
130
|
-
'--_floating-content-translate': `${x}px ${y}px`,
|
|
131
|
-
}, "f");
|
|
132
|
-
this.host.requestUpdate();
|
|
133
|
-
};
|
|
134
132
|
//# sourceMappingURL=floating-dom-controller.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"floating-dom-controller.js","sourceRoot":"","sources":["floating-dom-controller.ts"],"names":[],"mappings":"
|
|
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 { OffsetOptions as Offset } from '@floating-ui/core';\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"]}
|
|
@@ -1,40 +1,39 @@
|
|
|
1
|
-
var _InternalsController_internals, _InternalsController_formDisabled;
|
|
2
|
-
import { __classPrivateFieldGet, __classPrivateFieldSet } from "tslib";
|
|
3
1
|
function isARIAMixinProp(key) {
|
|
4
2
|
return key === 'role' || key.startsWith('aria');
|
|
5
3
|
}
|
|
6
4
|
class InternalsController {
|
|
5
|
+
#internals;
|
|
6
|
+
#formDisabled = false;
|
|
7
7
|
/** True when the control is disabled via it's containing fieldset element */
|
|
8
8
|
get formDisabled() {
|
|
9
|
-
return this.host.matches(':disabled') ||
|
|
9
|
+
return this.host.matches(':disabled') || this.#formDisabled;
|
|
10
10
|
}
|
|
11
|
+
static { this.protos = new WeakMap(); }
|
|
11
12
|
get labels() {
|
|
12
|
-
return
|
|
13
|
+
return this.#internals.labels;
|
|
13
14
|
}
|
|
14
15
|
get validity() {
|
|
15
|
-
return
|
|
16
|
+
return this.#internals.validity;
|
|
16
17
|
}
|
|
17
18
|
constructor(host, options) {
|
|
18
19
|
this.host = host;
|
|
19
|
-
|
|
20
|
-
_InternalsController_formDisabled.set(this, false);
|
|
21
|
-
__classPrivateFieldSet(this, _InternalsController_internals, host.attachInternals(), "f");
|
|
20
|
+
this.#internals = host.attachInternals();
|
|
22
21
|
// We need to polyfill :disabled
|
|
23
22
|
// see https://github.com/calebdwilliams/element-internals-polyfill/issues/88
|
|
24
23
|
const orig = host.formDisabledCallback;
|
|
25
24
|
host.formDisabledCallback = disabled => {
|
|
26
|
-
|
|
25
|
+
this.#formDisabled = disabled;
|
|
27
26
|
orig?.call(host, disabled);
|
|
28
27
|
};
|
|
29
28
|
// proxy the internals object's aria prototype
|
|
30
|
-
for (const key of Object.keys(Object.getPrototypeOf(
|
|
29
|
+
for (const key of Object.keys(Object.getPrototypeOf(this.#internals))) {
|
|
31
30
|
if (isARIAMixinProp(key)) {
|
|
32
31
|
Object.defineProperty(this, key, {
|
|
33
32
|
get() {
|
|
34
|
-
return
|
|
33
|
+
return this.#internals[key];
|
|
35
34
|
},
|
|
36
35
|
set(value) {
|
|
37
|
-
|
|
36
|
+
this.#internals[key] = value;
|
|
38
37
|
this.host.requestUpdate();
|
|
39
38
|
}
|
|
40
39
|
});
|
|
@@ -47,25 +46,23 @@ class InternalsController {
|
|
|
47
46
|
}
|
|
48
47
|
}
|
|
49
48
|
setFormValue(...args) {
|
|
50
|
-
return
|
|
49
|
+
return this.#internals.setFormValue(...args);
|
|
51
50
|
}
|
|
52
51
|
setValidity(...args) {
|
|
53
|
-
return
|
|
52
|
+
return this.#internals.setValidity(...args);
|
|
54
53
|
}
|
|
55
54
|
checkValidity(...args) {
|
|
56
|
-
return
|
|
55
|
+
return this.#internals.checkValidity(...args);
|
|
57
56
|
}
|
|
58
57
|
reportValidity(...args) {
|
|
59
|
-
return
|
|
58
|
+
return this.#internals.reportValidity(...args);
|
|
60
59
|
}
|
|
61
60
|
submit() {
|
|
62
|
-
|
|
61
|
+
this.#internals.form?.requestSubmit();
|
|
63
62
|
}
|
|
64
63
|
reset() {
|
|
65
|
-
|
|
64
|
+
this.#internals.form?.reset();
|
|
66
65
|
}
|
|
67
66
|
}
|
|
68
|
-
_InternalsController_internals = new WeakMap(), _InternalsController_formDisabled = new WeakMap();
|
|
69
|
-
InternalsController.protos = new WeakMap();
|
|
70
67
|
export { InternalsController };
|
|
71
68
|
//# sourceMappingURL=internals-controller.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internals-controller.js","sourceRoot":"","sources":["internals-controller.ts"],"names":[],"mappings":"
|
|
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;IA0C9B,UAAU,CAAmB;IAE7B,aAAa,GAAG,KAAK,CAAC;IAEtB,6EAA6E;IAC7E,IAAI,YAAY;QACd,OAAO,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,IAAI,IAAI,CAAC,aAAa,CAAC;IAC9D,CAAC;aAEM,WAAM,GAAG,IAAI,OAAO,EAAE,CAAC;IAE9B,IAAI,MAAM;QACR,OAAO,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC;IAChC,CAAC;IAED,IAAI,QAAQ;QACV,OAAO,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC;IAClC,CAAC;IAED,YACS,IAA0C,EACjD,OAA4B;QADrB,SAAI,GAAJ,IAAI,CAAsC;QAGjD,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;QACzC,gCAAgC;QAChC,6EAA6E;QAC7E,MAAM,IAAI,GAAI,IAAyE,CAAC,oBAAoB,CAAC;QAC5G,IAAyE,CAAC,oBAAoB,GAAG,QAAQ,CAAC,EAAE;YAC3G,IAAI,CAAC,aAAa,GAAG,QAAQ,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,IAAI,CAAC,UAAU,CAAC,CAAC,EAAE;YACrE,IAAI,eAAe,CAAC,GAAG,CAAC,EAAE;gBACxB,MAAM,CAAC,cAAc,CAAC,IAAI,EAAE,GAAG,EAAE;oBAC/B,GAAG;wBACD,OAAO,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC;oBAC9B,CAAC;oBACD,GAAG,CAAC,KAAK;wBACP,IAAI,CAAC,UAAU,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,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,CAAC;IAC/C,CAAC;IAED,WAAW,CAAC,GAAG,IAAiD;QAC9D,OAAO,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC,CAAC;IAC9C,CAAC;IAED,aAAa,CAAC,GAAG,IAAmD;QAClE,OAAO,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,GAAG,IAAI,CAAC,CAAC;IAChD,CAAC;IAED,cAAc,CAAC,GAAG,IAAoD;QACpE,OAAO,IAAI,CAAC,UAAU,CAAC,cAAc,CAAC,GAAG,IAAI,CAAC,CAAC;IACjD,CAAC;IAED,MAAM;QACJ,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,aAAa,EAAE,CAAC;IACxC,CAAC;IAED,KAAK;QACH,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC;IAChC,CAAC;;SAvHU,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"]}
|
package/controllers/logger.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
class Logger {
|
|
2
|
+
static { this.instances = new WeakMap(); }
|
|
2
3
|
get prefix() {
|
|
3
4
|
return `[${this.host.localName}${this.host.id ? `#${this.host.id}` : ''}]`;
|
|
4
5
|
}
|
|
@@ -86,6 +87,5 @@ class Logger {
|
|
|
86
87
|
this.log('connected');
|
|
87
88
|
}
|
|
88
89
|
}
|
|
89
|
-
Logger.instances = new WeakMap();
|
|
90
90
|
export { Logger };
|
|
91
91
|
//# sourceMappingURL=logger.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"logger.js","sourceRoot":"","sources":["logger.ts"],"names":[],"mappings":"AAEA,MAAa,MAAM;
|
|
1
|
+
{"version":3,"file":"logger.js","sourceRoot":"","sources":["logger.ts"],"names":[],"mappings":"AAEA,MAAa,MAAM;aAGF,cAAS,GAAiC,IAAI,OAAO,EAAE,CAAC;IAEvE,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;;SAjGU,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"]}
|