solid-ui 3.0.6 → 3.1.1-test.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +146 -2
- package/dist/acl/access-groups.js +1 -1
- package/dist/components/button/index.d.ts +1 -0
- package/dist/components/button/index.esm.js +546 -0
- package/dist/components/button/index.esm.js.map +1 -0
- package/dist/components/button/index.esm.min.js +268 -0
- package/dist/components/button/index.esm.min.js.map +1 -0
- package/dist/components/button/index.js +428 -0
- package/dist/components/button/index.js.map +1 -0
- package/dist/components/button/index.min.js +257 -0
- package/dist/components/button/index.min.js.map +1 -0
- package/dist/components/combobox/index.d.ts +1 -0
- package/dist/components/combobox/index.esm.js +953 -0
- package/dist/components/combobox/index.esm.js.map +1 -0
- package/dist/components/combobox/index.esm.min.js +339 -0
- package/dist/components/combobox/index.esm.min.js.map +1 -0
- package/dist/components/combobox/index.js +782 -0
- package/dist/components/combobox/index.js.map +1 -0
- package/dist/components/combobox/index.min.js +328 -0
- package/dist/components/combobox/index.min.js.map +1 -0
- package/dist/components/footer/index.d.ts +1 -0
- package/dist/components/footer/index.esm.js +24406 -0
- package/dist/components/footer/index.esm.js.map +1 -0
- package/dist/components/footer/index.esm.min.js +137 -0
- package/dist/components/footer/index.esm.min.js.map +1 -0
- package/dist/components/footer/index.js +23303 -0
- package/dist/components/footer/index.js.map +1 -0
- package/dist/components/footer/index.min.js +125 -0
- package/dist/components/footer/index.min.js.map +1 -0
- package/dist/components/header/index.d.ts +1 -0
- package/dist/components/header/index.esm.js +1936 -0
- package/dist/components/header/index.esm.js.map +1 -0
- package/dist/components/header/index.esm.min.js +1125 -0
- package/dist/components/header/index.esm.min.js.map +1 -0
- package/dist/components/header/index.js +1897 -0
- package/dist/components/header/index.js.map +1 -0
- package/dist/components/header/index.min.js +1126 -0
- package/dist/components/header/index.min.js.map +1 -0
- package/dist/components/loginButton/index.d.ts +1 -0
- package/dist/components/loginButton/index.esm.js +761 -0
- package/dist/components/loginButton/index.esm.js.map +1 -0
- package/dist/components/loginButton/index.esm.min.js +444 -0
- package/dist/components/loginButton/index.esm.min.js.map +1 -0
- package/dist/components/loginButton/index.js +743 -0
- package/dist/components/loginButton/index.js.map +1 -0
- package/dist/components/loginButton/index.min.js +444 -0
- package/dist/components/loginButton/index.min.js.map +1 -0
- package/dist/components/photoCapture/index.d.ts +1 -0
- package/dist/components/photoCapture/index.esm.js +966 -0
- package/dist/components/photoCapture/index.esm.js.map +1 -0
- package/dist/components/photoCapture/index.esm.min.js +304 -0
- package/dist/components/photoCapture/index.esm.min.js.map +1 -0
- package/dist/components/photoCapture/index.js +848 -0
- package/dist/components/photoCapture/index.js.map +1 -0
- package/dist/components/photoCapture/index.min.js +293 -0
- package/dist/components/photoCapture/index.min.js.map +1 -0
- package/dist/components/select/index.d.ts +1 -0
- package/dist/components/select/index.esm.js +939 -0
- package/dist/components/select/index.esm.js.map +1 -0
- package/dist/components/select/index.esm.min.js +370 -0
- package/dist/components/select/index.esm.min.js.map +1 -0
- package/dist/components/select/index.js +771 -0
- package/dist/components/select/index.js.map +1 -0
- package/dist/components/select/index.min.js +359 -0
- package/dist/components/select/index.min.js.map +1 -0
- package/dist/components/signupButton/index.d.ts +1 -0
- package/dist/components/signupButton/index.esm.js +270 -0
- package/dist/components/signupButton/index.esm.js.map +1 -0
- package/dist/components/signupButton/index.esm.min.js +82 -0
- package/dist/components/signupButton/index.esm.min.js.map +1 -0
- package/dist/components/signupButton/index.js +264 -0
- package/dist/components/signupButton/index.js.map +1 -0
- package/dist/components/signupButton/index.min.js +82 -0
- package/dist/components/signupButton/index.min.js.map +1 -0
- package/dist/footer/index.d.ts.map +1 -1
- package/dist/footer/index.js +8 -4
- package/dist/footer/index.js.map +1 -1
- package/dist/icons/v2/icons-svg/contactIcons.d.ts +3 -0
- package/dist/icons/v2/icons-svg/contactIcons.d.ts.map +1 -0
- package/dist/icons/v2/icons-svg/contactIcons.js +27 -0
- package/dist/icons/v2/icons-svg/contactIcons.js.map +1 -0
- package/dist/icons/v2/icons-svg/headerIcons.d.ts +18 -0
- package/dist/icons/v2/icons-svg/headerIcons.d.ts.map +1 -0
- package/dist/icons/v2/icons-svg/headerIcons.js +245 -0
- package/dist/icons/v2/icons-svg/headerIcons.js.map +1 -0
- package/dist/icons/v2/icons-svg/pngIcons.d.ts +3 -0
- package/dist/icons/v2/icons-svg/pngIcons.d.ts.map +1 -0
- package/dist/icons/v2/icons-svg/pngIcons.js +4 -0
- package/dist/icons/v2/icons-svg/pngIcons.js.map +1 -0
- package/dist/icons/v2/icons-svg/profileIcons.d.ts +23 -0
- package/dist/icons/v2/icons-svg/profileIcons.d.ts.map +1 -0
- package/dist/icons/v2/icons-svg/profileIcons.js +317 -0
- package/dist/icons/v2/icons-svg/profileIcons.js.map +1 -0
- package/dist/login/login.d.ts.map +1 -1
- package/dist/login/login.js +12 -2
- package/dist/login/login.js.map +1 -1
- package/dist/matrix/matrix.js.map +1 -1
- package/dist/pad.d.ts.map +1 -1
- package/dist/pad.js +13 -13
- package/dist/pad.js.map +1 -1
- package/dist/solid-ui.esm.js +9627 -12206
- package/dist/solid-ui.esm.js.map +1 -1
- package/dist/solid-ui.esm.min.js +15 -14
- package/dist/solid-ui.esm.min.js.map +1 -1
- package/dist/solid-ui.js +12621 -14833
- package/dist/solid-ui.js.map +1 -1
- package/dist/solid-ui.min.js +23 -22
- package/dist/solid-ui.min.js.map +1 -1
- package/dist/tabs.js +2 -2
- package/dist/tabs.js.map +1 -1
- package/dist/utils/headerFooterHelpers.d.ts.map +1 -1
- package/dist/utils/headerFooterHelpers.js +11 -2
- package/dist/utils/headerFooterHelpers.js.map +1 -1
- package/dist/v2/components/actions/button/Button.d.ts +97 -0
- package/dist/v2/components/actions/button/Button.d.ts.map +1 -0
- package/dist/v2/components/actions/button/Button.js +325 -0
- package/dist/v2/components/actions/button/Button.js.map +1 -0
- package/dist/v2/components/actions/button/Button.test.d.ts +2 -0
- package/dist/v2/components/actions/button/Button.test.d.ts.map +1 -0
- package/dist/v2/components/actions/button/Button.test.js +117 -0
- package/dist/v2/components/actions/button/Button.test.js.map +1 -0
- package/dist/v2/components/actions/button/index.d.ts +8 -0
- package/dist/v2/components/actions/button/index.d.ts.map +1 -0
- package/dist/v2/components/actions/button/index.js +7 -0
- package/dist/v2/components/actions/button/index.js.map +1 -0
- package/dist/v2/components/auth/loginButton/LoginButton.d.ts +62 -0
- package/dist/v2/components/auth/loginButton/LoginButton.d.ts.map +1 -0
- package/dist/v2/components/auth/loginButton/LoginButton.js +539 -0
- package/dist/v2/components/auth/loginButton/LoginButton.js.map +1 -0
- package/dist/v2/components/auth/loginButton/LoginButton.test.d.ts +2 -0
- package/dist/v2/components/auth/loginButton/LoginButton.test.d.ts.map +1 -0
- package/dist/v2/components/auth/loginButton/LoginButton.test.js +53 -0
- package/dist/v2/components/auth/loginButton/LoginButton.test.js.map +1 -0
- package/dist/v2/components/auth/loginButton/downArrow.d.ts +2 -0
- package/dist/v2/components/auth/loginButton/downArrow.d.ts.map +1 -0
- package/dist/v2/components/auth/loginButton/downArrow.js +10 -0
- package/dist/v2/components/auth/loginButton/downArrow.js.map +1 -0
- package/dist/v2/components/auth/loginButton/index.d.ts +3 -0
- package/dist/v2/components/auth/loginButton/index.d.ts.map +1 -0
- package/dist/v2/components/auth/loginButton/index.js +7 -0
- package/dist/v2/components/auth/loginButton/index.js.map +1 -0
- package/dist/v2/components/auth/signupButton/SignupButton.d.ts +36 -0
- package/dist/v2/components/auth/signupButton/SignupButton.d.ts.map +1 -0
- package/dist/v2/components/auth/signupButton/SignupButton.js +84 -0
- package/dist/v2/components/auth/signupButton/SignupButton.js.map +1 -0
- package/dist/v2/components/auth/signupButton/SignupButton.test.d.ts +2 -0
- package/dist/v2/components/auth/signupButton/SignupButton.test.d.ts.map +1 -0
- package/dist/v2/components/auth/signupButton/SignupButton.test.js +49 -0
- package/dist/v2/components/auth/signupButton/SignupButton.test.js.map +1 -0
- package/dist/v2/components/auth/signupButton/index.d.ts +3 -0
- package/dist/v2/components/auth/signupButton/index.d.ts.map +1 -0
- package/dist/v2/components/auth/signupButton/index.js +7 -0
- package/dist/v2/components/auth/signupButton/index.js.map +1 -0
- package/dist/v2/components/forms/combobox/Combobox.d.ts +82 -0
- package/dist/v2/components/forms/combobox/Combobox.d.ts.map +1 -0
- package/dist/v2/components/forms/combobox/Combobox.js +506 -0
- package/dist/v2/components/forms/combobox/Combobox.js.map +1 -0
- package/dist/v2/components/forms/combobox/Combobox.test.d.ts +2 -0
- package/dist/v2/components/forms/combobox/Combobox.test.d.ts.map +1 -0
- package/dist/v2/components/forms/combobox/Combobox.test.js +201 -0
- package/dist/v2/components/forms/combobox/Combobox.test.js.map +1 -0
- package/dist/v2/components/forms/combobox/comboboxTypes.d.ts +6 -0
- package/dist/v2/components/forms/combobox/comboboxTypes.d.ts.map +1 -0
- package/dist/v2/components/forms/combobox/comboboxTypes.js +2 -0
- package/dist/v2/components/forms/combobox/comboboxTypes.js.map +1 -0
- package/dist/v2/components/forms/combobox/index.d.ts +3 -0
- package/dist/v2/components/forms/combobox/index.d.ts.map +1 -0
- package/dist/v2/components/forms/combobox/index.js +7 -0
- package/dist/v2/components/forms/combobox/index.js.map +1 -0
- package/dist/v2/components/forms/select/Select.d.ts +68 -0
- package/dist/v2/components/forms/select/Select.d.ts.map +1 -0
- package/dist/v2/components/forms/select/Select.js +499 -0
- package/dist/v2/components/forms/select/Select.js.map +1 -0
- package/dist/v2/components/forms/select/Select.test.d.ts +2 -0
- package/dist/v2/components/forms/select/Select.test.d.ts.map +1 -0
- package/dist/v2/components/forms/select/Select.test.js +168 -0
- package/dist/v2/components/forms/select/Select.test.js.map +1 -0
- package/dist/v2/components/forms/select/index.d.ts +3 -0
- package/dist/v2/components/forms/select/index.d.ts.map +1 -0
- package/dist/v2/components/forms/select/index.js +7 -0
- package/dist/v2/components/forms/select/index.js.map +1 -0
- package/dist/v2/components/forms/shared/downArrow.d.ts +2 -0
- package/dist/v2/components/forms/shared/downArrow.d.ts.map +1 -0
- package/dist/v2/components/forms/shared/downArrow.js +10 -0
- package/dist/v2/components/forms/shared/downArrow.js.map +1 -0
- package/dist/v2/components/forms/shared/keyboard.d.ts +7 -0
- package/dist/v2/components/forms/shared/keyboard.d.ts.map +1 -0
- package/dist/v2/components/forms/shared/keyboard.js +56 -0
- package/dist/v2/components/forms/shared/keyboard.js.map +1 -0
- package/dist/v2/components/forms/shared/listboxStyles.d.ts +2 -0
- package/dist/v2/components/forms/shared/listboxStyles.d.ts.map +1 -0
- package/dist/v2/components/forms/shared/listboxStyles.js +96 -0
- package/dist/v2/components/forms/shared/listboxStyles.js.map +1 -0
- package/dist/v2/components/forms/shared/listboxTemplate.d.ts +11 -0
- package/dist/v2/components/forms/shared/listboxTemplate.d.ts.map +1 -0
- package/dist/v2/components/forms/shared/listboxTemplate.js +37 -0
- package/dist/v2/components/forms/shared/listboxTemplate.js.map +1 -0
- package/dist/v2/components/forms/shared/optionTypes.d.ts +6 -0
- package/dist/v2/components/forms/shared/optionTypes.d.ts.map +1 -0
- package/dist/v2/components/forms/shared/optionTypes.js +2 -0
- package/dist/v2/components/forms/shared/optionTypes.js.map +1 -0
- package/dist/v2/components/layout/footer/Footer.d.ts +60 -0
- package/dist/v2/components/layout/footer/Footer.d.ts.map +1 -0
- package/dist/v2/components/layout/footer/Footer.js +148 -0
- package/dist/v2/components/layout/footer/Footer.js.map +1 -0
- package/dist/v2/components/layout/footer/Footer.test.d.ts +2 -0
- package/dist/v2/components/layout/footer/Footer.test.d.ts.map +1 -0
- package/dist/v2/components/layout/footer/Footer.test.js +53 -0
- package/dist/v2/components/layout/footer/Footer.test.js.map +1 -0
- package/dist/v2/components/layout/footer/index.d.ts +3 -0
- package/dist/v2/components/layout/footer/index.d.ts.map +1 -0
- package/dist/v2/components/layout/footer/index.js +7 -0
- package/dist/v2/components/layout/footer/index.js.map +1 -0
- package/dist/v2/components/layout/header/Header.d.ts +155 -0
- package/dist/v2/components/layout/header/Header.d.ts.map +1 -0
- package/dist/v2/components/layout/header/Header.js +845 -0
- package/dist/v2/components/layout/header/Header.js.map +1 -0
- package/dist/v2/components/layout/header/header.test.d.ts +2 -0
- package/dist/v2/components/layout/header/header.test.d.ts.map +1 -0
- package/dist/v2/components/layout/header/header.test.js +242 -0
- package/dist/v2/components/layout/header/header.test.js.map +1 -0
- package/dist/v2/components/layout/header/index.d.ts +4 -0
- package/dist/v2/components/layout/header/index.d.ts.map +1 -0
- package/dist/v2/components/layout/header/index.js +7 -0
- package/dist/v2/components/layout/header/index.js.map +1 -0
- package/dist/v2/components/media/photoCapture/PhotoCapture.d.ts +200 -0
- package/dist/v2/components/media/photoCapture/PhotoCapture.d.ts.map +1 -0
- package/dist/v2/components/media/photoCapture/PhotoCapture.js +723 -0
- package/dist/v2/components/media/photoCapture/PhotoCapture.js.map +1 -0
- package/dist/v2/components/media/photoCapture/PhotoCapture.test.d.ts +2 -0
- package/dist/v2/components/media/photoCapture/PhotoCapture.test.d.ts.map +1 -0
- package/dist/v2/components/media/photoCapture/PhotoCapture.test.js +157 -0
- package/dist/v2/components/media/photoCapture/PhotoCapture.test.js.map +1 -0
- package/dist/v2/components/media/photoCapture/index.d.ts +3 -0
- package/dist/v2/components/media/photoCapture/index.d.ts.map +1 -0
- package/dist/v2/components/media/photoCapture/index.js +7 -0
- package/dist/v2/components/media/photoCapture/index.js.map +1 -0
- package/dist/versionInfo.js +15 -15
- package/dist/widgets/buttons.d.ts +10 -3
- package/dist/widgets/buttons.d.ts.map +1 -1
- package/dist/widgets/buttons.js +81 -7
- package/dist/widgets/buttons.js.map +1 -1
- package/package.json +139 -46
|
@@ -0,0 +1,848 @@
|
|
|
1
|
+
/******/ (() => { // webpackBootstrap
|
|
2
|
+
/******/ "use strict";
|
|
3
|
+
|
|
4
|
+
// UNUSED EXPORTS: PhotoCapture
|
|
5
|
+
|
|
6
|
+
;// ./node_modules/@lit/reactive-element/css-tag.js
|
|
7
|
+
/**
|
|
8
|
+
* @license
|
|
9
|
+
* Copyright 2019 Google LLC
|
|
10
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
11
|
+
*/
|
|
12
|
+
const t=globalThis,e=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s=Symbol(),o=new WeakMap;class n{constructor(t,e,o){if(this._$cssResult$=!0,o!==s)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e}get styleSheet(){let t=this.o;const s=this.t;if(e&&void 0===t){const e=void 0!==s&&1===s.length;e&&(t=o.get(s)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&o.set(s,t))}return t}toString(){return this.cssText}}const r=t=>new n("string"==typeof t?t:t+"",void 0,s),i=(t,...e)=>{const o=1===t.length?t[0]:e.reduce((e,s,o)=>e+(t=>{if(!0===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(s)+t[o+1],t[0]);return new n(o,t,s)},S=(s,o)=>{if(e)s.adoptedStyleSheets=o.map(t=>t instanceof CSSStyleSheet?t:t.styleSheet);else for(const e of o){const o=document.createElement("style"),n=t.litNonce;void 0!==n&&o.setAttribute("nonce",n),o.textContent=e.cssText,s.appendChild(o)}},c=e?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return r(e)})(t):t;
|
|
13
|
+
//# sourceMappingURL=css-tag.js.map
|
|
14
|
+
|
|
15
|
+
;// ./node_modules/@lit/reactive-element/reactive-element.js
|
|
16
|
+
|
|
17
|
+
/**
|
|
18
|
+
* @license
|
|
19
|
+
* Copyright 2017 Google LLC
|
|
20
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
21
|
+
*/const{is:reactive_element_i,defineProperty:reactive_element_e,getOwnPropertyDescriptor:h,getOwnPropertyNames:reactive_element_r,getOwnPropertySymbols:reactive_element_o,getPrototypeOf:reactive_element_n}=Object,a=globalThis,reactive_element_c=a.trustedTypes,l=reactive_element_c?reactive_element_c.emptyScript:"",p=a.reactiveElementPolyfillSupport,d=(t,s)=>t,u={toAttribute(t,s){switch(s){case Boolean:t=t?l: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=(t,s)=>!reactive_element_i(t,s),b={attribute:!0,type:String,converter:u,reflect:!1,useDefault:!1,hasChanged:f};Symbol.metadata??=Symbol("metadata"),a.litPropertyMetadata??=new WeakMap;class y extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??=[]).push(t)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,s=b){if(s.state&&(s.attribute=!1),this._$Ei(),this.prototype.hasOwnProperty(t)&&((s=Object.create(s)).wrapped=!0),this.elementProperties.set(t,s),!s.noAccessor){const i=Symbol(),h=this.getPropertyDescriptor(t,i,s);void 0!==h&&reactive_element_e(this.prototype,t,h)}}static getPropertyDescriptor(t,s,i){const{get:e,set:r}=h(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:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??b}static _$Ei(){if(this.hasOwnProperty(d("elementProperties")))return;const t=reactive_element_n(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties)}static finalize(){if(this.hasOwnProperty(d("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(d("properties"))){const t=this.properties,s=[...reactive_element_r(t),...reactive_element_o(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(s))}else void 0!==s&&i.push(c(s));return i}static _$Eu(t,s){const i=s.attribute;return!1===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev()}_$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??=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(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),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&&!0===i.reflect){const h=(void 0!==i.converter?.toAttribute?i.converter:u).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;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=!1,h){if(void 0!==t){const r=this.constructor;if(!1===e&&(h=this[t]),i??=r.getPropertyOptions(t),!((i.hasChanged??f)(h,s)||i.useDefault&&i.reflect&&h===this._$Ej?.get(t)&&!this.hasAttribute(r._$Eu(t,i))))return;this.C(t,s,i)}!1===this.isUpdatePending&&(this._$ES=this._$EP())}C(t,s,{useDefault:i,reflect:e,wrapped:h},r){i&&!(this._$Ej??=new Map).has(t)&&(this._$Ej.set(t,r??s??this[t]),!0!==h||void 0!==r)||(this._$AL.has(t)||(this.hasUpdated||i||(s=void 0),this._$AL.set(t,s)),!0===e&&this._$Em!==t&&(this._$Eq??=new Set).add(t))}async _$EP(){this.isUpdatePending=!0;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.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];!0!==t||this._$AL.has(s)||void 0===e||this.C(s,void 0,i,e)}}let t=!1;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=!1,this._$EM(),s}t&&this._$AE(s)}willUpdate(t){}_$AE(t){this._$EO?.forEach(t=>t.hostUpdated?.()),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}_$EM(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return!0}update(t){this._$Eq&&=this._$Eq.forEach(t=>this._$ET(t,this[t])),this._$EM()}updated(t){}firstUpdated(t){}}y.elementStyles=[],y.shadowRootOptions={mode:"open"},y[d("elementProperties")]=new Map,y[d("finalized")]=new Map,p?.({ReactiveElement:y}),(a.reactiveElementVersions??=[]).push("2.1.2");
|
|
22
|
+
//# sourceMappingURL=reactive-element.js.map
|
|
23
|
+
|
|
24
|
+
;// ./node_modules/lit-html/lit-html.js
|
|
25
|
+
/**
|
|
26
|
+
* @license
|
|
27
|
+
* Copyright 2017 Google LLC
|
|
28
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
29
|
+
*/
|
|
30
|
+
const lit_html_t=globalThis,lit_html_i=t=>t,lit_html_s=lit_html_t.trustedTypes,lit_html_e=lit_html_s?lit_html_s.createPolicy("lit-html",{createHTML:t=>t}):void 0,lit_html_h="$lit$",lit_html_o=`lit$${Math.random().toFixed(9).slice(2)}$`,lit_html_n="?"+lit_html_o,lit_html_r=`<${lit_html_n}>`,lit_html_l=document,lit_html_c=()=>lit_html_l.createComment(""),lit_html_a=t=>null===t||"object"!=typeof t&&"function"!=typeof t,lit_html_u=Array.isArray,lit_html_d=t=>lit_html_u(t)||"function"==typeof t?.[Symbol.iterator],lit_html_f="[ \t\n\f\r]",v=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,_=/-->/g,m=/>/g,lit_html_p=RegExp(`>|${lit_html_f}(?:([^\\s"'>=/]+)(${lit_html_f}*=${lit_html_f}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),g=/'/g,$=/"/g,lit_html_y=/^(?:script|style|textarea|title)$/i,x=t=>(i,...s)=>({_$litType$:t,strings:i,values:s}),lit_html_b=x(1),w=x(2),T=x(3),E=Symbol.for("lit-noChange"),A=Symbol.for("lit-nothing"),C=new WeakMap,P=lit_html_l.createTreeWalker(lit_html_l,129);function V(t,i){if(!lit_html_u(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==lit_html_e?lit_html_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]?(lit_html_y.test(u[2])&&(n=RegExp("</"+u[2],"g")),c=lit_html_p):void 0!==u[3]&&(c=lit_html_p):c===lit_html_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]?lit_html_p:'"'===u[3]?$:g):c===$||c===g?c=lit_html_p:c===_||c===m?c=v:(c=lit_html_p,n=void 0);const x=c===lit_html_p&&t[i+1].startsWith("/>")?" ":"";l+=c===v?s+lit_html_r:d>=0?(e.push(a),s.slice(0,d)+lit_html_h+s.slice(d)+lit_html_o+x):s+lit_html_o+(-2===d?i:x)}return[V(t,l+(t[s]||"<?>")+(2===i?"</svg>":3===i?"</math>":"")),e]};class lit_html_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=lit_html_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(lit_html_h)){const i=v[a++],s=r.getAttribute(t).split(lit_html_o),e=/([.?@])?(.*)/.exec(i);d.push({type:1,index:l,name:e[2],strings:s,ctor:"."===e[1]?I:"?"===e[1]?L:"@"===e[1]?z:H}),r.removeAttribute(t)}else t.startsWith(lit_html_o)&&(d.push({type:6,index:l}),r.removeAttribute(t));if(lit_html_y.test(r.tagName)){const t=r.textContent.split(lit_html_o),i=t.length-1;if(i>0){r.textContent=lit_html_s?lit_html_s.emptyScript:"";for(let s=0;s<i;s++)r.append(t[s],lit_html_c()),P.nextNode(),d.push({type:2,index:++l});r.append(t[i],lit_html_c())}}}else if(8===r.nodeType)if(r.data===lit_html_n)d.push({type:2,index:l});else{let t=-1;for(;-1!==(t=r.data.indexOf(lit_html_o,t+1));)d.push({type:7,index:l}),t+=lit_html_o.length-1}l++}}static createElement(t,i){const s=lit_html_l.createElement("template");return s.innerHTML=t,s}}function M(t,i,s=t,e){if(i===E)return i;let h=void 0!==e?s._$Co?.[e]:s._$Cl;const o=lit_html_a(i)?void 0:i._$litDirective$;return h?.constructor!==o&&(h?._$AO?.(!1),void 0===o?h=void 0:(h=new o(t),h._$AT(t,s,e)),void 0!==e?(s._$Co??=[])[e]=h:s._$Cl=h),void 0!==h&&(i=M(t,h._$AS(t,i.values),h,e)),i}class R{constructor(t,i){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=i}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??lit_html_l).importNode(i,!0);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=lit_html_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++}}class k{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(t,i,s,e){this.type=2,this._$AH=A,this._$AN=void 0,this._$AA=t,this._$AB=i,this._$AM=s,this.options=e,this._$Cv=e?.isConnected??!0}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),lit_html_a(t)?t===A||null==t||""===t?(this._$AH!==A&&this._$AR(),this._$AH=A):t!==this._$AH&&t!==E&&this._(t):void 0!==t._$litType$?this.$(t):void 0!==t.nodeType?this.T(t):lit_html_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&&lit_html_a(this._$AH)?this._$AA.nextSibling.data=t:this.T(lit_html_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=lit_html_S.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.get(t.strings);return void 0===i&&C.set(t.strings,i=new lit_html_S(t)),i}k(t){lit_html_u(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(lit_html_c()),this.O(lit_html_c()),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?.(!1,!0,s);t!==this._$AB;){const s=lit_html_i(t).nextSibling;lit_html_i(t).remove(),t=s}}setConnected(t){void 0===this._$AM&&(this._$Cv=t,this._$AP?.(t))}}class H{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,i,s,e,h){this.type=1,this._$AH=A,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}_$AI(t,i=this,s,e){const h=this.strings;let o=!1;if(void 0===h)t=M(this,t,i,0),o=!lit_html_a(t)||t!==this._$AH&&t!==E,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&&(r=this._$AH[n]),o||=!lit_html_a(r)||r!==this._$AH[n],r===A?t=A:t!==A&&(t+=(r??"")+h[n+1]),this._$AH[n]=r}o&&!e&&this.j(t)}j(t){t===A?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"")}}class I extends H{constructor(){super(...arguments),this.type=3}j(t){this.element[this.name]=t===A?void 0:t}}class L extends H{constructor(){super(...arguments),this.type=4}j(t){this.element.toggleAttribute(this.name,!!t&&t!==A)}}class z extends H{constructor(t,i,s,e,h){super(t,i,s,e,h),this.type=5}_$AI(t,i=this){if((t=M(this,t,i,0)??A)===E)return;const s=this._$AH,e=t===A&&s!==A||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,h=t!==A&&(s===A||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)}}class Z{constructor(t,i,s){this.element=t,this.type=6,this._$AN=void 0,this._$AM=i,this.options=s}get _$AU(){return this._$AM._$AU}_$AI(t){M(this,t)}}const j={M:lit_html_h,P:lit_html_o,A:lit_html_n,C:1,L:N,R,D:lit_html_d,V:M,I:k,H,N:L,U:z,B:I,F:Z},B=lit_html_t.litHtmlPolyfillSupport;B?.(lit_html_S,k),(lit_html_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(lit_html_c(),t),t,void 0,s??{})}return h._$AI(t),h};
|
|
31
|
+
//# sourceMappingURL=lit-html.js.map
|
|
32
|
+
|
|
33
|
+
;// ./node_modules/lit-element/lit-element.js
|
|
34
|
+
|
|
35
|
+
/**
|
|
36
|
+
* @license
|
|
37
|
+
* Copyright 2017 Google LLC
|
|
38
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
39
|
+
*/const lit_element_s=globalThis;class lit_element_i extends y{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){const t=super.createRenderRoot();return 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(!0)}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1)}render(){return E}}lit_element_i._$litElement$=!0,lit_element_i["finalized"]=!0,lit_element_s.litElementHydrateSupport?.({LitElement:lit_element_i});const lit_element_o=lit_element_s.litElementPolyfillSupport;lit_element_o?.({LitElement:lit_element_i});const lit_element_n={_$AK:(t,e,r)=>{t._$AK(e,r)},_$AL:t=>t._$AL};(lit_element_s.litElementVersions??=[]).push("4.2.2");
|
|
40
|
+
//# sourceMappingURL=lit-element.js.map
|
|
41
|
+
|
|
42
|
+
;// ./node_modules/lit/index.js
|
|
43
|
+
|
|
44
|
+
//# sourceMappingURL=index.js.map
|
|
45
|
+
|
|
46
|
+
;// ./src/v2/components/media/photoCapture/PhotoCapture.ts
|
|
47
|
+
|
|
48
|
+
/* The original code was written by Sir Tim Berners-Lee. It was made into a
|
|
49
|
+
web component by AI Model GPT-5.4
|
|
50
|
+
Prompt: Take the code from src/media/media-capture.ts and make it a
|
|
51
|
+
web component. Make it work in forms as well as not. Make it
|
|
52
|
+
configurable and follow LoginButton. */
|
|
53
|
+
|
|
54
|
+
const DEFAULT_CAPTURE_FORMAT = 'image/png';
|
|
55
|
+
class PhotoCapture extends lit_element_i {
|
|
56
|
+
static formAssociated = true;
|
|
57
|
+
static properties = {
|
|
58
|
+
label: {
|
|
59
|
+
type: String,
|
|
60
|
+
reflect: true
|
|
61
|
+
},
|
|
62
|
+
heading: {
|
|
63
|
+
type: String,
|
|
64
|
+
reflect: true
|
|
65
|
+
},
|
|
66
|
+
captureLabel: {
|
|
67
|
+
type: String,
|
|
68
|
+
attribute: 'capture-label',
|
|
69
|
+
reflect: true
|
|
70
|
+
},
|
|
71
|
+
confirmLabel: {
|
|
72
|
+
type: String,
|
|
73
|
+
attribute: 'confirm-label',
|
|
74
|
+
reflect: true
|
|
75
|
+
},
|
|
76
|
+
retakeLabel: {
|
|
77
|
+
type: String,
|
|
78
|
+
attribute: 'retake-label',
|
|
79
|
+
reflect: true
|
|
80
|
+
},
|
|
81
|
+
cancelLabel: {
|
|
82
|
+
type: String,
|
|
83
|
+
attribute: 'cancel-label',
|
|
84
|
+
reflect: true
|
|
85
|
+
},
|
|
86
|
+
presentation: {
|
|
87
|
+
type: String,
|
|
88
|
+
reflect: true
|
|
89
|
+
},
|
|
90
|
+
theme: {
|
|
91
|
+
type: String,
|
|
92
|
+
reflect: true
|
|
93
|
+
},
|
|
94
|
+
facingMode: {
|
|
95
|
+
type: String,
|
|
96
|
+
attribute: 'facing-mode',
|
|
97
|
+
reflect: true
|
|
98
|
+
},
|
|
99
|
+
constraints: {
|
|
100
|
+
type: String,
|
|
101
|
+
reflect: true
|
|
102
|
+
},
|
|
103
|
+
captureFormat: {
|
|
104
|
+
type: String,
|
|
105
|
+
attribute: 'capture-format',
|
|
106
|
+
reflect: true
|
|
107
|
+
},
|
|
108
|
+
captureQuality: {
|
|
109
|
+
type: Number,
|
|
110
|
+
attribute: 'capture-quality'
|
|
111
|
+
},
|
|
112
|
+
open: {
|
|
113
|
+
type: Boolean,
|
|
114
|
+
reflect: true
|
|
115
|
+
},
|
|
116
|
+
disabled: {
|
|
117
|
+
type: Boolean,
|
|
118
|
+
reflect: true
|
|
119
|
+
},
|
|
120
|
+
name: {
|
|
121
|
+
type: String,
|
|
122
|
+
reflect: true
|
|
123
|
+
},
|
|
124
|
+
required: {
|
|
125
|
+
type: Boolean,
|
|
126
|
+
reflect: true
|
|
127
|
+
},
|
|
128
|
+
showTrigger: {
|
|
129
|
+
type: Boolean,
|
|
130
|
+
attribute: 'show-trigger',
|
|
131
|
+
reflect: true
|
|
132
|
+
},
|
|
133
|
+
showCancelButton: {
|
|
134
|
+
type: Boolean,
|
|
135
|
+
attribute: 'show-cancel-button',
|
|
136
|
+
reflect: true
|
|
137
|
+
},
|
|
138
|
+
autoCloseOnCapture: {
|
|
139
|
+
type: Boolean,
|
|
140
|
+
attribute: 'auto-close-on-capture'
|
|
141
|
+
},
|
|
142
|
+
fileNamePrefix: {
|
|
143
|
+
type: String,
|
|
144
|
+
attribute: 'file-name-prefix',
|
|
145
|
+
reflect: true
|
|
146
|
+
},
|
|
147
|
+
value: {
|
|
148
|
+
attribute: false
|
|
149
|
+
},
|
|
150
|
+
mediaConstraints: {
|
|
151
|
+
attribute: false
|
|
152
|
+
},
|
|
153
|
+
_errorMessage: {
|
|
154
|
+
state: true
|
|
155
|
+
},
|
|
156
|
+
_previewUrl: {
|
|
157
|
+
state: true
|
|
158
|
+
},
|
|
159
|
+
_startingPreview: {
|
|
160
|
+
state: true
|
|
161
|
+
}
|
|
162
|
+
};
|
|
163
|
+
static styles = i`
|
|
164
|
+
:host {
|
|
165
|
+
display: block;
|
|
166
|
+
--photo-capture-trigger-background: var(--lavender-900, #7c4cff);
|
|
167
|
+
--photo-capture-trigger-text: var(--color-header-text, #ffffff);
|
|
168
|
+
--photo-capture-surface: var(--color-background, #ffffff);
|
|
169
|
+
--photo-capture-text: var(--gray-900, #101828);
|
|
170
|
+
--photo-capture-muted-text: var(--gray-600, #4a5565);
|
|
171
|
+
--photo-capture-border: var(--gray-200, #e5e7eb);
|
|
172
|
+
--photo-capture-hover: var(--gray-100, #f3f4f6);
|
|
173
|
+
--photo-capture-shadow: var(--box-shadow-sm, 0 1px 4px rgba(0, 0, 0, 0.12));
|
|
174
|
+
--photo-capture-overlay: rgba(0, 0, 0, 0.6);
|
|
175
|
+
--photo-capture-frame-max-width: 260px;
|
|
176
|
+
--photo-capture-radius: 8px;
|
|
177
|
+
--photo-capture-button-radius: var(--border-radius-base, 0.3125rem);
|
|
178
|
+
--photo-capture-gap: var(--spacing-2xs, 0.625rem);
|
|
179
|
+
color: var(--photo-capture-text);
|
|
180
|
+
box-sizing: border-box;
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
:host([theme='dark']) {
|
|
184
|
+
--photo-capture-surface: var(--gray-900, #111827);
|
|
185
|
+
--photo-capture-text: var(--white, #ffffff);
|
|
186
|
+
--photo-capture-muted-text: var(--gray-300, #d1d5dc);
|
|
187
|
+
--photo-capture-border: var(--gray-700, #364153);
|
|
188
|
+
--photo-capture-hover: rgba(255, 255, 255, 0.08);
|
|
189
|
+
--photo-capture-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
*, *::before, *::after {
|
|
193
|
+
box-sizing: border-box;
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
.trigger-button,
|
|
197
|
+
.action-button,
|
|
198
|
+
.cancel-button,
|
|
199
|
+
.close-button {
|
|
200
|
+
font: inherit;
|
|
201
|
+
cursor: pointer;
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
.trigger-button {
|
|
205
|
+
display: inline-flex;
|
|
206
|
+
align-items: center;
|
|
207
|
+
justify-content: center;
|
|
208
|
+
min-height: 35px;
|
|
209
|
+
padding: 0.5rem 0.9rem;
|
|
210
|
+
border: none;
|
|
211
|
+
border-radius: var(--photo-capture-button-radius);
|
|
212
|
+
background: var(--photo-capture-trigger-background);
|
|
213
|
+
color: var(--photo-capture-trigger-text);
|
|
214
|
+
transition: transform 0.2s ease;
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
.trigger-button:active {
|
|
218
|
+
transform: translateY(1px);
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
.trigger-button:disabled,
|
|
222
|
+
.action-button:disabled,
|
|
223
|
+
.cancel-button:disabled {
|
|
224
|
+
opacity: 0.55;
|
|
225
|
+
cursor: not-allowed;
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
.inline-root[hidden] {
|
|
229
|
+
display: none;
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
.dialog {
|
|
233
|
+
border: none;
|
|
234
|
+
padding: 0;
|
|
235
|
+
background: transparent;
|
|
236
|
+
outline: none;
|
|
237
|
+
overflow: visible;
|
|
238
|
+
max-width: none;
|
|
239
|
+
max-height: none;
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
.dialog::backdrop {
|
|
243
|
+
background: var(--photo-capture-overlay);
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
.panel {
|
|
247
|
+
position: relative;
|
|
248
|
+
display: flex;
|
|
249
|
+
flex-direction: column;
|
|
250
|
+
align-items: center;
|
|
251
|
+
gap: var(--photo-capture-gap);
|
|
252
|
+
width: min(100%, 340px);
|
|
253
|
+
padding: 1rem;
|
|
254
|
+
border: 1px solid var(--photo-capture-border);
|
|
255
|
+
border-radius: var(--photo-capture-radius);
|
|
256
|
+
background: var(--photo-capture-surface);
|
|
257
|
+
color: var(--photo-capture-text);
|
|
258
|
+
box-shadow: var(--photo-capture-shadow);
|
|
259
|
+
}
|
|
260
|
+
|
|
261
|
+
.panel-header {
|
|
262
|
+
display: flex;
|
|
263
|
+
align-items: center;
|
|
264
|
+
justify-content: space-between;
|
|
265
|
+
gap: 0.5rem;
|
|
266
|
+
width: 100%;
|
|
267
|
+
}
|
|
268
|
+
|
|
269
|
+
.panel-heading {
|
|
270
|
+
margin: 0;
|
|
271
|
+
font-size: 1rem;
|
|
272
|
+
font-weight: 700;
|
|
273
|
+
line-height: 1.4;
|
|
274
|
+
}
|
|
275
|
+
|
|
276
|
+
.close-button {
|
|
277
|
+
display: inline-flex;
|
|
278
|
+
align-items: center;
|
|
279
|
+
justify-content: center;
|
|
280
|
+
width: 1.75rem;
|
|
281
|
+
height: 1.75rem;
|
|
282
|
+
padding: 0;
|
|
283
|
+
border: none;
|
|
284
|
+
border-radius: 999px;
|
|
285
|
+
background: transparent;
|
|
286
|
+
color: var(--photo-capture-muted-text);
|
|
287
|
+
font-size: 1.125rem;
|
|
288
|
+
line-height: 1;
|
|
289
|
+
}
|
|
290
|
+
|
|
291
|
+
.close-button:hover,
|
|
292
|
+
.close-button:focus-visible,
|
|
293
|
+
.action-button:hover,
|
|
294
|
+
.action-button:focus-visible,
|
|
295
|
+
.cancel-button:hover,
|
|
296
|
+
.cancel-button:focus-visible {
|
|
297
|
+
background: var(--photo-capture-hover);
|
|
298
|
+
}
|
|
299
|
+
|
|
300
|
+
.viewport {
|
|
301
|
+
display: flex;
|
|
302
|
+
align-items: center;
|
|
303
|
+
justify-content: center;
|
|
304
|
+
width: 100%;
|
|
305
|
+
min-height: 200px;
|
|
306
|
+
border-radius: 0.5rem;
|
|
307
|
+
overflow: hidden;
|
|
308
|
+
background: color-mix(in srgb, var(--photo-capture-surface) 92%, #000 8%);
|
|
309
|
+
}
|
|
310
|
+
|
|
311
|
+
.viewport video,
|
|
312
|
+
.viewport img {
|
|
313
|
+
display: block;
|
|
314
|
+
width: 100%;
|
|
315
|
+
max-width: var(--photo-capture-frame-max-width);
|
|
316
|
+
height: auto;
|
|
317
|
+
border-radius: 0.5rem;
|
|
318
|
+
margin: 0 auto;
|
|
319
|
+
object-fit: cover;
|
|
320
|
+
}
|
|
321
|
+
|
|
322
|
+
.status {
|
|
323
|
+
width: 100%;
|
|
324
|
+
text-align: center;
|
|
325
|
+
color: var(--photo-capture-muted-text);
|
|
326
|
+
font-size: 0.875rem;
|
|
327
|
+
}
|
|
328
|
+
|
|
329
|
+
.status.error {
|
|
330
|
+
color: var(--color-error, #b00020);
|
|
331
|
+
}
|
|
332
|
+
|
|
333
|
+
.actions {
|
|
334
|
+
display: flex;
|
|
335
|
+
align-items: center;
|
|
336
|
+
justify-content: center;
|
|
337
|
+
flex-wrap: wrap;
|
|
338
|
+
gap: var(--photo-capture-gap);
|
|
339
|
+
width: 100%;
|
|
340
|
+
}
|
|
341
|
+
|
|
342
|
+
.action-button,
|
|
343
|
+
.cancel-button {
|
|
344
|
+
display: inline-flex;
|
|
345
|
+
align-items: center;
|
|
346
|
+
justify-content: center;
|
|
347
|
+
min-height: 2.25rem;
|
|
348
|
+
padding: 0.45rem 0.85rem;
|
|
349
|
+
border-radius: var(--photo-capture-button-radius);
|
|
350
|
+
border: 1px solid var(--photo-capture-border);
|
|
351
|
+
background: var(--photo-capture-surface);
|
|
352
|
+
color: var(--photo-capture-text);
|
|
353
|
+
font-size: var(--font-size-xxs, 0.75rem);
|
|
354
|
+
font-weight: var(--font-weight-xbold, 700);
|
|
355
|
+
line-height: 1.5;
|
|
356
|
+
}
|
|
357
|
+
|
|
358
|
+
.action-button--primary {
|
|
359
|
+
background: var(--photo-capture-trigger-background);
|
|
360
|
+
color: var(--photo-capture-trigger-text);
|
|
361
|
+
border-color: transparent;
|
|
362
|
+
}
|
|
363
|
+
`;
|
|
364
|
+
_value = null;
|
|
365
|
+
_stream = null;
|
|
366
|
+
_internals;
|
|
367
|
+
_associatedForm = null;
|
|
368
|
+
_handleFormData = event => {
|
|
369
|
+
const formData = event.formData;
|
|
370
|
+
if (!formData || !this.name || !this.value || this.disabled) return;
|
|
371
|
+
formData.append(this.name, this.value, this.value.name);
|
|
372
|
+
};
|
|
373
|
+
_handleFormReset = () => {
|
|
374
|
+
this._clearValue({
|
|
375
|
+
emitEvents: false
|
|
376
|
+
});
|
|
377
|
+
if (this.open) {
|
|
378
|
+
this._queuePreviewStart();
|
|
379
|
+
}
|
|
380
|
+
};
|
|
381
|
+
get _supportsFormInternals() {
|
|
382
|
+
return !!this._internals && typeof this._internals.setFormValue === 'function';
|
|
383
|
+
}
|
|
384
|
+
constructor() {
|
|
385
|
+
super();
|
|
386
|
+
this.label = 'Take Photo';
|
|
387
|
+
this.heading = 'Take a photo';
|
|
388
|
+
this.captureLabel = 'Take Photo';
|
|
389
|
+
this.confirmLabel = 'Use Photo';
|
|
390
|
+
this.retakeLabel = 'Retake';
|
|
391
|
+
this.cancelLabel = 'Cancel';
|
|
392
|
+
this.presentation = 'inline';
|
|
393
|
+
this.theme = 'light';
|
|
394
|
+
this.facingMode = 'user';
|
|
395
|
+
this.constraints = '';
|
|
396
|
+
this.captureFormat = DEFAULT_CAPTURE_FORMAT;
|
|
397
|
+
this.captureQuality = undefined;
|
|
398
|
+
this.open = false;
|
|
399
|
+
this.disabled = false;
|
|
400
|
+
this.name = '';
|
|
401
|
+
this.required = false;
|
|
402
|
+
this.showTrigger = false;
|
|
403
|
+
this.showCancelButton = true;
|
|
404
|
+
this.autoCloseOnCapture = false;
|
|
405
|
+
this.fileNamePrefix = '';
|
|
406
|
+
this.mediaConstraints = undefined;
|
|
407
|
+
this._errorMessage = '';
|
|
408
|
+
this._previewUrl = '';
|
|
409
|
+
this._startingPreview = false;
|
|
410
|
+
this._internals = typeof this.attachInternals === 'function' ? this.attachInternals() : null;
|
|
411
|
+
}
|
|
412
|
+
get value() {
|
|
413
|
+
return this._value;
|
|
414
|
+
}
|
|
415
|
+
set value(nextValue) {
|
|
416
|
+
const normalizedValue = nextValue instanceof File ? nextValue : null;
|
|
417
|
+
const previousValue = this._value;
|
|
418
|
+
if (previousValue === normalizedValue) return;
|
|
419
|
+
this._value = normalizedValue;
|
|
420
|
+
this._syncPreviewFromValue(normalizedValue);
|
|
421
|
+
this._syncFormValue();
|
|
422
|
+
this._syncValidity();
|
|
423
|
+
this.requestUpdate('value', previousValue);
|
|
424
|
+
}
|
|
425
|
+
get form() {
|
|
426
|
+
return (this._supportsFormInternals ? this._internals?.form : null) ?? this._associatedForm;
|
|
427
|
+
}
|
|
428
|
+
get validationMessage() {
|
|
429
|
+
return (typeof this._internals?.validationMessage === 'string' ? this._internals.validationMessage : '') || (this.required && !this.value ? 'Please capture a photo.' : '');
|
|
430
|
+
}
|
|
431
|
+
get willValidate() {
|
|
432
|
+
return typeof this._internals?.willValidate === 'boolean' ? this._internals.willValidate : !this.disabled;
|
|
433
|
+
}
|
|
434
|
+
checkValidity() {
|
|
435
|
+
if (this._internals && typeof this._internals.checkValidity === 'function') {
|
|
436
|
+
return this._internals.checkValidity();
|
|
437
|
+
}
|
|
438
|
+
return !(this.required && !this.value);
|
|
439
|
+
}
|
|
440
|
+
reportValidity() {
|
|
441
|
+
if (this._internals && typeof this._internals.reportValidity === 'function') {
|
|
442
|
+
return this._internals.reportValidity();
|
|
443
|
+
}
|
|
444
|
+
return this.checkValidity();
|
|
445
|
+
}
|
|
446
|
+
connectedCallback() {
|
|
447
|
+
super.connectedCallback();
|
|
448
|
+
this._syncAssociatedForm();
|
|
449
|
+
this._syncFormValue();
|
|
450
|
+
this._syncValidity();
|
|
451
|
+
}
|
|
452
|
+
disconnectedCallback() {
|
|
453
|
+
this._syncAssociatedForm(null);
|
|
454
|
+
this._stopStream();
|
|
455
|
+
this._revokePreviewUrl();
|
|
456
|
+
super.disconnectedCallback();
|
|
457
|
+
}
|
|
458
|
+
formResetCallback() {
|
|
459
|
+
this._handleFormReset();
|
|
460
|
+
}
|
|
461
|
+
formDisabledCallback(disabled) {
|
|
462
|
+
this.disabled = disabled;
|
|
463
|
+
}
|
|
464
|
+
updated(changed) {
|
|
465
|
+
this._syncAssociatedForm();
|
|
466
|
+
if (this.presentation === 'dialog') {
|
|
467
|
+
const dialog = this.shadowRoot?.querySelector('dialog');
|
|
468
|
+
if (dialog) {
|
|
469
|
+
if (this.open && !dialog.open) {
|
|
470
|
+
dialog.showModal();
|
|
471
|
+
} else if (!this.open && dialog.open) {
|
|
472
|
+
dialog.close();
|
|
473
|
+
}
|
|
474
|
+
}
|
|
475
|
+
}
|
|
476
|
+
if (changed.has('open') && !this.open) {
|
|
477
|
+
this._stopStream();
|
|
478
|
+
}
|
|
479
|
+
if (this.open && !this.value && !this._stream && !this._startingPreview && (changed.has('open') || changed.has('presentation') || changed.has('_previewUrl') || changed.has('value'))) {
|
|
480
|
+
this._queuePreviewStart();
|
|
481
|
+
}
|
|
482
|
+
if (changed.has('name') || changed.has('disabled') || changed.has('value')) {
|
|
483
|
+
this._syncFormValue();
|
|
484
|
+
}
|
|
485
|
+
if (changed.has('required') || changed.has('disabled') || changed.has('value')) {
|
|
486
|
+
this._syncValidity();
|
|
487
|
+
}
|
|
488
|
+
if (this._stream) {
|
|
489
|
+
const video = this.shadowRoot?.querySelector('video.capture-preview');
|
|
490
|
+
if (video && video.srcObject !== this._stream) {
|
|
491
|
+
video.srcObject = this._stream;
|
|
492
|
+
}
|
|
493
|
+
}
|
|
494
|
+
}
|
|
495
|
+
_setOpen(open) {
|
|
496
|
+
if (this.open === open) return;
|
|
497
|
+
this.open = open;
|
|
498
|
+
this.dispatchEvent(new CustomEvent('open-change', {
|
|
499
|
+
detail: {
|
|
500
|
+
open
|
|
501
|
+
},
|
|
502
|
+
bubbles: true,
|
|
503
|
+
composed: true
|
|
504
|
+
}));
|
|
505
|
+
}
|
|
506
|
+
_emitError(error, message = 'Unable to access the camera') {
|
|
507
|
+
this._errorMessage = message;
|
|
508
|
+
this.dispatchEvent(new CustomEvent('error', {
|
|
509
|
+
detail: {
|
|
510
|
+
error,
|
|
511
|
+
message
|
|
512
|
+
},
|
|
513
|
+
bubbles: true,
|
|
514
|
+
composed: true
|
|
515
|
+
}));
|
|
516
|
+
}
|
|
517
|
+
_syncAssociatedForm(nextForm = this.closest('form')) {
|
|
518
|
+
if (this._associatedForm === nextForm) return;
|
|
519
|
+
if (this._associatedForm) {
|
|
520
|
+
this._associatedForm.removeEventListener('formdata', this._handleFormData);
|
|
521
|
+
this._associatedForm.removeEventListener('reset', this._handleFormReset);
|
|
522
|
+
}
|
|
523
|
+
this._associatedForm = nextForm;
|
|
524
|
+
if (this._associatedForm && !this._supportsFormInternals) {
|
|
525
|
+
this._associatedForm.addEventListener('formdata', this._handleFormData);
|
|
526
|
+
this._associatedForm.addEventListener('reset', this._handleFormReset);
|
|
527
|
+
}
|
|
528
|
+
}
|
|
529
|
+
_syncFormValue() {
|
|
530
|
+
if (!this._supportsFormInternals) return;
|
|
531
|
+
const internals = this._internals;
|
|
532
|
+
if (!internals) return;
|
|
533
|
+
if (this.disabled || !this.name || !this.value) {
|
|
534
|
+
internals.setFormValue(null);
|
|
535
|
+
return;
|
|
536
|
+
}
|
|
537
|
+
internals.setFormValue(this.value);
|
|
538
|
+
}
|
|
539
|
+
_syncValidity() {
|
|
540
|
+
if (!this._internals || !this._supportsFormInternals || typeof this._internals.setValidity !== 'function') return;
|
|
541
|
+
if (this.disabled || !this.required || this.value) {
|
|
542
|
+
this._internals.setValidity({});
|
|
543
|
+
return;
|
|
544
|
+
}
|
|
545
|
+
this._internals.setValidity({
|
|
546
|
+
valueMissing: true
|
|
547
|
+
}, 'Please capture a photo.');
|
|
548
|
+
}
|
|
549
|
+
_syncPreviewFromValue(file) {
|
|
550
|
+
this._revokePreviewUrl();
|
|
551
|
+
if (!file) return;
|
|
552
|
+
this._stopStream();
|
|
553
|
+
this._previewUrl = URL.createObjectURL(file);
|
|
554
|
+
}
|
|
555
|
+
_clearValue(options) {
|
|
556
|
+
this.value = null;
|
|
557
|
+
this._errorMessage = '';
|
|
558
|
+
if (options.emitEvents) {
|
|
559
|
+
this._dispatchValueEvents();
|
|
560
|
+
}
|
|
561
|
+
}
|
|
562
|
+
_dispatchValueEvents() {
|
|
563
|
+
const detail = {
|
|
564
|
+
value: this.value
|
|
565
|
+
};
|
|
566
|
+
this.dispatchEvent(new CustomEvent('input', {
|
|
567
|
+
detail,
|
|
568
|
+
bubbles: true,
|
|
569
|
+
composed: true
|
|
570
|
+
}));
|
|
571
|
+
this.dispatchEvent(new CustomEvent('change', {
|
|
572
|
+
detail,
|
|
573
|
+
bubbles: true,
|
|
574
|
+
composed: true
|
|
575
|
+
}));
|
|
576
|
+
}
|
|
577
|
+
_fileExtensionForMimeType(mimeType) {
|
|
578
|
+
switch (mimeType) {
|
|
579
|
+
case 'image/jpeg':
|
|
580
|
+
return 'jpg';
|
|
581
|
+
case 'image/webp':
|
|
582
|
+
return 'webp';
|
|
583
|
+
case 'image/gif':
|
|
584
|
+
return 'gif';
|
|
585
|
+
default:
|
|
586
|
+
return 'png';
|
|
587
|
+
}
|
|
588
|
+
}
|
|
589
|
+
_createFileFromBlob(blob) {
|
|
590
|
+
const contentType = blob.type || this.captureFormat || DEFAULT_CAPTURE_FORMAT;
|
|
591
|
+
const extension = this._fileExtensionForMimeType(contentType);
|
|
592
|
+
const safePrefix = (this.fileNamePrefix || this.name || 'photo').trim() || 'photo';
|
|
593
|
+
return new File([blob], `${safePrefix}-${Date.now()}.${extension}`, {
|
|
594
|
+
type: contentType
|
|
595
|
+
});
|
|
596
|
+
}
|
|
597
|
+
_queuePreviewStart() {
|
|
598
|
+
this._startPreview().catch(() => undefined);
|
|
599
|
+
}
|
|
600
|
+
_resolveMediaConstraints() {
|
|
601
|
+
if (this.mediaConstraints) {
|
|
602
|
+
return this.mediaConstraints;
|
|
603
|
+
}
|
|
604
|
+
if (this.constraints) {
|
|
605
|
+
try {
|
|
606
|
+
return JSON.parse(this.constraints);
|
|
607
|
+
} catch (error) {
|
|
608
|
+
throw new Error(`Invalid constraints JSON: ${error.message}`);
|
|
609
|
+
}
|
|
610
|
+
}
|
|
611
|
+
return {
|
|
612
|
+
video: this.facingMode ? {
|
|
613
|
+
facingMode: {
|
|
614
|
+
ideal: this.facingMode
|
|
615
|
+
}
|
|
616
|
+
} : true
|
|
617
|
+
};
|
|
618
|
+
}
|
|
619
|
+
async _startPreview() {
|
|
620
|
+
if (!this.open || this.value || this._startingPreview) return;
|
|
621
|
+
if (!navigator.mediaDevices?.getUserMedia) {
|
|
622
|
+
this._emitError(new Error('navigator.mediaDevices.getUserMedia not available'), 'Camera access is not available in this browser');
|
|
623
|
+
return;
|
|
624
|
+
}
|
|
625
|
+
this._startingPreview = true;
|
|
626
|
+
this._errorMessage = '';
|
|
627
|
+
try {
|
|
628
|
+
const stream = await navigator.mediaDevices.getUserMedia(this._resolveMediaConstraints());
|
|
629
|
+
if (!this.open) {
|
|
630
|
+
stream.getTracks().forEach(track => track.stop());
|
|
631
|
+
return;
|
|
632
|
+
}
|
|
633
|
+
this._stream = stream;
|
|
634
|
+
this.requestUpdate();
|
|
635
|
+
await this.updateComplete;
|
|
636
|
+
const video = this.shadowRoot?.querySelector('video.capture-preview');
|
|
637
|
+
if (video) {
|
|
638
|
+
video.srcObject = stream;
|
|
639
|
+
await video.play?.().catch(() => undefined);
|
|
640
|
+
}
|
|
641
|
+
} catch (error) {
|
|
642
|
+
this._emitError(error, error?.message || 'Unable to start the camera preview');
|
|
643
|
+
} finally {
|
|
644
|
+
this._startingPreview = false;
|
|
645
|
+
}
|
|
646
|
+
}
|
|
647
|
+
_stopStream() {
|
|
648
|
+
if (!this._stream) return;
|
|
649
|
+
this._stream.getTracks().forEach(track => track.stop());
|
|
650
|
+
this._stream = null;
|
|
651
|
+
const video = this.shadowRoot?.querySelector('video.capture-preview');
|
|
652
|
+
if (video) {
|
|
653
|
+
video.srcObject = null;
|
|
654
|
+
}
|
|
655
|
+
}
|
|
656
|
+
_revokePreviewUrl() {
|
|
657
|
+
if (this._previewUrl) {
|
|
658
|
+
URL.revokeObjectURL(this._previewUrl);
|
|
659
|
+
}
|
|
660
|
+
this._previewUrl = '';
|
|
661
|
+
}
|
|
662
|
+
async _captureSnapshot() {
|
|
663
|
+
const video = this.shadowRoot?.querySelector('video.capture-preview');
|
|
664
|
+
if (!video) return;
|
|
665
|
+
const width = video.videoWidth || video.clientWidth || 640;
|
|
666
|
+
const height = video.videoHeight || video.clientHeight || 480;
|
|
667
|
+
const canvas = document.createElement('canvas');
|
|
668
|
+
canvas.width = width;
|
|
669
|
+
canvas.height = height;
|
|
670
|
+
const context = canvas.getContext('2d');
|
|
671
|
+
if (!context) {
|
|
672
|
+
this._emitError(new Error('Canvas 2D context unavailable'), 'Unable to capture a photo in this browser');
|
|
673
|
+
return;
|
|
674
|
+
}
|
|
675
|
+
context.drawImage(video, 0, 0, width, height);
|
|
676
|
+
const blob = await new Promise(resolve => {
|
|
677
|
+
canvas.toBlob(resolve, this.captureFormat || DEFAULT_CAPTURE_FORMAT, this.captureQuality);
|
|
678
|
+
});
|
|
679
|
+
if (!blob) {
|
|
680
|
+
this._emitError(new Error('Camera snapshot failed'), 'Unable to create an image from the current camera frame');
|
|
681
|
+
return;
|
|
682
|
+
}
|
|
683
|
+
this.value = this._createFileFromBlob(blob);
|
|
684
|
+
this._errorMessage = '';
|
|
685
|
+
}
|
|
686
|
+
async _retakePhoto() {
|
|
687
|
+
this._clearValue({
|
|
688
|
+
emitEvents: true
|
|
689
|
+
});
|
|
690
|
+
await this._startPreview();
|
|
691
|
+
}
|
|
692
|
+
_confirmPhoto() {
|
|
693
|
+
if (!this.value || !this._previewUrl) return;
|
|
694
|
+
this._dispatchValueEvents();
|
|
695
|
+
this.dispatchEvent(new CustomEvent('photo-captured', {
|
|
696
|
+
detail: {
|
|
697
|
+
file: this.value,
|
|
698
|
+
blob: this.value,
|
|
699
|
+
objectUrl: this._previewUrl,
|
|
700
|
+
contentType: this.value.type || this.captureFormat || DEFAULT_CAPTURE_FORMAT
|
|
701
|
+
},
|
|
702
|
+
bubbles: true,
|
|
703
|
+
composed: true
|
|
704
|
+
}));
|
|
705
|
+
if (this.autoCloseOnCapture) {
|
|
706
|
+
this._setOpen(false);
|
|
707
|
+
}
|
|
708
|
+
}
|
|
709
|
+
_handleCancel() {
|
|
710
|
+
this._stopStream();
|
|
711
|
+
this._clearValue({
|
|
712
|
+
emitEvents: false
|
|
713
|
+
});
|
|
714
|
+
this._setOpen(false);
|
|
715
|
+
this.dispatchEvent(new CustomEvent('cancel', {
|
|
716
|
+
bubbles: true,
|
|
717
|
+
composed: true
|
|
718
|
+
}));
|
|
719
|
+
}
|
|
720
|
+
_openCapture() {
|
|
721
|
+
if (this.disabled) return;
|
|
722
|
+
this._setOpen(true);
|
|
723
|
+
}
|
|
724
|
+
_renderViewport() {
|
|
725
|
+
if (this._previewUrl) {
|
|
726
|
+
return lit_html_b`<img class="capture-preview" part="preview-image" src="${this._previewUrl}" alt="Captured photo preview" />`;
|
|
727
|
+
}
|
|
728
|
+
return lit_html_b`<video class="capture-preview" part="preview-video" autoplay playsinline muted></video>`;
|
|
729
|
+
}
|
|
730
|
+
_renderStatus() {
|
|
731
|
+
if (this._errorMessage) {
|
|
732
|
+
return lit_html_b`<div class="status error" part="error-message">${this._errorMessage}</div>`;
|
|
733
|
+
}
|
|
734
|
+
if (this._startingPreview) {
|
|
735
|
+
return lit_html_b`<div class="status" part="status-message">Opening camera…</div>`;
|
|
736
|
+
}
|
|
737
|
+
if (!this.value) {
|
|
738
|
+
return lit_html_b`<div class="status" part="status-message">Preview the camera and take a photo when ready.</div>`;
|
|
739
|
+
}
|
|
740
|
+
return lit_html_b`<div class="status" part="status-message">Review the photo before confirming it.</div>`;
|
|
741
|
+
}
|
|
742
|
+
_renderActions() {
|
|
743
|
+
return lit_html_b`
|
|
744
|
+
<div class="actions" part="actions">
|
|
745
|
+
${this.showCancelButton ? lit_html_b`
|
|
746
|
+
<button
|
|
747
|
+
class="cancel-button"
|
|
748
|
+
part="cancel-button"
|
|
749
|
+
type="button"
|
|
750
|
+
@click="${this._handleCancel}"
|
|
751
|
+
>${this.cancelLabel}</button>
|
|
752
|
+
` : A}
|
|
753
|
+
|
|
754
|
+
${this.value ? lit_html_b`
|
|
755
|
+
<button
|
|
756
|
+
class="action-button"
|
|
757
|
+
part="retake-button"
|
|
758
|
+
type="button"
|
|
759
|
+
@click="${this._retakePhoto}"
|
|
760
|
+
>${this.retakeLabel}</button>
|
|
761
|
+
<button
|
|
762
|
+
class="action-button action-button--primary"
|
|
763
|
+
part="confirm-button"
|
|
764
|
+
type="button"
|
|
765
|
+
@click="${this._confirmPhoto}"
|
|
766
|
+
>${this.confirmLabel}</button>
|
|
767
|
+
` : lit_html_b`
|
|
768
|
+
<button
|
|
769
|
+
class="action-button action-button--primary"
|
|
770
|
+
part="capture-button"
|
|
771
|
+
type="button"
|
|
772
|
+
?disabled="${this._startingPreview || !this._stream}"
|
|
773
|
+
@click="${this._captureSnapshot}"
|
|
774
|
+
>${this.captureLabel}</button>
|
|
775
|
+
`}
|
|
776
|
+
</div>
|
|
777
|
+
`;
|
|
778
|
+
}
|
|
779
|
+
_renderPanel() {
|
|
780
|
+
return lit_html_b`
|
|
781
|
+
<div class="panel" part="panel">
|
|
782
|
+
<div class="panel-header" part="header">
|
|
783
|
+
<h2 class="panel-heading" part="heading"><slot name="heading">${this.heading}</slot></h2>
|
|
784
|
+
${this.showCancelButton ? lit_html_b`
|
|
785
|
+
<button
|
|
786
|
+
class="close-button"
|
|
787
|
+
part="close-button"
|
|
788
|
+
type="button"
|
|
789
|
+
aria-label="${this.cancelLabel}"
|
|
790
|
+
@click="${this._handleCancel}"
|
|
791
|
+
>×</button>
|
|
792
|
+
` : A}
|
|
793
|
+
</div>
|
|
794
|
+
<div class="viewport" part="viewport">${this._renderViewport()}</div>
|
|
795
|
+
${this._renderStatus()}
|
|
796
|
+
${this._renderActions()}
|
|
797
|
+
</div>
|
|
798
|
+
`;
|
|
799
|
+
}
|
|
800
|
+
render() {
|
|
801
|
+
const trigger = this.showTrigger || this.presentation === 'dialog';
|
|
802
|
+
return lit_html_b`
|
|
803
|
+
${trigger ? lit_html_b`
|
|
804
|
+
<button
|
|
805
|
+
class="trigger-button"
|
|
806
|
+
part="trigger-button"
|
|
807
|
+
type="button"
|
|
808
|
+
?disabled="${this.disabled}"
|
|
809
|
+
@click="${this._openCapture}"
|
|
810
|
+
><slot>${this.label}</slot></button>
|
|
811
|
+
` : A}
|
|
812
|
+
|
|
813
|
+
${this.presentation === 'dialog' ? lit_html_b`
|
|
814
|
+
<dialog
|
|
815
|
+
class="dialog"
|
|
816
|
+
part="dialog"
|
|
817
|
+
aria-modal="true"
|
|
818
|
+
aria-label="${this.heading}"
|
|
819
|
+
@cancel="${event => {
|
|
820
|
+
event.preventDefault();
|
|
821
|
+
this._handleCancel();
|
|
822
|
+
}}"
|
|
823
|
+
@click="${event => {
|
|
824
|
+
if (event.target === event.currentTarget) {
|
|
825
|
+
this._handleCancel();
|
|
826
|
+
}
|
|
827
|
+
}}"
|
|
828
|
+
>
|
|
829
|
+
${this.open ? this._renderPanel() : A}
|
|
830
|
+
</dialog>
|
|
831
|
+
` : lit_html_b`
|
|
832
|
+
<div class="inline-root" part="inline-root" ?hidden="${!this.open}">
|
|
833
|
+
${this.open ? this._renderPanel() : A}
|
|
834
|
+
</div>
|
|
835
|
+
`}
|
|
836
|
+
`;
|
|
837
|
+
}
|
|
838
|
+
}
|
|
839
|
+
;// ./src/v2/components/media/photoCapture/index.ts
|
|
840
|
+
|
|
841
|
+
|
|
842
|
+
const PHOTO_CAPTURE_TAG_NAME = 'solid-ui-photo-capture';
|
|
843
|
+
if (!customElements.get(PHOTO_CAPTURE_TAG_NAME)) {
|
|
844
|
+
customElements.define(PHOTO_CAPTURE_TAG_NAME, PhotoCapture);
|
|
845
|
+
}
|
|
846
|
+
/******/ })()
|
|
847
|
+
;
|
|
848
|
+
//# sourceMappingURL=index.js.map
|