npm - @digital-realty/ix-tile-picker - Versions diffs - 2.0.1 - Mend

@digital-realty/ix-tile-picker 2.0.1

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.

Files changed (35) hide show

package/.editorconfig +29 -0
package/LICENSE +21 -0
package/README.md +62 -0
package/demo/index.html +61 -0
package/dist/56b173ab.js +76 -0
package/dist/index.html +1 -0
package/dist/src/IxTilePicker.d.ts +26 -0
package/dist/src/IxTilePicker.js +140 -0
package/dist/src/IxTilePicker.js.map +1 -0
package/dist/src/index.d.ts +1 -0
package/dist/src/index.js +2 -0
package/dist/src/index.js.map +1 -0
package/dist/src/ix-tile-picker-styles.d.ts +1 -0
package/dist/src/ix-tile-picker-styles.js +233 -0
package/dist/src/ix-tile-picker-styles.js.map +1 -0
package/dist/src/ix-tile-picker.d.ts +1 -0
package/dist/src/ix-tile-picker.js +3 -0
package/dist/src/ix-tile-picker.js.map +1 -0
package/dist/sw.js +2 -0
package/dist/sw.js.map +1 -0
package/dist/test/ix-tile-picker.test.d.ts +1 -0
package/dist/test/ix-tile-picker.test.js +76 -0
package/dist/test/ix-tile-picker.test.js.map +1 -0
package/dist/tsconfig.tsbuildinfo +1 -0
package/dist/workbox-1fb78e9e.js +2 -0
package/dist/workbox-1fb78e9e.js.map +1 -0
package/package.json +91 -0
package/src/IxTilePicker.ts +149 -0
package/src/index.ts +1 -0
package/src/ix-tile-picker-styles.ts +233 -0
package/src/ix-tile-picker.ts +3 -0
package/test/ix-tile-picker.test.ts +94 -0
package/tsconfig.json +21 -0
package/web-dev-server.config.mjs +27 -0
package/web-test-runner.config.mjs +41 -0

package/.editorconfig ADDED Viewed

@@ -0,0 +1,29 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# editorconfig.org
+root = true
+[*]
+# Change these settings to your own preference
+indent_style = space
+indent_size = 2
+# We recommend you to keep these unchanged
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+[*.md]
+trim_trailing_whitespace = false
+[*.json]
+indent_size = 2
+[*.{html,js,md}]
+block_comment_start = /**
+block_comment = *
+block_comment_end = */

package/LICENSE ADDED Viewed

@@ -0,0 +1,21 @@
+MIT License
+Copyright (c) 2023 ix-tile-picker
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md ADDED Viewed

@@ -0,0 +1,62 @@
+# \<ix-tile-picker>
+This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.
+## Installation
+```bash
+npm i @digital-realty/ix-tile-picker
+```
+## Usage
+```html
+<script type="module">
+  import '@digital-realty/ix-tile-picker';
+</script>
+<ix-tile-picker></ix-tile-picker>
+```
+## Linting and formatting
+To scan the project for linting and formatting errors, run
+```bash
+npm run lint
+```
+To automatically fix linting and formatting errors, run
+```bash
+npm run format
+```
+## Testing with Web Test Runner
+To execute a single test run:
+```bash
+npm run test
+```
+To run the tests in interactive watch mode run:
+```bash
+npm run test:watch
+```
+## Tooling configs
+For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.
+If you customize the configuration a lot, you can consider moving them to individual files.
+## Local Demo with `web-dev-server`
+```bash
+npm start
+```
+To run a local development server that serves the basic demo located in `demo/index.html`

package/demo/index.html ADDED Viewed

@@ -0,0 +1,61 @@
+<!doctype html>
+<html lang="en-GB">
+<head>
+  <meta charset="utf-8">
+  <style>
+    body {
+      background: #fafafa;
+    }
+  </style>
+</head>
+<body>
+  <div id="demo"></div>
+  <script type="module">
+    import { html, render } from 'lit';
+    import '../dist/src/ix-tile-picker.js';
+    const items = [
+      {
+        id: 'Item1',
+        cloudAccessId: 'CANL-1234',
+        company: 'Boogle',
+        usedBandwidth: 100,
+        totalBandwidth: 1000,
+      },
+      {
+        id: 'Item2',
+        cloudAccessId: 'CANL-2345',
+        company: 'Interxion (NL)',
+        usedBandwidth: 200,
+        totalBandwidth: 1000,
+      },
+      {
+        id: 'Item3',
+        cloudAccessId: 'CANL-3456',
+        company: 'Interxion (DE)',
+        usedBandwidth: 0,
+        totalBandwidth: 1000,
+      },
+      {
+        id: 'Item4',
+        cloudAccessId: 'CANL-4567',
+        company: 'Interxion (UK)',
+        usedBandwidth: 750,
+        totalBandwidth: 1000,
+        disabled: true,
+        disabledButtonText: 'Disabled',
+      },
+    ];
+    const searchFields = ['cloudAccessId', 'company'];
+    render(
+      html`
+        <ix-tile-picker .items=${items} .searchFields=${searchFields}></ix-tile-picker>
+      `,
+      document.querySelector('#demo')
+    );
+  </script>
+</body>
+</html>

package/dist/56b173ab.js ADDED Viewed

