honeycomb-element
Version:
Webcomponent honeycomb-element following open-wc recommendations
399 lines (365 loc) • 35.5 kB
JavaScript
/*! *****************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
function t(t,i,e,s){for(var n,o=arguments.length,r=o<3?i:null===s?s=Object.getOwnPropertyDescriptor(i,e):s,h=t.length-1;h>=0;h--)(n=t[h])&&(r=(o<3?n(r):o>3?n(i,e,r):n(i,e))||r);return o>3&&r&&Object.defineProperty(i,e,r),r
/**
* @license
* Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
* This code may only be used under the BSD style license found at
* http://polymer.github.io/LICENSE.txt
* The complete set of authors may be found at
* http://polymer.github.io/AUTHORS.txt
* The complete set of contributors may be found at
* http://polymer.github.io/CONTRIBUTORS.txt
* Code distributed by Google as part of the polymer project is also
* subject to an additional IP rights grant found at
* http://polymer.github.io/PATENTS.txt
*/}const i="undefined"!=typeof window&&null!=window.customElements&&void 0!==window.customElements.polyfillWrapFlushCallback,e=(t,i,e=null)=>{for(;i!==e;){const e=i.nextSibling;t.removeChild(i),i=e}},s=`{{lit-${String(Math.random()).slice(2)}}}`,n=`\x3c!--${s}--\x3e`,o=new RegExp(`${s}|${n}`);class r{constructor(t,i){this.parts=[],this.element=i;const e=[],n=[],r=document.createTreeWalker(i.content,133,null,!1);let c=0,u=-1,d=0;const{strings:f,values:{length:p}}=t;for(;d<p;){const t=r.nextNode();if(null!==t){if(u++,1===t.nodeType){if(t.hasAttributes()){const i=t.attributes,{length:e}=i;let s=0;for(let t=0;t<e;t++)h(i[t].name,"$lit$")&&s++;for(;s-- >0;){const i=f[d],e=l.exec(i)[2],s=e.toLowerCase()+"$lit$",n=t.getAttribute(s);t.removeAttribute(s);const r=n.split(o);this.parts.push({type:"attribute",index:u,name:e,strings:r}),d+=r.length-1}}"TEMPLATE"===t.tagName&&(n.push(t),r.currentNode=t.content)}else if(3===t.nodeType){const i=t.data;if(i.indexOf(s)>=0){const s=t.parentNode,n=i.split(o),r=n.length-1;for(let i=0;i<r;i++){let e,o=n[i];if(""===o)e=a();else{const t=l.exec(o);null!==t&&h(t[2],"$lit$")&&(o=o.slice(0,t.index)+t[1]+t[2].slice(0,-"$lit$".length)+t[3]),e=document.createTextNode(o)}s.insertBefore(e,t),this.parts.push({type:"node",index:++u})}""===n[r]?(s.insertBefore(a(),t),e.push(t)):t.data=n[r],d+=r}}else if(8===t.nodeType)if(t.data===s){const i=t.parentNode;null!==t.previousSibling&&u!==c||(u++,i.insertBefore(a(),t)),c=u,this.parts.push({type:"node",index:u}),null===t.nextSibling?t.data="":(e.push(t),u--),d++}else{let i=-1;for(;-1!==(i=t.data.indexOf(s,i+1));)this.parts.push({type:"node",index:-1}),d++}}else r.currentNode=n.pop()}for(const t of e)t.parentNode.removeChild(t)}}const h=(t,i)=>{const e=t.length-i.length;return e>=0&&t.slice(e)===i},c=t=>-1!==t.index,a=()=>document.createComment(""),l=/([ \x09\x0a\x0c\x0d])([^\0-\x1F\x7F-\x9F "'>=/]+)([ \x09\x0a\x0c\x0d]*=[ \x09\x0a\x0c\x0d]*(?:[^ \x09\x0a\x0c\x0d"'`<>=]*|"[^"]*|'[^']*))$/;function u(t,i){const{element:{content:e},parts:s}=t,n=document.createTreeWalker(e,133,null,!1);let o=f(s),r=s[o],h=-1,c=0;const a=[];let l=null;for(;n.nextNode();){h++;const t=n.currentNode;for(t.previousSibling===l&&(l=null),i.has(t)&&(a.push(t),null===l&&(l=t)),null!==l&&c++;void 0!==r&&r.index===h;)r.index=null!==l?-1:r.index-c,o=f(s,o),r=s[o]}a.forEach((t=>t.parentNode.removeChild(t)))}const d=t=>{let i=11===t.nodeType?0:1;const e=document.createTreeWalker(t,133,null,!1);for(;e.nextNode();)i++;return i},f=(t,i=-1)=>{for(let e=i+1;e<t.length;e++){const i=t[e];if(c(i))return e}return-1};
/**
* @license
* Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
* This code may only be used under the BSD style license found at
* http://polymer.github.io/LICENSE.txt
* The complete set of authors may be found at
* http://polymer.github.io/AUTHORS.txt
* The complete set of contributors may be found at
* http://polymer.github.io/CONTRIBUTORS.txt
* Code distributed by Google as part of the polymer project is also
* subject to an additional IP rights grant found at
* http://polymer.github.io/PATENTS.txt
*/
const p=new WeakMap,m=t=>"function"==typeof t&&p.has(t),w={},v={};
/**
* @license
* Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
* This code may only be used under the BSD style license found at
* http://polymer.github.io/LICENSE.txt
* The complete set of authors may be found at
* http://polymer.github.io/AUTHORS.txt
* The complete set of contributors may be found at
* http://polymer.github.io/CONTRIBUTORS.txt
* Code distributed by Google as part of the polymer project is also
* subject to an additional IP rights grant found at
* http://polymer.github.io/PATENTS.txt
*/
class y{constructor(t,i,e){this.t=[],this.template=t,this.processor=i,this.options=e}update(t){let i=0;for(const e of this.t)void 0!==e&&e.setValue(t[i]),i++;for(const t of this.t)void 0!==t&&t.commit()}_clone(){const t=i?this.template.element.content.cloneNode(!0):document.importNode(this.template.element.content,!0),e=[],s=this.template.parts,n=document.createTreeWalker(t,133,null,!1);let o,r=0,h=0,a=n.nextNode();for(;r<s.length;)if(o=s[r],c(o)){for(;h<o.index;)h++,"TEMPLATE"===a.nodeName&&(e.push(a),n.currentNode=a.content),null===(a=n.nextNode())&&(n.currentNode=e.pop(),a=n.nextNode());if("node"===o.type){const t=this.processor.handleTextExpression(this.options);t.insertAfterNode(a.previousSibling),this.t.push(t)}else this.t.push(...this.processor.handleAttributeExpressions(a,o.name,o.strings,this.options));r++}else this.t.push(void 0),r++;return i&&(document.adoptNode(t),customElements.upgrade(t)),t}}
/**
* @license
* Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
* This code may only be used under the BSD style license found at
* http://polymer.github.io/LICENSE.txt
* The complete set of authors may be found at
* http://polymer.github.io/AUTHORS.txt
* The complete set of contributors may be found at
* http://polymer.github.io/CONTRIBUTORS.txt
* Code distributed by Google as part of the polymer project is also
* subject to an additional IP rights grant found at
* http://polymer.github.io/PATENTS.txt
*/const g=window.trustedTypes&&trustedTypes.createPolicy("lit-html",{createHTML:t=>t}),b=` ${s} `;class x{constructor(t,i,e,s){this.strings=t,this.values=i,this.type=e,this.processor=s}getHTML(){const t=this.strings.length-1;let i="",e=!1;for(let o=0;o<t;o++){const t=this.strings[o],r=t.lastIndexOf("\x3c!--");e=(r>-1||e)&&-1===t.indexOf("--\x3e",r+1);const h=l.exec(t);i+=null===h?t+(e?b:n):t.substr(0,h.index)+h[1]+h[2]+"$lit$"+h[3]+s}return i+=this.strings[t],i}getTemplateElement(){const t=document.createElement("template");let i=this.getHTML();return void 0!==g&&(i=g.createHTML(i)),t.innerHTML=i,t}}
/**
* @license
* Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
* This code may only be used under the BSD style license found at
* http://polymer.github.io/LICENSE.txt
* The complete set of authors may be found at
* http://polymer.github.io/AUTHORS.txt
* The complete set of contributors may be found at
* http://polymer.github.io/CONTRIBUTORS.txt
* Code distributed by Google as part of the polymer project is also
* subject to an additional IP rights grant found at
* http://polymer.github.io/PATENTS.txt
*/const S=t=>null===t||!("object"==typeof t||"function"==typeof t),_=t=>Array.isArray(t)||!(!t||!t[Symbol.iterator]);class ${constructor(t,i,e){this.dirty=!0,this.element=t,this.name=i,this.strings=e,this.parts=[];for(let t=0;t<e.length-1;t++)this.parts[t]=this._createPart()}_createPart(){return new z(this)}_getValue(){const t=this.strings,i=t.length-1,e=this.parts;if(1===i&&""===t[0]&&""===t[1]){const t=e[0].value;if("symbol"==typeof t)return String(t);if("string"==typeof t||!_(t))return t}let s="";for(let n=0;n<i;n++){s+=t[n];const i=e[n];if(void 0!==i){const t=i.value;if(S(t)||!_(t))s+="string"==typeof t?t:String(t);else for(const i of t)s+="string"==typeof i?i:String(i)}}return s+=t[i],s}commit(){this.dirty&&(this.dirty=!1,this.element.setAttribute(this.name,this._getValue()))}}class z{constructor(t){this.value=void 0,this.committer=t}setValue(t){t===w||S(t)&&t===this.value||(this.value=t,m(t)||(this.committer.dirty=!0))}commit(){for(;m(this.value);){const t=this.value;this.value=w,t(this)}this.value!==w&&this.committer.commit()}}class k{constructor(t){this.value=void 0,this.i=void 0,this.options=t}appendInto(t){this.startNode=t.appendChild(a()),this.endNode=t.appendChild(a())}insertAfterNode(t){this.startNode=t,this.endNode=t.nextSibling}appendIntoPart(t){t.o(this.startNode=a()),t.o(this.endNode=a())}insertAfterPart(t){t.o(this.startNode=a()),this.endNode=t.endNode,t.endNode=this.startNode}setValue(t){this.i=t}commit(){if(null===this.startNode.parentNode)return;for(;m(this.i);){const t=this.i;this.i=w,t(this)}const t=this.i;t!==w&&(S(t)?t!==this.value&&this.h(t):t instanceof x?this.l(t):t instanceof Node?this.u(t):_(t)?this.p(t):t===v?(this.value=v,this.clear()):this.h(t))}o(t){this.endNode.parentNode.insertBefore(t,this.endNode)}u(t){this.value!==t&&(this.clear(),this.o(t),this.value=t)}h(t){const i=this.startNode.nextSibling,e="string"==typeof(t=null==t?"":t)?t:String(t);i===this.endNode.previousSibling&&3===i.nodeType?i.data=e:this.u(document.createTextNode(e)),this.value=t}l(t){const i=this.options.templateFactory(t);if(this.value instanceof y&&this.value.template===i)this.value.update(t.values);else{const e=new y(i,t.processor,this.options),s=e._clone();e.update(t.values),this.u(s),this.value=e}}p(t){Array.isArray(this.value)||(this.value=[],this.clear());const i=this.value;let e,s=0;for(const n of t)e=i[s],void 0===e&&(e=new k(this.options),i.push(e),0===s?e.appendIntoPart(this):e.insertAfterPart(i[s-1])),e.setValue(n),e.commit(),s++;s<i.length&&(i.length=s,this.clear(e&&e.endNode))}clear(t=this.startNode){e(this.startNode.parentNode,t.nextSibling,this.endNode)}}class C{constructor(t,i,e){if(this.value=void 0,this.i=void 0,2!==e.length||""!==e[0]||""!==e[1])throw new Error("Boolean attributes can only contain a single expression");this.element=t,this.name=i,this.strings=e}setValue(t){this.i=t}commit(){for(;m(this.i);){const t=this.i;this.i=w,t(this)}if(this.i===w)return;const t=!!this.i;this.value!==t&&(t?this.element.setAttribute(this.name,""):this.element.removeAttribute(this.name),this.value=t),this.i=w}}class A extends ${constructor(t,i,e){super(t,i,e),this.single=2===e.length&&""===e[0]&&""===e[1]}_createPart(){return new M(this)}_getValue(){return this.single?this.parts[0].value:super._getValue()}commit(){this.dirty&&(this.dirty=!1,this.element[this.name]=this._getValue())}}class M extends z{}let P=!1;(()=>{try{const t={get capture(){return P=!0,!1}};window.addEventListener("test",t,t),window.removeEventListener("test",t,t)}catch(t){}})();class j{constructor(t,i,e){this.value=void 0,this.i=void 0,this.element=t,this.eventName=i,this.eventContext=e,this.m=t=>this.handleEvent(t)}setValue(t){this.i=t}commit(){for(;m(this.i);){const t=this.i;this.i=w,t(this)}if(this.i===w)return;const t=this.i,i=this.value,e=null==t||null!=i&&(t.capture!==i.capture||t.once!==i.once||t.passive!==i.passive),s=null!=t&&(null==i||e);e&&this.element.removeEventListener(this.eventName,this.m,this.v),s&&(this.v=E(t),this.element.addEventListener(this.eventName,this.m,this.v)),this.value=t,this.i=w}handleEvent(t){"function"==typeof this.value?this.value.call(this.eventContext||this.element,t):this.value.handleEvent(t)}}const E=t=>t&&(P?{capture:t.capture,passive:t.passive,once:t.once}:t.capture)
/**
* @license
* Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
* This code may only be used under the BSD style license found at
* http://polymer.github.io/LICENSE.txt
* The complete set of authors may be found at
* http://polymer.github.io/AUTHORS.txt
* The complete set of contributors may be found at
* http://polymer.github.io/CONTRIBUTORS.txt
* Code distributed by Google as part of the polymer project is also
* subject to an additional IP rights grant found at
* http://polymer.github.io/PATENTS.txt
*/;function O(t){let i=T.get(t.type);void 0===i&&(i={stringsArray:new WeakMap,keyString:new Map},T.set(t.type,i));let e=i.stringsArray.get(t.strings);if(void 0!==e)return e;const n=t.strings.join(s);return e=i.keyString.get(n),void 0===e&&(e=new r(t,t.getTemplateElement()),i.keyString.set(n,e)),i.stringsArray.set(t.strings,e),e}const T=new Map,U=new WeakMap;
/**
* @license
* Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
* This code may only be used under the BSD style license found at
* http://polymer.github.io/LICENSE.txt
* The complete set of authors may be found at
* http://polymer.github.io/AUTHORS.txt
* The complete set of contributors may be found at
* http://polymer.github.io/CONTRIBUTORS.txt
* Code distributed by Google as part of the polymer project is also
* subject to an additional IP rights grant found at
* http://polymer.github.io/PATENTS.txt
*/const N=new
/**
* @license
* Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
* This code may only be used under the BSD style license found at
* http://polymer.github.io/LICENSE.txt
* The complete set of authors may be found at
* http://polymer.github.io/AUTHORS.txt
* The complete set of contributors may be found at
* http://polymer.github.io/CONTRIBUTORS.txt
* Code distributed by Google as part of the polymer project is also
* subject to an additional IP rights grant found at
* http://polymer.github.io/PATENTS.txt
*/
class{handleAttributeExpressions(t,i,e,s){const n=i[0];if("."===n){return new A(t,i.slice(1),e).parts}if("@"===n)return[new j(t,i.slice(1),s.eventContext)];if("?"===n)return[new C(t,i.slice(1),e)];return new $(t,i,e).parts}handleTextExpression(t){return new k(t)}};
/**
* @license
* Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
* This code may only be used under the BSD style license found at
* http://polymer.github.io/LICENSE.txt
* The complete set of authors may be found at
* http://polymer.github.io/AUTHORS.txt
* The complete set of contributors may be found at
* http://polymer.github.io/CONTRIBUTORS.txt
* Code distributed by Google as part of the polymer project is also
* subject to an additional IP rights grant found at
* http://polymer.github.io/PATENTS.txt
*/"undefined"!=typeof window&&(window.litHtmlVersions||(window.litHtmlVersions=[])).push("1.4.1");const V=(t,...i)=>new x(t,i,"html",N)
/**
* @license
* Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
* This code may only be used under the BSD style license found at
* http://polymer.github.io/LICENSE.txt
* The complete set of authors may be found at
* http://polymer.github.io/AUTHORS.txt
* The complete set of contributors may be found at
* http://polymer.github.io/CONTRIBUTORS.txt
* Code distributed by Google as part of the polymer project is also
* subject to an additional IP rights grant found at
* http://polymer.github.io/PATENTS.txt
*/,F=(t,i)=>`${t}--${i}`;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 R=t=>i=>{const e=F(i.type,t);let n=T.get(e);void 0===n&&(n={stringsArray:new WeakMap,keyString:new Map},T.set(e,n));let o=n.stringsArray.get(i.strings);if(void 0!==o)return o;const h=i.strings.join(s);if(o=n.keyString.get(h),void 0===o){const e=i.getTemplateElement();I&&window.ShadyCSS.prepareTemplateDom(e,t),o=new r(i,e),n.keyString.set(h,o)}return n.stringsArray.set(i.strings,o),o},q=["html","svg"],B=new Set,H=(t,i,e)=>{B.add(t);const s=e?e.element:document.createElement("template"),n=i.querySelectorAll("style"),{length:o}=n;if(0===o)return void window.ShadyCSS.prepareTemplateStyles(s,t);const r=document.createElement("style");for(let t=0;t<o;t++){const i=n[t];i.parentNode.removeChild(i),r.textContent+=i.textContent}(t=>{q.forEach((i=>{const e=T.get(F(i,t));void 0!==e&&e.keyString.forEach((t=>{const{element:{content:i}}=t,e=new Set;Array.from(i.querySelectorAll("style")).forEach((t=>{e.add(t)})),u(t,e)}))}))})(t);const h=s.content;e?function(t,i,e=null){const{element:{content:s},parts:n}=t;if(null==e)return void s.appendChild(i);const o=document.createTreeWalker(s,133,null,!1);let r=f(n),h=0,c=-1;for(;o.nextNode();)for(c++,o.currentNode===e&&(h=d(i),e.parentNode.insertBefore(i,e));-1!==r&&n[r].index===c;){if(h>0){for(;-1!==r;)n[r].index+=h,r=f(n,r);return}r=f(n,r)}}(e,r,h.firstChild):h.insertBefore(r,h.firstChild),window.ShadyCSS.prepareTemplateStyles(s,t);const c=h.querySelector("style");if(window.ShadyCSS.nativeShadow&&null!==c)i.insertBefore(c.cloneNode(!0),i.firstChild);else if(e){h.insertBefore(r,h.firstChild);const t=new Set;t.add(r),u(e,t)}};window.JSCompiler_renameProperty=(t,i)=>t;const J={toAttribute(t,i){switch(i){case Boolean:return t?"":null;case Object:case Array:return null==t?t:JSON.stringify(t)}return t},fromAttribute(t,i){switch(i){case Boolean:return null!==t;case Number:return null===t?null:Number(t);case Object:case Array:return JSON.parse(t)}return t}},L=(t,i)=>i!==t&&(i==i||t==t),W={attribute:!0,type:String,converter:J,reflect:!1,hasChanged:L};class D extends HTMLElement{constructor(){super(),this.initialize()}static get observedAttributes(){this.finalize();const t=[];return this._classProperties.forEach(((i,e)=>{const s=this._attributeNameForProperty(e,i);void 0!==s&&(this._attributeToPropertyMap.set(s,e),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,i)=>this._classProperties.set(i,t)))}}static createProperty(t,i=W){if(this._ensureClassProperties(),this._classProperties.set(t,i),i.noAccessor||this.prototype.hasOwnProperty(t))return;const e="symbol"==typeof t?Symbol():`__${t}`,s=this.getPropertyDescriptor(t,e,i);void 0!==s&&Object.defineProperty(this.prototype,t,s)}static getPropertyDescriptor(t,i,e){return{get(){return this[i]},set(s){const n=this[t];this[i]=s,this.requestUpdateInternal(t,n,e)},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("finalized")||t.finalize(),this.finalized=!0,this._ensureClassProperties(),this._attributeToPropertyMap=new Map,this.hasOwnProperty(JSCompiler_renameProperty("properties",this))){const t=this.properties,i=[...Object.getOwnPropertyNames(t),..."function"==typeof Object.getOwnPropertySymbols?Object.getOwnPropertySymbols(t):[]];for(const e of i)this.createProperty(e,t[e])}}static _attributeNameForProperty(t,i){const e=i.attribute;return!1===e?void 0:"string"==typeof e?e:"string"==typeof t?t.toLowerCase():void 0}static _valueHasChanged(t,i,e=L){return e(t,i)}static _propertyValueFromAttribute(t,i){const e=i.type,s=i.converter||J,n="function"==typeof s?s:s.fromAttribute;return n?n(t,e):t}static _propertyValueToAttribute(t,i){if(void 0===i.reflect)return;const e=i.type,s=i.converter;return(s&&s.toAttribute||J.toAttribute)(t,e)}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,i)=>{if(this.hasOwnProperty(i)){const t=this[i];delete this[i],this._instanceProperties||(this._instanceProperties=new Map),this._instanceProperties.set(i,t)}}))}_applyInstanceProperties(){this._instanceProperties.forEach(((t,i)=>this[i]=t)),this._instanceProperties=void 0}connectedCallback(){this.enableUpdating()}enableUpdating(){void 0!==this._enableUpdatingResolver&&(this._enableUpdatingResolver(),this._enableUpdatingResolver=void 0)}disconnectedCallback(){}attributeChangedCallback(t,i,e){i!==e&&this._attributeToProperty(t,e)}_propertyToAttribute(t,i,e=W){const s=this.constructor,n=s._attributeNameForProperty(t,e);if(void 0!==n){const t=s._propertyValueToAttribute(i,e);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,i){if(8&this._updateState)return;const e=this.constructor,s=e._attributeToPropertyMap.get(t);if(void 0!==s){const t=e.getPropertyOptions(s);this._updateState=16|this._updateState,this[s]=e._propertyValueFromAttribute(i,t),this._updateState=-17&this._updateState}}requestUpdateInternal(t,i,e){let s=!0;if(void 0!==t){const n=this.constructor;e=e||n.getPropertyOptions(t),n._valueHasChanged(this[t],i,e.hasChanged)?(this._changedProperties.has(t)||this._changedProperties.set(t,i),!0!==e.reflect||16&this._updateState||(void 0===this._reflectingProperties&&(this._reflectingProperties=new Map),this._reflectingProperties.set(t,e))):s=!1}!this._hasRequestedUpdate&&s&&(this._updatePromise=this._enqueueUpdate())}requestUpdate(t,i){return this.requestUpdateInternal(t,i),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 i=this._changedProperties;try{t=this.shouldUpdate(i),t?this.update(i):this._markUpdated()}catch(i){throw t=!1,this._markUpdated(),i}t&&(1&this._updateState||(this._updateState=1|this._updateState,this.firstUpdated(i)),this.updated(i))}_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,i)=>this._propertyToAttribute(i,this[i],t))),this._reflectingProperties=void 0),this._markUpdated()}updated(t){}firstUpdated(t){}}D.finalized=!0;
/**
* @license
* Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
* This code may only be used under the BSD style license found at
* http://polymer.github.io/LICENSE.txt
* The complete set of authors may be found at
* http://polymer.github.io/AUTHORS.txt
* The complete set of contributors may be found at
* http://polymer.github.io/CONTRIBUTORS.txt
* Code distributed by Google as part of the polymer project is also
* subject to an additional IP rights grant found at
* http://polymer.github.io/PATENTS.txt
*/
const G=(t,i)=>"method"===i.kind&&i.descriptor&&!("value"in i.descriptor)?Object.assign(Object.assign({},i),{finisher(e){e.createProperty(i.key,t)}}):{kind:"field",key:Symbol(),placement:"own",descriptor:{},initializer(){"function"==typeof i.initializer&&(this[i.key]=i.initializer.call(this))},finisher(e){e.createProperty(i.key,t)}};function K(t){return(i,e)=>void 0!==e?((t,i,e)=>{i.constructor.createProperty(e,t)})(t,i,e):G(t,i)}const Q=window.ShadowRoot&&(void 0===window.ShadyCSS||window.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,X=Symbol();
/**
@license
Copyright (c) 2019 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at
http://polymer.github.io/LICENSE.txt The complete set of authors may be found at
http://polymer.github.io/AUTHORS.txt The complete set of contributors may be
found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as
part of the polymer project is also subject to an additional IP rights grant
found at http://polymer.github.io/PATENTS.txt
*/class Y{constructor(t,i){if(i!==X)throw new Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t}get styleSheet(){return void 0===this._styleSheet&&(Q?(this._styleSheet=new CSSStyleSheet,this._styleSheet.replaceSync(this.cssText)):this._styleSheet=null),this._styleSheet}toString(){return this.cssText}}
/**
* @license
* Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
* This code may only be used under the BSD style license found at
* http://polymer.github.io/LICENSE.txt
* The complete set of authors may be found at
* http://polymer.github.io/AUTHORS.txt
* The complete set of contributors may be found at
* http://polymer.github.io/CONTRIBUTORS.txt
* Code distributed by Google as part of the polymer project is also
* subject to an additional IP rights grant found at
* http://polymer.github.io/PATENTS.txt
*/
(window.litElementVersions||(window.litElementVersions=[])).push("2.5.1");const Z={};class tt extends D{static getStyles(){return this.styles}static _getUniqueStyles(){if(this.hasOwnProperty(JSCompiler_renameProperty("_styles",this)))return;const t=this.getStyles();if(Array.isArray(t)){const i=(t,e)=>t.reduceRight(((t,e)=>Array.isArray(e)?i(e,t):(t.add(e),t)),e),e=i(t,new Set),s=[];e.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&&!Q){const i=Array.prototype.slice.call(t.cssRules).reduce(((t,i)=>t+i.cssText),"");return new Y(String(i),X)}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?Q?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 i=this.render();super.update(t),i!==Z&&this.constructor.render(i,this.renderRoot,{scopeName:this.localName,eventContext:this}),this._needsShimAdoptedStyleSheets&&(this._needsShimAdoptedStyleSheets=!1,this.constructor._styles.forEach((t=>{const i=document.createElement("style");i.textContent=t.cssText,this.renderRoot.appendChild(i)})))}render(){return Z}}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,o=U.has(i),r=I&&11===i.nodeType&&!!i.host,h=r&&!B.has(n),c=h?document.createDocumentFragment():i;if(((t,i,s)=>{let n=U.get(i);void 0===n&&(e(i,i.firstChild),U.set(i,n=new k(Object.assign({templateFactory:O},s))),n.appendInto(i)),n.setValue(t),n.commit()})(t,c,Object.assign({templateFactory:R(n)},s)),h){const t=U.get(c);U.delete(c);const s=t.value instanceof y?t.value.template:void 0;H(n,c,s),e(i,i.firstChild),i.appendChild(c),U.set(i,t)}!o&&r&&window.ShadyCSS.styleElement(i.host)},tt.shadowRootOptions={mode:"open"};
/**
* @license
* Copyright (c) 2018 The Polymer Project Authors. All rights reserved.
* This code may only be used under the BSD style license found at
* http://polymer.github.io/LICENSE.txt
* The complete set of authors may be found at
* http://polymer.github.io/AUTHORS.txt
* The complete set of contributors may be found at
* http://polymer.github.io/CONTRIBUTORS.txt
* Code distributed by Google as part of the polymer project is also
* subject to an additional IP rights grant found at
* http://polymer.github.io/PATENTS.txt
*/
class it{constructor(t){this.classes=new Set,this.changed=!1,this.element=t;const i=(t.getAttribute("class")||"").split(/\s+/);for(const t of i)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((i=>t+=i+" ")),this.element.setAttribute("class",t)}}}const et=new WeakMap,st=(nt=t=>i=>{if(!(i instanceof z)||i instanceof M||"class"!==i.committer.name||i.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:e}=i,{element:s}=e;let n=et.get(i);void 0===n&&(s.setAttribute("class",e.strings.join(" ")),et.set(i,n=new Set));const o=s.classList||new it(s);n.forEach((i=>{i in t||(o.remove(i),n.delete(i))}));for(const i in t){const e=t[i];e!=n.has(i)&&(e?(o.add(i),n.add(i)):(o.remove(i),n.delete(i)))}"function"==typeof o.commit&&o.commit()},(...t)=>{const i=nt(...t);return p.set(i,!0),i});var nt,ot;class rt extends tt{constructor(){super(...arguments),this.items=[],this._active=!1}g(t){this._active=this._active!==t&&t}S(){this._active=!1}render(){var t;return V`
<div class="container">
${0!==(null===(t=null==this?void 0:this.items)||void 0===t?void 0:t.length)?this.items.map(((t,i)=>V`
<div
class=${st({group:!0,inBackground:i!==this._active&&Number.isInteger(this._active)})}
@click=${()=>this.g(0!==i&&i)}
@keydown
>
${t.map(((t,e)=>{var s,n;return V`
<div
data-index=${i}
class=${st({item:!0,active:this._active===i,center:6===e})}
>
<div>
${(null==t?void 0:t.image)?V` <div class="image">
<img
class="img"
src=${t.image.src}
alt=${(null===(s=t.image)||void 0===s?void 0:s.title)||t.heading}
title=${(null===(n=t.image)||void 0===n?void 0:n.title)||t.heading}
/>
</div>`:null}
<h6 class="heading">${t.heading}</h6>
<p class="content">${t.content}</p>
</div>
</div>
`}))}
</div>
`)):V`<code>Error: Please add items to the "items" property.</code>`}
</div>
`}}rt.styles=((t,...i)=>{const e=i.reduce(((i,e,s)=>i+(t=>{if(t instanceof Y)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.`)})(e)+t[s+1]),t[0]);return new Y(e,X)})`
:host {
--honeycomb-font-family: 'FlamaSemicondensed', 'Roboto Condensed',
'Helvetica Neue', Arial, sans-serif;
--honeycomb-global-size: min(calc(100vw / 5), calc(100vh / 5.5));
--honeycomb-primary-color: hsl(0, 0%, 0%);
--honeycomb-text-color: #fff;
--primary-color-lighten-1: hsl(0, 0%, 80%);
--primary-color-lighten-2: hsl(0, 0%, 90%);
--primary-color-lighten-3: hsl(0, 0%, 95%);
--transition: 0.35s ease;
--base-spacing: 4px;
--base-radius: 4px;
--font-size: clamp(0.4rem, 1.85vw, 0.8rem);
font-family: var(--honeycomb-font-family);
font-size: var(--font-size);
color: var(--honeycomb-text-color, #fff);
}
.container {
position: relative;
width: calc(var(--honeycomb-global-size) * 5);
height: calc(var(--honeycomb-global-size) * 5);
margin: auto;
}
.group {
--size: var(--honeycomb-global-size);
position: absolute;
top: 50%;
left: 50%;
margin-left: calc(var(--size) / -2);
margin-top: calc(var(--size) / -2);
width: min(100%, var(--size));
height: min(100%, var(--size));
transition: var(--transition);
}
.group > .item:first-of-type {
z-index: 2;
}
.group.inBackground {
z-index: -1;
}
.group.inBackground > .item:first-of-type {
/* transform: scale(0.9); */
background-color: var(--primary-color-lighten-1);
}
.item {
--size: 100%;
position: absolute;
content: '';
display: grid;
place-items: center;
width: var(--size);
height: var(--size);
clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
background-color: var(--honeycomb-primary-color, #000);
overflow: hidden;
cursor: pointer;
will-change: transform;
transition: var(--transition);
}
.item > div {
width: 100%;
}
.image {
--image-size: calc(var(--honeycomb-global-size) / 3);
margin: 0 auto;
margin-bottom: calc(var(--base-spacing) * 2);
width: var(--image-size);
height: var(--image-size);
border-radius: 100%;
overflow: hidden;
box-shadow: 0px 0px 0px 2px white;
}
.img {
width: 100%;
height: 100%;
object-fit: cover;
}
.active.item:nth-of-type(7),
.group:nth-of-type(7) {
transform: translate(0%, -100%);
}
.active.item:nth-of-type(2),
.group:nth-of-type(2) {
transform: translate(84%, -50%);
}
.active.item:nth-of-type(3),
.group:nth-of-type(3) {
transform: translate(84%, 50%);
}
.active.item:nth-of-type(4),
.group:nth-of-type(4) {
transform: translate(0%, 100%);
}
.active.item:nth-of-type(5),
.group:nth-of-type(5) {
transform: translate(-84%, 50%);
}
.active.item:nth-of-type(6),
.group:nth-of-type(6) {
transform: translate(-84%, -50%);
}
.heading,
.content {
display: block;
margin: 0;
color: white;
text-align: center;
}
.heading {
/* width: 75%; */
margin: 0 auto;
font-weight: bold;
font-size: var(--font-size);
text-align: center;
text-transform: uppercase;
}
.content {
font-size: var(--font-size);
}
@media only screen and (max-width: 560px) {
.content {
display: none;
}
.image {
display: none;
}
}
code {
display: block;
box-sizing: border-box;
padding: calc(var(--base-spacing) * 3);
background-color: var(--primary-color-lighten-2);
border-radius: var(--base-radius);
text-align: center;
color: var(--honeycomb-primary-color);
}
`,t([K({type:Array})],rt.prototype,"items",void 0),t([function(t){return K({attribute:!1,hasChanged:null==t?void 0:t.hasChanged})}(ot)],rt.prototype,"_active",void 0),window.customElements.define("honeycomb-element",rt);