@kodaris/krubble-components 1.0.9 → 1.0.11
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 +1199 -477
- package/dist/button/button.d.ts +15 -0
- package/dist/button/button.d.ts.map +1 -1
- package/dist/button/button.js +139 -4
- package/dist/button/button.js.map +1 -1
- package/dist/form/text-field/text-field.js +2 -2
- package/dist/index.d.ts +3 -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 +1413 -57
- package/dist/krubble.bundled.js.map +1 -1
- package/dist/krubble.bundled.min.js +771 -77
- package/dist/krubble.bundled.min.js.map +1 -1
- package/dist/krubble.umd.js +1412 -56
- package/dist/krubble.umd.js.map +1 -1
- package/dist/krubble.umd.min.js +764 -70
- package/dist/krubble.umd.min.js.map +1 -1
- package/dist/table/table.d.ts +260 -0
- package/dist/table/table.d.ts.map +1 -0
- package/dist/table/table.js +1230 -0
- package/dist/table/table.js.map +1 -0
- package/dist/tabs/tabs.d.ts.map +1 -1
- package/dist/tabs/tabs.js +2 -0
- package/dist/tabs/tabs.js.map +1 -1
- package/package.json +5 -1
|
@@ -3,23 +3,23 @@
|
|
|
3
3
|
* Copyright 2019 Google LLC
|
|
4
4
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
5
5
|
*/
|
|
6
|
-
const e=globalThis,t=e.ShadowRoot&&(void 0===e.ShadyCSS||e.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,i=Symbol(),o=new WeakMap;let s=class{constructor(e,t,o){if(this._$cssResult$=!0,o!==i)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=e,this.t=t}get styleSheet(){let e=this.o;const i=this.t;if(t&&void 0===e){const t=void 0!==i&&1===i.length;t&&(e=o.get(i)),void 0===e&&((this.o=e=new CSSStyleSheet).replaceSync(this.cssText),t&&o.set(i,e))}return e}toString(){return this.cssText}};const r=(e,...t)=>{const o=1===e.length?e[0]:t.reduce((t,i,o)=>t+(e=>{if(!0===e._$cssResult$)return e.cssText;if("number"==typeof e)return e;throw Error("Value passed to 'css' function must be a 'css' function result: "+e+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(i)+e[o+1],e[0]);return new s(o,e,i)},n=t?e=>e:e=>e instanceof CSSStyleSheet?(e=>{let t="";for(const i of e.cssRules)t+=i.cssText;return(e=>new s("string"==typeof e?e:e+"",void 0,i))(t)})(e):e,{is:
|
|
6
|
+
const e=globalThis,t=e.ShadowRoot&&(void 0===e.ShadyCSS||e.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,i=Symbol(),o=new WeakMap;let s=class{constructor(e,t,o){if(this._$cssResult$=!0,o!==i)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=e,this.t=t}get styleSheet(){let e=this.o;const i=this.t;if(t&&void 0===e){const t=void 0!==i&&1===i.length;t&&(e=o.get(i)),void 0===e&&((this.o=e=new CSSStyleSheet).replaceSync(this.cssText),t&&o.set(i,e))}return e}toString(){return this.cssText}};const r=(e,...t)=>{const o=1===e.length?e[0]:t.reduce((t,i,o)=>t+(e=>{if(!0===e._$cssResult$)return e.cssText;if("number"==typeof e)return e;throw Error("Value passed to 'css' function must be a 'css' function result: "+e+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(i)+e[o+1],e[0]);return new s(o,e,i)},n=t?e=>e:e=>e instanceof CSSStyleSheet?(e=>{let t="";for(const i of e.cssRules)t+=i.cssText;return(e=>new s("string"==typeof e?e:e+"",void 0,i))(t)})(e):e,{is:l,defineProperty:a,getOwnPropertyDescriptor:d,getOwnPropertyNames:c,getOwnPropertySymbols:h,getPrototypeOf:p}=Object,u=globalThis,g=u.trustedTypes,f=g?g.emptyScript:"",b=u.reactiveElementPolyfillSupport,v=(e,t)=>e,y={toAttribute(e,t){switch(t){case Boolean:e=e?f:null;break;case Object:case Array:e=null==e?e:JSON.stringify(e)}return e},fromAttribute(e,t){let i=e;switch(t){case Boolean:i=null!==e;break;case Number:i=null===e?null:Number(e);break;case Object:case Array:try{i=JSON.parse(e)}catch(e){i=null}}return i}},m=(e,t)=>!l(e,t),_={attribute:!0,type:String,converter:y,reflect:!1,useDefault:!1,hasChanged:m};
|
|
7
7
|
/**
|
|
8
8
|
* @license
|
|
9
9
|
* Copyright 2017 Google LLC
|
|
10
10
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
11
|
-
*/Symbol.metadata??=Symbol("metadata"),u.litPropertyMetadata??=new WeakMap;let k=class extends HTMLElement{static addInitializer(e){this._$Ei(),(this.l??=[]).push(e)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(e,t=_){if(t.state&&(t.attribute=!1),this._$Ei(),this.prototype.hasOwnProperty(e)&&((t=Object.create(t)).wrapped=!0),this.elementProperties.set(e,t),!t.noAccessor){const i=Symbol(),o=this.getPropertyDescriptor(e,i,t);void 0!==o&&
|
|
11
|
+
*/Symbol.metadata??=Symbol("metadata"),u.litPropertyMetadata??=new WeakMap;let k=class extends HTMLElement{static addInitializer(e){this._$Ei(),(this.l??=[]).push(e)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(e,t=_){if(t.state&&(t.attribute=!1),this._$Ei(),this.prototype.hasOwnProperty(e)&&((t=Object.create(t)).wrapped=!0),this.elementProperties.set(e,t),!t.noAccessor){const i=Symbol(),o=this.getPropertyDescriptor(e,i,t);void 0!==o&&a(this.prototype,e,o)}}static getPropertyDescriptor(e,t,i){const{get:o,set:s}=d(this.prototype,e)??{get(){return this[t]},set(e){this[t]=e}};return{get:o,set(t){const r=o?.call(this);s?.call(this,t),this.requestUpdate(e,r,i)},configurable:!0,enumerable:!0}}static getPropertyOptions(e){return this.elementProperties.get(e)??_}static _$Ei(){if(this.hasOwnProperty(v("elementProperties")))return;const e=p(this);e.finalize(),void 0!==e.l&&(this.l=[...e.l]),this.elementProperties=new Map(e.elementProperties)}static finalize(){if(this.hasOwnProperty(v("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(v("properties"))){const e=this.properties,t=[...c(e),...h(e)];for(const i of t)this.createProperty(i,e[i])}const e=this[Symbol.metadata];if(null!==e){const t=litPropertyMetadata.get(e);if(void 0!==t)for(const[e,i]of t)this.elementProperties.set(e,i)}this._$Eh=new Map;for(const[e,t]of this.elementProperties){const i=this._$Eu(e,t);void 0!==i&&this._$Eh.set(i,e)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(e){const t=[];if(Array.isArray(e)){const i=new Set(e.flat(1/0).reverse());for(const e of i)t.unshift(n(e))}else void 0!==e&&t.push(n(e));return t}static _$Eu(e,t){const i=t.attribute;return!1===i?void 0:"string"==typeof i?i:"string"==typeof e?e.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev()}_$Ev(){this._$ES=new Promise(e=>this.enableUpdating=e),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach(e=>e(this))}addController(e){(this._$EO??=new Set).add(e),void 0!==this.renderRoot&&this.isConnected&&e.hostConnected?.()}removeController(e){this._$EO?.delete(e)}_$E_(){const e=new Map,t=this.constructor.elementProperties;for(const i of t.keys())this.hasOwnProperty(i)&&(e.set(i,this[i]),delete this[i]);e.size>0&&(this._$Ep=e)}createRenderRoot(){const i=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return((i,o)=>{if(t)i.adoptedStyleSheets=o.map(e=>e instanceof CSSStyleSheet?e:e.styleSheet);else for(const t of o){const o=document.createElement("style"),s=e.litNonce;void 0!==s&&o.setAttribute("nonce",s),o.textContent=t.cssText,i.appendChild(o)}})(i,this.constructor.elementStyles),i}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$EO?.forEach(e=>e.hostConnected?.())}enableUpdating(e){}disconnectedCallback(){this._$EO?.forEach(e=>e.hostDisconnected?.())}attributeChangedCallback(e,t,i){this._$AK(e,i)}_$ET(e,t){const i=this.constructor.elementProperties.get(e),o=this.constructor._$Eu(e,i);if(void 0!==o&&!0===i.reflect){const s=(void 0!==i.converter?.toAttribute?i.converter:y).toAttribute(t,i.type);this._$Em=e,null==s?this.removeAttribute(o):this.setAttribute(o,s),this._$Em=null}}_$AK(e,t){const i=this.constructor,o=i._$Eh.get(e);if(void 0!==o&&this._$Em!==o){const e=i.getPropertyOptions(o),s="function"==typeof e.converter?{fromAttribute:e.converter}:void 0!==e.converter?.fromAttribute?e.converter:y;this._$Em=o;const r=s.fromAttribute(t,e.type);this[o]=r??this._$Ej?.get(o)??r,this._$Em=null}}requestUpdate(e,t,i,o=!1,s){if(void 0!==e){const r=this.constructor;if(!1===o&&(s=this[e]),i??=r.getPropertyOptions(e),!((i.hasChanged??m)(s,t)||i.useDefault&&i.reflect&&s===this._$Ej?.get(e)&&!this.hasAttribute(r._$Eu(e,i))))return;this.C(e,t,i)}!1===this.isUpdatePending&&(this._$ES=this._$EP())}C(e,t,{useDefault:i,reflect:o,wrapped:s},r){i&&!(this._$Ej??=new Map).has(e)&&(this._$Ej.set(e,r??t??this[e]),!0!==s||void 0!==r)||(this._$AL.has(e)||(this.hasUpdated||i||(t=void 0),this._$AL.set(e,t)),!0===o&&this._$Em!==e&&(this._$Eq??=new Set).add(e))}async _$EP(){this.isUpdatePending=!0;try{await this._$ES}catch(e){Promise.reject(e)}const e=this.scheduleUpdate();return null!=e&&await e,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[e,t]of this._$Ep)this[e]=t;this._$Ep=void 0}const e=this.constructor.elementProperties;if(e.size>0)for(const[t,i]of e){const{wrapped:e}=i,o=this[t];!0!==e||this._$AL.has(t)||void 0===o||this.C(t,void 0,i,o)}}let e=!1;const t=this._$AL;try{e=this.shouldUpdate(t),e?(this.willUpdate(t),this._$EO?.forEach(e=>e.hostUpdate?.()),this.update(t)):this._$EM()}catch(t){throw e=!1,this._$EM(),t}e&&this._$AE(t)}willUpdate(e){}_$AE(e){this._$EO?.forEach(e=>e.hostUpdated?.()),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(e)),this.updated(e)}_$EM(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(e){return!0}update(e){this._$Eq&&=this._$Eq.forEach(e=>this._$ET(e,this[e])),this._$EM()}updated(e){}firstUpdated(e){}};k.elementStyles=[],k.shadowRootOptions={mode:"open"},k[v("elementProperties")]=new Map,k[v("finalized")]=new Map,b?.({ReactiveElement:k}),(u.reactiveElementVersions??=[]).push("2.1.2");
|
|
12
12
|
/**
|
|
13
13
|
* @license
|
|
14
14
|
* Copyright 2017 Google LLC
|
|
15
15
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
16
16
|
*/
|
|
17
|
-
const x=globalThis
|
|
17
|
+
const x=globalThis,w=e=>e,$=x.trustedTypes,C=$?$.createPolicy("lit-html",{createHTML:e=>e}):void 0,S="$lit$",E=`lit$${Math.random().toFixed(9).slice(2)}$`,A="?"+E,O=`<${A}>`,P=document,z=()=>P.createComment(""),T=e=>null===e||"object"!=typeof e&&"function"!=typeof e,L=Array.isArray,R="[ \t\n\f\r]",M=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,D=/-->/g,j=/>/g,H=RegExp(`>|${R}(?:([^\\s"'>=/]+)(${R}*=${R}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),I=/'/g,q=/"/g,B=/^(?:script|style|textarea|title)$/i,U=(e=>(t,...i)=>({_$litType$:e,strings:t,values:i}))(1),N=Symbol.for("lit-noChange"),V=Symbol.for("lit-nothing"),F=new WeakMap,W=P.createTreeWalker(P,129);function K(e,t){if(!L(e)||!e.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==C?C.createHTML(t):t}const Z=(e,t)=>{const i=e.length-1,o=[];let s,r=2===t?"<svg>":3===t?"<math>":"",n=M;for(let t=0;t<i;t++){const i=e[t];let l,a,d=-1,c=0;for(;c<i.length&&(n.lastIndex=c,a=n.exec(i),null!==a);)c=n.lastIndex,n===M?"!--"===a[1]?n=D:void 0!==a[1]?n=j:void 0!==a[2]?(B.test(a[2])&&(s=RegExp("</"+a[2],"g")),n=H):void 0!==a[3]&&(n=H):n===H?">"===a[0]?(n=s??M,d=-1):void 0===a[1]?d=-2:(d=n.lastIndex-a[2].length,l=a[1],n=void 0===a[3]?H:'"'===a[3]?q:I):n===q||n===I?n=H:n===D||n===j?n=M:(n=H,s=void 0);const h=n===H&&e[t+1].startsWith("/>")?" ":"";r+=n===M?i+O:d>=0?(o.push(l),i.slice(0,d)+S+i.slice(d)+E+h):i+E+(-2===d?t:h)}return[K(e,r+(e[i]||"<?>")+(2===t?"</svg>":3===t?"</math>":"")),o]};class X{constructor({strings:e,_$litType$:t},i){let o;this.parts=[];let s=0,r=0;const n=e.length-1,l=this.parts,[a,d]=Z(e,t);if(this.el=X.createElement(a,i),W.currentNode=this.el.content,2===t||3===t){const e=this.el.content.firstChild;e.replaceWith(...e.childNodes)}for(;null!==(o=W.nextNode())&&l.length<n;){if(1===o.nodeType){if(o.hasAttributes())for(const e of o.getAttributeNames())if(e.endsWith(S)){const t=d[r++],i=o.getAttribute(e).split(E),n=/([.?@])?(.*)/.exec(t);l.push({type:1,index:s,name:n[2],strings:i,ctor:"."===n[1]?ee:"?"===n[1]?te:"@"===n[1]?ie:J}),o.removeAttribute(e)}else e.startsWith(E)&&(l.push({type:6,index:s}),o.removeAttribute(e));if(B.test(o.tagName)){const e=o.textContent.split(E),t=e.length-1;if(t>0){o.textContent=$?$.emptyScript:"";for(let i=0;i<t;i++)o.append(e[i],z()),W.nextNode(),l.push({type:2,index:++s});o.append(e[t],z())}}}else if(8===o.nodeType)if(o.data===A)l.push({type:2,index:s});else{let e=-1;for(;-1!==(e=o.data.indexOf(E,e+1));)l.push({type:7,index:s}),e+=E.length-1}s++}}static createElement(e,t){const i=P.createElement("template");return i.innerHTML=e,i}}function Q(e,t,i=e,o){if(t===N)return t;let s=void 0!==o?i._$Co?.[o]:i._$Cl;const r=T(t)?void 0:t._$litDirective$;return s?.constructor!==r&&(s?._$AO?.(!1),void 0===r?s=void 0:(s=new r(e),s._$AT(e,i,o)),void 0!==o?(i._$Co??=[])[o]=s:i._$Cl=s),void 0!==s&&(t=Q(e,s._$AS(e,t.values),s,o)),t}class Y{constructor(e,t){this._$AV=[],this._$AN=void 0,this._$AD=e,this._$AM=t}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(e){const{el:{content:t},parts:i}=this._$AD,o=(e?.creationScope??P).importNode(t,!0);W.currentNode=o;let s=W.nextNode(),r=0,n=0,l=i[0];for(;void 0!==l;){if(r===l.index){let t;2===l.type?t=new G(s,s.nextSibling,this,e):1===l.type?t=new l.ctor(s,l.name,l.strings,this,e):6===l.type&&(t=new oe(s,this,e)),this._$AV.push(t),l=i[++n]}r!==l?.index&&(s=W.nextNode(),r++)}return W.currentNode=P,o}p(e){let t=0;for(const i of this._$AV)void 0!==i&&(void 0!==i.strings?(i._$AI(e,i,t),t+=i.strings.length-2):i._$AI(e[t])),t++}}class G{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(e,t,i,o){this.type=2,this._$AH=V,this._$AN=void 0,this._$AA=e,this._$AB=t,this._$AM=i,this.options=o,this._$Cv=o?.isConnected??!0}get parentNode(){let e=this._$AA.parentNode;const t=this._$AM;return void 0!==t&&11===e?.nodeType&&(e=t.parentNode),e}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(e,t=this){e=Q(this,e,t),T(e)?e===V||null==e||""===e?(this._$AH!==V&&this._$AR(),this._$AH=V):e!==this._$AH&&e!==N&&this._(e):void 0!==e._$litType$?this.$(e):void 0!==e.nodeType?this.T(e):(e=>L(e)||"function"==typeof e?.[Symbol.iterator])(e)?this.k(e):this._(e)}O(e){return this._$AA.parentNode.insertBefore(e,this._$AB)}T(e){this._$AH!==e&&(this._$AR(),this._$AH=this.O(e))}_(e){this._$AH!==V&&T(this._$AH)?this._$AA.nextSibling.data=e:this.T(P.createTextNode(e)),this._$AH=e}$(e){const{values:t,_$litType$:i}=e,o="number"==typeof i?this._$AC(e):(void 0===i.el&&(i.el=X.createElement(K(i.h,i.h[0]),this.options)),i);if(this._$AH?._$AD===o)this._$AH.p(t);else{const e=new Y(o,this),i=e.u(this.options);e.p(t),this.T(i),this._$AH=e}}_$AC(e){let t=F.get(e.strings);return void 0===t&&F.set(e.strings,t=new X(e)),t}k(e){L(this._$AH)||(this._$AH=[],this._$AR());const t=this._$AH;let i,o=0;for(const s of e)o===t.length?t.push(i=new G(this.O(z()),this.O(z()),this,this.options)):i=t[o],i._$AI(s),o++;o<t.length&&(this._$AR(i&&i._$AB.nextSibling,o),t.length=o)}_$AR(e=this._$AA.nextSibling,t){for(this._$AP?.(!1,!0,t);e!==this._$AB;){const t=w(e).nextSibling;w(e).remove(),e=t}}setConnected(e){void 0===this._$AM&&(this._$Cv=e,this._$AP?.(e))}}class J{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(e,t,i,o,s){this.type=1,this._$AH=V,this._$AN=void 0,this.element=e,this.name=t,this._$AM=o,this.options=s,i.length>2||""!==i[0]||""!==i[1]?(this._$AH=Array(i.length-1).fill(new String),this.strings=i):this._$AH=V}_$AI(e,t=this,i,o){const s=this.strings;let r=!1;if(void 0===s)e=Q(this,e,t,0),r=!T(e)||e!==this._$AH&&e!==N,r&&(this._$AH=e);else{const o=e;let n,l;for(e=s[0],n=0;n<s.length-1;n++)l=Q(this,o[i+n],t,n),l===N&&(l=this._$AH[n]),r||=!T(l)||l!==this._$AH[n],l===V?e=V:e!==V&&(e+=(l??"")+s[n+1]),this._$AH[n]=l}r&&!o&&this.j(e)}j(e){e===V?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,e??"")}}class ee extends J{constructor(){super(...arguments),this.type=3}j(e){this.element[this.name]=e===V?void 0:e}}class te extends J{constructor(){super(...arguments),this.type=4}j(e){this.element.toggleAttribute(this.name,!!e&&e!==V)}}class ie extends J{constructor(e,t,i,o,s){super(e,t,i,o,s),this.type=5}_$AI(e,t=this){if((e=Q(this,e,t,0)??V)===N)return;const i=this._$AH,o=e===V&&i!==V||e.capture!==i.capture||e.once!==i.once||e.passive!==i.passive,s=e!==V&&(i===V||o);o&&this.element.removeEventListener(this.name,this,i),s&&this.element.addEventListener(this.name,this,e),this._$AH=e}handleEvent(e){"function"==typeof this._$AH?this._$AH.call(this.options?.host??this.element,e):this._$AH.handleEvent(e)}}class oe{constructor(e,t,i){this.element=e,this.type=6,this._$AN=void 0,this._$AM=t,this.options=i}get _$AU(){return this._$AM._$AU}_$AI(e){Q(this,e)}}const se=x.litHtmlPolyfillSupport;se?.(X,G),(x.litHtmlVersions??=[]).push("3.3.2");const re=globalThis;
|
|
18
18
|
/**
|
|
19
19
|
* @license
|
|
20
20
|
* Copyright 2017 Google LLC
|
|
21
21
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
22
|
-
*/let ne=class extends k{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){const e=super.createRenderRoot();return this.renderOptions.renderBefore??=e.firstChild,e}update(e){const t=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(e),this._$Do=((e,t,i)=>{const o=i?.renderBefore??t;let s=o._$litPart$;if(void 0===s){const e=i?.renderBefore??null;o._$litPart$=s=new
|
|
22
|
+
*/let ne=class extends k{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){const e=super.createRenderRoot();return this.renderOptions.renderBefore??=e.firstChild,e}update(e){const t=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(e),this._$Do=((e,t,i)=>{const o=i?.renderBefore??t;let s=o._$litPart$;if(void 0===s){const e=i?.renderBefore??null;o._$litPart$=s=new G(t.insertBefore(z(),e),e,void 0,i??{})}return s._$AI(e),s})(t,this.renderRoot,this.renderOptions)}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0)}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1)}render(){return N}};ne._$litElement$=!0,ne.finalized=!0,re.litElementHydrateSupport?.({LitElement:ne});const le=re.litElementPolyfillSupport;le?.({LitElement:ne}),(re.litElementVersions??=[]).push("4.2.2");const ae=r`
|
|
23
23
|
:host,
|
|
24
24
|
*,
|
|
25
25
|
*::before,
|
|
@@ -67,7 +67,7 @@ const x=globalThis,$=e=>e,w=x.trustedTypes,A=w?w.createPolicy("lit-html",{create
|
|
|
67
67
|
* Copyright 2017 Google LLC
|
|
68
68
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
69
69
|
*/
|
|
70
|
-
function
|
|
70
|
+
function ge(e,t){return(t,i,o)=>((e,t,i)=>(i.configurable=!0,i.enumerable=!0,Reflect.decorate&&"object"!=typeof t&&Object.defineProperty(e,t,i),i))(t,i,{get(){return(t=>t.renderRoot?.querySelector(e)??null)(this)}})}var fe=function(e,t,i,o){var s,r=arguments.length,n=r<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,i,o);else for(var l=e.length-1;l>=0;l--)(s=e[l])&&(n=(r<3?s(n):r>3?s(t,i,n):s(t,i))||n);return r>3&&n&&Object.defineProperty(t,i,n),n};let be=class extends ne{constructor(){super(...arguments),this.header="",this.expanded=!1}toggle(){this.expanded=!this.expanded}render(){return U`
|
|
71
71
|
<div class="header" @click=${this.toggle}>
|
|
72
72
|
<span class="header__title">${this.header}</span>
|
|
73
73
|
<svg class="header__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
@@ -81,7 +81,7 @@ function be(e,t){return(t,i,o)=>((e,t,i)=>(i.configurable=!0,i.enumerable=!0,Ref
|
|
|
81
81
|
</div>
|
|
82
82
|
</div>
|
|
83
83
|
</div>
|
|
84
|
-
`}};
|
|
84
|
+
`}};be.styles=r`
|
|
85
85
|
:host {
|
|
86
86
|
display: block;
|
|
87
87
|
margin-bottom: 16px;
|
|
@@ -133,7 +133,7 @@ function be(e,t){return(t,i,o)=>((e,t,i)=>(i.configurable=!0,i.enumerable=!0,Ref
|
|
|
133
133
|
.content__body {
|
|
134
134
|
padding: 16px 16px 8px 16px;
|
|
135
135
|
}
|
|
136
|
-
`,fe([pe({type:String})],
|
|
136
|
+
`,fe([pe({type:String})],be.prototype,"header",void 0),fe([pe({type:Boolean,reflect:!0})],be.prototype,"expanded",void 0),be=fe([de("kr-accordion")],be);
|
|
137
137
|
/**
|
|
138
138
|
* @license
|
|
139
139
|
* Copyright 2017 Google LLC
|
|
@@ -144,19 +144,19 @@ const ve=1,ye=2,me=3,_e=4,ke=e=>(...t)=>({_$litDirective$:e,values:t});let xe=cl
|
|
|
144
144
|
* @license
|
|
145
145
|
* Copyright 2018 Google LLC
|
|
146
146
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
147
|
-
*/const
|
|
147
|
+
*/const we=ke(class extends xe{constructor(e){if(super(e),e.type!==ve||"class"!==e.name||e.strings?.length>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(e){return" "+Object.keys(e).filter(t=>e[t]).join(" ")+" "}update(e,[t]){if(void 0===this.st){this.st=new Set,void 0!==e.strings&&(this.nt=new Set(e.strings.join(" ").split(/\s/).filter(e=>""!==e)));for(const e in t)t[e]&&!this.nt?.has(e)&&this.st.add(e);return this.render(t)}const i=e.element.classList;for(const e of this.st)e in t||(i.remove(e),this.st.delete(e));for(const e in t){const o=!!t[e];o===this.st.has(e)||this.nt?.has(e)||(o?(i.add(e),this.st.add(e)):(i.remove(e),this.st.delete(e)))}return N}});var $e=function(e,t,i,o){var s,r=arguments.length,n=r<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,i,o);else for(var l=e.length-1;l>=0;l--)(s=e[l])&&(n=(r<3?s(n):r>3?s(t,i,n):s(t,i))||n);return r>3&&n&&Object.defineProperty(t,i,n),n};let Ce=class extends ne{constructor(){super(...arguments),this.type="info",this.dismissible=!1,this.visible=!0}_handleDismiss(){this.visible=!1,this.dispatchEvent(new CustomEvent("dismiss",{bubbles:!0,composed:!0}))}render(){const e={info:U`<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>`,success:U`<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>`,warning:U`<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>`,error:U`<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>`};return U`
|
|
148
148
|
<div
|
|
149
|
-
class=${
|
|
149
|
+
class=${we({alert:!0,["alert--"+this.type]:!0,"alert--hidden":!this.visible})}
|
|
150
150
|
role="alert"
|
|
151
151
|
>
|
|
152
152
|
${e[this.type]}
|
|
153
153
|
<div class="content">
|
|
154
|
-
${this.header?
|
|
154
|
+
${this.header?U`<h4 class="header">${this.header}</h4>`:V}
|
|
155
155
|
<div class="message">
|
|
156
156
|
<slot></slot>
|
|
157
157
|
</div>
|
|
158
158
|
</div>
|
|
159
|
-
${this.dismissible?
|
|
159
|
+
${this.dismissible?U`
|
|
160
160
|
<button
|
|
161
161
|
class="dismiss"
|
|
162
162
|
type="button"
|
|
@@ -167,9 +167,9 @@ const ve=1,ye=2,me=3,_e=4,ke=e=>(...t)=>({_$litDirective$:e,values:t});let xe=cl
|
|
|
167
167
|
<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"/>
|
|
168
168
|
</svg>
|
|
169
169
|
</button>
|
|
170
|
-
`:
|
|
170
|
+
`:V}
|
|
171
171
|
</div>
|
|
172
|
-
`}};
|
|
172
|
+
`}};Ce.styles=r`
|
|
173
173
|
:host {
|
|
174
174
|
display: block;
|
|
175
175
|
}
|
|
@@ -276,12 +276,23 @@ const ve=1,ye=2,me=3,_e=4,ke=e=>(...t)=>({_$litDirective$:e,values:t});let xe=cl
|
|
|
276
276
|
outline: 2px solid #3b82f6;
|
|
277
277
|
outline-offset: 2px;
|
|
278
278
|
}
|
|
279
|
-
|
|
279
|
+
`,$e([pe({type:String})],Ce.prototype,"type",void 0),$e([pe({type:String})],Ce.prototype,"header",void 0),$e([pe({type:Boolean})],Ce.prototype,"dismissible",void 0),$e([pe({type:Boolean})],Ce.prototype,"visible",void 0),Ce=$e([de("kr-alert")],Ce);var Se=function(e,t,i,o){var s,r=arguments.length,n=r<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,i,o);else for(var l=e.length-1;l>=0;l--)(s=e[l])&&(n=(r<3?s(n):r>3?s(t,i,n):s(t,i))||n);return r>3&&n&&Object.defineProperty(t,i,n),n};let Ee=class extends ne{constructor(){super(...arguments),this.variant="flat",this.color="primary",this.size="medium",this.disabled=!1,this.options=[],this._state="idle",this._stateText="",this._dropdownOpened=!1,this._dropdownAlignRight=!1,this._handleHostClick=e=>{this.options.length&&(e.stopPropagation(),this._toggleDropdown())},this._handleKeydown=e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.options.length?this._toggleDropdown():this.click()),"Escape"===e.key&&this._dropdownOpened&&(this._dropdownOpened=!1)},this._handleClickOutside=e=>{this._dropdownOpened&&!this.contains(e.target)&&(this._dropdownOpened=!1)}}connectedCallback(){super.connectedCallback(),this.setAttribute("role","button"),this.setAttribute("tabindex","0"),this.addEventListener("keydown",this._handleKeydown),this.addEventListener("click",this._handleHostClick),document.addEventListener("click",this._handleClickOutside)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",this._handleKeydown),this.removeEventListener("click",this._handleHostClick),document.removeEventListener("click",this._handleClickOutside)}_toggleDropdown(){this._dropdownOpened=!this._dropdownOpened,this._dropdownOpened&&requestAnimationFrame(()=>{const e=this.shadowRoot?.querySelector(".dropdown");if(e){const t=e.getBoundingClientRect();this._dropdownAlignRight=t.right>window.innerWidth}})}_handleOptionClick(e,t){t.stopPropagation(),this._dropdownOpened=!1,this.dispatchEvent(new CustomEvent("option-select",{detail:{id:e.id,label:e.label},bubbles:!0,composed:!0}))}showLoading(){this._clearStateTimeout(),this._state="loading",this._stateText=""}showSuccess(e="Success",t=2e3){this._clearStateTimeout(),this._state="success",this._stateText=e,this._stateTimeout=window.setTimeout(()=>this.reset(),t)}showError(e="Error",t=2e3){this._clearStateTimeout(),this._state="error",this._stateText=e,this._stateTimeout=window.setTimeout(()=>this.reset(),t)}reset(){this._clearStateTimeout(),this._state="idle",this._stateText=""}_clearStateTimeout(){this._stateTimeout&&(clearTimeout(this._stateTimeout),this._stateTimeout=void 0)}updated(e){this.classList.toggle("kr-button--loading","loading"===this._state),this.classList.toggle("kr-button--success","success"===this._state),this.classList.toggle("kr-button--error","error"===this._state),this.classList.toggle(`kr-button--${this.variant}`,!0),this.classList.toggle(`kr-button--${this.color}`,!0),this.classList.toggle("kr-button--small","small"===this.size),this.classList.toggle("kr-button--large","large"===this.size)}render(){return U`
|
|
280
280
|
<slot></slot>
|
|
281
|
-
${
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
281
|
+
${this.options.length?U`<svg class="caret" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24" fill="currentColor"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/></svg>`:V}
|
|
282
|
+
${"idle"!==this._state?U`<span class="state-overlay">
|
|
283
|
+
${"loading"===this._state?U`<span class="spinner"></span>`:this._stateText}
|
|
284
|
+
</span>`:V}
|
|
285
|
+
${this.options.length?U`
|
|
286
|
+
<div class="dropdown ${this._dropdownOpened?"dropdown--opened":""} ${this._dropdownAlignRight?"dropdown--align-right":""}">
|
|
287
|
+
${this.options.map(e=>U`
|
|
288
|
+
<button
|
|
289
|
+
class="dropdown-item"
|
|
290
|
+
@click=${t=>this._handleOptionClick(e,t)}
|
|
291
|
+
>${e.label}</button>
|
|
292
|
+
`)}
|
|
293
|
+
</div>
|
|
294
|
+
`:V}
|
|
295
|
+
`}};Ee.styles=r`
|
|
285
296
|
:host {
|
|
286
297
|
display: inline-flex;
|
|
287
298
|
position: relative;
|
|
@@ -361,7 +372,7 @@ const ve=1,ye=2,me=3,_e=4,ke=e=>(...t)=>({_$litDirective$:e,values:t});let xe=cl
|
|
|
361
372
|
/* Sizes */
|
|
362
373
|
:host(.kr-button--small) {
|
|
363
374
|
font-size: 13px;
|
|
364
|
-
height:
|
|
375
|
+
height: 26px;
|
|
365
376
|
padding: 0 16px;
|
|
366
377
|
}
|
|
367
378
|
|
|
@@ -426,43 +437,106 @@ const ve=1,ye=2,me=3,_e=4,ke=e=>(...t)=>({_$litDirective$:e,values:t});let xe=cl
|
|
|
426
437
|
height: 16px;
|
|
427
438
|
border-width: 3px;
|
|
428
439
|
}
|
|
429
|
-
|
|
440
|
+
|
|
441
|
+
/* Dropdown */
|
|
442
|
+
.dropdown {
|
|
443
|
+
position: absolute;
|
|
444
|
+
top: 100%;
|
|
445
|
+
left: 0;
|
|
446
|
+
margin-top: 4px;
|
|
447
|
+
min-width: 100%;
|
|
448
|
+
background: white;
|
|
449
|
+
border: 1px solid #9ba7b6;
|
|
450
|
+
border-radius: 8px;
|
|
451
|
+
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
|
|
452
|
+
padding: 8px 0;
|
|
453
|
+
z-index: 100;
|
|
454
|
+
display: none;
|
|
455
|
+
transform-origin: top;
|
|
456
|
+
}
|
|
457
|
+
|
|
458
|
+
.dropdown--opened {
|
|
459
|
+
display: block;
|
|
460
|
+
animation: dropdown-fade-in 150ms ease-out;
|
|
461
|
+
}
|
|
462
|
+
|
|
463
|
+
.dropdown--align-right {
|
|
464
|
+
left: auto;
|
|
465
|
+
right: 0;
|
|
466
|
+
}
|
|
467
|
+
|
|
468
|
+
@keyframes dropdown-fade-in {
|
|
469
|
+
from {
|
|
470
|
+
opacity: 0;
|
|
471
|
+
transform: translateY(-4px);
|
|
472
|
+
}
|
|
473
|
+
to {
|
|
474
|
+
opacity: 1;
|
|
475
|
+
transform: translateY(0);
|
|
476
|
+
}
|
|
477
|
+
}
|
|
478
|
+
|
|
479
|
+
.dropdown-item {
|
|
480
|
+
display: block;
|
|
481
|
+
width: 100%;
|
|
482
|
+
padding: 8px 16px;
|
|
483
|
+
text-align: left;
|
|
484
|
+
background: none;
|
|
485
|
+
border: none;
|
|
486
|
+
font-size: 14px;
|
|
487
|
+
color: #374151;
|
|
488
|
+
cursor: pointer;
|
|
489
|
+
font-family: inherit;
|
|
490
|
+
white-space: nowrap;
|
|
491
|
+
}
|
|
492
|
+
|
|
493
|
+
.dropdown-item:hover {
|
|
494
|
+
background: #f3f4f6;
|
|
495
|
+
}
|
|
496
|
+
|
|
497
|
+
/* Caret for dropdown button */
|
|
498
|
+
.caret {
|
|
499
|
+
margin-left: 4px;
|
|
500
|
+
margin-right: -6px;
|
|
501
|
+
display: flex;
|
|
502
|
+
}
|
|
503
|
+
`,Se([pe({type:String,reflect:!0})],Ee.prototype,"variant",void 0),Se([pe({type:String,reflect:!0})],Ee.prototype,"color",void 0),Se([pe({type:String,reflect:!0})],Ee.prototype,"size",void 0),Se([pe({type:Boolean,reflect:!0})],Ee.prototype,"disabled",void 0),Se([pe({type:Array})],Ee.prototype,"options",void 0),Se([ue()],Ee.prototype,"_state",void 0),Se([ue()],Ee.prototype,"_stateText",void 0),Se([ue()],Ee.prototype,"_dropdownOpened",void 0),Se([ue()],Ee.prototype,"_dropdownAlignRight",void 0),Ee=Se([de("kr-button")],Ee);
|
|
430
504
|
/**
|
|
431
505
|
* @license
|
|
432
506
|
* Copyright 2017 Google LLC
|
|
433
507
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
434
508
|
*/
|
|
435
|
-
class
|
|
509
|
+
class Ae extends xe{constructor(e){if(super(e),this.it=V,e.type!==ye)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(e){if(e===V||null==e)return this._t=void 0,this.it=e;if(e===N)return e;if("string"!=typeof e)throw Error(this.constructor.directiveName+"() called with a non-string value");if(e===this.it)return this._t;this.it=e;const t=[e];return t.raw=t,this._t={_$litType$:this.constructor.resultType,strings:t,values:[]}}}Ae.directiveName="unsafeHTML",Ae.resultType=1;const Oe=ke(Ae);var Pe=function(e,t,i,o){var s,r=arguments.length,n=r<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,i,o);else for(var l=e.length-1;l>=0;l--)(s=e[l])&&(n=(r<3?s(n):r>3?s(t,i,n):s(t,i))||n);return r>3&&n&&Object.defineProperty(t,i,n),n};let ze=class extends ne{constructor(){super(...arguments),this.language="html",this.code="",this.activeTab="preview",this.copied=!1}setTab(e){this.activeTab=e}getHighlightedCode(){return this.code?window.Prism&&window.Prism.languages[this.language]?window.Prism.highlight(this.code,window.Prism.languages[this.language],this.language):this.escapeHtml(this.code):""}escapeHtml(e){const t=document.createElement("div");return t.textContent=e,t.innerHTML}async copyCode(){if(this.code)try{await navigator.clipboard.writeText(this.code),this.copied=!0,setTimeout(()=>{this.copied=!1},2e3)}catch(e){console.error("Failed to copy code:",e)}}render(){return U`
|
|
436
510
|
<div class="tabs">
|
|
437
511
|
<button
|
|
438
|
-
class=${
|
|
512
|
+
class=${we({tab:!0,"tab--active":"preview"===this.activeTab})}
|
|
439
513
|
@click=${()=>this.setTab("preview")}
|
|
440
514
|
>
|
|
441
515
|
Preview
|
|
442
516
|
</button>
|
|
443
517
|
<button
|
|
444
|
-
class=${
|
|
518
|
+
class=${we({tab:!0,"tab--active":"code"===this.activeTab})}
|
|
445
519
|
@click=${()=>this.setTab("code")}
|
|
446
520
|
>
|
|
447
521
|
Code
|
|
448
522
|
</button>
|
|
449
523
|
</div>
|
|
450
524
|
|
|
451
|
-
<div class=${
|
|
525
|
+
<div class=${we({panel:!0,"panel--active":"preview"===this.activeTab,preview:!0})}>
|
|
452
526
|
<slot name="preview"></slot>
|
|
453
527
|
</div>
|
|
454
528
|
|
|
455
|
-
<div class=${
|
|
529
|
+
<div class=${we({panel:!0,"panel--active":"code"===this.activeTab,"code-container":!0})}>
|
|
456
530
|
<button
|
|
457
|
-
class=${
|
|
531
|
+
class=${we({"copy-btn":!0,"copy-btn--copied":this.copied})}
|
|
458
532
|
@click=${this.copyCode}
|
|
459
533
|
>
|
|
460
534
|
${this.copied?"Copied!":"Copy"}
|
|
461
535
|
</button>
|
|
462
|
-
<pre class="code"><code>${
|
|
536
|
+
<pre class="code"><code>${Oe(this.getHighlightedCode())}</code></pre>
|
|
463
537
|
</div>
|
|
464
538
|
|
|
465
|
-
`}};
|
|
539
|
+
`}};ze.styles=r`
|
|
466
540
|
:host {
|
|
467
541
|
display: block;
|
|
468
542
|
border: 1px solid #e9ecef;
|
|
@@ -622,20 +696,20 @@ class Ce extends xe{constructor(e){if(super(e),this.it=q,e.type!==ye)throw Error
|
|
|
622
696
|
.code .token.variable {
|
|
623
697
|
color: #fab387;
|
|
624
698
|
}
|
|
625
|
-
`,
|
|
699
|
+
`,Pe([pe({type:String})],ze.prototype,"language",void 0),Pe([pe({type:String})],ze.prototype,"code",void 0),Pe([ue()],ze.prototype,"activeTab",void 0),Pe([ue()],ze.prototype,"copied",void 0),ze=Pe([de("kr-code-demo")],ze);var Te=function(e,t,i,o){var s,r=arguments.length,n=r<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,i,o);else for(var l=e.length-1;l>=0;l--)(s=e[l])&&(n=(r<3?s(n):r>3?s(t,i,n):s(t,i))||n);return r>3&&n&&Object.defineProperty(t,i,n),n};let Le=class extends ne{constructor(){super(...arguments),this.items=[],this.resolvePromise=null,this.boundHandleOutsideClick=this.handleOutsideClick.bind(this),this.boundHandleKeyDown=this.handleKeyDown.bind(this)}static async open(e){const t=document.querySelector("kr-context-menu");t&&t.remove();const i=document.createElement("kr-context-menu");return document.body.appendChild(i),i.show(e)}async show(e){this.items=e.items,this.style.left=`${e.x}px`,this.style.top=`${e.y}px`,await this.updateComplete;const t=this.getBoundingClientRect();return t.right>window.innerWidth&&(this.style.left=e.x-t.width+"px"),t.bottom>window.innerHeight&&(this.style.top=e.y-t.height+"px"),requestAnimationFrame(()=>{document.addEventListener("click",this.boundHandleOutsideClick),document.addEventListener("contextmenu",this.boundHandleOutsideClick),document.addEventListener("keydown",this.boundHandleKeyDown)}),new Promise(e=>{this.resolvePromise=e})}handleOutsideClick(e){this.contains(e.target)||this.close(null)}handleKeyDown(e){"Escape"===e.key&&this.close(null)}handleItemClick(e){e.disabled||e.divider||this.close(e)}close(e){document.removeEventListener("click",this.boundHandleOutsideClick),document.removeEventListener("contextmenu",this.boundHandleOutsideClick),document.removeEventListener("keydown",this.boundHandleKeyDown),this.resolvePromise&&(this.resolvePromise(e),this.resolvePromise=null),this.remove()}render(){return U`
|
|
626
700
|
<div class="menu">
|
|
627
|
-
${this.items.map(e=>e.divider?
|
|
701
|
+
${this.items.map(e=>e.divider?U`<div class="menu__divider"></div>`:U`
|
|
628
702
|
<button
|
|
629
703
|
class="menu__item"
|
|
630
704
|
?disabled=${e.disabled}
|
|
631
705
|
@click=${()=>this.handleItemClick(e)}
|
|
632
706
|
>
|
|
633
|
-
${e.icon?
|
|
707
|
+
${e.icon?U`<span class="menu__item-icon">${e.icon}</span>`:null}
|
|
634
708
|
${e.label}
|
|
635
709
|
</button>
|
|
636
710
|
`)}
|
|
637
711
|
</div>
|
|
638
|
-
`}};
|
|
712
|
+
`}};Le.styles=r`
|
|
639
713
|
:host {
|
|
640
714
|
position: fixed;
|
|
641
715
|
z-index: 10000;
|
|
@@ -690,12 +764,12 @@ class Ce extends xe{constructor(e){if(super(e),this.it=q,e.type!==ye)throw Error
|
|
|
690
764
|
background: rgba(255, 255, 255, 0.1);
|
|
691
765
|
margin: 4px 0;
|
|
692
766
|
}
|
|
693
|
-
`,
|
|
767
|
+
`,Te([ue()],Le.prototype,"items",void 0),Le=Te([de("kr-context-menu")],Le);var Re=function(e,t,i,o){var s,r=arguments.length,n=r<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,i,o);else for(var l=e.length-1;l>=0;l--)(s=e[l])&&(n=(r<3?s(n):r>3?s(t,i,n):s(t,i))||n);return r>3&&n&&Object.defineProperty(t,i,n),n};class Me{constructor(){this.resolvePromise=null,this.dialogElement=null,this.promise=new Promise(e=>{this.resolvePromise=e})}setDialogElement(e){this.dialogElement=e}close(e){this.resolvePromise&&(this.resolvePromise(e),this.resolvePromise=null),this.dialogElement?.remove()}afterClosed(){return this.promise}}let De=class extends ne{constructor(){super(...arguments),this.contentElement=null,this.dialogRef=null,this.boundHandleKeyDown=this.handleKeyDown.bind(this)}static open(e,t){const i=document.querySelector("kr-dialog");i&&i.remove();const o=new Me,s=document.createElement("kr-dialog");o.setDialogElement(s),s.dialogRef=o;const r=new e;return r.dialogRef=o,t?.data&&(r.data=t.data),s.contentElement=r,document.body.appendChild(s),document.addEventListener("keydown",s.boundHandleKeyDown),o}handleKeyDown(e){"Escape"===e.key&&this.dialogRef?.close(void 0)}handleBackdropClick(e){e.target.classList.contains("backdrop")&&this.dialogRef?.close(void 0)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("keydown",this.boundHandleKeyDown)}render(){return U`
|
|
694
768
|
<div class="backdrop" @click=${this.handleBackdropClick}></div>
|
|
695
769
|
<div class="dialog">
|
|
696
770
|
${this.contentElement}
|
|
697
771
|
</div>
|
|
698
|
-
`}};
|
|
772
|
+
`}};De.styles=r`
|
|
699
773
|
:host {
|
|
700
774
|
position: fixed;
|
|
701
775
|
inset: 0;
|
|
@@ -720,10 +794,10 @@ class Ce extends xe{constructor(e){if(super(e),this.it=q,e.type!==ye)throw Error
|
|
|
720
794
|
max-height: 90vh;
|
|
721
795
|
overflow: auto;
|
|
722
796
|
}
|
|
723
|
-
`,
|
|
797
|
+
`,Re([ue()],De.prototype,"contentElement",void 0),De=Re([de("kr-dialog")],De);var je,He=function(e,t,i,o){var s,r=arguments.length,n=r<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,i,o);else for(var l=e.length-1;l>=0;l--)(s=e[l])&&(n=(r<3?s(n):r>3?s(t,i,n):s(t,i))||n);return r>3&&n&&Object.defineProperty(t,i,n),n};let Ie=je=class extends ne{constructor(){super(...arguments),this.dismissTimeout=null,this.type="info",this.title="",this.message="",this.duration=5e3}static show(e){const t=document.createElement("kr-snackbar");return t.message=e.message,t.title=e.title??"",t.type=e.type??"info",void 0!==e.duration?t.duration=e.duration:"error"===t.type?t.duration=0:t.duration=5e3,document.body.appendChild(t),t}connectedCallback(){super.connectedCallback(),this.setAttribute("role","alert"),this.classList.add(`kr-snackbar--${this.type}`),this.title&&this.classList.add("kr-snackbar--has-title"),je.activeSnackbars.push(this),this.updatePositions(),this.duration>0&&(this.dismissTimeout=window.setTimeout(()=>{this.dismiss()},this.duration))}disconnectedCallback(){super.disconnectedCallback();const e=je.activeSnackbars.indexOf(this);e>-1&&je.activeSnackbars.splice(e,1),this.updatePositions(),this.dismissTimeout&&clearTimeout(this.dismissTimeout)}updatePositions(){let e=24;for(const t of je.activeSnackbars)t.style.bottom=`${e}px`,e+=t.offsetHeight+8}dismiss(){this.dismissTimeout&&(clearTimeout(this.dismissTimeout),this.dismissTimeout=null),this.classList.add("kr-snackbar--closing"),this.addEventListener("animationend",()=>{this.dispatchEvent(new CustomEvent("dismiss",{bubbles:!0,composed:!0})),this.remove()},{once:!0})}render(){const e={info:U`<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>`,success:U`<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>`,warning:U`<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>`,error:U`<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>`};return U`
|
|
724
798
|
${e[this.type]}
|
|
725
799
|
<div class="content">
|
|
726
|
-
${this.title?
|
|
800
|
+
${this.title?U`<div class="title">${this.title}</div>`:""}
|
|
727
801
|
<div class="message">${this.message}</div>
|
|
728
802
|
</div>
|
|
729
803
|
<button
|
|
@@ -736,7 +810,7 @@ class Ce extends xe{constructor(e){if(super(e),this.it=q,e.type!==ye)throw Error
|
|
|
736
810
|
<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"/>
|
|
737
811
|
</svg>
|
|
738
812
|
</button>
|
|
739
|
-
`}};
|
|
813
|
+
`}};Ie.styles=r`
|
|
740
814
|
:host,
|
|
741
815
|
*,
|
|
742
816
|
*::before,
|
|
@@ -883,17 +957,17 @@ class Ce extends xe{constructor(e){if(super(e),this.it=q,e.type!==ye)throw Error
|
|
|
883
957
|
outline: 2px solid #3b82f6;
|
|
884
958
|
outline-offset: 2px;
|
|
885
959
|
}
|
|
886
|
-
`,
|
|
960
|
+
`,Ie.activeSnackbars=[],He([pe({type:String})],Ie.prototype,"type",void 0),He([pe({type:String})],Ie.prototype,"title",void 0),He([pe({type:String})],Ie.prototype,"message",void 0),He([pe({type:Number})],Ie.prototype,"duration",void 0),Ie=je=He([de("kr-snackbar")],Ie);
|
|
887
961
|
/**
|
|
888
962
|
* @license
|
|
889
963
|
* Copyright 2018 Google LLC
|
|
890
964
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
891
965
|
*/
|
|
892
|
-
const
|
|
966
|
+
const qe="important",Be=" !"+qe,Ue=ke(class extends xe{constructor(e){if(super(e),e.type!==ve||"style"!==e.name||e.strings?.length>2)throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.")}render(e){return Object.keys(e).reduce((t,i)=>{const o=e[i];return null==o?t:t+`${i=i.includes("-")?i:i.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g,"-$&").toLowerCase()}:${o};`},"")}update(e,[t]){const{style:i}=e.element;if(void 0===this.ft)return this.ft=new Set(Object.keys(t)),this.render(t);for(const e of this.ft)null==t[e]&&(this.ft.delete(e),e.includes("-")?i.removeProperty(e):i[e]=null);for(const e in t){const o=t[e];if(null!=o){this.ft.add(e);const t="string"==typeof o&&o.endsWith(Be);e.includes("-")||t?i.setProperty(e,t?o.slice(0,-11):o,t?qe:""):i[e]=o}}return N}});var Ne=function(e,t,i,o){var s,r=arguments.length,n=r<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,i,o);else for(var l=e.length-1;l>=0;l--)(s=e[l])&&(n=(r<3?s(n):r>3?s(t,i,n):s(t,i))||n);return r>3&&n&&Object.defineProperty(t,i,n),n};let Ve=class extends ne{constructor(){super(...arguments),this.justified=!1,this.size="medium"}updated(e){e.has("activeTabId")&&this._updateActiveTab()}firstUpdated(){this._updateActiveTab()}_getTabs(){return Array.from(this.querySelectorAll("kr-tab"))}_updateActiveTab(){const e=this._getTabs();0!==e.length&&(this.activeTabId||(this.activeTabId=e[0]?.id),e.forEach(e=>{e.active=e.id===this.activeTabId}),this.requestUpdate())}_handleTabClick(e){e.disabled||(this.activeTabId=e.id,this.dispatchEvent(new CustomEvent("tab-change",{detail:{activeTabId:e.id},bubbles:!0,composed:!0})))}_handleTabDismiss(e,t){t.stopPropagation(),this.dispatchEvent(new CustomEvent("tab-dismiss",{detail:{tabId:e.id},bubbles:!0,composed:!0}))}_handleKeyDown(e){const t=this._getTabs().filter(e=>!e.disabled),i=t.findIndex(e=>e.id===this.activeTabId);let o=-1;switch(e.key){case"ArrowLeft":o=i>0?i-1:t.length-1;break;case"ArrowRight":o=i<t.length-1?i+1:0;break;case"Home":o=0;break;case"End":o=t.length-1}if(o>=0){e.preventDefault();const i=t[o];this.activeTabId=i.id,this.dispatchEvent(new CustomEvent("tab-change",{detail:{activeTabId:i.id},bubbles:!0,composed:!0}));const s=this.shadowRoot?.querySelectorAll(".label"),r=Array.from(s||[]).find(e=>e.getAttribute("data-tab-id")===i.id);r?.focus()}}_renderTabIcon(e){const t=e.getIconElement();if(!t)return V;const i=t.cloneNode(!0);return i.removeAttribute("slot"),U`<span class="label-icon">${i}</span>`}render(){return U`
|
|
893
967
|
<div class="header" role="tablist" @keydown=${this._handleKeyDown}>
|
|
894
|
-
${this._getTabs().map(e=>
|
|
968
|
+
${this._getTabs().map(e=>U`
|
|
895
969
|
<button
|
|
896
|
-
class=${
|
|
970
|
+
class=${we({label:!0,"label--active":e.id===this.activeTabId,"label--justified":this.justified})}
|
|
897
971
|
role="tab"
|
|
898
972
|
data-tab-id=${e.id}
|
|
899
973
|
aria-selected=${e.id===this.activeTabId}
|
|
@@ -904,8 +978,8 @@ const Be="important",Ue=" !"+Be,Ve=ke(class extends xe{constructor(e){if(super(e
|
|
|
904
978
|
>
|
|
905
979
|
${this._renderTabIcon(e)}
|
|
906
980
|
<span>${e.title}</span>
|
|
907
|
-
${e.badge?
|
|
908
|
-
${e.dismissible?
|
|
981
|
+
${e.badge?U`<span class="label-badge" style=${Ue({backgroundColor:e.badgeBackground,color:e.badgeColor})}>${e.badge}</span>`:V}
|
|
982
|
+
${e.dismissible?U`
|
|
909
983
|
<button
|
|
910
984
|
class="label-dismiss"
|
|
911
985
|
type="button"
|
|
@@ -914,21 +988,23 @@ const Be="important",Ue=" !"+Be,Ve=ke(class extends xe{constructor(e){if(super(e
|
|
|
914
988
|
>
|
|
915
989
|
<svg viewBox="0 0 20 20" fill="currentColor" width="12" height="12"><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"/></svg>
|
|
916
990
|
</button>
|
|
917
|
-
`:
|
|
991
|
+
`:V}
|
|
918
992
|
</button>
|
|
919
993
|
`)}
|
|
920
994
|
</div>
|
|
921
995
|
<div class="content" role="tabpanel" aria-labelledby=${this.activeTabId||""}>
|
|
922
996
|
<slot @slotchange=${this._updateActiveTab}></slot>
|
|
923
997
|
</div>
|
|
924
|
-
`}};
|
|
998
|
+
`}};Ve.styles=[ae,r`
|
|
925
999
|
:host {
|
|
926
1000
|
display: flex;
|
|
927
1001
|
flex-direction: column;
|
|
928
1002
|
}
|
|
929
1003
|
|
|
930
1004
|
.header {
|
|
1005
|
+
height: 44px;
|
|
931
1006
|
display: flex;
|
|
1007
|
+
flex-shrink: 0;
|
|
932
1008
|
align-items: stretch;
|
|
933
1009
|
border-bottom: 1px solid #e5e7eb;
|
|
934
1010
|
overflow-x: auto;
|
|
@@ -1051,7 +1127,7 @@ const Be="important",Ue=" !"+Be,Ve=ke(class extends xe{constructor(e){if(super(e
|
|
|
1051
1127
|
::slotted(kr-tab[active]) {
|
|
1052
1128
|
display: block;
|
|
1053
1129
|
}
|
|
1054
|
-
`],Ne([pe({type:String,attribute:"active-tab-id"})],
|
|
1130
|
+
`],Ne([pe({type:String,attribute:"active-tab-id"})],Ve.prototype,"activeTabId",void 0),Ne([pe({type:Boolean})],Ve.prototype,"justified",void 0),Ne([pe({type:String,reflect:!0})],Ve.prototype,"size",void 0),Ve=Ne([de("kr-tab-group")],Ve);var Fe=function(e,t,i,o){var s,r=arguments.length,n=r<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,i,o);else for(var l=e.length-1;l>=0;l--)(s=e[l])&&(n=(r<3?s(n):r>3?s(t,i,n):s(t,i))||n);return r>3&&n&&Object.defineProperty(t,i,n),n};let We=class extends ne{constructor(){super(...arguments),this.id="",this.title="",this.badge="",this.badgeBackground="",this.badgeColor="",this.disabled=!1,this.dismissible=!1,this.active=!1}getIconElement(){return this.querySelector('[slot="icon"]')}render(){return U`<slot></slot>`}};We.styles=[ae,r`
|
|
1055
1131
|
:host {
|
|
1056
1132
|
display: none;
|
|
1057
1133
|
}
|
|
@@ -1059,13 +1135,631 @@ const Be="important",Ue=" !"+Be,Ve=ke(class extends xe{constructor(e){if(super(e
|
|
|
1059
1135
|
:host([active]) {
|
|
1060
1136
|
display: block;
|
|
1061
1137
|
}
|
|
1062
|
-
`],
|
|
1138
|
+
`],Fe([pe({type:String,reflect:!0})],We.prototype,"id",void 0),Fe([pe({type:String})],We.prototype,"title",void 0),Fe([pe({type:String})],We.prototype,"badge",void 0),Fe([pe({type:String,attribute:"badge-background"})],We.prototype,"badgeBackground",void 0),Fe([pe({type:String,attribute:"badge-color"})],We.prototype,"badgeColor",void 0),Fe([pe({type:Boolean})],We.prototype,"disabled",void 0),Fe([pe({type:Boolean})],We.prototype,"dismissible",void 0),Fe([pe({type:Boolean,reflect:!0})],We.prototype,"active",void 0),We=Fe([de("kr-tab")],We);var Ke=function(e,t,i,o){var s,r=arguments.length,n=r<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,i,o);else for(var l=e.length-1;l>=0;l--)(s=e[l])&&(n=(r<3?s(n):r>3?s(t,i,n):s(t,i))||n);return r>3&&n&&Object.defineProperty(t,i,n),n};const Ze=['"',"+","-","&&","||","!","(",")","{","}","[","]","^","~","*","?",":"],Xe=['\\"',"\\+","\\-","\\&\\&","\\|\\|","\\!","\\(","\\)","\\{","\\}","\\[","\\]","\\^","\\~","\\*","\\?","\\:"];function Qe(e){let t=e;for(let e=0;e<Ze.length;e++)t=t.split(Ze[e]).join(Xe[e]);return t}let Ye=class extends ne{constructor(){super(...arguments),this._scrollStyle="overlay",this._data=[],this._dataState="idle",this._page=1,this._pageSize=50,this._totalItems=0,this._totalPages=0,this._searchQuery="",this._canScrollLeft=!1,this._canScrollRight=!1,this._canScrollHorizontal=!1,this._columnPickerOpen=!1,this._displayedColumns=[],this._widthsLocked=!1,this._resizing=null,this._resizeObserver=null,this._searchPositionLocked=!1,this._def={columns:[]},this.def={columns:[]},this._handleClickOutsideColumnPicker=e=>{if(!this._columnPickerOpen)return;const t=e.composedPath(),i=this.shadowRoot?.querySelector(".column-picker-wrapper");i&&!t.includes(i)&&(this._columnPickerOpen=!1)},this._handleResizeMove=e=>{if(!this._resizing)return;const t=this._def.columns.find(e=>e.id===this._resizing.columnId);if(t){const i=this._resizing.startWidth+(e.clientX-this._resizing.startX);t.width=`${Math.min(900,Math.max(50,i))}px`,this.requestUpdate()}},this._handleResizeEnd=()=>{this._resizing=null,document.removeEventListener("mousemove",this._handleResizeMove),document.removeEventListener("mouseup",this._handleResizeEnd)}}connectedCallback(){super.connectedCallback(),this.classList.toggle("kr-table--scroll-overlay","overlay"===this._scrollStyle),this.classList.toggle("kr-table--scroll-edge","edge"===this._scrollStyle),this._fetch(),this._initRefresh(),document.addEventListener("click",this._handleClickOutsideColumnPicker),this._resizeObserver=new ResizeObserver(()=>{this._searchPositionLocked=!1,this._updateSearchPosition()}),this._resizeObserver.observe(this)}disconnectedCallback(){super.disconnectedCallback(),clearInterval(this._refreshTimer),document.removeEventListener("click",this._handleClickOutsideColumnPicker),this._resizeObserver?.disconnect()}willUpdate(e){e.has("def")&&(this._def={...this.def,columns:this.def.columns.map(e=>"actions"===e.type?{...e,sticky:"right",resizable:!1}:{...e})},this._displayedColumns=this._def.displayedColumns||this._def.columns.map(e=>e.id),this._widthsLocked=!1,this.classList.remove("kr-table--widths-locked"),this._fetch(),this._initRefresh())}updated(e){this._updateScrollFlags()}refresh(){this._fetch()}goToPrevPage(){this._page>1&&(this._page--,this._fetch())}goToNextPage(){this._page<this._totalPages&&(this._page++,this._fetch())}goToPage(e){e>=1&&e<=this._totalPages&&(this._page=e,this._fetch())}_fetch(){if(!this._def.dataSource)return;let e;switch(this._dataState="loading",this._def.dataSource.mode){case"opensearch":throw Error("Opensearch not supported yet");case"db":throw Error("DB not supported yet");default:e={page:this._page-1,size:this._pageSize,sorts:[],filterFields:[],queryFields:[],facetFields:[]},this._searchQuery?.trim().length&&e.queryFields.push({name:"_text_",operation:"IS",value:Qe(this._searchQuery)})}this._def.dataSource.fetch(e).then(e=>{switch(this._def.dataSource?.mode){case"opensearch":throw Error("Opensearch not supported yet");case"db":throw Error("DB not supported yet");default:{const t=e;this._data=t.data.content,this._totalItems=t.data.totalElements,this._totalPages=t.data.totalPages,this._pageSize=t.data.size}}this._dataState="success",this._updateSearchPosition(),this._widthsLocked||this._lockColumnWidths()}).catch(e=>{this._dataState="error",Ie.show({message:e instanceof Error?e.message:"Failed to load data",type:"error"})})}_initRefresh(){clearInterval(this._refreshTimer),this._def.refreshInterval&&this._def.refreshInterval>0&&(this._refreshTimer=window.setInterval(()=>{this._fetch()},this._def.refreshInterval))}_handleSearch(e){const t=e.target;this._searchQuery=t.value,this._page=1,this._fetch()}_measureTextWidth(e,t){const i=document.createElement("canvas").getContext("2d");return i.font=t,i.measureText(e).width}_lockColumnWidths(){this.updateComplete.then(()=>{requestAnimationFrame(()=>{const e=this.shadowRoot?.querySelector(".header-cell"),t=this.shadowRoot?.querySelector(".cell");if(!e)return;const i=getComputedStyle(e),o=`${i.fontWeight} ${i.fontSize} ${i.fontFamily}`,s=parseFloat(i.paddingLeft)+parseFloat(i.paddingRight),r=t?getComputedStyle(t):i,n=`${r.fontWeight} ${r.fontSize} ${r.fontFamily}`,l=t?parseFloat(r.paddingLeft)+parseFloat(r.paddingRight):s;this.getDisplayedColumns().forEach(e=>{if(!e.width){let t;if(e.render){const i=this.shadowRoot?.querySelector(`.cell[data-column-id="${e.id}"]`);t=i?i.scrollWidth:150}else{const i=e.label??e.id,r=this._measureTextWidth(i,o)+s;let a=0;for(const t of this._data){const i=t[e.id];if(null!=i){const e=this._measureTextWidth(String(i),n)+l;e>a&&(a=e)}}t=Math.ceil(Math.max(r,a))}e.width=`${Math.max(t,150)}px`}}),this._widthsLocked=!0,this.classList.add("kr-table--widths-locked"),this.requestUpdate()})})}_updateSearchPosition(){if(this._searchPositionLocked)return;const e=this.shadowRoot?.querySelector(".search"),t=e?.querySelector(".search-field");e&&t&&(e.style.justifyContent="center",t.style.marginLeft="",requestAnimationFrame(()=>{const i=e.getBoundingClientRect(),o=t.getBoundingClientRect().left-i.left;e.style.justifyContent="flex-start",t.style.marginLeft=`${o}px`,this._searchPositionLocked=!0}))}_toggleColumnPicker(){this._columnPickerOpen=!this._columnPickerOpen}_toggleColumn(e){this._displayedColumns.includes(e)?this._displayedColumns=this._displayedColumns.filter(t=>t!==e):this._displayedColumns=[...this._displayedColumns,e]}getDisplayedColumns(){return this._displayedColumns.map(e=>this._def.columns.find(t=>t.id===e)).sort((e,t)=>"actions"===e.type&&"actions"!==t.type?1:"actions"!==e.type&&"actions"===t.type?-1:0)}_handleScroll(e){const t=e.target;this._canScrollLeft=t.scrollLeft>0,this._canScrollRight=t.scrollLeft<t.scrollWidth-t.clientWidth-1}_updateScrollFlags(){const e=this.shadowRoot?.querySelector(".content");e&&(this._canScrollLeft=e.scrollLeft>0,this._canScrollRight=e.scrollWidth>e.clientWidth&&e.scrollLeft<e.scrollWidth-e.clientWidth-1,this._canScrollHorizontal=e.scrollWidth>e.clientWidth),this.classList.toggle("kr-table--scroll-left-available",this._canScrollLeft),this.classList.toggle("kr-table--scroll-right-available",this._canScrollRight),this.classList.toggle("kr-table--scroll-horizontal-available",this._canScrollHorizontal),this.classList.toggle("kr-table--sticky-left",this.getDisplayedColumns().some(e=>"left"===e.sticky)),this.classList.toggle("kr-table--sticky-right",this.getDisplayedColumns().some(e=>"right"===e.sticky))}_handleResizeStart(e,t){e.preventDefault();const i=this.shadowRoot?.querySelector(`.header-cell[data-column-id="${t}"]`);this._resizing={columnId:t,startX:e.clientX,startWidth:i?.offsetWidth||200},document.addEventListener("mousemove",this._handleResizeMove),document.addEventListener("mouseup",this._handleResizeEnd)}_handleAction(e){this.dispatchEvent(new CustomEvent("action",{detail:{action:e.id},bubbles:!0,composed:!0}))}_renderCellContent(e,t){const i=t[e.id];if(e.render){const i=e.render(t);return"string"==typeof i?Oe(i):i}if(null==i)return"";switch(e.type){case"number":return"number"==typeof i?i.toLocaleString():String(i);case"currency":return"number"==typeof i?i.toLocaleString("en-US",{style:"currency",currency:"USD"}):String(i);case"date":return i instanceof Date?i.toLocaleDateString():new Date(i).toLocaleDateString();case"boolean":return!0===i?"Yes":!1===i?"No":"";default:return String(i)}}_getHeaderCellClasses(e,t){return{"header-cell":!0,"header-cell--align-center":"center"===e.align,"header-cell--align-right":"right"===e.align,"header-cell--sticky-left":"left"===e.sticky,"header-cell--sticky-left-last":"left"===e.sticky&&!this.getDisplayedColumns().slice(t+1).some(e=>"left"===e.sticky),"header-cell--sticky-right":"right"===e.sticky,"header-cell--sticky-right-first":"right"===e.sticky&&!this.getDisplayedColumns().slice(0,t).some(e=>"right"===e.sticky)}}_getCellClasses(e,t){return{cell:!0,"cell--align-center":"center"===e.align,"cell--align-right":"right"===e.align,"cell--sticky-left":"left"===e.sticky,"cell--sticky-left-last":"left"===e.sticky&&!this.getDisplayedColumns().slice(t+1).some(e=>"left"===e.sticky),"cell--sticky-right":"right"===e.sticky,"cell--sticky-right-first":"right"===e.sticky&&!this.getDisplayedColumns().slice(0,t).some(e=>"right"===e.sticky)}}_getCellStyle(e,t){const i={};if("left"===e.sticky){let e=0;for(let i=0;i<t;i++){const t=this.getDisplayedColumns()[i];"left"===t.sticky&&(e+=parseInt(t.width||"0",10))}i.left=`${e}px`}if("right"===e.sticky){let e=0;for(let i=t+1;i<this.getDisplayedColumns().length;i++){const t=this.getDisplayedColumns()[i];"right"===t.sticky&&(e+=parseInt(t.width||"0",10))}i.right=`${e}px`}return i}_renderPagination(){const e=(this._page-1)*this._pageSize+1,t=Math.min(this._page*this._pageSize,this._totalItems);return U`
|
|
1139
|
+
<div class="pagination">
|
|
1140
|
+
<span
|
|
1141
|
+
class="pagination-icon ${1===this._page?"pagination-icon--disabled":""}"
|
|
1142
|
+
@click=${this.goToPrevPage}
|
|
1143
|
+
>
|
|
1144
|
+
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>
|
|
1145
|
+
</span>
|
|
1146
|
+
<span class="pagination-info">${e}-${t} of ${this._totalItems}</span>
|
|
1147
|
+
<span
|
|
1148
|
+
class="pagination-icon ${this._page===this._totalPages?"pagination-icon--disabled":""}"
|
|
1149
|
+
@click=${this.goToNextPage}
|
|
1150
|
+
>
|
|
1151
|
+
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
|
|
1152
|
+
</span>
|
|
1153
|
+
</div>
|
|
1154
|
+
`}_renderHeader(){return!this._def.title&&!this._def.actions?.length&&this._totalPages<=1?V:U`
|
|
1155
|
+
<div class="header">
|
|
1156
|
+
<div class="title">${this._def.title??""}</div>
|
|
1157
|
+
<div class="search">
|
|
1158
|
+
<!-- TODO: Saved views dropdown
|
|
1159
|
+
<div class="views">
|
|
1160
|
+
<span>Default View</span>
|
|
1161
|
+
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/></svg>
|
|
1162
|
+
</div>
|
|
1163
|
+
-->
|
|
1164
|
+
<div class="search-field">
|
|
1165
|
+
<svg class="search-icon" viewBox="0 -960 960 960" fill="currentColor"><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/></svg>
|
|
1166
|
+
<input
|
|
1167
|
+
type="text"
|
|
1168
|
+
class="search-input"
|
|
1169
|
+
placeholder="Search..."
|
|
1170
|
+
.value=${this._searchQuery}
|
|
1171
|
+
@input=${this._handleSearch}
|
|
1172
|
+
/>
|
|
1173
|
+
</div>
|
|
1174
|
+
</div>
|
|
1175
|
+
<div class="tools">
|
|
1176
|
+
${this._renderPagination()}
|
|
1177
|
+
<span class="refresh" title="Refresh" @click=${()=>this.refresh()}>
|
|
1178
|
+
<svg viewBox="0 -960 960 960" fill="currentColor"><path d="M480-160q-134 0-227-93t-93-227q0-134 93-227t227-93q69 0 132 28.5T720-690v-110h80v280H520v-80h168q-32-56-87.5-88T480-720q-100 0-170 70t-70 170q0 100 70 170t170 70q77 0 139-44t87-116h84q-28 106-114 173t-196 67Z"/></svg>
|
|
1179
|
+
</span>
|
|
1180
|
+
<div class="column-picker-wrapper">
|
|
1181
|
+
<span class="header-icon" title="Columns" @click=${this._toggleColumnPicker}>
|
|
1182
|
+
<svg viewBox="0 -960 960 960" fill="currentColor"><path d="M121-280v-400q0-33 23.5-56.5T201-760h559q33 0 56.5 23.5T840-680v400q0 33-23.5 56.5T760-200H201q-33 0-56.5-23.5T121-280Zm79 0h133v-400H200v400Zm213 0h133v-400H413v400Zm213 0h133v-400H626v400Z"/></svg>
|
|
1183
|
+
</span>
|
|
1184
|
+
<div class="column-picker ${this._columnPickerOpen?"open":""}">
|
|
1185
|
+
${[...this._def.columns].filter(e=>"actions"!==e.type).sort((e,t)=>(e.label??e.id).localeCompare(t.label??t.id)).map(e=>U`
|
|
1186
|
+
<div class="column-picker-item" @click=${()=>this._toggleColumn(e.id)}>
|
|
1187
|
+
<div class="column-picker-checkbox ${this._displayedColumns.includes(e.id)?"checked":""}">
|
|
1188
|
+
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
|
|
1189
|
+
</div>
|
|
1190
|
+
<span class="column-picker-label">${e.label??e.id}</span>
|
|
1191
|
+
</div>
|
|
1192
|
+
`)}
|
|
1193
|
+
</div>
|
|
1194
|
+
</div>
|
|
1195
|
+
${1===this._def.actions?.length?U`
|
|
1196
|
+
<kr-button
|
|
1197
|
+
class="actions"
|
|
1198
|
+
@click=${()=>this._handleAction(this._def.actions[0])}
|
|
1199
|
+
>
|
|
1200
|
+
${this._def.actions[0].label}
|
|
1201
|
+
</kr-button>
|
|
1202
|
+
`:this._def.actions?.length?U`
|
|
1203
|
+
<kr-button
|
|
1204
|
+
class="actions"
|
|
1205
|
+
.options=${this._def.actions.map(e=>({id:e.id,label:e.label}))}
|
|
1206
|
+
@option-select=${e=>this._handleAction({id:e.detail.id,label:e.detail.label})}
|
|
1207
|
+
>
|
|
1208
|
+
Actions
|
|
1209
|
+
</kr-button>
|
|
1210
|
+
`:V}
|
|
1211
|
+
</div>
|
|
1212
|
+
</div>
|
|
1213
|
+
`}_renderStatus(){return"loading"===this._dataState&&0===this._data.length?U`<div class="status">Loading...</div>`:"error"===this._dataState&&0===this._data.length?U`<div class="status status--error">Error loading data</div>`:0===this._data.length?U`<div class="status">No data available</div>`:V}_getGridTemplateColumns(){const e=this.getDisplayedColumns(),t=e.map((e,t)=>e.sticky?-1:t).filter(e=>e>=0).pop();return e.map((e,i)=>i===t&&this._widthsLocked?`minmax(${e.width||"auto"}, 1fr)`:e.width||"auto").join(" ")}_renderTable(){return U`
|
|
1214
|
+
<div class="wrapper">
|
|
1215
|
+
<div class="overlay-left"></div>
|
|
1216
|
+
<div class="overlay-right"></div>
|
|
1217
|
+
${this._renderStatus()}
|
|
1218
|
+
<div class="content" @scroll=${this._handleScroll}>
|
|
1219
|
+
<div class="table" style="grid-template-columns: ${this._getGridTemplateColumns()}">
|
|
1220
|
+
<div class="header-row">
|
|
1221
|
+
${this.getDisplayedColumns().map((e,t)=>U`
|
|
1222
|
+
<div
|
|
1223
|
+
class=${we(this._getHeaderCellClasses(e,t))}
|
|
1224
|
+
style=${Ue(this._getCellStyle(e,t))}
|
|
1225
|
+
data-column-id=${e.id}
|
|
1226
|
+
>${e.label??e.id}${!1!==e.resizable?U`<div
|
|
1227
|
+
class="header-cell__resize"
|
|
1228
|
+
@mousedown=${t=>this._handleResizeStart(t,e.id)}
|
|
1229
|
+
></div>`:V}</div>
|
|
1230
|
+
`)}
|
|
1231
|
+
</div>
|
|
1232
|
+
${this._data.map(e=>U`
|
|
1233
|
+
<div class="row">
|
|
1234
|
+
${this.getDisplayedColumns().map((t,i)=>U`
|
|
1235
|
+
<div
|
|
1236
|
+
class=${we(this._getCellClasses(t,i))}
|
|
1237
|
+
style=${Ue(this._getCellStyle(t,i))}
|
|
1238
|
+
data-column-id=${t.id}
|
|
1239
|
+
>
|
|
1240
|
+
${this._renderCellContent(t,e)}
|
|
1241
|
+
</div>
|
|
1242
|
+
`)}
|
|
1243
|
+
</div>
|
|
1244
|
+
`)}
|
|
1245
|
+
</div>
|
|
1246
|
+
</div>
|
|
1247
|
+
</div>
|
|
1248
|
+
`}render(){return this._def.columns.length?U`
|
|
1249
|
+
${this._renderHeader()}
|
|
1250
|
+
${this._renderTable()}
|
|
1251
|
+
`:U`<slot></slot>`}};Ye.styles=[ae,r`
|
|
1252
|
+
/* -------------------------------------------------------------------------
|
|
1253
|
+
* Host
|
|
1254
|
+
* ----------------------------------------------------------------------- */
|
|
1255
|
+
:host {
|
|
1256
|
+
display: flex;
|
|
1257
|
+
flex-direction: column;
|
|
1258
|
+
width: 100%;
|
|
1259
|
+
height: 100%;
|
|
1260
|
+
overflow: hidden;
|
|
1261
|
+
container-type: inline-size;
|
|
1262
|
+
}
|
|
1263
|
+
|
|
1264
|
+
/* -------------------------------------------------------------------------
|
|
1265
|
+
* Header
|
|
1266
|
+
* ----------------------------------------------------------------------- */
|
|
1267
|
+
.header {
|
|
1268
|
+
flex-shrink: 0;
|
|
1269
|
+
display: flex;
|
|
1270
|
+
align-items: center;
|
|
1271
|
+
gap: 16px;
|
|
1272
|
+
margin: 0 24px;
|
|
1273
|
+
padding: 0 4px;
|
|
1274
|
+
height: 64px;
|
|
1275
|
+
border-bottom: 1px solid #e5e7eb;
|
|
1276
|
+
background: #fff;
|
|
1277
|
+
}
|
|
1278
|
+
|
|
1279
|
+
:host(.kr-table--scroll-edge) .header {
|
|
1280
|
+
border-bottom: none;
|
|
1281
|
+
}
|
|
1282
|
+
|
|
1283
|
+
.title {
|
|
1284
|
+
font-size: 20px;
|
|
1285
|
+
font-weight: 400;
|
|
1286
|
+
color: #000;
|
|
1287
|
+
}
|
|
1288
|
+
|
|
1289
|
+
/* -------------------------------------------------------------------------
|
|
1290
|
+
* Content
|
|
1291
|
+
* ----------------------------------------------------------------------- */
|
|
1292
|
+
.wrapper {
|
|
1293
|
+
flex: 1;
|
|
1294
|
+
position: relative;
|
|
1295
|
+
overflow: hidden;
|
|
1296
|
+
}
|
|
1297
|
+
|
|
1298
|
+
.content {
|
|
1299
|
+
height: 100%;
|
|
1300
|
+
overflow: auto;
|
|
1301
|
+
padding-bottom: 24px;
|
|
1302
|
+
}
|
|
1303
|
+
|
|
1304
|
+
/* -------------------------------------------------------------------------
|
|
1305
|
+
* Search
|
|
1306
|
+
* ----------------------------------------------------------------------- */
|
|
1307
|
+
.search {
|
|
1308
|
+
flex: 1;
|
|
1309
|
+
display: flex;
|
|
1310
|
+
align-items: center;
|
|
1311
|
+
justify-content: center;
|
|
1312
|
+
min-width: 0;
|
|
1313
|
+
}
|
|
1314
|
+
|
|
1315
|
+
.search-field {
|
|
1316
|
+
width: 100%;
|
|
1317
|
+
max-width: 400px;
|
|
1318
|
+
position: relative;
|
|
1319
|
+
display: flex;
|
|
1320
|
+
align-items: center;
|
|
1321
|
+
border: 1px solid #00000038;
|
|
1322
|
+
border-radius: 18px;
|
|
1323
|
+
transition: border-color 0.2s, box-shadow 0.2s;
|
|
1324
|
+
}
|
|
1325
|
+
|
|
1326
|
+
.search-field:focus-within {
|
|
1327
|
+
border-color: #163052;
|
|
1328
|
+
box-shadow: 0 0 0 3px rgba(22, 48, 82, 0.1);
|
|
1329
|
+
}
|
|
1330
|
+
|
|
1331
|
+
/* TODO: Uncomment when views dropdown is added
|
|
1332
|
+
.search-field:focus-within .views {
|
|
1333
|
+
border-color: #163052;
|
|
1334
|
+
}
|
|
1335
|
+
*/
|
|
1336
|
+
|
|
1337
|
+
.search-icon {
|
|
1338
|
+
position: absolute;
|
|
1339
|
+
left: 16px;
|
|
1340
|
+
width: 20px;
|
|
1341
|
+
height: 20px;
|
|
1342
|
+
color: #656871;
|
|
1343
|
+
pointer-events: none;
|
|
1344
|
+
}
|
|
1345
|
+
|
|
1346
|
+
.search-input {
|
|
1347
|
+
height: 36px;
|
|
1348
|
+
padding: 0 16px 0 42px;
|
|
1349
|
+
border: none;
|
|
1350
|
+
border-radius: 16px;
|
|
1351
|
+
font-size: 14px;
|
|
1352
|
+
font-weight: 400;
|
|
1353
|
+
font-family: inherit;
|
|
1354
|
+
color: #163052;
|
|
1355
|
+
background: transparent;
|
|
1356
|
+
outline: none;
|
|
1357
|
+
flex: 1;
|
|
1358
|
+
min-width: 0;
|
|
1359
|
+
width: 100%;
|
|
1360
|
+
}
|
|
1361
|
+
|
|
1362
|
+
.search-input::placeholder {
|
|
1363
|
+
color: #656871;
|
|
1364
|
+
font-weight: 400;
|
|
1365
|
+
}
|
|
1366
|
+
|
|
1367
|
+
.search-input:focus {
|
|
1368
|
+
outline: none;
|
|
1369
|
+
}
|
|
1370
|
+
|
|
1371
|
+
@container (max-width: 800px) {
|
|
1372
|
+
.search-field {
|
|
1373
|
+
max-width: 250px;
|
|
1374
|
+
}
|
|
1375
|
+
}
|
|
1376
|
+
|
|
1377
|
+
.views {
|
|
1378
|
+
display: flex;
|
|
1379
|
+
align-items: center;
|
|
1380
|
+
gap: 4px;
|
|
1381
|
+
height: 36px;
|
|
1382
|
+
padding: 0 16px;
|
|
1383
|
+
border: 1px solid #00000038;
|
|
1384
|
+
border-right: none;
|
|
1385
|
+
border-radius: 16px 0 0 16px;
|
|
1386
|
+
font-size: 14px;
|
|
1387
|
+
font-family: inherit;
|
|
1388
|
+
color: #163052;
|
|
1389
|
+
background: transparent;
|
|
1390
|
+
cursor: pointer;
|
|
1391
|
+
white-space: nowrap;
|
|
1392
|
+
transition: border-color 0.2s;
|
|
1393
|
+
}
|
|
1394
|
+
|
|
1395
|
+
.views:hover {
|
|
1396
|
+
background: #e8f0f8;
|
|
1397
|
+
}
|
|
1398
|
+
|
|
1399
|
+
.views svg {
|
|
1400
|
+
width: 16px;
|
|
1401
|
+
height: 16px;
|
|
1402
|
+
color: #163052;
|
|
1403
|
+
}
|
|
1404
|
+
|
|
1405
|
+
/* -------------------------------------------------------------------------
|
|
1406
|
+
* Pagination
|
|
1407
|
+
* ----------------------------------------------------------------------- */
|
|
1408
|
+
.tools {
|
|
1409
|
+
display: flex;
|
|
1410
|
+
align-items: center;
|
|
1411
|
+
gap: 8px;
|
|
1412
|
+
}
|
|
1413
|
+
|
|
1414
|
+
.pagination {
|
|
1415
|
+
display: flex;
|
|
1416
|
+
align-items: center;
|
|
1417
|
+
gap: 2px;
|
|
1418
|
+
}
|
|
1419
|
+
|
|
1420
|
+
.pagination-info {
|
|
1421
|
+
font-size: 13px;
|
|
1422
|
+
color: var(--kr-primary);
|
|
1423
|
+
white-space: nowrap;
|
|
1424
|
+
}
|
|
1425
|
+
|
|
1426
|
+
.pagination-icon {
|
|
1427
|
+
display: flex;
|
|
1428
|
+
color: var(--kr-primary);
|
|
1429
|
+
cursor: pointer;
|
|
1430
|
+
}
|
|
1431
|
+
|
|
1432
|
+
.pagination-icon--disabled {
|
|
1433
|
+
opacity: 0.3;
|
|
1434
|
+
pointer-events: none;
|
|
1435
|
+
}
|
|
1436
|
+
|
|
1437
|
+
.pagination-icon svg {
|
|
1438
|
+
width: 24px;
|
|
1439
|
+
height: 24px;
|
|
1440
|
+
}
|
|
1441
|
+
|
|
1442
|
+
/* -------------------------------------------------------------------------
|
|
1443
|
+
* Header Icons
|
|
1444
|
+
* ----------------------------------------------------------------------- */
|
|
1445
|
+
.refresh,
|
|
1446
|
+
.header-icon {
|
|
1447
|
+
display: flex;
|
|
1448
|
+
align-items: center;
|
|
1449
|
+
justify-content: center;
|
|
1450
|
+
color: var(--kr-primary);
|
|
1451
|
+
background: #EBF1FA;
|
|
1452
|
+
cursor: pointer;
|
|
1453
|
+
padding: 6px;
|
|
1454
|
+
border-radius: 50%;
|
|
1455
|
+
transition: background 0.15s;
|
|
1456
|
+
}
|
|
1457
|
+
|
|
1458
|
+
.refresh:hover,
|
|
1459
|
+
.header-icon:hover {
|
|
1460
|
+
background: #e8f0f8;
|
|
1461
|
+
}
|
|
1462
|
+
|
|
1463
|
+
.refresh svg,
|
|
1464
|
+
.header-icon svg {
|
|
1465
|
+
width: 24px;
|
|
1466
|
+
height: 24px;
|
|
1467
|
+
}
|
|
1468
|
+
|
|
1469
|
+
/* -------------------------------------------------------------------------
|
|
1470
|
+
* Column Picker
|
|
1471
|
+
* ----------------------------------------------------------------------- */
|
|
1472
|
+
.column-picker-wrapper {
|
|
1473
|
+
position: relative;
|
|
1474
|
+
}
|
|
1475
|
+
|
|
1476
|
+
.column-picker {
|
|
1477
|
+
position: absolute;
|
|
1478
|
+
top: 100%;
|
|
1479
|
+
right: 0;
|
|
1480
|
+
margin-top: 4px;
|
|
1481
|
+
min-width: 200px;
|
|
1482
|
+
max-height: calc(100vh - 120px);
|
|
1483
|
+
overflow-y: auto;
|
|
1484
|
+
background: white;
|
|
1485
|
+
border: 1px solid #9ba7b6;
|
|
1486
|
+
border-radius: 8px;
|
|
1487
|
+
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
|
|
1488
|
+
padding: 8px 0;
|
|
1489
|
+
z-index: 100;
|
|
1490
|
+
display: none;
|
|
1491
|
+
transform-origin: top;
|
|
1492
|
+
}
|
|
1493
|
+
|
|
1494
|
+
.column-picker.open {
|
|
1495
|
+
display: block;
|
|
1496
|
+
animation: column-picker-fade-in 150ms ease-out;
|
|
1497
|
+
}
|
|
1498
|
+
|
|
1499
|
+
@keyframes column-picker-fade-in {
|
|
1500
|
+
from {
|
|
1501
|
+
opacity: 0;
|
|
1502
|
+
transform: translateY(-4px);
|
|
1503
|
+
}
|
|
1504
|
+
to {
|
|
1505
|
+
opacity: 1;
|
|
1506
|
+
transform: translateY(0);
|
|
1507
|
+
}
|
|
1508
|
+
}
|
|
1509
|
+
|
|
1510
|
+
.column-picker-item {
|
|
1511
|
+
display: flex;
|
|
1512
|
+
align-items: center;
|
|
1513
|
+
gap: 10px;
|
|
1514
|
+
padding: 8px 16px;
|
|
1515
|
+
cursor: pointer;
|
|
1516
|
+
white-space: nowrap;
|
|
1517
|
+
}
|
|
1518
|
+
|
|
1519
|
+
.column-picker-item:hover {
|
|
1520
|
+
background: #f3f4f6;
|
|
1521
|
+
}
|
|
1522
|
+
|
|
1523
|
+
.column-picker-checkbox {
|
|
1524
|
+
width: 16px;
|
|
1525
|
+
height: 16px;
|
|
1526
|
+
border: 1.5px solid #9ca3af;
|
|
1527
|
+
border-radius: 3px;
|
|
1528
|
+
display: flex;
|
|
1529
|
+
align-items: center;
|
|
1530
|
+
justify-content: center;
|
|
1531
|
+
flex-shrink: 0;
|
|
1532
|
+
transition: all 0.15s;
|
|
1533
|
+
}
|
|
1534
|
+
|
|
1535
|
+
.column-picker-checkbox.checked {
|
|
1536
|
+
background: var(--kr-primary);
|
|
1537
|
+
border-color: var(--kr-primary);
|
|
1538
|
+
}
|
|
1539
|
+
|
|
1540
|
+
.column-picker-checkbox svg {
|
|
1541
|
+
width: 12px;
|
|
1542
|
+
height: 12px;
|
|
1543
|
+
color: white;
|
|
1544
|
+
opacity: 0;
|
|
1545
|
+
}
|
|
1546
|
+
|
|
1547
|
+
.column-picker-checkbox.checked svg {
|
|
1548
|
+
opacity: 1;
|
|
1549
|
+
}
|
|
1550
|
+
|
|
1551
|
+
.column-picker-label {
|
|
1552
|
+
font-size: 14px;
|
|
1553
|
+
color: #374151;
|
|
1554
|
+
}
|
|
1555
|
+
|
|
1556
|
+
/* -------------------------------------------------------------------------
|
|
1557
|
+
* Table Structure
|
|
1558
|
+
* ----------------------------------------------------------------------- */
|
|
1559
|
+
.table {
|
|
1560
|
+
display: grid;
|
|
1561
|
+
width: max-content;
|
|
1562
|
+
min-width: 100%;
|
|
1563
|
+
font-size: 14px;
|
|
1564
|
+
}
|
|
1565
|
+
|
|
1566
|
+
.row {
|
|
1567
|
+
display: contents;
|
|
1568
|
+
}
|
|
1569
|
+
|
|
1570
|
+
.row:hover .cell {
|
|
1571
|
+
background: #f9fafb;
|
|
1572
|
+
}
|
|
1573
|
+
|
|
1574
|
+
.header-row {
|
|
1575
|
+
display: contents;
|
|
1576
|
+
}
|
|
1577
|
+
|
|
1578
|
+
.cell {
|
|
1579
|
+
height: 48px;
|
|
1580
|
+
padding: 0 16px;
|
|
1581
|
+
display: flex;
|
|
1582
|
+
align-items: center;
|
|
1583
|
+
white-space: nowrap;
|
|
1584
|
+
overflow: hidden;
|
|
1585
|
+
text-overflow: ellipsis;
|
|
1586
|
+
box-sizing: border-box;
|
|
1587
|
+
}
|
|
1588
|
+
|
|
1589
|
+
.header-cell {
|
|
1590
|
+
position: sticky;
|
|
1591
|
+
top: 0;
|
|
1592
|
+
z-index: 2;
|
|
1593
|
+
height: 48px;
|
|
1594
|
+
line-height: 48px;
|
|
1595
|
+
padding: 0 16px;
|
|
1596
|
+
white-space: nowrap;
|
|
1597
|
+
box-sizing: border-box;
|
|
1598
|
+
background: #f9fafb;
|
|
1599
|
+
border-bottom: 2px solid #e5e7eb;
|
|
1600
|
+
font-weight: 600;
|
|
1601
|
+
color: #374151;
|
|
1602
|
+
overflow: hidden;
|
|
1603
|
+
text-overflow: ellipsis;
|
|
1604
|
+
}
|
|
1605
|
+
|
|
1606
|
+
.header-cell__resize {
|
|
1607
|
+
position: absolute;
|
|
1608
|
+
right: -7px;
|
|
1609
|
+
top: 0;
|
|
1610
|
+
bottom: 0;
|
|
1611
|
+
width: 14px;
|
|
1612
|
+
cursor: col-resize;
|
|
1613
|
+
display: flex;
|
|
1614
|
+
align-items: center;
|
|
1615
|
+
justify-content: center;
|
|
1616
|
+
z-index: 10;
|
|
1617
|
+
}
|
|
1618
|
+
|
|
1619
|
+
.header-cell__resize::after {
|
|
1620
|
+
content: '';
|
|
1621
|
+
width: 2px;
|
|
1622
|
+
height: 20px;
|
|
1623
|
+
background: #c6c6cd;
|
|
1624
|
+
}
|
|
1625
|
+
|
|
1626
|
+
.header-cell:last-child .header-cell__resize::after {
|
|
1627
|
+
display: none;
|
|
1628
|
+
}
|
|
1629
|
+
|
|
1630
|
+
.cell {
|
|
1631
|
+
background: #fff;
|
|
1632
|
+
border-bottom: 1px solid #e5e7eb;
|
|
1633
|
+
color: #1f2937;
|
|
1634
|
+
}
|
|
1635
|
+
|
|
1636
|
+
.cell--align-center {
|
|
1637
|
+
text-align: center;
|
|
1638
|
+
}
|
|
1639
|
+
|
|
1640
|
+
.cell--align-right {
|
|
1641
|
+
text-align: right;
|
|
1642
|
+
}
|
|
1643
|
+
|
|
1644
|
+
.cell--sticky-left,
|
|
1645
|
+
.cell--sticky-right {
|
|
1646
|
+
position: sticky;
|
|
1647
|
+
z-index: 1;
|
|
1648
|
+
}
|
|
1649
|
+
|
|
1650
|
+
.header-cell--sticky-left,
|
|
1651
|
+
.header-cell--sticky-right {
|
|
1652
|
+
position: sticky;
|
|
1653
|
+
z-index: 3;
|
|
1654
|
+
}
|
|
1655
|
+
|
|
1656
|
+
.header-cell--align-center {
|
|
1657
|
+
text-align: center;
|
|
1658
|
+
}
|
|
1659
|
+
|
|
1660
|
+
.header-cell--align-right {
|
|
1661
|
+
text-align: right;
|
|
1662
|
+
}
|
|
1663
|
+
|
|
1664
|
+
.header-cell--sticky-left-last,
|
|
1665
|
+
.cell--sticky-left-last {
|
|
1666
|
+
border-right: 1px solid #d1d5db;
|
|
1667
|
+
}
|
|
1668
|
+
|
|
1669
|
+
.header-cell--sticky-right-first,
|
|
1670
|
+
.cell--sticky-right-first {
|
|
1671
|
+
border-left: 1px solid #d1d5db;
|
|
1672
|
+
}
|
|
1673
|
+
|
|
1674
|
+
/* -------------------------------------------------------------------------
|
|
1675
|
+
* Scroll Mode: Edge
|
|
1676
|
+
* Padding scrolls with content, table can reach edges when scrolling
|
|
1677
|
+
* ----------------------------------------------------------------------- */
|
|
1678
|
+
:host(.kr-table--scroll-edge) .table {
|
|
1679
|
+
padding-left: 24px;
|
|
1680
|
+
}
|
|
1681
|
+
|
|
1682
|
+
/* Only add right padding when no horizontal scroll is needed */
|
|
1683
|
+
:host(.kr-table--scroll-edge):not(.kr-table--scroll-horizontal-available) .table {
|
|
1684
|
+
padding-right: 24px;
|
|
1685
|
+
}
|
|
1686
|
+
|
|
1687
|
+
:host(.kr-table--scroll-edge) .header-row .header-cell {
|
|
1688
|
+
border-top: 1px solid #e5e7eb;
|
|
1689
|
+
}
|
|
1690
|
+
|
|
1691
|
+
/* -------------------------------------------------------------------------
|
|
1692
|
+
* Scroll Mode: Overlay
|
|
1693
|
+
* Fixed padding with overlay elements that hide content at edges
|
|
1694
|
+
* ----------------------------------------------------------------------- */
|
|
1695
|
+
:host(.kr-table--scroll-overlay) .content {
|
|
1696
|
+
padding-left: 24px;
|
|
1697
|
+
padding-right: 24px;
|
|
1698
|
+
}
|
|
1699
|
+
|
|
1700
|
+
.overlay-left,
|
|
1701
|
+
.overlay-right {
|
|
1702
|
+
display: none;
|
|
1703
|
+
position: absolute;
|
|
1704
|
+
top: 0;
|
|
1705
|
+
bottom: 0;
|
|
1706
|
+
width: 24px;
|
|
1707
|
+
z-index: 5;
|
|
1708
|
+
pointer-events: none;
|
|
1709
|
+
transition: box-shadow 0.15s ease;
|
|
1710
|
+
}
|
|
1711
|
+
|
|
1712
|
+
:host(.kr-table--scroll-overlay) .overlay-left,
|
|
1713
|
+
:host(.kr-table--scroll-overlay) .overlay-right {
|
|
1714
|
+
display: block;
|
|
1715
|
+
}
|
|
1716
|
+
|
|
1717
|
+
.overlay-left {
|
|
1718
|
+
left: 0;
|
|
1719
|
+
background: #fff;
|
|
1720
|
+
}
|
|
1721
|
+
|
|
1722
|
+
.overlay-right {
|
|
1723
|
+
right: 0;
|
|
1724
|
+
background: #fff;
|
|
1725
|
+
}
|
|
1726
|
+
|
|
1727
|
+
:host(.kr-table--scroll-overlay.kr-table--scroll-left-available:not(.kr-table--sticky-left)) .overlay-left {
|
|
1728
|
+
border-right: 1px solid #d1d5db54;
|
|
1729
|
+
}
|
|
1730
|
+
|
|
1731
|
+
:host(.kr-table--scroll-overlay.kr-table--scroll-right-available:not(.kr-table--sticky-right)) .overlay-right {
|
|
1732
|
+
border-left: 1px solid #d1d5db54;
|
|
1733
|
+
}
|
|
1734
|
+
|
|
1735
|
+
/* -------------------------------------------------------------------------
|
|
1736
|
+
* Status (Loading, Error, Empty)
|
|
1737
|
+
* ----------------------------------------------------------------------- */
|
|
1738
|
+
.status {
|
|
1739
|
+
position: absolute;
|
|
1740
|
+
top: 0;
|
|
1741
|
+
left: 0;
|
|
1742
|
+
right: 0;
|
|
1743
|
+
bottom: 0;
|
|
1744
|
+
display: flex;
|
|
1745
|
+
align-items: center;
|
|
1746
|
+
justify-content: center;
|
|
1747
|
+
font-size: 14px;
|
|
1748
|
+
font-weight: 400;
|
|
1749
|
+
color: #5f6368;
|
|
1750
|
+
pointer-events: none;
|
|
1751
|
+
}
|
|
1752
|
+
|
|
1753
|
+
.status--error {
|
|
1754
|
+
color: #dc2626;
|
|
1755
|
+
}
|
|
1756
|
+
`],Ke([ue()],Ye.prototype,"_data",void 0),Ke([ue()],Ye.prototype,"_dataState",void 0),Ke([ue()],Ye.prototype,"_page",void 0),Ke([ue()],Ye.prototype,"_pageSize",void 0),Ke([ue()],Ye.prototype,"_totalItems",void 0),Ke([ue()],Ye.prototype,"_totalPages",void 0),Ke([ue()],Ye.prototype,"_searchQuery",void 0),Ke([ue()],Ye.prototype,"_canScrollLeft",void 0),Ke([ue()],Ye.prototype,"_canScrollRight",void 0),Ke([ue()],Ye.prototype,"_canScrollHorizontal",void 0),Ke([ue()],Ye.prototype,"_columnPickerOpen",void 0),Ke([ue()],Ye.prototype,"_displayedColumns",void 0),Ke([pe({type:Object})],Ye.prototype,"def",void 0),Ye=Ke([de("kr-table")],Ye);
|
|
1063
1757
|
/**
|
|
1064
1758
|
* @license
|
|
1065
1759
|
* Copyright 2018 Google LLC
|
|
1066
1760
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
1067
1761
|
*/
|
|
1068
|
-
const
|
|
1762
|
+
const Ge=e=>e??V,Je={},et=ke(class extends xe{constructor(e){if(super(e),e.type!==me&&e.type!==ve&&e.type!==_e)throw Error("The `live` directive is not allowed on child or event bindings");if(!(e=>void 0===e.strings)(e))throw Error("`live` bindings can only contain a single expression")}render(e){return e}update(e,[t]){if(t===N||t===V)return t;const i=e.element,o=e.name;if(e.type===me){if(t===i[o])return N}else if(e.type===_e){if(!!t===i.hasAttribute(o))return N}else if(e.type===ve&&i.getAttribute(o)===t+"")return N;return((e,t=Je)=>{e._$AH=t;
|
|
1069
1763
|
/**
|
|
1070
1764
|
* @license
|
|
1071
1765
|
* Copyright 2020 Google LLC
|
|
@@ -1075,35 +1769,35 @@ const We=e=>e??q,Xe={},Ze=ke(class extends xe{constructor(e){if(super(e),e.type!
|
|
|
1075
1769
|
* @license
|
|
1076
1770
|
* Copyright 2020 Google LLC
|
|
1077
1771
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
1078
|
-
*/var
|
|
1772
|
+
*/var tt=function(e,t,i,o){var s,r=arguments.length,n=r<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,i,o);else for(var l=e.length-1;l>=0;l--)(s=e[l])&&(n=(r<3?s(n):r>3?s(t,i,n):s(t,i))||n);return r>3&&n&&Object.defineProperty(t,i,n),n};let it=class extends ne{constructor(){super(),this.label="",this.name="",this.value="",this.placeholder="",this.type="text",this.required=!1,this.disabled=!1,this.readonly=!1,this.autocomplete="",this.hint="",this._touched=!1,this._dirty=!1,this._handleInvalid=e=>{e.preventDefault(),this._touched=!0},this._internals=this.attachInternals()}get form(){return this._internals.form}get validity(){return this._internals.validity}get validationMessage(){return this._internals.validationMessage}get willValidate(){return this._internals.willValidate}checkValidity(){return this._internals.checkValidity()}reportValidity(){return this._internals.reportValidity()}formResetCallback(){this.value="",this._touched=!1,this._dirty=!1,this._internals.setFormValue(""),this._internals.setValidity({})}formStateRestoreCallback(e){this.value=e}connectedCallback(){super.connectedCallback(),this.addEventListener("invalid",this._handleInvalid)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("invalid",this._handleInvalid)}firstUpdated(){this._updateValidity()}updated(e){(e.has("required")||e.has("value"))&&this._updateValidity()}_updateValidity(){this._input&&this._internals.setValidity(this._input.validity,this._input.validationMessage)}_handleInput(e){this.value=e.target.value,this._dirty=!0,this._internals.setFormValue(this.value),this._internals.setValidity(this._input.validity,this._input.validationMessage)}_handleChange(e){this.value=e.target.value,this._internals.setFormValue(this.value)}_handleBlur(){this._touched=!0,this._internals.setValidity(this._input.validity,this._input.validationMessage)}render(){let e="";return this._touched&&this._input&&!this._input.validity.valid&&(e=this._input.validationMessage),U`
|
|
1079
1773
|
<div class="wrapper">
|
|
1080
|
-
${this.label?
|
|
1774
|
+
${this.label?U`
|
|
1081
1775
|
<label for="input">
|
|
1082
1776
|
${this.label}
|
|
1083
|
-
${this.required?
|
|
1777
|
+
${this.required?U`<span class="required" aria-hidden="true">*</span>`:""}
|
|
1084
1778
|
</label>
|
|
1085
1779
|
`:""}
|
|
1086
1780
|
<input
|
|
1087
1781
|
id="input"
|
|
1088
|
-
class=${
|
|
1782
|
+
class=${we({"input--invalid":this._touched&&this._input&&!this._input.validity.valid})}
|
|
1089
1783
|
type=${this.type}
|
|
1090
1784
|
name=${this.name}
|
|
1091
|
-
.value=${
|
|
1785
|
+
.value=${et(this.value)}
|
|
1092
1786
|
placeholder=${this.placeholder}
|
|
1093
1787
|
?required=${this.required}
|
|
1094
1788
|
?disabled=${this.disabled}
|
|
1095
1789
|
?readonly=${this.readonly}
|
|
1096
|
-
minlength=${
|
|
1097
|
-
maxlength=${
|
|
1098
|
-
pattern=${
|
|
1099
|
-
autocomplete=${
|
|
1790
|
+
minlength=${Ge(this.minlength)}
|
|
1791
|
+
maxlength=${Ge(this.maxlength)}
|
|
1792
|
+
pattern=${Ge(this.pattern)}
|
|
1793
|
+
autocomplete=${Ge(this.autocomplete||void 0)}
|
|
1100
1794
|
@input=${this._handleInput}
|
|
1101
1795
|
@change=${this._handleChange}
|
|
1102
1796
|
@blur=${this._handleBlur}
|
|
1103
1797
|
/>
|
|
1104
|
-
${e?
|
|
1798
|
+
${e?U`<div class="validation-message">${e}</div>`:this.hint?U`<div class="hint">${this.hint}</div>`:""}
|
|
1105
1799
|
</div>
|
|
1106
|
-
`}focus(){this._input?.focus()}blur(){this._input?.blur()}select(){this._input?.select()}};
|
|
1800
|
+
`}focus(){this._input?.focus()}blur(){this._input?.blur()}select(){this._input?.select()}};it.styles=r`
|
|
1107
1801
|
:host {
|
|
1108
1802
|
display: block;
|
|
1109
1803
|
font-family: inherit;
|
|
@@ -1139,8 +1833,8 @@ const We=e=>e??q,Xe={},Ze=ke(class extends xe{constructor(e){if(super(e),e.type!
|
|
|
1139
1833
|
|
|
1140
1834
|
input:focus {
|
|
1141
1835
|
outline: none;
|
|
1142
|
-
border-color: var(--kr-text-field-focus-border-color, #
|
|
1143
|
-
box-shadow: 0 0 0 3px var(--kr-text-field-focus-ring-color, rgba(
|
|
1836
|
+
border-color: var(--kr-text-field-focus-border-color, #163052);
|
|
1837
|
+
box-shadow: 0 0 0 3px var(--kr-text-field-focus-ring-color, rgba(22, 48, 82, 0.1));
|
|
1144
1838
|
}
|
|
1145
1839
|
|
|
1146
1840
|
input:disabled {
|
|
@@ -1170,17 +1864,17 @@ const We=e=>e??q,Xe={},Ze=ke(class extends xe{constructor(e){if(super(e),e.type!
|
|
|
1170
1864
|
font-size: 0.75rem;
|
|
1171
1865
|
color: var(--kr-text-field-helper-color, #6b7280);
|
|
1172
1866
|
}
|
|
1173
|
-
`,
|
|
1867
|
+
`,it.formAssociated=!0,tt([pe({type:String})],it.prototype,"label",void 0),tt([pe({type:String})],it.prototype,"name",void 0),tt([pe({type:String})],it.prototype,"value",void 0),tt([pe({type:String})],it.prototype,"placeholder",void 0),tt([pe({type:String})],it.prototype,"type",void 0),tt([pe({type:Boolean})],it.prototype,"required",void 0),tt([pe({type:Boolean})],it.prototype,"disabled",void 0),tt([pe({type:Boolean})],it.prototype,"readonly",void 0),tt([pe({type:Number})],it.prototype,"minlength",void 0),tt([pe({type:Number})],it.prototype,"maxlength",void 0),tt([pe({type:String})],it.prototype,"pattern",void 0),tt([pe({type:String})],it.prototype,"autocomplete",void 0),tt([pe({type:String})],it.prototype,"hint",void 0),tt([ge("input")],it.prototype,"_input",void 0),tt([ue()],it.prototype,"_touched",void 0),tt([ue()],it.prototype,"_dirty",void 0),it=tt([de("kr-text-field")],it);var ot=function(e,t,i,o){var s,r=arguments.length,n=r<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,i,o);else for(var l=e.length-1;l>=0;l--)(s=e[l])&&(n=(r<3?s(n):r>3?s(t,i,n):s(t,i))||n);return r>3&&n&&Object.defineProperty(t,i,n),n};let st=class extends ne{constructor(){super(),this.label="",this.name="",this.value="",this.placeholder="Select an option",this.disabled=!1,this.required=!1,this.readonly=!1,this.hint="",this._isOpen=!1,this._highlightedIndex=-1,this._touched=!1,this._handleInvalid=e=>{e.preventDefault(),this._touched=!0},this._handleOutsideClick=e=>{this.contains(e.target)||this._close()},this._handleKeyDown=e=>{if(!this._isOpen)return;const t=Array.from(this.querySelectorAll("kr-select-option"));switch(e.key){case"Escape":this._close(),this._triggerElement?.focus();break;case"ArrowDown":if(e.preventDefault(),t.some(e=>!e.disabled)){let e=this._highlightedIndex+1;for(;e<t.length&&t[e]?.disabled;)e++;e<t.length&&(this._highlightedIndex=e)}break;case"ArrowUp":e.preventDefault();{let e=this._highlightedIndex-1;for(;e>=0&&t[e]?.disabled;)e--;e>=0&&(this._highlightedIndex=e)}break;case"Enter":e.preventDefault(),this._highlightedIndex>=0&&this._highlightedIndex<t.length&&this._selectOption(t[this._highlightedIndex])}},this._internals=this.attachInternals()}get form(){return this._internals.form}get validity(){return this._internals.validity}get validationMessage(){return this._internals.validationMessage}get willValidate(){return this._internals.willValidate}checkValidity(){return this._internals.checkValidity()}reportValidity(){return this._internals.reportValidity()}formResetCallback(){this.value="",this._touched=!1,this._internals.setFormValue(""),this._internals.setValidity({})}formStateRestoreCallback(e){this.value=e}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this._handleOutsideClick),document.addEventListener("keydown",this._handleKeyDown),this.addEventListener("invalid",this._handleInvalid)}firstUpdated(){this._updateValidity()}updated(e){(e.has("required")||e.has("value"))&&this._updateValidity()}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this._handleOutsideClick),document.removeEventListener("keydown",this._handleKeyDown),this.removeEventListener("invalid",this._handleInvalid)}_toggle(){if(!this.disabled&&!this.readonly)if(this._isOpen)this._close();else{this._isOpen=!0;const e=Array.from(this.querySelectorAll("kr-select-option"));this._highlightedIndex=e.findIndex(e=>e.value===this.value)}}_close(){this._isOpen=!1,this._highlightedIndex=-1}_selectOption(e){e.disabled||(this.value=e.value,this._internals.setFormValue(this.value),this._updateValidity(),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0})),this._close(),this._triggerElement?.focus())}_handleBlur(){this._touched=!0,this._updateValidity()}_updateValidity(){this.required&&!this.value?this._internals.setValidity({valueMissing:!0},"Please select an option",this._triggerElement):this._internals.setValidity({})}render(){const e=Array.from(this.querySelectorAll("kr-select-option")),t=e.find(e=>e.value===this.value)?.label;return U`
|
|
1174
1868
|
<div class="wrapper">
|
|
1175
|
-
${this.label?
|
|
1869
|
+
${this.label?U`
|
|
1176
1870
|
<label>
|
|
1177
1871
|
${this.label}
|
|
1178
|
-
${this.required?
|
|
1872
|
+
${this.required?U`<span class="required" aria-hidden="true">*</span>`:""}
|
|
1179
1873
|
</label>
|
|
1180
|
-
`:
|
|
1874
|
+
`:V}
|
|
1181
1875
|
<div class="select-wrapper">
|
|
1182
1876
|
<button
|
|
1183
|
-
class=${
|
|
1877
|
+
class=${we({"select-trigger":!0,"select-trigger--open":this._isOpen,"select-trigger--invalid":this._touched&&this.required&&!this.value})}
|
|
1184
1878
|
type="button"
|
|
1185
1879
|
?disabled=${this.disabled}
|
|
1186
1880
|
aria-haspopup="listbox"
|
|
@@ -1188,11 +1882,11 @@ const We=e=>e??q,Xe={},Ze=ke(class extends xe{constructor(e){if(super(e),e.type!
|
|
|
1188
1882
|
@click=${this._toggle}
|
|
1189
1883
|
@blur=${this._handleBlur}
|
|
1190
1884
|
>
|
|
1191
|
-
<span class=${
|
|
1885
|
+
<span class=${we({"select-value":!0,"select-placeholder":!t})}>
|
|
1192
1886
|
${t||this.placeholder}
|
|
1193
1887
|
</span>
|
|
1194
1888
|
<svg
|
|
1195
|
-
class=${
|
|
1889
|
+
class=${we({"chevron-icon":!0,"select-icon":!0,"select-icon--open":this._isOpen})}
|
|
1196
1890
|
viewBox="0 0 20 20"
|
|
1197
1891
|
fill="currentColor"
|
|
1198
1892
|
>
|
|
@@ -1200,31 +1894,31 @@ const We=e=>e??q,Xe={},Ze=ke(class extends xe{constructor(e){if(super(e),e.type!
|
|
|
1200
1894
|
</svg>
|
|
1201
1895
|
</button>
|
|
1202
1896
|
|
|
1203
|
-
<div class=${
|
|
1897
|
+
<div class=${we({"select-dropdown":!0,hidden:!this._isOpen})} role="listbox">
|
|
1204
1898
|
<div class="select-options">
|
|
1205
|
-
${0===e.length?
|
|
1899
|
+
${0===e.length?U`<div class="select-empty">No options available</div>`:e.map((e,t)=>{const i=e.value===this.value;return U`
|
|
1206
1900
|
<div
|
|
1207
|
-
class=${
|
|
1901
|
+
class=${we({"select-option":!0,"select-option--selected":i,"select-option--disabled":e.disabled,"select-option--highlighted":t===this._highlightedIndex})}
|
|
1208
1902
|
role="option"
|
|
1209
1903
|
aria-selected=${i}
|
|
1210
1904
|
@click=${()=>this._selectOption(e)}
|
|
1211
1905
|
@mouseenter=${()=>this._highlightedIndex=t}
|
|
1212
1906
|
>
|
|
1213
1907
|
${e.label}
|
|
1214
|
-
${i?
|
|
1908
|
+
${i?U`<svg class="chevron-icon select-check" viewBox="0 0 20 20" fill="currentColor">
|
|
1215
1909
|
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
|
|
1216
|
-
</svg>`:
|
|
1910
|
+
</svg>`:V}
|
|
1217
1911
|
</div>
|
|
1218
1912
|
`})}
|
|
1219
1913
|
</div>
|
|
1220
1914
|
</div>
|
|
1221
1915
|
</div>
|
|
1222
|
-
${this._touched&&this.required&&!this.value?
|
|
1916
|
+
${this._touched&&this.required&&!this.value?U`<div class="validation-message">Please select an option</div>`:this.hint?U`<div class="hint">${this.hint}</div>`:""}
|
|
1223
1917
|
</div>
|
|
1224
1918
|
<div class="options-slot">
|
|
1225
1919
|
<slot @slotchange=${()=>this.requestUpdate()}></slot>
|
|
1226
1920
|
</div>
|
|
1227
|
-
`}focus(){this._triggerElement?.focus()}blur(){this._triggerElement?.blur()}};
|
|
1921
|
+
`}focus(){this._triggerElement?.focus()}blur(){this._triggerElement?.blur()}};st.styles=r`
|
|
1228
1922
|
:host {
|
|
1229
1923
|
display: block;
|
|
1230
1924
|
font-family: inherit;
|
|
@@ -1410,9 +2104,9 @@ const We=e=>e??q,Xe={},Ze=ke(class extends xe{constructor(e){if(super(e),e.type!
|
|
|
1410
2104
|
.options-slot {
|
|
1411
2105
|
display: none;
|
|
1412
2106
|
}
|
|
1413
|
-
`,
|
|
2107
|
+
`,st.formAssociated=!0,ot([pe({type:String})],st.prototype,"label",void 0),ot([pe({type:String})],st.prototype,"name",void 0),ot([pe({type:String})],st.prototype,"value",void 0),ot([pe({type:String})],st.prototype,"placeholder",void 0),ot([pe({type:Boolean})],st.prototype,"disabled",void 0),ot([pe({type:Boolean})],st.prototype,"required",void 0),ot([pe({type:Boolean})],st.prototype,"readonly",void 0),ot([pe({type:String})],st.prototype,"hint",void 0),ot([ue()],st.prototype,"_isOpen",void 0),ot([ue()],st.prototype,"_highlightedIndex",void 0),ot([ue()],st.prototype,"_touched",void 0),ot([ge(".select-trigger")],st.prototype,"_triggerElement",void 0),st=ot([de("kr-select")],st);var rt=function(e,t,i,o){var s,r=arguments.length,n=r<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,i,o);else for(var l=e.length-1;l>=0;l--)(s=e[l])&&(n=(r<3?s(n):r>3?s(t,i,n):s(t,i))||n);return r>3&&n&&Object.defineProperty(t,i,n),n};let nt=class extends ne{constructor(){super(...arguments),this.value="",this.disabled=!1}get label(){return this.textContent?.trim()||""}render(){return U`<slot></slot>`}};nt.styles=r`
|
|
1414
2108
|
:host {
|
|
1415
2109
|
display: none;
|
|
1416
2110
|
}
|
|
1417
|
-
`,
|
|
2111
|
+
`,rt([pe({type:String})],nt.prototype,"value",void 0),rt([pe({type:Boolean})],nt.prototype,"disabled",void 0),nt=rt([de("kr-select-option")],nt);export{Me as DialogRef,be as KRAccordion,Ce as KRAlert,Ee as KRButton,ze as KRCodeDemo,Le as KRContextMenu,De as KRDialog,st as KRSelect,nt as KRSelectOption,Ie as KRSnackbar,We as KRTab,Ve as KRTabGroup,Ye as KRTable,it as KRTextField,ae as krBaseCSS};
|
|
1418
2112
|
//# sourceMappingURL=krubble.bundled.min.js.map
|