@@ -0,0 +1,76 @@
+const t="undefined"!=typeof window&&null!=window.customElements&&void 0!==window.customElements.polyfillWrapFlushCallback,e=(t,e,i=null)=>{for(;e!==i;){const i=e.nextSibling;t.removeChild(e),e=i}},i=`{{lit-${String(Math.random()).slice(2)}}}`,s=`\x3c!--${i}--\x3e`,n=new RegExp(`${i}|${s}`),r="$lit$";class o{constructor(t,e){this.parts=[],this.element=e;const s=[],o=[],l=document.createTreeWalker(e.content,133,null,!1);let c=0,p=-1,u=0;const{strings:m,values:{length:g}}=t;for(;u<g;){const t=l.nextNode();if(null!==t){if(p++,1===t.nodeType){if(t.hasAttributes()){const e=t.attributes,{length:i}=e;let s=0;for(let t=0;t<i;t++)a(e[t].name,r)&&s++;for(;s-- >0;){const e=m[u],i=h.exec(e)[2],s=i.toLowerCase()+r,o=t.getAttribute(s);t.removeAttribute(s);const a=o.split(n);this.parts.push({type:"attribute",index:p,name:i,strings:a}),u+=a.length-1}}"TEMPLATE"===t.tagName&&(o.push(t),l.currentNode=t.content)}else if(3===t.nodeType){const e=t.data;if(e.indexOf(i)>=0){const i=t.parentNode,o=e.split(n),l=o.length-1;for(let e=0;e<l;e++){let s,n=o[e];if(""===n)s=d();else{const t=h.exec(n);null!==t&&a(t[2],r)&&(n=n.slice(0,t.index)+t[1]+t[2].slice(0,-5)+t[3]),s=document.createTextNode(n)}i.insertBefore(s,t),this.parts.push({type:"node",index:++p})}""===o[l]?(i.insertBefore(d(),t),s.push(t)):t.data=o[l],u+=l}}else if(8===t.nodeType)if(t.data===i){const e=t.parentNode;null!==t.previousSibling&&p!==c||(p++,e.insertBefore(d(),t)),c=p,this.parts.push({type:"node",index:p}),null===t.nextSibling?t.data="":(s.push(t),p--),u++}else{let e=-1;for(;-1!==(e=t.data.indexOf(i,e+1));)this.parts.push({type:"node",index:-1}),u++}}else l.currentNode=o.pop()}for(const t of s)t.parentNode.removeChild(t)}}const a=(t,e)=>{const i=t.length-e.length;return i>=0&&t.slice(i)===e},l=t=>-1!==t.index,d=()=>document.createComment(""),h=/([ \x09\x0a\x0c\x0d])([^\0-\x1F\x7F-\x9F "'>=/]+)([ \x09\x0a\x0c\x0d]*=[ \x09\x0a\x0c\x0d]*(?:[^ \x09\x0a\x0c\x0d"'`<>=]*|"[^"]*|'[^']*))$/;function c(t,e){const{element:{content:i},parts:s}=t,n=document.createTreeWalker(i,133,null,!1);let r=u(s),o=s[r],a=-1,l=0;const d=[];let h=null;for(;n.nextNode();){a++;const t=n.currentNode;for(t.previousSibling===h&&(h=null),e.has(t)&&(d.push(t),null===h&&(h=t)),null!==h&&l++;void 0!==o&&o.index===a;)o.index=null!==h?-1:o.index-l,r=u(s,r),o=s[r]}d.forEach((t=>t.parentNode.removeChild(t)))}const p=t=>{let e=11===t.nodeType?0:1;const i=document.createTreeWalker(t,133,null,!1);for(;i.nextNode();)e++;return e},u=(t,e=-1)=>{for(let i=e+1;i<t.length;i++){const e=t[i];if(l(e))return i}return-1};const m=new WeakMap,g=t=>"function"==typeof t&&m.has(t),v={},f={};class _{constructor(t,e,i){this.__parts=[],this.template=t,this.processor=e,this.options=i}update(t){let e=0;for(const i of this.__parts)void 0!==i&&i.setValue(t[e]),e++;for(const t of this.__parts)void 0!==t&&t.commit()}_clone(){const e=t?this.template.element.content.cloneNode(!0):document.importNode(this.template.element.content,!0),i=[],s=this.template.parts,n=document.createTreeWalker(e,133,null,!1);let r,o=0,a=0,d=n.nextNode();for(;o<s.length;)if(r=s[o],l(r)){for(;a<r.index;)a++,"TEMPLATE"===d.nodeName&&(i.push(d),n.currentNode=d.content),null===(d=n.nextNode())&&(n.currentNode=i.pop(),d=n.nextNode());if("node"===r.type){const t=this.processor.handleTextExpression(this.options);t.insertAfterNode(d.previousSibling),this.__parts.push(t)}else this.__parts.push(...this.processor.handleAttributeExpressions(d,r.name,r.strings,this.options));o++}else this.__parts.push(void 0),o++;return t&&(document.adoptNode(e),customElements.upgrade(e)),e}}const y=window.trustedTypes&&trustedTypes.createPolicy("lit-html",{createHTML:t=>t}),b=` ${i} `;class S{constructor(t,e,i,s){this.strings=t,this.values=e,this.type=i,this.processor=s}getHTML(){const t=this.strings.length-1;let e="",n=!1;for(let o=0;o<t;o++){const t=this.strings[o],a=t.lastIndexOf("\x3c!--");n=(a>-1||n)&&-1===t.indexOf("--\x3e",a+1);const l=h.exec(t);e+=null===l?t+(n?b:s):t.substr(0,l.index)+l[1]+l[2]+r+l[3]+i}return e+=this.strings[t],e}getTemplateElement(){const t=document.createElement("template");let e=this.getHTML();return void 0!==y&&(e=y.createHTML(e)),t.innerHTML=e,t}}const w=t=>null===t||!("object"==typeof t||"function"==typeof t),x=t=>Array.isArray(t)||!(!t||!t[Symbol.iterator]);class ${constructor(t,e,i){this.dirty=!0,this.element=t,this.name=e,this.strings=i,this.parts=[];for(let t=0;t<i.length-1;t++)this.parts[t]=this._createPart()}_createPart(){return new A(this)}_getValue(){const t=this.strings,e=t.length-1,i=this.parts;if(1===e&&""===t[0]&&""===t[1]){const t=i[0].value;if("symbol"==typeof t)return String(t);if("string"==typeof t||!x(t))return t}let s="";for(let n=0;n<e;n++){s+=t[n];const e=i[n];if(void 0!==e){const t=e.value;if(w(t)||!x(t))s+="string"==typeof t?t:String(t);else for(const e of t)s+="string"==typeof e?e:String(e)}}return s+=t[e],s}commit(){this.dirty&&(this.dirty=!1,this.element.setAttribute(this.name,this._getValue()))}}class A{constructor(t){this.value=void 0,this.committer=t}setValue(t){t===v||w(t)&&t===this.value||(this.value=t,g(t)||(this.committer.dirty=!0))}commit(){for(;g(this.value);){const t=this.value;this.value=v,t(this)}this.value!==v&&this.committer.commit()}}class C{constructor(t){this.value=void 0,this.__pendingValue=void 0,this.options=t}appendInto(t){this.startNode=t.appendChild(d()),this.endNode=t.appendChild(d())}insertAfterNode(t){this.startNode=t,this.endNode=t.nextSibling}appendIntoPart(t){t.__insert(this.startNode=d()),t.__insert(this.endNode=d())}insertAfterPart(t){t.__insert(this.startNode=d()),this.endNode=t.endNode,t.endNode=this.startNode}setValue(t){this.__pendingValue=t}commit(){if(null===this.startNode.parentNode)return;for(;g(this.__pendingValue);){const t=this.__pendingValue;this.__pendingValue=v,t(this)}const t=this.__pendingValue;t!==v&&(w(t)?t!==this.value&&this.__commitText(t):t instanceof S?this.__commitTemplateResult(t):t instanceof Node?this.__commitNode(t):x(t)?this.__commitIterable(t):t===f?(this.value=f,this.clear()):this.__commitText(t))}__insert(t){this.endNode.parentNode.insertBefore(t,this.endNode)}__commitNode(t){this.value!==t&&(this.clear(),this.__insert(t),this.value=t)}__commitText(t){const e=this.startNode.nextSibling,i="string"==typeof(t=null==t?"":t)?t:String(t);e===this.endNode.previousSibling&&3===e.nodeType?e.data=i:this.__commitNode(document.createTextNode(i)),this.value=t}__commitTemplateResult(t){const e=this.options.templateFactory(t);if(this.value instanceof _&&this.value.template===e)this.value.update(t.values);else{const i=new _(e,t.processor,this.options),s=i._clone();i.update(t.values),this.__commitNode(s),this.value=i}}__commitIterable(t){Array.isArray(this.value)||(this.value=[],this.clear());const e=this.value;let i,s=0;for(const n of t)i=e[s],void 0===i&&(i=new C(this.options),e.push(i),0===s?i.appendIntoPart(this):i.insertAfterPart(e[s-1])),i.setValue(n),i.commit(),s++;s<e.length&&(e.length=s,this.clear(i&&i.endNode))}clear(t=this.startNode){e(this.startNode.parentNode,t.nextSibling,this.endNode)}}class E{constructor(t,e,i){if(this.value=void 0,this.__pendingValue=void 0,2!==i.length||""!==i[0]||""!==i[1])throw new Error("Boolean attributes can only contain a single expression");this.element=t,this.name=e,this.strings=i}setValue(t){this.__pendingValue=t}commit(){for(;g(this.__pendingValue);){const t=this.__pendingValue;this.__pendingValue=v,t(this)}if(this.__pendingValue===v)return;const t=!!this.__pendingValue;this.value!==t&&(t?this.element.setAttribute(this.name,""):this.element.removeAttribute(this.name),this.value=t),this.__pendingValue=v}}class P extends ${constructor(t,e,i){super(t,e,i),this.single=2===i.length&&""===i[0]&&""===i[1]}_createPart(){return new N(this)}_getValue(){return this.single?this.parts[0].value:super._getValue()}commit(){this.dirty&&(this.dirty=!1,this.element[this.name]=this._getValue())}}class N extends A{}let T=!1;(()=>{try{const t={get capture(){return T=!0,!1}};window.addEventListener("test",t,t),window.removeEventListener("test",t,t)}catch(t){}})();class k{constructor(t,e,i){this.value=void 0,this.__pendingValue=void 0,this.element=t,this.eventName=e,this.eventContext=i,this.__boundHandleEvent=t=>this.handleEvent(t)}setValue(t){this.__pendingValue=t}commit(){for(;g(this.__pendingValue);){const t=this.__pendingValue;this.__pendingValue=v,t(this)}if(this.__pendingValue===v)return;const t=this.__pendingValue,e=this.value,i=null==t||null!=e&&(t.capture!==e.capture||t.once!==e.once||t.passive!==e.passive),s=null!=t&&(null==e||i);i&&this.element.removeEventListener(this.eventName,this.__boundHandleEvent,this.__options),s&&(this.__options=R(t),this.element.addEventListener(this.eventName,this.__boundHandleEvent,this.__options)),this.value=t,this.__pendingValue=v}handleEvent(t){"function"==typeof this.value?this.value.call(this.eventContext||this.element,t):this.value.handleEvent(t)}}const R=t=>t&&(T?{capture:t.capture,passive:t.passive,once:t.once}:t.capture);function U(t){let e=V.get(t.type);void 0===e&&(e={stringsArray:new WeakMap,keyString:new Map},V.set(t.type,e));let s=e.stringsArray.get(t.strings);if(void 0!==s)return s;const n=t.strings.join(i);return s=e.keyString.get(n),void 0===s&&(s=new o(t,t.getTemplateElement()),e.keyString.set(n,s)),e.stringsArray.set(t.strings,s),s}const V=new Map,L=new WeakMap;const O=new class{handleAttributeExpressions(t,e,i,s){const n=e[0];if("."===n){return new P(t,e.slice(1),i).parts}if("@"===n)return[new k(t,e.slice(1),s.eventContext)];if("?"===n)return[new E(t,e.slice(1),i)];return new $(t,e,i).parts}handleTextExpression(t){return new C(t)}};"undefined"!=typeof window&&(window.litHtmlVersions||(window.litHtmlVersions=[])).push("1.4.1");const M=(t,...e)=>new S(t,e,"html",O),H=(t,e)=>`${t}--${e}`;let I=!0;void 0===window.ShadyCSS?I=!1:void 0===window.ShadyCSS.prepareTemplateDom&&(console.warn("Incompatible ShadyCSS version detected. Please update to at least @webcomponents/webcomponentsjs@2.0.2 and @webcomponents/shadycss@1.3.1."),I=!1);const z=t=>e=>{const s=H(e.type,t);let n=V.get(s);void 0===n&&(n={stringsArray:new WeakMap,keyString:new Map},V.set(s,n));let r=n.stringsArray.get(e.strings);if(void 0!==r)return r;const a=e.strings.join(i);if(r=n.keyString.get(a),void 0===r){const i=e.getTemplateElement();I&&window.ShadyCSS.prepareTemplateDom(i,t),r=new o(e,i),n.keyString.set(a,r)}return n.stringsArray.set(e.strings,r),r},B=["html","svg"],j=new Set,q=(t,e,i)=>{j.add(t);const s=i?i.element:document.createElement("template"),n=e.querySelectorAll("style"),{length:r}=n;if(0===r)return void window.ShadyCSS.prepareTemplateStyles(s,t);const o=document.createElement("style");for(let t=0;t<r;t++){const e=n[t];e.parentNode.removeChild(e),o.textContent+=e.textContent}(t=>{B.forEach((e=>{const i=V.get(H(e,t));void 0!==i&&i.keyString.forEach((t=>{const{element:{content:e}}=t,i=new Set;Array.from(e.querySelectorAll("style")).forEach((t=>{i.add(t)})),c(t,i)}))}))})(t);const a=s.content;i?function(t,e,i=null){const{element:{content:s},parts:n}=t;if(null==i)return void s.appendChild(e);const r=document.createTreeWalker(s,133,null,!1);let o=u(n),a=0,l=-1;for(;r.nextNode();)for(l++,r.currentNode===i&&(a=p(e),i.parentNode.insertBefore(e,i));-1!==o&&n[o].index===l;){if(a>0){for(;-1!==o;)n[o].index+=a,o=u(n,o);return}o=u(n,o)}}(i,o,a.firstChild):a.insertBefore(o,a.firstChild),window.ShadyCSS.prepareTemplateStyles(s,t);const l=a.querySelector("style");if(window.ShadyCSS.nativeShadow&&null!==l)e.insertBefore(l.cloneNode(!0),e.firstChild);else if(i){a.insertBefore(o,a.firstChild);const t=new Set;t.add(o),c(i,t)}};window.JSCompiler_renameProperty=(t,e)=>t;const F={toAttribute(t,e){switch(e){case Boolean:return t?"":null;case Object:case Array:return null==t?t:JSON.stringify(t)}return t},fromAttribute(t,e){switch(e){case Boolean:return null!==t;case Number:return null===t?null:Number(t);case Object:case Array:return JSON.parse(t)}return t}},D=(t,e)=>e!==t&&(e==e||t==t),W={attribute:!0,type:String,converter:F,reflect:!1,hasChanged:D},Z="finalized";class J extends HTMLElement{constructor(){super(),this.initialize()}static get observedAttributes(){this.finalize();const t=[];return this._classProperties.forEach(((e,i)=>{const s=this._attributeNameForProperty(i,e);void 0!==s&&(this._attributeToPropertyMap.set(s,i),t.push(s))})),t}static _ensureClassProperties(){if(!this.hasOwnProperty(JSCompiler_renameProperty("_classProperties",this))){this._classProperties=new Map;const t=Object.getPrototypeOf(this)._classProperties;void 0!==t&&t.forEach(((t,e)=>this._classProperties.set(e,t)))}}static createProperty(t,e=W){if(this._ensureClassProperties(),this._classProperties.set(t,e),e.noAccessor||this.prototype.hasOwnProperty(t))return;const i="symbol"==typeof t?Symbol():`__${t}`,s=this.getPropertyDescriptor(t,i,e);void 0!==s&&Object.defineProperty(this.prototype,t,s)}static getPropertyDescriptor(t,e,i){return{get(){return this[e]},set(s){const n=this[t];this[e]=s,this.requestUpdateInternal(t,n,i)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this._classProperties&&this._classProperties.get(t)||W}static finalize(){const t=Object.getPrototypeOf(this);if(t.hasOwnProperty(Z)||t.finalize(),this[Z]=!0,this._ensureClassProperties(),this._attributeToPropertyMap=new Map,this.hasOwnProperty(JSCompiler_renameProperty("properties",this))){const t=this.properties,e=[...Object.getOwnPropertyNames(t),..."function"==typeof Object.getOwnPropertySymbols?Object.getOwnPropertySymbols(t):[]];for(const i of e)this.createProperty(i,t[i])}}static _attributeNameForProperty(t,e){const i=e.attribute;return!1===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}static _valueHasChanged(t,e,i=D){return i(t,e)}static _propertyValueFromAttribute(t,e){const i=e.type,s=e.converter||F,n="function"==typeof s?s:s.fromAttribute;return n?n(t,i):t}static _propertyValueToAttribute(t,e){if(void 0===e.reflect)return;const i=e.type,s=e.converter;return(s&&s.toAttribute||F.toAttribute)(t,i)}initialize(){this._updateState=0,this._updatePromise=new Promise((t=>this._enableUpdatingResolver=t)),this._changedProperties=new Map,this._saveInstanceProperties(),this.requestUpdateInternal()}_saveInstanceProperties(){this.constructor._classProperties.forEach(((t,e)=>{if(this.hasOwnProperty(e)){const t=this[e];delete this[e],this._instanceProperties||(this._instanceProperties=new Map),this._instanceProperties.set(e,t)}}))}_applyInstanceProperties(){this._instanceProperties.forEach(((t,e)=>this[e]=t)),this._instanceProperties=void 0}connectedCallback(){this.enableUpdating()}enableUpdating(){void 0!==this._enableUpdatingResolver&&(this._enableUpdatingResolver(),this._enableUpdatingResolver=void 0)}disconnectedCallback(){}attributeChangedCallback(t,e,i){e!==i&&this._attributeToProperty(t,i)}_propertyToAttribute(t,e,i=W){const s=this.constructor,n=s._attributeNameForProperty(t,i);if(void 0!==n){const t=s._propertyValueToAttribute(e,i);if(void 0===t)return;this._updateState=8|this._updateState,null==t?this.removeAttribute(n):this.setAttribute(n,t),this._updateState=-9&this._updateState}}_attributeToProperty(t,e){if(8&this._updateState)return;const i=this.constructor,s=i._attributeToPropertyMap.get(t);if(void 0!==s){const t=i.getPropertyOptions(s);this._updateState=16|this._updateState,this[s]=i._propertyValueFromAttribute(e,t),this._updateState=-17&this._updateState}}requestUpdateInternal(t,e,i){let s=!0;if(void 0!==t){const n=this.constructor;i=i||n.getPropertyOptions(t),n._valueHasChanged(this[t],e,i.hasChanged)?(this._changedProperties.has(t)||this._changedProperties.set(t,e),!0!==i.reflect||16&this._updateState||(void 0===this._reflectingProperties&&(this._reflectingProperties=new Map),this._reflectingProperties.set(t,i))):s=!1}!this._hasRequestedUpdate&&s&&(this._updatePromise=this._enqueueUpdate())}requestUpdate(t,e){return this.requestUpdateInternal(t,e),this.updateComplete}async _enqueueUpdate(){this._updateState=4|this._updateState;try{await this._updatePromise}catch(t){}const t=this.performUpdate();return null!=t&&await t,!this._hasRequestedUpdate}get _hasRequestedUpdate(){return 4&this._updateState}get hasUpdated(){return 1&this._updateState}performUpdate(){if(!this._hasRequestedUpdate)return;this._instanceProperties&&this._applyInstanceProperties();let t=!1;const e=this._changedProperties;try{t=this.shouldUpdate(e),t?this.update(e):this._markUpdated()}catch(e){throw t=!1,this._markUpdated(),e}t&&(1&this._updateState||(this._updateState=1|this._updateState,this.firstUpdated(e)),this.updated(e))}_markUpdated(){this._changedProperties=new Map,this._updateState=-5&this._updateState}get updateComplete(){return this._getUpdateComplete()}_getUpdateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._updatePromise}shouldUpdate(t){return!0}update(t){void 0!==this._reflectingProperties&&this._reflectingProperties.size>0&&(this._reflectingProperties.forEach(((t,e)=>this._propertyToAttribute(e,this[e],t))),this._reflectingProperties=void 0),this._markUpdated()}updated(t){}firstUpdated(t){}}J[Z]=!0;const K=window.ShadowRoot&&(void 0===window.ShadyCSS||window.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,G=Symbol();class Q{constructor(t,e){if(e!==G)throw new Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t}get styleSheet(){return void 0===this._styleSheet&&(K?(this._styleSheet=new CSSStyleSheet,this._styleSheet.replaceSync(this.cssText)):this._styleSheet=null),this._styleSheet}toString(){return this.cssText}}const X=(t,...e)=>{const i=e.reduce(((e,i,s)=>e+(t=>{if(t instanceof Q)return t.cssText;if("number"==typeof t)return t;throw new Error(`Value passed to 'css' function must be a 'css' function result: ${t}. Use 'unsafeCSS' to pass non-literal values, but\n            take care to ensure page security.`)})(i)+t[s+1]),t[0]);return new Q(i,G)};(window.litElementVersions||(window.litElementVersions=[])).push("2.5.1");const Y={};class tt extends J{static getStyles(){return this.styles}static _getUniqueStyles(){if(this.hasOwnProperty(JSCompiler_renameProperty("_styles",this)))return;const t=this.getStyles();if(Array.isArray(t)){const e=(t,i)=>t.reduceRight(((t,i)=>Array.isArray(i)?e(i,t):(t.add(i),t)),i),i=e(t,new Set),s=[];i.forEach((t=>s.unshift(t))),this._styles=s}else this._styles=void 0===t?[]:[t];this._styles=this._styles.map((t=>{if(t instanceof CSSStyleSheet&&!K){const e=Array.prototype.slice.call(t.cssRules).reduce(((t,e)=>t+e.cssText),"");return new Q(String(e),G)}return t}))}initialize(){super.initialize(),this.constructor._getUniqueStyles(),this.renderRoot=this.createRenderRoot(),window.ShadowRoot&&this.renderRoot instanceof window.ShadowRoot&&this.adoptStyles()}createRenderRoot(){return this.attachShadow(this.constructor.shadowRootOptions)}adoptStyles(){const t=this.constructor._styles;0!==t.length&&(void 0===window.ShadyCSS||window.ShadyCSS.nativeShadow?K?this.renderRoot.adoptedStyleSheets=t.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet)):this._needsShimAdoptedStyleSheets=!0:window.ShadyCSS.ScopingShim.prepareAdoptedCssText(t.map((t=>t.cssText)),this.localName))}connectedCallback(){super.connectedCallback(),this.hasUpdated&&void 0!==window.ShadyCSS&&window.ShadyCSS.styleElement(this)}update(t){const e=this.render();super.update(t),e!==Y&&this.constructor.render(e,this.renderRoot,{scopeName:this.localName,eventContext:this}),this._needsShimAdoptedStyleSheets&&(this._needsShimAdoptedStyleSheets=!1,this.constructor._styles.forEach((t=>{const e=document.createElement("style");e.textContent=t.cssText,this.renderRoot.appendChild(e)})))}render(){return Y}}tt.finalized=!0,tt.render=(t,i,s)=>{if(!s||"object"!=typeof s||!s.scopeName)throw new Error("The `scopeName` option is required.");const n=s.scopeName,r=L.has(i),o=I&&11===i.nodeType&&!!i.host,a=o&&!j.has(n),l=a?document.createDocumentFragment():i;if(((t,i,s)=>{let n=L.get(i);void 0===n&&(e(i,i.firstChild),L.set(i,n=new C(Object.assign({templateFactory:U},s))),n.appendInto(i)),n.setValue(t),n.commit()})(t,l,Object.assign({templateFactory:z(n)},s)),a){const t=L.get(l);L.delete(l);const s=t.value instanceof _?t.value.template:void 0;q(n,l,s),e(i,i.firstChild),i.appendChild(l),L.set(i,t)}!r&&o&&window.ShadyCSS.styleElement(i.host)},tt.shadowRootOptions={mode:"open"};const et=new WeakMap,it=t=>"function"==typeof t&&et.has(t),st={},nt={};String(Math.random()).slice(2),window.trustedTypes&&trustedTypes.createPolicy("lit-html",{createHTML:t=>t});class rt{constructor(t){this.value=void 0,this.committer=t}setValue(t){t===st||(t=>null===t||!("object"==typeof t||"function"==typeof t))(t)&&t===this.value||(this.value=t,it(t)||(this.committer.dirty=!0))}commit(){for(;it(this.value);){const t=this.value;this.value=st,t(this)}this.value!==st&&this.committer.commit()}}class ot extends rt{}let at=!1;(()=>{try{const t={get capture(){return at=!0,!1}};window.addEventListener("test",t,t),window.removeEventListener("test",t,t)}catch(t){}})(),"undefined"!=typeof window&&(window.litHtmlVersions||(window.litHtmlVersions=[])).push("1.4.1");class lt{constructor(t){this.classes=new Set,this.changed=!1,this.element=t;const e=(t.getAttribute("class")||"").split(/\s+/);for(const t of e)this.classes.add(t)}add(t){this.classes.add(t),this.changed=!0}remove(t){this.classes.delete(t),this.changed=!0}commit(){if(this.changed){let t="";this.classes.forEach((e=>t+=e+" ")),this.element.setAttribute("class",t)}}}const dt=new WeakMap,ht=(t=>(...e)=>{const i=t(...e);return et.set(i,!0),i})((t=>e=>{if(!(e instanceof rt)||e instanceof ot||"class"!==e.committer.name||e.committer.parts.length>1)throw new Error("The `classMap` directive must be used in the `class` attribute and must be the only part in the attribute.");const{committer:i}=e,{element:s}=i;let n=dt.get(e);void 0===n&&(s.setAttribute("class",i.strings.join(" ")),dt.set(e,n=new Set));const r=s.classList||new lt(s);n.forEach((e=>{e in t||(r.remove(e),n.delete(e))}));for(const e in t){const i=t[e];i!=n.has(e)&&(i?(r.add(e),n.add(e)):(r.remove(e),n.delete(e)))}"function"==typeof r.commit&&r.commit()})),ct=window,pt=ct.ShadowRoot&&(void 0===ct.ShadyCSS||ct.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,ut=Symbol(),mt=new WeakMap;class gt{constructor(t,e,i){if(this._$cssResult$=!0,i!==ut)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e}get styleSheet(){let t=this.o;const e=this.t;if(pt&&void 0===t){const i=void 0!==e&&1===e.length;i&&(t=mt.get(e)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),i&&mt.set(e,t))}return t}toString(){return this.cssText}}const vt=pt?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const i of t.cssRules)e+=i.cssText;return(t=>new gt("string"==typeof t?t:t+"",void 0,ut))(e)})(t):t;var ft;const _t=window,yt=_t.trustedTypes,bt=yt?yt.emptyScript:"",St=_t.reactiveElementPolyfillSupport,wt={toAttribute(t,e){switch(e){case Boolean:t=t?bt:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t)}return t},fromAttribute(t,e){let i=t;switch(e){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}},xt=(t,e)=>e!==t&&(e==e||t==t),$t={attribute:!0,type:String,converter:wt,reflect:!1,hasChanged:xt},At="finalized";class Ct extends HTMLElement{constructor(){super(),this._$Ei=new Map,this.isUpdatePending=!1,this.hasUpdated=!1,this._$El=null,this._$Eu()}static addInitializer(t){var e;this.finalize(),(null!==(e=this.h)&&void 0!==e?e:this.h=[]).push(t)}static get observedAttributes(){this.finalize();const t=[];return this.elementProperties.forEach(((e,i)=>{const s=this._$Ep(i,e);void 0!==s&&(this._$Ev.set(s,i),t.push(s))})),t}static createProperty(t,e=$t){if(e.state&&(e.attribute=!1),this.finalize(),this.elementProperties.set(t,e),!e.noAccessor&&!this.prototype.hasOwnProperty(t)){const i="symbol"==typeof t?Symbol():"__"+t,s=this.getPropertyDescriptor(t,i,e);void 0!==s&&Object.defineProperty(this.prototype,t,s)}}static getPropertyDescriptor(t,e,i){return{get(){return this[e]},set(s){const n=this[t];this[e]=s,this.requestUpdate(t,n,i)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)||$t}static finalize(){if(this.hasOwnProperty(At))return!1;this[At]=!0;const t=Object.getPrototypeOf(this);if(t.finalize(),void 0!==t.h&&(this.h=[...t.h]),this.elementProperties=new Map(t.elementProperties),this._$Ev=new Map,this.hasOwnProperty("properties")){const t=this.properties,e=[...Object.getOwnPropertyNames(t),...Object.getOwnPropertySymbols(t)];for(const i of e)this.createProperty(i,t[i])}return this.elementStyles=this.finalizeStyles(this.styles),!0}static finalizeStyles(t){const e=[];if(Array.isArray(t)){const i=new Set(t.flat(1/0).reverse());for(const t of i)e.unshift(vt(t))}else void 0!==t&&e.push(vt(t));return e}static _$Ep(t,e){const i=e.attribute;return!1===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}_$Eu(){var t;this._$E_=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$Eg(),this.requestUpdate(),null===(t=this.constructor.h)||void 0===t||t.forEach((t=>t(this)))}addController(t){var e,i;(null!==(e=this._$ES)&&void 0!==e?e:this._$ES=[]).push(t),void 0!==this.renderRoot&&this.isConnected&&(null===(i=t.hostConnected)||void 0===i||i.call(t))}removeController(t){var e;null===(e=this._$ES)||void 0===e||e.splice(this._$ES.indexOf(t)>>>0,1)}_$Eg(){this.constructor.elementProperties.forEach(((t,e)=>{this.hasOwnProperty(e)&&(this._$Ei.set(e,this[e]),delete this[e])}))}createRenderRoot(){var t;const e=null!==(t=this.shadowRoot)&&void 0!==t?t:this.attachShadow(this.constructor.shadowRootOptions);return((t,e)=>{pt?t.adoptedStyleSheets=e.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet)):e.forEach((e=>{const i=document.createElement("style"),s=ct.litNonce;void 0!==s&&i.setAttribute("nonce",s),i.textContent=e.cssText,t.appendChild(i)}))})(e,this.constructor.elementStyles),e}connectedCallback(){var t;void 0===this.renderRoot&&(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),null===(t=this._$ES)||void 0===t||t.forEach((t=>{var e;return null===(e=t.hostConnected)||void 0===e?void 0:e.call(t)}))}enableUpdating(t){}disconnectedCallback(){var t;null===(t=this._$ES)||void 0===t||t.forEach((t=>{var e;return null===(e=t.hostDisconnected)||void 0===e?void 0:e.call(t)}))}attributeChangedCallback(t,e,i){this._$AK(t,i)}_$EO(t,e,i=$t){var s;const n=this.constructor._$Ep(t,i);if(void 0!==n&&!0===i.reflect){const r=(void 0!==(null===(s=i.converter)||void 0===s?void 0:s.toAttribute)?i.converter:wt).toAttribute(e,i.type);this._$El=t,null==r?this.removeAttribute(n):this.setAttribute(n,r),this._$El=null}}_$AK(t,e){var i;const s=this.constructor,n=s._$Ev.get(t);if(void 0!==n&&this._$El!==n){const t=s.getPropertyOptions(n),r="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==(null===(i=t.converter)||void 0===i?void 0:i.fromAttribute)?t.converter:wt;this._$El=n,this[n]=r.fromAttribute(e,t.type),this._$El=null}}requestUpdate(t,e,i){let s=!0;void 0!==t&&(((i=i||this.constructor.getPropertyOptions(t)).hasChanged||xt)(this[t],e)?(this._$AL.has(t)||this._$AL.set(t,e),!0===i.reflect&&this._$El!==t&&(void 0===this._$EC&&(this._$EC=new Map),this._$EC.set(t,i))):s=!1),!this.isUpdatePending&&s&&(this._$E_=this._$Ej())}async _$Ej(){this.isUpdatePending=!0;try{await this._$E_}catch(t){Promise.reject(t)}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){var t;if(!this.isUpdatePending)return;this.hasUpdated,this._$Ei&&(this._$Ei.forEach(((t,e)=>this[e]=t)),this._$Ei=void 0);let e=!1;const i=this._$AL;try{e=this.shouldUpdate(i),e?(this.willUpdate(i),null===(t=this._$ES)||void 0===t||t.forEach((t=>{var e;return null===(e=t.hostUpdate)||void 0===e?void 0:e.call(t)})),this.update(i)):this._$Ek()}catch(t){throw e=!1,this._$Ek(),t}e&&this._$AE(i)}willUpdate(t){}_$AE(t){var e;null===(e=this._$ES)||void 0===e||e.forEach((t=>{var e;return null===(e=t.hostUpdated)||void 0===e?void 0:e.call(t)})),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}_$Ek(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$E_}shouldUpdate(t){return!0}update(t){void 0!==this._$EC&&(this._$EC.forEach(((t,e)=>this._$EO(e,this[e],t))),this._$EC=void 0),this._$Ek()}updated(t){}firstUpdated(t){}}var Et;Ct[At]=!0,Ct.elementProperties=new Map,Ct.elementStyles=[],Ct.shadowRootOptions={mode:"open"},null==St||St({ReactiveElement:Ct}),(null!==(ft=_t.reactiveElementVersions)&&void 0!==ft?ft:_t.reactiveElementVersions=[]).push("1.6.3");const Pt=window,Nt=Pt.trustedTypes,Tt=Nt?Nt.createPolicy("lit-html",{createHTML:t=>t}):void 0,kt="$lit$",Rt=`lit$${(Math.random()+"").slice(9)}$`,Ut="?"+Rt,Vt=`<${Ut}>`,Lt=document,Ot=()=>Lt.createComment(""),Mt=t=>null===t||"object"!=typeof t&&"function"!=typeof t,Ht=Array.isArray,It="[ \t\n\f\r]",zt=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,Bt=/-->/g,jt=/>/g,qt=RegExp(`>|${It}(?:([^\\s"'>=/]+)(${It}*=${It}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),Ft=/'/g,Dt=/"/g,Wt=/^(?:script|style|textarea|title)$/i,Zt=(t=>(e,...i)=>({_$litType$:t,strings:e,values:i}))(1),Jt=Symbol.for("lit-noChange"),Kt=Symbol.for("lit-nothing"),Gt=new WeakMap,Qt=Lt.createTreeWalker(Lt,129,null,!1);function Xt(t,e){if(!Array.isArray(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==Tt?Tt.createHTML(e):e}const Yt=(t,e)=>{const i=t.length-1,s=[];let n,r=2===e?"<svg>":"",o=zt;for(let e=0;e<i;e++){const i=t[e];let a,l,d=-1,h=0;for(;h<i.length&&(o.lastIndex=h,l=o.exec(i),null!==l);)h=o.lastIndex,o===zt?"!--"===l[1]?o=Bt:void 0!==l[1]?o=jt:void 0!==l[2]?(Wt.test(l[2])&&(n=RegExp("</"+l[2],"g")),o=qt):void 0!==l[3]&&(o=qt):o===qt?">"===l[0]?(o=null!=n?n:zt,d=-1):void 0===l[1]?d=-2:(d=o.lastIndex-l[2].length,a=l[1],o=void 0===l[3]?qt:'"'===l[3]?Dt:Ft):o===Dt||o===Ft?o=qt:o===Bt||o===jt?o=zt:(o=qt,n=void 0);const c=o===qt&&t[e+1].startsWith("/>")?" ":"";r+=o===zt?i+Vt:d>=0?(s.push(a),i.slice(0,d)+kt+i.slice(d)+Rt+c):i+Rt+(-2===d?(s.push(void 0),e):c)}return[Xt(t,r+(t[i]||"<?>")+(2===e?"</svg>":"")),s]};class te{constructor({strings:t,_$litType$:e},i){let s;this.parts=[];let n=0,r=0;const o=t.length-1,a=this.parts,[l,d]=Yt(t,e);if(this.el=te.createElement(l,i),Qt.currentNode=this.el.content,2===e){const t=this.el.content,e=t.firstChild;e.remove(),t.append(...e.childNodes)}for(;null!==(s=Qt.nextNode())&&a.length<o;){if(1===s.nodeType){if(s.hasAttributes()){const t=[];for(const e of s.getAttributeNames())if(e.endsWith(kt)||e.startsWith(Rt)){const i=d[r++];if(t.push(e),void 0!==i){const t=s.getAttribute(i.toLowerCase()+kt).split(Rt),e=/([.?@])?(.*)/.exec(i);a.push({type:1,index:n,name:e[2],strings:t,ctor:"."===e[1]?re:"?"===e[1]?ae:"@"===e[1]?le:ne})}else a.push({type:6,index:n})}for(const e of t)s.removeAttribute(e)}if(Wt.test(s.tagName)){const t=s.textContent.split(Rt),e=t.length-1;if(e>0){s.textContent=Nt?Nt.emptyScript:"";for(let i=0;i<e;i++)s.append(t[i],Ot()),Qt.nextNode(),a.push({type:2,index:++n});s.append(t[e],Ot())}}}else if(8===s.nodeType)if(s.data===Ut)a.push({type:2,index:n});else{let t=-1;for(;-1!==(t=s.data.indexOf(Rt,t+1));)a.push({type:7,index:n}),t+=Rt.length-1}n++}}static createElement(t,e){const i=Lt.createElement("template");return i.innerHTML=t,i}}function ee(t,e,i=t,s){var n,r,o,a;if(e===Jt)return e;let l=void 0!==s?null===(n=i._$Co)||void 0===n?void 0:n[s]:i._$Cl;const d=Mt(e)?void 0:e._$litDirective$;return(null==l?void 0:l.constructor)!==d&&(null===(r=null==l?void 0:l._$AO)||void 0===r||r.call(l,!1),void 0===d?l=void 0:(l=new d(t),l._$AT(t,i,s)),void 0!==s?(null!==(o=(a=i)._$Co)&&void 0!==o?o:a._$Co=[])[s]=l:i._$Cl=l),void 0!==l&&(e=ee(t,l._$AS(t,e.values),l,s)),e}class ie{constructor(t,e){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=e}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){var e;const{el:{content:i},parts:s}=this._$AD,n=(null!==(e=null==t?void 0:t.creationScope)&&void 0!==e?e:Lt).importNode(i,!0);Qt.currentNode=n;let r=Qt.nextNode(),o=0,a=0,l=s[0];for(;void 0!==l;){if(o===l.index){let e;2===l.type?e=new se(r,r.nextSibling,this,t):1===l.type?e=new l.ctor(r,l.name,l.strings,this,t):6===l.type&&(e=new de(r,this,t)),this._$AV.push(e),l=s[++a]}o!==(null==l?void 0:l.index)&&(r=Qt.nextNode(),o++)}return Qt.currentNode=Lt,n}v(t){let e=0;for(const i of this._$AV)void 0!==i&&(void 0!==i.strings?(i._$AI(t,i,e),e+=i.strings.length-2):i._$AI(t[e])),e++}}class se{constructor(t,e,i,s){var n;this.type=2,this._$AH=Kt,this._$AN=void 0,this._$AA=t,this._$AB=e,this._$AM=i,this.options=s,this._$Cp=null===(n=null==s?void 0:s.isConnected)||void 0===n||n}get _$AU(){var t,e;return null!==(e=null===(t=this._$AM)||void 0===t?void 0:t._$AU)&&void 0!==e?e:this._$Cp}get parentNode(){let t=this._$AA.parentNode;const e=this._$AM;return void 0!==e&&11===(null==t?void 0:t.nodeType)&&(t=e.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,e=this){t=ee(this,t,e),Mt(t)?t===Kt||null==t||""===t?(this._$AH!==Kt&&this._$AR(),this._$AH=Kt):t!==this._$AH&&t!==Jt&&this._(t):void 0!==t._$litType$?this.g(t):void 0!==t.nodeType?this.$(t):(t=>Ht(t)||"function"==typeof(null==t?void 0:t[Symbol.iterator]))(t)?this.T(t):this._(t)}k(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}$(t){this._$AH!==t&&(this._$AR(),this._$AH=this.k(t))}_(t){this._$AH!==Kt&&Mt(this._$AH)?this._$AA.nextSibling.data=t:this.$(Lt.createTextNode(t)),this._$AH=t}g(t){var e;const{values:i,_$litType$:s}=t,n="number"==typeof s?this._$AC(t):(void 0===s.el&&(s.el=te.createElement(Xt(s.h,s.h[0]),this.options)),s);if((null===(e=this._$AH)||void 0===e?void 0:e._$AD)===n)this._$AH.v(i);else{const t=new ie(n,this),e=t.u(this.options);t.v(i),this.$(e),this._$AH=t}}_$AC(t){let e=Gt.get(t.strings);return void 0===e&&Gt.set(t.strings,e=new te(t)),e}T(t){Ht(this._$AH)||(this._$AH=[],this._$AR());const e=this._$AH;let i,s=0;for(const n of t)s===e.length?e.push(i=new se(this.k(Ot()),this.k(Ot()),this,this.options)):i=e[s],i._$AI(n),s++;s<e.length&&(this._$AR(i&&i._$AB.nextSibling,s),e.length=s)}_$AR(t=this._$AA.nextSibling,e){var i;for(null===(i=this._$AP)||void 0===i||i.call(this,!1,!0,e);t&&t!==this._$AB;){const e=t.nextSibling;t.remove(),t=e}}setConnected(t){var e;void 0===this._$AM&&(this._$Cp=t,null===(e=this._$AP)||void 0===e||e.call(this,t))}}class ne{constructor(t,e,i,s,n){this.type=1,this._$AH=Kt,this._$AN=void 0,this.element=t,this.name=e,this._$AM=s,this.options=n,i.length>2||""!==i[0]||""!==i[1]?(this._$AH=Array(i.length-1).fill(new String),this.strings=i):this._$AH=Kt}get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}_$AI(t,e=this,i,s){const n=this.strings;let r=!1;if(void 0===n)t=ee(this,t,e,0),r=!Mt(t)||t!==this._$AH&&t!==Jt,r&&(this._$AH=t);else{const s=t;let o,a;for(t=n[0],o=0;o<n.length-1;o++)a=ee(this,s[i+o],e,o),a===Jt&&(a=this._$AH[o]),r||(r=!Mt(a)||a!==this._$AH[o]),a===Kt?t=Kt:t!==Kt&&(t+=(null!=a?a:"")+n[o+1]),this._$AH[o]=a}r&&!s&&this.j(t)}j(t){t===Kt?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,null!=t?t:"")}}class re extends ne{constructor(){super(...arguments),this.type=3}j(t){this.element[this.name]=t===Kt?void 0:t}}const oe=Nt?Nt.emptyScript:"";class ae extends ne{constructor(){super(...arguments),this.type=4}j(t){t&&t!==Kt?this.element.setAttribute(this.name,oe):this.element.removeAttribute(this.name)}}class le extends ne{constructor(t,e,i,s,n){super(t,e,i,s,n),this.type=5}_$AI(t,e=this){var i;if((t=null!==(i=ee(this,t,e,0))&&void 0!==i?i:Kt)===Jt)return;const s=this._$AH,n=t===Kt&&s!==Kt||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,r=t!==Kt&&(s===Kt||n);n&&this.element.removeEventListener(this.name,this,s),r&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){var e,i;"function"==typeof this._$AH?this._$AH.call(null!==(i=null===(e=this.options)||void 0===e?void 0:e.host)&&void 0!==i?i:this.element,t):this._$AH.handleEvent(t)}}class de{constructor(t,e,i){this.element=t,this.type=6,this._$AN=void 0,this._$AM=e,this.options=i}get _$AU(){return this._$AM._$AU}_$AI(t){ee(this,t)}}const he=Pt.litHtmlPolyfillSupport;null==he||he(te,se),(null!==(Et=Pt.litHtmlVersions)&&void 0!==Et?Et:Pt.litHtmlVersions=[]).push("2.8.0");var ce,pe;class ue extends Ct{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){var t,e;const i=super.createRenderRoot();return null!==(t=(e=this.renderOptions).renderBefore)&&void 0!==t||(e.renderBefore=i.firstChild),i}update(t){const e=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=((t,e,i)=>{var s,n;const r=null!==(s=null==i?void 0:i.renderBefore)&&void 0!==s?s:e;let o=r._$litPart$;if(void 0===o){const t=null!==(n=null==i?void 0:i.renderBefore)&&void 0!==n?n:null;r._$litPart$=o=new se(e.insertBefore(Ot(),t),t,void 0,null!=i?i:{})}return o._$AI(t),o})(e,this.renderRoot,this.renderOptions)}connectedCallback(){var t;super.connectedCallback(),null===(t=this._$Do)||void 0===t||t.setConnected(!0)}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this._$Do)||void 0===t||t.setConnected(!1)}render(){return Jt}}ue.finalized=!0,ue._$litElement$=!0,null===(ce=globalThis.litElementHydrateSupport)||void 0===ce||ce.call(globalThis,{LitElement:ue});const me=globalThis.litElementPolyfillSupport;null==me||me({LitElement:ue}),(null!==(pe=globalThis.litElementVersions)&&void 0!==pe?pe:globalThis.litElementVersions=[]).push("3.3.3");const ge=1;class ve{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,i){this._$Ct=t,this._$AM=e,this._$Ci=i}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}}const fe=(t=>(...e)=>({_$litDirective$:t,values:e}))(class extends ve{constructor(t){var e;if(super(t),t.type!==ge||"class"!==t.name||(null===(e=t.strings)||void 0===e?void 0:e.length)>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return" "+Object.keys(t).filter((e=>t[e])).join(" ")+" "}update(t,[e]){var i,s;if(void 0===this.it){this.it=new Set,void 0!==t.strings&&(this.nt=new Set(t.strings.join(" ").split(/\s/).filter((t=>""!==t))));for(const t in e)e[t]&&!(null===(i=this.nt)||void 0===i?void 0:i.has(t))&&this.it.add(t);return this.render(e)}const n=t.element.classList;this.it.forEach((t=>{t in e||(n.remove(t),this.it.delete(t))}));for(const t in e){const i=!!e[t];i===this.it.has(t)||(null===(s=this.nt)||void 0===s?void 0:s.has(t))||(i?(n.add(t),this.it.add(t)):(n.remove(t),this.it.delete(t)))}return Jt}}),_e=((t,...e)=>{const i=1===t.length?t[0]:e.reduce(((e,i,s)=>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.")})(i)+t[s+1]),t[0]);return new gt(i,t,ut)})`
+  :host {
+    display: block;
+  }
+  :host([hidden]) {
+    display: none;
+  }
+  input {
+    display: block;
+    width: 100%;
+    padding: 0.5em;
+    font-size: 1rem;
+    line-height: 1.25rem;
+    border: 1px solid lightgrey;
+    background-repeat: no-repeat;
+    background-position: calc(100% - 0.5em) 50%;
+    border-radius: 3px;
+    box-sizing: border-box;
+  }
+  input:focus {
+    outline: none;
+    box-shadow: 0 0 2px 1px rgba(0, 153, 204, 0.39),
+      0 0 4px 3px rgba(0, 153, 204, 0.18), 0 0 8px 4px rgba(0, 153, 204, 0.1);
+  }
+  input:required.-is-valid {
+    border-color: #99ca3c;
+    background-image: url("data:image/svg+xml,%3Csvg width='19px' height='13px' viewBox='0 0 19 13' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Cpolygon fill='%2399CA3C' points='6.70967742 13 0 6.29032258 2.09677419 4.19354839 6.70967742 8.80645161 16.3548387 0 18.4516129 2.09677419'%3E%3C/polygon%3E %3C/svg%3E");
+    padding-right: 2em;
+  }
+  input:required.-is-invalid {
+    border-color: #e3097c;
+    background-image: url("data:image/svg+xml,%3Csvg width='15px' height='15px' viewBox='0 0 15 15' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Cpolygon id='Path' fill='%23E3097C' points='12.759145 0.0312229203 14.8804653 2.15254326 9.57716447 7.45584412 14.8804653 12.759145 12.759145 14.8804653 7.45584412 9.57716447 2.15254326 14.8804653 0.0312229203 12.759145 5.33452378 7.45584412 0.0312229203 2.15254326 2.15254326 0.0312229203 7.45584412 5.33452378'%3E%3C/polygon%3E %3C/svg%3E");
+    padding-right: 2em;
+  }
+  input[type='search'] {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24' height='24' viewBox='0 0 24 24'%3E%3Cdefs%3E%3CclipPath id='clip-path'%3E%3Cpath id='Path_46' data-name='Path 46' d='M17.835-27.347l5.506,5.506a2.249,2.249,0,0,1,0,3.182,2.249,2.249,0,0,1-3.182,0h0l-5.506-5.506a10.6,10.6,0,0,0,3.182-3.182ZM9-42a9,9,0,0,1,9,9,9,9,0,0,1-9,9,9,9,0,0,1-9-9A9,9,0,0,1,9-42Zm0,2.25A6.757,6.757,0,0,0,2.25-33,6.757,6.757,0,0,0,9-26.25,6.757,6.757,0,0,0,15.75-33,6.758,6.758,0,0,0,9-39.75Zm0,1.5v1.5A3.754,3.754,0,0,0,5.25-33H3.75A5.256,5.256,0,0,1,9-38.25Z' transform='translate(0 42)' fill='%23d8d8d8' clip-rule='evenodd'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg id='icon_search' data-name='icon search' clip-path='url(%23clip-path)'%3E%3Cpath id='Path_45' data-name='Path 45' d='M-1-43H24.363v25.363H-1Z' transform='translate(0.429 42.429)' fill='%23d8d8d8'/%3E%3C/g%3E%3C/svg%3E%0A");
+    background-position: 0.5em 50%;
+    padding-left: 2.25rem;
+  }
+  input:disabled {
+    border-width: 0 0 1px;
+    color: #595959;
+    border-color: lightgrey;
+  }
+  input:not([type='search']):disabled {
+    background-image: none;
+    padding-left: 0;
+  }
+`;window.customElements.define("ix-textbox-old",class extends ue{constructor(){super(),this.classList=[],this.text="",this.fullValidation=!0,this.placeholder=""}static get properties(){return{text:{type:String},type:{type:String},disabled:{type:Boolean},classList:{type:Array},onChange:{type:Function},isRequired:{type:Boolean},fullValidation:{type:Boolean},placeholder:{type:Boolean}}}static get styles(){return[_e]}get inputElement(){return this.element||(this.element=this.shadowRoot.querySelector("#ix-textbox-input")),this.element}async connectedCallback(){super.connectedCallback(),await this.updateComplete,this.isRequired&&this.text&&this.validate()}update(t){super.update(t);const e=t.get("isRequired");if(void 0!==e&&!e)if(this.fullValidation){const t=this.validate();this.onChange&&this.onChange({value:this.text,isValid:t})}else this.applyValidationStyle(!0),this.onChange&&this.onChange({value:this.text,isValid:!0})}getCssClasses(){const t={};return this.classList.map((e=>(t[e]=!0,!0))),t}inputType(){return["text","email","number","phone","search"].includes(this.type)?this.type:"text"}getValidityStatus(){return!(this.isRequired&&!this.text)&&("text"===this.type?!!this.text:"number"===this.type?(t=this.text,/^\d+$/.test(t)):"email"===this.type?(e=this.text,/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(String(e).toLowerCase())):"phone"!==this.type||(i=this.text,/^\+[1-9]\d{1,14}$/.test(i)));var t,e,i}applyValidationStyle(t){t?t&&!this.fullValidation?this.classList=this.classList.filter((t=>"-is-invalid"!==t&&"-is-valid"!==t)):t&&this.fullValidation&&(this.classList.includes("-is-valid")||this.classList.push("-is-valid"),this.classList=this.classList.filter((t=>"-is-invalid"!==t))):(this.classList.includes("-is-invalid")||this.classList.push("-is-invalid"),this.classList=this.classList.filter((t=>"-is-valid"!==t))),this.disabled&&(this.classList=this.classList.filter((t=>"-is-invalid"!==t&&"-is-valid"!==t)))}toggleDisabled(){this.disabled=!this.disabled}validate(){const t=this.getValidityStatus();return this.isValid=t,this.isRequired&&this.applyValidationStyle(t),t}handleChange(t){this.text=t.target.value,this.validate();const{isValid:e}=this;this.onChange&&this.onChange({value:this.text,isValid:e})}render(){return Zt`
+      <input
+        id="ix-textbox-input"
+        type="${this.inputType()}"
+        ?disabled="${this.disabled}"
+        .value="${this.text||""}"
+        class="${fe(this.getCssClasses())}"
+        @change="${this.handleChange}"
+        @keyup="${this.handleChange}"
+        @search="${this.handleChange}"
+        .placeholder="${this.placeholder}"
+        ?required=${this.isRequired}
+      />
+    `}});const ye=X`:host{display:flex;justify-content:space-between;align-items:center;border:1px solid #d3d3d3;border-width:1px 0;padding:1rem 0;flex-wrap:wrap;margin-bottom:1.5rem}ix-textbox{flex:1 0 min(280px,100%)}.items-count{flex:1000 0 7em;text-align:right;padding:.5em 0}`;window.customElements.define("ix-search-bar",class extends tt{static get properties(){return{items:{type:Array},searchFields:{type:Array},foundItems:{type:Array,reflect:!0},onResultsFound:{type:Function}}}connectedCallback(){super.connectedCallback(),this.resetResults()}resetResults(){this.foundItems=this.items}static get styles(){return[ye]}get itemsCount(){return Array.isArray(this.foundItems)&&this.foundItems.length?this.foundItems.length:0}get itemsLabel(){return 1===this.itemsCount?"item":"items"}filterItems(t){if(this.value=t.value,""===this.value)return this.resetResults(),void(this.onResultsFound&&this.onResultsFound(this.items));if(this.value.length<1)return;const e=[];for(const t of this.items)for(const i of this.searchFields)if(i in t&&t[i].toLocaleLowerCase().includes(this.value.toLocaleLowerCase())){e.push(t);break}this.foundItems=e,this.onResultsFound&&this.onResultsFound(e)}render(){return M` <ix-textbox-old type="search" .onChange="${t=>this.filterItems(t)}"></ix-textbox-old> <div class="items-count">${this.itemsCount} ${this.itemsLabel}</div> `}});const be=X`:host{justify-content:space-between;align-items:center;border:1px solid #d3d3d3;border-width:1px 0;padding:1rem 0;box-sizing:border-box}*,:after,:before{box-sizing:inherit}.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(var(--tile-base-font-size,1rem) * 14),1fr));grid-gap:1em}.tile{display:flex;flex-direction:column;padding:var(--tile-padding-top,var(--tile-padding-vertical,var(--tile-padding,1em))) var(--tile-padding-right,var(--tile-padding-horizontal,var(--tile-padding,1em))) var(--tile-padding-bottom,var(--tile-padding-vertical,var(--tile-padding,0))) var(--tile-padding-left,var(--tile-padding-horizontal,var(--tile-padding,1em)));font-size:var(--tile-base-font-size,1rem);border:1px solid #dedede;color:#333;background-color:var(--tile-background-color,#fff)}.tile.-disabled{--tile-background-color:#f5f5f5}.tile.-hidden{display:none}.tile__header{flex:0 0 auto;position:relative;display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:.5em;margin-bottom:.5em;border-bottom:1px solid #d3d3d3}.tile-heading{display:flex;flex-direction:column-reverse;margin:0;padding:0}.tile-heading__label{font-size:.8125em;line-height:1.5385em;color:rgba(51,51,51,.7);font-family:var(
+      --tile-heading-label-font-family,
+      var(--tile-font-family, 'Helvetica', 'Arial', sans-serif)
+    )}.tile-heading__value{margin:0;font-size:1.125em;line-height:1.3333em;font-family:var(
+      --tile-heading-value-font-family,
+      var(--tile-font-family, 'Museo-300', 'Helvetica', 'Arial', sans-serif)
+    )}.tile__body{flex:1 0 auto;padding-bottom:.5em}.tile__footer{flex:0 0 auto;padding:var(--tile-footer-padding-top,var(--tile-footer-padding-vertical,var(--tile-footer-padding,1em))) var(--tile-footer-padding-right,var(--tile-footer-padding-horizontal,var(--tile-footer-padding,0))) var(--tile-footer-padding-bottom,var(--tile-footer-padding-vertical,var(--tile-footer-padding,1em))) var(--tile-footer-padding-left,var(--tile-footer-padding-horizontal,var(--tile-footer-padding,0)));border-top:1px solid #d3d3d3}.tile__footer.-full-bleed{margin-left:calc(var(--tile-padding-left,var(--tile-padding-horizontal,var(--tile-padding,1em))) * -1);margin-right:calc(var(--tile-padding-right,var(--tile-padding-horizontal,var(--tile-padding,1em))) * -1);margin-bottom:calc(var(--tile-padding-bottom,var(--tile-padding-vertical,var(--tile-padding,0))) * -1);margin-top:0}.tile-radio-btn{position:relative;padding:0;border-top:none}.tile-radio-btn__input{position:absolute;top:0;left:0;opacity:0;z-index:-1}.tile-radio-btn__input:focus{outline:0}.tile-radio-btn__label{display:block;padding:1em;text-align:center;background-color:#d6eef7;background-color:var(--tile-radio-btn-bg-color,#d6eef7);color:inherit;color:var(--tile-radio-btn-text-color,inherit);cursor:pointer}.tile-radio-btn__input:focus~.tile-radio-btn__label{box-shadow:0 -4px 0 0 #007399 inset;box-shadow:0 -4px 0 0 var(--tile-radio-btn-focus-accent-color,#007399) inset}@media (hover:hover){.tile-radio-btn__label:hover{background-color:#abdcef;background-color:var(--tile-radio-btn-hover-bg-color,var(--tile-radio-btn-bg-color,#abdcef));color:inherit;color:var(--tile-radio-btn-hover-text-color,var(--tile-radio-btn-text-color,inherit))}}.tile-radio-btn__label.-checked{background-color:#09c;background-color:var(--tile-radio-btn-selected-bg-color,#09c);color:#fff;color:var(--tile-radio-btn-selected-text-color,var(--tile-radio-btn-text-color,#fff));opacity:0}.tile-radio-btn__input:checked~.tile-radio-btn__label.-checked{opacity:1;cursor:default}.tile-radio-btn__label.-disabled{background-image:repeating-linear-gradient(-30deg,transparent 0,transparent 3px,rgba(0,0,0,.1) 3px,rgba(0,0,0,.1) 4px);background-color:#d3d3d3;background-color:var(--tile-radio-btn-disabled-bg-color,#d3d3d3);color:#888;color:var(--tile-radio-btn-disabled-text-color,var(--tile-radio-btn-text-color,#888));cursor:not-allowed}`;window.customElements.define("ix-tile-picker",class extends tt{static get properties(){return{items:{type:Array},searchFields:{type:Array},foundItems:{type:Array},onResultsFound:{type:Function},onSelectTile:{type:Function}}}connectedCallback(){super.connectedCallback(),this.foundItems=this.items}static get styles(){return[be]}filterTiles(t){this.foundItems=this.items.map((e=>({...e,hidden:!t.includes(e)}))),this.onResultsFound&&this.onResultsFound(this.foundItems)}handleClick(t){this.value=t.target.value,this.onSelectTile&&this.onSelectTile(this.value);const e=this.foundItems.find((t=>t.id===this.value));this.renderRadioButtonLabel(e),this.requestUpdate()}getRadioButtonLabelClass(t){return ht({"-disabled":t.disabled,"-checked":t.id===this.value,"-unselected":t.id!==this.value})}getRadioButtonLabelText(t){return t.disabled?t.disabledButtonText:t.id===this.value?M`Selected`:M`Choose`}renderRadioButtonLabel(t){return M`<label for="tile-${t.id}" class="tile-radio-btn__label ${this.getRadioButtonLabelClass(t)}" aria-hidden="true">${this.getRadioButtonLabelText(t)}</label>`}render(){return M` <ix-search-bar .items="${this.items}" .searchFields="${this.searchFields}" .onResultsFound="${t=>this.filterTiles(t)}"></ix-search-bar> <div class="tiles"> ${this.foundItems.length?this.foundItems.map(((t,e)=>M` <div class="tile ${ht({"-disabled":t.disabled,"-hidden":t.hidden})}"> <header class="tile__header" aria-hidden="true"> <dl class="tile-heading" id="tileLabel${e}"> <dt class="tile-heading__label"> <slot name="label-${t.id}"></slot> </dt> <dd class="tile-heading__value"> <slot name="value-${t.id}"></slot> </dd> </dl> </header> <div class="tile__body" aria-hidden="true" id="tileDescription${e}"> <slot name="body-${t.id}"></slot> </div> <span class="tile__footer -full-bleed tile-radio-btn"> <input id="tile-${t.id}" type="radio" class="tile-radio-btn__input" name="picked-tile" aria-labelledby="tileLabel${e}" aria-describedby="tileDescription${e}" .value="${t.id}" @click="${this.handleClick}" ?disabled="${t.disabled}"> ${this.renderRadioButtonLabel(t)} </span> </div> `)):nt} </div> `}});

package/dist/index.html ADDED Viewed

	@@ -0,0 +1 @@
1	+ <!doctype html><html lang="en"><head><meta charset="utf-8"><title>ix-tile-picker</title><link rel="preload" href="./56b173ab.js" as="script" crossorigin="anonymous"></head><body><ix-tile-picker></ix-tile-picker><script type="module" src="./56b173ab.js"></script></body></html>

package/dist/src/IxTilePicker.d.ts ADDED Viewed

@@ -0,0 +1,26 @@
+import { LitElement } from 'lit';
+import '@material/web/elevation/elevation.js';
+import '@interxion/ix-search-bar';
+export interface Item {
+    id: string;
+    disabled: boolean;
+    hidden: boolean;
+    disabledButtonText: string;
+    company: string;
+}
+export declare class IxTilePicker extends LitElement {
+    static get styles(): import("lit").CSSResult[];
+    items: Array<Item>;
+    searchFields: Array<string>;
+    foundItems: Array<Item>;
+    onSelectTile: Function | undefined;
+    onResultsFound: Function | undefined;
+    value: string;
+    connectedCallback(): void;
+    filterTiles(searchResults: Item[]): void;
+    handleClick(e: Event): void;
+    getRadioButtonLabelText(item: Item): string | import("lit-html").TemplateResult<1>;
+    getRadioButtonLabelClass(item: Item): import("lit-html/directive.js").DirectiveResult<typeof import("lit-html/directives/class-map.js").ClassMapDirective>;
+    renderRadioButtonLabel(item: Item): import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/src/IxTilePicker.js ADDED Viewed

@@ -0,0 +1,140 @@
+import { __decorate } from "tslib";
+import { html, LitElement, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { IxTilePickerStyles } from './ix-tile-picker-styles.js';
+import '@material/web/elevation/elevation.js';
+import '@interxion/ix-search-bar';
+export class IxTilePicker extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.items = [];
+        this.searchFields = [];
+        this.foundItems = [];
+        this.onSelectTile = undefined;
+        this.onResultsFound = undefined;
+        this.value = '';
+    }
+    static get styles() {
+        return [IxTilePickerStyles];
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.foundItems = this.items;
+    }
+    filterTiles(searchResults) {
+        this.foundItems = this.items.map((item) => ({
+            ...item,
+            hidden: !searchResults.includes(item),
+        }));
+        if (this.onResultsFound)
+            this.onResultsFound(this.foundItems);
+    }
+    handleClick(e) {
+        const { target } = e;
+        this.value = target.value || '';
+        if (this.onSelectTile) {
+            this.onSelectTile(this.value);
+        }
+        const foundItem = this.foundItems.find((item) => item.id === this.value);
+        if (foundItem) {
+            this.renderRadioButtonLabel(foundItem);
+        }
+        this.requestUpdate();
+    }
+    getRadioButtonLabelText(item) {
+        if (item.disabled)
+            return item.disabledButtonText || html `Disabled`;
+        if (item.id === this.value)
+            return html `Selected`;
+        return html `Choose`;
+    }
+    getRadioButtonLabelClass(item) {
+        return classMap({
+            '-disabled': item.disabled,
+            '-checked': item.id === this.value,
+            '-unselected': item.id !== this.value,
+        });
+    }
+    renderRadioButtonLabel(item) {
+        return html `<label
+      for="tile-${item.id}"
+      class="tile-radio-btn__label ${this.getRadioButtonLabelClass(item)}"
+      aria-hidden="true"
+      >${this.getRadioButtonLabelText(item)}</label
+    >`;
+    }
+    render() {
+        return html `
+      <ix-search-bar
+        .items="${this.items}"
+        .searchFields="${this.searchFields}"
+        .onResultsFound="${(items) => this.filterTiles(items)}"
+      ></ix-search-bar>
+      <div class="tiles">
+        ${this.foundItems.length
+            ? this.foundItems.map((item, index) => html `
+                <div
+                  class="tile surface ${classMap({
+                '-disabled': item.disabled,
+                '-hidden': item.hidden,
+            })}"
+                >
+                  <md-elevation></md-elevation>
+                  <header class="tile__header" aria-hidden="true">
+                    <dl class="tile-heading" id="tileLabel${index}">
+                      <dt class="tile-heading__label">
+                        <slot name="label-${item.id}"></slot>
+                      </dt>
+                      <dd class="tile-heading__value">
+                        <slot name="value-${item.id}"></slot>
+                      </dd>
+                    </dl>
+                  </header>
+                  <div
+                    class="tile__body"
+                    aria-hidden="true"
+                    id="tileDescription${index}"
+                  >
+                    <slot name="body-${item.id}"></slot>
+                  </div>
+                  <span class="tile__footer -full-bleed tile-radio-btn">
+                    <input
+                      id="tile-${item.id}"
+                      type="radio"
+                      class="tile-radio-btn__input"
+                      name="picked-tile"
+                      aria-labelledby="tileLabel${index}"
+                      aria-describedby="tileDescription${index}"
+                      .value="${item.id}"
+                      @click="${this.handleClick}"
+                      ?disabled="${item.disabled}"
+                    />
+                    ${this.renderRadioButtonLabel(item)}
+                  </span>
+                </div>
+              `)
+            : nothing}
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ type: Array })
+], IxTilePicker.prototype, "items", void 0);
+__decorate([
+    property({ type: Array })
+], IxTilePicker.prototype, "searchFields", void 0);
+__decorate([
+    property({ type: Array })
+], IxTilePicker.prototype, "foundItems", void 0);
+__decorate([
+    property({ attribute: false })
+], IxTilePicker.prototype, "onSelectTile", void 0);
+__decorate([
+    property({ attribute: false })
+], IxTilePicker.prototype, "onResultsFound", void 0);
+//# sourceMappingURL=IxTilePicker.js.map

package/dist/src/IxTilePicker.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"IxTilePicker.js","sourceRoot":"","sources":["../../src/IxTilePicker.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,sCAAsC,CAAC;AAC9C,OAAO,0BAA0B,CAAC;AAUlC,MAAM,OAAO,YAAa,SAAQ,UAAU;IAA5C;;QAK6B,UAAK,GAAgB,EAAE,CAAC;QAExB,iBAAY,GAAkB,EAAE,CAAC;QAEjC,eAAU,GAAgB,EAAE,CAAC;QAExB,iBAAY,GAC1C,SAAS,CAAC;QAEoB,mBAAc,GAC5C,SAAS,CAAC;QAEZ,UAAK,GAAW,EAAE,CAAC;IAoHrB,CAAC;IApIC,MAAM,KAAK,MAAM;QACf,OAAO,CAAC,kBAAkB,CAAC,CAAC;IAC9B,CAAC;IAgBD,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC;IAC/B,CAAC;IAED,WAAW,CAAC,aAAqB;QAC/B,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAU,EAAE,EAAE,CAAC,CAAC;YAChD,GAAG,IAAI;YACP,MAAM,EAAE,CAAC,aAAa,CAAC,QAAQ,CAAC,IAAI,CAAC;SACtC,CAAC,CAAC,CAAC;QAEJ,IAAI,IAAI,CAAC,cAAc;YAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IAChE,CAAC;IAED,WAAW,CAAC,CAAQ;QAClB,MAAM,EAAE,MAAM,EAAE,GAAG,CAAC,CAAC;QACrB,IAAI,CAAC,KAAK,GAAI,MAA2B,CAAC,KAAK,IAAI,EAAE,CAAC;QACtD,IAAI,IAAI,CAAC,YAAY,EAAE;YACrB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SAC/B;QAED,MAAM,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CACpC,CAAC,IAAU,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,IAAI,CAAC,KAAK,CACvC,CAAC;QACF,IAAI,SAAS,EAAE;YACb,IAAI,CAAC,sBAAsB,CAAC,SAAS,CAAC,CAAC;SACxC;QACD,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAED,uBAAuB,CAAC,IAAU;QAChC,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO,IAAI,CAAC,kBAAkB,IAAI,IAAI,CAAA,UAAU,CAAC;QAEpE,IAAI,IAAI,CAAC,EAAE,KAAK,IAAI,CAAC,KAAK;YAAE,OAAO,IAAI,CAAA,UAAU,CAAC;QAElD,OAAO,IAAI,CAAA,QAAQ,CAAC;IACtB,CAAC;IAED,wBAAwB,CAAC,IAAU;QACjC,OAAO,QAAQ,CAAC;YACd,WAAW,EAAE,IAAI,CAAC,QAAQ;YAC1B,UAAU,EAAE,IAAI,CAAC,EAAE,KAAK,IAAI,CAAC,KAAK;YAClC,aAAa,EAAE,IAAI,CAAC,EAAE,KAAK,IAAI,CAAC,KAAK;SACtC,CAAC,CAAC;IACL,CAAC;IAED,sBAAsB,CAAC,IAAU;QAC/B,OAAO,IAAI,CAAA;kBACG,IAAI,CAAC,EAAE;qCACY,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC;;SAE/D,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC;MACrC,CAAC;IACL,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;kBAEG,IAAI,CAAC,KAAK;yBACH,IAAI,CAAC,YAAY;2BACf,CAAC,KAAa,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;;;;UAI3D,IAAI,CAAC,UAAU,CAAC,MAAM;YACtB,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,CACjB,CAAC,IAAU,EAAE,KAAa,EAAE,EAAE,CAAC,IAAI,CAAA;;wCAET,QAAQ,CAAC;gBAC7B,WAAW,EAAE,IAAI,CAAC,QAAQ;gBAC1B,SAAS,EAAE,IAAI,CAAC,MAAM;aACvB,CAAC;;;;4DAIwC,KAAK;;4CAErB,IAAI,CAAC,EAAE;;;4CAGP,IAAI,CAAC,EAAE;;;;;;;;yCAQV,KAAK;;uCAEP,IAAI,CAAC,EAAE;;;;;iCAKb,IAAI,CAAC,EAAE;;;;kDAIU,KAAK;yDACE,KAAK;gCAC9B,IAAI,CAAC,EAAE;gCACP,IAAI,CAAC,WAAW;mCACb,IAAI,CAAC,QAAQ;;sBAE1B,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC;;;eAGxC,CACF;YACH,CAAC,CAAC,OAAO;;KAEd,CAAC;IACJ,CAAC;CACF;AAhI4B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;2CAAyB;AAExB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;kDAAkC;AAEjC;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;gDAA8B;AAExB;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;kDACnB;AAEoB;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;oDACnB","sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { IxTilePickerStyles } from './ix-tile-picker-styles.js';\nimport '@material/web/elevation/elevation.js';\nimport '@interxion/ix-search-bar';\n\nexport interface Item {\n id: string;\n disabled: boolean;\n hidden: boolean;\n disabledButtonText: string;\n company: string;\n}\n\nexport class IxTilePicker extends LitElement {\n static get styles() {\n return [IxTilePickerStyles];\n }\n\n @property({ type: Array }) items: Array<Item> = [];\n\n @property({ type: Array }) searchFields: Array<string> = [];\n\n @property({ type: Array }) foundItems: Array<Item> = [];\n\n @property({ attribute: false }) onSelectTile: Function | undefined =\n undefined;\n\n @property({ attribute: false }) onResultsFound: Function | undefined =\n undefined;\n\n value: string = '';\n\n connectedCallback() {\n super.connectedCallback();\n this.foundItems = this.items;\n }\n\n filterTiles(searchResults: Item[]) {\n this.foundItems = this.items.map((item: Item) => ({\n ...item,\n hidden: !searchResults.includes(item),\n }));\n\n if (this.onResultsFound) this.onResultsFound(this.foundItems);\n }\n\n handleClick(e: Event) {\n const { target } = e;\n this.value = (target as HTMLInputElement).value || '';\n if (this.onSelectTile) {\n this.onSelectTile(this.value);\n }\n\n const foundItem = this.foundItems.find(\n (item: Item) => item.id === this.value\n );\n if (foundItem) {\n this.renderRadioButtonLabel(foundItem);\n }\n this.requestUpdate();\n }\n\n getRadioButtonLabelText(item: Item) {\n if (item.disabled) return item.disabledButtonText || html`Disabled`;\n\n if (item.id === this.value) return html`Selected`;\n\n return html`Choose`;\n }\n\n getRadioButtonLabelClass(item: Item) {\n return classMap({\n '-disabled': item.disabled,\n '-checked': item.id === this.value,\n '-unselected': item.id !== this.value,\n });\n }\n\n renderRadioButtonLabel(item: Item) {\n return html`<label\n for=\"tile-${item.id}\"\n class=\"tile-radio-btn__label ${this.getRadioButtonLabelClass(item)}\"\n aria-hidden=\"true\"\n >${this.getRadioButtonLabelText(item)}</label\n >`;\n }\n\n render() {\n return html`\n <ix-search-bar\n .items=\"${this.items}\"\n .searchFields=\"${this.searchFields}\"\n .onResultsFound=\"${(items: Item[]) => this.filterTiles(items)}\"\n ></ix-search-bar>\n\n <div class=\"tiles\">\n ${this.foundItems.length\n ? this.foundItems.map(\n (item: Item, index: number) => html`\n <div\n class=\"tile surface ${classMap({\n '-disabled': item.disabled,\n '-hidden': item.hidden,\n })}\"\n >\n <md-elevation></md-elevation>\n <header class=\"tile__header\" aria-hidden=\"true\">\n <dl class=\"tile-heading\" id=\"tileLabel${index}\">\n <dt class=\"tile-heading__label\">\n <slot name=\"label-${item.id}\"></slot>\n </dt>\n <dd class=\"tile-heading__value\">\n <slot name=\"value-${item.id}\"></slot>\n </dd>\n </dl>\n </header>\n\n <div\n class=\"tile__body\"\n aria-hidden=\"true\"\n id=\"tileDescription${index}\"\n >\n <slot name=\"body-${item.id}\"></slot>\n </div>\n\n <span class=\"tile__footer -full-bleed tile-radio-btn\">\n <input\n id=\"tile-${item.id}\"\n type=\"radio\"\n class=\"tile-radio-btn__input\"\n name=\"picked-tile\"\n aria-labelledby=\"tileLabel${index}\"\n aria-describedby=\"tileDescription${index}\"\n .value=\"${item.id}\"\n @click=\"${this.handleClick}\"\n ?disabled=\"${item.disabled}\"\n />\n ${this.renderRadioButtonLabel(item)}\n </span>\n </div>\n `\n )\n : nothing}\n </div>\n `;\n }\n}\n"]}

package/dist/src/index.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export { IxTilePicker } from './IxTilePicker.js';

package/dist/src/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export { IxTilePicker } from './IxTilePicker.js';
2	+ //# sourceMappingURL=index.js.map

package/dist/src/index.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC","sourcesContent":["export { IxTilePicker } from './IxTilePicker.js';\n"]}

package/dist/src/ix-tile-picker-styles.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const IxTilePickerStyles: import("lit").CSSResult;