Last active
February 16, 2024 21:25
-
-
Save ekashida/370d950afd8087ff36e4aaaa1689734d to your computer and use it in GitHub Desktop.
lit-all.min.js after disabling terser, removing comments, and removing the exports (b779807a82649b5128eb754b77b7b3cb4c7c1f98)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const NODE_MODE$1 = false; | |
const global$2 = globalThis; | |
const supportsAdoptingStyleSheets = global$2.ShadowRoot && | |
(global$2.ShadyCSS === undefined || global$2.ShadyCSS.nativeShadow) && | |
'adoptedStyleSheets' in Document.prototype && | |
'replace' in CSSStyleSheet.prototype; | |
const constructionToken = Symbol(); | |
const cssTagCache = new WeakMap(); | |
class CSSResult { | |
constructor(cssText, strings, safeToken) { | |
this['_$cssResult$'] = true; | |
if (safeToken !== constructionToken) { | |
throw new Error('CSSResult is not constructable. Use `unsafeCSS` or `css` instead.'); | |
} | |
this.cssText = cssText; | |
this._strings = strings; | |
} | |
get styleSheet() { | |
let styleSheet = this._styleSheet; | |
const strings = this._strings; | |
if (supportsAdoptingStyleSheets && styleSheet === undefined) { | |
const cacheable = strings !== undefined && strings.length === 1; | |
if (cacheable) { | |
styleSheet = cssTagCache.get(strings); | |
} | |
if (styleSheet === undefined) { | |
(this._styleSheet = styleSheet = new CSSStyleSheet()).replaceSync(this.cssText); | |
if (cacheable) { | |
cssTagCache.set(strings, styleSheet); | |
} | |
} | |
} | |
return styleSheet; | |
} | |
toString() { | |
return this.cssText; | |
} | |
} | |
const textFromCSSResult = (value) => { | |
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.`); | |
} | |
}; | |
const unsafeCSS = (value) => new CSSResult(typeof value === 'string' ? value : String(value), undefined, constructionToken); | |
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, strings, constructionToken); | |
}; | |
const adoptStyles = (renderRoot, styles) => { | |
if (supportsAdoptingStyleSheets) { | |
renderRoot.adoptedStyleSheets = styles.map((s) => s instanceof CSSStyleSheet ? s : s.styleSheet); | |
} | |
else { | |
for (const s of styles) { | |
const style = document.createElement('style'); | |
const nonce = global$2['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 || | |
(NODE_MODE$1 ) | |
? (s) => s | |
: (s) => s instanceof CSSStyleSheet ? cssResultFromStyleSheet(s) : s; | |
const { is, defineProperty, getOwnPropertyDescriptor, getOwnPropertyNames, getOwnPropertySymbols, getPrototypeOf, } = Object; | |
const global$1 = globalThis; | |
const trustedTypes$1 = global$1 | |
.trustedTypes; | |
const emptyStringForBooleanAttribute = trustedTypes$1 | |
? trustedTypes$1.emptyScript | |
: ''; | |
const polyfillSupport$2 = global$1.reactiveElementPolyfillSupport; | |
const debugLogEvent = undefined; | |
const JSCompiler_renameProperty$1 = (prop, _obj) => prop; | |
const defaultConverter = { | |
toAttribute(value, type) { | |
switch (type) { | |
case Boolean: | |
value = value ? emptyStringForBooleanAttribute : null; | |
break; | |
case Object: | |
case Array: | |
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: | |
try { | |
fromValue = JSON.parse(value); | |
} | |
catch (e) { | |
fromValue = null; | |
} | |
break; | |
} | |
return fromValue; | |
}, | |
}; | |
const notEqual = (value, old) => !is(value, old); | |
const defaultPropertyDeclaration = { | |
attribute: true, | |
type: String, | |
converter: defaultConverter, | |
reflect: false, | |
hasChanged: notEqual, | |
}; | |
Symbol.metadata ??= Symbol('metadata'); | |
global$1.litPropertyMetadata ??= new WeakMap(); | |
class ReactiveElement | |
// | |
extends HTMLElement { | |
static addInitializer(initializer) { | |
this.__prepare(); | |
(this._initializers ??= []).push(initializer); | |
} | |
static get observedAttributes() { | |
this.finalize(); | |
return (this.__attributeToPropertyMap && [...this.__attributeToPropertyMap.keys()]); | |
} | |
static createProperty(name, options = defaultPropertyDeclaration) { | |
if (options.state) { | |
options.attribute = false; | |
} | |
this.__prepare(); | |
this.elementProperties.set(name, options); | |
if (!options.noAccessor) { | |
const key = Symbol(); | |
const descriptor = this.getPropertyDescriptor(name, key, options); | |
if (descriptor !== undefined) { | |
defineProperty(this.prototype, name, descriptor); | |
} | |
} | |
} | |
static getPropertyDescriptor(name, key, options) { | |
const { get, set } = getOwnPropertyDescriptor(this.prototype, name) ?? { | |
get() { | |
return this[key]; | |
}, | |
set(v) { | |
this[key] = v; | |
}, | |
}; | |
return { | |
get() { | |
return get?.call(this); | |
}, | |
set(value) { | |
const oldValue = get?.call(this); | |
set.call(this, value); | |
this.requestUpdate(name, oldValue, options); | |
}, | |
configurable: true, | |
enumerable: true, | |
}; | |
} | |
static getPropertyOptions(name) { | |
return this.elementProperties.get(name) ?? defaultPropertyDeclaration; | |
} | |
static __prepare() { | |
if (this.hasOwnProperty(JSCompiler_renameProperty$1('elementProperties'))) { | |
return; | |
} | |
const superCtor = getPrototypeOf(this); | |
superCtor.finalize(); | |
if (superCtor._initializers !== undefined) { | |
this._initializers = [...superCtor._initializers]; | |
} | |
this.elementProperties = new Map(superCtor.elementProperties); | |
} | |
static finalize() { | |
if (this.hasOwnProperty(JSCompiler_renameProperty$1('finalized'))) { | |
return; | |
} | |
this.finalized = true; | |
this.__prepare(); | |
if (this.hasOwnProperty(JSCompiler_renameProperty$1('properties'))) { | |
const props = this.properties; | |
const propKeys = [ | |
...getOwnPropertyNames(props), | |
...getOwnPropertySymbols(props), | |
]; | |
for (const p of propKeys) { | |
this.createProperty(p, props[p]); | |
} | |
} | |
const metadata = this[Symbol.metadata]; | |
if (metadata !== null) { | |
const properties = litPropertyMetadata.get(metadata); | |
if (properties !== undefined) { | |
for (const [p, options] of properties) { | |
this.elementProperties.set(p, options); | |
} | |
} | |
} | |
this.__attributeToPropertyMap = new Map(); | |
for (const [p, options] of this.elementProperties) { | |
const attr = this.__attributeNameForProperty(p, options); | |
if (attr !== undefined) { | |
this.__attributeToPropertyMap.set(attr, p); | |
} | |
} | |
this.elementStyles = this.finalizeStyles(this.styles); | |
} | |
static finalizeStyles(styles) { | |
const elementStyles = []; | |
if (Array.isArray(styles)) { | |
const set = new Set(styles.flat(Infinity).reverse()); | |
for (const s of set) { | |
elementStyles.unshift(getCompatibleStyle(s)); | |
} | |
} | |
else if (styles !== undefined) { | |
elementStyles.push(getCompatibleStyle(styles)); | |
} | |
return elementStyles; | |
} | |
static __attributeNameForProperty(name, options) { | |
const attribute = options.attribute; | |
return attribute === false | |
? undefined | |
: typeof attribute === 'string' | |
? attribute | |
: typeof name === 'string' | |
? name.toLowerCase() | |
: undefined; | |
} | |
constructor() { | |
super(); | |
this.__instanceProperties = undefined; | |
this.isUpdatePending = false; | |
this.hasUpdated = false; | |
this.__reflectingProperty = null; | |
this.__initialize(); | |
} | |
__initialize() { | |
this.__updatePromise = new Promise((res) => (this.enableUpdating = res)); | |
this._$changedProperties = new Map(); | |
this.__saveInstanceProperties(); | |
this.requestUpdate(); | |
this.constructor._initializers?.forEach((i) => i(this)); | |
} | |
addController(controller) { | |
(this.__controllers ??= new Set()).add(controller); | |
if (this.renderRoot !== undefined && this.isConnected) { | |
controller.hostConnected?.(); | |
} | |
} | |
removeController(controller) { | |
this.__controllers?.delete(controller); | |
} | |
__saveInstanceProperties() { | |
const instanceProperties = new Map(); | |
const elementProperties = this.constructor | |
.elementProperties; | |
for (const p of elementProperties.keys()) { | |
if (this.hasOwnProperty(p)) { | |
instanceProperties.set(p, this[p]); | |
delete this[p]; | |
} | |
} | |
if (instanceProperties.size > 0) { | |
this.__instanceProperties = instanceProperties; | |
} | |
} | |
createRenderRoot() { | |
const renderRoot = this.shadowRoot ?? | |
this.attachShadow(this.constructor.shadowRootOptions); | |
adoptStyles(renderRoot, this.constructor.elementStyles); | |
return renderRoot; | |
} | |
connectedCallback() { | |
this.renderRoot ??= | |
this.createRenderRoot(); | |
this.enableUpdating(true); | |
this.__controllers?.forEach((c) => c.hostConnected?.()); | |
} | |
enableUpdating(_requestedUpdate) { } | |
disconnectedCallback() { | |
this.__controllers?.forEach((c) => c.hostDisconnected?.()); | |
} | |
attributeChangedCallback(name, _old, value) { | |
this._$attributeToProperty(name, value); | |
} | |
__propertyToAttribute(name, value) { | |
const elemProperties = this.constructor.elementProperties; | |
const options = elemProperties.get(name); | |
const attr = this.constructor.__attributeNameForProperty(name, options); | |
if (attr !== undefined && options.reflect === true) { | |
const converter = options.converter?.toAttribute !== | |
undefined | |
? options.converter | |
: defaultConverter; | |
const attrValue = converter.toAttribute(value, options.type); | |
this.__reflectingProperty = name; | |
if (attrValue == null) { | |
this.removeAttribute(attr); | |
} | |
else { | |
this.setAttribute(attr, attrValue); | |
} | |
this.__reflectingProperty = null; | |
} | |
} | |
_$attributeToProperty(name, value) { | |
const ctor = this.constructor; | |
const propName = ctor.__attributeToPropertyMap.get(name); | |
if (propName !== undefined && this.__reflectingProperty !== propName) { | |
const options = ctor.getPropertyOptions(propName); | |
const converter = typeof options.converter === 'function' | |
? { fromAttribute: options.converter } | |
: options.converter?.fromAttribute !== undefined | |
? options.converter | |
: defaultConverter; | |
this.__reflectingProperty = propName; | |
this[propName] = converter.fromAttribute(value, options.type | |
); | |
this.__reflectingProperty = null; | |
} | |
} | |
requestUpdate(name, oldValue, options) { | |
if (name !== undefined) { | |
options ??= this.constructor.getPropertyOptions(name); | |
const hasChanged = options.hasChanged ?? notEqual; | |
const newValue = this[name]; | |
if (hasChanged(newValue, oldValue)) { | |
this._$changeProperty(name, oldValue, options); | |
} | |
else { | |
return; | |
} | |
} | |
if (this.isUpdatePending === false) { | |
this.__updatePromise = this.__enqueueUpdate(); | |
} | |
} | |
_$changeProperty(name, oldValue, options) { | |
if (!this._$changedProperties.has(name)) { | |
this._$changedProperties.set(name, oldValue); | |
} | |
if (options.reflect === true && this.__reflectingProperty !== name) { | |
(this.__reflectingProperties ??= new Set()).add(name); | |
} | |
} | |
async __enqueueUpdate() { | |
this.isUpdatePending = true; | |
try { | |
await this.__updatePromise; | |
} | |
catch (e) { | |
Promise.reject(e); | |
} | |
const result = this.scheduleUpdate(); | |
if (result != null) { | |
await result; | |
} | |
return !this.isUpdatePending; | |
} | |
scheduleUpdate() { | |
const result = this.performUpdate(); | |
return result; | |
} | |
performUpdate() { | |
if (!this.isUpdatePending) { | |
return; | |
} | |
debugLogEvent?.({ kind: 'update' }); | |
if (!this.hasUpdated) { | |
this.renderRoot ??= | |
this.createRenderRoot(); | |
if (this.__instanceProperties) { | |
for (const [p, value] of this.__instanceProperties) { | |
this[p] = value; | |
} | |
this.__instanceProperties = undefined; | |
} | |
const elementProperties = this.constructor | |
.elementProperties; | |
if (elementProperties.size > 0) { | |
for (const [p, options] of elementProperties) { | |
if (options.wrapped === true && | |
!this._$changedProperties.has(p) && | |
this[p] !== undefined) { | |
this._$changeProperty(p, this[p], options); | |
} | |
} | |
} | |
} | |
let shouldUpdate = false; | |
const changedProperties = this._$changedProperties; | |
try { | |
shouldUpdate = this.shouldUpdate(changedProperties); | |
if (shouldUpdate) { | |
this.willUpdate(changedProperties); | |
this.__controllers?.forEach((c) => c.hostUpdate?.()); | |
this.update(changedProperties); | |
} | |
else { | |
this.__markUpdated(); | |
} | |
} | |
catch (e) { | |
shouldUpdate = false; | |
this.__markUpdated(); | |
throw e; | |
} | |
if (shouldUpdate) { | |
this._$didUpdate(changedProperties); | |
} | |
} | |
willUpdate(_changedProperties) { } | |
_$didUpdate(changedProperties) { | |
this.__controllers?.forEach((c) => c.hostUpdated?.()); | |
if (!this.hasUpdated) { | |
this.hasUpdated = true; | |
this.firstUpdated(changedProperties); | |
} | |
this.updated(changedProperties); | |
} | |
__markUpdated() { | |
this._$changedProperties = new Map(); | |
this.isUpdatePending = false; | |
} | |
get updateComplete() { | |
return this.getUpdateComplete(); | |
} | |
getUpdateComplete() { | |
return this.__updatePromise; | |
} | |
shouldUpdate(_changedProperties) { | |
return true; | |
} | |
update(_changedProperties) { | |
this.__reflectingProperties &&= this.__reflectingProperties.forEach((p) => this.__propertyToAttribute(p, this[p])); | |
this.__markUpdated(); | |
} | |
updated(_changedProperties) { } | |
firstUpdated(_changedProperties) { } | |
} | |
ReactiveElement.elementStyles = []; | |
ReactiveElement.shadowRootOptions = { mode: 'open' }; | |
ReactiveElement[JSCompiler_renameProperty$1('elementProperties')] = new Map(); | |
ReactiveElement[JSCompiler_renameProperty$1('finalized')] = new Map(); | |
polyfillSupport$2?.({ ReactiveElement }); | |
(global$1.reactiveElementVersions ??= []).push('2.0.4'); | |
const global = globalThis; | |
const wrap$1 = (node) => node; | |
const trustedTypes = global.trustedTypes; | |
const policy = trustedTypes | |
? trustedTypes.createPolicy('lit-html', { | |
createHTML: (s) => s, | |
}) | |
: undefined; | |
const boundAttributeSuffix = '$lit$'; | |
const marker = `lit$${String(Math.random()).slice(9)}$`; | |
const markerMatch = '?' + marker; | |
const nodeMarker = `<${markerMatch}>`; | |
const d = document; | |
const createMarker$1 = () => d.createComment(''); | |
const isPrimitive$1 = (value) => value === null || (typeof value != 'object' && typeof value != 'function'); | |
const isArray = Array.isArray; | |
const isIterable = (value) => isArray(value) || | |
typeof value?.[Symbol.iterator] === 'function'; | |
const SPACE_CHAR = `[ \t\n\f\r]`; | |
const ATTR_VALUE_CHAR = `[^ \t\n\f\r"'\`<>=]`; | |
const NAME_CHAR = `[^\\s"'>=/]`; | |
const textEndRegex = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g; | |
const COMMENT_START = 1; | |
const TAG_NAME = 2; | |
const DYNAMIC_TAG_NAME = 3; | |
const commentEndRegex = /-->/g; | |
const comment2EndRegex = />/g; | |
const tagEndRegex = new RegExp(`>|${SPACE_CHAR}(?:(${NAME_CHAR}+)(${SPACE_CHAR}*=${SPACE_CHAR}*(?:${ATTR_VALUE_CHAR}|("|')|))|$)`, 'g'); | |
const ENTIRE_MATCH = 0; | |
const ATTRIBUTE_NAME = 1; | |
const SPACES_AND_EQUALS = 2; | |
const QUOTE_CHAR = 3; | |
const singleQuoteAttrEndRegex = /'/g; | |
const doubleQuoteAttrEndRegex = /"/g; | |
const rawTextElement = /^(?:script|style|textarea|title)$/i; | |
const HTML_RESULT$1 = 1; | |
const SVG_RESULT$1 = 2; | |
const ATTRIBUTE_PART = 1; | |
const CHILD_PART = 2; | |
const PROPERTY_PART = 3; | |
const BOOLEAN_ATTRIBUTE_PART = 4; | |
const EVENT_PART = 5; | |
const ELEMENT_PART = 6; | |
const COMMENT_PART = 7; | |
const tag = (type) => (strings, ...values) => { | |
return { | |
['_$litType$']: type, | |
strings, | |
values, | |
}; | |
}; | |
const html$1 = tag(HTML_RESULT$1); | |
const svg$1 = tag(SVG_RESULT$1); | |
const noChange = Symbol.for('lit-noChange'); | |
const nothing = Symbol.for('lit-nothing'); | |
const templateCache = new WeakMap(); | |
const walker = d.createTreeWalker(d, 129 ); | |
function trustFromTemplateString(tsa, stringFromTSA) { | |
if (!Array.isArray(tsa) || !tsa.hasOwnProperty('raw')) { | |
let message = 'invalid template strings array'; | |
throw new Error(message); | |
} | |
return policy !== undefined | |
? policy.createHTML(stringFromTSA) | |
: stringFromTSA; | |
} | |
const getTemplateHtml = (strings, type) => { | |
const l = strings.length - 1; | |
const attrNames = []; | |
let html = type === SVG_RESULT$1 ? '<svg>' : ''; | |
let rawTextEndRegex; | |
let regex = textEndRegex; | |
for (let i = 0; i < l; i++) { | |
const s = strings[i]; | |
let attrNameEndIndex = -1; | |
let attrName; | |
let lastIndex = 0; | |
let match; | |
while (lastIndex < s.length) { | |
regex.lastIndex = lastIndex; | |
match = regex.exec(s); | |
if (match === null) { | |
break; | |
} | |
lastIndex = regex.lastIndex; | |
if (regex === textEndRegex) { | |
if (match[COMMENT_START] === '!--') { | |
regex = commentEndRegex; | |
} | |
else if (match[COMMENT_START] !== undefined) { | |
regex = comment2EndRegex; | |
} | |
else if (match[TAG_NAME] !== undefined) { | |
if (rawTextElement.test(match[TAG_NAME])) { | |
rawTextEndRegex = new RegExp(`</${match[TAG_NAME]}`, 'g'); | |
} | |
regex = tagEndRegex; | |
} | |
else if (match[DYNAMIC_TAG_NAME] !== undefined) { | |
regex = tagEndRegex; | |
} | |
} | |
else if (regex === tagEndRegex) { | |
if (match[ENTIRE_MATCH] === '>') { | |
regex = rawTextEndRegex ?? textEndRegex; | |
attrNameEndIndex = -1; | |
} | |
else if (match[ATTRIBUTE_NAME] === undefined) { | |
attrNameEndIndex = -2; | |
} | |
else { | |
attrNameEndIndex = regex.lastIndex - match[SPACES_AND_EQUALS].length; | |
attrName = match[ATTRIBUTE_NAME]; | |
regex = | |
match[QUOTE_CHAR] === undefined | |
? tagEndRegex | |
: match[QUOTE_CHAR] === '"' | |
? doubleQuoteAttrEndRegex | |
: singleQuoteAttrEndRegex; | |
} | |
} | |
else if (regex === doubleQuoteAttrEndRegex || | |
regex === singleQuoteAttrEndRegex) { | |
regex = tagEndRegex; | |
} | |
else if (regex === commentEndRegex || regex === comment2EndRegex) { | |
regex = textEndRegex; | |
} | |
else { | |
regex = tagEndRegex; | |
rawTextEndRegex = undefined; | |
} | |
} | |
const end = regex === tagEndRegex && strings[i + 1].startsWith('/>') ? ' ' : ''; | |
html += | |
regex === textEndRegex | |
? s + nodeMarker | |
: attrNameEndIndex >= 0 | |
? (attrNames.push(attrName), | |
s.slice(0, attrNameEndIndex) + | |
boundAttributeSuffix + | |
s.slice(attrNameEndIndex)) + | |
marker + | |
end | |
: s + marker + (attrNameEndIndex === -2 ? i : end); | |
} | |
const htmlResult = html + (strings[l] || '<?>') + (type === SVG_RESULT$1 ? '</svg>' : ''); | |
return [trustFromTemplateString(strings, htmlResult), attrNames]; | |
}; | |
class Template { | |
constructor( | |
{ strings, ['_$litType$']: type }, options) { | |
this.parts = []; | |
let node; | |
let nodeIndex = 0; | |
let attrNameIndex = 0; | |
const partCount = strings.length - 1; | |
const parts = this.parts; | |
const [html, attrNames] = getTemplateHtml(strings, type); | |
this.el = Template.createElement(html, options); | |
walker.currentNode = this.el.content; | |
if (type === SVG_RESULT$1) { | |
const svgElement = this.el.content.firstChild; | |
svgElement.replaceWith(...svgElement.childNodes); | |
} | |
while ((node = walker.nextNode()) !== null && parts.length < partCount) { | |
if (node.nodeType === 1) { | |
if (node.hasAttributes()) { | |
for (const name of node.getAttributeNames()) { | |
if (name.endsWith(boundAttributeSuffix)) { | |
const realName = attrNames[attrNameIndex++]; | |
const value = node.getAttribute(name); | |
const statics = value.split(marker); | |
const m = /([.?@])?(.*)/.exec(realName); | |
parts.push({ | |
type: ATTRIBUTE_PART, | |
index: nodeIndex, | |
name: m[2], | |
strings: statics, | |
ctor: m[1] === '.' | |
? PropertyPart | |
: m[1] === '?' | |
? BooleanAttributePart | |
: m[1] === '@' | |
? EventPart | |
: AttributePart, | |
}); | |
node.removeAttribute(name); | |
} | |
else if (name.startsWith(marker)) { | |
parts.push({ | |
type: ELEMENT_PART, | |
index: nodeIndex, | |
}); | |
node.removeAttribute(name); | |
} | |
} | |
} | |
if (rawTextElement.test(node.tagName)) { | |
const strings = node.textContent.split(marker); | |
const lastIndex = strings.length - 1; | |
if (lastIndex > 0) { | |
node.textContent = trustedTypes | |
? trustedTypes.emptyScript | |
: ''; | |
for (let i = 0; i < lastIndex; i++) { | |
node.append(strings[i], createMarker$1()); | |
walker.nextNode(); | |
parts.push({ type: CHILD_PART, index: ++nodeIndex }); | |
} | |
node.append(strings[lastIndex], createMarker$1()); | |
} | |
} | |
} | |
else if (node.nodeType === 8) { | |
const data = node.data; | |
if (data === markerMatch) { | |
parts.push({ type: CHILD_PART, index: nodeIndex }); | |
} | |
else { | |
let i = -1; | |
while ((i = node.data.indexOf(marker, i + 1)) !== -1) { | |
parts.push({ type: COMMENT_PART, index: nodeIndex }); | |
i += marker.length - 1; | |
} | |
} | |
} | |
nodeIndex++; | |
} | |
} | |
static createElement(html, _options) { | |
const el = d.createElement('template'); | |
el.innerHTML = html; | |
return el; | |
} | |
} | |
function resolveDirective(part, value, parent = part, attributeIndex) { | |
if (value === noChange) { | |
return value; | |
} | |
let currentDirective = attributeIndex !== undefined | |
? parent.__directives?.[attributeIndex] | |
: parent.__directive; | |
const nextDirectiveConstructor = isPrimitive$1(value) | |
? undefined | |
: | |
value['_$litDirective$']; | |
if (currentDirective?.constructor !== nextDirectiveConstructor) { | |
currentDirective?.['_$notifyDirectiveConnectionChanged']?.(false); | |
if (nextDirectiveConstructor === undefined) { | |
currentDirective = undefined; | |
} | |
else { | |
currentDirective = new nextDirectiveConstructor(part); | |
currentDirective._$initialize(part, parent, attributeIndex); | |
} | |
if (attributeIndex !== undefined) { | |
(parent.__directives ??= [])[attributeIndex] = | |
currentDirective; | |
} | |
else { | |
parent.__directive = currentDirective; | |
} | |
} | |
if (currentDirective !== undefined) { | |
value = resolveDirective(part, currentDirective._$resolve(part, value.values), currentDirective, attributeIndex); | |
} | |
return value; | |
} | |
class TemplateInstance { | |
constructor(template, parent) { | |
this._$parts = []; | |
this._$disconnectableChildren = undefined; | |
this._$template = template; | |
this._$parent = parent; | |
} | |
get parentNode() { | |
return this._$parent.parentNode; | |
} | |
get _$isConnected() { | |
return this._$parent._$isConnected; | |
} | |
_clone(options) { | |
const { el: { content }, parts: parts, } = this._$template; | |
const fragment = (options?.creationScope ?? d).importNode(content, true); | |
walker.currentNode = fragment; | |
let node = walker.nextNode(); | |
let nodeIndex = 0; | |
let partIndex = 0; | |
let templatePart = parts[0]; | |
while (templatePart !== undefined) { | |
if (nodeIndex === templatePart.index) { | |
let part; | |
if (templatePart.type === CHILD_PART) { | |
part = new ChildPart$1(node, node.nextSibling, this, options); | |
} | |
else if (templatePart.type === ATTRIBUTE_PART) { | |
part = new templatePart.ctor(node, templatePart.name, templatePart.strings, this, options); | |
} | |
else if (templatePart.type === ELEMENT_PART) { | |
part = new ElementPart(node, this, options); | |
} | |
this._$parts.push(part); | |
templatePart = parts[++partIndex]; | |
} | |
if (nodeIndex !== templatePart?.index) { | |
node = walker.nextNode(); | |
nodeIndex++; | |
} | |
} | |
walker.currentNode = d; | |
return fragment; | |
} | |
_update(values) { | |
let i = 0; | |
for (const part of this._$parts) { | |
if (part !== undefined) { | |
if (part.strings !== undefined) { | |
part._$setValue(values, part, i); | |
i += part.strings.length - 2; | |
} | |
else { | |
part._$setValue(values[i]); | |
} | |
} | |
i++; | |
} | |
} | |
} | |
class ChildPart$1 { | |
get _$isConnected() { | |
return this._$parent?._$isConnected ?? this.__isConnected; | |
} | |
constructor(startNode, endNode, parent, options) { | |
this.type = CHILD_PART; | |
this._$committedValue = nothing; | |
this._$disconnectableChildren = undefined; | |
this._$startNode = startNode; | |
this._$endNode = endNode; | |
this._$parent = parent; | |
this.options = options; | |
this.__isConnected = options?.isConnected ?? true; | |
} | |
get parentNode() { | |
let parentNode = wrap$1(this._$startNode).parentNode; | |
const parent = this._$parent; | |
if (parent !== undefined && | |
parentNode?.nodeType === 11 ) { | |
parentNode = parent.parentNode; | |
} | |
return parentNode; | |
} | |
get startNode() { | |
return this._$startNode; | |
} | |
get endNode() { | |
return this._$endNode; | |
} | |
_$setValue(value, directiveParent = this) { | |
value = resolveDirective(this, value, directiveParent); | |
if (isPrimitive$1(value)) { | |
if (value === nothing || value == null || value === '') { | |
if (this._$committedValue !== nothing) { | |
this._$clear(); | |
} | |
this._$committedValue = nothing; | |
} | |
else if (value !== this._$committedValue && value !== noChange) { | |
this._commitText(value); | |
} | |
} | |
else if (value['_$litType$'] !== undefined) { | |
this._commitTemplateResult(value); | |
} | |
else if (value.nodeType !== undefined) { | |
this._commitNode(value); | |
} | |
else if (isIterable(value)) { | |
this._commitIterable(value); | |
} | |
else { | |
this._commitText(value); | |
} | |
} | |
_insert(node) { | |
return wrap$1(wrap$1(this._$startNode).parentNode).insertBefore(node, this._$endNode); | |
} | |
_commitNode(value) { | |
if (this._$committedValue !== value) { | |
this._$clear(); | |
this._$committedValue = this._insert(value); | |
} | |
} | |
_commitText(value) { | |
if (this._$committedValue !== nothing && | |
isPrimitive$1(this._$committedValue)) { | |
const node = wrap$1(this._$startNode).nextSibling; | |
node.data = value; | |
} | |
else { | |
{ | |
this._commitNode(d.createTextNode(value)); | |
} | |
} | |
this._$committedValue = value; | |
} | |
_commitTemplateResult(result) { | |
const { values, ['_$litType$']: type } = result; | |
const template = typeof type === 'number' | |
? this._$getTemplate(result) | |
: (type.el === undefined && | |
(type.el = Template.createElement(trustFromTemplateString(type.h, type.h[0]), this.options)), | |
type); | |
if (this._$committedValue?._$template === template) { | |
this._$committedValue._update(values); | |
} | |
else { | |
const instance = new TemplateInstance(template, this); | |
const fragment = instance._clone(this.options); | |
instance._update(values); | |
this._commitNode(fragment); | |
this._$committedValue = instance; | |
} | |
} | |
_$getTemplate(result) { | |
let template = templateCache.get(result.strings); | |
if (template === undefined) { | |
templateCache.set(result.strings, (template = new Template(result))); | |
} | |
return template; | |
} | |
_commitIterable(value) { | |
if (!isArray(this._$committedValue)) { | |
this._$committedValue = []; | |
this._$clear(); | |
} | |
const itemParts = this._$committedValue; | |
let partIndex = 0; | |
let itemPart; | |
for (const item of value) { | |
if (partIndex === itemParts.length) { | |
itemParts.push((itemPart = new ChildPart$1(this._insert(createMarker$1()), this._insert(createMarker$1()), this, this.options))); | |
} | |
else { | |
itemPart = itemParts[partIndex]; | |
} | |
itemPart._$setValue(item); | |
partIndex++; | |
} | |
if (partIndex < itemParts.length) { | |
this._$clear(itemPart && wrap$1(itemPart._$endNode).nextSibling, partIndex); | |
itemParts.length = partIndex; | |
} | |
} | |
_$clear(start = wrap$1(this._$startNode).nextSibling, from) { | |
this._$notifyConnectionChanged?.(false, true, from); | |
while (start && start !== this._$endNode) { | |
const n = wrap$1(start).nextSibling; | |
wrap$1(start).remove(); | |
start = n; | |
} | |
} | |
setConnected(isConnected) { | |
if (this._$parent === undefined) { | |
this.__isConnected = isConnected; | |
this._$notifyConnectionChanged?.(isConnected); | |
} | |
} | |
} | |
class AttributePart { | |
get tagName() { | |
return this.element.tagName; | |
} | |
get _$isConnected() { | |
return this._$parent._$isConnected; | |
} | |
constructor(element, name, strings, parent, options) { | |
this.type = ATTRIBUTE_PART; | |
this._$committedValue = nothing; | |
this._$disconnectableChildren = undefined; | |
this.element = element; | |
this.name = name; | |
this._$parent = parent; | |
this.options = options; | |
if (strings.length > 2 || strings[0] !== '' || strings[1] !== '') { | |
this._$committedValue = new Array(strings.length - 1).fill(new String()); | |
this.strings = strings; | |
} | |
else { | |
this._$committedValue = nothing; | |
} | |
} | |
_$setValue(value, directiveParent = this, valueIndex, noCommit) { | |
const strings = this.strings; | |
let change = false; | |
if (strings === undefined) { | |
value = resolveDirective(this, value, directiveParent, 0); | |
change = | |
!isPrimitive$1(value) || | |
(value !== this._$committedValue && value !== noChange); | |
if (change) { | |
this._$committedValue = value; | |
} | |
} | |
else { | |
const values = value; | |
value = strings[0]; | |
let i, v; | |
for (i = 0; i < strings.length - 1; i++) { | |
v = resolveDirective(this, values[valueIndex + i], directiveParent, i); | |
if (v === noChange) { | |
v = this._$committedValue[i]; | |
} | |
change ||= | |
!isPrimitive$1(v) || v !== this._$committedValue[i]; | |
if (v === nothing) { | |
value = nothing; | |
} | |
else if (value !== nothing) { | |
value += (v ?? '') + strings[i + 1]; | |
} | |
this._$committedValue[i] = v; | |
} | |
} | |
if (change && !noCommit) { | |
this._commitValue(value); | |
} | |
} | |
_commitValue(value) { | |
if (value === nothing) { | |
wrap$1(this.element).removeAttribute(this.name); | |
} | |
else { | |
wrap$1(this.element).setAttribute(this.name, (value ?? '')); | |
} | |
} | |
} | |
class PropertyPart extends AttributePart { | |
constructor() { | |
super(...arguments); | |
this.type = PROPERTY_PART; | |
} | |
_commitValue(value) { | |
this.element[this.name] = value === nothing ? undefined : value; | |
} | |
} | |
class BooleanAttributePart extends AttributePart { | |
constructor() { | |
super(...arguments); | |
this.type = BOOLEAN_ATTRIBUTE_PART; | |
} | |
_commitValue(value) { | |
wrap$1(this.element).toggleAttribute(this.name, !!value && value !== nothing); | |
} | |
} | |
class EventPart extends AttributePart { | |
constructor(element, name, strings, parent, options) { | |
super(element, name, strings, parent, options); | |
this.type = EVENT_PART; | |
} | |
_$setValue(newListener, directiveParent = this) { | |
newListener = | |
resolveDirective(this, newListener, directiveParent, 0) ?? nothing; | |
if (newListener === noChange) { | |
return; | |
} | |
const oldListener = this._$committedValue; | |
const shouldRemoveListener = (newListener === nothing && oldListener !== nothing) || | |
newListener.capture !== | |
oldListener.capture || | |
newListener.once !== | |
oldListener.once || | |
newListener.passive !== | |
oldListener.passive; | |
const shouldAddListener = newListener !== nothing && | |
(oldListener === nothing || shouldRemoveListener); | |
if (shouldRemoveListener) { | |
this.element.removeEventListener(this.name, this, oldListener); | |
} | |
if (shouldAddListener) { | |
this.element.addEventListener(this.name, this, newListener); | |
} | |
this._$committedValue = newListener; | |
} | |
handleEvent(event) { | |
if (typeof this._$committedValue === 'function') { | |
this._$committedValue.call(this.options?.host ?? this.element, event); | |
} | |
else { | |
this._$committedValue.handleEvent(event); | |
} | |
} | |
} | |
class ElementPart { | |
constructor(element, parent, options) { | |
this.element = element; | |
this.type = ELEMENT_PART; | |
this._$disconnectableChildren = undefined; | |
this._$parent = parent; | |
this.options = options; | |
} | |
get _$isConnected() { | |
return this._$parent._$isConnected; | |
} | |
_$setValue(value) { | |
resolveDirective(this, value); | |
} | |
} | |
const _$LH = { | |
_boundAttributeSuffix: boundAttributeSuffix, | |
_marker: marker, | |
_markerMatch: markerMatch, | |
_HTML_RESULT: HTML_RESULT$1, | |
_getTemplateHtml: getTemplateHtml, | |
_TemplateInstance: TemplateInstance, | |
_isIterable: isIterable, | |
_resolveDirective: resolveDirective, | |
_ChildPart: ChildPart$1, | |
_AttributePart: AttributePart, | |
_BooleanAttributePart: BooleanAttributePart, | |
_EventPart: EventPart, | |
_PropertyPart: PropertyPart, | |
_ElementPart: ElementPart, | |
}; | |
const polyfillSupport$1 = global.litHtmlPolyfillSupport; | |
polyfillSupport$1?.(Template, ChildPart$1); | |
(global.litHtmlVersions ??= []).push('3.1.2'); | |
const render = (value, container, options) => { | |
const partOwnerNode = options?.renderBefore ?? container; | |
let part = partOwnerNode['_$litPart$']; | |
if (part === undefined) { | |
const endNode = options?.renderBefore ?? null; | |
partOwnerNode['_$litPart$'] = part = new ChildPart$1(container.insertBefore(createMarker$1(), endNode), endNode, undefined, options ?? {}); | |
} | |
part._$setValue(value); | |
return part; | |
}; | |
const JSCompiler_renameProperty = (prop, _obj) => prop; | |
class LitElement extends ReactiveElement { | |
constructor() { | |
super(...arguments); | |
this.renderOptions = { host: this }; | |
this.__childPart = undefined; | |
} | |
createRenderRoot() { | |
const renderRoot = super.createRenderRoot(); | |
this.renderOptions.renderBefore ??= renderRoot.firstChild; | |
return renderRoot; | |
} | |
update(changedProperties) { | |
const value = this.render(); | |
if (!this.hasUpdated) { | |
this.renderOptions.isConnected = this.isConnected; | |
} | |
super.update(changedProperties); | |
this.__childPart = render(value, this.renderRoot, this.renderOptions); | |
} | |
connectedCallback() { | |
super.connectedCallback(); | |
this.__childPart?.setConnected(true); | |
} | |
disconnectedCallback() { | |
super.disconnectedCallback(); | |
this.__childPart?.setConnected(false); | |
} | |
render() { | |
return noChange; | |
} | |
} | |
LitElement['_$litElement$'] = true; | |
LitElement[JSCompiler_renameProperty('finalized')] = true; | |
globalThis.litElementHydrateSupport?.({ LitElement }); | |
const polyfillSupport = globalThis.litElementPolyfillSupport; | |
polyfillSupport?.({ LitElement }); | |
const _$LE = { | |
_$attributeToProperty: (el, name, value) => { | |
el._$attributeToProperty(name, value); | |
}, | |
_$changedProperties: (el) => el._$changedProperties, | |
}; | |
(globalThis.litElementVersions ??= []).push('4.0.4'); | |
const NODE_MODE = false; | |
const isServer = NODE_MODE; | |
const { _ChildPart: ChildPart } = _$LH; | |
const wrap = (node) => node; | |
const isPrimitive = (value) => value === null || (typeof value != 'object' && typeof value != 'function'); | |
const TemplateResultType = { | |
HTML: 1, | |
SVG: 2, | |
}; | |
const isTemplateResult = (value, type) => type === undefined | |
? | |
value?.['_$litType$'] !== undefined | |
: value?.['_$litType$'] === type; | |
const isCompiledTemplateResult = (value) => { | |
return value?.['_$litType$']?.h != null; | |
}; | |
const isDirectiveResult = (value) => | |
value?.['_$litDirective$'] !== undefined; | |
const getDirectiveClass = (value) => | |
value?.['_$litDirective$']; | |
const isSingleExpression = (part) => part.strings === undefined; | |
const createMarker = () => document.createComment(''); | |
const insertPart = (containerPart, refPart, part) => { | |
const container = wrap(containerPart._$startNode).parentNode; | |
const refNode = refPart === undefined ? containerPart._$endNode : refPart._$startNode; | |
if (part === undefined) { | |
const startNode = wrap(container).insertBefore(createMarker(), refNode); | |
const endNode = wrap(container).insertBefore(createMarker(), refNode); | |
part = new ChildPart(startNode, endNode, containerPart, containerPart.options); | |
} | |
else { | |
const endNode = wrap(part._$endNode).nextSibling; | |
const oldParent = part._$parent; | |
const parentChanged = oldParent !== containerPart; | |
if (parentChanged) { | |
part._$reparentDisconnectables?.(containerPart); | |
part._$parent = containerPart; | |
let newConnectionState; | |
if (part._$notifyConnectionChanged !== undefined && | |
(newConnectionState = containerPart._$isConnected) !== | |
oldParent._$isConnected) { | |
part._$notifyConnectionChanged(newConnectionState); | |
} | |
} | |
if (endNode !== refNode || parentChanged) { | |
let start = part._$startNode; | |
while (start !== endNode) { | |
const n = wrap(start).nextSibling; | |
wrap(container).insertBefore(start, refNode); | |
start = n; | |
} | |
} | |
} | |
return part; | |
}; | |
const setChildPartValue = (part, value, directiveParent = part) => { | |
part._$setValue(value, directiveParent); | |
return part; | |
}; | |
const RESET_VALUE = {}; | |
const setCommittedValue = (part, value = RESET_VALUE) => (part._$committedValue = value); | |
const getCommittedValue = (part) => part._$committedValue; | |
const removePart = (part) => { | |
part._$notifyConnectionChanged?.(false, true); | |
let start = part._$startNode; | |
const end = wrap(part._$endNode).nextSibling; | |
while (start !== end) { | |
const n = wrap(start).nextSibling; | |
wrap(start).remove(); | |
start = n; | |
} | |
}; | |
const clearPart = (part) => { | |
part._$clear(); | |
}; | |
const PartType = { | |
ATTRIBUTE: 1, | |
CHILD: 2, | |
PROPERTY: 3, | |
BOOLEAN_ATTRIBUTE: 4, | |
EVENT: 5, | |
ELEMENT: 6, | |
}; | |
const directive = (c) => (...values) => ({ | |
['_$litDirective$']: c, | |
values, | |
}); | |
class Directive { | |
constructor(_partInfo) { } | |
get _$isConnected() { | |
return this._$parent._$isConnected; | |
} | |
_$initialize(part, parent, attributeIndex) { | |
this.__part = part; | |
this._$parent = parent; | |
this.__attributeIndex = attributeIndex; | |
} | |
_$resolve(part, props) { | |
return this.update(part, props); | |
} | |
update(_part, props) { | |
return this.render(...props); | |
} | |
} | |
const notifyChildrenConnectedChanged = (parent, isConnected) => { | |
const children = parent._$disconnectableChildren; | |
if (children === undefined) { | |
return false; | |
} | |
for (const obj of children) { | |
obj['_$notifyDirectiveConnectionChanged']?.(isConnected, false); | |
notifyChildrenConnectedChanged(obj, isConnected); | |
} | |
return true; | |
}; | |
const removeDisconnectableFromParent = (obj) => { | |
let parent, children; | |
do { | |
if ((parent = obj._$parent) === undefined) { | |
break; | |
} | |
children = parent._$disconnectableChildren; | |
children.delete(obj); | |
obj = parent; | |
} while (children?.size === 0); | |
}; | |
const addDisconnectableToParent = (obj) => { | |
for (let parent; (parent = obj._$parent); obj = parent) { | |
let children = parent._$disconnectableChildren; | |
if (children === undefined) { | |
parent._$disconnectableChildren = children = new Set(); | |
} | |
else if (children.has(obj)) { | |
break; | |
} | |
children.add(obj); | |
installDisconnectAPI(parent); | |
} | |
}; | |
function reparentDisconnectables(newParent) { | |
if (this._$disconnectableChildren !== undefined) { | |
removeDisconnectableFromParent(this); | |
this._$parent = newParent; | |
addDisconnectableToParent(this); | |
} | |
else { | |
this._$parent = newParent; | |
} | |
} | |
function notifyChildPartConnectedChanged(isConnected, isClearingValue = false, fromPartIndex = 0) { | |
const value = this._$committedValue; | |
const children = this._$disconnectableChildren; | |
if (children === undefined || children.size === 0) { | |
return; | |
} | |
if (isClearingValue) { | |
if (Array.isArray(value)) { | |
for (let i = fromPartIndex; i < value.length; i++) { | |
notifyChildrenConnectedChanged(value[i], false); | |
removeDisconnectableFromParent(value[i]); | |
} | |
} | |
else if (value != null) { | |
notifyChildrenConnectedChanged(value, false); | |
removeDisconnectableFromParent(value); | |
} | |
} | |
else { | |
notifyChildrenConnectedChanged(this, isConnected); | |
} | |
} | |
const installDisconnectAPI = (obj) => { | |
if (obj.type == PartType.CHILD) { | |
obj._$notifyConnectionChanged ??= | |
notifyChildPartConnectedChanged; | |
obj._$reparentDisconnectables ??= reparentDisconnectables; | |
} | |
}; | |
class AsyncDirective extends Directive { | |
constructor() { | |
super(...arguments); | |
this._$disconnectableChildren = undefined; | |
} | |
_$initialize(part, parent, attributeIndex) { | |
super._$initialize(part, parent, attributeIndex); | |
addDisconnectableToParent(this); | |
this.isConnected = part._$isConnected; | |
} | |
['_$notifyDirectiveConnectionChanged'](isConnected, isClearingDirective = true) { | |
if (isConnected !== this.isConnected) { | |
this.isConnected = isConnected; | |
if (isConnected) { | |
this.reconnected?.(); | |
} | |
else { | |
this.disconnected?.(); | |
} | |
} | |
if (isClearingDirective) { | |
notifyChildrenConnectedChanged(this, isConnected); | |
removeDisconnectableFromParent(this); | |
} | |
} | |
setValue(value) { | |
if (isSingleExpression(this.__part)) { | |
this.__part._$setValue(value, this); | |
} | |
else { | |
const newValues = [...this.__part._$committedValue]; | |
newValues[this.__attributeIndex] = value; | |
this.__part._$setValue(newValues, this, 0); | |
} | |
} | |
disconnected() { } | |
reconnected() { } | |
} | |
const forAwaitOf = async (iterable, callback) => { | |
for await (const v of iterable) { | |
if ((await callback(v)) === false) { | |
return; | |
} | |
} | |
}; | |
class PseudoWeakRef { | |
constructor(ref) { | |
this._ref = ref; | |
} | |
disconnect() { | |
this._ref = undefined; | |
} | |
reconnect(ref) { | |
this._ref = ref; | |
} | |
deref() { | |
return this._ref; | |
} | |
} | |
class Pauser { | |
constructor() { | |
this._promise = undefined; | |
this._resolve = undefined; | |
} | |
get() { | |
return this._promise; | |
} | |
pause() { | |
this._promise ??= new Promise((resolve) => (this._resolve = resolve)); | |
} | |
resume() { | |
this._resolve?.(); | |
this._promise = this._resolve = undefined; | |
} | |
} | |
class AsyncReplaceDirective extends AsyncDirective { | |
constructor() { | |
super(...arguments); | |
this.__weakThis = new PseudoWeakRef(this); | |
this.__pauser = new Pauser(); | |
} | |
render(value, _mapper) { | |
return noChange; | |
} | |
update(_part, [value, mapper]) { | |
if (!this.isConnected) { | |
this.disconnected(); | |
} | |
if (value === this.__value) { | |
return noChange; | |
} | |
this.__value = value; | |
let i = 0; | |
const { __weakThis: weakThis, __pauser: pauser } = this; | |
forAwaitOf(value, async (v) => { | |
while (pauser.get()) { | |
await pauser.get(); | |
} | |
const _this = weakThis.deref(); | |
if (_this !== undefined) { | |
if (_this.__value !== value) { | |
return false; | |
} | |
if (mapper !== undefined) { | |
v = mapper(v, i); | |
} | |
_this.commitValue(v, i); | |
i++; | |
} | |
return true; | |
}); | |
return noChange; | |
} | |
commitValue(value, _index) { | |
this.setValue(value); | |
} | |
disconnected() { | |
this.__weakThis.disconnect(); | |
this.__pauser.pause(); | |
} | |
reconnected() { | |
this.__weakThis.reconnect(this); | |
this.__pauser.resume(); | |
} | |
} | |
const asyncReplace = directive(AsyncReplaceDirective); | |
class AsyncAppendDirective extends AsyncReplaceDirective { | |
constructor(partInfo) { | |
super(partInfo); | |
if (partInfo.type !== PartType.CHILD) { | |
throw new Error('asyncAppend can only be used in child expressions'); | |
} | |
} | |
update(part, params) { | |
this.__childPart = part; | |
return super.update(part, params); | |
} | |
commitValue(value, index) { | |
if (index === 0) { | |
clearPart(this.__childPart); | |
} | |
const newPart = insertPart(this.__childPart); | |
setChildPartValue(newPart, value); | |
} | |
} | |
const asyncAppend = directive(AsyncAppendDirective); | |
const getStringsFromTemplateResult = (result) => isCompiledTemplateResult(result) ? result['_$litType$'].h : result.strings; | |
class CacheDirective extends Directive { | |
constructor(partInfo) { | |
super(partInfo); | |
this._templateCache = new WeakMap(); | |
} | |
render(v) { | |
return [v]; | |
} | |
update(containerPart, [v]) { | |
const _valueKey = isTemplateResult(this._value) | |
? getStringsFromTemplateResult(this._value) | |
: null; | |
const vKey = isTemplateResult(v) ? getStringsFromTemplateResult(v) : null; | |
if (_valueKey !== null && (vKey === null || _valueKey !== vKey)) { | |
const partValue = getCommittedValue(containerPart); | |
const childPart = partValue.pop(); | |
let cachedContainerPart = this._templateCache.get(_valueKey); | |
if (cachedContainerPart === undefined) { | |
const fragment = document.createDocumentFragment(); | |
cachedContainerPart = render(nothing, fragment); | |
cachedContainerPart.setConnected(false); | |
this._templateCache.set(_valueKey, cachedContainerPart); | |
} | |
setCommittedValue(cachedContainerPart, [childPart]); | |
insertPart(cachedContainerPart, undefined, childPart); | |
} | |
if (vKey !== null) { | |
if (_valueKey === null || _valueKey !== vKey) { | |
const cachedContainerPart = this._templateCache.get(vKey); | |
if (cachedContainerPart !== undefined) { | |
const partValue = getCommittedValue(cachedContainerPart); | |
const cachedPart = partValue.pop(); | |
clearPart(containerPart); | |
insertPart(containerPart, undefined, cachedPart); | |
setCommittedValue(containerPart, [cachedPart]); | |
} | |
} | |
this._value = v; | |
} | |
else { | |
this._value = undefined; | |
} | |
return this.render(v); | |
} | |
} | |
const cache = directive(CacheDirective); | |
const choose = (value, cases, defaultCase) => { | |
for (const c of cases) { | |
const caseValue = c[0]; | |
if (caseValue === value) { | |
const fn = c[1]; | |
return fn(); | |
} | |
} | |
return defaultCase?.(); | |
}; | |
class ClassMapDirective extends Directive { | |
constructor(partInfo) { | |
super(partInfo); | |
if (partInfo.type !== PartType.ATTRIBUTE || | |
partInfo.name !== 'class' || | |
partInfo.strings?.length > 2) { | |
throw new Error('`classMap()` can only be used in the `class` attribute ' + | |
'and must be the only part in the attribute.'); | |
} | |
} | |
render(classInfo) { | |
return (' ' + | |
Object.keys(classInfo) | |
.filter((key) => classInfo[key]) | |
.join(' ') + | |
' '); | |
} | |
update(part, [classInfo]) { | |
if (this._previousClasses === undefined) { | |
this._previousClasses = new Set(); | |
if (part.strings !== undefined) { | |
this._staticClasses = new Set(part.strings | |
.join(' ') | |
.split(/\s/) | |
.filter((s) => s !== '')); | |
} | |
for (const name in classInfo) { | |
if (classInfo[name] && !this._staticClasses?.has(name)) { | |
this._previousClasses.add(name); | |
} | |
} | |
return this.render(classInfo); | |
} | |
const classList = part.element.classList; | |
for (const name of this._previousClasses) { | |
if (!(name in classInfo)) { | |
classList.remove(name); | |
this._previousClasses.delete(name); | |
} | |
} | |
for (const name in classInfo) { | |
const value = !!classInfo[name]; | |
if (value !== this._previousClasses.has(name) && | |
!this._staticClasses?.has(name)) { | |
if (value) { | |
classList.add(name); | |
this._previousClasses.add(name); | |
} | |
else { | |
classList.remove(name); | |
this._previousClasses.delete(name); | |
} | |
} | |
} | |
return noChange; | |
} | |
} | |
const classMap = directive(ClassMapDirective); | |
const initialValue = {}; | |
class GuardDirective extends Directive { | |
constructor() { | |
super(...arguments); | |
this._previousValue = initialValue; | |
} | |
render(_value, f) { | |
return f(); | |
} | |
update(_part, [value, f]) { | |
if (Array.isArray(value)) { | |
if (Array.isArray(this._previousValue) && | |
this._previousValue.length === value.length && | |
value.every((v, i) => v === this._previousValue[i])) { | |
return noChange; | |
} | |
} | |
else if (this._previousValue === value) { | |
return noChange; | |
} | |
this._previousValue = Array.isArray(value) ? Array.from(value) : value; | |
const r = this.render(value, f); | |
return r; | |
} | |
} | |
const guard = directive(GuardDirective); | |
const ifDefined = (value) => value ?? nothing; | |
function* join(items, joiner) { | |
const isFunction = typeof joiner === 'function'; | |
if (items !== undefined) { | |
let i = -1; | |
for (const value of items) { | |
if (i > -1) { | |
yield isFunction ? joiner(i) : joiner; | |
} | |
i++; | |
yield value; | |
} | |
} | |
} | |
class Keyed extends Directive { | |
constructor() { | |
super(...arguments); | |
this.key = nothing; | |
} | |
render(k, v) { | |
this.key = k; | |
return v; | |
} | |
update(part, [k, v]) { | |
if (k !== this.key) { | |
setCommittedValue(part); | |
this.key = k; | |
} | |
return v; | |
} | |
} | |
const keyed = directive(Keyed); | |
class LiveDirective extends Directive { | |
constructor(partInfo) { | |
super(partInfo); | |
if (!(partInfo.type === PartType.PROPERTY || | |
partInfo.type === PartType.ATTRIBUTE || | |
partInfo.type === PartType.BOOLEAN_ATTRIBUTE)) { | |
throw new Error('The `live` directive is not allowed on child or event bindings'); | |
} | |
if (!isSingleExpression(partInfo)) { | |
throw new Error('`live` bindings can only contain a single expression'); | |
} | |
} | |
render(value) { | |
return value; | |
} | |
update(part, [value]) { | |
if (value === noChange || value === nothing) { | |
return value; | |
} | |
const element = part.element; | |
const name = part.name; | |
if (part.type === PartType.PROPERTY) { | |
if (value === element[name]) { | |
return noChange; | |
} | |
} | |
else if (part.type === PartType.BOOLEAN_ATTRIBUTE) { | |
if (!!value === element.hasAttribute(name)) { | |
return noChange; | |
} | |
} | |
else if (part.type === PartType.ATTRIBUTE) { | |
if (element.getAttribute(name) === String(value)) { | |
return noChange; | |
} | |
} | |
setCommittedValue(part); | |
return value; | |
} | |
} | |
const live = directive(LiveDirective); | |
function* map(items, f) { | |
if (items !== undefined) { | |
let i = 0; | |
for (const value of items) { | |
yield f(value, i++); | |
} | |
} | |
} | |
function* range(startOrEnd, end, step = 1) { | |
const start = end === undefined ? 0 : startOrEnd; | |
end ??= startOrEnd; | |
for (let i = start; step > 0 ? i < end : end < i; i += step) { | |
yield i; | |
} | |
} | |
const createRef = () => new Ref(); | |
class Ref { | |
} | |
const lastElementForContextAndCallback = new WeakMap(); | |
class RefDirective extends AsyncDirective { | |
render(_ref) { | |
return nothing; | |
} | |
update(part, [ref]) { | |
const refChanged = ref !== this._ref; | |
if (refChanged && this._ref !== undefined) { | |
this._updateRefValue(undefined); | |
} | |
if (refChanged || this._lastElementForRef !== this._element) { | |
this._ref = ref; | |
this._context = part.options?.host; | |
this._updateRefValue((this._element = part.element)); | |
} | |
return nothing; | |
} | |
_updateRefValue(element) { | |
if (typeof this._ref === 'function') { | |
const context = this._context ?? globalThis; | |
let lastElementForCallback = lastElementForContextAndCallback.get(context); | |
if (lastElementForCallback === undefined) { | |
lastElementForCallback = new WeakMap(); | |
lastElementForContextAndCallback.set(context, lastElementForCallback); | |
} | |
if (lastElementForCallback.get(this._ref) !== undefined) { | |
this._ref.call(this._context, undefined); | |
} | |
lastElementForCallback.set(this._ref, element); | |
if (element !== undefined) { | |
this._ref.call(this._context, element); | |
} | |
} | |
else { | |
this._ref.value = element; | |
} | |
} | |
get _lastElementForRef() { | |
return typeof this._ref === 'function' | |
? lastElementForContextAndCallback | |
.get(this._context ?? globalThis) | |
?.get(this._ref) | |
: this._ref?.value; | |
} | |
disconnected() { | |
if (this._lastElementForRef === this._element) { | |
this._updateRefValue(undefined); | |
} | |
} | |
reconnected() { | |
this._updateRefValue(this._element); | |
} | |
} | |
const ref = directive(RefDirective); | |
const generateMap = (list, start, end) => { | |
const map = new Map(); | |
for (let i = start; i <= end; i++) { | |
map.set(list[i], i); | |
} | |
return map; | |
}; | |
class RepeatDirective extends Directive { | |
constructor(partInfo) { | |
super(partInfo); | |
if (partInfo.type !== PartType.CHILD) { | |
throw new Error('repeat() can only be used in text expressions'); | |
} | |
} | |
_getValuesAndKeys(items, keyFnOrTemplate, template) { | |
let keyFn; | |
if (template === undefined) { | |
template = keyFnOrTemplate; | |
} | |
else if (keyFnOrTemplate !== undefined) { | |
keyFn = keyFnOrTemplate; | |
} | |
const keys = []; | |
const values = []; | |
let index = 0; | |
for (const item of items) { | |
keys[index] = keyFn ? keyFn(item, index) : index; | |
values[index] = template(item, index); | |
index++; | |
} | |
return { | |
values, | |
keys, | |
}; | |
} | |
render(items, keyFnOrTemplate, template) { | |
return this._getValuesAndKeys(items, keyFnOrTemplate, template).values; | |
} | |
update(containerPart, [items, keyFnOrTemplate, template]) { | |
const oldParts = getCommittedValue(containerPart); | |
const { values: newValues, keys: newKeys } = this._getValuesAndKeys(items, keyFnOrTemplate, template); | |
if (!Array.isArray(oldParts)) { | |
this._itemKeys = newKeys; | |
return newValues; | |
} | |
const oldKeys = (this._itemKeys ??= []); | |
const newParts = []; | |
let newKeyToIndexMap; | |
let oldKeyToIndexMap; | |
let oldHead = 0; | |
let oldTail = oldParts.length - 1; | |
let newHead = 0; | |
let newTail = newValues.length - 1; | |
// | |
// | |
// | |
// | |
// | |
// | |
// | |
// | |
// | |
// | |
// | |
// | |
// | |
// | |
// | |
// | |
// | |
// | |
// | |
// | |
// | |
// | |
// | |
// | |
// | |
// | |
// | |
// | |
// | |
// | |
while (oldHead <= oldTail && newHead <= newTail) { | |
if (oldParts[oldHead] === null) { | |
oldHead++; | |
} | |
else if (oldParts[oldTail] === null) { | |
oldTail--; | |
} | |
else if (oldKeys[oldHead] === newKeys[newHead]) { | |
newParts[newHead] = setChildPartValue(oldParts[oldHead], newValues[newHead]); | |
oldHead++; | |
newHead++; | |
} | |
else if (oldKeys[oldTail] === newKeys[newTail]) { | |
newParts[newTail] = setChildPartValue(oldParts[oldTail], newValues[newTail]); | |
oldTail--; | |
newTail--; | |
} | |
else if (oldKeys[oldHead] === newKeys[newTail]) { | |
newParts[newTail] = setChildPartValue(oldParts[oldHead], newValues[newTail]); | |
insertPart(containerPart, newParts[newTail + 1], oldParts[oldHead]); | |
oldHead++; | |
newTail--; | |
} | |
else if (oldKeys[oldTail] === newKeys[newHead]) { | |
newParts[newHead] = setChildPartValue(oldParts[oldTail], newValues[newHead]); | |
insertPart(containerPart, oldParts[oldHead], oldParts[oldTail]); | |
oldTail--; | |
newHead++; | |
} | |
else { | |
if (newKeyToIndexMap === undefined) { | |
newKeyToIndexMap = generateMap(newKeys, newHead, newTail); | |
oldKeyToIndexMap = generateMap(oldKeys, oldHead, oldTail); | |
} | |
if (!newKeyToIndexMap.has(oldKeys[oldHead])) { | |
removePart(oldParts[oldHead]); | |
oldHead++; | |
} | |
else if (!newKeyToIndexMap.has(oldKeys[oldTail])) { | |
removePart(oldParts[oldTail]); | |
oldTail--; | |
} | |
else { | |
const oldIndex = oldKeyToIndexMap.get(newKeys[newHead]); | |
const oldPart = oldIndex !== undefined ? oldParts[oldIndex] : null; | |
if (oldPart === null) { | |
const newPart = insertPart(containerPart, oldParts[oldHead]); | |
setChildPartValue(newPart, newValues[newHead]); | |
newParts[newHead] = newPart; | |
} | |
else { | |
newParts[newHead] = setChildPartValue(oldPart, newValues[newHead]); | |
insertPart(containerPart, oldParts[oldHead], oldPart); | |
oldParts[oldIndex] = null; | |
} | |
newHead++; | |
} | |
} | |
} | |
while (newHead <= newTail) { | |
const newPart = insertPart(containerPart, newParts[newTail + 1]); | |
setChildPartValue(newPart, newValues[newHead]); | |
newParts[newHead++] = newPart; | |
} | |
while (oldHead <= oldTail) { | |
const oldPart = oldParts[oldHead++]; | |
if (oldPart !== null) { | |
removePart(oldPart); | |
} | |
} | |
this._itemKeys = newKeys; | |
setCommittedValue(containerPart, newParts); | |
return noChange; | |
} | |
} | |
const repeat = directive(RepeatDirective); | |
const important = 'important'; | |
const importantFlag = ' !' + important; | |
const flagTrim = 0 - importantFlag.length; | |
class StyleMapDirective extends Directive { | |
constructor(partInfo) { | |
super(partInfo); | |
if (partInfo.type !== PartType.ATTRIBUTE || | |
partInfo.name !== 'style' || | |
partInfo.strings?.length > 2) { | |
throw new Error('The `styleMap` directive must be used in the `style` attribute ' + | |
'and must be the only part in the attribute.'); | |
} | |
} | |
render(styleInfo) { | |
return Object.keys(styleInfo).reduce((style, prop) => { | |
const value = styleInfo[prop]; | |
if (value == null) { | |
return style; | |
} | |
prop = prop.includes('-') | |
? prop | |
: prop | |
.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g, '-$&') | |
.toLowerCase(); | |
return style + `${prop}:${value};`; | |
}, ''); | |
} | |
update(part, [styleInfo]) { | |
const { style } = part.element; | |
if (this._previousStyleProperties === undefined) { | |
this._previousStyleProperties = new Set(Object.keys(styleInfo)); | |
return this.render(styleInfo); | |
} | |
for (const name of this._previousStyleProperties) { | |
if (styleInfo[name] == null) { | |
this._previousStyleProperties.delete(name); | |
if (name.includes('-')) { | |
style.removeProperty(name); | |
} | |
else { | |
style[name] = null; | |
} | |
} | |
} | |
for (const name in styleInfo) { | |
const value = styleInfo[name]; | |
if (value != null) { | |
this._previousStyleProperties.add(name); | |
const isImportant = typeof value === 'string' && value.endsWith(importantFlag); | |
if (name.includes('-') || isImportant) { | |
style.setProperty(name, isImportant | |
? value.slice(0, flagTrim) | |
: value, isImportant ? important : ''); | |
} | |
else { | |
style[name] = value; | |
} | |
} | |
} | |
return noChange; | |
} | |
} | |
const styleMap = directive(StyleMapDirective); | |
class TemplateContentDirective extends Directive { | |
constructor(partInfo) { | |
super(partInfo); | |
if (partInfo.type !== PartType.CHILD) { | |
throw new Error('templateContent can only be used in child bindings'); | |
} | |
} | |
render(template) { | |
if (this._previousTemplate === template) { | |
return noChange; | |
} | |
this._previousTemplate = template; | |
return document.importNode(template.content, true); | |
} | |
} | |
const templateContent = directive(TemplateContentDirective); | |
const HTML_RESULT = 1; | |
class UnsafeHTMLDirective extends Directive { | |
constructor(partInfo) { | |
super(partInfo); | |
this._value = nothing; | |
if (partInfo.type !== PartType.CHILD) { | |
throw new Error(`${this.constructor.directiveName}() can only be used in child bindings`); | |
} | |
} | |
render(value) { | |
if (value === nothing || value == null) { | |
this._templateResult = undefined; | |
return (this._value = value); | |
} | |
if (value === noChange) { | |
return value; | |
} | |
if (typeof value != 'string') { | |
throw new Error(`${this.constructor.directiveName}() called with a non-string value`); | |
} | |
if (value === this._value) { | |
return this._templateResult; | |
} | |
this._value = value; | |
const strings = [value]; | |
strings.raw = strings; | |
return (this._templateResult = { | |
['_$litType$']: this.constructor | |
.resultType, | |
strings, | |
values: [], | |
}); | |
} | |
} | |
UnsafeHTMLDirective.directiveName = 'unsafeHTML'; | |
UnsafeHTMLDirective.resultType = HTML_RESULT; | |
const unsafeHTML = directive(UnsafeHTMLDirective); | |
const SVG_RESULT = 2; | |
class UnsafeSVGDirective extends UnsafeHTMLDirective { | |
} | |
UnsafeSVGDirective.directiveName = 'unsafeSVG'; | |
UnsafeSVGDirective.resultType = SVG_RESULT; | |
const unsafeSVG = directive(UnsafeSVGDirective); | |
const isPromise = (x) => { | |
return !isPrimitive(x) && typeof x.then === 'function'; | |
}; | |
const _infinity = 0x3fffffff; | |
class UntilDirective extends AsyncDirective { | |
constructor() { | |
super(...arguments); | |
this.__lastRenderedIndex = _infinity; | |
this.__values = []; | |
this.__weakThis = new PseudoWeakRef(this); | |
this.__pauser = new Pauser(); | |
} | |
render(...args) { | |
return args.find((x) => !isPromise(x)) ?? noChange; | |
} | |
update(_part, args) { | |
const previousValues = this.__values; | |
let previousLength = previousValues.length; | |
this.__values = args; | |
const weakThis = this.__weakThis; | |
const pauser = this.__pauser; | |
if (!this.isConnected) { | |
this.disconnected(); | |
} | |
for (let i = 0; i < args.length; i++) { | |
if (i > this.__lastRenderedIndex) { | |
break; | |
} | |
const value = args[i]; | |
if (!isPromise(value)) { | |
this.__lastRenderedIndex = i; | |
return value; | |
} | |
if (i < previousLength && value === previousValues[i]) { | |
continue; | |
} | |
this.__lastRenderedIndex = _infinity; | |
previousLength = 0; | |
Promise.resolve(value).then(async (result) => { | |
while (pauser.get()) { | |
await pauser.get(); | |
} | |
const _this = weakThis.deref(); | |
if (_this !== undefined) { | |
const index = _this.__values.indexOf(value); | |
if (index > -1 && index < _this.__lastRenderedIndex) { | |
_this.__lastRenderedIndex = index; | |
_this.setValue(result); | |
} | |
} | |
}); | |
} | |
return noChange; | |
} | |
disconnected() { | |
this.__weakThis.disconnect(); | |
this.__pauser.pause(); | |
} | |
reconnected() { | |
this.__weakThis.reconnect(this); | |
this.__pauser.resume(); | |
} | |
} | |
const until = directive(UntilDirective); | |
function when(condition, trueCase, falseCase) { | |
return condition ? trueCase(condition) : falseCase?.(condition); | |
} | |
const brand = Symbol.for(''); | |
const unwrapStaticValue = (value) => { | |
if (value?.r !== brand) { | |
return undefined; | |
} | |
return value?.['_$litStatic$']; | |
}; | |
const unsafeStatic = (value) => ({ | |
['_$litStatic$']: value, | |
r: brand, | |
}); | |
const textFromStatic = (value) => { | |
if (value['_$litStatic$'] !== undefined) { | |
return value['_$litStatic$']; | |
} | |
else { | |
throw new Error(`Value passed to 'literal' function must be a 'literal' result: ${value}. Use 'unsafeStatic' to pass non-literal values, but | |
take care to ensure page security.`); | |
} | |
}; | |
const literal = (strings, ...values) => ({ | |
['_$litStatic$']: values.reduce((acc, v, idx) => acc + textFromStatic(v) + strings[idx + 1], strings[0]), | |
r: brand, | |
}); | |
const stringsCache = new Map(); | |
const withStatic = (coreTag) => (strings, ...values) => { | |
const l = values.length; | |
let staticValue; | |
let dynamicValue; | |
const staticStrings = []; | |
const dynamicValues = []; | |
let i = 0; | |
let hasStatics = false; | |
let s; | |
while (i < l) { | |
s = strings[i]; | |
while (i < l && | |
((dynamicValue = values[i]), | |
(staticValue = unwrapStaticValue(dynamicValue))) !== undefined) { | |
s += staticValue + strings[++i]; | |
hasStatics = true; | |
} | |
if (i !== l) { | |
dynamicValues.push(dynamicValue); | |
} | |
staticStrings.push(s); | |
i++; | |
} | |
if (i === l) { | |
staticStrings.push(strings[l]); | |
} | |
if (hasStatics) { | |
const key = staticStrings.join('$$lit$$'); | |
strings = stringsCache.get(key); | |
if (strings === undefined) { | |
staticStrings.raw = staticStrings; | |
stringsCache.set(key, (strings = staticStrings)); | |
} | |
values = dynamicValues; | |
} | |
return coreTag(strings, ...values); | |
}; | |
const html = withStatic(html$1); | |
const svg = withStatic(svg$1); | |
if (!window.litDisableBundleWarning) { | |
console.warn('Lit has been loaded from a bundle that combines all core features into ' + | |
'a single file. To reduce transfer size and parsing cost, consider ' + | |
'using the `lit` npm package directly in your project.'); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment