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