123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258 |
- /**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
- var _a, _b, _c;
- /**
- * The main LitElement module, which defines the {@linkcode LitElement} base
- * class and related APIs.
- *
- * LitElement components can define a template and a set of observed
- * properties. Changing an observed property triggers a re-render of the
- * element.
- *
- * Import {@linkcode LitElement} and {@linkcode html} from this module to
- * create a component:
- *
- * ```js
- * import {LitElement, html} from 'lit-element';
- *
- * class MyElement extends LitElement {
- *
- * // Declare observed properties
- * static get properties() {
- * return {
- * adjective: {}
- * }
- * }
- *
- * constructor() {
- * this.adjective = 'awesome';
- * }
- *
- * // Define the element's template
- * render() {
- * return html`<p>your ${adjective} template here</p>`;
- * }
- * }
- *
- * customElements.define('my-element', MyElement);
- * ```
- *
- * `LitElement` extends {@linkcode ReactiveElement} and adds lit-html
- * templating. The `ReactiveElement` class is provided for users that want to
- * build their own custom element base classes that don't use lit-html.
- *
- * @packageDocumentation
- */
- import { ReactiveElement } from '@lit/reactive-element';
- import { render, noChange } from 'lit-html';
- export * from '@lit/reactive-element';
- export * from 'lit-html';
- // For backwards compatibility export ReactiveElement as UpdatingElement. Note,
- // IE transpilation requires exporting like this.
- export const UpdatingElement = ReactiveElement;
- const DEV_MODE = true;
- let issueWarning;
- if (DEV_MODE) {
- // Ensure warnings are issued only 1x, even if multiple versions of Lit
- // are loaded.
- const issuedWarnings = ((_a = globalThis.litIssuedWarnings) !== null && _a !== void 0 ? _a : (globalThis.litIssuedWarnings = new Set()));
- // Issue a warning, if we haven't already.
- issueWarning = (code, warning) => {
- warning += ` See https://lit.dev/msg/${code} for more information.`;
- if (!issuedWarnings.has(warning)) {
- console.warn(warning);
- issuedWarnings.add(warning);
- }
- };
- }
- /**
- * Base element class that manages element properties and attributes, and
- * renders a lit-html template.
- *
- * To define a component, subclass `LitElement` and implement a
- * `render` method to provide the component's template. Define properties
- * using the {@linkcode LitElement.properties properties} property or the
- * {@linkcode property} decorator.
- */
- export class LitElement extends ReactiveElement {
- constructor() {
- super(...arguments);
- /**
- * @category rendering
- */
- this.renderOptions = { host: this };
- this.__childPart = undefined;
- }
- /**
- * @category rendering
- */
- createRenderRoot() {
- var _a;
- var _b;
- const renderRoot = super.createRenderRoot();
- // When adoptedStyleSheets are shimmed, they are inserted into the
- // shadowRoot by createRenderRoot. Adjust the renderBefore node so that
- // any styles in Lit content render before adoptedStyleSheets. This is
- // important so that adoptedStyleSheets have precedence over styles in
- // the shadowRoot.
- (_a = (_b = this.renderOptions).renderBefore) !== null && _a !== void 0 ? _a : (_b.renderBefore = renderRoot.firstChild);
- return renderRoot;
- }
- /**
- * Updates the element. This method reflects property values to attributes
- * and calls `render` to render DOM via lit-html. Setting properties inside
- * this method will *not* trigger another update.
- * @param changedProperties Map of changed properties with old values
- * @category updates
- */
- update(changedProperties) {
- // Setting properties in `render` should not trigger an update. Since
- // updates are allowed after super.update, it's important to call `render`
- // before that.
- const value = this.render();
- if (!this.hasUpdated) {
- this.renderOptions.isConnected = this.isConnected;
- }
- super.update(changedProperties);
- this.__childPart = render(value, this.renderRoot, this.renderOptions);
- }
- /**
- * Invoked when the component is added to the document's DOM.
- *
- * In `connectedCallback()` you should setup tasks that should only occur when
- * the element is connected to the document. The most common of these is
- * adding event listeners to nodes external to the element, like a keydown
- * event handler added to the window.
- *
- * ```ts
- * connectedCallback() {
- * super.connectedCallback();
- * addEventListener('keydown', this._handleKeydown);
- * }
- * ```
- *
- * Typically, anything done in `connectedCallback()` should be undone when the
- * element is disconnected, in `disconnectedCallback()`.
- *
- * @category lifecycle
- */
- connectedCallback() {
- var _a;
- super.connectedCallback();
- (_a = this.__childPart) === null || _a === void 0 ? void 0 : _a.setConnected(true);
- }
- /**
- * Invoked when the component is removed from the document's DOM.
- *
- * This callback is the main signal to the element that it may no longer be
- * used. `disconnectedCallback()` should ensure that nothing is holding a
- * reference to the element (such as event listeners added to nodes external
- * to the element), so that it is free to be garbage collected.
- *
- * ```ts
- * disconnectedCallback() {
- * super.disconnectedCallback();
- * window.removeEventListener('keydown', this._handleKeydown);
- * }
- * ```
- *
- * An element may be re-connected after being disconnected.
- *
- * @category lifecycle
- */
- disconnectedCallback() {
- var _a;
- super.disconnectedCallback();
- (_a = this.__childPart) === null || _a === void 0 ? void 0 : _a.setConnected(false);
- }
- /**
- * Invoked on each update to perform rendering tasks. This method may return
- * any value renderable by lit-html's `ChildPart` - typically a
- * `TemplateResult`. Setting properties inside this method will *not* trigger
- * the element to update.
- * @category rendering
- */
- render() {
- return noChange;
- }
- }
- /**
- * Ensure this class is marked as `finalized` as an optimization ensuring
- * it will not needlessly try to `finalize`.
- *
- * Note this property name is a string to prevent breaking Closure JS Compiler
- * optimizations. See @lit/reactive-element for more information.
- */
- LitElement['finalized'] = true;
- // This property needs to remain unminified.
- LitElement['_$litElement$'] = true;
- // Install hydration if available
- (_b = globalThis.litElementHydrateSupport) === null || _b === void 0 ? void 0 : _b.call(globalThis, { LitElement });
- // Apply polyfills if available
- const polyfillSupport = DEV_MODE
- ? globalThis.litElementPolyfillSupportDevMode
- : globalThis.litElementPolyfillSupport;
- polyfillSupport === null || polyfillSupport === void 0 ? void 0 : polyfillSupport({ LitElement });
- // DEV mode warnings
- if (DEV_MODE) {
- /* eslint-disable @typescript-eslint/no-explicit-any */
- // Note, for compatibility with closure compilation, this access
- // needs to be as a string property index.
- LitElement['finalize'] = function () {
- const finalized = ReactiveElement.finalize.call(this);
- if (!finalized) {
- return false;
- }
- const warnRemovedOrRenamed = (obj, name, renamed = false) => {
- if (obj.hasOwnProperty(name)) {
- const ctorName = (typeof obj === 'function' ? obj : obj.constructor)
- .name;
- issueWarning(renamed ? 'renamed-api' : 'removed-api', `\`${name}\` is implemented on class ${ctorName}. It ` +
- `has been ${renamed ? 'renamed' : 'removed'} ` +
- `in this version of LitElement.`);
- }
- };
- warnRemovedOrRenamed(this, 'render');
- warnRemovedOrRenamed(this, 'getStyles', true);
- warnRemovedOrRenamed(this.prototype, 'adoptStyles');
- return true;
- };
- /* eslint-enable @typescript-eslint/no-explicit-any */
- }
- /**
- * END USERS SHOULD NOT RELY ON THIS OBJECT.
- *
- * Private exports for use by other Lit packages, not intended for use by
- * external users.
- *
- * We currently do not make a mangled rollup build of the lit-ssr code. In order
- * to keep a number of (otherwise private) top-level exports mangled in the
- * client side code, we export a _$LE object containing those members (or
- * helper methods for accessing private fields of those members), and then
- * re-export them for use in lit-ssr. This keeps lit-ssr agnostic to whether the
- * client-side code is being used in `dev` mode or `prod` mode.
- *
- * This has a unique name, to disambiguate it from private exports in
- * lit-html, since this module re-exports all of lit-html.
- *
- * @private
- */
- export const _$LE = {
- _$attributeToProperty: (el, name, value) => {
- // eslint-disable-next-line
- el._$attributeToProperty(name, value);
- },
- // eslint-disable-next-line
- _$changedProperties: (el) => el._$changedProperties,
- };
- // IMPORTANT: do not change the property name or the assignment expression.
- // This line will be used in regexes to search for LitElement usage.
- ((_c = globalThis.litElementVersions) !== null && _c !== void 0 ? _c : (globalThis.litElementVersions = [])).push('3.2.0');
- if (DEV_MODE && globalThis.litElementVersions.length > 1) {
- issueWarning('multiple-versions', `Multiple versions of Lit loaded. Loading multiple versions ` +
- `is not recommended.`);
- }
- //# sourceMappingURL=lit-element.js.map
|