@carbon/web-components 2.0.0-rc.3 → 2.0.0-rc.4
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.
|
@@ -1,35 +1,19 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license
|
|
3
|
-
*
|
|
4
|
-
*
|
|
5
|
-
*
|
|
6
|
-
* This source code is licensed under the Apache-2.0 license found in the
|
|
7
|
-
* LICENSE file in the root directory of this source tree.
|
|
3
|
+
* Copyright 2017 Google LLC
|
|
4
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
8
5
|
*/
|
|
9
|
-
import {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
kind: 'class';
|
|
15
|
-
elements: ClassElement[];
|
|
16
|
-
finisher?: <T>(clazz: Constructor<T>) => undefined | Constructor<T>;
|
|
17
|
-
}
|
|
18
|
-
interface ClassElement {
|
|
19
|
-
kind: 'field' | 'method';
|
|
20
|
-
key: PropertyKey;
|
|
21
|
-
placement: 'static' | 'prototype' | 'own';
|
|
22
|
-
initializer?: Function;
|
|
23
|
-
extras?: ClassElement[];
|
|
24
|
-
finisher?: <T>(clazz: Constructor<T>) => undefined | Constructor<T>;
|
|
25
|
-
descriptor?: PropertyDescriptor;
|
|
26
|
-
}
|
|
6
|
+
import { ClassDescriptor } from '@lit/reactive-element/decorators/base.js';
|
|
7
|
+
/**
|
|
8
|
+
* Allow for custom element classes with private constructors
|
|
9
|
+
*/
|
|
10
|
+
declare type CustomElementClass = Omit<typeof HTMLElement, 'new'>;
|
|
27
11
|
/**
|
|
28
12
|
* Class decorator factory that defines the decorated class as a custom element.
|
|
29
13
|
*
|
|
30
|
-
* ```
|
|
14
|
+
* ```js
|
|
31
15
|
* @customElement('my-element')
|
|
32
|
-
* class MyElement {
|
|
16
|
+
* class MyElement extends LitElement {
|
|
33
17
|
* render() {
|
|
34
18
|
* return html``;
|
|
35
19
|
* }
|
|
@@ -37,199 +21,9 @@ interface ClassElement {
|
|
|
37
21
|
* ```
|
|
38
22
|
*
|
|
39
23
|
* @category Decorator
|
|
40
|
-
* @param tagName The name of the custom element to define.
|
|
41
|
-
*/
|
|
42
|
-
export declare const carbonElement: (tagName: string) => (classOrDescriptor: Constructor<HTMLElement> | ClassDescriptor) => any;
|
|
43
|
-
/**
|
|
44
|
-
* A property decorator which creates a LitElement property which reflects a
|
|
45
|
-
* corresponding attribute value. A [[`PropertyDeclaration`]] may optionally be
|
|
46
|
-
* supplied to configure property features.
|
|
47
|
-
*
|
|
48
|
-
* This decorator should only be used for public fields. Private or protected
|
|
49
|
-
* fields should use the [[`internalProperty`]] decorator.
|
|
50
|
-
*
|
|
51
|
-
* @example
|
|
52
|
-
* ```ts
|
|
53
|
-
* class MyElement {
|
|
54
|
-
* @property({ type: Boolean })
|
|
55
|
-
* clicked = false;
|
|
56
|
-
* }
|
|
57
|
-
* ```
|
|
58
|
-
* @category Decorator
|
|
59
|
-
* @ExportDecoratedItems
|
|
60
|
-
*/
|
|
61
|
-
export declare function property(options?: PropertyDeclaration): (protoOrDescriptor: Object | ClassElement, name?: PropertyKey) => any;
|
|
62
|
-
export interface InternalPropertyDeclaration<Type = unknown> {
|
|
63
|
-
/**
|
|
64
|
-
* A function that indicates if a property should be considered changed when
|
|
65
|
-
* it is set. The function should take the `newValue` and `oldValue` and
|
|
66
|
-
* return `true` if an update should be requested.
|
|
67
|
-
*/
|
|
68
|
-
hasChanged?(value: Type, oldValue: Type): boolean;
|
|
69
|
-
}
|
|
70
|
-
/**
|
|
71
|
-
* Declares a private or protected property that still triggers updates to the
|
|
72
|
-
* element when it changes.
|
|
73
|
-
*
|
|
74
|
-
* Properties declared this way must not be used from HTML or HTML templating
|
|
75
|
-
* systems, they're solely for properties internal to the element. These
|
|
76
|
-
* properties may be renamed by optimization tools like the Closure Compiler.
|
|
77
|
-
*
|
|
78
|
-
* @category Decorator
|
|
79
|
-
* @deprecated `internalProperty` has been renamed to `state` in lit-element
|
|
80
|
-
* 3.0. Please update to `state` now to be compatible with 3.0.
|
|
81
|
-
*/
|
|
82
|
-
export declare function internalProperty(options?: InternalPropertyDeclaration): (protoOrDescriptor: Object | ClassElement, name?: PropertyKey | undefined) => any;
|
|
83
|
-
/**
|
|
84
|
-
* Declares a private or protected property that still triggers updates to the
|
|
85
|
-
* element when it changes.
|
|
86
|
-
*
|
|
87
|
-
* Properties declared this way must not be used from HTML or HTML templating
|
|
88
|
-
* systems, they're solely for properties internal to the element. These
|
|
89
|
-
* properties may be renamed by optimization tools like the Closure Compiler.
|
|
90
|
-
*
|
|
91
|
-
* @category Decorator
|
|
92
|
-
*/
|
|
93
|
-
export declare const state: (options?: InternalPropertyDeclaration) => (protoOrDescriptor: Object | ClassElement, name?: PropertyKey) => any;
|
|
94
|
-
/**
|
|
95
|
-
* A property decorator that converts a class property into a getter that
|
|
96
|
-
* executes a querySelector on the element's renderRoot.
|
|
97
|
-
*
|
|
98
|
-
* @param selector A DOMString containing one or more selectors to match.
|
|
99
|
-
* @param cache An optional boolean which when true performs the DOM query only
|
|
100
|
-
* once and caches the result.
|
|
101
|
-
* @see: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
|
|
102
|
-
* @example
|
|
103
|
-
*
|
|
104
|
-
* ```ts
|
|
105
|
-
* class MyElement {
|
|
106
|
-
* @query('#first')
|
|
107
|
-
* first;
|
|
108
|
-
*
|
|
109
|
-
* render() {
|
|
110
|
-
* return html`
|
|
111
|
-
* <div id="first"></div>
|
|
112
|
-
* <div id="second"></div>
|
|
113
|
-
* `;
|
|
114
|
-
* }
|
|
115
|
-
* }
|
|
116
|
-
* ```
|
|
117
|
-
* @category Decorator
|
|
118
|
-
*/
|
|
119
|
-
export declare function query(selector: string, cache?: boolean): (protoOrDescriptor: Object | ClassElement, name?: PropertyKey) => any;
|
|
120
|
-
/**
|
|
121
|
-
* A property decorator that converts a class property into a getter that
|
|
122
|
-
* returns a promise that resolves to the result of a querySelector on the
|
|
123
|
-
* element's renderRoot done after the element's `updateComplete` promise
|
|
124
|
-
* resolves. When the queried property may change with element state, this
|
|
125
|
-
* decorator can be used instead of requiring users to await the
|
|
126
|
-
* `updateComplete` before accessing the property.
|
|
127
|
-
*
|
|
128
|
-
* @param selector A DOMString containing one or more selectors to match.
|
|
129
|
-
* @see: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
|
|
130
|
-
* @example
|
|
131
|
-
* ```ts
|
|
132
|
-
* class MyElement {
|
|
133
|
-
* @queryAsync('#first')
|
|
134
|
-
* first;
|
|
135
|
-
*
|
|
136
|
-
* render() {
|
|
137
|
-
* return html`
|
|
138
|
-
* <div id="first"></div>
|
|
139
|
-
* <div id="second"></div>
|
|
140
|
-
* `;
|
|
141
|
-
* }
|
|
142
|
-
* }
|
|
143
|
-
*
|
|
144
|
-
* // external usage
|
|
145
|
-
* async doSomethingWithFirst() {
|
|
146
|
-
* (await aMyElement.first).doSomething();
|
|
147
|
-
* }
|
|
148
|
-
* ```
|
|
149
|
-
* @category Decorator
|
|
150
|
-
*/
|
|
151
|
-
export declare function queryAsync(selector: string): (protoOrDescriptor: Object | ClassElement, name?: PropertyKey) => any;
|
|
152
|
-
/**
|
|
153
|
-
* A property decorator that converts a class property into a getter
|
|
154
|
-
* that executes a querySelectorAll on the element's renderRoot.
|
|
155
|
-
*
|
|
156
|
-
* @param selector A DOMString containing one or more selectors to match.
|
|
157
|
-
* @see:
|
|
158
|
-
* https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll
|
|
159
|
-
* @example
|
|
160
|
-
* ```ts
|
|
161
|
-
* class MyElement {
|
|
162
|
-
* @queryAll('div')
|
|
163
|
-
* divs;
|
|
164
|
-
*
|
|
165
|
-
* render() {
|
|
166
|
-
* return html`
|
|
167
|
-
* <div id="first"></div>
|
|
168
|
-
* <div id="second"></div>
|
|
169
|
-
* `;
|
|
170
|
-
* }
|
|
171
|
-
* }
|
|
172
|
-
* ```
|
|
173
|
-
* @category Decorator
|
|
174
|
-
*/
|
|
175
|
-
export declare function queryAll(selector: string): (protoOrDescriptor: Object | ClassElement, name?: PropertyKey) => any;
|
|
176
|
-
/**
|
|
177
|
-
* Adds event listener options to a method used as an event listener in a
|
|
178
|
-
* lit-html template.
|
|
179
|
-
*
|
|
180
|
-
* @param options An object that specifies event listener options as accepted by
|
|
181
|
-
* `EventTarget#addEventListener` and `EventTarget#removeEventListener`.
|
|
182
|
-
* @see https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Parameters
|
|
183
|
-
* Current browsers support the `capture`, `passive`, and `once` options. See:
|
|
184
|
-
* @example
|
|
185
|
-
* ```ts
|
|
186
|
-
* class MyElement {
|
|
187
|
-
* clicked = false;
|
|
188
|
-
*
|
|
189
|
-
* render() {
|
|
190
|
-
* return html`
|
|
191
|
-
* <div @click=${this._onClick}`>
|
|
192
|
-
* <button></button>
|
|
193
|
-
* </div>
|
|
194
|
-
* `;
|
|
195
|
-
* }
|
|
196
|
-
*
|
|
197
|
-
* @eventOptions({capture: true})
|
|
198
|
-
* _onClick(e) {
|
|
199
|
-
* this.clicked = true;
|
|
200
|
-
* }
|
|
201
|
-
* }
|
|
202
|
-
* ```
|
|
203
|
-
* @category Decorator
|
|
204
|
-
*/
|
|
205
|
-
export declare function eventOptions(options: AddEventListenerOptions): any;
|
|
206
|
-
/**
|
|
207
|
-
* A property decorator that converts a class property into a getter that
|
|
208
|
-
* returns the `assignedNodes` of the given named `slot`. Note, the type of
|
|
209
|
-
* this property should be annotated as `NodeListOf<HTMLElement>`.
|
|
210
|
-
*
|
|
211
|
-
* @param slotName A string name of the slot.
|
|
212
|
-
* @param flatten A boolean which when true flattens the assigned nodes,
|
|
213
|
-
* meaning any assigned nodes that are slot elements are replaced with their
|
|
214
|
-
* assigned nodes.
|
|
215
|
-
* @param selector A string which filters the results to elements that match
|
|
216
|
-
* the given css selector.
|
|
217
|
-
* @example
|
|
218
|
-
* ```ts
|
|
219
|
-
* class MyElement {
|
|
220
|
-
* @queryAssignedNodes('list', true, '.item')
|
|
221
|
-
* listItems;
|
|
222
|
-
*
|
|
223
|
-
* render() {
|
|
224
|
-
* return html`
|
|
225
|
-
* <slot name="list"></slot>
|
|
226
|
-
* `;
|
|
227
|
-
* }
|
|
228
|
-
* }
|
|
229
|
-
* ```
|
|
230
|
-
* @category Decorator
|
|
24
|
+
* @param tagName The tag name of the custom element to define.
|
|
231
25
|
*/
|
|
232
|
-
export declare
|
|
26
|
+
export declare const carbonElement: (tagName: string) => (classOrDescriptor: CustomElementClass | ClassDescriptor) => any;
|
|
233
27
|
export {};
|
|
234
28
|
|
|
235
29
|
//# sourceMappingURL=carbon-element.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["globals/decorators/carbon-element.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAyBH,OAAO,EACL,mBAAmB,EAEpB,MAAM,wCAAwC,CAAC;AAEhD,oBAAY,WAAW,CAAC,CAAC,IAAI;IAE3B,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;CACzB,CAAC;AAGF,UAAU,eAAe;IACvB,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,YAAY,EAAE,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK,SAAS,GAAG,WAAW,CAAC,CAAC,CAAC,CAAC;CACrE;AAGD,UAAU,YAAY;IACpB,IAAI,EAAE,OAAO,GAAG,QAAQ,CAAC;IACzB,GAAG,EAAE,WAAW,CAAC;IACjB,SAAS,EAAE,QAAQ,GAAG,WAAW,GAAG,KAAK,CAAC;IAC1C,WAAW,CAAC,EAAE,QAAQ,CAAC;IACvB,MAAM,CAAC,EAAE,YAAY,EAAE,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK,SAAS,GAAG,WAAW,CAAC,CAAC,CAAC,CAAC;IACpE,UAAU,CAAC,EAAE,kBAAkB,CAAC;CACjC;AAuCD;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,aAAa,YACd,MAAM,yBACI,YAAY,WAAW,CAAC,GAAG,eAAe,QAGP,CAAC;AA0D1D;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,QAAQ,CAAC,OAAO,CAAC,EAAE,mBAAmB,uBAEzB,MAAM,GAAG,YAAY,SAAS,WAAW,KAAG,GAAG,CAI3E;AAED,MAAM,WAAW,2BAA2B,CAAC,IAAI,GAAG,OAAO;IACzD;;;;OAIG;IACH,UAAU,CAAC,CAAC,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,GAAG,OAAO,CAAC;CACnD;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,CAAC,EAAE,2BAA2B,qFAErE;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,KAAK,aAAc,2BAA2B,yBAzC9B,MAAM,GAAG,YAAY,SAAS,WAAW,KAAG,GA0C9C,CAAC;AAE5B;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,KAAK,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,OAAO,uBAEhC,MAAM,GAAG,YAAY,SAEjC,WAAW,KACjB,GAAG,CA+BP;AAOD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,wBAAgB,UAAU,CAAC,QAAQ,EAAE,MAAM,uBAEpB,MAAM,GAAG,YAAY,SAEjC,WAAW,KACjB,GAAG,CAaP;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,QAAQ,CAAC,QAAQ,EAAE,MAAM,uBAElB,MAAM,GAAG,YAAY,SAEjC,WAAW,KACjB,GAAG,CAYP;AA0CD;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,YAAY,CAAC,OAAO,EAAE,uBAAuB,OAa5D;AAQD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,kBAAkB,CAChC,QAAQ,SAAK,EACb,OAAO,UAAQ,EACf,QAAQ,SAAK,uBAGQ,MAAM,GAAG,YAAY,SAEjC,WAAW,KACjB,GAAG,CA4BP","file":"carbon-element.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/**\n * @license\n * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.\n * This code may only be used under the BSD style license found at\n * http://polymer.github.io/LICENSE.txt\n * The complete set of authors may be found at\n * http://polymer.github.io/AUTHORS.txt\n * The complete set of contributors may be found at\n * http://polymer.github.io/CONTRIBUTORS.txt\n * Code distributed by Google as part of the polymer project is also\n * subject to an additional IP rights grant found at\n * http://polymer.github.io/PATENTS.txt\n */\n\n/*\n * IMPORTANT: For compatibility with tsickle and the Closure Compiler, all\n * property decorators (but not class decorators) in this file that have\n * an @ExportDecoratedItems annotation must be defined as a regular function,\n * not an arrow function.\n */\n\nimport { LitElement } from 'lit';\n\nimport {\n PropertyDeclaration,\n ReactiveElement,\n} from '@lit/reactive-element/reactive-element';\n\nexport type Constructor<T> = {\n // tslint:disable-next-line:no-any\n new (...args: any[]): T;\n};\n\n// From the TC39 Decorators proposal\ninterface ClassDescriptor {\n kind: 'class';\n elements: ClassElement[];\n finisher?: <T>(clazz: Constructor<T>) => undefined | Constructor<T>;\n}\n\n// From the TC39 Decorators proposal\ninterface ClassElement {\n kind: 'field' | 'method';\n key: PropertyKey;\n placement: 'static' | 'prototype' | 'own';\n initializer?: Function;\n extras?: ClassElement[];\n finisher?: <T>(clazz: Constructor<T>) => undefined | Constructor<T>;\n descriptor?: PropertyDescriptor;\n}\n\nconst legacyCustomElement = (\n tagName: string,\n clazz: Constructor<HTMLElement>\n) => {\n try {\n window.customElements.define(tagName, clazz);\n } catch (error) {\n console.warn(`Attempting to re-define ${tagName}`);\n }\n // Cast as any because TS doesn't recognize the return type as being a\n // subtype of the decorated class when clazz is typed as\n // `Constructor<HTMLElement>` for some reason.\n // `Constructor<HTMLElement>` is helpful to make sure the decorator is\n // applied to elements however.\n // tslint:disable-next-line:no-any\n return clazz as any;\n};\n\nconst standardCustomElement = (\n tagName: string,\n descriptor: ClassDescriptor\n) => {\n const { kind, elements } = descriptor;\n return {\n kind,\n elements,\n // This callback is called once the class is otherwise fully defined\n finisher(clazz: Constructor<HTMLElement>) {\n try {\n window.customElements.define(tagName, clazz);\n } catch (error) {\n console.warn(`Attempting to re-define ${tagName}`);\n }\n },\n };\n};\n\n/**\n * Class decorator factory that defines the decorated class as a custom element.\n *\n * ```\n * @customElement('my-element')\n * class MyElement {\n * render() {\n * return html``;\n * }\n * }\n * ```\n *\n * @category Decorator\n * @param tagName The name of the custom element to define.\n */\nexport const carbonElement =\n (tagName: string) =>\n (classOrDescriptor: Constructor<HTMLElement> | ClassDescriptor) =>\n typeof classOrDescriptor === 'function'\n ? legacyCustomElement(tagName, classOrDescriptor)\n : standardCustomElement(tagName, classOrDescriptor);\n\nconst standardProperty = (\n options: PropertyDeclaration,\n element: ClassElement\n) => {\n // When decorating an accessor, pass it through and add property metadata.\n // Note, the `hasOwnProperty` check in `createProperty` ensures we don't\n // stomp over the user's accessor.\n if (\n element.kind === 'method' &&\n element.descriptor &&\n !('value' in element.descriptor)\n ) {\n return {\n ...element,\n finisher(clazz: typeof ReactiveElement) {\n clazz.createProperty(element.key, options);\n },\n };\n } else {\n // createProperty() takes care of defining the property, but we still\n // must return some kind of descriptor, so return a descriptor for an\n // unused prototype field. The finisher calls createProperty().\n return {\n kind: 'field',\n key: Symbol(),\n placement: 'own',\n descriptor: {},\n // When @babel/plugin-proposal-decorators implements initializers,\n // do this instead of the initializer below. See:\n // https://github.com/babel/babel/issues/9260 extras: [\n // {\n // kind: 'initializer',\n // placement: 'own',\n // initializer: descriptor.initializer,\n // }\n // ],\n initializer(this: { [key: string]: unknown }) {\n if (typeof element.initializer === 'function') {\n this[element.key as string] = element.initializer.call(this);\n }\n },\n finisher(clazz: typeof ReactiveElement) {\n clazz.createProperty(element.key, options);\n },\n };\n }\n};\n\nconst legacyProperty = (\n options: PropertyDeclaration,\n proto: Object,\n name: PropertyKey\n) => {\n (proto.constructor as typeof ReactiveElement).createProperty(name, options);\n};\n\n/**\n * A property decorator which creates a LitElement property which reflects a\n * corresponding attribute value. A [[`PropertyDeclaration`]] may optionally be\n * supplied to configure property features.\n *\n * This decorator should only be used for public fields. Private or protected\n * fields should use the [[`internalProperty`]] decorator.\n *\n * @example\n * ```ts\n * class MyElement {\n * @property({ type: Boolean })\n * clicked = false;\n * }\n * ```\n * @category Decorator\n * @ExportDecoratedItems\n */\nexport function property(options?: PropertyDeclaration) {\n // tslint:disable-next-line:no-any decorator\n return (protoOrDescriptor: Object | ClassElement, name?: PropertyKey): any =>\n name !== undefined\n ? legacyProperty(options!, protoOrDescriptor as Object, name)\n : standardProperty(options!, protoOrDescriptor as ClassElement);\n}\n\nexport interface InternalPropertyDeclaration<Type = unknown> {\n /**\n * A function that indicates if a property should be considered changed when\n * it is set. The function should take the `newValue` and `oldValue` and\n * return `true` if an update should be requested.\n */\n hasChanged?(value: Type, oldValue: Type): boolean;\n}\n\n/**\n * Declares a private or protected property that still triggers updates to the\n * element when it changes.\n *\n * Properties declared this way must not be used from HTML or HTML templating\n * systems, they're solely for properties internal to the element. These\n * properties may be renamed by optimization tools like the Closure Compiler.\n *\n * @category Decorator\n * @deprecated `internalProperty` has been renamed to `state` in lit-element\n * 3.0. Please update to `state` now to be compatible with 3.0.\n */\nexport function internalProperty(options?: InternalPropertyDeclaration) {\n return property({ attribute: false, hasChanged: options?.hasChanged });\n}\n\n/**\n * Declares a private or protected property that still triggers updates to the\n * element when it changes.\n *\n * Properties declared this way must not be used from HTML or HTML templating\n * systems, they're solely for properties internal to the element. These\n * properties may be renamed by optimization tools like the Closure Compiler.\n *\n * @category Decorator\n */\nexport const state = (options?: InternalPropertyDeclaration) =>\n internalProperty(options);\n\n/**\n * A property decorator that converts a class property into a getter that\n * executes a querySelector on the element's renderRoot.\n *\n * @param selector A DOMString containing one or more selectors to match.\n * @param cache An optional boolean which when true performs the DOM query only\n * once and caches the result.\n * @see: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector\n * @example\n *\n * ```ts\n * class MyElement {\n * @query('#first')\n * first;\n *\n * render() {\n * return html`\n * <div id=\"first\"></div>\n * <div id=\"second\"></div>\n * `;\n * }\n * }\n * ```\n * @category Decorator\n */\nexport function query(selector: string, cache?: boolean) {\n return (\n protoOrDescriptor: Object | ClassElement,\n // tslint:disable-next-line:no-any decorator\n name?: PropertyKey\n ): any => {\n const descriptor = {\n get(this: LitElement) {\n return this.renderRoot.querySelector(selector);\n },\n enumerable: true,\n configurable: true,\n };\n if (cache) {\n const prop =\n name !== undefined ? name : (protoOrDescriptor as ClassElement).key;\n const key = typeof prop === 'symbol' ? Symbol() : `__${prop}`;\n descriptor.get = function (this: LitElement) {\n if (\n (this as unknown as { [key: string]: Element | null })[\n key as string\n ] === undefined\n ) {\n (this as unknown as { [key: string]: Element | null })[\n key as string\n ] = this.renderRoot.querySelector(selector);\n }\n return (this as unknown as { [key: string]: Element | null })[\n key as string\n ];\n };\n }\n return name !== undefined\n ? legacyQuery(descriptor, protoOrDescriptor as Object, name)\n : standardQuery(descriptor, protoOrDescriptor as ClassElement);\n };\n}\n\n// Note, in the future, we may extend this decorator to support the use case\n// where the queried element may need to do work to become ready to interact\n// with (e.g. load some implementation code). If so, we might elect to\n// add a second argument defining a function that can be run to make the\n// queried element loaded/updated/ready.\n/**\n * A property decorator that converts a class property into a getter that\n * returns a promise that resolves to the result of a querySelector on the\n * element's renderRoot done after the element's `updateComplete` promise\n * resolves. When the queried property may change with element state, this\n * decorator can be used instead of requiring users to await the\n * `updateComplete` before accessing the property.\n *\n * @param selector A DOMString containing one or more selectors to match.\n * @see: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector\n * @example\n * ```ts\n * class MyElement {\n * @queryAsync('#first')\n * first;\n *\n * render() {\n * return html`\n * <div id=\"first\"></div>\n * <div id=\"second\"></div>\n * `;\n * }\n * }\n *\n * // external usage\n * async doSomethingWithFirst() {\n * (await aMyElement.first).doSomething();\n * }\n * ```\n * @category Decorator\n */\nexport function queryAsync(selector: string) {\n return (\n protoOrDescriptor: Object | ClassElement,\n // tslint:disable-next-line:no-any decorator\n name?: PropertyKey\n ): any => {\n const descriptor = {\n async get(this: LitElement) {\n await this.updateComplete;\n return this.renderRoot.querySelector(selector);\n },\n enumerable: true,\n configurable: true,\n };\n return name !== undefined\n ? legacyQuery(descriptor, protoOrDescriptor as Object, name)\n : standardQuery(descriptor, protoOrDescriptor as ClassElement);\n };\n}\n\n/**\n * A property decorator that converts a class property into a getter\n * that executes a querySelectorAll on the element's renderRoot.\n *\n * @param selector A DOMString containing one or more selectors to match.\n * @see:\n * https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll\n * @example\n * ```ts\n * class MyElement {\n * @queryAll('div')\n * divs;\n *\n * render() {\n * return html`\n * <div id=\"first\"></div>\n * <div id=\"second\"></div>\n * `;\n * }\n * }\n * ```\n * @category Decorator\n */\nexport function queryAll(selector: string) {\n return (\n protoOrDescriptor: Object | ClassElement,\n // tslint:disable-next-line:no-any decorator\n name?: PropertyKey\n ): any => {\n const descriptor = {\n get(this: LitElement) {\n return this.renderRoot.querySelectorAll(selector);\n },\n enumerable: true,\n configurable: true,\n };\n return name !== undefined\n ? legacyQuery(descriptor, protoOrDescriptor as Object, name)\n : standardQuery(descriptor, protoOrDescriptor as ClassElement);\n };\n}\n\nconst legacyQuery = (\n descriptor: PropertyDescriptor,\n proto: Object,\n name: PropertyKey\n) => {\n Object.defineProperty(proto, name, descriptor);\n};\n\nconst standardQuery = (\n descriptor: PropertyDescriptor,\n element: ClassElement\n) => ({\n kind: 'method',\n placement: 'prototype',\n key: element.key,\n descriptor,\n});\n\nconst standardEventOptions = (\n options: AddEventListenerOptions,\n element: ClassElement\n) => {\n return {\n ...element,\n finisher(clazz: typeof ReactiveElement) {\n Object.assign(\n // @ts-ignore TS2769: No overload matches this call.\n clazz.prototype[element.key as keyof ReactiveElement],\n options\n );\n },\n };\n};\n\nconst legacyEventOptions =\n // tslint:disable-next-line:no-any legacy decorator\n (options: AddEventListenerOptions, proto: any, name: PropertyKey) => {\n Object.assign(proto[name], options);\n };\n\n/**\n * Adds event listener options to a method used as an event listener in a\n * lit-html template.\n *\n * @param options An object that specifies event listener options as accepted by\n * `EventTarget#addEventListener` and `EventTarget#removeEventListener`.\n * @see https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Parameters\n * Current browsers support the `capture`, `passive`, and `once` options. See:\n * @example\n * ```ts\n * class MyElement {\n * clicked = false;\n *\n * render() {\n * return html`\n * <div @click=${this._onClick}`>\n * <button></button>\n * </div>\n * `;\n * }\n *\n * @eventOptions({capture: true})\n * _onClick(e) {\n * this.clicked = true;\n * }\n * }\n * ```\n * @category Decorator\n */\nexport function eventOptions(options: AddEventListenerOptions) {\n // Return value typed as any to prevent TypeScript from complaining that\n // standard decorator function signature does not match TypeScript decorator\n // signature\n // TODO(kschaaf): unclear why it was only failing on this decorator and not\n // the others\n return ((protoOrDescriptor: Object | ClassElement, name?: string) =>\n name !== undefined\n ? legacyEventOptions(options, protoOrDescriptor as Object, name)\n : standardEventOptions(\n options,\n protoOrDescriptor as ClassElement\n )) as any; // tslint:disable-next-line:no-any decorator\n}\n\n// x-browser support for matches\n// tslint:disable-next-line:no-any\nconst ElementProto = Element.prototype as any;\nconst legacyMatches =\n ElementProto.msMatchesSelector || ElementProto.webkitMatchesSelector;\n\n/**\n * A property decorator that converts a class property into a getter that\n * returns the `assignedNodes` of the given named `slot`. Note, the type of\n * this property should be annotated as `NodeListOf<HTMLElement>`.\n *\n * @param slotName A string name of the slot.\n * @param flatten A boolean which when true flattens the assigned nodes,\n * meaning any assigned nodes that are slot elements are replaced with their\n * assigned nodes.\n * @param selector A string which filters the results to elements that match\n * the given css selector.\n * @example\n * ```ts\n * class MyElement {\n * @queryAssignedNodes('list', true, '.item')\n * listItems;\n *\n * render() {\n * return html`\n * <slot name=\"list\"></slot>\n * `;\n * }\n * }\n * ```\n * @category Decorator\n */\nexport function queryAssignedNodes(\n slotName = '',\n flatten = false,\n selector = ''\n) {\n return (\n protoOrDescriptor: Object | ClassElement,\n // tslint:disable-next-line:no-any decorator\n name?: PropertyKey\n ): any => {\n const descriptor = {\n get(this: LitElement) {\n const slotSelector = `slot${\n slotName ? `[name=${slotName}]` : ':not([name])'\n }`;\n const slot = this.renderRoot.querySelector(slotSelector);\n let nodes =\n slot && (slot as HTMLSlotElement).assignedNodes({ flatten });\n if (nodes && selector) {\n nodes = nodes.filter(\n (node) =>\n node.nodeType === Node.ELEMENT_NODE &&\n // tslint:disable-next-line:no-any testing existence on older browsers\n ((node as any).matches\n ? (node as Element).matches(selector)\n : legacyMatches.call(node as Element, selector))\n );\n }\n return nodes;\n },\n enumerable: true,\n configurable: true,\n };\n return name !== undefined\n ? legacyQuery(descriptor, protoOrDescriptor as Object, name)\n : standardQuery(descriptor, protoOrDescriptor as ClassElement);\n };\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["globals/decorators/carbon-element.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAQH,OAAO,EAEL,eAAe,EAChB,MAAM,0CAA0C,CAAC;AAElD;;GAEG;AACH,aAAK,kBAAkB,GAAG,IAAI,CAAC,OAAO,WAAW,EAAE,KAAK,CAAC,CAAC;AAoC1D;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,aAAa,YACd,MAAM,yBACI,kBAAkB,GAAG,eAAe,QAGkB,CAAC","file":"carbon-element.d.ts","sourcesContent":["/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\n\n/*\n * IMPORTANT: For compatibility with tsickle and the Closure JS compiler, all\n * property decorators (but not class decorators) in this file that have\n * an @ExportDecoratedItems annotation must be defined as a regular function,\n * not an arrow function.\n */\nimport {\n Constructor,\n ClassDescriptor,\n} from '@lit/reactive-element/decorators/base.js';\n\n/**\n * Allow for custom element classes with private constructors\n */\ntype CustomElementClass = Omit<typeof HTMLElement, 'new'>;\n\nconst legacyCustomElement = (tagName: string, clazz: CustomElementClass) => {\n try {\n customElements.define(tagName, clazz as CustomElementConstructor);\n } catch (error) {\n console.warn(`Attempting to re-define ${tagName}`);\n }\n // Cast as any because TS doesn't recognize the return type as being a\n // subtype of the decorated class when clazz is typed as\n // `Constructor<HTMLElement>` for some reason.\n // `Constructor<HTMLElement>` is helpful to make sure the decorator is\n // applied to elements however.\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n return clazz as any;\n};\n\nconst standardCustomElement = (\n tagName: string,\n descriptor: ClassDescriptor\n) => {\n const { kind, elements } = descriptor;\n return {\n kind,\n elements,\n // This callback is called once the class is otherwise fully defined\n finisher(clazz: Constructor<HTMLElement>) {\n try {\n customElements.define(tagName, clazz);\n } catch (error) {\n console.warn(`Attempting to re-define ${tagName}`);\n }\n },\n };\n};\n\n/**\n * Class decorator factory that defines the decorated class as a custom element.\n *\n * ```js\n * @customElement('my-element')\n * class MyElement extends LitElement {\n * render() {\n * return html``;\n * }\n * }\n * ```\n *\n * @category Decorator\n * @param tagName The tag name of the custom element to define.\n */\nexport const carbonElement =\n (tagName: string) =>\n (classOrDescriptor: CustomElementClass | ClassDescriptor) =>\n typeof classOrDescriptor === 'function'\n ? legacyCustomElement(tagName, classOrDescriptor)\n : standardCustomElement(tagName, classOrDescriptor as ClassDescriptor);\n"]}
|
|
@@ -1,41 +1,23 @@
|
|
|
1
|
-
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
2
1
|
/**
|
|
3
2
|
* @license
|
|
4
|
-
*
|
|
5
|
-
*
|
|
6
|
-
*
|
|
7
|
-
* This source code is licensed under the Apache-2.0 license found in the
|
|
8
|
-
* LICENSE file in the root directory of this source tree.
|
|
9
|
-
*/
|
|
10
|
-
|
|
11
|
-
/**
|
|
12
|
-
* @license
|
|
13
|
-
* Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
|
|
14
|
-
* This code may only be used under the BSD style license found at
|
|
15
|
-
* http://polymer.github.io/LICENSE.txt
|
|
16
|
-
* The complete set of authors may be found at
|
|
17
|
-
* http://polymer.github.io/AUTHORS.txt
|
|
18
|
-
* The complete set of contributors may be found at
|
|
19
|
-
* http://polymer.github.io/CONTRIBUTORS.txt
|
|
20
|
-
* Code distributed by Google as part of the polymer project is also
|
|
21
|
-
* subject to an additional IP rights grant found at
|
|
22
|
-
* http://polymer.github.io/PATENTS.txt
|
|
3
|
+
* Copyright 2017 Google LLC
|
|
4
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
23
5
|
*/
|
|
24
6
|
|
|
25
7
|
/*
|
|
26
|
-
* IMPORTANT: For compatibility with tsickle and the Closure
|
|
8
|
+
* IMPORTANT: For compatibility with tsickle and the Closure JS compiler, all
|
|
27
9
|
* property decorators (but not class decorators) in this file that have
|
|
28
10
|
* an @ExportDecoratedItems annotation must be defined as a regular function,
|
|
29
11
|
* not an arrow function.
|
|
30
12
|
*/
|
|
31
13
|
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
14
|
+
/**
|
|
15
|
+
* Allow for custom element classes with private constructors
|
|
16
|
+
*/
|
|
35
17
|
|
|
36
18
|
const legacyCustomElement = (tagName, clazz) => {
|
|
37
19
|
try {
|
|
38
|
-
|
|
20
|
+
customElements.define(tagName, clazz);
|
|
39
21
|
} catch (error) {
|
|
40
22
|
console.warn(`Attempting to re-define ${tagName}`);
|
|
41
23
|
}
|
|
@@ -44,7 +26,7 @@ const legacyCustomElement = (tagName, clazz) => {
|
|
|
44
26
|
// `Constructor<HTMLElement>` for some reason.
|
|
45
27
|
// `Constructor<HTMLElement>` is helpful to make sure the decorator is
|
|
46
28
|
// applied to elements however.
|
|
47
|
-
//
|
|
29
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
48
30
|
return clazz;
|
|
49
31
|
};
|
|
50
32
|
const standardCustomElement = (tagName, descriptor) => {
|
|
@@ -58,7 +40,7 @@ const standardCustomElement = (tagName, descriptor) => {
|
|
|
58
40
|
// This callback is called once the class is otherwise fully defined
|
|
59
41
|
finisher(clazz) {
|
|
60
42
|
try {
|
|
61
|
-
|
|
43
|
+
customElements.define(tagName, clazz);
|
|
62
44
|
} catch (error) {
|
|
63
45
|
console.warn(`Attempting to re-define ${tagName}`);
|
|
64
46
|
}
|
|
@@ -69,9 +51,9 @@ const standardCustomElement = (tagName, descriptor) => {
|
|
|
69
51
|
/**
|
|
70
52
|
* Class decorator factory that defines the decorated class as a custom element.
|
|
71
53
|
*
|
|
72
|
-
* ```
|
|
54
|
+
* ```js
|
|
73
55
|
* @customElement('my-element')
|
|
74
|
-
* class MyElement {
|
|
56
|
+
* class MyElement extends LitElement {
|
|
75
57
|
* render() {
|
|
76
58
|
* return html``;
|
|
77
59
|
* }
|
|
@@ -79,351 +61,7 @@ const standardCustomElement = (tagName, descriptor) => {
|
|
|
79
61
|
* ```
|
|
80
62
|
*
|
|
81
63
|
* @category Decorator
|
|
82
|
-
* @param tagName The name of the custom element to define.
|
|
64
|
+
* @param tagName The tag name of the custom element to define.
|
|
83
65
|
*/
|
|
84
66
|
export const carbonElement = tagName => classOrDescriptor => typeof classOrDescriptor === 'function' ? legacyCustomElement(tagName, classOrDescriptor) : standardCustomElement(tagName, classOrDescriptor);
|
|
85
|
-
const standardProperty = (options, element) => {
|
|
86
|
-
// When decorating an accessor, pass it through and add property metadata.
|
|
87
|
-
// Note, the `hasOwnProperty` check in `createProperty` ensures we don't
|
|
88
|
-
// stomp over the user's accessor.
|
|
89
|
-
if (element.kind === 'method' && element.descriptor && !('value' in element.descriptor)) {
|
|
90
|
-
return _objectSpread(_objectSpread({}, element), {}, {
|
|
91
|
-
finisher(clazz) {
|
|
92
|
-
clazz.createProperty(element.key, options);
|
|
93
|
-
}
|
|
94
|
-
});
|
|
95
|
-
} else {
|
|
96
|
-
// createProperty() takes care of defining the property, but we still
|
|
97
|
-
// must return some kind of descriptor, so return a descriptor for an
|
|
98
|
-
// unused prototype field. The finisher calls createProperty().
|
|
99
|
-
return {
|
|
100
|
-
kind: 'field',
|
|
101
|
-
key: Symbol(),
|
|
102
|
-
placement: 'own',
|
|
103
|
-
descriptor: {},
|
|
104
|
-
// When @babel/plugin-proposal-decorators implements initializers,
|
|
105
|
-
// do this instead of the initializer below. See:
|
|
106
|
-
// https://github.com/babel/babel/issues/9260 extras: [
|
|
107
|
-
// {
|
|
108
|
-
// kind: 'initializer',
|
|
109
|
-
// placement: 'own',
|
|
110
|
-
// initializer: descriptor.initializer,
|
|
111
|
-
// }
|
|
112
|
-
// ],
|
|
113
|
-
initializer() {
|
|
114
|
-
if (typeof element.initializer === 'function') {
|
|
115
|
-
this[element.key] = element.initializer.call(this);
|
|
116
|
-
}
|
|
117
|
-
},
|
|
118
|
-
finisher(clazz) {
|
|
119
|
-
clazz.createProperty(element.key, options);
|
|
120
|
-
}
|
|
121
|
-
};
|
|
122
|
-
}
|
|
123
|
-
};
|
|
124
|
-
const legacyProperty = (options, proto, name) => {
|
|
125
|
-
proto.constructor.createProperty(name, options);
|
|
126
|
-
};
|
|
127
|
-
|
|
128
|
-
/**
|
|
129
|
-
* A property decorator which creates a LitElement property which reflects a
|
|
130
|
-
* corresponding attribute value. A [[`PropertyDeclaration`]] may optionally be
|
|
131
|
-
* supplied to configure property features.
|
|
132
|
-
*
|
|
133
|
-
* This decorator should only be used for public fields. Private or protected
|
|
134
|
-
* fields should use the [[`internalProperty`]] decorator.
|
|
135
|
-
*
|
|
136
|
-
* @example
|
|
137
|
-
* ```ts
|
|
138
|
-
* class MyElement {
|
|
139
|
-
* @property({ type: Boolean })
|
|
140
|
-
* clicked = false;
|
|
141
|
-
* }
|
|
142
|
-
* ```
|
|
143
|
-
* @category Decorator
|
|
144
|
-
* @ExportDecoratedItems
|
|
145
|
-
*/
|
|
146
|
-
export function property(options) {
|
|
147
|
-
// tslint:disable-next-line:no-any decorator
|
|
148
|
-
return (protoOrDescriptor, name) => name !== undefined ? legacyProperty(options, protoOrDescriptor, name) : standardProperty(options, protoOrDescriptor);
|
|
149
|
-
}
|
|
150
|
-
/**
|
|
151
|
-
* Declares a private or protected property that still triggers updates to the
|
|
152
|
-
* element when it changes.
|
|
153
|
-
*
|
|
154
|
-
* Properties declared this way must not be used from HTML or HTML templating
|
|
155
|
-
* systems, they're solely for properties internal to the element. These
|
|
156
|
-
* properties may be renamed by optimization tools like the Closure Compiler.
|
|
157
|
-
*
|
|
158
|
-
* @category Decorator
|
|
159
|
-
* @deprecated `internalProperty` has been renamed to `state` in lit-element
|
|
160
|
-
* 3.0. Please update to `state` now to be compatible with 3.0.
|
|
161
|
-
*/
|
|
162
|
-
export function internalProperty(options) {
|
|
163
|
-
return property({
|
|
164
|
-
attribute: false,
|
|
165
|
-
hasChanged: options === null || options === void 0 ? void 0 : options.hasChanged
|
|
166
|
-
});
|
|
167
|
-
}
|
|
168
|
-
|
|
169
|
-
/**
|
|
170
|
-
* Declares a private or protected property that still triggers updates to the
|
|
171
|
-
* element when it changes.
|
|
172
|
-
*
|
|
173
|
-
* Properties declared this way must not be used from HTML or HTML templating
|
|
174
|
-
* systems, they're solely for properties internal to the element. These
|
|
175
|
-
* properties may be renamed by optimization tools like the Closure Compiler.
|
|
176
|
-
*
|
|
177
|
-
* @category Decorator
|
|
178
|
-
*/
|
|
179
|
-
export const state = options => internalProperty(options);
|
|
180
|
-
|
|
181
|
-
/**
|
|
182
|
-
* A property decorator that converts a class property into a getter that
|
|
183
|
-
* executes a querySelector on the element's renderRoot.
|
|
184
|
-
*
|
|
185
|
-
* @param selector A DOMString containing one or more selectors to match.
|
|
186
|
-
* @param cache An optional boolean which when true performs the DOM query only
|
|
187
|
-
* once and caches the result.
|
|
188
|
-
* @see: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
|
|
189
|
-
* @example
|
|
190
|
-
*
|
|
191
|
-
* ```ts
|
|
192
|
-
* class MyElement {
|
|
193
|
-
* @query('#first')
|
|
194
|
-
* first;
|
|
195
|
-
*
|
|
196
|
-
* render() {
|
|
197
|
-
* return html`
|
|
198
|
-
* <div id="first"></div>
|
|
199
|
-
* <div id="second"></div>
|
|
200
|
-
* `;
|
|
201
|
-
* }
|
|
202
|
-
* }
|
|
203
|
-
* ```
|
|
204
|
-
* @category Decorator
|
|
205
|
-
*/
|
|
206
|
-
export function query(selector, cache) {
|
|
207
|
-
return (protoOrDescriptor, name) => {
|
|
208
|
-
const descriptor = {
|
|
209
|
-
get() {
|
|
210
|
-
return this.renderRoot.querySelector(selector);
|
|
211
|
-
},
|
|
212
|
-
enumerable: true,
|
|
213
|
-
configurable: true
|
|
214
|
-
};
|
|
215
|
-
if (cache) {
|
|
216
|
-
const prop = name !== undefined ? name : protoOrDescriptor.key;
|
|
217
|
-
const key = typeof prop === 'symbol' ? Symbol() : `__${prop}`;
|
|
218
|
-
descriptor.get = function () {
|
|
219
|
-
if (this[key] === undefined) {
|
|
220
|
-
this[key] = this.renderRoot.querySelector(selector);
|
|
221
|
-
}
|
|
222
|
-
return this[key];
|
|
223
|
-
};
|
|
224
|
-
}
|
|
225
|
-
return name !== undefined ? legacyQuery(descriptor, protoOrDescriptor, name) : standardQuery(descriptor, protoOrDescriptor);
|
|
226
|
-
};
|
|
227
|
-
}
|
|
228
|
-
|
|
229
|
-
// Note, in the future, we may extend this decorator to support the use case
|
|
230
|
-
// where the queried element may need to do work to become ready to interact
|
|
231
|
-
// with (e.g. load some implementation code). If so, we might elect to
|
|
232
|
-
// add a second argument defining a function that can be run to make the
|
|
233
|
-
// queried element loaded/updated/ready.
|
|
234
|
-
/**
|
|
235
|
-
* A property decorator that converts a class property into a getter that
|
|
236
|
-
* returns a promise that resolves to the result of a querySelector on the
|
|
237
|
-
* element's renderRoot done after the element's `updateComplete` promise
|
|
238
|
-
* resolves. When the queried property may change with element state, this
|
|
239
|
-
* decorator can be used instead of requiring users to await the
|
|
240
|
-
* `updateComplete` before accessing the property.
|
|
241
|
-
*
|
|
242
|
-
* @param selector A DOMString containing one or more selectors to match.
|
|
243
|
-
* @see: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
|
|
244
|
-
* @example
|
|
245
|
-
* ```ts
|
|
246
|
-
* class MyElement {
|
|
247
|
-
* @queryAsync('#first')
|
|
248
|
-
* first;
|
|
249
|
-
*
|
|
250
|
-
* render() {
|
|
251
|
-
* return html`
|
|
252
|
-
* <div id="first"></div>
|
|
253
|
-
* <div id="second"></div>
|
|
254
|
-
* `;
|
|
255
|
-
* }
|
|
256
|
-
* }
|
|
257
|
-
*
|
|
258
|
-
* // external usage
|
|
259
|
-
* async doSomethingWithFirst() {
|
|
260
|
-
* (await aMyElement.first).doSomething();
|
|
261
|
-
* }
|
|
262
|
-
* ```
|
|
263
|
-
* @category Decorator
|
|
264
|
-
*/
|
|
265
|
-
export function queryAsync(selector) {
|
|
266
|
-
return (protoOrDescriptor, name) => {
|
|
267
|
-
const descriptor = {
|
|
268
|
-
async get() {
|
|
269
|
-
await this.updateComplete;
|
|
270
|
-
return this.renderRoot.querySelector(selector);
|
|
271
|
-
},
|
|
272
|
-
enumerable: true,
|
|
273
|
-
configurable: true
|
|
274
|
-
};
|
|
275
|
-
return name !== undefined ? legacyQuery(descriptor, protoOrDescriptor, name) : standardQuery(descriptor, protoOrDescriptor);
|
|
276
|
-
};
|
|
277
|
-
}
|
|
278
|
-
|
|
279
|
-
/**
|
|
280
|
-
* A property decorator that converts a class property into a getter
|
|
281
|
-
* that executes a querySelectorAll on the element's renderRoot.
|
|
282
|
-
*
|
|
283
|
-
* @param selector A DOMString containing one or more selectors to match.
|
|
284
|
-
* @see:
|
|
285
|
-
* https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll
|
|
286
|
-
* @example
|
|
287
|
-
* ```ts
|
|
288
|
-
* class MyElement {
|
|
289
|
-
* @queryAll('div')
|
|
290
|
-
* divs;
|
|
291
|
-
*
|
|
292
|
-
* render() {
|
|
293
|
-
* return html`
|
|
294
|
-
* <div id="first"></div>
|
|
295
|
-
* <div id="second"></div>
|
|
296
|
-
* `;
|
|
297
|
-
* }
|
|
298
|
-
* }
|
|
299
|
-
* ```
|
|
300
|
-
* @category Decorator
|
|
301
|
-
*/
|
|
302
|
-
export function queryAll(selector) {
|
|
303
|
-
return (protoOrDescriptor, name) => {
|
|
304
|
-
const descriptor = {
|
|
305
|
-
get() {
|
|
306
|
-
return this.renderRoot.querySelectorAll(selector);
|
|
307
|
-
},
|
|
308
|
-
enumerable: true,
|
|
309
|
-
configurable: true
|
|
310
|
-
};
|
|
311
|
-
return name !== undefined ? legacyQuery(descriptor, protoOrDescriptor, name) : standardQuery(descriptor, protoOrDescriptor);
|
|
312
|
-
};
|
|
313
|
-
}
|
|
314
|
-
const legacyQuery = (descriptor, proto, name) => {
|
|
315
|
-
Object.defineProperty(proto, name, descriptor);
|
|
316
|
-
};
|
|
317
|
-
const standardQuery = (descriptor, element) => ({
|
|
318
|
-
kind: 'method',
|
|
319
|
-
placement: 'prototype',
|
|
320
|
-
key: element.key,
|
|
321
|
-
descriptor
|
|
322
|
-
});
|
|
323
|
-
const standardEventOptions = (options, element) => {
|
|
324
|
-
return _objectSpread(_objectSpread({}, element), {}, {
|
|
325
|
-
finisher(clazz) {
|
|
326
|
-
Object.assign(
|
|
327
|
-
// @ts-ignore TS2769: No overload matches this call.
|
|
328
|
-
clazz.prototype[element.key], options);
|
|
329
|
-
}
|
|
330
|
-
});
|
|
331
|
-
};
|
|
332
|
-
const legacyEventOptions =
|
|
333
|
-
// tslint:disable-next-line:no-any legacy decorator
|
|
334
|
-
(options, proto, name) => {
|
|
335
|
-
Object.assign(proto[name], options);
|
|
336
|
-
};
|
|
337
|
-
|
|
338
|
-
/**
|
|
339
|
-
* Adds event listener options to a method used as an event listener in a
|
|
340
|
-
* lit-html template.
|
|
341
|
-
*
|
|
342
|
-
* @param options An object that specifies event listener options as accepted by
|
|
343
|
-
* `EventTarget#addEventListener` and `EventTarget#removeEventListener`.
|
|
344
|
-
* @see https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Parameters
|
|
345
|
-
* Current browsers support the `capture`, `passive`, and `once` options. See:
|
|
346
|
-
* @example
|
|
347
|
-
* ```ts
|
|
348
|
-
* class MyElement {
|
|
349
|
-
* clicked = false;
|
|
350
|
-
*
|
|
351
|
-
* render() {
|
|
352
|
-
* return html`
|
|
353
|
-
* <div @click=${this._onClick}`>
|
|
354
|
-
* <button></button>
|
|
355
|
-
* </div>
|
|
356
|
-
* `;
|
|
357
|
-
* }
|
|
358
|
-
*
|
|
359
|
-
* @eventOptions({capture: true})
|
|
360
|
-
* _onClick(e) {
|
|
361
|
-
* this.clicked = true;
|
|
362
|
-
* }
|
|
363
|
-
* }
|
|
364
|
-
* ```
|
|
365
|
-
* @category Decorator
|
|
366
|
-
*/
|
|
367
|
-
export function eventOptions(options) {
|
|
368
|
-
// Return value typed as any to prevent TypeScript from complaining that
|
|
369
|
-
// standard decorator function signature does not match TypeScript decorator
|
|
370
|
-
// signature
|
|
371
|
-
// TODO(kschaaf): unclear why it was only failing on this decorator and not
|
|
372
|
-
// the others
|
|
373
|
-
return (protoOrDescriptor, name) => name !== undefined ? legacyEventOptions(options, protoOrDescriptor, name) : standardEventOptions(options, protoOrDescriptor); // tslint:disable-next-line:no-any decorator
|
|
374
|
-
}
|
|
375
|
-
|
|
376
|
-
// x-browser support for matches
|
|
377
|
-
// tslint:disable-next-line:no-any
|
|
378
|
-
const ElementProto = Element.prototype;
|
|
379
|
-
const legacyMatches = ElementProto.msMatchesSelector || ElementProto.webkitMatchesSelector;
|
|
380
|
-
|
|
381
|
-
/**
|
|
382
|
-
* A property decorator that converts a class property into a getter that
|
|
383
|
-
* returns the `assignedNodes` of the given named `slot`. Note, the type of
|
|
384
|
-
* this property should be annotated as `NodeListOf<HTMLElement>`.
|
|
385
|
-
*
|
|
386
|
-
* @param slotName A string name of the slot.
|
|
387
|
-
* @param flatten A boolean which when true flattens the assigned nodes,
|
|
388
|
-
* meaning any assigned nodes that are slot elements are replaced with their
|
|
389
|
-
* assigned nodes.
|
|
390
|
-
* @param selector A string which filters the results to elements that match
|
|
391
|
-
* the given css selector.
|
|
392
|
-
* @example
|
|
393
|
-
* ```ts
|
|
394
|
-
* class MyElement {
|
|
395
|
-
* @queryAssignedNodes('list', true, '.item')
|
|
396
|
-
* listItems;
|
|
397
|
-
*
|
|
398
|
-
* render() {
|
|
399
|
-
* return html`
|
|
400
|
-
* <slot name="list"></slot>
|
|
401
|
-
* `;
|
|
402
|
-
* }
|
|
403
|
-
* }
|
|
404
|
-
* ```
|
|
405
|
-
* @category Decorator
|
|
406
|
-
*/
|
|
407
|
-
export function queryAssignedNodes(slotName = '', flatten = false, selector = '') {
|
|
408
|
-
return (protoOrDescriptor, name) => {
|
|
409
|
-
const descriptor = {
|
|
410
|
-
get() {
|
|
411
|
-
const slotSelector = `slot${slotName ? `[name=${slotName}]` : ':not([name])'}`;
|
|
412
|
-
const slot = this.renderRoot.querySelector(slotSelector);
|
|
413
|
-
let nodes = slot && slot.assignedNodes({
|
|
414
|
-
flatten
|
|
415
|
-
});
|
|
416
|
-
if (nodes && selector) {
|
|
417
|
-
nodes = nodes.filter(node => node.nodeType === Node.ELEMENT_NODE && (
|
|
418
|
-
// tslint:disable-next-line:no-any testing existence on older browsers
|
|
419
|
-
node.matches ? node.matches(selector) : legacyMatches.call(node, selector)));
|
|
420
|
-
}
|
|
421
|
-
return nodes;
|
|
422
|
-
},
|
|
423
|
-
enumerable: true,
|
|
424
|
-
configurable: true
|
|
425
|
-
};
|
|
426
|
-
return name !== undefined ? legacyQuery(descriptor, protoOrDescriptor, name) : standardQuery(descriptor, protoOrDescriptor);
|
|
427
|
-
};
|
|
428
|
-
}
|
|
429
67
|
//# sourceMappingURL=carbon-element.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"carbon-element.js","names":["legacyCustomElement","tagName","clazz","window","customElements","define","error","console","warn","standardCustomElement","descriptor","kind","elements","finisher","carbonElement","classOrDescriptor","standardProperty","options","element","_objectSpread","createProperty","key","Symbol","placement","initializer","call","legacyProperty","proto","name","constructor","property","protoOrDescriptor","undefined","internalProperty","attribute","hasChanged","state","query","selector","cache","get","renderRoot","querySelector","enumerable","configurable","prop","legacyQuery","standardQuery","queryAsync","updateComplete","queryAll","querySelectorAll","Object","defineProperty","standardEventOptions","assign","prototype","legacyEventOptions","eventOptions","ElementProto","Element","legacyMatches","msMatchesSelector","webkitMatchesSelector","queryAssignedNodes","slotName","flatten","slotSelector","slot","nodes","assignedNodes","filter","node","nodeType","Node","ELEMENT_NODE","matches"],"sources":["globals/decorators/carbon-element.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/**\n * @license\n * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.\n * This code may only be used under the BSD style license found at\n * http://polymer.github.io/LICENSE.txt\n * The complete set of authors may be found at\n * http://polymer.github.io/AUTHORS.txt\n * The complete set of contributors may be found at\n * http://polymer.github.io/CONTRIBUTORS.txt\n * Code distributed by Google as part of the polymer project is also\n * subject to an additional IP rights grant found at\n * http://polymer.github.io/PATENTS.txt\n */\n\n/*\n * IMPORTANT: For compatibility with tsickle and the Closure Compiler, all\n * property decorators (but not class decorators) in this file that have\n * an @ExportDecoratedItems annotation must be defined as a regular function,\n * not an arrow function.\n */\n\nimport { LitElement } from 'lit';\n\nimport {\n PropertyDeclaration,\n ReactiveElement,\n} from '@lit/reactive-element/reactive-element';\n\nexport type Constructor<T> = {\n // tslint:disable-next-line:no-any\n new (...args: any[]): T;\n};\n\n// From the TC39 Decorators proposal\ninterface ClassDescriptor {\n kind: 'class';\n elements: ClassElement[];\n finisher?: <T>(clazz: Constructor<T>) => undefined | Constructor<T>;\n}\n\n// From the TC39 Decorators proposal\ninterface ClassElement {\n kind: 'field' | 'method';\n key: PropertyKey;\n placement: 'static' | 'prototype' | 'own';\n initializer?: Function;\n extras?: ClassElement[];\n finisher?: <T>(clazz: Constructor<T>) => undefined | Constructor<T>;\n descriptor?: PropertyDescriptor;\n}\n\nconst legacyCustomElement = (\n tagName: string,\n clazz: Constructor<HTMLElement>\n) => {\n try {\n window.customElements.define(tagName, clazz);\n } catch (error) {\n console.warn(`Attempting to re-define ${tagName}`);\n }\n // Cast as any because TS doesn't recognize the return type as being a\n // subtype of the decorated class when clazz is typed as\n // `Constructor<HTMLElement>` for some reason.\n // `Constructor<HTMLElement>` is helpful to make sure the decorator is\n // applied to elements however.\n // tslint:disable-next-line:no-any\n return clazz as any;\n};\n\nconst standardCustomElement = (\n tagName: string,\n descriptor: ClassDescriptor\n) => {\n const { kind, elements } = descriptor;\n return {\n kind,\n elements,\n // This callback is called once the class is otherwise fully defined\n finisher(clazz: Constructor<HTMLElement>) {\n try {\n window.customElements.define(tagName, clazz);\n } catch (error) {\n console.warn(`Attempting to re-define ${tagName}`);\n }\n },\n };\n};\n\n/**\n * Class decorator factory that defines the decorated class as a custom element.\n *\n * ```\n * @customElement('my-element')\n * class MyElement {\n * render() {\n * return html``;\n * }\n * }\n * ```\n *\n * @category Decorator\n * @param tagName The name of the custom element to define.\n */\nexport const carbonElement =\n (tagName: string) =>\n (classOrDescriptor: Constructor<HTMLElement> | ClassDescriptor) =>\n typeof classOrDescriptor === 'function'\n ? legacyCustomElement(tagName, classOrDescriptor)\n : standardCustomElement(tagName, classOrDescriptor);\n\nconst standardProperty = (\n options: PropertyDeclaration,\n element: ClassElement\n) => {\n // When decorating an accessor, pass it through and add property metadata.\n // Note, the `hasOwnProperty` check in `createProperty` ensures we don't\n // stomp over the user's accessor.\n if (\n element.kind === 'method' &&\n element.descriptor &&\n !('value' in element.descriptor)\n ) {\n return {\n ...element,\n finisher(clazz: typeof ReactiveElement) {\n clazz.createProperty(element.key, options);\n },\n };\n } else {\n // createProperty() takes care of defining the property, but we still\n // must return some kind of descriptor, so return a descriptor for an\n // unused prototype field. The finisher calls createProperty().\n return {\n kind: 'field',\n key: Symbol(),\n placement: 'own',\n descriptor: {},\n // When @babel/plugin-proposal-decorators implements initializers,\n // do this instead of the initializer below. See:\n // https://github.com/babel/babel/issues/9260 extras: [\n // {\n // kind: 'initializer',\n // placement: 'own',\n // initializer: descriptor.initializer,\n // }\n // ],\n initializer(this: { [key: string]: unknown }) {\n if (typeof element.initializer === 'function') {\n this[element.key as string] = element.initializer.call(this);\n }\n },\n finisher(clazz: typeof ReactiveElement) {\n clazz.createProperty(element.key, options);\n },\n };\n }\n};\n\nconst legacyProperty = (\n options: PropertyDeclaration,\n proto: Object,\n name: PropertyKey\n) => {\n (proto.constructor as typeof ReactiveElement).createProperty(name, options);\n};\n\n/**\n * A property decorator which creates a LitElement property which reflects a\n * corresponding attribute value. A [[`PropertyDeclaration`]] may optionally be\n * supplied to configure property features.\n *\n * This decorator should only be used for public fields. Private or protected\n * fields should use the [[`internalProperty`]] decorator.\n *\n * @example\n * ```ts\n * class MyElement {\n * @property({ type: Boolean })\n * clicked = false;\n * }\n * ```\n * @category Decorator\n * @ExportDecoratedItems\n */\nexport function property(options?: PropertyDeclaration) {\n // tslint:disable-next-line:no-any decorator\n return (protoOrDescriptor: Object | ClassElement, name?: PropertyKey): any =>\n name !== undefined\n ? legacyProperty(options!, protoOrDescriptor as Object, name)\n : standardProperty(options!, protoOrDescriptor as ClassElement);\n}\n\nexport interface InternalPropertyDeclaration<Type = unknown> {\n /**\n * A function that indicates if a property should be considered changed when\n * it is set. The function should take the `newValue` and `oldValue` and\n * return `true` if an update should be requested.\n */\n hasChanged?(value: Type, oldValue: Type): boolean;\n}\n\n/**\n * Declares a private or protected property that still triggers updates to the\n * element when it changes.\n *\n * Properties declared this way must not be used from HTML or HTML templating\n * systems, they're solely for properties internal to the element. These\n * properties may be renamed by optimization tools like the Closure Compiler.\n *\n * @category Decorator\n * @deprecated `internalProperty` has been renamed to `state` in lit-element\n * 3.0. Please update to `state` now to be compatible with 3.0.\n */\nexport function internalProperty(options?: InternalPropertyDeclaration) {\n return property({ attribute: false, hasChanged: options?.hasChanged });\n}\n\n/**\n * Declares a private or protected property that still triggers updates to the\n * element when it changes.\n *\n * Properties declared this way must not be used from HTML or HTML templating\n * systems, they're solely for properties internal to the element. These\n * properties may be renamed by optimization tools like the Closure Compiler.\n *\n * @category Decorator\n */\nexport const state = (options?: InternalPropertyDeclaration) =>\n internalProperty(options);\n\n/**\n * A property decorator that converts a class property into a getter that\n * executes a querySelector on the element's renderRoot.\n *\n * @param selector A DOMString containing one or more selectors to match.\n * @param cache An optional boolean which when true performs the DOM query only\n * once and caches the result.\n * @see: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector\n * @example\n *\n * ```ts\n * class MyElement {\n * @query('#first')\n * first;\n *\n * render() {\n * return html`\n * <div id=\"first\"></div>\n * <div id=\"second\"></div>\n * `;\n * }\n * }\n * ```\n * @category Decorator\n */\nexport function query(selector: string, cache?: boolean) {\n return (\n protoOrDescriptor: Object | ClassElement,\n // tslint:disable-next-line:no-any decorator\n name?: PropertyKey\n ): any => {\n const descriptor = {\n get(this: LitElement) {\n return this.renderRoot.querySelector(selector);\n },\n enumerable: true,\n configurable: true,\n };\n if (cache) {\n const prop =\n name !== undefined ? name : (protoOrDescriptor as ClassElement).key;\n const key = typeof prop === 'symbol' ? Symbol() : `__${prop}`;\n descriptor.get = function (this: LitElement) {\n if (\n (this as unknown as { [key: string]: Element | null })[\n key as string\n ] === undefined\n ) {\n (this as unknown as { [key: string]: Element | null })[\n key as string\n ] = this.renderRoot.querySelector(selector);\n }\n return (this as unknown as { [key: string]: Element | null })[\n key as string\n ];\n };\n }\n return name !== undefined\n ? legacyQuery(descriptor, protoOrDescriptor as Object, name)\n : standardQuery(descriptor, protoOrDescriptor as ClassElement);\n };\n}\n\n// Note, in the future, we may extend this decorator to support the use case\n// where the queried element may need to do work to become ready to interact\n// with (e.g. load some implementation code). If so, we might elect to\n// add a second argument defining a function that can be run to make the\n// queried element loaded/updated/ready.\n/**\n * A property decorator that converts a class property into a getter that\n * returns a promise that resolves to the result of a querySelector on the\n * element's renderRoot done after the element's `updateComplete` promise\n * resolves. When the queried property may change with element state, this\n * decorator can be used instead of requiring users to await the\n * `updateComplete` before accessing the property.\n *\n * @param selector A DOMString containing one or more selectors to match.\n * @see: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector\n * @example\n * ```ts\n * class MyElement {\n * @queryAsync('#first')\n * first;\n *\n * render() {\n * return html`\n * <div id=\"first\"></div>\n * <div id=\"second\"></div>\n * `;\n * }\n * }\n *\n * // external usage\n * async doSomethingWithFirst() {\n * (await aMyElement.first).doSomething();\n * }\n * ```\n * @category Decorator\n */\nexport function queryAsync(selector: string) {\n return (\n protoOrDescriptor: Object | ClassElement,\n // tslint:disable-next-line:no-any decorator\n name?: PropertyKey\n ): any => {\n const descriptor = {\n async get(this: LitElement) {\n await this.updateComplete;\n return this.renderRoot.querySelector(selector);\n },\n enumerable: true,\n configurable: true,\n };\n return name !== undefined\n ? legacyQuery(descriptor, protoOrDescriptor as Object, name)\n : standardQuery(descriptor, protoOrDescriptor as ClassElement);\n };\n}\n\n/**\n * A property decorator that converts a class property into a getter\n * that executes a querySelectorAll on the element's renderRoot.\n *\n * @param selector A DOMString containing one or more selectors to match.\n * @see:\n * https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll\n * @example\n * ```ts\n * class MyElement {\n * @queryAll('div')\n * divs;\n *\n * render() {\n * return html`\n * <div id=\"first\"></div>\n * <div id=\"second\"></div>\n * `;\n * }\n * }\n * ```\n * @category Decorator\n */\nexport function queryAll(selector: string) {\n return (\n protoOrDescriptor: Object | ClassElement,\n // tslint:disable-next-line:no-any decorator\n name?: PropertyKey\n ): any => {\n const descriptor = {\n get(this: LitElement) {\n return this.renderRoot.querySelectorAll(selector);\n },\n enumerable: true,\n configurable: true,\n };\n return name !== undefined\n ? legacyQuery(descriptor, protoOrDescriptor as Object, name)\n : standardQuery(descriptor, protoOrDescriptor as ClassElement);\n };\n}\n\nconst legacyQuery = (\n descriptor: PropertyDescriptor,\n proto: Object,\n name: PropertyKey\n) => {\n Object.defineProperty(proto, name, descriptor);\n};\n\nconst standardQuery = (\n descriptor: PropertyDescriptor,\n element: ClassElement\n) => ({\n kind: 'method',\n placement: 'prototype',\n key: element.key,\n descriptor,\n});\n\nconst standardEventOptions = (\n options: AddEventListenerOptions,\n element: ClassElement\n) => {\n return {\n ...element,\n finisher(clazz: typeof ReactiveElement) {\n Object.assign(\n // @ts-ignore TS2769: No overload matches this call.\n clazz.prototype[element.key as keyof ReactiveElement],\n options\n );\n },\n };\n};\n\nconst legacyEventOptions =\n // tslint:disable-next-line:no-any legacy decorator\n (options: AddEventListenerOptions, proto: any, name: PropertyKey) => {\n Object.assign(proto[name], options);\n };\n\n/**\n * Adds event listener options to a method used as an event listener in a\n * lit-html template.\n *\n * @param options An object that specifies event listener options as accepted by\n * `EventTarget#addEventListener` and `EventTarget#removeEventListener`.\n * @see https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Parameters\n * Current browsers support the `capture`, `passive`, and `once` options. See:\n * @example\n * ```ts\n * class MyElement {\n * clicked = false;\n *\n * render() {\n * return html`\n * <div @click=${this._onClick}`>\n * <button></button>\n * </div>\n * `;\n * }\n *\n * @eventOptions({capture: true})\n * _onClick(e) {\n * this.clicked = true;\n * }\n * }\n * ```\n * @category Decorator\n */\nexport function eventOptions(options: AddEventListenerOptions) {\n // Return value typed as any to prevent TypeScript from complaining that\n // standard decorator function signature does not match TypeScript decorator\n // signature\n // TODO(kschaaf): unclear why it was only failing on this decorator and not\n // the others\n return ((protoOrDescriptor: Object | ClassElement, name?: string) =>\n name !== undefined\n ? legacyEventOptions(options, protoOrDescriptor as Object, name)\n : standardEventOptions(\n options,\n protoOrDescriptor as ClassElement\n )) as any; // tslint:disable-next-line:no-any decorator\n}\n\n// x-browser support for matches\n// tslint:disable-next-line:no-any\nconst ElementProto = Element.prototype as any;\nconst legacyMatches =\n ElementProto.msMatchesSelector || ElementProto.webkitMatchesSelector;\n\n/**\n * A property decorator that converts a class property into a getter that\n * returns the `assignedNodes` of the given named `slot`. Note, the type of\n * this property should be annotated as `NodeListOf<HTMLElement>`.\n *\n * @param slotName A string name of the slot.\n * @param flatten A boolean which when true flattens the assigned nodes,\n * meaning any assigned nodes that are slot elements are replaced with their\n * assigned nodes.\n * @param selector A string which filters the results to elements that match\n * the given css selector.\n * @example\n * ```ts\n * class MyElement {\n * @queryAssignedNodes('list', true, '.item')\n * listItems;\n *\n * render() {\n * return html`\n * <slot name=\"list\"></slot>\n * `;\n * }\n * }\n * ```\n * @category Decorator\n */\nexport function queryAssignedNodes(\n slotName = '',\n flatten = false,\n selector = ''\n) {\n return (\n protoOrDescriptor: Object | ClassElement,\n // tslint:disable-next-line:no-any decorator\n name?: PropertyKey\n ): any => {\n const descriptor = {\n get(this: LitElement) {\n const slotSelector = `slot${\n slotName ? `[name=${slotName}]` : ':not([name])'\n }`;\n const slot = this.renderRoot.querySelector(slotSelector);\n let nodes =\n slot && (slot as HTMLSlotElement).assignedNodes({ flatten });\n if (nodes && selector) {\n nodes = nodes.filter(\n (node) =>\n node.nodeType === Node.ELEMENT_NODE &&\n // tslint:disable-next-line:no-any testing existence on older browsers\n ((node as any).matches\n ? (node as Element).matches(selector)\n : legacyMatches.call(node as Element, selector))\n );\n }\n return nodes;\n },\n enumerable: true,\n configurable: true,\n };\n return name !== undefined\n ? legacyQuery(descriptor, protoOrDescriptor as Object, name)\n : standardQuery(descriptor, protoOrDescriptor as ClassElement);\n };\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"carbon-element.js","names":["legacyCustomElement","tagName","clazz","customElements","define","error","console","warn","standardCustomElement","descriptor","kind","elements","finisher","carbonElement","classOrDescriptor"],"sources":["globals/decorators/carbon-element.ts"],"sourcesContent":["/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\n\n/*\n * IMPORTANT: For compatibility with tsickle and the Closure JS compiler, all\n * property decorators (but not class decorators) in this file that have\n * an @ExportDecoratedItems annotation must be defined as a regular function,\n * not an arrow function.\n */\nimport {\n Constructor,\n ClassDescriptor,\n} from '@lit/reactive-element/decorators/base.js';\n\n/**\n * Allow for custom element classes with private constructors\n */\ntype CustomElementClass = Omit<typeof HTMLElement, 'new'>;\n\nconst legacyCustomElement = (tagName: string, clazz: CustomElementClass) => {\n try {\n customElements.define(tagName, clazz as CustomElementConstructor);\n } catch (error) {\n console.warn(`Attempting to re-define ${tagName}`);\n }\n // Cast as any because TS doesn't recognize the return type as being a\n // subtype of the decorated class when clazz is typed as\n // `Constructor<HTMLElement>` for some reason.\n // `Constructor<HTMLElement>` is helpful to make sure the decorator is\n // applied to elements however.\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n return clazz as any;\n};\n\nconst standardCustomElement = (\n tagName: string,\n descriptor: ClassDescriptor\n) => {\n const { kind, elements } = descriptor;\n return {\n kind,\n elements,\n // This callback is called once the class is otherwise fully defined\n finisher(clazz: Constructor<HTMLElement>) {\n try {\n customElements.define(tagName, clazz);\n } catch (error) {\n console.warn(`Attempting to re-define ${tagName}`);\n }\n },\n };\n};\n\n/**\n * Class decorator factory that defines the decorated class as a custom element.\n *\n * ```js\n * @customElement('my-element')\n * class MyElement extends LitElement {\n * render() {\n * return html``;\n * }\n * }\n * ```\n *\n * @category Decorator\n * @param tagName The tag name of the custom element to define.\n */\nexport const carbonElement =\n (tagName: string) =>\n (classOrDescriptor: CustomElementClass | ClassDescriptor) =>\n typeof classOrDescriptor === 'function'\n ? legacyCustomElement(tagName, classOrDescriptor)\n : standardCustomElement(tagName, classOrDescriptor as ClassDescriptor);\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAMA;AACA;AACA;;AAGA,MAAMA,mBAAmB,GAAGA,CAACC,OAAe,EAAEC,KAAyB,KAAK;EAC1E,IAAI;IACFC,cAAc,CAACC,MAAM,CAACH,OAAO,EAAEC,KAAiC,CAAC;EACnE,CAAC,CAAC,OAAOG,KAAK,EAAE;IACdC,OAAO,CAACC,IAAI,CAAE,2BAA0BN,OAAQ,EAAC,CAAC;EACpD;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OAAOC,KAAK;AACd,CAAC;AAED,MAAMM,qBAAqB,GAAGA,CAC5BP,OAAe,EACfQ,UAA2B,KACxB;EACH,MAAM;IAAEC,IAAI;IAAEC;EAAS,CAAC,GAAGF,UAAU;EACrC,OAAO;IACLC,IAAI;IACJC,QAAQ;IACR;IACAC,QAAQA,CAACV,KAA+B,EAAE;MACxC,IAAI;QACFC,cAAc,CAACC,MAAM,CAACH,OAAO,EAAEC,KAAK,CAAC;MACvC,CAAC,CAAC,OAAOG,KAAK,EAAE;QACdC,OAAO,CAACC,IAAI,CAAE,2BAA0BN,OAAQ,EAAC,CAAC;MACpD;IACF;EACF,CAAC;AACH,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMY,aAAa,GACvBZ,OAAe,IACfa,iBAAuD,IACtD,OAAOA,iBAAiB,KAAK,UAAU,GACnCd,mBAAmB,CAACC,OAAO,EAAEa,iBAAiB,CAAC,GAC/CN,qBAAqB,CAACP,OAAO,EAAEa,iBAAoC,CAAC"}
|