@boligmappa/web-component-connect
Version:
Web Component button for initating the sign in process of the Boligmappa Auth Component
1,222 lines (1,167 loc) • 376 kB
JavaScript
/******/ (() => { // webpackBootstrap
/******/ "use strict";
/******/ var __webpack_modules__ = ({
/***/ "./src/BoligmappaConnect.ts":
/*!**********************************!*\
!*** ./src/BoligmappaConnect.ts ***!
\**********************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "BoligmappaConnect": () => (/* binding */ BoligmappaConnect)
/* harmony export */ });
/* harmony import */ var lit__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! lit */ "./node_modules/lit/index.js");
/* harmony import */ var lit_decorators_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! lit/decorators.js */ "./node_modules/lit/decorators.js");
/* harmony import */ var _assets_icons_boligmappa_icon_without_text_svg__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./assets/icons/boligmappa-icon-without-text.svg */ "./src/assets/icons/boligmappa-icon-without-text.svg");
var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
class BoligmappaConnect extends lit__WEBPACK_IMPORTED_MODULE_0__.LitElement {
constructor() {
super();
this.development = false;
this.buttonText = "Koble til Boligmappa";
this.authBaseUrl = "https://auth.boligmappa.no/auth/realms/professional-realm/protocol/openid-connect";
}
firstUpdated() {
if (this.development) {
this.authBaseUrl =
"https://testauth.boligmappa.no/auth/realms/professional-realm-staging/protocol/openid-connect";
}
}
onConnectClick() {
const popupWindowFeatures = "toolbar=no, menubar=no, width=420, height=700, top=100, left=100";
window.open(`/boligmappa-connect/`, "Connect with Boligmappa", popupWindowFeatures);
}
render() {
return lit__WEBPACK_IMPORTED_MODULE_0__.html `
<button class="connect-button" @click=${() => this.onConnectClick()}>
<img src=${_assets_icons_boligmappa_icon_without_text_svg__WEBPACK_IMPORTED_MODULE_2__} />
<span
class="login-btn"
style="padding: 0.5em; text-transform: capitalize;"
>${this.buttonText}</span
>
</button>
`;
}
}
BoligmappaConnect.styles = lit__WEBPACK_IMPORTED_MODULE_0__.css `
@font-face {
font-family: Sofia Pro;
src: url("./assets/fonts/sofia_pro/regular.otf");
font-weight: 700;
font-style: normal;
}
.login-btn {
font-family: var(--connect-font-family, Sofia Pro, sans-serif);
font-size: 14px;
font-weight: var(--connect-font-weight, 300);
color: var(--connect-text-color);
text-align: left;
letter-spacing: 0px;
opacity: 1;
}
.connect-button {
padding: 0 16px;
min-width: 64px;
border-radius: 4px;
height: 36px;
align-items: center;
justify-content: center;
display: inline-flex;
position: relative;
background-color: #fff;
border: none;
margin: 5px;
transition: box-shadow 600ms cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
}
.connect-button:hover {
cursor: pointer;
box-shadow: 0px 3px 5px -2px rgba(0, 0, 0, 0.2),
0px 2px 6px 0px rgba(0, 0, 0, 0.18), 0px 1px 9px 0px rgba(0, 0, 0, 0.16);
}
`;
__decorate([
(0,lit_decorators_js__WEBPACK_IMPORTED_MODULE_1__.property)()
], BoligmappaConnect.prototype, "development", void 0);
__decorate([
(0,lit_decorators_js__WEBPACK_IMPORTED_MODULE_1__.property)()
], BoligmappaConnect.prototype, "buttonText", void 0);
customElements.define("boligmappa-connect", BoligmappaConnect);
/***/ }),
/***/ "./src/assets/icons/boligmappa-icon-without-text.svg":
/*!***********************************************************!*\
!*** ./src/assets/icons/boligmappa-icon-without-text.svg ***!
\***********************************************************/
/***/ ((module) => {
module.exports = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNS42NTYiIGhlaWdodD0iMjAuODEyIiB2aWV3Qm94PSIwIDAgMjUuNjU2IDIwLjgxMiI+PGRlZnM+PHN0eWxlPi5he2ZpbGw6I2ZjNjg2NTtmaWxsLXJ1bGU6ZXZlbm9kZDt9PC9zdHlsZT48L2RlZnM+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTEyMCAtMTQzLjg2OCkiPjxwYXRoIGNsYXNzPSJhIiBkPSJNMTM2LjQsMjQ1LjUyM2gxNi44OTNhMS4xNzEsMS4xNzEsMCwwLDAsLjktLjYyNmw0LjU1Mi04LjgzM2MuNjYxLTEuMjg0LjIzMi0yLjMzNC0uOTU3LTIuMzM0SDE0MC45YTEuMTcxLDEuMTcxLDAsMCwwLS45LjYyNmwtNC41NTIsOC44MzNjLS42NjEsMS4yODQtLjIzMiwyLjMzNC45NTcsMi4zMzQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMy4zOTYgLTgwLjg0MykiLz48cGF0aCBjbGFzcz0iYSIgZD0iTTEzMC4yNTcsMTQ0LjRsLTkuMzU2LDcuMzYzYTIuMzI2LDIuMzI2LDAsMCwwLS45LDEuOTkyVjE2MS45bDQuODI3LTguNjU0YTMuMzYxLDMuMzYxLDAsMCwxLDIuODE3LTEuNzA5aDE0LjczNGwtOS4wNjYtNy4xMzdhMi40MzgsMi40MzgsMCwwLDAtMy4wNSwwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwKSIvPjwvZz48L3N2Zz4=";
/***/ }),
/***/ "./node_modules/@lit/reactive-element/development/css-tag.js":
/*!*******************************************************************!*\
!*** ./node_modules/@lit/reactive-element/development/css-tag.js ***!
\*******************************************************************/
/***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "supportsAdoptingStyleSheets": () => (/* binding */ supportsAdoptingStyleSheets),
/* harmony export */ "CSSResult": () => (/* binding */ CSSResult),
/* harmony export */ "unsafeCSS": () => (/* binding */ unsafeCSS),
/* harmony export */ "css": () => (/* binding */ css),
/* harmony export */ "adoptStyles": () => (/* binding */ adoptStyles),
/* harmony export */ "getCompatibleStyle": () => (/* binding */ getCompatibleStyle)
/* harmony export */ });
/**
* @license
* Copyright 2019 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
/**
* Whether the current browser supports `adoptedStyleSheets`.
*/
const supportsAdoptingStyleSheets = window.ShadowRoot &&
(window.ShadyCSS === undefined || window.ShadyCSS.nativeShadow) &&
'adoptedStyleSheets' in Document.prototype &&
'replace' in CSSStyleSheet.prototype;
const constructionToken = Symbol();
const styleSheetCache = new Map();
/**
* A container for a string of CSS text, that may be used to create a CSSStyleSheet.
*
* CSSResult is the return value of `css`-tagged template literals and
* `unsafeCSS()`. In order to ensure that CSSResults are only created via the
* `css` tag and `unsafeCSS()`, CSSResult cannot be constructed directly.
*/
class CSSResult {
constructor(cssText, safeToken) {
// This property needs to remain unminified.
this['_$cssResult$'] = true;
if (safeToken !== constructionToken) {
throw new Error('CSSResult is not constructable. Use `unsafeCSS` or `css` instead.');
}
this.cssText = cssText;
}
// Note, this is a getter so that it's lazy. In practice, this means
// stylesheets are not created until the first element instance is made.
get styleSheet() {
// Note, if `supportsAdoptingStyleSheets` is true then we assume
// CSSStyleSheet is constructable.
let styleSheet = styleSheetCache.get(this.cssText);
if (supportsAdoptingStyleSheets && styleSheet === undefined) {
styleSheetCache.set(this.cssText, (styleSheet = new CSSStyleSheet()));
styleSheet.replaceSync(this.cssText);
}
return styleSheet;
}
toString() {
return this.cssText;
}
}
const textFromCSSResult = (value) => {
// This property needs to remain unminified.
if (value['_$cssResult$'] === true) {
return value.cssText;
}
else if (typeof value === 'number') {
return value;
}
else {
throw new Error(`Value passed to 'css' function must be a 'css' function result: ` +
`${value}. Use 'unsafeCSS' to pass non-literal values, but take care ` +
`to ensure page security.`);
}
};
/**
* Wrap a value for interpolation in a [[`css`]] tagged template literal.
*
* This is unsafe because untrusted CSS text can be used to phone home
* or exfiltrate data to an attacker controlled site. Take care to only use
* this with trusted input.
*/
const unsafeCSS = (value) => new CSSResult(typeof value === 'string' ? value : String(value), constructionToken);
/**
* A template literal tag which can be used with LitElement's
* [[LitElement.styles | `styles`]] property to set element styles.
*
* For security reasons, only literal string values and number may be used in
* embedded expressions. To incorporate non-literal values [[`unsafeCSS`]] may
* be used inside an expression.
*/
const css = (strings, ...values) => {
const cssText = strings.length === 1
? strings[0]
: values.reduce((acc, v, idx) => acc + textFromCSSResult(v) + strings[idx + 1], strings[0]);
return new CSSResult(cssText, constructionToken);
};
/**
* Applies the given styles to a `shadowRoot`. When Shadow DOM is
* available but `adoptedStyleSheets` is not, styles are appended to the
* `shadowRoot` to [mimic spec behavior](https://wicg.github.io/construct-stylesheets/#using-constructed-stylesheets).
* Note, when shimming is used, any styles that are subsequently placed into
* the shadowRoot should be placed *before* any shimmed adopted styles. This
* will match spec behavior that gives adopted sheets precedence over styles in
* shadowRoot.
*/
const adoptStyles = (renderRoot, styles) => {
if (supportsAdoptingStyleSheets) {
renderRoot.adoptedStyleSheets = styles.map((s) => s instanceof CSSStyleSheet ? s : s.styleSheet);
}
else {
styles.forEach((s) => {
const style = document.createElement('style');
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const nonce = window['litNonce'];
if (nonce !== undefined) {
style.setAttribute('nonce', nonce);
}
style.textContent = s.cssText;
renderRoot.appendChild(style);
});
}
};
const cssResultFromStyleSheet = (sheet) => {
let cssText = '';
for (const rule of sheet.cssRules) {
cssText += rule.cssText;
}
return unsafeCSS(cssText);
};
const getCompatibleStyle = supportsAdoptingStyleSheets
? (s) => s
: (s) => s instanceof CSSStyleSheet ? cssResultFromStyleSheet(s) : s;
//# sourceMappingURL=css-tag.js.map
/***/ }),
/***/ "./node_modules/@lit/reactive-element/development/decorators/base.js":
/*!***************************************************************************!*\
!*** ./node_modules/@lit/reactive-element/development/decorators/base.js ***!
\***************************************************************************/
/***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "legacyPrototypeMethod": () => (/* binding */ legacyPrototypeMethod),
/* harmony export */ "standardPrototypeMethod": () => (/* binding */ standardPrototypeMethod),
/* harmony export */ "decorateProperty": () => (/* binding */ decorateProperty)
/* harmony export */ });
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
const legacyPrototypeMethod = (descriptor, proto, name) => {
Object.defineProperty(proto, name, descriptor);
};
const standardPrototypeMethod = (descriptor, element) => ({
kind: 'method',
placement: 'prototype',
key: element.key,
descriptor,
});
/**
* Helper for decorating a property that is compatible with both TypeScript
* and Babel decorators. The optional `finisher` can be used to perform work on
* the class. The optional `descriptor` should return a PropertyDescriptor
* to install for the given property.
*
* @param finisher {function} Optional finisher method; receives the element
* constructor and property key as arguments and has no return value.
* @param descriptor {function} Optional descriptor method; receives the
* property key as an argument and returns a property descriptor to define for
* the given property.
* @returns {ClassElement|void}
*/
const decorateProperty = ({ finisher, descriptor, }) => (protoOrDescriptor, name
// Note TypeScript requires the return type to be `void|any`
// eslint-disable-next-line @typescript-eslint/no-explicit-any
) => {
var _a;
// TypeScript / Babel legacy mode
if (name !== undefined) {
const ctor = protoOrDescriptor
.constructor;
if (descriptor !== undefined) {
Object.defineProperty(protoOrDescriptor, name, descriptor(name));
}
finisher === null || finisher === void 0 ? void 0 : finisher(ctor, name);
// Babel standard mode
}
else {
// Note, the @property decorator saves `key` as `originalKey`
// so try to use it here.
const key =
// eslint-disable-next-line @typescript-eslint/no-explicit-any
(_a = protoOrDescriptor.originalKey) !== null && _a !== void 0 ? _a : protoOrDescriptor.key;
const info = descriptor != undefined
? {
kind: 'method',
placement: 'prototype',
key,
descriptor: descriptor(protoOrDescriptor.key),
}
: { ...protoOrDescriptor, key };
if (finisher != undefined) {
info.finisher = function (ctor) {
finisher(ctor, key);
};
}
return info;
}
};
//# sourceMappingURL=base.js.map
/***/ }),
/***/ "./node_modules/@lit/reactive-element/development/decorators/custom-element.js":
/*!*************************************************************************************!*\
!*** ./node_modules/@lit/reactive-element/development/decorators/custom-element.js ***!
\*************************************************************************************/
/***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "customElement": () => (/* binding */ customElement)
/* harmony export */ });
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
const legacyCustomElement = (tagName, clazz) => {
window.customElements.define(tagName, clazz);
// Cast as any because TS doesn't recognize the return type as being a
// subtype of the decorated class when clazz is typed as
// `Constructor<HTMLElement>` for some reason.
// `Constructor<HTMLElement>` is helpful to make sure the decorator is
// applied to elements however.
// eslint-disable-next-line @typescript-eslint/no-explicit-any
return clazz;
};
const standardCustomElement = (tagName, descriptor) => {
const { kind, elements } = descriptor;
return {
kind,
elements,
// This callback is called once the class is otherwise fully defined
finisher(clazz) {
window.customElements.define(tagName, clazz);
},
};
};
/**
* Class decorator factory that defines the decorated class as a custom element.
*
* ```js
* @customElement('my-element')
* class MyElement extends LitElement {
* render() {
* return html``;
* }
* }
* ```
* @category Decorator
* @param tagName The tag name of the custom element to define.
*/
const customElement = (tagName) => (classOrDescriptor) => typeof classOrDescriptor === 'function'
? legacyCustomElement(tagName, classOrDescriptor)
: standardCustomElement(tagName, classOrDescriptor);
//# sourceMappingURL=custom-element.js.map
/***/ }),
/***/ "./node_modules/@lit/reactive-element/development/decorators/event-options.js":
/*!************************************************************************************!*\
!*** ./node_modules/@lit/reactive-element/development/decorators/event-options.js ***!
\************************************************************************************/
/***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "eventOptions": () => (/* binding */ eventOptions)
/* harmony export */ });
/* harmony import */ var _base_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./base.js */ "./node_modules/@lit/reactive-element/development/decorators/base.js");
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
/**
* Adds event listener options to a method used as an event listener in a
* lit-html template.
*
* @param options An object that specifies event listener options as accepted by
* `EventTarget#addEventListener` and `EventTarget#removeEventListener`.
*
* Current browsers support the `capture`, `passive`, and `once` options. See:
* https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Parameters
*
* ```ts
* class MyElement {
* clicked = false;
*
* render() {
* return html`
* <div @click=${this._onClick}`>
* <button></button>
* </div>
* `;
* }
*
* @eventOptions({capture: true})
* _onClick(e) {
* this.clicked = true;
* }
* }
* ```
* @category Decorator
*/
function eventOptions(options) {
return (0,_base_js__WEBPACK_IMPORTED_MODULE_0__.decorateProperty)({
finisher: (ctor, name) => {
Object.assign(ctor.prototype[name], options);
},
});
}
//# sourceMappingURL=event-options.js.map
/***/ }),
/***/ "./node_modules/@lit/reactive-element/development/decorators/property.js":
/*!*******************************************************************************!*\
!*** ./node_modules/@lit/reactive-element/development/decorators/property.js ***!
\*******************************************************************************/
/***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "property": () => (/* binding */ property)
/* harmony export */ });
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
const standardProperty = (options, element) => {
// When decorating an accessor, pass it through and add property metadata.
// Note, the `hasOwnProperty` check in `createProperty` ensures we don't
// stomp over the user's accessor.
if (element.kind === 'method' &&
element.descriptor &&
!('value' in element.descriptor)) {
return {
...element,
finisher(clazz) {
clazz.createProperty(element.key, options);
},
};
}
else {
// createProperty() takes care of defining the property, but we still
// must return some kind of descriptor, so return a descriptor for an
// unused prototype field. The finisher calls createProperty().
return {
kind: 'field',
key: Symbol(),
placement: 'own',
descriptor: {},
// store the original key so subsequent decorators have access to it.
originalKey: element.key,
// When @babel/plugin-proposal-decorators implements initializers,
// do this instead of the initializer below. See:
// https://github.com/babel/babel/issues/9260 extras: [
// {
// kind: 'initializer',
// placement: 'own',
// initializer: descriptor.initializer,
// }
// ],
initializer() {
if (typeof element.initializer === 'function') {
this[element.key] = element.initializer.call(this);
}
},
finisher(clazz) {
clazz.createProperty(element.key, options);
},
};
}
};
const legacyProperty = (options, proto, name) => {
proto.constructor.createProperty(name, options);
};
/**
* A property decorator which creates a reactive property that reflects a
* corresponding attribute value. When a decorated property is set
* the element will update and render. A [[`PropertyDeclaration`]] may
* optionally be supplied to configure property features.
*
* This decorator should only be used for public fields. As public fields,
* properties should be considered as primarily settable by element users,
* either via attribute or the property itself.
*
* Generally, properties that are changed by the element should be private or
* protected fields and should use the [[`state`]] decorator.
*
* However, sometimes element code does need to set a public property. This
* should typically only be done in response to user interaction, and an event
* should be fired informing the user; for example, a checkbox sets its
* `checked` property when clicked and fires a `changed` event. Mutating public
* properties should typically not be done for non-primitive (object or array)
* properties. In other cases when an element needs to manage state, a private
* property decorated via the [[`state`]] decorator should be used. When needed,
* state properties can be initialized via public properties to facilitate
* complex interactions.
*
* ```ts
* class MyElement {
* @property({ type: Boolean })
* clicked = false;
* }
* ```
* @category Decorator
* @ExportDecoratedItems
*/
function property(options) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
return (protoOrDescriptor, name) => name !== undefined
? legacyProperty(options, protoOrDescriptor, name)
: standardProperty(options, protoOrDescriptor);
}
//# sourceMappingURL=property.js.map
/***/ }),
/***/ "./node_modules/@lit/reactive-element/development/decorators/query-all.js":
/*!********************************************************************************!*\
!*** ./node_modules/@lit/reactive-element/development/decorators/query-all.js ***!
\********************************************************************************/
/***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "queryAll": () => (/* binding */ queryAll)
/* harmony export */ });
/* harmony import */ var _base_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./base.js */ "./node_modules/@lit/reactive-element/development/decorators/base.js");
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
/**
* A property decorator that converts a class property into a getter
* that executes a querySelectorAll on the element's renderRoot.
*
* @param selector A DOMString containing one or more selectors to match.
*
* See:
* https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll
*
* ```ts
* class MyElement {
* @queryAll('div')
* divs;
*
* render() {
* return html`
* <div id="first"></div>
* <div id="second"></div>
* `;
* }
* }
* ```
* @category Decorator
*/
function queryAll(selector) {
return (0,_base_js__WEBPACK_IMPORTED_MODULE_0__.decorateProperty)({
descriptor: (_name) => ({
get() {
var _a, _b;
return (_b = (_a = this.renderRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(selector)) !== null && _b !== void 0 ? _b : [];
},
enumerable: true,
configurable: true,
}),
});
}
//# sourceMappingURL=query-all.js.map
/***/ }),
/***/ "./node_modules/@lit/reactive-element/development/decorators/query-assigned-elements.js":
/*!**********************************************************************************************!*\
!*** ./node_modules/@lit/reactive-element/development/decorators/query-assigned-elements.js ***!
\**********************************************************************************************/
/***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "queryAssignedElements": () => (/* binding */ queryAssignedElements)
/* harmony export */ });
/* harmony import */ var _base_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./base.js */ "./node_modules/@lit/reactive-element/development/decorators/base.js");
/**
* @license
* Copyright 2021 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
var _a;
/*
* IMPORTANT: For compatibility with tsickle and the Closure JS compiler, all
* property decorators (but not class decorators) in this file that have
* an @ExportDecoratedItems annotation must be defined as a regular function,
* not an arrow function.
*/
/**
* A tiny module scoped polyfill for HTMLSlotElement.assignedElements.
*/
const slotAssignedElements = ((_a = window.HTMLSlotElement) === null || _a === void 0 ? void 0 : _a.prototype.assignedElements) != null
? (slot, opts) => slot.assignedElements(opts)
: (slot, opts) => slot
.assignedNodes(opts)
.filter((node) => node.nodeType === Node.ELEMENT_NODE);
/**
* A property decorator that converts a class property into a getter that
* returns the `assignedElements` of the given `slot`. Provides a declarative
* way to use
* [`slot.assignedElements`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLSlotElement/assignedElements).
*
* Can be passed an optional [[`QueryAssignedElementsOptions`]] object.
*
* Example usage:
* ```ts
* class MyElement {
* @queryAssignedElements({ slot: 'list' })
* listItems!: Array<HTMLElement>;
* @queryAssignedElements()
* unnamedSlotEls!: Array<HTMLElement>;
*
* render() {
* return html`
* <slot name="list"></slot>
* <slot></slot>
* `;
* }
* }
* ```
*
* Note, the type of this property should be annotated as `Array<HTMLElement>`.
*
* @category Decorator
*/
function queryAssignedElements(options) {
const { slot, selector } = options !== null && options !== void 0 ? options : {};
return (0,_base_js__WEBPACK_IMPORTED_MODULE_0__.decorateProperty)({
descriptor: (_name) => ({
get() {
var _a;
const slotSelector = `slot${slot ? `[name=${slot}]` : ':not([name])'}`;
const slotEl = (_a = this.renderRoot) === null || _a === void 0 ? void 0 : _a.querySelector(slotSelector);
const elements = slotEl != null ? slotAssignedElements(slotEl, options) : [];
if (selector) {
return elements.filter((node) => node.matches(selector));
}
return elements;
},
enumerable: true,
configurable: true,
}),
});
}
//# sourceMappingURL=query-assigned-elements.js.map
/***/ }),
/***/ "./node_modules/@lit/reactive-element/development/decorators/query-assigned-nodes.js":
/*!*******************************************************************************************!*\
!*** ./node_modules/@lit/reactive-element/development/decorators/query-assigned-nodes.js ***!
\*******************************************************************************************/
/***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "queryAssignedNodes": () => (/* binding */ queryAssignedNodes)
/* harmony export */ });
/* harmony import */ var _base_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./base.js */ "./node_modules/@lit/reactive-element/development/decorators/base.js");
/* harmony import */ var _query_assigned_elements_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./query-assigned-elements.js */ "./node_modules/@lit/reactive-element/development/decorators/query-assigned-elements.js");
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
/*
* IMPORTANT: For compatibility with tsickle and the Closure JS compiler, all
* property decorators (but not class decorators) in this file that have
* an @ExportDecoratedItems annotation must be defined as a regular function,
* not an arrow function.
*/
function queryAssignedNodes(slotOrOptions, flatten, selector) {
// Normalize the overloaded arguments.
let slot = slotOrOptions;
let assignedNodesOptions;
if (typeof slotOrOptions === 'object') {
slot = slotOrOptions.slot;
assignedNodesOptions = slotOrOptions;
}
else {
assignedNodesOptions = { flatten };
}
// For backwards compatibility, queryAssignedNodes with a selector behaves
// exactly like queryAssignedElements with a selector.
if (selector) {
return (0,_query_assigned_elements_js__WEBPACK_IMPORTED_MODULE_1__.queryAssignedElements)({
slot: slot,
flatten,
selector,
});
}
return (0,_base_js__WEBPACK_IMPORTED_MODULE_0__.decorateProperty)({
descriptor: (_name) => ({
get() {
var _a, _b;
const slotSelector = `slot${slot ? `[name=${slot}]` : ':not([name])'}`;
const slotEl = (_a = this.renderRoot) === null || _a === void 0 ? void 0 : _a.querySelector(slotSelector);
return (_b = slotEl === null || slotEl === void 0 ? void 0 : slotEl.assignedNodes(assignedNodesOptions)) !== null && _b !== void 0 ? _b : [];
},
enumerable: true,
configurable: true,
}),
});
}
//# sourceMappingURL=query-assigned-nodes.js.map
/***/ }),
/***/ "./node_modules/@lit/reactive-element/development/decorators/query-async.js":
/*!**********************************************************************************!*\
!*** ./node_modules/@lit/reactive-element/development/decorators/query-async.js ***!
\**********************************************************************************/
/***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "queryAsync": () => (/* binding */ queryAsync)
/* harmony export */ });
/* harmony import */ var _base_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./base.js */ "./node_modules/@lit/reactive-element/development/decorators/base.js");
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
// Note, in the future, we may extend this decorator to support the use case
// where the queried element may need to do work to become ready to interact
// with (e.g. load some implementation code). If so, we might elect to
// add a second argument defining a function that can be run to make the
// queried element loaded/updated/ready.
/**
* A property decorator that converts a class property into a getter that
* returns a promise that resolves to the result of a querySelector on the
* element's renderRoot done after the element's `updateComplete` promise
* resolves. When the queried property may change with element state, this
* decorator can be used instead of requiring users to await the
* `updateComplete` before accessing the property.
*
* @param selector A DOMString containing one or more selectors to match.
*
* See: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
*
* ```ts
* class MyElement {
* @queryAsync('#first')
* first;
*
* render() {
* return html`
* <div id="first"></div>
* <div id="second"></div>
* `;
* }
* }
*
* // external usage
* async doSomethingWithFirst() {
* (await aMyElement.first).doSomething();
* }
* ```
* @category Decorator
*/
function queryAsync(selector) {
return (0,_base_js__WEBPACK_IMPORTED_MODULE_0__.decorateProperty)({
descriptor: (_name) => ({
async get() {
var _a;
await this.updateComplete;
return (_a = this.renderRoot) === null || _a === void 0 ? void 0 : _a.querySelector(selector);
},
enumerable: true,
configurable: true,
}),
});
}
//# sourceMappingURL=query-async.js.map
/***/ }),
/***/ "./node_modules/@lit/reactive-element/development/decorators/query.js":
/*!****************************************************************************!*\
!*** ./node_modules/@lit/reactive-element/development/decorators/query.js ***!
\****************************************************************************/
/***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "query": () => (/* binding */ query)
/* harmony export */ });
/* harmony import */ var _base_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./base.js */ "./node_modules/@lit/reactive-element/development/decorators/base.js");
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
/**
* A property decorator that converts a class property into a getter that
* executes a querySelector on the element's renderRoot.
*
* @param selector A DOMString containing one or more selectors to match.
* @param cache An optional boolean which when true performs the DOM query only
* once and caches the result.
*
* See: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
*
* ```ts
* class MyElement {
* @query('#first')
* first;
*
* render() {
* return html`
* <div id="first"></div>
* <div id="second"></div>
* `;
* }
* }
* ```
* @category Decorator
*/
function query(selector, cache) {
return (0,_base_js__WEBPACK_IMPORTED_MODULE_0__.decorateProperty)({
descriptor: (name) => {
const descriptor = {
get() {
var _a, _b;
return (_b = (_a = this.renderRoot) === null || _a === void 0 ? void 0 : _a.querySelector(selector)) !== null && _b !== void 0 ? _b : null;
},
enumerable: true,
configurable: true,
};
if (cache) {
const key = typeof name === 'symbol' ? Symbol() : `__${name}`;
descriptor.get = function () {
var _a, _b;
if (this[key] === undefined) {
this[key] = (_b = (_a = this.renderRoot) === null || _a === void 0 ? void 0 : _a.querySelector(selector)) !== null && _b !== void 0 ? _b : null;
}
return this[key];
};
}
return descriptor;
},
});
}
//# sourceMappingURL=query.js.map
/***/ }),
/***/ "./node_modules/@lit/reactive-element/development/decorators/state.js":
/*!****************************************************************************!*\
!*** ./node_modules/@lit/reactive-element/development/decorators/state.js ***!
\****************************************************************************/
/***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "state": () => (/* binding */ state)
/* harmony export */ });
/* harmony import */ var _property_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./property.js */ "./node_modules/@lit/reactive-element/development/decorators/property.js");
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
/*
* IMPORTANT: For compatibility with tsickle and the Closure JS compiler, all
* property decorators (but not class decorators) in this file that have
* an @ExportDecoratedItems annotation must be defined as a regular function,
* not an arrow function.
*/
/**
* Declares a private or protected reactive property that still triggers
* updates to the element when it changes. It does not reflect from the
* corresponding attribute.
*
* Properties declared this way must not be used from HTML or HTML templating
* systems, they're solely for properties internal to the element. These
* properties may be renamed by optimization tools like closure compiler.
* @category Decorator
*/
function state(options) {
return (0,_property_js__WEBPACK_IMPORTED_MODULE_0__.property)({
...options,
state: true,
});
}
//# sourceMappingURL=state.js.map
/***/ }),
/***/ "./node_modules/@lit/reactive-element/development/reactive-element.js":
/*!****************************************************************************!*\
!*** ./node_modules/@lit/reactive-element/development/reactive-element.js ***!
\****************************************************************************/
/***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "CSSResult": () => (/* reexport safe */ _css_tag_js__WEBPACK_IMPORTED_MODULE_0__.CSSResult),
/* harmony export */ "adoptStyles": () => (/* reexport safe */ _css_tag_js__WEBPACK_IMPORTED_MODULE_0__.adoptStyles),
/* harmony export */ "css": () => (/* reexport safe */ _css_tag_js__WEBPACK_IMPORTED_MODULE_0__.css),
/* harmony export */ "getCompatibleStyle": () => (/* reexport safe */ _css_tag_js__WEBPACK_IMPORTED_MODULE_0__.getCompatibleStyle),
/* harmony export */ "supportsAdoptingStyleSheets": () => (/* reexport safe */ _css_tag_js__WEBPACK_IMPORTED_MODULE_0__.supportsAdoptingStyleSheets),
/* harmony export */ "unsafeCSS": () => (/* reexport safe */ _css_tag_js__WEBPACK_IMPORTED_MODULE_0__.unsafeCSS),
/* harmony export */ "defaultConverter": () => (/* binding */ defaultConverter),
/* harmony export */ "notEqual": () => (/* binding */ notEqual),
/* harmony export */ "ReactiveElement": () => (/* binding */ ReactiveElement)
/* harmony export */ });
/* harmony import */ var _css_tag_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./css-tag.js */ "./node_modules/@lit/reactive-element/development/css-tag.js");
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
var _a, _b, _c;
var _d;
/**
* Use this module if you want to create your own base class extending
* [[ReactiveElement]].
* @packageDocumentation
*/
const DEV_MODE = true;
let requestUpdateThenable;
let issueWarning;
const trustedTypes = window
.trustedTypes;
// Temporary workaround for https://crbug.com/993268
// Currently, any attribute starting with "on" is considered to be a
// TrustedScript source. Such boolean attributes must be set to the equivalent
// trusted emptyScript value.
const emptyStringForBooleanAttribute = trustedTypes
? trustedTypes.emptyScript
: '';
const polyfillSupport = DEV_MODE
? window.reactiveElementPolyfillSupportDevMode
: window.reactiveElementPolyfillSupport;
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);
}
};
issueWarning('dev-mode', `Lit is in dev mode. Not recommended for production!`);
// Issue polyfill support warning.
if (((_b = window.ShadyDOM) === null || _b === void 0 ? void 0 : _b.inUse) && polyfillSupport === undefined) {
issueWarning('polyfill-support-missing', `Shadow DOM is being polyfilled via \`ShadyDOM\` but ` +
`the \`polyfill-support\` module has not been loaded.`);
}
requestUpdateThenable = (name) => ({
then: (onfulfilled, _onrejected) => {
issueWarning('request-update-promise', `The \`requestUpdate\` method should no longer return a Promise but ` +
`does so on \`${name}\`. Use \`updateComplete\` instead.`);
if (onfulfilled !== undefined) {
onfulfilled(false);
}
},
});
}
/*
* When using Closure Compiler, JSCompiler_renameProperty(property, object) is
* replaced at compile time by the munged name for object[property]. We cannot
* alias this function, so we have to use a small shim that has the same
* behavior when not compiling.
*/
/*@__INLINE__*/
const JSCompiler_renameProperty = (prop, _obj) => prop;
const defaultConverter = {
toAttribute(value, type) {
switch (type) {
case Boolean:
value = value ? emptyStringForBooleanAttribute : null;
break;
case Object:
case Array:
// if the value is `null` or `undefined` pass this through
// to allow removing/no change behavior.
value = value == null ? value : JSON.stringify(value);
break;
}
return value;
},
fromAttribute(value, type) {
let fromValue = value;
switch (type) {
case Boolean:
fromValue = value !== null;
break;
case Number:
fromValue = value === null ? null : Number(value);
break;
case Object:
case Array:
// Do *not* generate exception when invalid JSON is set as elements
// don't normally complain on being mis-configured.
// TODO(sorvell): Do generate exception in *dev mode*.
try {
// Assert to adhere to Bazel's "must type assert JSON parse" rule.
fromValue = JSON.parse(value);
}
catch (e) {
fromValue = null;
}
break;
}
return fromValue;
},
};
/**
* Change function that returns true if `value` is different from `oldValue`.
* This method is used as the default for a property's `hasChanged` function.
*/
const notEqual = (value, old) => {
// This ensures (old==NaN, value==NaN) always returns false
return old !== value && (old === old || value === value);
};
const defaultPropertyDeclaration = {
attribute: true,
type: String,
converter: defaultConverter,
reflect: false,
hasChanged: notEqual,
};
/**
* The Closure JS Compiler doesn't currently have good support for static
* property semantics where "this" is dynamic (e.g.
* https://github.com/google/closure-compiler/issues/3177 and others) so we use
* this hack to bypass any rewriting by the compiler.
*/
const finalized = 'finalized';
/**
* Base element class which manages element properties and attributes. When
* properties change, the `update` method is asynchronously called. This method
* should be supplied by subclassers to render updates as desired.
* @noInheritDoc
*/
class ReactiveElement extends HTMLElement {
constructor() {
super();
this.__instanceProperties = new Map();
/**
* True if there is a pending update as a result of calling `requestUpdate()`.
* Should only be read.
* @category updates
*/
this.isUpdatePending = false;
/**
* Is set to `true` after the first update. The element code cannot assume
* that `renderRoot` exists before the element `hasUpdated`.
* @category updates
*/
this.hasUpdated = false;
/**
* Name of currently reflecting property
*/
this.__reflectingProperty = null;
this._initialize();
}
/**
* Adds an initializer function to the class that is called during instance
* construction.
*
* This is useful for code that runs against a `ReactiveElement`
* subclass, such as a decorator, that needs to do work for each
* instance, such as setting up a `ReactiveController`.
*
* ```ts
* const myDecorator = (target: typeof ReactiveElement, key: string) => {
* target.addInitializer((instance: ReactiveElement) => {
* // This is run during construction of the element
* new MyController(instance);
* });
* }
* ```
*
* Decorating a field will then cause each instance to run an initializer
* that adds a controller:
*
* ```ts
* class MyElement extends LitElement {
* @myDecorator foo;
* }
* ```
*
* Initializers are stored per-constructor. Adding an initializer to a
* subclass does not add it to a superclass. Since initializers are run in
* constructors, initializers will run in order of the class hierarchy,
* starting with superclasses and progressing to the instance's class.
*
* @nocollapse
*/
static addInitializer(initializer) {
var _a;
(_a = this._initializers) !== null && _a !== void 0 ? _a : (this._initializers = []);
this._initializers.push(initializer);
}
/**
* Returns a list of attributes corresponding to the registered properties.
* @nocollapse
* @category attributes
*/
static get observedAttributes() {
// note: piggy backing on this to ensure we're finalized.
this.finalize();
const attributes = [];
// Use forEach so this works even if for/of loops are compiled to for loops
// expecting arrays
this.elementProperties.forEach((v, p) => {
const attr = this.__attributeNameForProperty(p, v);
if (attr !== undefined) {
this.__attributeToPropertyMap.set(attr, p);
attributes.push(attr);
}
});
return attributes;
}
/**
* Creates a property accessor on the element prototype if one does not exist
* and stores a `PropertyDeclaration` for the property with the given options.
* The property setter calls the property's `hasChanged` property option
* or uses a strict identity check to determine whether or not to request
* an update.
*
* This method may be overridden to customize properties; however,
* when doing so, it's important to call `super.createProperty` to ensure
* the property is setup correctly. This method calls
* `getPropertyDescriptor` internally to get a descriptor to install.
* To customize what properties do when they are get or set, override
* `getPropertyDescriptor`. To customize the options for a property,
* implement `createProperty` like this:
*
* ```ts
* static createProperty(name, options) {
* options = Object.assign(options, {myOption: true});
* super.createProperty(name, options);
* }
* ```
*
* @nocollapse
* @category properties
*/
static createProperty(name, options = defaultPropertyDeclaration) {
var _a;
// if this is a state property, force the attribute to false.
if (options.state) {
// Cast as any since this is readonly.
// eslint-disable-next-line @typescript-eslint/no-explicit-any
options.attribute = false;
}
// Note, since this can be called by the `@property` decorator which
// is called before `finalize`, we ensure finalization has been kicked off.
this.finalize();
this.elementProperties.set(name, options);
// Do not generate an accessor if the prototype already has one, since
// it would be lost otherwise and that would never be the user's intention;
// Instead, we expect users to call `requestUpdate` themselves from
// user-defined accessors. Note that if the super has an accessor we will
// still overwrite it
if (!options.noAccessor && !this.prototype.hasOwnProperty(name)) {
const key = typeof name === 'symbol' ? Symbol() : `__${name}`;
const descriptor = this.getPropertyDescriptor(name, key, options);
if (descriptor !== undefined) {
Object.defineProperty(this.prototype, name, descriptor);
if (DEV_MODE) {
// If this cla