@google/model-viewer
Version:
Easily display interactive 3D models on the web and in AR!
1,074 lines (1,044 loc) • 1.01 MB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('three')) :
typeof define === 'function' && define.amd ? define(['exports', 'three'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.ModelViewerElement = {}, global.three));
})(this, (function (exports, three) { 'use strict';
/**
* @license
* Copyright 2019 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/ const t$2 = globalThis, e$2 = t$2.ShadowRoot && (void 0 === t$2.ShadyCSS || t$2.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, s$2 = Symbol(), o$4 = new WeakMap;
let n$4 = class n {
get styleSheet() {
let t = this.o;
const s = this.t;
if (e$2 && void 0 === t) {
const e = void 0 !== s && 1 === s.length;
e && (t = o$4.get(s)), void 0 === t && ((this.o = t = new CSSStyleSheet).replaceSync(this.cssText), e && o$4.set(s, t));
}
return t;
}
toString() {
return this.cssText;
}
constructor(t, e, o){
if (this._$cssResult$ = true, o !== s$2) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
this.cssText = t, this.t = e;
}
};
const r$3 = (t)=>new n$4("string" == typeof t ? t : t + "", void 0, s$2), S$2 = (s, o)=>{
if (e$2) s.adoptedStyleSheets = o.map((t)=>t instanceof CSSStyleSheet ? t : t.styleSheet);
else for (const e of o){
const o = document.createElement("style"), n = t$2.litNonce;
void 0 !== n && o.setAttribute("nonce", n), o.textContent = e.cssText, s.appendChild(o);
}
}, c$3 = e$2 ? (t)=>t : (t)=>t instanceof CSSStyleSheet ? ((t)=>{
let e = "";
for (const s of t.cssRules)e += s.cssText;
return r$3(e);
})(t) : t;
var _Symbol, _a$a, _a1;
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/ const { is: i$3, defineProperty: e$1, getOwnPropertyDescriptor: h$1, getOwnPropertyNames: r$2, getOwnPropertySymbols: o$3, getPrototypeOf: n$3 } = Object, a$2 = globalThis, c$2 = a$2.trustedTypes, l$1 = c$2 ? c$2.emptyScript : "", p$1 = a$2.reactiveElementPolyfillSupport, d$1 = (t, s)=>t, u$2 = {
toAttribute (t, s) {
switch(s){
case Boolean:
t = t ? l$1 : null;
break;
case Object:
case Array:
t = null == t ? t : JSON.stringify(t);
}
return t;
},
fromAttribute (t, s) {
let i = t;
switch(s){
case Boolean:
i = null !== t;
break;
case Number:
i = null === t ? null : Number(t);
break;
case Object:
case Array:
try {
i = JSON.parse(t);
} catch (t) {
i = null;
}
}
return i;
}
}, f$1 = (t, s)=>!i$3(t, s), b$2 = {
attribute: true,
type: String,
converter: u$2,
reflect: false,
useDefault: false,
hasChanged: f$1
};
(_Symbol = Symbol).metadata ?? (_Symbol.metadata = Symbol("metadata")), (_a$a = a$2).litPropertyMetadata ?? (_a$a.litPropertyMetadata = new WeakMap);
let y$2 = class y extends HTMLElement {
static addInitializer(t) {
this._$Ei(), (this.l ?? (this.l = [])).push(t);
}
static get observedAttributes() {
return this.finalize(), this._$Eh && [
...this._$Eh.keys()
];
}
static createProperty(t, s = b$2) {
if (s.state && (s.attribute = false), this._$Ei(), this.prototype.hasOwnProperty(t) && ((s = Object.create(s)).wrapped = true), this.elementProperties.set(t, s), !s.noAccessor) {
const i = Symbol(), h = this.getPropertyDescriptor(t, i, s);
void 0 !== h && e$1(this.prototype, t, h);
}
}
static getPropertyDescriptor(t, s, i) {
const { get: e, set: r } = h$1(this.prototype, t) ?? {
get () {
return this[s];
},
set (t) {
this[s] = t;
}
};
return {
get: e,
set (s) {
const h = e?.call(this);
r?.call(this, s), this.requestUpdate(t, h, i);
},
configurable: true,
enumerable: true
};
}
static getPropertyOptions(t) {
return this.elementProperties.get(t) ?? b$2;
}
static _$Ei() {
if (this.hasOwnProperty(d$1("elementProperties"))) return;
const t = n$3(this);
t.finalize(), void 0 !== t.l && (this.l = [
...t.l
]), this.elementProperties = new Map(t.elementProperties);
}
static finalize() {
if (this.hasOwnProperty(d$1("finalized"))) return;
if (this.finalized = true, this._$Ei(), this.hasOwnProperty(d$1("properties"))) {
const t = this.properties, s = [
...r$2(t),
...o$3(t)
];
for (const i of s)this.createProperty(i, t[i]);
}
const t = this[Symbol.metadata];
if (null !== t) {
const s = litPropertyMetadata.get(t);
if (void 0 !== s) for (const [t, i] of s)this.elementProperties.set(t, i);
}
this._$Eh = new Map;
for (const [t, s] of this.elementProperties){
const i = this._$Eu(t, s);
void 0 !== i && this._$Eh.set(i, t);
}
this.elementStyles = this.finalizeStyles(this.styles);
}
static finalizeStyles(s) {
const i = [];
if (Array.isArray(s)) {
const e = new Set(s.flat(1 / 0).reverse());
for (const s of e)i.unshift(c$3(s));
} else void 0 !== s && i.push(c$3(s));
return i;
}
static _$Eu(t, s) {
const i = s.attribute;
return false === i ? void 0 : "string" == typeof i ? i : "string" == typeof t ? t.toLowerCase() : void 0;
}
_$Ev() {
this._$ES = new Promise((t)=>this.enableUpdating = t), this._$AL = new Map, this._$E_(), this.requestUpdate(), this.constructor.l?.forEach((t)=>t(this));
}
addController(t) {
(this._$EO ?? (this._$EO = new Set)).add(t), void 0 !== this.renderRoot && this.isConnected && t.hostConnected?.();
}
removeController(t) {
this._$EO?.delete(t);
}
_$E_() {
const t = new Map, s = this.constructor.elementProperties;
for (const i of s.keys())this.hasOwnProperty(i) && (t.set(i, this[i]), delete this[i]);
t.size > 0 && (this._$Ep = t);
}
createRenderRoot() {
const t = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
return S$2(t, this.constructor.elementStyles), t;
}
connectedCallback() {
this.renderRoot ?? (this.renderRoot = this.createRenderRoot()), this.enableUpdating(true), this._$EO?.forEach((t)=>t.hostConnected?.());
}
enableUpdating(t) {}
disconnectedCallback() {
this._$EO?.forEach((t)=>t.hostDisconnected?.());
}
attributeChangedCallback(t, s, i) {
this._$AK(t, i);
}
_$ET(t, s) {
const i = this.constructor.elementProperties.get(t), e = this.constructor._$Eu(t, i);
if (void 0 !== e && true === i.reflect) {
const h = (void 0 !== i.converter?.toAttribute ? i.converter : u$2).toAttribute(s, i.type);
this._$Em = t, null == h ? this.removeAttribute(e) : this.setAttribute(e, h), this._$Em = null;
}
}
_$AK(t, s) {
const i = this.constructor, e = i._$Eh.get(t);
if (void 0 !== e && this._$Em !== e) {
const t = i.getPropertyOptions(e), h = "function" == typeof t.converter ? {
fromAttribute: t.converter
} : void 0 !== t.converter?.fromAttribute ? t.converter : u$2;
this._$Em = e;
const r = h.fromAttribute(s, t.type);
this[e] = r ?? this._$Ej?.get(e) ?? r, this._$Em = null;
}
}
requestUpdate(t, s, i, e = false, h) {
if (void 0 !== t) {
const r = this.constructor;
if (false === e && (h = this[t]), i ?? (i = r.getPropertyOptions(t)), !((i.hasChanged ?? f$1)(h, s) || i.useDefault && i.reflect && h === this._$Ej?.get(t) && !this.hasAttribute(r._$Eu(t, i)))) return;
this.C(t, s, i);
}
false === this.isUpdatePending && (this._$ES = this._$EP());
}
C(t, s, { useDefault: i, reflect: e, wrapped: h }, r) {
i && !(this._$Ej ?? (this._$Ej = new Map)).has(t) && (this._$Ej.set(t, r ?? s ?? this[t]), true !== h || void 0 !== r) || (this._$AL.has(t) || (this.hasUpdated || i || (s = void 0), this._$AL.set(t, s)), true === e && this._$Em !== t && (this._$Eq ?? (this._$Eq = new Set)).add(t));
}
async _$EP() {
this.isUpdatePending = true;
try {
await this._$ES;
} catch (t) {
Promise.reject(t);
}
const t = this.scheduleUpdate();
return null != t && await t, !this.isUpdatePending;
}
scheduleUpdate() {
return this.performUpdate();
}
performUpdate() {
if (!this.isUpdatePending) return;
if (!this.hasUpdated) {
if (this.renderRoot ?? (this.renderRoot = this.createRenderRoot()), this._$Ep) {
for (const [t, s] of this._$Ep)this[t] = s;
this._$Ep = void 0;
}
const t = this.constructor.elementProperties;
if (t.size > 0) for (const [s, i] of t){
const { wrapped: t } = i, e = this[s];
true !== t || this._$AL.has(s) || void 0 === e || this.C(s, void 0, i, e);
}
}
let t = false;
const s = this._$AL;
try {
t = this.shouldUpdate(s), t ? (this.willUpdate(s), this._$EO?.forEach((t)=>t.hostUpdate?.()), this.update(s)) : this._$EM();
} catch (s) {
throw t = false, this._$EM(), s;
}
t && this._$AE(s);
}
willUpdate(t) {}
_$AE(t) {
this._$EO?.forEach((t)=>t.hostUpdated?.()), this.hasUpdated || (this.hasUpdated = true, this.firstUpdated(t)), this.updated(t);
}
_$EM() {
this._$AL = new Map, this.isUpdatePending = false;
}
get updateComplete() {
return this.getUpdateComplete();
}
getUpdateComplete() {
return this._$ES;
}
shouldUpdate(t) {
return true;
}
update(t) {
this._$Eq && (this._$Eq = this._$Eq.forEach((t)=>this._$ET(t, this[t]))), this._$EM();
}
updated(t) {}
firstUpdated(t) {}
constructor(){
super(), this._$Ep = void 0, this.isUpdatePending = false, this.hasUpdated = false, this._$Em = null, this._$Ev();
}
};
y$2.elementStyles = [], y$2.shadowRootOptions = {
mode: "open"
}, y$2[d$1("elementProperties")] = new Map, y$2[d$1("finalized")] = new Map, p$1?.({
ReactiveElement: y$2
}), ((_a1 = a$2).reactiveElementVersions ?? (_a1.reactiveElementVersions = [])).push("2.1.2");
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/ const o$2 = {
attribute: true,
type: String,
converter: u$2,
reflect: false,
hasChanged: f$1
}, r$1 = (t = o$2, e, r)=>{
const { kind: n, metadata: i } = r;
let s = globalThis.litPropertyMetadata.get(i);
if (void 0 === s && globalThis.litPropertyMetadata.set(i, s = new Map), "setter" === n && ((t = Object.create(t)).wrapped = true), s.set(r.name, t), "accessor" === n) {
const { name: o } = r;
return {
set (r) {
const n = e.get.call(this);
e.set.call(this, r), this.requestUpdate(o, n, t, true, r);
},
init (e) {
return void 0 !== e && this.C(o, void 0, t, e), e;
}
};
}
if ("setter" === n) {
const { name: o } = r;
return function(r) {
const n = this[o];
e.call(this, r), this.requestUpdate(o, n, t, true, r);
};
}
throw Error("Unsupported decorator location: " + n);
};
function n$2(t) {
return (e, o)=>"object" == typeof o ? r$1(t, e, o) : ((t, e, o)=>{
const r = e.hasOwnProperty(o);
return e.constructor.createProperty(o, t), r ? Object.getOwnPropertyDescriptor(e, o) : void 0;
})(t, e, o);
}
var _t;
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/ const t$1 = globalThis, i$2 = (t)=>t, s$1 = t$1.trustedTypes, e = s$1 ? s$1.createPolicy("lit-html", {
createHTML: (t)=>t
}) : void 0, h = "$lit$", o$1 = `lit$${Math.random().toFixed(9).slice(2)}$`, n$1 = "?" + o$1, r = `<${n$1}>`, l = document, c$1 = ()=>l.createComment(""), a$1 = (t)=>null === t || "object" != typeof t && "function" != typeof t, u$1 = Array.isArray, d = (t)=>u$1(t) || "function" == typeof t?.[Symbol.iterator], f = "[ \t\n\f\r]", v = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, _ = /-->/g, m = />/g, p = RegExp(`>|${f}(?:([^\\s"'>=/]+)(${f}*=${f}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`, "g"), g$1 = /'/g, $ = /"/g, y$1 = /^(?:script|style|textarea|title)$/i, x$1 = (t)=>(i, ...s)=>({
_$litType$: t,
strings: i,
values: s
}), b$1 = x$1(1), E$1 = Symbol.for("lit-noChange"), A$1 = Symbol.for("lit-nothing"), C$1 = new WeakMap, P = l.createTreeWalker(l, 129);
function V(t, i) {
if (!u$1(t) || !t.hasOwnProperty("raw")) throw Error("invalid template strings array");
return void 0 !== e ? e.createHTML(i) : i;
}
const N = (t, i)=>{
const s = t.length - 1, e = [];
let n, l = 2 === i ? "<svg>" : 3 === i ? "<math>" : "", c = v;
for(let i = 0; i < s; i++){
const s = t[i];
let a, u, d = -1, f = 0;
for(; f < s.length && (c.lastIndex = f, u = c.exec(s), null !== u);)f = c.lastIndex, c === v ? "!--" === u[1] ? c = _ : void 0 !== u[1] ? c = m : void 0 !== u[2] ? (y$1.test(u[2]) && (n = RegExp("</" + u[2], "g")), c = p) : void 0 !== u[3] && (c = p) : c === p ? ">" === u[0] ? (c = n ?? v, d = -1) : void 0 === u[1] ? d = -2 : (d = c.lastIndex - u[2].length, a = u[1], c = void 0 === u[3] ? p : '"' === u[3] ? $ : g$1) : c === $ || c === g$1 ? c = p : c === _ || c === m ? c = v : (c = p, n = void 0);
const x = c === p && t[i + 1].startsWith("/>") ? " " : "";
l += c === v ? s + r : d >= 0 ? (e.push(a), s.slice(0, d) + h + s.slice(d) + o$1 + x) : s + o$1 + (-2 === d ? i : x);
}
return [
V(t, l + (t[s] || "<?>") + (2 === i ? "</svg>" : 3 === i ? "</math>" : "")),
e
];
};
let S$1 = class S {
static createElement(t, i) {
const s = l.createElement("template");
return s.innerHTML = t, s;
}
constructor({ strings: t, _$litType$: i }, e){
let r;
this.parts = [];
let l = 0, a = 0;
const u = t.length - 1, d = this.parts, [f, v] = N(t, i);
if (this.el = S.createElement(f, e), P.currentNode = this.el.content, 2 === i || 3 === i) {
const t = this.el.content.firstChild;
t.replaceWith(...t.childNodes);
}
for(; null !== (r = P.nextNode()) && d.length < u;){
if (1 === r.nodeType) {
if (r.hasAttributes()) for (const t of r.getAttributeNames())if (t.endsWith(h)) {
const i = v[a++], s = r.getAttribute(t).split(o$1), e = /([.?@])?(.*)/.exec(i);
d.push({
type: 1,
index: l,
name: e[2],
strings: s,
ctor: "." === e[1] ? I$1 : "?" === e[1] ? L : "@" === e[1] ? z : H
}), r.removeAttribute(t);
} else t.startsWith(o$1) && (d.push({
type: 6,
index: l
}), r.removeAttribute(t));
if (y$1.test(r.tagName)) {
const t = r.textContent.split(o$1), i = t.length - 1;
if (i > 0) {
r.textContent = s$1 ? s$1.emptyScript : "";
for(let s = 0; s < i; s++)r.append(t[s], c$1()), P.nextNode(), d.push({
type: 2,
index: ++l
});
r.append(t[i], c$1());
}
}
} else if (8 === r.nodeType) if (r.data === n$1) d.push({
type: 2,
index: l
});
else {
let t = -1;
for(; -1 !== (t = r.data.indexOf(o$1, t + 1));)d.push({
type: 7,
index: l
}), t += o$1.length - 1;
}
l++;
}
}
};
function M(t, i, s = t, e) {
var _s;
if (i === E$1) return i;
let h = void 0 !== e ? s._$Co?.[e] : s._$Cl;
const o = a$1(i) ? void 0 : i._$litDirective$;
return h?.constructor !== o && (h?._$AO?.(false), void 0 === o ? h = void 0 : (h = new o(t), h._$AT(t, s, e)), void 0 !== e ? ((_s = s)._$Co ?? (_s._$Co = []))[e] = h : s._$Cl = h), void 0 !== h && (i = M(t, h._$AS(t, i.values), h, e)), i;
}
class R {
get parentNode() {
return this._$AM.parentNode;
}
get _$AU() {
return this._$AM._$AU;
}
u(t) {
const { el: { content: i }, parts: s } = this._$AD, e = (t?.creationScope ?? l).importNode(i, true);
P.currentNode = e;
let h = P.nextNode(), o = 0, n = 0, r = s[0];
for(; void 0 !== r;){
if (o === r.index) {
let i;
2 === r.type ? i = new k(h, h.nextSibling, this, t) : 1 === r.type ? i = new r.ctor(h, r.name, r.strings, this, t) : 6 === r.type && (i = new Z(h, this, t)), this._$AV.push(i), r = s[++n];
}
o !== r?.index && (h = P.nextNode(), o++);
}
return P.currentNode = l, e;
}
p(t) {
let i = 0;
for (const s of this._$AV) void 0 !== s && (void 0 !== s.strings ? (s._$AI(t, s, i), i += s.strings.length - 2) : s._$AI(t[i])), i++;
}
constructor(t, i){
this._$AV = [], this._$AN = void 0, this._$AD = t, this._$AM = i;
}
}
class k {
get _$AU() {
return this._$AM?._$AU ?? this._$Cv;
}
get parentNode() {
let t = this._$AA.parentNode;
const i = this._$AM;
return void 0 !== i && 11 === t?.nodeType && (t = i.parentNode), t;
}
get startNode() {
return this._$AA;
}
get endNode() {
return this._$AB;
}
_$AI(t, i = this) {
t = M(this, t, i), a$1(t) ? t === A$1 || null == t || "" === t ? (this._$AH !== A$1 && this._$AR(), this._$AH = A$1) : t !== this._$AH && t !== E$1 && this._(t) : void 0 !== t._$litType$ ? this.$(t) : void 0 !== t.nodeType ? this.T(t) : d(t) ? this.k(t) : this._(t);
}
O(t) {
return this._$AA.parentNode.insertBefore(t, this._$AB);
}
T(t) {
this._$AH !== t && (this._$AR(), this._$AH = this.O(t));
}
_(t) {
this._$AH !== A$1 && a$1(this._$AH) ? this._$AA.nextSibling.data = t : this.T(l.createTextNode(t)), this._$AH = t;
}
$(t) {
const { values: i, _$litType$: s } = t, e = "number" == typeof s ? this._$AC(t) : (void 0 === s.el && (s.el = S$1.createElement(V(s.h, s.h[0]), this.options)), s);
if (this._$AH?._$AD === e) this._$AH.p(i);
else {
const t = new R(e, this), s = t.u(this.options);
t.p(i), this.T(s), this._$AH = t;
}
}
_$AC(t) {
let i = C$1.get(t.strings);
return void 0 === i && C$1.set(t.strings, i = new S$1(t)), i;
}
k(t) {
u$1(this._$AH) || (this._$AH = [], this._$AR());
const i = this._$AH;
let s, e = 0;
for (const h of t)e === i.length ? i.push(s = new k(this.O(c$1()), this.O(c$1()), this, this.options)) : s = i[e], s._$AI(h), e++;
e < i.length && (this._$AR(s && s._$AB.nextSibling, e), i.length = e);
}
_$AR(t = this._$AA.nextSibling, s) {
for(this._$AP?.(false, true, s); t !== this._$AB;){
const s = i$2(t).nextSibling;
i$2(t).remove(), t = s;
}
}
setConnected(t) {
void 0 === this._$AM && (this._$Cv = t, this._$AP?.(t));
}
constructor(t, i, s, e){
this.type = 2, this._$AH = A$1, this._$AN = void 0, this._$AA = t, this._$AB = i, this._$AM = s, this.options = e, this._$Cv = e?.isConnected ?? true;
}
}
class H {
get tagName() {
return this.element.tagName;
}
get _$AU() {
return this._$AM._$AU;
}
_$AI(t, i = this, s, e) {
const h = this.strings;
let o = false;
if (void 0 === h) t = M(this, t, i, 0), o = !a$1(t) || t !== this._$AH && t !== E$1, o && (this._$AH = t);
else {
const e = t;
let n, r;
for(t = h[0], n = 0; n < h.length - 1; n++)r = M(this, e[s + n], i, n), r === E$1 && (r = this._$AH[n]), o || (o = !a$1(r) || r !== this._$AH[n]), r === A$1 ? t = A$1 : t !== A$1 && (t += (r ?? "") + h[n + 1]), this._$AH[n] = r;
}
o && !e && this.j(t);
}
j(t) {
t === A$1 ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, t ?? "");
}
constructor(t, i, s, e, h){
this.type = 1, this._$AH = A$1, this._$AN = void 0, this.element = t, this.name = i, this._$AM = e, this.options = h, s.length > 2 || "" !== s[0] || "" !== s[1] ? (this._$AH = Array(s.length - 1).fill(new String), this.strings = s) : this._$AH = A$1;
}
}
let I$1 = class I extends H {
j(t) {
this.element[this.name] = t === A$1 ? void 0 : t;
}
constructor(){
super(...arguments), this.type = 3;
}
};
class L extends H {
j(t) {
this.element.toggleAttribute(this.name, !!t && t !== A$1);
}
constructor(){
super(...arguments), this.type = 4;
}
}
class z extends H {
_$AI(t, i = this) {
if ((t = M(this, t, i, 0) ?? A$1) === E$1) return;
const s = this._$AH, e = t === A$1 && s !== A$1 || t.capture !== s.capture || t.once !== s.once || t.passive !== s.passive, h = t !== A$1 && (s === A$1 || e);
e && this.element.removeEventListener(this.name, this, s), h && this.element.addEventListener(this.name, this, t), this._$AH = t;
}
handleEvent(t) {
"function" == typeof this._$AH ? this._$AH.call(this.options?.host ?? this.element, t) : this._$AH.handleEvent(t);
}
constructor(t, i, s, e, h){
super(t, i, s, e, h), this.type = 5;
}
}
class Z {
get _$AU() {
return this._$AM._$AU;
}
_$AI(t) {
M(this, t);
}
constructor(t, i, s){
this.element = t, this.type = 6, this._$AN = void 0, this._$AM = i, this.options = s;
}
}
const B$1 = t$1.litHtmlPolyfillSupport;
B$1?.(S$1, k), ((_t = t$1).litHtmlVersions ?? (_t.litHtmlVersions = [])).push("3.3.2");
const D = (t, i, s)=>{
const e = s?.renderBefore ?? i;
let h = e._$litPart$;
if (void 0 === h) {
const t = s?.renderBefore ?? null;
e._$litPart$ = h = new k(i.insertBefore(c$1(), t), t, void 0, s ?? {});
}
return h._$AI(t), h;
};
var _s;
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/ const s = globalThis;
let i$1 = class i extends y$2 {
createRenderRoot() {
var _this_renderOptions;
const t = super.createRenderRoot();
return (_this_renderOptions = this.renderOptions).renderBefore ?? (_this_renderOptions.renderBefore = t.firstChild), t;
}
update(t) {
const r = this.render();
this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(t), this._$Do = D(r, this.renderRoot, this.renderOptions);
}
connectedCallback() {
super.connectedCallback(), this._$Do?.setConnected(true);
}
disconnectedCallback() {
super.disconnectedCallback(), this._$Do?.setConnected(false);
}
render() {
return E$1;
}
constructor(){
super(...arguments), this.renderOptions = {
host: this
}, this._$Do = void 0;
}
};
i$1._$litElement$ = true, i$1["finalized"] = true, s.litElementHydrateSupport?.({
LitElement: i$1
});
const o = s.litElementPolyfillSupport;
o?.({
LitElement: i$1
});
((_s = s).litElementVersions ?? (_s.litElementVersions = [])).push("4.2.2");
const HAS_WEBXR_DEVICE_API = navigator.xr != null && self.XRSession != null && navigator.xr.isSessionSupported != null;
const HAS_WEBXR_HIT_TEST_API = HAS_WEBXR_DEVICE_API && self.XRSession.prototype.requestHitTestSource != null;
const HAS_RESIZE_OBSERVER = self.ResizeObserver != null;
const HAS_INTERSECTION_OBSERVER = self.IntersectionObserver != null;
const IS_WEBXR_AR_CANDIDATE = HAS_WEBXR_HIT_TEST_API;
(()=>{
const userAgent = navigator.userAgent || navigator.vendor || self.opera;
let check = false;
if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(userAgent) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(userAgent.substr(0, 4))) {
check = true;
}
return check;
})();
const IS_ANDROID = /android/i.test(navigator.userAgent);
const IS_IOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !self.MSStream || navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1;
const IS_FIREFOX = /firefox/i.test(navigator.userAgent);
const IS_OCULUS = /OculusBrowser/.test(navigator.userAgent);
const IS_SCENEVIEWER_CANDIDATE = IS_ANDROID && !IS_FIREFOX && !IS_OCULUS;
const IS_WKWEBVIEW = Boolean(window.webkit && window.webkit.messageHandlers);
const IS_AR_QUICKLOOK_CANDIDATE = (()=>{
if (IS_IOS) {
if (!IS_WKWEBVIEW) {
const tempAnchor = document.createElement('a');
return Boolean(tempAnchor.relList && tempAnchor.relList.supports && tempAnchor.relList.supports('ar'));
} else {
return Boolean(/CriOS\/|EdgiOS\/|FxiOS\/|GSA\/|DuckDuckGo\//.test(navigator.userAgent));
}
} else {
return false;
}
})();
const deserializeUrl = (url)=>!!url && url !== 'null' ? toFullUrl(url) : null;
const assertIsArCandidate = ()=>{
if (IS_WEBXR_AR_CANDIDATE) {
return;
}
const missingApis = [];
if (!HAS_WEBXR_DEVICE_API) {
missingApis.push('WebXR Device API');
}
if (!HAS_WEBXR_HIT_TEST_API) {
missingApis.push('WebXR Hit Test API');
}
throw new Error(`The following APIs are required for AR, but are missing in this browser: ${missingApis.join(', ')}`);
};
const toFullUrl = (partialUrl)=>{
const url = new URL(partialUrl, window.location.toString());
return url.toString();
};
const throttle = (fn, ms)=>{
let timer = null;
const throttled = (...args)=>{
if (timer != null) {
return;
}
fn(...args);
timer = self.setTimeout(()=>timer = null, ms);
};
throttled.flush = ()=>{
if (timer != null) {
self.clearTimeout(timer);
timer = null;
}
};
return throttled;
};
const debounce = (fn, ms)=>{
let timer = null;
return (...args)=>{
if (timer != null) {
self.clearTimeout(timer);
}
timer = self.setTimeout(()=>{
timer = null;
fn(...args);
}, ms);
};
};
const clamp = (value, lowerLimit, upperLimit)=>Math.max(lowerLimit, Math.min(upperLimit, value));
const isDebugMode = (()=>{
const debugQueryParameterName = 'model-viewer-debug-mode';
const debugQueryParameter = new RegExp(`[?&]${debugQueryParameterName}(&|$)`);
return ()=>self.ModelViewerElement && self.ModelViewerElement.debugMode || self.location && self.location.search && self.location.search.match(debugQueryParameter);
})();
const timePasses = (ms = 0)=>new Promise((resolve)=>setTimeout(resolve, ms));
const waitForEvent = (target, eventName, predicate = null)=>new Promise((resolve)=>{
function handler(event) {
if (!predicate || predicate(event)) {
resolve(event);
target.removeEventListener(eventName, handler);
}
}
target.addEventListener(eventName, handler);
});
var __decorate$7 = 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;
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;
};
const BASE_OPACITY = 0.5;
const DEFAULT_SHADOW_INTENSITY = 0.0;
const DEFAULT_SHADOW_SOFTNESS = 1.0;
const DEFAULT_EXPOSURE = 1.0;
const $currentEnvironmentMap = Symbol('currentEnvironmentMap');
const $currentBackground = Symbol('currentBackground');
const $updateEnvironment = Symbol('updateEnvironment');
const $cancelEnvironmentUpdate = Symbol('cancelEnvironmentUpdate');
const EnvironmentMixin = (ModelViewerElement)=>{
var _a, _b, _c;
class EnvironmentModelViewerElement extends ModelViewerElement {
updated(changedProperties) {
var _d;
super.updated(changedProperties);
if (changedProperties.has('shadowIntensity')) {
this[$scene].setShadowIntensity(this.shadowIntensity * BASE_OPACITY);
this[$needsRender]();
}
if (changedProperties.has('shadowSoftness')) {
this[$scene].setShadowSoftness(this.shadowSoftness);
this[$needsRender]();
}
if (changedProperties.has('exposure')) {
this[$scene].exposure = this.exposure;
this[$needsRender]();
}
if (changedProperties.has('toneMapping')) {
const TONE_MAPPING = new Map([
[
'aces',
three.ACESFilmicToneMapping
],
[
'agx',
three.AgXToneMapping
],
[
'reinhard',
three.ReinhardToneMapping
],
[
'cineon',
three.CineonToneMapping
],
[
'linear',
three.LinearToneMapping
],
[
'none',
three.NoToneMapping
]
]);
this[$scene].toneMapping = (_d = TONE_MAPPING.get(this.toneMapping)) !== null && _d !== void 0 ? _d : three.NeutralToneMapping;
this[$needsRender]();
}
if ((changedProperties.has('environmentImage') || changedProperties.has('skyboxImage')) && this[$shouldAttemptPreload]()) {
this[$updateEnvironment]();
}
if (changedProperties.has('skyboxHeight')) {
this[$scene].setGroundedSkybox();
this[$needsRender]();
}
}
hasBakedShadow() {
return this[$scene].bakedShadows.size > 0;
}
async [(_a = $currentEnvironmentMap, _b = $currentBackground, _c = $cancelEnvironmentUpdate, $updateEnvironment)]() {
const { skyboxImage, environmentImage } = this;
if (this[$cancelEnvironmentUpdate] != null) {
this[$cancelEnvironmentUpdate]();
this[$cancelEnvironmentUpdate] = null;
}
const { textureUtils } = this[$renderer];
if (textureUtils == null) {
return;
}
const updateEnvProgress = this[$progressTracker].beginActivity('environment-update');
try {
const { environmentMap, skybox } = await textureUtils.generateEnvironmentMapAndSkybox(deserializeUrl(skyboxImage), environmentImage, (progress)=>updateEnvProgress(clamp(progress, 0, 1)), this.withCredentials);
if (this[$currentEnvironmentMap] !== environmentMap) {
this[$currentEnvironmentMap] = environmentMap;
this.dispatchEvent(new CustomEvent('environment-change'));
}
if (skybox != null) {
this[$currentBackground] = skybox.name === environmentMap.name ? environmentMap : skybox;
} else {
this[$currentBackground] = null;
}
this[$scene].setEnvironmentAndSkybox(this[$currentEnvironmentMap], this[$currentBackground]);
} catch (errorOrPromise) {
if (errorOrPromise instanceof Error) {
this[$scene].setEnvironmentAndSkybox(null, null);
throw errorOrPromise;
}
} finally{
updateEnvProgress(1.0);
}
}
constructor(){
super(...arguments);
this.environmentImage = null;
this.skyboxImage = null;
this.shadowIntensity = DEFAULT_SHADOW_INTENSITY;
this.shadowSoftness = DEFAULT_SHADOW_SOFTNESS;
this.exposure = DEFAULT_EXPOSURE;
this.toneMapping = 'auto';
this.skyboxHeight = '0';
this[_a] = null;
this[_b] = null;
this[_c] = null;
}
}
__decorate$7([
n$2({
type: String,
attribute: 'environment-image'
})
], EnvironmentModelViewerElement.prototype, "environmentImage", void 0);
__decorate$7([
n$2({
type: String,
attribute: 'skybox-image'
})
], EnvironmentModelViewerElement.prototype, "skyboxImage", void 0);
__decorate$7([
n$2({
type: Number,
attribute: 'shadow-intensity'
})
], EnvironmentModelViewerElement.prototype, "shadowIntensity", void 0);
__decorate$7([
n$2({
type: Number,
attribute: 'shadow-softness'
})
], EnvironmentModelViewerElement.prototype, "shadowSoftness", void 0);
__decorate$7([
n$2({
type: Number
})
], EnvironmentModelViewerElement.prototype, "exposure", void 0);
__decorate$7([
n$2({
type: String,
attribute: 'tone-mapping'
})
], EnvironmentModelViewerElement.prototype, "toneMapping", void 0);
__decorate$7([
n$2({
type: String,
attribute: 'skybox-height'
})
], EnvironmentModelViewerElement.prototype, "skyboxHeight", void 0);
return EnvironmentModelViewerElement;
};
var CloseIcon = b$1`
<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#000000">
<!-- NOTE(cdata): This SVG filter is a stop-gap until we can implement
support for dynamic re-coloring of UI components -->
<defs>
<filter id="drop-shadow" x="-100%" y="-100%" width="300%" height="300%">
<feGaussianBlur in="SourceAlpha" stdDeviation="1"/>
<feOffset dx="0" dy="0" result="offsetblur"/>
<feFlood flood-color="#000000"/>
<feComposite in2="offsetblur" operator="in"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<path filter="url(#drop-shadow)" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>`;
var ControlsPrompt = b$1`
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="25" height="36">
<defs>
<path id="A" d="M.001.232h24.997V36H.001z" />
</defs>
<g transform="translate(-11 -4)" fill="none" fill-rule="evenodd">
<path fill-opacity="0" fill="#fff" d="M0 0h44v44H0z" />
<g transform="translate(11 3)">
<path d="M8.733 11.165c.04-1.108.766-2.027 1.743-2.307a2.54 2.54 0 0 1 .628-.089c.16 0 .314.017.463.044 1.088.2 1.9 1.092 1.9 2.16v8.88h1.26c2.943-1.39 5-4.45 5-8.025a9.01 9.01 0 0 0-1.9-5.56l-.43-.5c-.765-.838-1.683-1.522-2.712-2-1.057-.49-2.226-.77-3.46-.77s-2.4.278-3.46.77c-1.03.478-1.947 1.162-2.71 2l-.43.5a9.01 9.01 0 0 0-1.9 5.56 9.04 9.04 0 0 0 .094 1.305c.03.21.088.41.13.617l.136.624c.083.286.196.56.305.832l.124.333a8.78 8.78 0 0 0 .509.953l.065.122a8.69 8.69 0 0 0 3.521 3.191l1.11.537v-9.178z" fill-opacity=".5" fill="#e4e4e4" />
<path d="M22.94 26.218l-2.76 7.74c-.172.485-.676.8-1.253.8H12.24c-1.606 0-3.092-.68-3.98-1.82-1.592-2.048-3.647-3.822-6.11-5.27-.095-.055-.15-.137-.152-.23-.004-.1.046-.196.193-.297.56-.393 1.234-.6 1.926-.6a3.43 3.43 0 0 1 .691.069l4.922.994V10.972c0-.663.615-1.203 1.37-1.203s1.373.54 1.373 1.203v9.882h2.953c.273 0 .533.073.757.21l6.257 3.874c.027.017.045.042.07.06.41.296.586.77.426 1.22M4.1 16.614c-.024-.04-.042-.083-.065-.122a8.69 8.69 0 0 1-.509-.953c-.048-.107-.08-.223-.124-.333l-.305-.832c-.058-.202-.09-.416-.136-.624l-.13-.617a9.03 9.03 0 0 1-.094-1.305c0-2.107.714-4.04 1.9-5.56l.43-.5c.764-.84 1.682-1.523 2.71-2 1.058-.49 2.226-.77 3.46-.77s2.402.28 3.46.77c1.03.477 1.947 1.16 2.712 2l.428.5a9 9 0 0 1 1.901 5.559c0 3.577-2.056 6.636-5 8.026h-1.26v-8.882c0-1.067-.822-1.96-1.9-2.16-.15-.028-.304-.044-.463-.044-.22 0-.427.037-.628.09-.977.28-1.703 1.198-1.743 2.306v9.178l-1.11-.537C6.18 19.098 4.96 18 4.1 16.614M22.97 24.09l-6.256-3.874c-.102-.063-.218-.098-.33-.144 2.683-1.8 4.354-4.855 4.354-8.243 0-.486-.037-.964-.104-1.43a9.97 9.97 0 0 0-1.57-4.128l-.295-.408-.066-.092a10.05 10.05 0 0 0-.949-1.078c-.342-.334-.708-.643-1.094-.922-1.155-.834-2.492-1.412-3.94-1.65l-.732-.088-.748-.03a9.29 9.29 0 0 0-1.482.119c-1.447.238-2.786.816-3.94 1.65a9.33 9.33 0 0 0-.813.686 9.59 9.59 0 0 0-.845.877l-.385.437-.36.5-.288.468-.418.778-.04.09c-.593 1.28-.93 2.71-.93 4.222 0 3.832 2.182 7.342 5.56 8.938l1.437.68v4.946L5 25.64a4.44 4.44 0 0 0-.888-.086c-.017 0-.034.003-.05.003-.252.004-.503.033-.75.08a5.08 5.08 0 0 0-.237.056c-.193.046-.382.107-.568.18-.075.03-.15.057-.225.1-.25.114-.494.244-.723.405a1.31 1.31 0 0 0-.566 1.122 1.28 1.28 0 0 0 .645 1.051C4 29.925 5.96 31.614 7.473 33.563a5.06 5.06 0 0 0 .434.491c1.086 1.082 2.656 1.713 4.326 1.715h6.697c.748-.001 1.43-.333 1.858-.872.142-.18.256-.38.336-.602l2.757-7.74c.094-.26.13-.53.112-.794s-.088-.52-.203-.76a2.19 2.19 0 0 0-.821-.91" fill-opacity=".6" fill="#000" />
<path d="M22.444 24.94l-6.257-3.874a1.45 1.45 0 0 0-.757-.211h-2.953v-9.88c0-.663-.616-1.203-1.373-1.203s-1.37.54-1.37 1.203v16.643l-4.922-.994a3.44 3.44 0 0 0-.692-.069 3.35 3.35 0 0 0-1.925.598c-.147.102-.198.198-.194.298.004.094.058.176.153.23 2.462 1.448 4.517 3.22 6.11 5.27.887 1.14 2.373 1.82 3.98 1.82h6.686c.577 0 1.08-.326 1.253-.8l2.76-7.74c.16-.448-.017-.923-.426-1.22-.025-.02-.043-.043-.07-.06z" fill="#fff" />
<g transform="translate(0 .769)">
<mask id="B" fill="#fff">
<use xlink:href="#A" />
</mask>
<path d="M23.993 24.992a1.96 1.96 0 0 1-.111.794l-2.758 7.74c-.08.22-.194.423-.336.602-.427.54-1.11.87-1.857.872h-6.698c-1.67-.002-3.24-.633-4.326-1.715-.154-.154-.3-.318-.434-.49C5.96 30.846 4 29.157 1.646 27.773c-.385-.225-.626-.618-.645-1.05a1.31 1.31 0 0 1 .566-1.122 4.56 4.56 0 0 1 .723-.405l.225-.1a4.3 4.3 0 0 1 .568-.18l.237-.056c.248-.046.5-.075.75-.08.018 0 .034-.003.05-.003.303-.001.597.027.89.086l3.722.752V20.68l-1.436-.68c-3.377-1.596-5.56-5.106-5.56-8.938 0-1.51.336-2.94.93-4.222.015-.03.025-.06.04-.09.127-.267.268-.525.418-.778.093-.16.186-.316.288-.468.063-.095.133-.186.2-.277L3.773 5c.118-.155.26-.29.385-.437.266-.3.544-.604.845-.877a9.33 9.33 0 0 1 .813-.686C6.97 2.167 8.31 1.59 9.757 1.35a9.27 9.27 0 0 1 1.481-.119 8.82 8.82 0 0 1 .748.031c.247.02.49.05.733.088 1.448.238 2.786.816 3.94 1.65.387.28.752.588 1.094.922a9.94 9.94 0 0 1 .949 1.078l.066.092c.102.133.203.268.295.408a9.97 9.97 0 0 1 1.571 4.128c.066.467.103.945.103 1.43 0 3.388-1.67 6.453-4.353 8.243.11.046.227.08.33.144l6.256 3.874c.37.23.645.55.82.9.115.24.185.498.203.76m.697-1.195c-.265-.55-.677-1.007-1.194-1.326l-5.323-3.297c2.255-2.037 3.564-4.97 3.564-8.114 0-2.19-.637-4.304-1.84-6.114-.126-.188-.26-.37-.4-.552-.645-.848-1.402-1.6-2.252-2.204C15.472.91 13.393.232 11.238.232A10.21 10.21 0 0 0 5.23 2.19c-.848.614-1.606 1.356-2.253 2.205-.136.18-.272.363-.398.55C1.374 6.756.737 8.87.737 11.06c0 4.218 2.407 8.08 6.133 9.842l.863.41v3.092l-2.525-.51c-.356-.07-.717-.106-1.076-.106a5.45 5.45 0 0 0-3.14.996c-.653.46-1.022 1.202-.99 1.983a2.28 2.28 0 0 0 1.138 1.872c2.24 1.318 4.106 2.923 5.543 4.772 1.26 1.62 3.333 2.59 5.55 2.592h6.698c1.42-.001 2.68-.86 3.134-2.138l2.76-7.74c.272-.757.224-1.584-.134-2.325" fill-opacity=".05" fill="#000" mask="url(#B)" />
</g>
</g>
</g>
</svg>`;
var ARGlyph = b$1`
<svg version="1.1" id="view_x5F_in_x5F_AR_x5F_icon"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px"
viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<rect id="Bounding_Box" x="0" y="0" fill="none" width="24" height="24"/>
<g id="Art_layer">
<path d="M3,4c0-0.55,0.45-1,1-1h2V1H4C2.35,1,1,2.35,1,4v2h2V4z"/>
<path d="M20,3c0.55,0,1,0.45,1,1v2h2V4c0-1.65-1.35-3-3-3h-2v2H20z"/>
<path d="M4,21c-0.55,0-1-0.45-1-1v-2H1v2c0,1.65,1.35,3,3,3h2v-2H4z"/>
<path d="M20,21c0.55,0,1-0.45,1-1v-2h2v2c0,1.65-1.35,3-3,3h-2v-2H20z"/>
<g>
<path d="M18.25,7.6l-5.5-3.18c-0.46-0.27-1.04-0.27-1.5,0L5.75,7.6C5.29,7.87,5,8.36,5,8.9v6.35c0,0.54,0.29,1.03,0.75,1.3
l5.5,3.18c0.46,0.27,1.04,0.27,1.5,0l5.5-3.18c0.46-0.27,0.75-0.76,0.75-1.3V8.9C19,8.36,18.71,7.87,18.25,7.6z M7,14.96v-4.62
l4,2.32v4.61L7,14.96z M12,10.93L8,8.61l4-2.31l4,2.31L12,10.93z M13,17.27v-4.61l4-2.32v4.62L13,17.27z"/>
</g>
</g>
</svg>`;
const templateResult = b$1`
<style>
:host {
display: block;
position: relative;
contain: strict;
width: 300px;
height: 150px;
}
.container {
position: relative;
overflow: hidden;
}
.userInput {
width: 100%;
height: 100%;
display: none;
position: relative;
outline-offset: -1px;
outline-width: 1px;
}
canvas {
position: absolute;
display: none;
pointer-events: none;
/* NOTE(cdata): Chrome 76 and below apparently have a bug
* that causes our canvas not to display pixels unless it is
* on its own render layer
* @see https://github.com/google/model-viewer/pull/755#issuecomment-536597893
*/
transform: translateZ(0);
}
.show {
display: block;
}
/* Adapted from HTML5 Boilerplate
*
* @see https://github.com/h5bp/html5-boilerplate/blob/ceb4620c78fc82e13534fc44202a3f168754873f/dist/css/main.css#L122-L133 */
.screen-reader-only {
border: 0;
left: 0;
top: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
pointer-events: none;
}
.slot {
position: absolute;
pointer-events: none;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.slot > * {
pointer-events: initial;
}
.annotation-wrapper ::slotted(*) {
opacity: var(--max-hotspot-opacity, 1);
transition: opacity 0.3s;
}
.pointer-tumbling .annotation-wrapper ::slotted(*) {
pointer-events: none;
}
.annotation-wrapper ::slotted(*) {
pointer-events: initial;
}
.annotation-wrapper.hide ::slotted(*) {
opacity: var(--min-hotspot-opacity, 0.25);
}
.slot.poster {
display: none;
background-color: inherit;
}
.slot.poster.show {
display: inherit;
}
.slot.poster > * {
pointer-events: initial;
}
.slot.poster:not(.show) > * {
pointer-events: none;
}
#default-poster {
width: 100%;
height: 100%;
/* The default poster is a <button> so we need to set display
* to prevent it from being affected by text-align: */
display: block;
position: absolute;
border: none;
padding: 0;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
background-color: #fff0;
}
#default-progress-bar {
display: block;
position: relative;
width: 100%;
height: 100%;
pointer-events: none;
overflow: hidden;
}
#default-progress-bar > .bar {
position: absolute;
top: 0;
left