@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
package/dist/krubble.umd.min.js
CHANGED
|
@@ -3,23 +3,23 @@
|
|
|
3
3
|
* @license
|
|
4
4
|
* Copyright 2019 Google LLC
|
|
5
5
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
6
|
-
*/const t=globalThis,i=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,o=Symbol(),s=new WeakMap;let r=class{constructor(e,t,i){if(this._$cssResult$=!0,i!==o)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=e,this.t=t}get styleSheet(){let e=this.o;const t=this.t;if(i&&void 0===e){const i=void 0!==t&&1===t.length;i&&(e=s.get(t)),void 0===e&&((this.o=e=new CSSStyleSheet).replaceSync(this.cssText),i&&s.set(t,e))}return e}toString(){return this.cssText}};const n=(e,...t)=>{const i=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 r(i,e,o)},
|
|
6
|
+
*/const t=globalThis,i=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,o=Symbol(),s=new WeakMap;let r=class{constructor(e,t,i){if(this._$cssResult$=!0,i!==o)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=e,this.t=t}get styleSheet(){let e=this.o;const t=this.t;if(i&&void 0===e){const i=void 0!==t&&1===t.length;i&&(e=s.get(t)),void 0===e&&((this.o=e=new CSSStyleSheet).replaceSync(this.cssText),i&&s.set(t,e))}return e}toString(){return this.cssText}};const n=(e,...t)=>{const i=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 r(i,e,o)},l=i?e=>e:e=>e instanceof CSSStyleSheet?(e=>{let t="";for(const i of e.cssRules)t+=i.cssText;return(e=>new r("string"==typeof e?e:e+"",void 0,o))(t)})(e):e,{is:a,defineProperty:d,getOwnPropertyDescriptor:c,getOwnPropertyNames:h,getOwnPropertySymbols:p,getPrototypeOf:u}=Object,g=globalThis,f=g.trustedTypes,b=f?f.emptyScript:"",v=g.reactiveElementPolyfillSupport,y=(e,t)=>e,m={toAttribute(e,t){switch(t){case Boolean:e=e?b: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}},_=(e,t)=>!a(e,t),x={attribute:!0,type:String,converter:m,reflect:!1,useDefault:!1,hasChanged:_};
|
|
7
7
|
/**
|
|
8
8
|
* @license
|
|
9
9
|
* Copyright 2017 Google LLC
|
|
10
10
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
11
|
-
*/Symbol.metadata??=Symbol("metadata"),
|
|
11
|
+
*/Symbol.metadata??=Symbol("metadata"),g.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=x){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&&d(this.prototype,e,o)}}static getPropertyDescriptor(e,t,i){const{get:o,set:s}=c(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)??x}static _$Ei(){if(this.hasOwnProperty(y("elementProperties")))return;const e=u(this);e.finalize(),void 0!==e.l&&(this.l=[...e.l]),this.elementProperties=new Map(e.elementProperties)}static finalize(){if(this.hasOwnProperty(y("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(y("properties"))){const e=this.properties,t=[...h(e),...p(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(l(e))}else void 0!==e&&t.push(l(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 e=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return((e,o)=>{if(i)e.adoptedStyleSheets=o.map(e=>e instanceof CSSStyleSheet?e:e.styleSheet);else for(const i of o){const o=document.createElement("style"),s=t.litNonce;void 0!==s&&o.setAttribute("nonce",s),o.textContent=i.cssText,e.appendChild(o)}})(e,this.constructor.elementStyles),e}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:m).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:m;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??_)(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[y("elementProperties")]=new Map,k[y("finalized")]=new Map,v?.({ReactiveElement:k}),(g.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
|
|
17
|
+
const w=globalThis,$=e=>e,S=w.trustedTypes,R=S?S.createPolicy("lit-html",{createHTML:e=>e}):void 0,C="$lit$",T=`lit$${Math.random().toFixed(9).slice(2)}$`,A="?"+T,E=`<${A}>`,O=document,K=()=>O.createComment(""),P=e=>null===e||"object"!=typeof e&&"function"!=typeof e,z=Array.isArray,L="[ \t\n\f\r]",D=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,M=/-->/g,j=/>/g,B=RegExp(`>|${L}(?:([^\\s"'>=/]+)(${L}*=${L}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),H=/'/g,I=/"/g,q=/^(?:script|style|textarea|title)$/i,U=(e=>(t,...i)=>({_$litType$:e,strings:t,values:i}))(1),F=Symbol.for("lit-noChange"),N=Symbol.for("lit-nothing"),V=new WeakMap,W=O.createTreeWalker(O,129);function Z(e,t){if(!z(e)||!e.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==R?R.createHTML(t):t}const G=(e,t)=>{const i=e.length-1,o=[];let s,r=2===t?"<svg>":3===t?"<math>":"",n=D;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===D?"!--"===a[1]?n=M:void 0!==a[1]?n=j:void 0!==a[2]?(q.test(a[2])&&(s=RegExp("</"+a[2],"g")),n=B):void 0!==a[3]&&(n=B):n===B?">"===a[0]?(n=s??D,d=-1):void 0===a[1]?d=-2:(d=n.lastIndex-a[2].length,l=a[1],n=void 0===a[3]?B:'"'===a[3]?I:H):n===I||n===H?n=B:n===M||n===j?n=D:(n=B,s=void 0);const h=n===B&&e[t+1].startsWith("/>")?" ":"";r+=n===D?i+E:d>=0?(o.push(l),i.slice(0,d)+C+i.slice(d)+T+h):i+T+(-2===d?t:h)}return[Z(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]=G(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(C)){const t=d[r++],i=o.getAttribute(e).split(T),n=/([.?@])?(.*)/.exec(t);l.push({type:1,index:s,name:n[2],strings:i,ctor:"."===n[1]?te:"?"===n[1]?ie:"@"===n[1]?oe:ee}),o.removeAttribute(e)}else e.startsWith(T)&&(l.push({type:6,index:s}),o.removeAttribute(e));if(q.test(o.tagName)){const e=o.textContent.split(T),t=e.length-1;if(t>0){o.textContent=S?S.emptyScript:"";for(let i=0;i<t;i++)o.append(e[i],K()),W.nextNode(),l.push({type:2,index:++s});o.append(e[t],K())}}}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(T,e+1));)l.push({type:7,index:s}),e+=T.length-1}s++}}static createElement(e,t){const i=O.createElement("template");return i.innerHTML=e,i}}function Q(e,t,i=e,o){if(t===F)return t;let s=void 0!==o?i._$Co?.[o]:i._$Cl;const r=P(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??O).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 J(s,s.nextSibling,this,e):1===l.type?t=new l.ctor(s,l.name,l.strings,this,e):6===l.type&&(t=new se(s,this,e)),this._$AV.push(t),l=i[++n]}r!==l?.index&&(s=W.nextNode(),r++)}return W.currentNode=O,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 J{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(e,t,i,o){this.type=2,this._$AH=N,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),P(e)?e===N||null==e||""===e?(this._$AH!==N&&this._$AR(),this._$AH=N):e!==this._$AH&&e!==F&&this._(e):void 0!==e._$litType$?this.$(e):void 0!==e.nodeType?this.T(e):(e=>z(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!==N&&P(this._$AH)?this._$AA.nextSibling.data=e:this.T(O.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(Z(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=V.get(e.strings);return void 0===t&&V.set(e.strings,t=new X(e)),t}k(e){z(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 J(this.O(K()),this.O(K()),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=$(e).nextSibling;$(e).remove(),e=t}}setConnected(e){void 0===this._$AM&&(this._$Cv=e,this._$AP?.(e))}}class ee{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(e,t,i,o,s){this.type=1,this._$AH=N,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=N}_$AI(e,t=this,i,o){const s=this.strings;let r=!1;if(void 0===s)e=Q(this,e,t,0),r=!P(e)||e!==this._$AH&&e!==F,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===F&&(l=this._$AH[n]),r||=!P(l)||l!==this._$AH[n],l===N?e=N:e!==N&&(e+=(l??"")+s[n+1]),this._$AH[n]=l}r&&!o&&this.j(e)}j(e){e===N?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,e??"")}}class te extends ee{constructor(){super(...arguments),this.type=3}j(e){this.element[this.name]=e===N?void 0:e}}class ie extends ee{constructor(){super(...arguments),this.type=4}j(e){this.element.toggleAttribute(this.name,!!e&&e!==N)}}class oe extends ee{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)??N)===F)return;const i=this._$AH,o=e===N&&i!==N||e.capture!==i.capture||e.once!==i.once||e.passive!==i.passive,s=e!==N&&(i===N||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 se{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 re=w.litHtmlPolyfillSupport;re?.(X,J),(w.litHtmlVersions??=[]).push("3.3.2");const ne=globalThis;
|
|
18
18
|
/**
|
|
19
19
|
* @license
|
|
20
20
|
* Copyright 2017 Google LLC
|
|
21
21
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
22
|
-
*/let
|
|
22
|
+
*/let le=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 J(t.insertBefore(K(),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 F}};le._$litElement$=!0,le.finalized=!0,ne.litElementHydrateSupport?.({LitElement:le});const ae=ne.litElementPolyfillSupport;ae?.({LitElement:le}),(ne.litElementVersions??=[]).push("4.2.2");const de=n`
|
|
23
23
|
:host,
|
|
24
24
|
*,
|
|
25
25
|
*::before,
|
|
@@ -51,12 +51,12 @@ const $=globalThis,w=e=>e,R=$.trustedTypes,A=R?R.createPolicy("lit-html",{create
|
|
|
51
51
|
* @license
|
|
52
52
|
* Copyright 2017 Google LLC
|
|
53
53
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
54
|
-
*/,ce=e=>(t,i)=>{void 0!==i?i.addInitializer(()=>{customElements.define(e,t)}):customElements.define(e,t)},he={attribute:!0,type:String,converter:m,reflect:!1,hasChanged:
|
|
54
|
+
*/,ce=e=>(t,i)=>{void 0!==i?i.addInitializer(()=>{customElements.define(e,t)}):customElements.define(e,t)},he={attribute:!0,type:String,converter:m,reflect:!1,hasChanged:_},pe=(e=he,t,i)=>{const{kind:o,metadata:s}=i;let r=globalThis.litPropertyMetadata.get(s);if(void 0===r&&globalThis.litPropertyMetadata.set(s,r=new Map),"setter"===o&&((e=Object.create(e)).wrapped=!0),r.set(i.name,e),"accessor"===o){const{name:o}=i;return{set(i){const s=t.get.call(this);t.set.call(this,i),this.requestUpdate(o,s,e,!0,i)},init(t){return void 0!==t&&this.C(o,void 0,e,t),t}}}if("setter"===o){const{name:o}=i;return function(i){const s=this[o];t.call(this,i),this.requestUpdate(o,s,e,!0,i)}}throw Error("Unsupported decorator location: "+o)};function ue(e){return(t,i)=>"object"==typeof i?pe(e,t,i):((e,t,i)=>{const o=t.hasOwnProperty(i);return t.constructor.createProperty(i,e),o?Object.getOwnPropertyDescriptor(t,i):void 0})(e,t,i)}
|
|
55
55
|
/**
|
|
56
56
|
* @license
|
|
57
57
|
* Copyright 2017 Google LLC
|
|
58
58
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
59
|
-
*/function
|
|
59
|
+
*/function ge(e){return ue({...e,state:!0,attribute:!1})}
|
|
60
60
|
/**
|
|
61
61
|
* @license
|
|
62
62
|
* Copyright 2017 Google LLC
|
|
@@ -67,7 +67,7 @@ const $=globalThis,w=e=>e,R=$.trustedTypes,A=R?R.createPolicy("lit-html",{create
|
|
|
67
67
|
* Copyright 2017 Google LLC
|
|
68
68
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
69
69
|
*/
|
|
70
|
-
function fe(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
|
|
70
|
+
function fe(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 be=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};e.KRAccordion=class extends le{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">
|
|
@@ -133,30 +133,30 @@ function fe(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
|
-
`,
|
|
136
|
+
`,be([ue({type:String})],e.KRAccordion.prototype,"header",void 0),be([ue({type:Boolean,reflect:!0})],e.KRAccordion.prototype,"expanded",void 0),e.KRAccordion=be([ce("kr-accordion")],e.KRAccordion);
|
|
137
137
|
/**
|
|
138
138
|
* @license
|
|
139
139
|
* Copyright 2017 Google LLC
|
|
140
140
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
141
141
|
*/
|
|
142
|
-
const ve=1,ye=2,me=3,
|
|
142
|
+
const ve=1,ye=2,me=3,_e=4,xe=e=>(...t)=>({_$litDirective$:e,values:t});let ke=class{constructor(e){}get _$AU(){return this._$AM._$AU}_$AT(e,t,i){this._$Ct=e,this._$AM=t,this._$Ci=i}_$AS(e,t){return this.update(e,t)}update(e,t){return this.render(...t)}};
|
|
143
143
|
/**
|
|
144
144
|
* @license
|
|
145
145
|
* Copyright 2018 Google LLC
|
|
146
146
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
147
|
-
*/const
|
|
147
|
+
*/const we=xe(class extends ke{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 F}});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};e.KRAlert=class extends le{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>`:N}
|
|
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,7 +167,7 @@ const ve=1,ye=2,me=3,xe=4,ke=e=>(...t)=>({_$litDirective$:e,values:t});let _e=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
|
+
`:N}
|
|
171
171
|
</div>
|
|
172
172
|
`}},e.KRAlert.styles=n`
|
|
173
173
|
:host {
|
|
@@ -276,11 +276,22 @@ const ve=1,ye=2,me=3,xe=4,ke=e=>(...t)=>({_$litDirective$:e,values:t});let _e=cl
|
|
|
276
276
|
outline: 2px solid #3b82f6;
|
|
277
277
|
outline-offset: 2px;
|
|
278
278
|
}
|
|
279
|
-
|
|
279
|
+
`,$e([ue({type:String})],e.KRAlert.prototype,"type",void 0),$e([ue({type:String})],e.KRAlert.prototype,"header",void 0),$e([ue({type:Boolean})],e.KRAlert.prototype,"dismissible",void 0),$e([ue({type:Boolean})],e.KRAlert.prototype,"visible",void 0),e.KRAlert=$e([ce("kr-alert")],e.KRAlert);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};e.KRButton=class extends le{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
|
-
|
|
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>`:N}
|
|
282
|
+
${"idle"!==this._state?U`<span class="state-overlay">
|
|
283
|
+
${"loading"===this._state?U`<span class="spinner"></span>`:this._stateText}
|
|
284
|
+
</span>`:N}
|
|
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
|
+
`:N}
|
|
284
295
|
`}},e.KRButton.styles=n`
|
|
285
296
|
:host {
|
|
286
297
|
display: inline-flex;
|
|
@@ -361,7 +372,7 @@ const ve=1,ye=2,me=3,xe=4,ke=e=>(...t)=>({_$litDirective$:e,values:t});let _e=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,40 +437,103 @@ const ve=1,ye=2,me=3,xe=4,ke=e=>(...t)=>({_$litDirective$:e,values:t});let _e=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([ue({type:String,reflect:!0})],e.KRButton.prototype,"variant",void 0),Se([ue({type:String,reflect:!0})],e.KRButton.prototype,"color",void 0),Se([ue({type:String,reflect:!0})],e.KRButton.prototype,"size",void 0),Se([ue({type:Boolean,reflect:!0})],e.KRButton.prototype,"disabled",void 0),Se([ue({type:Array})],e.KRButton.prototype,"options",void 0),Se([ge()],e.KRButton.prototype,"_state",void 0),Se([ge()],e.KRButton.prototype,"_stateText",void 0),Se([ge()],e.KRButton.prototype,"_dropdownOpened",void 0),Se([ge()],e.KRButton.prototype,"_dropdownAlignRight",void 0),e.KRButton=Se([ce("kr-button")],e.KRButton);
|
|
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 Re extends ke{constructor(e){if(super(e),this.it=N,e.type!==ye)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(e){if(e===N||null==e)return this._t=void 0,this.it=e;if(e===F)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:[]}}}Re.directiveName="unsafeHTML",Re.resultType=1;const Ce=xe(Re);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};e.KRCodeDemo=class extends le{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>${Ce(this.getHighlightedCode())}</code></pre>
|
|
463
537
|
</div>
|
|
464
538
|
|
|
465
539
|
`}},e.KRCodeDemo.styles=n`
|
|
@@ -622,15 +696,15 @@ class Ae extends _e{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
|
+
`,Te([ue({type:String})],e.KRCodeDemo.prototype,"language",void 0),Te([ue({type:String})],e.KRCodeDemo.prototype,"code",void 0),Te([ge()],e.KRCodeDemo.prototype,"activeTab",void 0),Te([ge()],e.KRCodeDemo.prototype,"copied",void 0),e.KRCodeDemo=Te([ce("kr-code-demo")],e.KRCodeDemo);var Ae=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};e.KRContextMenu=class extends le{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
|
`)}
|
|
@@ -690,7 +764,7 @@ class Ae extends _e{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
|
+
`,Ae([ge()],e.KRContextMenu.prototype,"items",void 0),e.KRContextMenu=Ae([ce("kr-context-menu")],e.KRContextMenu);var Ee=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 Oe{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}}e.KRDialog=class extends le{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 Oe,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}
|
|
@@ -720,10 +794,10 @@ class Ae extends _e{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
|
+
`,Ee([ge()],e.KRDialog.prototype,"contentElement",void 0),e.KRDialog=Ee([ce("kr-dialog")],e.KRDialog);var Ke,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};e.KRSnackbar=Ke=class extends le{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"),Ke.activeSnackbars.push(this),this.updatePositions(),this.duration>0&&(this.dismissTimeout=window.setTimeout(()=>{this.dismiss()},this.duration))}disconnectedCallback(){super.disconnectedCallback();const e=Ke.activeSnackbars.indexOf(this);e>-1&&Ke.activeSnackbars.splice(e,1),this.updatePositions(),this.dismissTimeout&&clearTimeout(this.dismissTimeout)}updatePositions(){let e=24;for(const t of Ke.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
|
|
@@ -883,17 +957,17 @@ class Ae extends _e{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
|
-
`,e.KRSnackbar.activeSnackbars=[],Pe([ue({type:String})],e.KRSnackbar.prototype,"type",void 0),Pe([ue({type:String})],e.KRSnackbar.prototype,"title",void 0),Pe([ue({type:String})],e.KRSnackbar.prototype,"message",void 0),Pe([ue({type:Number})],e.KRSnackbar.prototype,"duration",void 0),e.KRSnackbar=
|
|
960
|
+
`,e.KRSnackbar.activeSnackbars=[],Pe([ue({type:String})],e.KRSnackbar.prototype,"type",void 0),Pe([ue({type:String})],e.KRSnackbar.prototype,"title",void 0),Pe([ue({type:String})],e.KRSnackbar.prototype,"message",void 0),Pe([ue({type:Number})],e.KRSnackbar.prototype,"duration",void 0),e.KRSnackbar=Ke=Pe([ce("kr-snackbar")],e.KRSnackbar);
|
|
887
961
|
/**
|
|
888
962
|
* @license
|
|
889
963
|
* Copyright 2018 Google LLC
|
|
890
964
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
891
965
|
*/
|
|
892
|
-
const ze="important",
|
|
966
|
+
const ze="important",Le=" !"+ze,De=xe(class extends ke{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(Le);e.includes("-")||t?i.setProperty(e,t?o.slice(0,-11):o,t?ze:""):i[e]=o}}return F}});var Me=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};e.KRTabGroup=class extends le{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 N;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 ze="important",je=" !"+ze,Me=ke(class extends _e{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=${De({backgroundColor:e.badgeBackground,color:e.badgeColor})}>${e.badge}</span>`:N}
|
|
982
|
+
${e.dismissible?U`
|
|
909
983
|
<button
|
|
910
984
|
class="label-dismiss"
|
|
911
985
|
type="button"
|
|
@@ -914,7 +988,7 @@ const ze="important",je=" !"+ze,Me=ke(class extends _e{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
|
+
`:N}
|
|
918
992
|
</button>
|
|
919
993
|
`)}
|
|
920
994
|
</div>
|
|
@@ -928,7 +1002,9 @@ const ze="important",je=" !"+ze,Me=ke(class extends _e{constructor(e){if(super(e
|
|
|
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 ze="important",je=" !"+ze,Me=ke(class extends _e{constructor(e){if(super(e
|
|
|
1051
1127
|
::slotted(kr-tab[active]) {
|
|
1052
1128
|
display: block;
|
|
1053
1129
|
}
|
|
1054
|
-
`],
|
|
1130
|
+
`],Me([ue({type:String,attribute:"active-tab-id"})],e.KRTabGroup.prototype,"activeTabId",void 0),Me([ue({type:Boolean})],e.KRTabGroup.prototype,"justified",void 0),Me([ue({type:String,reflect:!0})],e.KRTabGroup.prototype,"size",void 0),e.KRTabGroup=Me([ce("kr-tab-group")],e.KRTabGroup);var je=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};e.KRTab=class extends le{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>`}},e.KRTab.styles=[de,n`
|
|
1055
1131
|
:host {
|
|
1056
1132
|
display: none;
|
|
1057
1133
|
}
|
|
@@ -1059,13 +1135,631 @@ const ze="important",je=" !"+ze,Me=ke(class extends _e{constructor(e){if(super(e
|
|
|
1059
1135
|
:host([active]) {
|
|
1060
1136
|
display: block;
|
|
1061
1137
|
}
|
|
1062
|
-
`],
|
|
1138
|
+
`],je([ue({type:String,reflect:!0})],e.KRTab.prototype,"id",void 0),je([ue({type:String})],e.KRTab.prototype,"title",void 0),je([ue({type:String})],e.KRTab.prototype,"badge",void 0),je([ue({type:String,attribute:"badge-background"})],e.KRTab.prototype,"badgeBackground",void 0),je([ue({type:String,attribute:"badge-color"})],e.KRTab.prototype,"badgeColor",void 0),je([ue({type:Boolean})],e.KRTab.prototype,"disabled",void 0),je([ue({type:Boolean})],e.KRTab.prototype,"dismissible",void 0),je([ue({type:Boolean,reflect:!0})],e.KRTab.prototype,"active",void 0),e.KRTab=je([ce("kr-tab")],e.KRTab);var Be=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 He=['"',"+","-","&&","||","!","(",")","{","}","[","]","^","~","*","?",":"],Ie=['\\"',"\\+","\\-","\\&\\&","\\|\\|","\\!","\\(","\\)","\\{","\\}","\\[","\\]","\\^","\\~","\\*","\\?","\\:"];function qe(e){let t=e;for(let e=0;e<He.length;e++)t=t.split(He[e]).join(Ie[e]);return t}e.KRTable=class extends le{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 t;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:t={page:this._page-1,size:this._pageSize,sorts:[],filterFields:[],queryFields:[],facetFields:[]},this._searchQuery?.trim().length&&t.queryFields.push({name:"_text_",operation:"IS",value:qe(this._searchQuery)})}this._def.dataSource.fetch(t).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(t=>{this._dataState="error",e.KRSnackbar.show({message:t instanceof Error?t.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?Ce(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?N: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
|
+
`:N}
|
|
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>`:N}_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=${De(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>`:N}</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=${De(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>`}},e.KRTable.styles=[de,n`
|
|
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
|
+
`],Be([ge()],e.KRTable.prototype,"_data",void 0),Be([ge()],e.KRTable.prototype,"_dataState",void 0),Be([ge()],e.KRTable.prototype,"_page",void 0),Be([ge()],e.KRTable.prototype,"_pageSize",void 0),Be([ge()],e.KRTable.prototype,"_totalItems",void 0),Be([ge()],e.KRTable.prototype,"_totalPages",void 0),Be([ge()],e.KRTable.prototype,"_searchQuery",void 0),Be([ge()],e.KRTable.prototype,"_canScrollLeft",void 0),Be([ge()],e.KRTable.prototype,"_canScrollRight",void 0),Be([ge()],e.KRTable.prototype,"_canScrollHorizontal",void 0),Be([ge()],e.KRTable.prototype,"_columnPickerOpen",void 0),Be([ge()],e.KRTable.prototype,"_displayedColumns",void 0),Be([ue({type:Object})],e.KRTable.prototype,"def",void 0),e.KRTable=Be([ce("kr-table")],e.KRTable);
|
|
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 Ue=e=>e??N,Fe={},Ne=xe(class extends ke{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===F||t===N)return t;const i=e.element,o=e.name;if(e.type===me){if(t===i[o])return F}else if(e.type===_e){if(!!t===i.hasAttribute(o))return F}else if(e.type===ve&&i.getAttribute(o)===t+"")return F;return((e,t=Fe)=>{e._$AH=t;
|
|
1069
1763
|
/**
|
|
1070
1764
|
* @license
|
|
1071
1765
|
* Copyright 2020 Google LLC
|
|
@@ -1075,33 +1769,33 @@ const Be=e=>e??q,Ie={},He=ke(class extends _e{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 Ve=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};e.KRTextField=class extends le{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=${Ne(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=${Ue(this.minlength)}
|
|
1791
|
+
maxlength=${Ue(this.maxlength)}
|
|
1792
|
+
pattern=${Ue(this.pattern)}
|
|
1793
|
+
autocomplete=${Ue(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
1800
|
`}focus(){this._input?.focus()}blur(){this._input?.blur()}select(){this._input?.select()}},e.KRTextField.styles=n`
|
|
1107
1801
|
:host {
|
|
@@ -1139,8 +1833,8 @@ const Be=e=>e??q,Ie={},He=ke(class extends _e{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 Be=e=>e??q,Ie={},He=ke(class extends _e{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
|
-
`,e.KRTextField.formAssociated=!0,
|
|
1867
|
+
`,e.KRTextField.formAssociated=!0,Ve([ue({type:String})],e.KRTextField.prototype,"label",void 0),Ve([ue({type:String})],e.KRTextField.prototype,"name",void 0),Ve([ue({type:String})],e.KRTextField.prototype,"value",void 0),Ve([ue({type:String})],e.KRTextField.prototype,"placeholder",void 0),Ve([ue({type:String})],e.KRTextField.prototype,"type",void 0),Ve([ue({type:Boolean})],e.KRTextField.prototype,"required",void 0),Ve([ue({type:Boolean})],e.KRTextField.prototype,"disabled",void 0),Ve([ue({type:Boolean})],e.KRTextField.prototype,"readonly",void 0),Ve([ue({type:Number})],e.KRTextField.prototype,"minlength",void 0),Ve([ue({type:Number})],e.KRTextField.prototype,"maxlength",void 0),Ve([ue({type:String})],e.KRTextField.prototype,"pattern",void 0),Ve([ue({type:String})],e.KRTextField.prototype,"autocomplete",void 0),Ve([ue({type:String})],e.KRTextField.prototype,"hint",void 0),Ve([fe("input")],e.KRTextField.prototype,"_input",void 0),Ve([ge()],e.KRTextField.prototype,"_touched",void 0),Ve([ge()],e.KRTextField.prototype,"_dirty",void 0),e.KRTextField=Ve([ce("kr-text-field")],e.KRTextField);var We=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};e.KRSelect=class extends le{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
|
+
`:N}
|
|
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 Be=e=>e??q,Ie={},He=ke(class extends _e{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,26 +1894,26 @@ const Be=e=>e??q,Ie={},He=ke(class extends _e{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>`:N}
|
|
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>
|
|
@@ -1410,9 +2104,9 @@ const Be=e=>e??q,Ie={},He=ke(class extends _e{constructor(e){if(super(e),e.type!
|
|
|
1410
2104
|
.options-slot {
|
|
1411
2105
|
display: none;
|
|
1412
2106
|
}
|
|
1413
|
-
`,e.KRSelect.formAssociated=!0,
|
|
2107
|
+
`,e.KRSelect.formAssociated=!0,We([ue({type:String})],e.KRSelect.prototype,"label",void 0),We([ue({type:String})],e.KRSelect.prototype,"name",void 0),We([ue({type:String})],e.KRSelect.prototype,"value",void 0),We([ue({type:String})],e.KRSelect.prototype,"placeholder",void 0),We([ue({type:Boolean})],e.KRSelect.prototype,"disabled",void 0),We([ue({type:Boolean})],e.KRSelect.prototype,"required",void 0),We([ue({type:Boolean})],e.KRSelect.prototype,"readonly",void 0),We([ue({type:String})],e.KRSelect.prototype,"hint",void 0),We([ge()],e.KRSelect.prototype,"_isOpen",void 0),We([ge()],e.KRSelect.prototype,"_highlightedIndex",void 0),We([ge()],e.KRSelect.prototype,"_touched",void 0),We([fe(".select-trigger")],e.KRSelect.prototype,"_triggerElement",void 0),e.KRSelect=We([ce("kr-select")],e.KRSelect);var Ze=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};e.KRSelectOption=class extends le{constructor(){super(...arguments),this.value="",this.disabled=!1}get label(){return this.textContent?.trim()||""}render(){return U`<slot></slot>`}},e.KRSelectOption.styles=n`
|
|
1414
2108
|
:host {
|
|
1415
2109
|
display: none;
|
|
1416
2110
|
}
|
|
1417
|
-
`,
|
|
2111
|
+
`,Ze([ue({type:String})],e.KRSelectOption.prototype,"value",void 0),Ze([ue({type:Boolean})],e.KRSelectOption.prototype,"disabled",void 0),e.KRSelectOption=Ze([ce("kr-select-option")],e.KRSelectOption),e.DialogRef=Oe,e.krBaseCSS=de}),function(e){Object.keys(e).forEach(function(t){t.startsWith("KR")&&"function"==typeof e[t]&&(e[t.slice(2)]=e[t],delete e[t])})}(kr);
|
|
1418
2112
|
//# sourceMappingURL=krubble.umd.min.js.map
|