@kodaris/krubble-components 1.0.2 → 1.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +275 -31
- package/dist/index.d.ts +2 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/dist/krubble.bundled.js +373 -67
- package/dist/krubble.bundled.js.map +1 -1
- package/dist/krubble.bundled.min.js +203 -44
- package/dist/krubble.bundled.min.js.map +1 -1
- package/dist/krubble.umd.js +372 -66
- package/dist/krubble.umd.js.map +1 -1
- package/dist/krubble.umd.min.js +192 -33
- package/dist/krubble.umd.min.js.map +1 -1
- package/dist/snackbar/snackbar.d.ts +71 -0
- package/dist/snackbar/snackbar.d.ts.map +1 -0
- package/dist/snackbar/snackbar.js +309 -0
- package/dist/snackbar/snackbar.js.map +1 -0
- package/package.json +1 -1
package/dist/krubble.bundled.js
CHANGED
|
@@ -3,45 +3,45 @@
|
|
|
3
3
|
* Copyright 2019 Google LLC
|
|
4
4
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
5
5
|
*/
|
|
6
|
-
const t$3=globalThis,e$7=t$3.ShadowRoot&&(void 0===t$3.ShadyCSS||t$3.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s$2=Symbol(),o$5=new WeakMap;let n$3 = class n{constructor(t,e,o){if(this._$cssResult$=true,o!==s$2)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e;}get styleSheet(){let t=this.o;const s=this.t;if(e$7&&void 0===t){const e=void 0!==s&&1===s.length;e&&(t=o$5.get(s)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&o$5.set(s,t));}return t}toString(){return this.cssText}};const r$
|
|
6
|
+
const t$3=globalThis,e$7=t$3.ShadowRoot&&(void 0===t$3.ShadyCSS||t$3.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s$2=Symbol(),o$5=new WeakMap;let n$3 = class n{constructor(t,e,o){if(this._$cssResult$=true,o!==s$2)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e;}get styleSheet(){let t=this.o;const s=this.t;if(e$7&&void 0===t){const e=void 0!==s&&1===s.length;e&&(t=o$5.get(s)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&o$5.set(s,t));}return t}toString(){return this.cssText}};const r$5=t=>new n$3("string"==typeof t?t:t+"",void 0,s$2),i$4=(t,...e)=>{const o=1===t.length?t[0]:e.reduce((e,s,o)=>e+(t=>{if(true===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(s)+t[o+1],t[0]);return new n$3(o,t,s$2)},S$1=(s,o)=>{if(e$7)s.adoptedStyleSheets=o.map(t=>t instanceof CSSStyleSheet?t:t.styleSheet);else for(const e of o){const o=document.createElement("style"),n=t$3.litNonce;void 0!==n&&o.setAttribute("nonce",n),o.textContent=e.cssText,s.appendChild(o);}},c$2=e$7?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return r$5(e)})(t):t;
|
|
7
7
|
|
|
8
8
|
/**
|
|
9
9
|
* @license
|
|
10
10
|
* Copyright 2017 Google LLC
|
|
11
11
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
12
|
-
*/const{is:i$3,defineProperty:e$6,getOwnPropertyDescriptor:h$1,getOwnPropertyNames:r$
|
|
12
|
+
*/const{is:i$3,defineProperty:e$6,getOwnPropertyDescriptor:h$1,getOwnPropertyNames:r$4,getOwnPropertySymbols:o$4,getPrototypeOf:n$2}=Object,a$1=globalThis,c$1=a$1.trustedTypes,l$2=c$1?c$1.emptyScript:"",p$2=a$1.reactiveElementPolyfillSupport,d$1=(t,s)=>t,u$1={toAttribute(t,s){switch(s){case Boolean:t=t?l$2:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t);}return t},fromAttribute(t,s){let i=t;switch(s){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t);}catch(t){i=null;}}return i}},f$1=(t,s)=>!i$3(t,s),b$1={attribute:true,type:String,converter:u$1,reflect:false,useDefault:false,hasChanged:f$1};Symbol.metadata??=Symbol("metadata"),a$1.litPropertyMetadata??=new WeakMap;let y$1 = class y extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??=[]).push(t);}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,s=b$1){if(s.state&&(s.attribute=false),this._$Ei(),this.prototype.hasOwnProperty(t)&&((s=Object.create(s)).wrapped=true),this.elementProperties.set(t,s),!s.noAccessor){const i=Symbol(),h=this.getPropertyDescriptor(t,i,s);void 0!==h&&e$6(this.prototype,t,h);}}static getPropertyDescriptor(t,s,i){const{get:e,set:r}=h$1(this.prototype,t)??{get(){return this[s]},set(t){this[s]=t;}};return {get:e,set(s){const h=e?.call(this);r?.call(this,s),this.requestUpdate(t,h,i);},configurable:true,enumerable:true}}static getPropertyOptions(t){return this.elementProperties.get(t)??b$1}static _$Ei(){if(this.hasOwnProperty(d$1("elementProperties")))return;const t=n$2(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties);}static finalize(){if(this.hasOwnProperty(d$1("finalized")))return;if(this.finalized=true,this._$Ei(),this.hasOwnProperty(d$1("properties"))){const t=this.properties,s=[...r$4(t),...o$4(t)];for(const i of s)this.createProperty(i,t[i]);}const t=this[Symbol.metadata];if(null!==t){const s=litPropertyMetadata.get(t);if(void 0!==s)for(const[t,i]of s)this.elementProperties.set(t,i);}this._$Eh=new Map;for(const[t,s]of this.elementProperties){const i=this._$Eu(t,s);void 0!==i&&this._$Eh.set(i,t);}this.elementStyles=this.finalizeStyles(this.styles);}static finalizeStyles(s){const i=[];if(Array.isArray(s)){const e=new Set(s.flat(1/0).reverse());for(const s of e)i.unshift(c$2(s));}else void 0!==s&&i.push(c$2(s));return i}static _$Eu(t,s){const i=s.attribute;return false===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=false,this.hasUpdated=false,this._$Em=null,this._$Ev();}_$Ev(){this._$ES=new Promise(t=>this.enableUpdating=t),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach(t=>t(this));}addController(t){(this._$EO??=new Set).add(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.();}removeController(t){this._$EO?.delete(t);}_$E_(){const t=new Map,s=this.constructor.elementProperties;for(const i of s.keys())this.hasOwnProperty(i)&&(t.set(i,this[i]),delete this[i]);t.size>0&&(this._$Ep=t);}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return S$1(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(true),this._$EO?.forEach(t=>t.hostConnected?.());}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach(t=>t.hostDisconnected?.());}attributeChangedCallback(t,s,i){this._$AK(t,i);}_$ET(t,s){const i=this.constructor.elementProperties.get(t),e=this.constructor._$Eu(t,i);if(void 0!==e&&true===i.reflect){const h=(void 0!==i.converter?.toAttribute?i.converter:u$1).toAttribute(s,i.type);this._$Em=t,null==h?this.removeAttribute(e):this.setAttribute(e,h),this._$Em=null;}}_$AK(t,s){const i=this.constructor,e=i._$Eh.get(t);if(void 0!==e&&this._$Em!==e){const t=i.getPropertyOptions(e),h="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:u$1;this._$Em=e;const r=h.fromAttribute(s,t.type);this[e]=r??this._$Ej?.get(e)??r,this._$Em=null;}}requestUpdate(t,s,i,e=false,h){if(void 0!==t){const r=this.constructor;if(false===e&&(h=this[t]),i??=r.getPropertyOptions(t),!((i.hasChanged??f$1)(h,s)||i.useDefault&&i.reflect&&h===this._$Ej?.get(t)&&!this.hasAttribute(r._$Eu(t,i))))return;this.C(t,s,i);} false===this.isUpdatePending&&(this._$ES=this._$EP());}C(t,s,{useDefault:i,reflect:e,wrapped:h},r){i&&!(this._$Ej??=new Map).has(t)&&(this._$Ej.set(t,r??s??this[t]),true!==h||void 0!==r)||(this._$AL.has(t)||(this.hasUpdated||i||(s=void 0),this._$AL.set(t,s)),true===e&&this._$Em!==t&&(this._$Eq??=new Set).add(t));}async _$EP(){this.isUpdatePending=true;try{await this._$ES;}catch(t){Promise.reject(t);}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[t,s]of this._$Ep)this[t]=s;this._$Ep=void 0;}const t=this.constructor.elementProperties;if(t.size>0)for(const[s,i]of t){const{wrapped:t}=i,e=this[s];true!==t||this._$AL.has(s)||void 0===e||this.C(s,void 0,i,e);}}let t=false;const s=this._$AL;try{t=this.shouldUpdate(s),t?(this.willUpdate(s),this._$EO?.forEach(t=>t.hostUpdate?.()),this.update(s)):this._$EM();}catch(s){throw t=false,this._$EM(),s}t&&this._$AE(s);}willUpdate(t){}_$AE(t){this._$EO?.forEach(t=>t.hostUpdated?.()),this.hasUpdated||(this.hasUpdated=true,this.firstUpdated(t)),this.updated(t);}_$EM(){this._$AL=new Map,this.isUpdatePending=false;}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return true}update(t){this._$Eq&&=this._$Eq.forEach(t=>this._$ET(t,this[t])),this._$EM();}updated(t){}firstUpdated(t){}};y$1.elementStyles=[],y$1.shadowRootOptions={mode:"open"},y$1[d$1("elementProperties")]=new Map,y$1[d$1("finalized")]=new Map,p$2?.({ReactiveElement:y$1}),(a$1.reactiveElementVersions??=[]).push("2.1.2");
|
|
13
13
|
|
|
14
14
|
/**
|
|
15
15
|
* @license
|
|
16
16
|
* Copyright 2017 Google LLC
|
|
17
17
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
18
18
|
*/
|
|
19
|
-
const t$2=globalThis,i$2=t$2.trustedTypes,s$1
|
|
19
|
+
const t$2=globalThis,i$2=t=>t,s$1=t$2.trustedTypes,e$5=s$1?s$1.createPolicy("lit-html",{createHTML:t=>t}):void 0,h="$lit$",o$3=`lit$${Math.random().toFixed(9).slice(2)}$`,n$1="?"+o$3,r$3=`<${n$1}>`,l$1=document,c=()=>l$1.createComment(""),a=t=>null===t||"object"!=typeof t&&"function"!=typeof t,u=Array.isArray,d=t=>u(t)||"function"==typeof t?.[Symbol.iterator],f="[ \t\n\f\r]",v=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,_=/-->/g,m$1=/>/g,p$1=RegExp(`>|${f}(?:([^\\s"'>=/]+)(${f}*=${f}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),g=/'/g,$=/"/g,y=/^(?:script|style|textarea|title)$/i,x=t=>(i,...s)=>({_$litType$:t,strings:i,values:s}),b=x(1),E=Symbol.for("lit-noChange"),A=Symbol.for("lit-nothing"),C=new WeakMap,P=l$1.createTreeWalker(l$1,129);function V(t,i){if(!u(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==e$5?e$5.createHTML(i):i}const N=(t,i)=>{const s=t.length-1,e=[];let n,l=2===i?"<svg>":3===i?"<math>":"",c=v;for(let i=0;i<s;i++){const s=t[i];let a,u,d=-1,f=0;for(;f<s.length&&(c.lastIndex=f,u=c.exec(s),null!==u);)f=c.lastIndex,c===v?"!--"===u[1]?c=_:void 0!==u[1]?c=m$1:void 0!==u[2]?(y.test(u[2])&&(n=RegExp("</"+u[2],"g")),c=p$1):void 0!==u[3]&&(c=p$1):c===p$1?">"===u[0]?(c=n??v,d=-1):void 0===u[1]?d=-2:(d=c.lastIndex-u[2].length,a=u[1],c=void 0===u[3]?p$1:'"'===u[3]?$:g):c===$||c===g?c=p$1:c===_||c===m$1?c=v:(c=p$1,n=void 0);const x=c===p$1&&t[i+1].startsWith("/>")?" ":"";l+=c===v?s+r$3:d>=0?(e.push(a),s.slice(0,d)+h+s.slice(d)+o$3+x):s+o$3+(-2===d?i:x);}return [V(t,l+(t[s]||"<?>")+(2===i?"</svg>":3===i?"</math>":"")),e]};class S{constructor({strings:t,_$litType$:i},e){let r;this.parts=[];let l=0,a=0;const u=t.length-1,d=this.parts,[f,v]=N(t,i);if(this.el=S.createElement(f,e),P.currentNode=this.el.content,2===i||3===i){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes);}for(;null!==(r=P.nextNode())&&d.length<u;){if(1===r.nodeType){if(r.hasAttributes())for(const t of r.getAttributeNames())if(t.endsWith(h)){const i=v[a++],s=r.getAttribute(t).split(o$3),e=/([.?@])?(.*)/.exec(i);d.push({type:1,index:l,name:e[2],strings:s,ctor:"."===e[1]?I:"?"===e[1]?L:"@"===e[1]?z:H}),r.removeAttribute(t);}else t.startsWith(o$3)&&(d.push({type:6,index:l}),r.removeAttribute(t));if(y.test(r.tagName)){const t=r.textContent.split(o$3),i=t.length-1;if(i>0){r.textContent=s$1?s$1.emptyScript:"";for(let s=0;s<i;s++)r.append(t[s],c()),P.nextNode(),d.push({type:2,index:++l});r.append(t[i],c());}}}else if(8===r.nodeType)if(r.data===n$1)d.push({type:2,index:l});else {let t=-1;for(;-1!==(t=r.data.indexOf(o$3,t+1));)d.push({type:7,index:l}),t+=o$3.length-1;}l++;}}static createElement(t,i){const s=l$1.createElement("template");return s.innerHTML=t,s}}function M(t,i,s=t,e){if(i===E)return i;let h=void 0!==e?s._$Co?.[e]:s._$Cl;const o=a(i)?void 0:i._$litDirective$;return h?.constructor!==o&&(h?._$AO?.(false),void 0===o?h=void 0:(h=new o(t),h._$AT(t,s,e)),void 0!==e?(s._$Co??=[])[e]=h:s._$Cl=h),void 0!==h&&(i=M(t,h._$AS(t,i.values),h,e)),i}class R{constructor(t,i){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=i;}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){const{el:{content:i},parts:s}=this._$AD,e=(t?.creationScope??l$1).importNode(i,true);P.currentNode=e;let h=P.nextNode(),o=0,n=0,r=s[0];for(;void 0!==r;){if(o===r.index){let i;2===r.type?i=new k(h,h.nextSibling,this,t):1===r.type?i=new r.ctor(h,r.name,r.strings,this,t):6===r.type&&(i=new Z(h,this,t)),this._$AV.push(i),r=s[++n];}o!==r?.index&&(h=P.nextNode(),o++);}return P.currentNode=l$1,e}p(t){let i=0;for(const s of this._$AV) void 0!==s&&(void 0!==s.strings?(s._$AI(t,s,i),i+=s.strings.length-2):s._$AI(t[i])),i++;}}class k{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(t,i,s,e){this.type=2,this._$AH=A,this._$AN=void 0,this._$AA=t,this._$AB=i,this._$AM=s,this.options=e,this._$Cv=e?.isConnected??true;}get parentNode(){let t=this._$AA.parentNode;const i=this._$AM;return void 0!==i&&11===t?.nodeType&&(t=i.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,i=this){t=M(this,t,i),a(t)?t===A||null==t||""===t?(this._$AH!==A&&this._$AR(),this._$AH=A):t!==this._$AH&&t!==E&&this._(t):void 0!==t._$litType$?this.$(t):void 0!==t.nodeType?this.T(t):d(t)?this.k(t):this._(t);}O(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.O(t));}_(t){this._$AH!==A&&a(this._$AH)?this._$AA.nextSibling.data=t:this.T(l$1.createTextNode(t)),this._$AH=t;}$(t){const{values:i,_$litType$:s}=t,e="number"==typeof s?this._$AC(t):(void 0===s.el&&(s.el=S.createElement(V(s.h,s.h[0]),this.options)),s);if(this._$AH?._$AD===e)this._$AH.p(i);else {const t=new R(e,this),s=t.u(this.options);t.p(i),this.T(s),this._$AH=t;}}_$AC(t){let i=C.get(t.strings);return void 0===i&&C.set(t.strings,i=new S(t)),i}k(t){u(this._$AH)||(this._$AH=[],this._$AR());const i=this._$AH;let s,e=0;for(const h of t)e===i.length?i.push(s=new k(this.O(c()),this.O(c()),this,this.options)):s=i[e],s._$AI(h),e++;e<i.length&&(this._$AR(s&&s._$AB.nextSibling,e),i.length=e);}_$AR(t=this._$AA.nextSibling,s){for(this._$AP?.(false,true,s);t!==this._$AB;){const s=i$2(t).nextSibling;i$2(t).remove(),t=s;}}setConnected(t){ void 0===this._$AM&&(this._$Cv=t,this._$AP?.(t));}}class H{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,i,s,e,h){this.type=1,this._$AH=A,this._$AN=void 0,this.element=t,this.name=i,this._$AM=e,this.options=h,s.length>2||""!==s[0]||""!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=A;}_$AI(t,i=this,s,e){const h=this.strings;let o=false;if(void 0===h)t=M(this,t,i,0),o=!a(t)||t!==this._$AH&&t!==E,o&&(this._$AH=t);else {const e=t;let n,r;for(t=h[0],n=0;n<h.length-1;n++)r=M(this,e[s+n],i,n),r===E&&(r=this._$AH[n]),o||=!a(r)||r!==this._$AH[n],r===A?t=A:t!==A&&(t+=(r??"")+h[n+1]),this._$AH[n]=r;}o&&!e&&this.j(t);}j(t){t===A?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"");}}class I extends H{constructor(){super(...arguments),this.type=3;}j(t){this.element[this.name]=t===A?void 0:t;}}class L extends H{constructor(){super(...arguments),this.type=4;}j(t){this.element.toggleAttribute(this.name,!!t&&t!==A);}}class z extends H{constructor(t,i,s,e,h){super(t,i,s,e,h),this.type=5;}_$AI(t,i=this){if((t=M(this,t,i,0)??A)===E)return;const s=this._$AH,e=t===A&&s!==A||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,h=t!==A&&(s===A||e);e&&this.element.removeEventListener(this.name,this,s),h&&this.element.addEventListener(this.name,this,t),this._$AH=t;}handleEvent(t){"function"==typeof this._$AH?this._$AH.call(this.options?.host??this.element,t):this._$AH.handleEvent(t);}}class Z{constructor(t,i,s){this.element=t,this.type=6,this._$AN=void 0,this._$AM=i,this.options=s;}get _$AU(){return this._$AM._$AU}_$AI(t){M(this,t);}}const B=t$2.litHtmlPolyfillSupport;B?.(S,k),(t$2.litHtmlVersions??=[]).push("3.3.2");const D=(t,i,s)=>{const e=s?.renderBefore??i;let h=e._$litPart$;if(void 0===h){const t=s?.renderBefore??null;e._$litPart$=h=new k(i.insertBefore(c(),t),t,void 0,s??{});}return h._$AI(t),h};
|
|
20
20
|
|
|
21
21
|
/**
|
|
22
22
|
* @license
|
|
23
23
|
* Copyright 2017 Google LLC
|
|
24
24
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
25
|
-
*/const s=globalThis;let i$1 = class i extends y$1{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0;}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const r=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=
|
|
25
|
+
*/const s=globalThis;let i$1 = class i extends y$1{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0;}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const r=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=D(r,this.renderRoot,this.renderOptions);}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(true);}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(false);}render(){return E}};i$1._$litElement$=true,i$1["finalized"]=true,s.litElementHydrateSupport?.({LitElement:i$1});const o$2=s.litElementPolyfillSupport;o$2?.({LitElement:i$1});(s.litElementVersions??=[]).push("4.2.2");
|
|
26
26
|
|
|
27
27
|
/**
|
|
28
28
|
* @license
|
|
29
29
|
* Copyright 2017 Google LLC
|
|
30
30
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
31
31
|
*/
|
|
32
|
-
const t$1=t=>(e,o)=>{ void 0!==o?o.addInitializer((
|
|
32
|
+
const t$1=t=>(e,o)=>{ void 0!==o?o.addInitializer(()=>{customElements.define(t,e);}):customElements.define(t,e);};
|
|
33
33
|
|
|
34
34
|
/**
|
|
35
35
|
* @license
|
|
36
36
|
* Copyright 2017 Google LLC
|
|
37
37
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
38
|
-
*/const o$1={attribute:true,type:String,converter:u$
|
|
38
|
+
*/const o$1={attribute:true,type:String,converter:u$1,reflect:false,hasChanged:f$1},r$2=(t=o$1,e,r)=>{const{kind:n,metadata:i}=r;let s=globalThis.litPropertyMetadata.get(i);if(void 0===s&&globalThis.litPropertyMetadata.set(i,s=new Map),"setter"===n&&((t=Object.create(t)).wrapped=true),s.set(r.name,t),"accessor"===n){const{name:o}=r;return {set(r){const n=e.get.call(this);e.set.call(this,r),this.requestUpdate(o,n,t,true,r);},init(e){return void 0!==e&&this.C(o,void 0,t,e),e}}}if("setter"===n){const{name:o}=r;return function(r){const n=this[o];e.call(this,r),this.requestUpdate(o,n,t,true,r);}}throw Error("Unsupported decorator location: "+n)};function n(t){return (e,o)=>"object"==typeof o?r$2(t,e,o):((t,e,o)=>{const r=e.hasOwnProperty(o);return e.constructor.createProperty(o,t),r?Object.getOwnPropertyDescriptor(e,o):void 0})(t,e,o)}
|
|
39
39
|
|
|
40
40
|
/**
|
|
41
41
|
* @license
|
|
42
42
|
* Copyright 2017 Google LLC
|
|
43
43
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
44
|
-
*/function r(r){return n({...r,state:true,attribute:false})}
|
|
44
|
+
*/function r$1(r){return n({...r,state:true,attribute:false})}
|
|
45
45
|
|
|
46
46
|
/**
|
|
47
47
|
* @license
|
|
@@ -56,7 +56,7 @@ const e$4=(e,t,c)=>(c.configurable=true,c.enumerable=true,Reflect.decorate&&"obj
|
|
|
56
56
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
57
57
|
*/function e$3(e,r){return (n,s,i)=>{const o=t=>t.renderRoot?.querySelector(e)??null;return e$4(n,s,{get(){return o(this)}})}}
|
|
58
58
|
|
|
59
|
-
var __decorate$
|
|
59
|
+
var __decorate$7 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
|
60
60
|
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
61
61
|
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
62
62
|
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;
|
|
@@ -93,7 +93,7 @@ let KRAccordion = class KRAccordion extends i$1 {
|
|
|
93
93
|
this.expanded = !this.expanded;
|
|
94
94
|
}
|
|
95
95
|
render() {
|
|
96
|
-
return
|
|
96
|
+
return b `
|
|
97
97
|
<div class="header" @click=${this.toggle}>
|
|
98
98
|
<span class="header__title">${this.header}</span>
|
|
99
99
|
<svg class="header__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
@@ -163,13 +163,13 @@ KRAccordion.styles = i$4 `
|
|
|
163
163
|
padding: 16px 16px 8px 16px;
|
|
164
164
|
}
|
|
165
165
|
`;
|
|
166
|
-
__decorate$
|
|
166
|
+
__decorate$7([
|
|
167
167
|
n({ type: String })
|
|
168
168
|
], KRAccordion.prototype, "header", void 0);
|
|
169
|
-
__decorate$
|
|
169
|
+
__decorate$7([
|
|
170
170
|
n({ type: Boolean, reflect: true })
|
|
171
171
|
], KRAccordion.prototype, "expanded", void 0);
|
|
172
|
-
KRAccordion = __decorate$
|
|
172
|
+
KRAccordion = __decorate$7([
|
|
173
173
|
t$1('kr-accordion')
|
|
174
174
|
], KRAccordion);
|
|
175
175
|
|
|
@@ -184,9 +184,9 @@ const t={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4},e$2=t=>(...e)=>({_$
|
|
|
184
184
|
* @license
|
|
185
185
|
* Copyright 2018 Google LLC
|
|
186
186
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
187
|
-
*/const e$1=e$2(class extends i{constructor(t$1){if(super(t$1),t$1.type!==t.ATTRIBUTE||"class"!==t$1.name||t$1.strings?.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(
|
|
187
|
+
*/const e$1=e$2(class extends i{constructor(t$1){if(super(t$1),t$1.type!==t.ATTRIBUTE||"class"!==t$1.name||t$1.strings?.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(s=>t[s]).join(" ")+" "}update(s,[i]){if(void 0===this.st){this.st=new Set,void 0!==s.strings&&(this.nt=new Set(s.strings.join(" ").split(/\s/).filter(t=>""!==t)));for(const t in i)i[t]&&!this.nt?.has(t)&&this.st.add(t);return this.render(i)}const r=s.element.classList;for(const t of this.st)t in i||(r.remove(t),this.st.delete(t));for(const t in i){const s=!!i[t];s===this.st.has(t)||this.nt?.has(t)||(s?(r.add(t),this.st.add(t)):(r.remove(t),this.st.delete(t)));}return E}});
|
|
188
188
|
|
|
189
|
-
var __decorate$
|
|
189
|
+
var __decorate$6 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
|
190
190
|
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
191
191
|
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
192
192
|
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;
|
|
@@ -221,12 +221,12 @@ let KRAlert = class KRAlert extends i$1 {
|
|
|
221
221
|
}
|
|
222
222
|
render() {
|
|
223
223
|
const icons = {
|
|
224
|
-
info:
|
|
225
|
-
success:
|
|
226
|
-
warning:
|
|
227
|
-
error:
|
|
224
|
+
info: b `<svg class="icon" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/></svg>`,
|
|
225
|
+
success: b `<svg class="icon" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>`,
|
|
226
|
+
warning: b `<svg class="icon" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/></svg>`,
|
|
227
|
+
error: b `<svg class="icon" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/></svg>`,
|
|
228
228
|
};
|
|
229
|
-
return
|
|
229
|
+
return b `
|
|
230
230
|
<div
|
|
231
231
|
class=${e$1({
|
|
232
232
|
'alert': true,
|
|
@@ -238,14 +238,14 @@ let KRAlert = class KRAlert extends i$1 {
|
|
|
238
238
|
${icons[this.type]}
|
|
239
239
|
<div class="content">
|
|
240
240
|
${this.header
|
|
241
|
-
?
|
|
242
|
-
:
|
|
241
|
+
? b `<h4 class="header">${this.header}</h4>`
|
|
242
|
+
: A}
|
|
243
243
|
<div class="message">
|
|
244
244
|
<slot></slot>
|
|
245
245
|
</div>
|
|
246
246
|
</div>
|
|
247
247
|
${this.dismissible
|
|
248
|
-
?
|
|
248
|
+
? b `
|
|
249
249
|
<button
|
|
250
250
|
class="dismiss"
|
|
251
251
|
type="button"
|
|
@@ -257,7 +257,7 @@ let KRAlert = class KRAlert extends i$1 {
|
|
|
257
257
|
</svg>
|
|
258
258
|
</button>
|
|
259
259
|
`
|
|
260
|
-
:
|
|
260
|
+
: A}
|
|
261
261
|
</div>
|
|
262
262
|
`;
|
|
263
263
|
}
|
|
@@ -370,23 +370,23 @@ KRAlert.styles = i$4 `
|
|
|
370
370
|
outline-offset: 2px;
|
|
371
371
|
}
|
|
372
372
|
`;
|
|
373
|
-
__decorate$
|
|
373
|
+
__decorate$6([
|
|
374
374
|
n({ type: String })
|
|
375
375
|
], KRAlert.prototype, "type", void 0);
|
|
376
|
-
__decorate$
|
|
376
|
+
__decorate$6([
|
|
377
377
|
n({ type: String })
|
|
378
378
|
], KRAlert.prototype, "header", void 0);
|
|
379
|
-
__decorate$
|
|
379
|
+
__decorate$6([
|
|
380
380
|
n({ type: Boolean })
|
|
381
381
|
], KRAlert.prototype, "dismissible", void 0);
|
|
382
|
-
__decorate$
|
|
382
|
+
__decorate$6([
|
|
383
383
|
n({ type: Boolean })
|
|
384
384
|
], KRAlert.prototype, "visible", void 0);
|
|
385
|
-
KRAlert = __decorate$
|
|
385
|
+
KRAlert = __decorate$6([
|
|
386
386
|
t$1('kr-alert')
|
|
387
387
|
], KRAlert);
|
|
388
388
|
|
|
389
|
-
var __decorate$
|
|
389
|
+
var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
|
390
390
|
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
391
391
|
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
392
392
|
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;
|
|
@@ -417,7 +417,7 @@ let KRButton = class KRButton extends i$1 {
|
|
|
417
417
|
}
|
|
418
418
|
render() {
|
|
419
419
|
const sizeClass = this.size !== 'medium' ? this.size : '';
|
|
420
|
-
return
|
|
420
|
+
return b `
|
|
421
421
|
<button
|
|
422
422
|
part="button"
|
|
423
423
|
class="${this.variant} ${sizeClass}"
|
|
@@ -503,16 +503,16 @@ KRButton.styles = i$4 `
|
|
|
503
503
|
padding: 0 24px;
|
|
504
504
|
}
|
|
505
505
|
`;
|
|
506
|
-
__decorate$
|
|
506
|
+
__decorate$5([
|
|
507
507
|
n({ type: String })
|
|
508
508
|
], KRButton.prototype, "variant", void 0);
|
|
509
|
-
__decorate$
|
|
509
|
+
__decorate$5([
|
|
510
510
|
n({ type: String })
|
|
511
511
|
], KRButton.prototype, "size", void 0);
|
|
512
|
-
__decorate$
|
|
512
|
+
__decorate$5([
|
|
513
513
|
n({ type: Boolean })
|
|
514
514
|
], KRButton.prototype, "disabled", void 0);
|
|
515
|
-
KRButton = __decorate$
|
|
515
|
+
KRButton = __decorate$5([
|
|
516
516
|
t$1('kr-button')
|
|
517
517
|
], KRButton);
|
|
518
518
|
|
|
@@ -520,9 +520,9 @@ KRButton = __decorate$4([
|
|
|
520
520
|
* @license
|
|
521
521
|
* Copyright 2017 Google LLC
|
|
522
522
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
523
|
-
*/class e extends i{constructor(i){if(super(i),this.it=
|
|
523
|
+
*/class e extends i{constructor(i){if(super(i),this.it=A,i.type!==t.CHILD)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(r){if(r===A||null==r)return this._t=void 0,this.it=r;if(r===E)return r;if("string"!=typeof r)throw Error(this.constructor.directiveName+"() called with a non-string value");if(r===this.it)return this._t;this.it=r;const s=[r];return s.raw=s,this._t={_$litType$:this.constructor.resultType,strings:s,values:[]}}}e.directiveName="unsafeHTML",e.resultType=1;const o=e$2(e);
|
|
524
524
|
|
|
525
|
-
var __decorate$
|
|
525
|
+
var __decorate$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
|
526
526
|
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
527
527
|
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
528
528
|
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;
|
|
@@ -585,7 +585,7 @@ let KRCodeDemo = class KRCodeDemo extends i$1 {
|
|
|
585
585
|
}
|
|
586
586
|
}
|
|
587
587
|
render() {
|
|
588
|
-
return
|
|
588
|
+
return b `
|
|
589
589
|
<div class="tabs">
|
|
590
590
|
<button
|
|
591
591
|
class=${e$1({ tab: true, 'tab--active': this.activeTab === 'preview' })}
|
|
@@ -778,23 +778,23 @@ KRCodeDemo.styles = i$4 `
|
|
|
778
778
|
color: #fab387;
|
|
779
779
|
}
|
|
780
780
|
`;
|
|
781
|
-
__decorate$
|
|
781
|
+
__decorate$4([
|
|
782
782
|
n({ type: String })
|
|
783
783
|
], KRCodeDemo.prototype, "language", void 0);
|
|
784
|
-
__decorate$
|
|
784
|
+
__decorate$4([
|
|
785
785
|
n({ type: String })
|
|
786
786
|
], KRCodeDemo.prototype, "code", void 0);
|
|
787
|
-
__decorate$
|
|
788
|
-
r()
|
|
787
|
+
__decorate$4([
|
|
788
|
+
r$1()
|
|
789
789
|
], KRCodeDemo.prototype, "activeTab", void 0);
|
|
790
|
-
__decorate$
|
|
791
|
-
r()
|
|
790
|
+
__decorate$4([
|
|
791
|
+
r$1()
|
|
792
792
|
], KRCodeDemo.prototype, "copied", void 0);
|
|
793
|
-
KRCodeDemo = __decorate$
|
|
793
|
+
KRCodeDemo = __decorate$4([
|
|
794
794
|
t$1('kr-code-demo')
|
|
795
795
|
], KRCodeDemo);
|
|
796
796
|
|
|
797
|
-
var __decorate$
|
|
797
|
+
var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
|
798
798
|
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
799
799
|
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
800
800
|
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;
|
|
@@ -889,17 +889,17 @@ let KRContextMenu = class KRContextMenu extends i$1 {
|
|
|
889
889
|
this.remove();
|
|
890
890
|
}
|
|
891
891
|
render() {
|
|
892
|
-
return
|
|
892
|
+
return b `
|
|
893
893
|
<div class="menu">
|
|
894
894
|
${this.items.map(item => item.divider
|
|
895
|
-
?
|
|
896
|
-
:
|
|
895
|
+
? b `<div class="menu__divider"></div>`
|
|
896
|
+
: b `
|
|
897
897
|
<button
|
|
898
898
|
class="menu__item"
|
|
899
899
|
?disabled=${item.disabled}
|
|
900
900
|
@click=${() => this.handleItemClick(item)}
|
|
901
901
|
>
|
|
902
|
-
${item.icon ?
|
|
902
|
+
${item.icon ? b `<span class="menu__item-icon">${item.icon}</span>` : null}
|
|
903
903
|
${item.label}
|
|
904
904
|
</button>
|
|
905
905
|
`)}
|
|
@@ -963,14 +963,14 @@ KRContextMenu.styles = i$4 `
|
|
|
963
963
|
margin: 4px 0;
|
|
964
964
|
}
|
|
965
965
|
`;
|
|
966
|
-
__decorate$
|
|
967
|
-
r()
|
|
966
|
+
__decorate$3([
|
|
967
|
+
r$1()
|
|
968
968
|
], KRContextMenu.prototype, "items", void 0);
|
|
969
|
-
KRContextMenu = __decorate$
|
|
969
|
+
KRContextMenu = __decorate$3([
|
|
970
970
|
t$1('kr-context-menu')
|
|
971
971
|
], KRContextMenu);
|
|
972
972
|
|
|
973
|
-
var __decorate$
|
|
973
|
+
var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
|
974
974
|
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
975
975
|
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
976
976
|
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;
|
|
@@ -1068,7 +1068,7 @@ let KRDialog = class KRDialog extends i$1 {
|
|
|
1068
1068
|
document.removeEventListener('keydown', this.boundHandleKeyDown);
|
|
1069
1069
|
}
|
|
1070
1070
|
render() {
|
|
1071
|
-
return
|
|
1071
|
+
return b `
|
|
1072
1072
|
<div class="backdrop" @click=${this.handleBackdropClick}></div>
|
|
1073
1073
|
<div class="dialog">
|
|
1074
1074
|
${this.contentElement}
|
|
@@ -1102,24 +1102,330 @@ KRDialog.styles = i$4 `
|
|
|
1102
1102
|
overflow: auto;
|
|
1103
1103
|
}
|
|
1104
1104
|
`;
|
|
1105
|
-
__decorate$
|
|
1106
|
-
r()
|
|
1105
|
+
__decorate$2([
|
|
1106
|
+
r$1()
|
|
1107
1107
|
], KRDialog.prototype, "contentElement", void 0);
|
|
1108
|
-
KRDialog = __decorate$
|
|
1108
|
+
KRDialog = __decorate$2([
|
|
1109
1109
|
t$1('kr-dialog')
|
|
1110
1110
|
], KRDialog);
|
|
1111
1111
|
|
|
1112
|
+
var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
|
1113
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
1114
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
1115
|
+
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;
|
|
1116
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
1117
|
+
};
|
|
1118
|
+
var KRSnackbar_1;
|
|
1119
|
+
/**
|
|
1120
|
+
* A snackbar component for displaying brief notification messages.
|
|
1121
|
+
*
|
|
1122
|
+
* Snackbars appear at the bottom-left of the screen and automatically
|
|
1123
|
+
* dismiss after a configurable duration. Multiple snackbars stack vertically.
|
|
1124
|
+
*
|
|
1125
|
+
* @fires dismiss - Fired when the snackbar is dismissed (manually or automatically)
|
|
1126
|
+
*
|
|
1127
|
+
* @example
|
|
1128
|
+
* ```ts
|
|
1129
|
+
* // Show a success message
|
|
1130
|
+
* KRSnackbar.show({ message: 'Item saved successfully', type: 'success' });
|
|
1131
|
+
*
|
|
1132
|
+
* // Show a message with title
|
|
1133
|
+
* KRSnackbar.show({ title: 'Upload Complete', message: 'Your file has been uploaded.', type: 'success' });
|
|
1134
|
+
*
|
|
1135
|
+
* // Show an error that stays until manually dismissed
|
|
1136
|
+
* KRSnackbar.show({ message: 'Failed to save', type: 'error', duration: 0 });
|
|
1137
|
+
* ```
|
|
1138
|
+
*/
|
|
1139
|
+
let KRSnackbar = KRSnackbar_1 = class KRSnackbar extends i$1 {
|
|
1140
|
+
constructor() {
|
|
1141
|
+
super(...arguments);
|
|
1142
|
+
this.dismissTimeout = null;
|
|
1143
|
+
/**
|
|
1144
|
+
* The snackbar type/severity. Controls the color scheme and icon.
|
|
1145
|
+
*/
|
|
1146
|
+
this.type = 'info';
|
|
1147
|
+
/**
|
|
1148
|
+
* Optional title to display above the message.
|
|
1149
|
+
*/
|
|
1150
|
+
this.title = '';
|
|
1151
|
+
/**
|
|
1152
|
+
* The message to display in the snackbar.
|
|
1153
|
+
*/
|
|
1154
|
+
this.message = '';
|
|
1155
|
+
/**
|
|
1156
|
+
* Duration in milliseconds before auto-dismiss. Set to 0 to disable auto-dismiss.
|
|
1157
|
+
* @default 5000
|
|
1158
|
+
*/
|
|
1159
|
+
this.duration = 5000;
|
|
1160
|
+
}
|
|
1161
|
+
/**
|
|
1162
|
+
* Show a snackbar with the given options.
|
|
1163
|
+
* @param options - Configuration including message, optional title, type, and duration
|
|
1164
|
+
* @returns The created snackbar element
|
|
1165
|
+
*/
|
|
1166
|
+
static show(options) {
|
|
1167
|
+
const snackbar = document.createElement('kr-snackbar');
|
|
1168
|
+
snackbar.message = options.message;
|
|
1169
|
+
snackbar.title = options.title ?? '';
|
|
1170
|
+
snackbar.type = options.type ?? 'info';
|
|
1171
|
+
if (options.duration !== undefined) {
|
|
1172
|
+
snackbar.duration = options.duration;
|
|
1173
|
+
}
|
|
1174
|
+
else if (snackbar.type === 'error') {
|
|
1175
|
+
snackbar.duration = 0;
|
|
1176
|
+
}
|
|
1177
|
+
else {
|
|
1178
|
+
snackbar.duration = 5000;
|
|
1179
|
+
}
|
|
1180
|
+
document.body.appendChild(snackbar);
|
|
1181
|
+
return snackbar;
|
|
1182
|
+
}
|
|
1183
|
+
connectedCallback() {
|
|
1184
|
+
super.connectedCallback();
|
|
1185
|
+
// Set role and type class on host
|
|
1186
|
+
this.setAttribute('role', 'alert');
|
|
1187
|
+
this.classList.add(`kr-snackbar--${this.type}`);
|
|
1188
|
+
// Add to active snackbars and update positions
|
|
1189
|
+
KRSnackbar_1.activeSnackbars.push(this);
|
|
1190
|
+
this.updatePositions();
|
|
1191
|
+
// Set up auto-dismiss
|
|
1192
|
+
if (this.duration > 0) {
|
|
1193
|
+
this.dismissTimeout = window.setTimeout(() => {
|
|
1194
|
+
this.dismiss();
|
|
1195
|
+
}, this.duration);
|
|
1196
|
+
}
|
|
1197
|
+
}
|
|
1198
|
+
disconnectedCallback() {
|
|
1199
|
+
super.disconnectedCallback();
|
|
1200
|
+
// Remove from active snackbars
|
|
1201
|
+
const index = KRSnackbar_1.activeSnackbars.indexOf(this);
|
|
1202
|
+
if (index > -1) {
|
|
1203
|
+
KRSnackbar_1.activeSnackbars.splice(index, 1);
|
|
1204
|
+
}
|
|
1205
|
+
// Update positions of remaining snackbars
|
|
1206
|
+
this.updatePositions();
|
|
1207
|
+
// Clear timeout
|
|
1208
|
+
if (this.dismissTimeout) {
|
|
1209
|
+
clearTimeout(this.dismissTimeout);
|
|
1210
|
+
}
|
|
1211
|
+
}
|
|
1212
|
+
updatePositions() {
|
|
1213
|
+
let bottomOffset = 24;
|
|
1214
|
+
for (const snackbar of KRSnackbar_1.activeSnackbars) {
|
|
1215
|
+
snackbar.style.bottom = `${bottomOffset}px`;
|
|
1216
|
+
bottomOffset += snackbar.offsetHeight + 8;
|
|
1217
|
+
}
|
|
1218
|
+
}
|
|
1219
|
+
dismiss() {
|
|
1220
|
+
if (this.dismissTimeout) {
|
|
1221
|
+
clearTimeout(this.dismissTimeout);
|
|
1222
|
+
this.dismissTimeout = null;
|
|
1223
|
+
}
|
|
1224
|
+
this.classList.add('kr-snackbar--closing');
|
|
1225
|
+
this.addEventListener('animationend', () => {
|
|
1226
|
+
this.dispatchEvent(new CustomEvent('dismiss', { bubbles: true, composed: true }));
|
|
1227
|
+
this.remove();
|
|
1228
|
+
}, { once: true });
|
|
1229
|
+
}
|
|
1230
|
+
render() {
|
|
1231
|
+
const icons = {
|
|
1232
|
+
info: b `<svg class="icon" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/></svg>`,
|
|
1233
|
+
success: b `<svg class="icon" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>`,
|
|
1234
|
+
warning: b `<svg class="icon" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/></svg>`,
|
|
1235
|
+
error: b `<svg class="icon" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/></svg>`,
|
|
1236
|
+
};
|
|
1237
|
+
return b `
|
|
1238
|
+
${icons[this.type]}
|
|
1239
|
+
<div class="content">
|
|
1240
|
+
${this.title ? b `<div class="title">${this.title}</div>` : ''}
|
|
1241
|
+
<div class="message">${this.message}</div>
|
|
1242
|
+
</div>
|
|
1243
|
+
<button
|
|
1244
|
+
class="dismiss"
|
|
1245
|
+
type="button"
|
|
1246
|
+
aria-label="Dismiss"
|
|
1247
|
+
@click=${this.dismiss}
|
|
1248
|
+
>
|
|
1249
|
+
<svg viewBox="0 0 20 20" fill="currentColor" width="16" height="16">
|
|
1250
|
+
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/>
|
|
1251
|
+
</svg>
|
|
1252
|
+
</button>
|
|
1253
|
+
`;
|
|
1254
|
+
}
|
|
1255
|
+
};
|
|
1256
|
+
KRSnackbar.styles = i$4 `
|
|
1257
|
+
:host,
|
|
1258
|
+
*,
|
|
1259
|
+
*::before,
|
|
1260
|
+
*::after {
|
|
1261
|
+
box-sizing: border-box;
|
|
1262
|
+
}
|
|
1263
|
+
|
|
1264
|
+
:host {
|
|
1265
|
+
position: fixed;
|
|
1266
|
+
left: 16px;
|
|
1267
|
+
z-index: 10000;
|
|
1268
|
+
display: flex;
|
|
1269
|
+
align-items: flex-start;
|
|
1270
|
+
gap: 12px;
|
|
1271
|
+
padding: 14px 12px 14px 16px;
|
|
1272
|
+
border-radius: 8px;
|
|
1273
|
+
border: 1px solid;
|
|
1274
|
+
border-left: 4px solid;
|
|
1275
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
1276
|
+
min-width: 280px;
|
|
1277
|
+
max-width: 400px;
|
|
1278
|
+
min-height: 48px;
|
|
1279
|
+
animation: slideIn 0.2s ease-out;
|
|
1280
|
+
}
|
|
1281
|
+
|
|
1282
|
+
@keyframes slideIn {
|
|
1283
|
+
from {
|
|
1284
|
+
opacity: 0;
|
|
1285
|
+
transform: translateX(-100%);
|
|
1286
|
+
}
|
|
1287
|
+
to {
|
|
1288
|
+
opacity: 1;
|
|
1289
|
+
transform: translateX(0);
|
|
1290
|
+
}
|
|
1291
|
+
}
|
|
1292
|
+
|
|
1293
|
+
@keyframes slideOut {
|
|
1294
|
+
from {
|
|
1295
|
+
opacity: 1;
|
|
1296
|
+
transform: translateX(0);
|
|
1297
|
+
}
|
|
1298
|
+
to {
|
|
1299
|
+
opacity: 0;
|
|
1300
|
+
transform: translateX(-100%);
|
|
1301
|
+
}
|
|
1302
|
+
}
|
|
1303
|
+
|
|
1304
|
+
:host(.kr-snackbar--closing) {
|
|
1305
|
+
animation: slideOut 0.15s ease-in forwards;
|
|
1306
|
+
}
|
|
1307
|
+
|
|
1308
|
+
/* Variants */
|
|
1309
|
+
:host(.kr-snackbar--info) {
|
|
1310
|
+
background-color: #eff6ff;
|
|
1311
|
+
border-color: #bfdbfe;
|
|
1312
|
+
border-left-color: #3b82f6;
|
|
1313
|
+
}
|
|
1314
|
+
|
|
1315
|
+
:host(.kr-snackbar--info) .icon {
|
|
1316
|
+
color: #2563eb;
|
|
1317
|
+
}
|
|
1318
|
+
|
|
1319
|
+
:host(.kr-snackbar--success) {
|
|
1320
|
+
background-color: #f0fdf4;
|
|
1321
|
+
border-color: #bbf7d0;
|
|
1322
|
+
border-left-color: #22c55e;
|
|
1323
|
+
}
|
|
1324
|
+
|
|
1325
|
+
:host(.kr-snackbar--success) .icon {
|
|
1326
|
+
color: #16a34a;
|
|
1327
|
+
}
|
|
1328
|
+
|
|
1329
|
+
:host(.kr-snackbar--warning) {
|
|
1330
|
+
background-color: #fffbeb;
|
|
1331
|
+
border-color: #fde68a;
|
|
1332
|
+
border-left-color: #f59e0b;
|
|
1333
|
+
}
|
|
1334
|
+
|
|
1335
|
+
:host(.kr-snackbar--warning) .icon {
|
|
1336
|
+
color: #d97706;
|
|
1337
|
+
}
|
|
1338
|
+
|
|
1339
|
+
:host(.kr-snackbar--error) {
|
|
1340
|
+
background-color: #fef2f2;
|
|
1341
|
+
border-color: #fecaca;
|
|
1342
|
+
border-left-color: #ef4444;
|
|
1343
|
+
}
|
|
1344
|
+
|
|
1345
|
+
:host(.kr-snackbar--error) .icon {
|
|
1346
|
+
color: #dc2626;
|
|
1347
|
+
}
|
|
1348
|
+
|
|
1349
|
+
.icon {
|
|
1350
|
+
flex-shrink: 0;
|
|
1351
|
+
width: 20px;
|
|
1352
|
+
height: 20px;
|
|
1353
|
+
margin-top: 1px;
|
|
1354
|
+
}
|
|
1355
|
+
|
|
1356
|
+
.content {
|
|
1357
|
+
flex: 1;
|
|
1358
|
+
min-width: 0;
|
|
1359
|
+
}
|
|
1360
|
+
|
|
1361
|
+
.title {
|
|
1362
|
+
font-size: 14px;
|
|
1363
|
+
font-weight: 600;
|
|
1364
|
+
color: #000000;
|
|
1365
|
+
margin: 0 0 2px 0;
|
|
1366
|
+
}
|
|
1367
|
+
|
|
1368
|
+
.message {
|
|
1369
|
+
font-size: 14px;
|
|
1370
|
+
color: #000000;
|
|
1371
|
+
margin: 0;
|
|
1372
|
+
}
|
|
1373
|
+
|
|
1374
|
+
.dismiss {
|
|
1375
|
+
flex-shrink: 0;
|
|
1376
|
+
display: flex;
|
|
1377
|
+
align-items: center;
|
|
1378
|
+
justify-content: center;
|
|
1379
|
+
width: 24px;
|
|
1380
|
+
height: 24px;
|
|
1381
|
+
padding: 0;
|
|
1382
|
+
background: none;
|
|
1383
|
+
border: none;
|
|
1384
|
+
border-radius: 4px;
|
|
1385
|
+
color: #6b7280;
|
|
1386
|
+
cursor: pointer;
|
|
1387
|
+
transition: background 0.15s ease, color 0.15s ease;
|
|
1388
|
+
}
|
|
1389
|
+
|
|
1390
|
+
.dismiss:hover {
|
|
1391
|
+
background-color: rgba(0, 0, 0, 0.05);
|
|
1392
|
+
color: #374151;
|
|
1393
|
+
}
|
|
1394
|
+
|
|
1395
|
+
.dismiss:focus-visible {
|
|
1396
|
+
outline: 2px solid #3b82f6;
|
|
1397
|
+
outline-offset: 2px;
|
|
1398
|
+
}
|
|
1399
|
+
`;
|
|
1400
|
+
/** Track active snackbars for stacking */
|
|
1401
|
+
KRSnackbar.activeSnackbars = [];
|
|
1402
|
+
__decorate$1([
|
|
1403
|
+
n({ type: String })
|
|
1404
|
+
], KRSnackbar.prototype, "type", void 0);
|
|
1405
|
+
__decorate$1([
|
|
1406
|
+
n({ type: String })
|
|
1407
|
+
], KRSnackbar.prototype, "title", void 0);
|
|
1408
|
+
__decorate$1([
|
|
1409
|
+
n({ type: String })
|
|
1410
|
+
], KRSnackbar.prototype, "message", void 0);
|
|
1411
|
+
__decorate$1([
|
|
1412
|
+
n({ type: Number })
|
|
1413
|
+
], KRSnackbar.prototype, "duration", void 0);
|
|
1414
|
+
KRSnackbar = KRSnackbar_1 = __decorate$1([
|
|
1415
|
+
t$1('kr-snackbar')
|
|
1416
|
+
], KRSnackbar);
|
|
1417
|
+
|
|
1112
1418
|
/**
|
|
1113
1419
|
* @license
|
|
1114
1420
|
* Copyright 2020 Google LLC
|
|
1115
1421
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
1116
|
-
*/const
|
|
1422
|
+
*/const r=o=>void 0===o.strings,m={},p=(o,t=m)=>o._$AH=t;
|
|
1117
1423
|
|
|
1118
1424
|
/**
|
|
1119
1425
|
* @license
|
|
1120
1426
|
* Copyright 2020 Google LLC
|
|
1121
1427
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
1122
|
-
*/const l=e$2(class extends i{constructor(r){if(super(r),r.type!==t.PROPERTY&&r.type!==t.ATTRIBUTE&&r.type!==t.BOOLEAN_ATTRIBUTE)throw Error("The `live` directive is not allowed on child or event bindings");if(!
|
|
1428
|
+
*/const l=e$2(class extends i{constructor(r$1){if(super(r$1),r$1.type!==t.PROPERTY&&r$1.type!==t.ATTRIBUTE&&r$1.type!==t.BOOLEAN_ATTRIBUTE)throw Error("The `live` directive is not allowed on child or event bindings");if(!r(r$1))throw Error("`live` bindings can only contain a single expression")}render(r){return r}update(i,[t$1]){if(t$1===E||t$1===A)return t$1;const o=i.element,l=i.name;if(i.type===t.PROPERTY){if(t$1===o[l])return E}else if(i.type===t.BOOLEAN_ATTRIBUTE){if(!!t$1===o.hasAttribute(l))return E}else if(i.type===t.ATTRIBUTE&&o.getAttribute(l)===t$1+"")return E;return p(i),t$1}});
|
|
1123
1429
|
|
|
1124
1430
|
var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
|
1125
1431
|
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
@@ -1230,13 +1536,13 @@ let KRTextField = class KRTextField extends i$1 {
|
|
|
1230
1536
|
if (this._touched && this._input && !this._input.validity.valid) {
|
|
1231
1537
|
validationMessage = this._input.validationMessage;
|
|
1232
1538
|
}
|
|
1233
|
-
return
|
|
1539
|
+
return b `
|
|
1234
1540
|
<div class="wrapper">
|
|
1235
1541
|
${this.label
|
|
1236
|
-
?
|
|
1542
|
+
? b `
|
|
1237
1543
|
<label for="input">
|
|
1238
1544
|
${this.label}
|
|
1239
|
-
${this.required ?
|
|
1545
|
+
${this.required ? b `<span class="required" aria-hidden="true">*</span>` : ''}
|
|
1240
1546
|
</label>
|
|
1241
1547
|
`
|
|
1242
1548
|
: ''}
|
|
@@ -1258,9 +1564,9 @@ let KRTextField = class KRTextField extends i$1 {
|
|
|
1258
1564
|
@blur=${this._handleBlur}
|
|
1259
1565
|
/>
|
|
1260
1566
|
${validationMessage
|
|
1261
|
-
?
|
|
1567
|
+
? b `<div class="validation-message">${validationMessage}</div>`
|
|
1262
1568
|
: this.hint
|
|
1263
|
-
?
|
|
1569
|
+
? b `<div class="hint">${this.hint}</div>`
|
|
1264
1570
|
: ''}
|
|
1265
1571
|
</div>
|
|
1266
1572
|
`;
|
|
@@ -1389,14 +1695,14 @@ __decorate([
|
|
|
1389
1695
|
e$3('input')
|
|
1390
1696
|
], KRTextField.prototype, "_input", void 0);
|
|
1391
1697
|
__decorate([
|
|
1392
|
-
r()
|
|
1698
|
+
r$1()
|
|
1393
1699
|
], KRTextField.prototype, "_touched", void 0);
|
|
1394
1700
|
__decorate([
|
|
1395
|
-
r()
|
|
1701
|
+
r$1()
|
|
1396
1702
|
], KRTextField.prototype, "_dirty", void 0);
|
|
1397
1703
|
KRTextField = __decorate([
|
|
1398
1704
|
t$1('kr-text-field')
|
|
1399
1705
|
], KRTextField);
|
|
1400
1706
|
|
|
1401
|
-
export { DialogRef, KRAccordion, KRAlert, KRButton, KRCodeDemo, KRContextMenu, KRDialog, KRTextField };
|
|
1707
|
+
export { DialogRef, KRAccordion, KRAlert, KRButton, KRCodeDemo, KRContextMenu, KRDialog, KRSnackbar, KRTextField };
|
|
1402
1708
|
//# sourceMappingURL=krubble.bundled.js.map
|