Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@seliaco/giant-panda-components
Advanced tools
@seliaco/giant-panda-components - npm Package Compare versions
Comparing version 1.0.23-snapshot-3 to 1.0.23-snapshot-4
1174
dist/index.js
@@ -1,10 +0,1164 @@ | ||
| export * from './components'; | ||
| export * from './widgets'; | ||
| export var init = function init() { | ||
| window.addEventListener('load', function () { | ||
| var link = document.createElement('link'); | ||
| link.rel = 'stylesheet'; | ||
| link.href = 'https://unpkg.com/@seliaco/giant-panda-styles/style.css'; | ||
| document.head.appendChild(link); | ||
| }); | ||
| }; | ||
| (function (global, factory) { | ||
| typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('lit/decorators')) : | ||
| typeof define === 'function' && define.amd ? define(['exports', 'lit/decorators'], factory) : | ||
| (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.GiantPandaComponents = {}, global.decorators)); | ||
| })(this, (function (exports, decorators) { 'use strict'; | ||
| /****************************************************************************** | ||
| 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. | ||
| ***************************************************************************** */ | ||
| /* global Reflect, Promise, SuppressedError, Symbol */ | ||
| function __decorate(decorators, target, key, desc) { | ||
| var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; | ||
| if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); | ||
| else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; | ||
| return c > 3 && r && Object.defineProperty(target, key, r), r; | ||
| } | ||
| typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) { | ||
| var e = new Error(message); | ||
| return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e; | ||
| }; | ||
| /** | ||
| * @license | ||
| * Copyright 2019 Google LLC | ||
| * SPDX-License-Identifier: BSD-3-Clause | ||
| */ | ||
| const t$2=window,e$5=t$2.ShadowRoot&&(void 0===t$2.ShadyCSS||t$2.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s$3=Symbol(),n$5=new WeakMap;let o$4 = class o{constructor(t,e,n){if(this._$cssResult$=!0,n!==s$3)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e;}get styleSheet(){let t=this.o;const s=this.t;if(e$5&&void 0===t){const e=void 0!==s&&1===s.length;e&&(t=n$5.get(s)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&n$5.set(s,t));}return t}toString(){return this.cssText}};const r$2=t=>new o$4("string"==typeof t?t:t+"",void 0,s$3),i$2=(t,...e)=>{const n=1===t.length?t[0]:e.reduce(((e,s,n)=>e+(t=>{if(!0===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(s)+t[n+1]),t[0]);return new o$4(n,t,s$3)},S$1=(s,n)=>{e$5?s.adoptedStyleSheets=n.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet)):n.forEach((e=>{const n=document.createElement("style"),o=t$2.litNonce;void 0!==o&&n.setAttribute("nonce",o),n.textContent=e.cssText,s.appendChild(n);}));},c$1=e$5?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return r$2(e)})(t):t; | ||
| /** | ||
| * @license | ||
| * Copyright 2017 Google LLC | ||
| * SPDX-License-Identifier: BSD-3-Clause | ||
| */var s$2;const e$4=window,r$1=e$4.trustedTypes,h$1=r$1?r$1.emptyScript:"",o$3=e$4.reactiveElementPolyfillSupport,n$4={toAttribute(t,i){switch(i){case Boolean:t=t?h$1:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t);}return t},fromAttribute(t,i){let s=t;switch(i){case Boolean:s=null!==t;break;case Number:s=null===t?null:Number(t);break;case Object:case Array:try{s=JSON.parse(t);}catch(t){s=null;}}return s}},a$1=(t,i)=>i!==t&&(i==i||t==t),l$2={attribute:!0,type:String,converter:n$4,reflect:!1,hasChanged:a$1},d$1="finalized";let u$1 = class u extends HTMLElement{constructor(){super(),this._$Ei=new Map,this.isUpdatePending=!1,this.hasUpdated=!1,this._$El=null,this._$Eu();}static addInitializer(t){var i;this.finalize(),(null!==(i=this.h)&&void 0!==i?i:this.h=[]).push(t);}static get observedAttributes(){this.finalize();const t=[];return this.elementProperties.forEach(((i,s)=>{const e=this._$Ep(s,i);void 0!==e&&(this._$Ev.set(e,s),t.push(e));})),t}static createProperty(t,i=l$2){if(i.state&&(i.attribute=!1),this.finalize(),this.elementProperties.set(t,i),!i.noAccessor&&!this.prototype.hasOwnProperty(t)){const s="symbol"==typeof t?Symbol():"__"+t,e=this.getPropertyDescriptor(t,s,i);void 0!==e&&Object.defineProperty(this.prototype,t,e);}}static getPropertyDescriptor(t,i,s){return {get(){return this[i]},set(e){const r=this[t];this[i]=e,this.requestUpdate(t,r,s);},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)||l$2}static finalize(){if(this.hasOwnProperty(d$1))return !1;this[d$1]=!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,i=[...Object.getOwnPropertyNames(t),...Object.getOwnPropertySymbols(t)];for(const s of i)this.createProperty(s,t[s]);}return this.elementStyles=this.finalizeStyles(this.styles),!0}static finalizeStyles(i){const s=[];if(Array.isArray(i)){const e=new Set(i.flat(1/0).reverse());for(const i of e)s.unshift(c$1(i));}else void 0!==i&&s.push(c$1(i));return s}static _$Ep(t,i){const s=i.attribute;return !1===s?void 0:"string"==typeof s?s:"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 i,s;(null!==(i=this._$ES)&&void 0!==i?i:this._$ES=[]).push(t),void 0!==this.renderRoot&&this.isConnected&&(null===(s=t.hostConnected)||void 0===s||s.call(t));}removeController(t){var i;null===(i=this._$ES)||void 0===i||i.splice(this._$ES.indexOf(t)>>>0,1);}_$Eg(){this.constructor.elementProperties.forEach(((t,i)=>{this.hasOwnProperty(i)&&(this._$Ei.set(i,this[i]),delete this[i]);}));}createRenderRoot(){var t;const s=null!==(t=this.shadowRoot)&&void 0!==t?t:this.attachShadow(this.constructor.shadowRootOptions);return S$1(s,this.constructor.elementStyles),s}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 i;return null===(i=t.hostConnected)||void 0===i?void 0:i.call(t)}));}enableUpdating(t){}disconnectedCallback(){var t;null===(t=this._$ES)||void 0===t||t.forEach((t=>{var i;return null===(i=t.hostDisconnected)||void 0===i?void 0:i.call(t)}));}attributeChangedCallback(t,i,s){this._$AK(t,s);}_$EO(t,i,s=l$2){var e;const r=this.constructor._$Ep(t,s);if(void 0!==r&&!0===s.reflect){const h=(void 0!==(null===(e=s.converter)||void 0===e?void 0:e.toAttribute)?s.converter:n$4).toAttribute(i,s.type);this._$El=t,null==h?this.removeAttribute(r):this.setAttribute(r,h),this._$El=null;}}_$AK(t,i){var s;const e=this.constructor,r=e._$Ev.get(t);if(void 0!==r&&this._$El!==r){const t=e.getPropertyOptions(r),h="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==(null===(s=t.converter)||void 0===s?void 0:s.fromAttribute)?t.converter:n$4;this._$El=r,this[r]=h.fromAttribute(i,t.type),this._$El=null;}}requestUpdate(t,i,s){let e=!0;void 0!==t&&(((s=s||this.constructor.getPropertyOptions(t)).hasChanged||a$1)(this[t],i)?(this._$AL.has(t)||this._$AL.set(t,i),!0===s.reflect&&this._$El!==t&&(void 0===this._$EC&&(this._$EC=new Map),this._$EC.set(t,s))):e=!1),!this.isUpdatePending&&e&&(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,i)=>this[i]=t)),this._$Ei=void 0);let i=!1;const s=this._$AL;try{i=this.shouldUpdate(s),i?(this.willUpdate(s),null===(t=this._$ES)||void 0===t||t.forEach((t=>{var i;return null===(i=t.hostUpdate)||void 0===i?void 0:i.call(t)})),this.update(s)):this._$Ek();}catch(t){throw i=!1,this._$Ek(),t}i&&this._$AE(s);}willUpdate(t){}_$AE(t){var i;null===(i=this._$ES)||void 0===i||i.forEach((t=>{var i;return null===(i=t.hostUpdated)||void 0===i?void 0:i.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,i)=>this._$EO(i,this[i],t))),this._$EC=void 0),this._$Ek();}updated(t){}firstUpdated(t){}};u$1[d$1]=!0,u$1.elementProperties=new Map,u$1.elementStyles=[],u$1.shadowRootOptions={mode:"open"},null==o$3||o$3({ReactiveElement:u$1}),(null!==(s$2=e$4.reactiveElementVersions)&&void 0!==s$2?s$2:e$4.reactiveElementVersions=[]).push("1.6.3"); | ||
| /** | ||
| * @license | ||
| * Copyright 2017 Google LLC | ||
| * SPDX-License-Identifier: BSD-3-Clause | ||
| */ | ||
| var t$1;const i$1=window,s$1=i$1.trustedTypes,e$3=s$1?s$1.createPolicy("lit-html",{createHTML:t=>t}):void 0,o$2="$lit$",n$3=`lit$${(Math.random()+"").slice(9)}$`,l$1="?"+n$3,h=`<${l$1}>`,r=document,u=()=>r.createComment(""),d=t=>null===t||"object"!=typeof t&&"function"!=typeof t,c=Array.isArray,v=t=>c(t)||"function"==typeof(null==t?void 0:t[Symbol.iterator]),a="[ \t\n\f\r]",f=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,_=/-->/g,m=/>/g,p=RegExp(`>|${a}(?:([^\\s"'>=/]+)(${a}*=${a}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),g=/'/g,$=/"/g,y=/^(?:script|style|textarea|title)$/i,w=t=>(i,...s)=>({_$litType$:t,strings:i,values:s}),x=w(1),T=Symbol.for("lit-noChange"),A=Symbol.for("lit-nothing"),E=new WeakMap,C=r.createTreeWalker(r,129,null,!1);function P(t,i){if(!Array.isArray(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==e$3?e$3.createHTML(i):i}const V=(t,i)=>{const s=t.length-1,e=[];let l,r=2===i?"<svg>":"",u=f;for(let i=0;i<s;i++){const s=t[i];let d,c,v=-1,a=0;for(;a<s.length&&(u.lastIndex=a,c=u.exec(s),null!==c);)a=u.lastIndex,u===f?"!--"===c[1]?u=_:void 0!==c[1]?u=m:void 0!==c[2]?(y.test(c[2])&&(l=RegExp("</"+c[2],"g")),u=p):void 0!==c[3]&&(u=p):u===p?">"===c[0]?(u=null!=l?l:f,v=-1):void 0===c[1]?v=-2:(v=u.lastIndex-c[2].length,d=c[1],u=void 0===c[3]?p:'"'===c[3]?$:g):u===$||u===g?u=p:u===_||u===m?u=f:(u=p,l=void 0);const w=u===p&&t[i+1].startsWith("/>")?" ":"";r+=u===f?s+h:v>=0?(e.push(d),s.slice(0,v)+o$2+s.slice(v)+n$3+w):s+n$3+(-2===v?(e.push(void 0),i):w);}return [P(t,r+(t[s]||"<?>")+(2===i?"</svg>":"")),e]};class N{constructor({strings:t,_$litType$:i},e){let h;this.parts=[];let r=0,d=0;const c=t.length-1,v=this.parts,[a,f]=V(t,i);if(this.el=N.createElement(a,e),C.currentNode=this.el.content,2===i){const t=this.el.content,i=t.firstChild;i.remove(),t.append(...i.childNodes);}for(;null!==(h=C.nextNode())&&v.length<c;){if(1===h.nodeType){if(h.hasAttributes()){const t=[];for(const i of h.getAttributeNames())if(i.endsWith(o$2)||i.startsWith(n$3)){const s=f[d++];if(t.push(i),void 0!==s){const t=h.getAttribute(s.toLowerCase()+o$2).split(n$3),i=/([.?@])?(.*)/.exec(s);v.push({type:1,index:r,name:i[2],strings:t,ctor:"."===i[1]?H:"?"===i[1]?L:"@"===i[1]?z:k});}else v.push({type:6,index:r});}for(const i of t)h.removeAttribute(i);}if(y.test(h.tagName)){const t=h.textContent.split(n$3),i=t.length-1;if(i>0){h.textContent=s$1?s$1.emptyScript:"";for(let s=0;s<i;s++)h.append(t[s],u()),C.nextNode(),v.push({type:2,index:++r});h.append(t[i],u());}}}else if(8===h.nodeType)if(h.data===l$1)v.push({type:2,index:r});else {let t=-1;for(;-1!==(t=h.data.indexOf(n$3,t+1));)v.push({type:7,index:r}),t+=n$3.length-1;}r++;}}static createElement(t,i){const s=r.createElement("template");return s.innerHTML=t,s}}function S(t,i,s=t,e){var o,n,l,h;if(i===T)return i;let r=void 0!==e?null===(o=s._$Co)||void 0===o?void 0:o[e]:s._$Cl;const u=d(i)?void 0:i._$litDirective$;return (null==r?void 0:r.constructor)!==u&&(null===(n=null==r?void 0:r._$AO)||void 0===n||n.call(r,!1),void 0===u?r=void 0:(r=new u(t),r._$AT(t,s,e)),void 0!==e?(null!==(l=(h=s)._$Co)&&void 0!==l?l:h._$Co=[])[e]=r:s._$Cl=r),void 0!==r&&(i=S(t,r._$AS(t,i.values),r,e)),i}class M{constructor(t,i){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=i;}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){var i;const{el:{content:s},parts:e}=this._$AD,o=(null!==(i=null==t?void 0:t.creationScope)&&void 0!==i?i:r).importNode(s,!0);C.currentNode=o;let n=C.nextNode(),l=0,h=0,u=e[0];for(;void 0!==u;){if(l===u.index){let i;2===u.type?i=new R(n,n.nextSibling,this,t):1===u.type?i=new u.ctor(n,u.name,u.strings,this,t):6===u.type&&(i=new Z(n,this,t)),this._$AV.push(i),u=e[++h];}l!==(null==u?void 0:u.index)&&(n=C.nextNode(),l++);}return C.currentNode=r,o}v(t){let i=0;for(const s of this._$AV)void 0!==s&&(void 0!==s.strings?(s._$AI(t,s,i),i+=s.strings.length-2):s._$AI(t[i])),i++;}}class R{constructor(t,i,s,e){var o;this.type=2,this._$AH=A,this._$AN=void 0,this._$AA=t,this._$AB=i,this._$AM=s,this.options=e,this._$Cp=null===(o=null==e?void 0:e.isConnected)||void 0===o||o;}get _$AU(){var t,i;return null!==(i=null===(t=this._$AM)||void 0===t?void 0:t._$AU)&&void 0!==i?i:this._$Cp}get parentNode(){let t=this._$AA.parentNode;const i=this._$AM;return void 0!==i&&11===(null==t?void 0:t.nodeType)&&(t=i.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,i=this){t=S(this,t,i),d(t)?t===A||null==t||""===t?(this._$AH!==A&&this._$AR(),this._$AH=A):t!==this._$AH&&t!==T&&this._(t):void 0!==t._$litType$?this.g(t):void 0!==t.nodeType?this.$(t):v(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!==A&&d(this._$AH)?this._$AA.nextSibling.data=t:this.$(r.createTextNode(t)),this._$AH=t;}g(t){var i;const{values:s,_$litType$:e}=t,o="number"==typeof e?this._$AC(t):(void 0===e.el&&(e.el=N.createElement(P(e.h,e.h[0]),this.options)),e);if((null===(i=this._$AH)||void 0===i?void 0:i._$AD)===o)this._$AH.v(s);else {const t=new M(o,this),i=t.u(this.options);t.v(s),this.$(i),this._$AH=t;}}_$AC(t){let i=E.get(t.strings);return void 0===i&&E.set(t.strings,i=new N(t)),i}T(t){c(this._$AH)||(this._$AH=[],this._$AR());const i=this._$AH;let s,e=0;for(const o of t)e===i.length?i.push(s=new R(this.k(u()),this.k(u()),this,this.options)):s=i[e],s._$AI(o),e++;e<i.length&&(this._$AR(s&&s._$AB.nextSibling,e),i.length=e);}_$AR(t=this._$AA.nextSibling,i){var s;for(null===(s=this._$AP)||void 0===s||s.call(this,!1,!0,i);t&&t!==this._$AB;){const i=t.nextSibling;t.remove(),t=i;}}setConnected(t){var i;void 0===this._$AM&&(this._$Cp=t,null===(i=this._$AP)||void 0===i||i.call(this,t));}}class k{constructor(t,i,s,e,o){this.type=1,this._$AH=A,this._$AN=void 0,this.element=t,this.name=i,this._$AM=e,this.options=o,s.length>2||""!==s[0]||""!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=A;}get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}_$AI(t,i=this,s,e){const o=this.strings;let n=!1;if(void 0===o)t=S(this,t,i,0),n=!d(t)||t!==this._$AH&&t!==T,n&&(this._$AH=t);else {const e=t;let l,h;for(t=o[0],l=0;l<o.length-1;l++)h=S(this,e[s+l],i,l),h===T&&(h=this._$AH[l]),n||(n=!d(h)||h!==this._$AH[l]),h===A?t=A:t!==A&&(t+=(null!=h?h:"")+o[l+1]),this._$AH[l]=h;}n&&!e&&this.j(t);}j(t){t===A?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,null!=t?t:"");}}class H extends k{constructor(){super(...arguments),this.type=3;}j(t){this.element[this.name]=t===A?void 0:t;}}const I=s$1?s$1.emptyScript:"";class L extends k{constructor(){super(...arguments),this.type=4;}j(t){t&&t!==A?this.element.setAttribute(this.name,I):this.element.removeAttribute(this.name);}}class z extends k{constructor(t,i,s,e,o){super(t,i,s,e,o),this.type=5;}_$AI(t,i=this){var s;if((t=null!==(s=S(this,t,i,0))&&void 0!==s?s:A)===T)return;const e=this._$AH,o=t===A&&e!==A||t.capture!==e.capture||t.once!==e.once||t.passive!==e.passive,n=t!==A&&(e===A||o);o&&this.element.removeEventListener(this.name,this,e),n&&this.element.addEventListener(this.name,this,t),this._$AH=t;}handleEvent(t){var i,s;"function"==typeof this._$AH?this._$AH.call(null!==(s=null===(i=this.options)||void 0===i?void 0:i.host)&&void 0!==s?s:this.element,t):this._$AH.handleEvent(t);}}class Z{constructor(t,i,s){this.element=t,this.type=6,this._$AN=void 0,this._$AM=i,this.options=s;}get _$AU(){return this._$AM._$AU}_$AI(t){S(this,t);}}const B=i$1.litHtmlPolyfillSupport;null==B||B(N,R),(null!==(t$1=i$1.litHtmlVersions)&&void 0!==t$1?t$1:i$1.litHtmlVersions=[]).push("2.8.0");const D=(t,i,s)=>{var e,o;const n=null!==(e=null==s?void 0:s.renderBefore)&&void 0!==e?e:i;let l=n._$litPart$;if(void 0===l){const t=null!==(o=null==s?void 0:s.renderBefore)&&void 0!==o?o:null;n._$litPart$=l=new R(i.insertBefore(u(),t),t,void 0,null!=s?s:{});}return l._$AI(t),l}; | ||
| /** | ||
| * @license | ||
| * Copyright 2017 Google LLC | ||
| * SPDX-License-Identifier: BSD-3-Clause | ||
| */var l,o$1;class s extends u$1{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 i=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=D(i,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 T}}s.finalized=!0,s._$litElement$=!0,null===(l=globalThis.litElementHydrateSupport)||void 0===l||l.call(globalThis,{LitElement:s});const n$2=globalThis.litElementPolyfillSupport;null==n$2||n$2({LitElement:s});(null!==(o$1=globalThis.litElementVersions)&&void 0!==o$1?o$1:globalThis.litElementVersions=[]).push("3.3.3"); | ||
| /** | ||
| * @license | ||
| * Copyright 2017 Google LLC | ||
| * SPDX-License-Identifier: BSD-3-Clause | ||
| */ | ||
| const e$2=e=>n=>"function"==typeof n?((e,n)=>(customElements.define(e,n),n))(e,n):((e,n)=>{const{kind:t,elements:s}=n;return {kind:t,elements:s,finisher(n){customElements.define(e,n);}}})(e,n); | ||
| /** | ||
| * @license | ||
| * Copyright 2017 Google LLC | ||
| * SPDX-License-Identifier: BSD-3-Clause | ||
| */ | ||
| const i=(i,e)=>"method"===e.kind&&e.descriptor&&!("value"in e.descriptor)?{...e,finisher(n){n.createProperty(e.key,i);}}:{kind:"field",key:Symbol(),placement:"own",descriptor:{},originalKey:e.key,initializer(){"function"==typeof e.initializer&&(this[e.key]=e.initializer.call(this));},finisher(n){n.createProperty(e.key,i);}},e$1=(i,e,n)=>{e.constructor.createProperty(n,i);};function n$1(n){return (t,o)=>void 0!==o?e$1(n,t,o):i(n,t)} | ||
| /** | ||
| * @license | ||
| * Copyright 2017 Google LLC | ||
| * SPDX-License-Identifier: BSD-3-Clause | ||
| */function t(t){return n$1({...t,state:!0})} | ||
| /** | ||
| * @license | ||
| * Copyright 2017 Google LLC | ||
| * SPDX-License-Identifier: BSD-3-Clause | ||
| */ | ||
| const o=({finisher:e,descriptor:t})=>(o,n)=>{var r;if(void 0===n){const n=null!==(r=o.originalKey)&&void 0!==r?r:o.key,i=null!=t?{kind:"method",placement:"prototype",key:n,descriptor:t(o.key)}:{...o,key:n};return null!=e&&(i.finisher=function(t){e(t,n);}),i}{const r=o.constructor;void 0!==t&&Object.defineProperty(o,n,t(n)),null==e||e(r,n);}}; | ||
| /** | ||
| * @license | ||
| * Copyright 2017 Google LLC | ||
| * SPDX-License-Identifier: BSD-3-Clause | ||
| */function e(e){return o({descriptor:r=>({get(){var r,o;return null!==(o=null===(r=this.renderRoot)||void 0===r?void 0:r.querySelectorAll(e))&&void 0!==o?o:[]},enumerable:!0,configurable:!0})})} | ||
| /** | ||
| * @license | ||
| * Copyright 2021 Google LLC | ||
| * SPDX-License-Identifier: BSD-3-Clause | ||
| */var n;null!=(null===(n=window.HTMLSlotElement)||void 0===n?void 0:n.prototype.assignedElements)?(o,n)=>o.assignedElements(n):(o,n)=>o.assignedNodes(n).filter((o=>o.nodeType===Node.ELEMENT_NODE)); | ||
| const linkImport = x ` | ||
| <link | ||
| rel="stylesheet" | ||
| href="https://unpkg.com/@seliaco/giant-panda-styles/style.css" | ||
| /> | ||
| `; | ||
| i$2 ` | ||
| @import url('https://unpkg.com/@seliaco/giant-panda-styles/style.css'); | ||
| `; | ||
| exports.ButtonComponent = class ButtonComponent extends s { | ||
| constructor() { | ||
| super(...arguments); | ||
| this.type = ''; | ||
| this.color = ''; | ||
| this.size = ''; | ||
| this.width = ''; | ||
| this.disabled = false; | ||
| this.classResolver = () => { | ||
| let classes = 'btn'; | ||
| if (this.type) { | ||
| classes += ` btn-${this.type}`; | ||
| } | ||
| if (this.color) { | ||
| classes += ` btn-${this.color}`; | ||
| } | ||
| if (this.size) { | ||
| classes += ` btn-${this.size}`; | ||
| } | ||
| if (this.width) { | ||
| this.style.setProperty('--button-width', this.width); | ||
| } | ||
| return classes; | ||
| }; | ||
| } | ||
| render() { | ||
| return x ` | ||
| ${linkImport} | ||
| <button class="${this.classResolver()}" type="button" ?disabled="${this.disabled}"> | ||
| <slot></slot> | ||
| </button> | ||
| `; | ||
| } | ||
| }; | ||
| exports.ButtonComponent.styles = i$2 ` | ||
| button { | ||
| width: var(--button-width, unset); | ||
| } | ||
| `; | ||
| __decorate([ | ||
| n$1() | ||
| ], exports.ButtonComponent.prototype, "type", void 0); | ||
| __decorate([ | ||
| n$1() | ||
| ], exports.ButtonComponent.prototype, "color", void 0); | ||
| __decorate([ | ||
| n$1() | ||
| ], exports.ButtonComponent.prototype, "size", void 0); | ||
| __decorate([ | ||
| n$1() | ||
| ], exports.ButtonComponent.prototype, "width", void 0); | ||
| __decorate([ | ||
| n$1() | ||
| ], exports.ButtonComponent.prototype, "disabled", void 0); | ||
| exports.ButtonComponent = __decorate([ | ||
| e$2('button-component') | ||
| ], exports.ButtonComponent); | ||
| const icon = { | ||
| success: '<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M17.6065 9.19299L12.5611 15.8183L10.3838 13.037C9.93046 12.4557 9.09046 12.3543 8.51179 12.809C7.93179 13.2623 7.82913 14.101 8.28379 14.6797L11.5251 18.8223C11.7785 19.145 12.1651 19.333 12.5758 19.333H12.5851C12.9971 19.3317 13.3865 19.137 13.6358 18.8077L19.7278 10.8077C20.1745 10.221 20.0611 9.38633 19.4745 8.93966C18.8865 8.49299 18.0518 8.60766 17.6065 9.19299ZM14.0003 24.667C8.11899 24.667 3.33366 19.8817 3.33366 14.0003C3.33366 8.11899 8.11899 3.33366 14.0003 3.33366C19.8817 3.33366 24.667 8.11899 24.667 14.0003C24.667 19.8817 19.8817 24.667 14.0003 24.667ZM14.0003 0.666992C6.63633 0.666992 0.666992 6.63766 0.666992 14.0003C0.666992 21.363 6.63633 27.3337 14.0003 27.3337C21.3643 27.3337 27.3337 21.363 27.3337 14.0003C27.3337 6.63766 21.3643 0.666992 14.0003 0.666992Z" fill="#36BF8D"/></svg>', | ||
| info: '<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.0003 0.666992C11.3632 0.666992 8.78538 1.44898 6.59273 2.91406C4.40007 4.37915 2.69111 6.46153 1.68194 8.89788C0.672769 11.3342 0.408725 14.0151 0.923194 16.6015C1.43766 19.1879 2.70754 21.5637 4.57224 23.4284C6.43694 25.2931 8.81272 26.563 11.3991 27.0775C13.9855 27.5919 16.6664 27.3279 19.1028 26.3187C21.5391 25.3096 23.6215 23.6006 25.0866 21.4079C26.5517 19.2153 27.3337 16.6374 27.3337 14.0003C27.3337 12.2494 26.9888 10.5156 26.3187 8.89788C25.6487 7.2802 24.6665 5.81035 23.4284 4.57224C22.1903 3.33412 20.7205 2.35199 19.1028 1.68193C17.4851 1.01187 15.7513 0.666992 14.0003 0.666992ZM14.0003 24.667C11.8907 24.667 9.82837 24.0414 8.07425 22.8693C6.32012 21.6973 4.95295 20.0314 4.14562 18.0823C3.33828 16.1332 3.12705 13.9885 3.53862 11.9194C3.9502 9.85023 4.9661 7.94961 6.45786 6.45785C7.94962 4.96609 9.85024 3.95019 11.9194 3.53862C13.9885 3.12704 16.1332 3.33828 18.0823 4.14561C20.0314 4.95295 21.6973 6.32012 22.8693 8.07424C24.0414 9.82837 24.667 11.8907 24.667 14.0003C24.667 16.8293 23.5432 19.5424 21.5428 21.5428C19.5424 23.5432 16.8293 24.667 14.0003 24.667Z" fill="#8350E6"/><path d="M14.0003 10.0003C14.7367 10.0003 15.3337 9.40337 15.3337 8.66699C15.3337 7.93061 14.7367 7.33366 14.0003 7.33366C13.264 7.33366 12.667 7.93061 12.667 8.66699C12.667 9.40337 13.264 10.0003 14.0003 10.0003Z" fill="#8350E6"/><path d="M14.0003 11.3337C13.6467 11.3337 13.3076 11.4741 13.0575 11.7242C12.8075 11.9742 12.667 12.3134 12.667 12.667V19.3337C12.667 19.6873 12.8075 20.0264 13.0575 20.2765C13.3076 20.5265 13.6467 20.667 14.0003 20.667C14.354 20.667 14.6931 20.5265 14.9431 20.2765C15.1932 20.0264 15.3337 19.6873 15.3337 19.3337V12.667C15.3337 12.3134 15.1932 11.9742 14.9431 11.7242C14.6931 11.4741 14.354 11.3337 14.0003 11.3337Z" fill="#8350E6"/></svg>', | ||
| error: '<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M17.6097 10.391C17.0883 9.86966 16.2457 9.86966 15.7243 10.391L14.0003 12.115L12.2763 10.391C11.755 9.86966 10.9123 9.86966 10.391 10.391C9.86966 10.9123 9.86966 11.755 10.391 12.2763L12.115 14.0003L10.391 15.7243C9.86966 16.2457 9.86966 17.0883 10.391 17.6097C10.651 17.8697 10.9923 18.0003 11.3337 18.0003C11.675 18.0003 12.0163 17.8697 12.2763 17.6097L14.0003 15.8857L15.7243 17.6097C15.9843 17.8697 16.3257 18.0003 16.667 18.0003C17.0083 18.0003 17.3497 17.8697 17.6097 17.6097C18.131 17.0883 18.131 16.2457 17.6097 15.7243L15.8857 14.0003L17.6097 12.2763C18.131 11.755 18.131 10.9123 17.6097 10.391ZM14.0003 24.667C8.11899 24.667 3.33366 19.8817 3.33366 14.0003C3.33366 8.11899 8.11899 3.33366 14.0003 3.33366C19.8817 3.33366 24.667 8.11899 24.667 14.0003C24.667 19.8817 19.8817 24.667 14.0003 24.667ZM14.0003 0.666992C6.64833 0.666992 0.666992 6.64833 0.666992 14.0003C0.666992 21.3523 6.64833 27.3337 14.0003 27.3337C21.3523 27.3337 27.3337 21.3523 27.3337 14.0003C27.3337 6.64833 21.3523 0.666992 14.0003 0.666992Z" fill="#FE4A49"/></svg>' | ||
| }; | ||
| const toastLayout = 'margin-bottom: 16px; width: 340px; display: grid; grid-template-columns: 26px auto; gap: 16px; padding: 16px; border-radius: 16px;'; | ||
| const toastIconLayout = 'width: 100%; align-self: center;'; | ||
| const toastTitleLayout = 'font-weight: bold; font-size: 14px; line-height: 1.2; color: #151516; align-self: center;'; | ||
| const toastTransformation = 'transition: .3s; position: fixed; right: 50%; transform: translateX(50%); z-index: 9999;'; | ||
| const toastOpen = `top: calc(env(safe-area-inset-top) + 16px); ${toastTransformation}`; | ||
| const toastClose = `top: -200px; ${toastTransformation}`; | ||
| const style = { | ||
| success: { | ||
| toast: `${toastLayout} box-shadow: 0px 5px 20px rgba(131, 80, 230, 0.2); border: 1px solid #36BF8D; background: #FFFFFF;`, | ||
| icon: toastIconLayout, | ||
| text: toastTitleLayout | ||
| }, | ||
| info: { | ||
| toast: `${toastLayout} box-shadow: 0px 5px 20px rgba(131, 80, 230, 0.2); border: 1px solid #8350E6; background: #FFFFFF;`, | ||
| icon: toastIconLayout, | ||
| text: toastTitleLayout | ||
| }, | ||
| error: { | ||
| toast: `${toastLayout} box-shadow: 0px 5px 20px rgba(131, 80, 230, 0.2); border: 1px solid #FE4A49; background: #FFFFFF;`, | ||
| icon: toastIconLayout, | ||
| text: toastTitleLayout | ||
| } | ||
| }; | ||
| exports.ToastComponent = class ToastComponent extends s { | ||
| constructor() { | ||
| super(...arguments); | ||
| this.text = ''; | ||
| this.severity = 'success'; | ||
| this.timeout = 3000; | ||
| this.type = false; | ||
| } | ||
| render() { | ||
| return x `${linkImport}`; | ||
| } | ||
| getToastContainer() { | ||
| let container = document.getElementById('toast-container'); | ||
| if (!container) { | ||
| container = document.createElement('div'); | ||
| container.style.cssText = `${toastClose}`; | ||
| document.body.appendChild(container); | ||
| } | ||
| return container; | ||
| } | ||
| createToast() { | ||
| const container = this.getToastContainer(); | ||
| const toast = document.createElement('div'); | ||
| toast.style.cssText = style[this.severity].toast; | ||
| toast.innerHTML = ` | ||
| <div style="${style[this.severity].icon}"> | ||
| ${icon[this.severity]} | ||
| </div> | ||
| <div style="${style[this.severity].title}">${this.text}</div> | ||
| `; | ||
| container.append(toast); | ||
| setTimeout(() => { | ||
| container.style.cssText = toastOpen; | ||
| }, 100); | ||
| setTimeout(() => { | ||
| container.style.cssText = toastClose; | ||
| setTimeout(() => { | ||
| container.innerHTML = ''; | ||
| }, 100); | ||
| }, this.timeout); | ||
| } | ||
| updated(changedProperties) { | ||
| if (changedProperties.has('text') || changedProperties.has('severity')) { | ||
| this.createToast(); | ||
| } | ||
| } | ||
| }; | ||
| exports.ToastComponent.styles = i$2 ` | ||
| ${i$2(style.success.toast)} | ||
| ${i$2(style.info.toast)} | ||
| ${i$2(style.error.toast)} | ||
| `; | ||
| __decorate([ | ||
| n$1({ type: String }) | ||
| ], exports.ToastComponent.prototype, "text", void 0); | ||
| __decorate([ | ||
| n$1({ type: String }) | ||
| ], exports.ToastComponent.prototype, "severity", void 0); | ||
| __decorate([ | ||
| n$1({ type: Number }) | ||
| ], exports.ToastComponent.prototype, "timeout", void 0); | ||
| __decorate([ | ||
| t() | ||
| ], exports.ToastComponent.prototype, "type", void 0); | ||
| exports.ToastComponent = __decorate([ | ||
| e$2('toast-component') | ||
| ], exports.ToastComponent); | ||
| exports.CarrouselComponent = class CarrouselComponent extends s { | ||
| constructor() { | ||
| super(...arguments); | ||
| this.autoloop = false; | ||
| this.time = 2000; | ||
| this.position = 0; | ||
| this.slots = []; | ||
| } | ||
| firstUpdated() { | ||
| const slot = this.shadowRoot?.querySelector('slot'); | ||
| this.slots = slot?.assignedElements(); | ||
| if (this.autoloop) { | ||
| setInterval(() => { | ||
| this.next(); | ||
| }, this.time); | ||
| } | ||
| } | ||
| next() { | ||
| if (this.slots.length - 1 > this.position) { | ||
| this.position++; | ||
| } | ||
| else if (this.position === this.slots.length - 1) { | ||
| this.position = 0; | ||
| } | ||
| } | ||
| prev() { | ||
| if (this.position > 0) { | ||
| this.position--; | ||
| } | ||
| else if (this.position === 0) { | ||
| this.position = this.slots.length - 1; | ||
| } | ||
| } | ||
| updated(changedProperties) { | ||
| super.updated(changedProperties); | ||
| if (this.slots) { | ||
| this.slots?.forEach((div, index) => { | ||
| div.style.display = index === this.position ? 'block' : 'none'; | ||
| }); | ||
| } | ||
| } | ||
| render() { | ||
| return x ` | ||
| ${linkImport} | ||
| <div class="carrousel"> | ||
| <button-component | ||
| type="circle" | ||
| color="white" | ||
| class="carrousel-button" | ||
| @click="${this.prev}" | ||
| > | ||
| <span class="icon-arrow-big-outline-left"></span> | ||
| </button-component> | ||
| <slot></slot> | ||
| <button-component | ||
| type="circle" | ||
| color="white" | ||
| class="carrousel-button" | ||
| @click="${this.next}" | ||
| > | ||
| <span class="icon-arrow-big-outline-right"></span> | ||
| </button-component> | ||
| <div class="carrousel-dots"> | ||
| ${this.slots.map((dot, index) => x ` | ||
| <span | ||
| @click="${() => (this.position = index)}" | ||
| class="carrousel-dot ${index === this.position ? 'active' : ''}" | ||
| ></span> | ||
| `)} | ||
| </div> | ||
| </div> | ||
| `; | ||
| } | ||
| }; | ||
| exports.CarrouselComponent.styles = i$2 ` | ||
| .carrousel { | ||
| display: flex; | ||
| align-items: center; | ||
| gap: 24px; | ||
| transition: all 0.5s; | ||
| position: relative; | ||
| width: fit-content; | ||
| } | ||
| button { | ||
| cursor: pointer; | ||
| position: absolute; | ||
| transform: translateY(50%); | ||
| } | ||
| .carrousel-dots { | ||
| display: flex; | ||
| gap: 8px; | ||
| position: absolute; | ||
| bottom: -40px; | ||
| left: 0; | ||
| align-items: center; | ||
| justify-content: center; | ||
| width: 100%; | ||
| } | ||
| .carrousel-dot { | ||
| background: var(--purple-40); | ||
| width: 10px; | ||
| height: 10px; | ||
| border-radius: 50%; | ||
| } | ||
| .carrousel-dot.active { | ||
| background: var(--purple-60); | ||
| } | ||
| `; | ||
| __decorate([ | ||
| n$1({ type: Boolean }) | ||
| ], exports.CarrouselComponent.prototype, "autoloop", void 0); | ||
| __decorate([ | ||
| n$1({ type: Number }) | ||
| ], exports.CarrouselComponent.prototype, "time", void 0); | ||
| __decorate([ | ||
| t() | ||
| ], exports.CarrouselComponent.prototype, "position", void 0); | ||
| __decorate([ | ||
| t() | ||
| ], exports.CarrouselComponent.prototype, "slots", void 0); | ||
| exports.CarrouselComponent = __decorate([ | ||
| e$2('carrousel-component') | ||
| ], exports.CarrouselComponent); | ||
| exports.OTPComponent = class OTPComponent extends s { | ||
| constructor() { | ||
| super(...arguments); | ||
| this.numDigits = 4; | ||
| this.error = false; | ||
| this.success = false; | ||
| } | ||
| handleInput(e) { | ||
| const target = e.target; | ||
| const digits = Array.from(this.inputs).map((input) => input.value); | ||
| if (digits.every((digit) => digit !== '')) { | ||
| this.dispatchEvent(new CustomEvent('otp-complete', { | ||
| detail: { otp: digits.join('') }, | ||
| bubbles: true, | ||
| composed: true | ||
| })); | ||
| } | ||
| else { | ||
| const nextInput = target.nextElementSibling; | ||
| if (nextInput) { | ||
| nextInput.focus(); | ||
| } | ||
| } | ||
| } | ||
| handleKeyDown(e) { | ||
| const charCode = e.charCode || e.keyCode; | ||
| const charStr = String.fromCharCode(charCode); | ||
| if (!charStr.match(/^[0-9]$/)) { | ||
| e.preventDefault(); | ||
| } | ||
| } | ||
| classResolver() { | ||
| return `otp-field ${this.error ? 'error' : ''} ${this.success ? 'success' : ''}`; | ||
| } | ||
| render() { | ||
| return x ` | ||
| ${Array.from({ length: this.numDigits }, (key, i) => x ` | ||
| <input | ||
| class="${this.classResolver()}" | ||
| type="text" | ||
| inputmode="numeric" | ||
| maxlength="1" | ||
| size="1" | ||
| @input=${this.handleInput} | ||
| @keydown=${this.handleKeyDown} | ||
| /> | ||
| `)} | ||
| `; | ||
| } | ||
| }; | ||
| exports.OTPComponent.styles = i$2 ` | ||
| input { | ||
| border-radius: 8px; | ||
| border: 1px solid var(--gray-40); | ||
| background: var(--white); | ||
| text-align: center; | ||
| width: 48px; | ||
| height: 48px; | ||
| font-family: 'Open Sans'; | ||
| font-size: 18px; | ||
| font-style: normal; | ||
| font-weight: 400; | ||
| color: var(--gray-80); | ||
| } | ||
| input:hover, | ||
| input:focus, | ||
| input:active { | ||
| border-color: var(--purple-60); | ||
| } | ||
| input.error { | ||
| border-color: var(--red); | ||
| } | ||
| input.success { | ||
| border-color: var(--green); | ||
| } | ||
| `; | ||
| __decorate([ | ||
| n$1({ type: Number }) | ||
| ], exports.OTPComponent.prototype, "numDigits", void 0); | ||
| __decorate([ | ||
| n$1({ type: Boolean }) | ||
| ], exports.OTPComponent.prototype, "error", void 0); | ||
| __decorate([ | ||
| n$1({ type: Boolean }) | ||
| ], exports.OTPComponent.prototype, "success", void 0); | ||
| __decorate([ | ||
| e('input') | ||
| ], exports.OTPComponent.prototype, "inputs", void 0); | ||
| exports.OTPComponent = __decorate([ | ||
| e$2('otp-component') | ||
| ], exports.OTPComponent); | ||
| const assets = { | ||
| logotipo: 'https://s3.amazonaws.com/images.app.selia/selia-logotipo.png' | ||
| }; | ||
| exports.WrapperAuthComponent = class WrapperAuthComponent extends s { | ||
| constructor() { | ||
| super(...arguments); | ||
| this.logoText = ''; | ||
| this.title = ''; | ||
| this.subtitle = ''; | ||
| } | ||
| getSlot(slotName) { | ||
| return this.querySelector(`[slot="${slotName}"]`); | ||
| } | ||
| render() { | ||
| const logo = assets.logotipo; | ||
| return x ` | ||
| ${linkImport} | ||
| <div class="wrapper"> | ||
| <div class="wrapper-header"> | ||
| <img src="${logo}" alt="Selia" /> | ||
| <div class="content-small">${this.logoText}</div> | ||
| </div> | ||
| <div class="heading-big margin-lg-bottom"> | ||
| ${this.title} | ||
| </div> | ||
| <div class="body-small"> | ||
| ${this.subtitle} | ||
| </div> | ||
| ${this.getSlot('content')} | ||
| </div> | ||
| `; | ||
| } | ||
| }; | ||
| exports.WrapperAuthComponent.styles = i$2 ` | ||
| .wrapper { | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| gap: 8px; | ||
| padding: 24px; | ||
| max-width: 400px; | ||
| margin: auto; | ||
| box-sizing: border-box; | ||
| } | ||
| .wrapper-header { | ||
| text-align: center; | ||
| img { | ||
| width: 100px; | ||
| margin-bottom: 8px; | ||
| } | ||
| } | ||
| `; | ||
| __decorate([ | ||
| decorators.property({ type: String }) | ||
| ], exports.WrapperAuthComponent.prototype, "logoText", void 0); | ||
| __decorate([ | ||
| decorators.property({ type: String }) | ||
| ], exports.WrapperAuthComponent.prototype, "title", void 0); | ||
| __decorate([ | ||
| decorators.property({ type: String }) | ||
| ], exports.WrapperAuthComponent.prototype, "subtitle", void 0); | ||
| exports.WrapperAuthComponent = __decorate([ | ||
| decorators.customElement('wrapper-auth') | ||
| ], exports.WrapperAuthComponent); | ||
| exports.FieldComponent = class FieldComponent extends s { | ||
| constructor() { | ||
| super(...arguments); | ||
| this.id = ''; | ||
| this.label = ''; | ||
| this.error = false; | ||
| this.errorText = ''; | ||
| } | ||
| get fieldClasses() { | ||
| const classesCheck = { | ||
| 'field': true, | ||
| 'icon-right-error': this.error && this.errorText && this.errorText.length > 0 && this.querySelector('[slot="icon-right"]'), | ||
| 'icon-left': this.querySelector('[slot="icon-left"]'), | ||
| 'icon-right': this.querySelector('[slot="icon-right"]') | ||
| }; | ||
| let classes = ''; | ||
| Object.keys(classesCheck).forEach((key) => { | ||
| if (classesCheck[key]) { | ||
| classes += `${key} `; | ||
| } | ||
| }); | ||
| return classes; | ||
| } | ||
| getSlot(slotName) { | ||
| return this.querySelector(`[slot="${slotName}"]`); | ||
| } | ||
| render() { | ||
| return x ` | ||
| ${linkImport} | ||
| <div class="${this.fieldClasses}"> | ||
| ${this.getSlot('icon-left')} | ||
| ${this.getSlot('content-field')} | ||
| ${this.getSlot('content-out-field')} | ||
| <label for="${this.id}"> | ||
| ${this.label} | ||
| </label> | ||
| ${this.getSlot('icon-right')} | ||
| <span class="field-error" ?hidden="${!this.error || !this.errorText}"> | ||
| ${this.errorText} | ||
| </span> | ||
| </div> | ||
| `; | ||
| } | ||
| }; | ||
| __decorate([ | ||
| n$1({ type: String }) | ||
| ], exports.FieldComponent.prototype, "id", void 0); | ||
| __decorate([ | ||
| n$1({ type: String }) | ||
| ], exports.FieldComponent.prototype, "label", void 0); | ||
| __decorate([ | ||
| n$1({ type: Boolean }) | ||
| ], exports.FieldComponent.prototype, "error", void 0); | ||
| __decorate([ | ||
| n$1({ type: String }) | ||
| ], exports.FieldComponent.prototype, "errorText", void 0); | ||
| exports.FieldComponent = __decorate([ | ||
| e$2('field-component') | ||
| ], exports.FieldComponent); | ||
| exports.InputComponent = class InputComponent extends s { | ||
| constructor() { | ||
| super(...arguments); | ||
| this.type = 'text'; | ||
| this.placeholder = 'placeholder'; | ||
| this.label = 'label'; | ||
| this.value = 'value'; | ||
| this.iconRight = ''; | ||
| this.hasError = false; | ||
| } | ||
| handleChange(event) { | ||
| const inputValue = event.target.value; | ||
| this.value = inputValue; | ||
| this.hasError = !!inputValue; | ||
| this.dispatchEvent(new CustomEvent('input-change', { | ||
| detail: { value: inputValue }, | ||
| bubbles: true, | ||
| composed: true | ||
| })); | ||
| } | ||
| getInputClasses() { | ||
| return `field-control ${this.value ? 'filled' : ''} ${this.hasError ? 'error' : ''}`; | ||
| } | ||
| showIconRight() { | ||
| const action = () => { | ||
| this.dispatchEvent(new CustomEvent('icon-action', { bubbles: true, composed: true })); | ||
| }; | ||
| return this.iconRight ? x `<i class="field-icon-right ${this.iconRight}" @click="${action}"></i>` : ''; | ||
| } | ||
| render() { | ||
| return x ` | ||
| ${linkImport} | ||
| <div class="field"> | ||
| <label for="input">${this.label}</label> | ||
| <input | ||
| class="${this.getInputClasses()}" | ||
| type="${this.type}" | ||
| placeholder="${this.placeholder}" | ||
| @input=${this.handleChange} | ||
| /> | ||
| ${this.showIconRight()} | ||
| </div> | ||
| `; | ||
| } | ||
| }; | ||
| __decorate([ | ||
| n$1({ type: String }) | ||
| ], exports.InputComponent.prototype, "type", void 0); | ||
| __decorate([ | ||
| n$1({ type: String }) | ||
| ], exports.InputComponent.prototype, "placeholder", void 0); | ||
| __decorate([ | ||
| n$1({ type: String }) | ||
| ], exports.InputComponent.prototype, "label", void 0); | ||
| __decorate([ | ||
| n$1({ type: String }) | ||
| ], exports.InputComponent.prototype, "value", void 0); | ||
| __decorate([ | ||
| n$1({ type: String }) | ||
| ], exports.InputComponent.prototype, "iconRight", void 0); | ||
| __decorate([ | ||
| t() | ||
| ], exports.InputComponent.prototype, "hasError", void 0); | ||
| exports.InputComponent = __decorate([ | ||
| e$2('input-component') | ||
| ], exports.InputComponent); | ||
| const FieldMixin = (superClass) => { | ||
| class FieldMixinClass extends superClass { | ||
| constructor() { | ||
| super(...arguments); | ||
| this.id = ''; | ||
| this.value = ''; | ||
| this.label = ''; | ||
| this.error = false; | ||
| this.errorText = ''; | ||
| this.placeholder = ''; | ||
| this.readonly = false; | ||
| this.disabled = false; | ||
| this.iconLeft = ''; | ||
| this.iconRight = ''; | ||
| this.lang = 'es'; | ||
| } | ||
| get handlerClass() { | ||
| const classesCheck = { | ||
| readonly: this.readonly, | ||
| filled: Boolean(this.value) && this.value.length > 0, | ||
| disabled: this.disabled, | ||
| invalid: this.error | ||
| }; | ||
| let classes = ''; | ||
| Object.keys(classesCheck).forEach((key) => { | ||
| if (classesCheck[key]) { | ||
| classes += `${key} `; | ||
| } | ||
| }); | ||
| return classes; | ||
| } | ||
| } | ||
| __decorate([ | ||
| n$1({ type: String }) | ||
| ], FieldMixinClass.prototype, "id", void 0); | ||
| __decorate([ | ||
| n$1({ type: String }) | ||
| ], FieldMixinClass.prototype, "value", void 0); | ||
| __decorate([ | ||
| n$1({ type: String }) | ||
| ], FieldMixinClass.prototype, "label", void 0); | ||
| __decorate([ | ||
| n$1({ type: Boolean }) | ||
| ], FieldMixinClass.prototype, "error", void 0); | ||
| __decorate([ | ||
| n$1({ type: String }) | ||
| ], FieldMixinClass.prototype, "errorText", void 0); | ||
| __decorate([ | ||
| n$1({ type: String }) | ||
| ], FieldMixinClass.prototype, "placeholder", void 0); | ||
| __decorate([ | ||
| n$1({ type: Boolean }) | ||
| ], FieldMixinClass.prototype, "readonly", void 0); | ||
| __decorate([ | ||
| n$1({ type: Boolean }) | ||
| ], FieldMixinClass.prototype, "disabled", void 0); | ||
| __decorate([ | ||
| n$1({ type: String }) | ||
| ], FieldMixinClass.prototype, "iconLeft", void 0); | ||
| __decorate([ | ||
| n$1({ type: String }) | ||
| ], FieldMixinClass.prototype, "iconRight", void 0); | ||
| __decorate([ | ||
| n$1({ type: String }) | ||
| ], FieldMixinClass.prototype, "lang", void 0); | ||
| return FieldMixinClass; | ||
| }; | ||
| const es = { | ||
| error: { | ||
| password: 'La contraseña debe tener al menos 8 caracteres, una letra mayúscula, una letra minúscula, un número y un carácter especial', | ||
| }, | ||
| login: { | ||
| title: "Iniciar sesión", | ||
| email: "Correo electrónico", | ||
| password: "Contraseña", | ||
| forgotPassword: "¿Olvidaste tu contraseña?", | ||
| submit: "Ingresar", | ||
| b2b: "Selia Empresas", | ||
| b2bSubtitle: "Ingresa tus credenciales de administrador.", | ||
| b2bFooter: "¿Quieres pertenecer a Selia empresas?", | ||
| b2bFooterDemo: "Solicitar demo aquí", | ||
| video: "Selia Video", | ||
| videoSubtitle: "Ingresa tus credenciales de la app de Selia.", | ||
| videoFooter: "¿Aún no tienes cuenta?", | ||
| videoFooterAction: "Ingresa como invitado" | ||
| }, | ||
| }; | ||
| const en = { | ||
| error: { | ||
| password: 'The password must have at least 8 characters, one uppercase letter, one lowercase letter, one number, and one special character', | ||
| }, | ||
| login: { | ||
| title: "Sign In", | ||
| email: "Email", | ||
| password: "Password", | ||
| forgotPassword: "Forgot your password?", | ||
| submit: "Sign In", | ||
| b2b: "Selia Companies", | ||
| b2bSubtitle: "Enter your admin credentials to access your account", | ||
| b2bFooter: "Do you want to join Selia companies?", | ||
| b2bFooterDemo: "Request demo here", | ||
| video: "Selia Video", | ||
| videoSubtitle: "Enter your Selia app credentials", | ||
| videoFooter: "Don't have an account yet?", | ||
| videoFooterAction: "Enter as a guest" | ||
| }, | ||
| }; | ||
| const pt = { | ||
| error: { | ||
| password: 'A senha deve ter pelo menos 8 caracteres, uma letra maiúscula, uma letra minúscula, um número e um caractere especial', | ||
| }, | ||
| login: { | ||
| title: "Entrar", | ||
| email: "E-mail", | ||
| password: "Senha", | ||
| forgotPassword: "Esqueceu sua senha?", | ||
| submit: "Entrar", | ||
| b2b: "Selia Empresas", | ||
| b2bSubtitle: "Insira suas credenciais de administrador.", | ||
| b2bFooter: "Quer fazer parte da Selia empresas?", | ||
| b2bFooterDemo: "Solicitar demo aqui", | ||
| video: "Selia Vídeo", | ||
| videoSubtitle: "Insira suas credenciais do app da Selia.", | ||
| videoFooter: "Ainda não tem uma conta?", | ||
| videoFooterAction: "Entrar como convidado" | ||
| }, | ||
| }; | ||
| const translations = { | ||
| es, | ||
| en, | ||
| pt | ||
| }; | ||
| // @ts-ignore | ||
| exports.PasswordComponent = class PasswordComponent extends FieldMixin(s) { | ||
| constructor() { | ||
| super(...arguments); | ||
| this.enabledRegex = false; | ||
| this.regex = '^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,}$'; | ||
| this.iconName = 'icon-Eyes-off-outline'; | ||
| this.inputType = 'password'; | ||
| } | ||
| render() { | ||
| return x ` | ||
| ${linkImport} | ||
| <field-component | ||
| label="${this.label}" | ||
| id="${this.id}" | ||
| error="${this.error}" | ||
| errorText="${this.errorText}" | ||
| > | ||
| <input | ||
| slot="content-field" | ||
| value="${this.value}" | ||
| class="field-control ${this.handlerClass}" | ||
| type="${this.inputType}" | ||
| placeholder="${this.placeholder}" | ||
| autocomplete="new-password" | ||
| autofill="new-password" | ||
| @input="${this.setValue}" | ||
| @blur="${this.blur}" | ||
| @keyup="${this.onKeyUp}" | ||
| /> | ||
| <div | ||
| slot="icon-right" | ||
| @click="${this.handleToggleMask}" | ||
| class="field-icon-right ${this.iconName}" | ||
| ></div> | ||
| </field-component> | ||
| ${this.errorTemplate} | ||
| `; | ||
| } | ||
| get errorTemplate() { | ||
| if (this.error) { | ||
| const errorMessage = translations[this.lang].error.password; | ||
| return x `<div class="field-error">${errorMessage}</div>`; | ||
| } | ||
| return x ``; | ||
| } | ||
| setValue(event) { | ||
| const input = event.target; | ||
| this.value = input.value; | ||
| this.dispatchEvent(new CustomEvent('change', { detail: this.value })); | ||
| } | ||
| handleToggleMask() { | ||
| this.iconName = this.inputType === 'password' ? 'icon-eyes-on-outline' : 'icon-Eyes-off-outline'; | ||
| this.inputType = this.inputType === 'password' ? 'text' : 'password'; | ||
| this.requestUpdate(); | ||
| } | ||
| onKeyUp() { | ||
| if (this.enabledRegex && this.value && this.value.length > 0) { | ||
| const check = new RegExp(this.regex).test(this.value); | ||
| this.error = !check; | ||
| this.dispatchEvent(new CustomEvent('onError', { detail: check })); | ||
| } | ||
| } | ||
| }; | ||
| __decorate([ | ||
| n$1({ type: Boolean }) | ||
| ], exports.PasswordComponent.prototype, "enabledRegex", void 0); | ||
| __decorate([ | ||
| n$1({ type: String }) | ||
| ], exports.PasswordComponent.prototype, "regex", void 0); | ||
| __decorate([ | ||
| t() | ||
| ], exports.PasswordComponent.prototype, "iconName", void 0); | ||
| __decorate([ | ||
| t() | ||
| ], exports.PasswordComponent.prototype, "inputType", void 0); | ||
| exports.PasswordComponent = __decorate([ | ||
| e$2('password-component') | ||
| ], exports.PasswordComponent); | ||
| // @ts-ignore | ||
| exports.EmailComponent = class EmailComponent extends FieldMixin(s) { | ||
| render() { | ||
| return x ` | ||
| <field-component | ||
| label="${this.label}" | ||
| id="${this.id}" | ||
| error="${this.error}" | ||
| errorText="${this.errorText}" | ||
| > | ||
| <input | ||
| slot="content-field" | ||
| value="${this.value}" | ||
| class="field-control ${this.handlerClass}" | ||
| type="email" | ||
| placeholder="${this.placeholder}" | ||
| autocomplete="new-email" | ||
| autofill="new-email" | ||
| pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" | ||
| @input="${this.setValue}" | ||
| @blur="${this.blur}" | ||
| /> | ||
| </field-component> | ||
| `; | ||
| } | ||
| setValue(event) { | ||
| const input = event.target; | ||
| this.value = input.value; | ||
| this.isValid = input.validity.valid; | ||
| this.dispatchEvent(new CustomEvent('change', { detail: this.value })); | ||
| } | ||
| }; | ||
| exports.EmailComponent = __decorate([ | ||
| e$2('email-component') | ||
| ], exports.EmailComponent); | ||
| exports.LoginForm = class LoginForm extends s { | ||
| constructor() { | ||
| super(...arguments); | ||
| this.lang = 'es'; | ||
| this.enabledRegex = true; | ||
| this.formValue = { | ||
| email: '', | ||
| password: '' | ||
| }; | ||
| } | ||
| validateOrigin() { | ||
| const validOrigins = ['usr', 'spe', 'b2b', 'vid']; | ||
| if (!validOrigins.includes(this.origin)) { | ||
| throw new Error(`Login Form | Invalid origin: "${this.origin}". Origin most be one of "usr", "spe" or "b2b"`); | ||
| } | ||
| } | ||
| get translations() { | ||
| return translations[this.lang]; | ||
| } | ||
| handleEmailChange(payload) { | ||
| this.formValue.email = payload.detail; | ||
| } | ||
| handlePasswordChange(payload) { | ||
| this.formValue.password = payload.detail; | ||
| } | ||
| handleSubmit() { | ||
| const options = { | ||
| detail: this.formValue, | ||
| bubbles: true, | ||
| composed: true | ||
| }; | ||
| return this.dispatchEvent(new CustomEvent('submit', options)); | ||
| } | ||
| handleForgotPassword() { | ||
| const options = { | ||
| bubbles: true, | ||
| composed: true | ||
| }; | ||
| return this.dispatchEvent(new CustomEvent('forgot-password', options)); | ||
| } | ||
| handleFooterAction() { | ||
| const options = { | ||
| bubbles: true, | ||
| composed: true | ||
| }; | ||
| return this.dispatchEvent(new CustomEvent('footer-action', options)); | ||
| } | ||
| get header() { | ||
| switch (this.origin) { | ||
| case 'b2b': | ||
| return this.translations?.login?.b2b; | ||
| case 'vid': | ||
| return this.translations?.login?.video; | ||
| default: | ||
| return ''; | ||
| } | ||
| } | ||
| ; | ||
| get subtitle() { | ||
| switch (this.origin) { | ||
| case 'b2b': | ||
| return this.translations?.login?.b2bSubtitle; | ||
| case 'vid': | ||
| return this.translations?.login?.videoSubtitle; | ||
| default: | ||
| return ''; | ||
| } | ||
| } | ||
| get footer() { | ||
| let footerText = ''; | ||
| let footerLinkText = ''; | ||
| switch (this.origin) { | ||
| case 'b2b': | ||
| footerText = this.translations?.login?.b2bFooter; | ||
| footerLinkText = this.translations?.login?.b2bFooterDemo; | ||
| break; | ||
| case 'vid': | ||
| footerText = this.translations?.login?.videoFooter; | ||
| footerLinkText = this.translations?.login?.videoFooterAction; | ||
| return; | ||
| } | ||
| return x ` | ||
| <div class="body"> | ||
| <span> | ||
| ${footerText} | ||
| </span> | ||
| <span class="content-title link" @click="${this.handleFooterAction}"> | ||
| ${footerLinkText} | ||
| </span> | ||
| </div> | ||
| `; | ||
| } | ||
| ; | ||
| render() { | ||
| this.validateOrigin(); | ||
| const titleText = this.translations?.login?.title; | ||
| const submitText = this.translations?.login?.submit; | ||
| const forgotText = this.translations?.login?.forgotPassword; | ||
| const emailLabel = this.translations?.login?.email; | ||
| const passwordLabel = this.translations?.login?.password; | ||
| return x ` | ||
| ${linkImport} | ||
| <wrapper-auth | ||
| logoText="${this.header}" | ||
| title="${titleText}" | ||
| subtitle="${this.subtitle}"> | ||
| <div class="login-form" slot="content"> | ||
| <email-component | ||
| class="login-form-field" | ||
| label="${emailLabel}" | ||
| value="${this.formValue.email}" | ||
| @change="${this.handleEmailChange}"> | ||
| </email-component> | ||
| <password-component | ||
| class="login-form-field" | ||
| label="${passwordLabel}" | ||
| value="${this.formValue.password}" | ||
| enabledRegex | ||
| @change="${this.handlePasswordChange}"> | ||
| </password-component> | ||
| <div class="content-title" @click="${this.handleForgotPassword}"> | ||
| ${forgotText} | ||
| </div> | ||
| <button-component | ||
| class="login-form-field" | ||
| width="100%" | ||
| size="lg" | ||
| @click="${this.handleSubmit}" | ||
| > | ||
| ${submitText} | ||
| </button-component> | ||
| ${this.footer} | ||
| </div> | ||
| </wrapper-auth> | ||
| `; | ||
| } | ||
| }; | ||
| exports.LoginForm.styles = i$2 ` | ||
| .login-form { | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| gap: 8px; | ||
| padding: 24px; | ||
| max-width: 400px; | ||
| margin: auto; | ||
| box-sizing: border-box; | ||
| } | ||
| .login-form-field { | ||
| width: 100%; | ||
| } | ||
| .login-form-header { | ||
| text-align: center; | ||
| img { | ||
| width: 100px; | ||
| margin-bottom: 8px; | ||
| } | ||
| } | ||
| .heading-big { | ||
| margin: 28px 0; | ||
| } | ||
| .body-small { | ||
| align-self: baseline; | ||
| margin-bottom: 16px; | ||
| } | ||
| .content-title { | ||
| align-self: last baseline; | ||
| margin: 12px 0; | ||
| cursor: pointer; | ||
| } | ||
| .body { | ||
| margin-top: 28px; | ||
| } | ||
| .link { | ||
| color: var(--purple); | ||
| cursor: pointer; | ||
| } | ||
| `; | ||
| __decorate([ | ||
| n$1({ type: String }) | ||
| ], exports.LoginForm.prototype, "lang", void 0); | ||
| __decorate([ | ||
| n$1({ type: String }) | ||
| ], exports.LoginForm.prototype, "origin", void 0); | ||
| __decorate([ | ||
| n$1({ type: Boolean }) | ||
| ], exports.LoginForm.prototype, "enabledRegex", void 0); | ||
| exports.LoginForm = __decorate([ | ||
| e$2('login-form') | ||
| ], exports.LoginForm); | ||
| const init = () => { | ||
| window.addEventListener('load', () => { | ||
| const link = document.createElement('link'); | ||
| link.rel = 'stylesheet'; | ||
| link.href = 'https://unpkg.com/@seliaco/giant-panda-styles/style.css'; | ||
| document.head.appendChild(link); | ||
| }); | ||
| }; | ||
| exports.init = init; | ||
| })); |
| { | ||
| "version": "1.0.23-snapshot-3", | ||
| "version": "1.0.23-snapshot-4", | ||
| "name": "@seliaco/giant-panda-components", | ||
@@ -19,3 +19,4 @@ "type": "module", | ||
| "patch": "npm version patch --no-git-tag-version", | ||
| "release": "npm run patch && npm run build && npm publish --access public" | ||
| "release": "npm run patch && npm run build && npm publish --access public", | ||
| "release:no-patch": "npm run build && npm publish --access public" | ||
| }, | ||
@@ -22,0 +23,0 @@ "devDependencies": { |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by30.9%
308845
- Number of package files
- increased by181.82%
62
- Lines of code
- increased by66.7%
3519
Worsened metrics
- Number of low supply chain risk alerts
- increased by100%
4
No dependency changes